Finish ads

Cargo.toml

@@ -16,3 +16,6 @@ strip = true # Remove debug symbols
 
 [profile.dev.package.sqlx-macros]
 opt-level = 3
+
+[patch.crates-io]
+wry = { path = "../wry" }

apps/app-frontend/src/components/ui/PromotionWrapper.vue

@@ -54,12 +54,21 @@ function updateAdPosition() {
   if (adsWrapper.value) {
     const rect = adsWrapper.value.getBoundingClientRect()
 
-    init_ads_window(
-      rect.left + window.scrollX,
-      rect.top + window.scrollY,
-      rect.right - rect.left,
-      rect.bottom - rect.top,
-    )
+    let y = rect.top + window.scrollY
+    let height = rect.bottom - rect.top
+
+    // Prevent ad from overlaying the app bar
+    if (y <= 52) {
+      y = 52
+      height = rect.bottom - 52
+
+      if (height < 0) {
+        height = 0
+        y = -1000
+      }
+    }
+
+    init_ads_window(rect.left + window.scrollX, y, rect.right - rect.left, height)
   }
 }
 
@@ -83,7 +92,7 @@ onUnmounted(() => {
   <div
     v-if="showAd"
     ref="adsWrapper"
-    class="ad-parent relative mb-3 flex w-full justify-center rounded-2xl bg-bg-raised"
+    class="ad-parent relative mb-3 flex w-full justify-center rounded-2xl bg-bg-raised cursor-pointer"
   >
     <div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
       <p class="m-0 text-2xl font-bold text-contrast">90% of ad revenue goes to creators</p>

apps/app-frontend/src/pages/project/Index.vue

@@ -310,11 +310,13 @@ async function fetchProjectData() {
 
 await fetchProjectData()
 
+const promo = ref(null)
 watch(
   () => route.params.id,
   async () => {
     if (route.params.id && route.path.startsWith('/project')) {
       await fetchProjectData()
+      promo.value.scroll()
     }
   },
 )

apps/app/capabilities/ads.json

@@ -3,7 +3,7 @@
   "description": "",
   "local": false,
   "remote": {
-    "urls": ["https://*.modrinth.com/*"]
+    "urls": ["https://modrinth.com/wrapper/app-ads", "http://localhost:3000/*"]
   },
   "webviews": [
     "ads-window"

apps/app/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"ads":{"identifier":"ads","description":"","remote":{"urls":["https://*.modrinth.com/*"]},"local":false,"webviews":["ads-window"],"permissions":["shell:allow-open"]},"core":{"identifier":"core","description":"","local":true,"windows":["main"],"permissions":["core:default","core:path:default","core:event:default","core:window:default","core:app:default","core:resources:default","core:menu:default","core:tray:default","core:window:allow-create","core:window:allow-maximize","core:window:allow-toggle-maximize","core:window:allow-unmaximize","core:window:allow-minimize","core:window:allow-unminimize","core:window:allow-show","core:window:allow-hide","core:window:allow-close","core:window:allow-set-decorations","core:window:allow-start-dragging","core:webview:allow-set-webview-zoom"]},"plugins":{"identifier":"plugins","description":"","local":true,"windows":["main"],"permissions":["dialog:allow-open","dialog:allow-confirm","shell:allow-open","os:allow-platform","os:allow-version","os:allow-os-type","os:allow-family","os:allow-arch","os:allow-exe-extension","os:allow-locale","os:allow-hostname","deep-link:default","window-state:default","window-state:allow-restore-state","window-state:allow-save-window-state","auth:default","import:default","jre:default","logs:default","metadata:default","mr-auth:default","profile-create:default","pack:default","process:default","profile:default","cache:default","settings:default","tags:default","utils:default","ads:default"]}}
+{"ads":{"identifier":"ads","description":"","remote":{"urls":["https://modrinth.com/wrapper/app-ads","http://localhost:3000/*"]},"local":false,"webviews":["ads-window"],"permissions":["shell:allow-open"]},"core":{"identifier":"core","description":"","local":true,"windows":["main"],"permissions":["core:default","core:path:default","core:event:default","core:window:default","core:app:default","core:resources:default","core:menu:default","core:tray:default","core:window:allow-create","core:window:allow-maximize","core:window:allow-toggle-maximize","core:window:allow-unmaximize","core:window:allow-minimize","core:window:allow-unminimize","core:window:allow-show","core:window:allow-hide","core:window:allow-close","core:window:allow-set-decorations","core:window:allow-start-dragging","core:webview:allow-set-webview-zoom"]},"plugins":{"identifier":"plugins","description":"","local":true,"windows":["main"],"permissions":["dialog:allow-open","dialog:allow-confirm","shell:allow-open","os:allow-platform","os:allow-version","os:allow-os-type","os:allow-family","os:allow-arch","os:allow-exe-extension","os:allow-locale","os:allow-hostname","deep-link:default","window-state:default","window-state:allow-restore-state","window-state:allow-save-window-state","auth:default","import:default","jre:default","logs:default","metadata:default","mr-auth:default","profile-create:default","pack:default","process:default","profile:default","cache:default","settings:default","tags:default","utils:default","ads:default"]}}

apps/app/src/api/ads-init.js

@@ -0,0 +1,17 @@
+document.addEventListener('click', function (e) {
+  let target = e.target
+  while (target != null) {
+    if (target.matches('a')) {
+      e.preventDefault()
+      if (target.href) {
+        window.top.postMessage({ modrinthOpenUrl: target.href }, 'https://modrinth.com')
+      }
+      break
+    }
+    target = target.parentElement
+  }
+})
+
+window.open = (url, target, features) => {
+  window.top.postMessage({ modrinthOpenUrl: url }, 'https://modrinth.com')
+}

apps/app/src/api/ads.rs

@@ -10,6 +10,8 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
         .build()
 }
 
+const LINK_SCRIPT: &str = include_str!("ads-init.js");
+
 #[tauri::command]
 pub async fn init_ads_window<R: Runtime>(
     app: tauri::AppHandle<R>,
@@ -27,10 +29,10 @@ pub async fn init_ads_window<R: Runtime>(
         window.add_child(
             tauri::webview::WebviewBuilder::new(
                 "ads-window",
-                WebviewUrl::External("https://aditude-test.modrinth.com/promo-frame.html".parse().unwrap()),
+                WebviewUrl::External("https://modrinth.com/wrapper/app-ads".parse().unwrap()),
             )
+                .initialization_script(LINK_SCRIPT)
                 .user_agent("ModrinthApp Ads Webview")
-                .accept_first_mouse(true)
                 .zoom_hotkeys_enabled(false)
                 .transparent(true),
             LogicalPosition::new(x, y),

apps/frontend/src/public/promo-frame.html

@@ -11,16 +11,39 @@
       margin: 0;
       padding: 0;
       overflow: hidden;
+      cursor: pointer;
+    }
+
+    .ads-container {
+      width: 100vw;
+      height: 100vh;
+      overflow: hidden;
+      position: relative;
+    }
+
+    #plus-link {
+      width: 100vw;
+      height: 100vh;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 0;
     }
 
     #modrinth-rail-1 {
       border-radius: 1rem;
-      overflow: hidden;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      z-index: 2;
     }
   </style>
 </head>
 <body>
-<div id="modrinth-rail-1" />
+<div class="ads-container">
+  <a id="plus-link" href="https://modrinth.com/plus"></a>
+  <div id="modrinth-rail-1" />
+</div>
 <script>
   window.tude = window.tude || { cmd: [] };
   tude.cmd.push(function () {
@@ -32,27 +55,19 @@
     ]);
   });
 
-  document.querySelector('body').addEventListener('click', function (e) {
-    let target = e.target
-    while (target != null) {
-      if (target.matches('a')) {
-        e.preventDefault()
-        if (target.href) {
-          window.__TAURI_INTERNALS__.invoke("plugin:shell|open", {
-            path: target.href
-          })
-        }
-        break
+  window.addEventListener(
+    'message',
+    (event) => {
+      if (event.data.modrinthOpenUrl && window.__TAURI_INTERNALS__) {
+        window.__TAURI_INTERNALS__.invoke('plugin:shell|open', {
+          path: event.data.modrinthOpenUrl,
+        })
       }
-      target = target.parentElement
-    }
-  })
+    },
+    false,
+  )
 
-  window.open = (url) => {
-    window.__TAURI_INTERNALS__.invoke("plugin:shell|open", {
-      path: url
-    })
-  }
+  document.addEventListener('contextmenu', event => event.preventDefault());
 </script>
 </body>
 </html>