Mute audio from playing in ads (#2471)

* Mute audio from playing in ads

* Update tauri version, get rid of custom

* bump wry

* fix more

* Fix lint

apps/app-frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@modrinth/app-frontend",
   "private": true,
-  "version": "0.8.7",
+  "version": "0.8.8",
   "type": "module",
   "scripts": {
     "dev": "vite",

apps/app-frontend/src/components/ui/install_flow/ModInstallModal.vue

@@ -230,7 +230,7 @@ const createInstance = async () => {
             @click="installModal.hide()"
           >
             <Avatar
-              :src="profile.icon_path ? tauri.convertFileSrc(profile.icon_path) : null"
+              :src="profile.icon_path ? convertFileSrc(profile.icon_path) : null"
               class="profile-image"
             />
             {{ profile.name }}

apps/app-frontend/src/pages/Settings.vue

@@ -363,6 +363,25 @@ async function purgeCache() {
           <span class="label__title size-card-header">Privacy</span>
         </h3>
       </div>
+      <div class="adjacent-input">
+        <label for="opt-out-analytics">
+          <span class="label__title">Personalized ads</span>
+          <span class="label__description">
+            Modrinth's ad provider, Aditude, shows ads based on your preferences. By disabling this
+            option, you opt out and ads will no longer be shown based on your interests.
+          </span>
+        </label>
+        <Toggle
+          id="opt-out-analytics"
+          :model-value="settings.personalized_ads"
+          :checked="settings.personalized_ads"
+          @update:model-value="
+            (e) => {
+              settings.personalized_ads = e
+            }
+          "
+        />
+      </div>
       <div class="adjacent-input">
         <label for="opt-out-analytics">
           <span class="label__title">Telemetry</span>

apps/app/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "theseus_gui"
-version = "0.8.7"
+version = "0.8.8"
 description = "The Modrinth App is a desktop application for managing your Minecraft mods"
 license = "GPL-3.0-only"
 repository = "https://github.com/modrinth/code/apps/app/"
@@ -8,7 +8,7 @@ edition = "2021"
 build = "build.rs"
 
 [build-dependencies]
-tauri-build = { git = "https://github.com/modrinth/tauri", features = ["codegen"], rev = "5e29428" }
+tauri-build = { version = "2.0.0-rc", features = ["codegen"] }
 
 [dependencies]
 theseus = { path = "../../packages/app-lib", features = ["tauri"] }
@@ -16,7 +16,7 @@ theseus = { path = "../../packages/app-lib", features = ["tauri"] }
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 
-tauri = { git = "https://github.com/modrinth/tauri", features = ["devtools", "macos-private-api", "protocol-asset", "unstable"], rev = "5e29428" }
+tauri = { version = "2.0.0-rc", features = ["devtools", "macos-private-api", "protocol-asset", "unstable"] }
 tauri-plugin-window-state = "2.0.0-rc"
 tauri-plugin-deep-link = "2.0.0-rc"
 tauri-plugin-os = "2.0.0-rc"

apps/app/README.md

@@ -22,7 +22,6 @@ Before you begin, ensure you have the following installed on your machine:
 Follow these steps to set up your development environment:
 
 ```bash
-cargo install tauri-cli --git https://github.com/modrinth/tauri.git --rev 5e2942876c2266594ed1db516c1d9975c873c36a
 pnpm install
 pnpm app:dev
 ```

apps/app/build.rs

@@ -228,6 +228,7 @@ fn main() {
                         "show_ads_window",
                         "record_ads_click",
                         "open_link",
+                        "get_ads_personalization",
                     ])
                     .default_permission(
                         DefaultPermissionRule::AllowAllCommands,

apps/app/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@modrinth/app",
   "scripts": {
-    "build": "cargo tauri build",
-    "tauri": "cargo tauri",
-    "dev": "cargo tauri dev",
+    "build": "tauri build",
+    "tauri": "tauri",
+    "dev": "tauri dev",
     "test": "cargo test",
     "lint": "cargo fmt --check && cargo clippy -- -D warnings",
     "fix": "cargo fmt && cargo clippy --fix"
   },
+  "devDependencies": {
+    "@tauri-apps/cli": "2.0.0-rc.16"
+  },
   "dependencies": {
     "@modrinth/app-frontend": "workspace:*",
     "@modrinth/app-lib": "workspace:*"

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

@@ -21,3 +21,86 @@ document.addEventListener(
 window.open = (url, target, features) => {
   window.top.postMessage({ modrinthOpenUrl: url }, 'https://modrinth.com')
 }
+
+function muteAudioContext() {
+  if (window.AudioContext || window.webkitAudioContext) {
+    const AudioContext = window.AudioContext || window.webkitAudioContext
+    const originalCreateMediaElementSource = AudioContext.prototype.createMediaElementSource
+    const originalCreateMediaStreamSource = AudioContext.prototype.createMediaStreamSource
+    const originalCreateMediaStreamTrackSource = AudioContext.prototype.createMediaStreamTrackSource
+    const originalCreateBufferSource = AudioContext.prototype.createBufferSource
+    const originalCreateOscillator = AudioContext.prototype.createOscillator
+
+    AudioContext.prototype.createGain = function () {
+      const gain = originalCreateGain.call(this)
+      gain.gain.value = 0
+      return gain
+    }
+
+    AudioContext.prototype.createMediaElementSource = function (mediaElement) {
+      const source = originalCreateMediaElementSource.call(this, mediaElement)
+      source.connect(this.createGain())
+      return source
+    }
+
+    AudioContext.prototype.createMediaStreamSource = function (mediaStream) {
+      const source = originalCreateMediaStreamSource.call(this, mediaStream)
+      source.connect(this.createGain())
+      return source
+    }
+
+    AudioContext.prototype.createMediaStreamTrackSource = function (mediaStreamTrack) {
+      const source = originalCreateMediaStreamTrackSource.call(this, mediaStreamTrack)
+      source.connect(this.createGain())
+      return source
+    }
+
+    AudioContext.prototype.createBufferSource = function () {
+      const source = originalCreateBufferSource.call(this)
+      source.connect(this.createGain())
+      return source
+    }
+
+    AudioContext.prototype.createOscillator = function () {
+      const oscillator = originalCreateOscillator.call(this)
+      oscillator.connect(this.createGain())
+      return oscillator
+    }
+  }
+}
+
+function muteVideo(mediaElement) {
+  let count = Number(mediaElement.getAttribute('data-modrinth-muted-count') ?? 0)
+
+  if (!mediaElement.muted || mediaElement.volume !== 0) {
+    mediaElement.muted = true
+    mediaElement.volume = 0
+
+    mediaElement.setAttribute('data-modrinth-muted-count', count + 1)
+  }
+
+  if (count > 5) {
+    // Video is detected as malicious, so it is removed from the page
+    mediaElement.remove()
+  }
+}
+
+function muteVideos() {
+  document.querySelectorAll('video, audio').forEach(function (mediaElement) {
+    muteVideo(mediaElement)
+
+    if (!mediaElement.hasAttribute('data-modrinth-muted')) {
+      mediaElement.addEventListener('volumechange', () => muteVideo(mediaElement))
+
+      mediaElement.setAttribute('data-modrinth-muted', 'true')
+    }
+  })
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  muteVideos()
+  muteAudioContext()
+
+  const observer = new MutationObserver(muteVideos)
+  observer.observe(document.body, { childList: true, subtree: true })
+})

apps/app/src/api/ads.rs

@@ -4,6 +4,7 @@ use std::time::{Duration, Instant};
 use tauri::plugin::TauriPlugin;
 use tauri::{Emitter, LogicalPosition, LogicalSize, Manager, Runtime};
 use tauri_plugin_shell::ShellExt;
+use theseus::settings;
 use tokio::sync::RwLock;
 
 pub struct AdsState {
@@ -14,6 +15,8 @@ pub struct AdsState {
     pub malicious_origins: HashSet<String>,
 }
 
+const AD_LINK: &str = "https://modrinth.com/wrapper/app-ads-cookie";
+
 pub fn init<R: Runtime>() -> TauriPlugin<R> {
     tauri::plugin::Builder::<R>::new("ads")
         .setup(|app, _api| {
@@ -31,11 +34,7 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
                 loop {
                     if let Some(webview) = app.webviews().get_mut("ads-window")
                     {
-                        let _ = webview.navigate(
-                            "https://modrinth.com/wrapper/app-ads-cookie"
-                                .parse()
-                                .unwrap(),
-                        );
+                        let _ = webview.navigate(AD_LINK.parse().unwrap());
                     }
 
                     tokio::time::sleep(std::time::Duration::from_secs(60 * 5))
@@ -52,6 +51,7 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
             show_ads_window,
             record_ads_click,
             open_link,
+            get_ads_personalization,
         ])
         .build()
 }
@@ -84,11 +84,11 @@ pub async fn init_ads_window<R: Runtime>(
             let _ = webview.set_size(LogicalSize::new(width, height));
         }
     } else if let Some(window) = app.get_window("main") {
-        let window = window.add_child(
+        let _ = window.add_child(
             tauri::webview::WebviewBuilder::new(
                 "ads-window",
                 WebviewUrl::External(
-                    "https://modrinth.com/wrapper/app-ads-cookie".parse().unwrap(),
+                   AD_LINK.parse().unwrap(),
                 ),
             )
             .initialization_script(LINK_SCRIPT)
@@ -102,12 +102,6 @@ pub async fn init_ads_window<R: Runtime>(
             },
             LogicalSize::new(width, height),
         );
-
-        if let Ok(window) = window {
-            window.listen_any("click", |event| {
-                println!("click: {:?}", event);
-            });
-        }
     }
 
     Ok(())
@@ -214,3 +208,9 @@ pub async fn open_link<R: Runtime>(
 
     Ok(())
 }
+
+#[tauri::command]
+pub async fn get_ads_personalization() -> crate::api::Result<bool> {
+    let res = settings::get().await?;
+    Ok(res.personalized_ads)
+}

apps/app/tauri.conf.json

@@ -52,7 +52,8 @@
     ]
   },
   "productName": "Modrinth App",
-  "version": "0.8.7",
+  "version": "0.8.8",
+  "mainBinaryName": "Modrinth App",
   "identifier": "ModrinthApp",
   "plugins": {
     "deep-link": {

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

@@ -44,19 +44,27 @@
   </head>
   <body>
     <div class="ads-container">
-      <a id="plus-link" href="https://modrinth.com/plus" target="_blank"></a>
+      <div id="plus-link"></div>
       <div id="modrinth-rail-1" />
     </div>
     <script>
-      window.tude = window.tude || { cmd: [] };
-      tude.cmd.push(function () {
-        tude.refreshAdsViaDivMappings([
-          {
-            divId: "modrinth-rail-1",
-            baseDivId: "pb-slot-square-2",
-          },
-        ]);
-      });
+      window.__TAURI_INTERNALS__.invoke("plugin:ads|get_ads_personalization", {})
+        .then((personalized) => {
+          window.tude = window.tude || { cmd: [] };
+
+          tude.cmd.push(function () {
+            tude.refreshAdsViaDivMappings([
+              {
+                divId: "modrinth-rail-1",
+                baseDivId: "pb-slot-square-2",
+              },
+            ]);
+
+            tude.setPrivacySettings({
+              personalizedAds: personalized ?? true,
+            })
+          });
+        });
 
       window.addEventListener(
         "message",
@@ -84,6 +92,15 @@
       });
 
       document.addEventListener("contextmenu", (event) => event.preventDefault());
+
+      const plusLink = document.getElementById("plus-link");
+      plusLink.addEventListener('click', function() {
+        window.__TAURI_INTERNALS__.invoke("plugin:ads|record_ads_click", {});
+        window.__TAURI_INTERNALS__.invoke("plugin:ads|open_link", {
+          path: 'https://modrinth.com/plus',
+          origin: 'https://modrinth.com',
+        });
+      });
     </script>
   </body>
 </html>