From 9fee861c15ca983018d4d6e01e6c153b99f1550c Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Tue, 16 Dec 2025 12:08:06 +0700
Subject: [PATCH 1/9] Remove Fluid Player integration from post media

Eliminated all Fluid Player-related code from PostMedia.vue, including lazy-loading of its CSS, player creation, and ad logic. Removed the fluid-player dependency from package.json and its exclusion from Sentry error reporting. Updated the content security policy in nuxt.config.js to retain 'unsafe-eval' for ads, but removed the specific Fluid Player comment.
---
 components/pages/posts/post/PostMedia.vue | 195 ++--------------------
 nuxt.config.js                            |  11 +-
 package.json                              |   1 -
 sentry.client.config.ts                   |   1 -
 4 files changed, 19 insertions(+), 189 deletions(-)

diff --git a/components/pages/posts/post/PostMedia.vue b/components/pages/posts/post/PostMedia.vue
index f7dcfeb4..8f688f84 100644
--- a/components/pages/posts/post/PostMedia.vue
+++ b/components/pages/posts/post/PostMedia.vue
@@ -1,16 +1,10 @@
 <script lang="ts" setup>
-import type { IPost } from '~/assets/js/post.dto'
-import { vIntersectionObserver } from '@vueuse/components'
-import fluidPlayer from 'fluid-player'
-import { proxyUrl } from 'assets/js/proxy'
-
-// Lazy-load Fluid Player CSS only when this component is used
-if (import.meta.client) {
-  import('fluid-player/src/css/fluidplayer.css')
-}
-
-const { isPremium } = useUserData()
-  const { autoplayAnimatedMedia } = useUserSettings()
+  import type { IPost } from '~/assets/js/post.dto'
+  import { vIntersectionObserver } from '@vueuse/components'
+  import { proxyUrl } from 'assets/js/proxy'
+
+  const { isPremium } = useUserData()
+  const { autoplayAnimatedMedia, autoplayVideos } = useUserSettings()
   let { timesVideoHasRendered } = useEthics()
   const { wasCurrentPageSSR } = useSSRDetection()
 
@@ -44,8 +38,6 @@ const { isPremium } = useUserData()
   const triedToLoadWithProxy = shallowRef(false)
   const triedToLoadPosterWithProxy = shallowRef(false)
 
-  let videoPlayer: FluidPlayerInstance | undefined
-
   const isAnimatedMediaLoading = ref(false)
   const isAnimatedMediaPlaying = ref(false)
   const mediaHasLoaded = ref(false)
@@ -57,7 +49,6 @@ const { isPremium } = useUserData()
 
     switch (true) {
       case isVideo.value:
-        createVideoPlayer()
         break
 
       case isAnimatedMedia.value:
@@ -89,181 +80,15 @@ const { isPremium } = useUserData()
       // Cancel any pending media requests - https://stackoverflow.com/a/28060352
       finalMediaElement.removeAttribute('src')
     }
-
-    //
-    else if (isVideo.value) {
-      destroyVideoPlayer()
-    }
   })
 
-  function createVideoPlayer() {
-    if (!mediaElement.value) {
-      throw new Error('Media element not found')
-    }
-
-    if (!isVideo.value) {
-      throw new Error('Media is not a video')
-    }
-
-    const fluidPlayerOptions: Partial<FluidPlayerOptions> = {
-      layoutControls: {
-        primaryColor: 'rgba(0, 0, 0, 0.7)',
-
-        fillToContainer: true,
-
-        preload: 'none',
-
-        loop: true,
-
-        playbackRateEnabled: true,
-
-        allowTheatre: false,
-
-        autoRotateFullScreen: true,
-
-        // Fix: Opening in fullscreen when searching something with "F"
-        keyboardControl: false,
-
-        controlBar: {
-          autoHide: true,
-
-          playbackRates: ['x2', 'x1.5', 'x1', 'x0.75', 'x0.5', 'x0.25']
-        },
-
-        contextMenu: {
-          controls: true,
-
-          links: [
-            {
-              label: 'Remove ads',
-              href: '/premium?utm_source=internal&utm_medium=player-context-menu'
-            },
-            {
-              label: 'Download',
-              href: localSrc.value
-            }
-          ]
-        },
-
-        miniPlayer: {
-          enabled: false
-        }
-      },
-
-      onBeforeXMLHttpRequest(request) {
-        request.withCredentials = false
-      },
-
-      vastOptions: {
-        adText: 'Only one ad per hour. Never see ads again with Premium!',
-
-        vastAdvanced: {
-          /**
-           * Handle empty VAST
-           */
-          vastVideoEndedCallback() {
-            if (!mediaElement.value?.src.endsWith('/null')) {
-              return
-            }
-
-            mediaElement.value.src = localSrc.value
-            videoPlayer?.play()
-          }
-        },
-
-        adList: []
-      }
-    }
-
-    if (!isPremium.value) {
-      timesVideoHasRendered.value++
-
-      // Only show pause roll ads every 2 videos
-      if (timesVideoHasRendered.value % 2 === 0) {
-        fluidPlayerOptions.vastOptions.adList.push(
-          // In-Video Banner
-          {
-            roll: 'onPauseRoll',
-            vastTag:
-              /**
-               * ExoClick
-               * Pros:
-               * Cons: Low revenue (7)
-               */
-              'https://s.magsrv.com/splash.php?idzone=5386214'
-          }
-        )
-      }
-      //
-
-      // Only show preroll ads after 3 videos, and every 3 videos
-      if (timesVideoHasRendered.value > 3 && timesVideoHasRendered.value % 3 === 0) {
-        fluidPlayerOptions.vastOptions.adList.push(
-          // In-Stream Video
-          {
-            roll: 'preRoll',
-            vastTag:
-              /**
-               * ExoClick
-               * Pros:
-               * Cons: Low revenue (9)
-               */
-              'https://s.magsrv.com/splash.php?idzone=5386496'
-
-            /**
-             * HilltopAds
-             * Pros:
-             * Cons: Low revenue (4)
-             */
-            // 'https://ellipticaltrack.com/dCm.FXz/doGMNPv/Z-GhUX/OermX9/u-ZqUEltk/PYTgYBy/ODTZQI5oNHDDEHtdNbjLIS5eNvDhk/0uMGgu?limit=1'
-
-            /**
-             * Clickadu
-             * Pros:
-             * Cons:
-             */
-            // 'https://anewfeedliberty.com/ceef/gdt3g0/tbt/2034767/tlk.xml'
-
-            /**
-             * AdSession
-             * Pros:
-             * Cons:
-             */
-            // 'https://s.eunow4u.com/v1/vast.php?idzone=2310'
-          }
-        )
-      }
-    }
-
-    videoPlayer = fluidPlayer(mediaElement.value as HTMLVideoElement, fluidPlayerOptions)
-
-    // TODO: Handle poster error
-  }
-
-  function destroyVideoPlayer() {
-    if (!videoPlayer) {
-      throw new Error('Player not found')
-    }
-
-    videoPlayer.destroy()
-  }
-
   function reloadVideoPlayer(shouldPlay: boolean = false) {
-    nextTick(() => {
-      destroyVideoPlayer()
-
+    if (shouldPlay) {
       nextTick(() => {
-        createVideoPlayer()
-
-        if (!shouldPlay) {
-          return
-        }
-
-        nextTick(() => {
-          videoPlayer?.play()
-        })
+        const video = mediaElement.value as HTMLVideoElement | null
+        video?.play()
       })
-    })
+    }
   }
 
   function startPlayingAnimatedMedia() {
diff --git a/nuxt.config.js b/nuxt.config.js
index dfcafc6d..577be3bb 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -424,10 +424,17 @@ _paq.push(['setExcludedQueryParams', ['page', 'cursor']])
         // Fix: enable any origin for images
         'img-src': ["'self'", 'http:', 'https:', 'data:', 'blob:'],
 
-        // Fix: enable fluid player fullscreen eval
         // @see https://nuxt-security.vercel.app/documentation/advanced/faq#cloudflare
         // @see https://nuxt-security.vercel.app/documentation/getting-started/configuration#defaults
-        'script-src': ["'self'", 'https:', "'unsafe-inline'", "'strict-dynamic'", "'nonce-{{nonce}}'", "'unsafe-eval'"],
+        'script-src': [
+          "'self'",
+          'https:',
+          "'unsafe-inline'",
+          "'strict-dynamic'",
+          "'nonce-{{nonce}}'",
+          // Fix: ads need this
+          "'unsafe-eval'"
+        ],
 
         // Fix: enable inline execution
         'script-src-attr': ["'unsafe-inline'"],
diff --git a/package.json b/package.json
index 534b3aca..82042322 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,6 @@
     "@vueuse/integrations": "^14.1.0",
     "@vueuse/rxjs": "^14.1.0",
     "es-toolkit": "^1.42.0",
-    "fluid-player": "^3.57.0",
     "js-abbreviation-number": "^1.4.0",
     "nuxt-headlessui": "^1.2.2",
     "nuxt-schema-org": "^5.0.9",
diff --git a/sentry.client.config.ts b/sentry.client.config.ts
index 184db4bb..229d0587 100644
--- a/sentry.client.config.ts
+++ b/sentry.client.config.ts
@@ -34,7 +34,6 @@ Sentry.init({
      */
     // Specific files
     /\/js\/popunder\.js/,
-    /\/fluid-player\//i,
 
     // Random plugins and extensions.
     /^resource:\/\//i,

From 65fbdcbe86de7babeb7eda17d9d3b90a0d607330 Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Tue, 16 Dec 2025 12:08:20 +0700
Subject: [PATCH 2/9] Add video autoplay setting and feed autoplay logic

Introduces a new 'autoplayVideos' user setting, UI toggle, and backup support. Implements feed-based video autoplay logic so only the most central visible video plays automatically, pausing others. Updates PostMedia.vue to use the new composable and setting, and adjusts preload behavior for videos.
---
 assets/js/BackupHelper.ts                 |   5 +-
 components/pages/posts/post/PostMedia.vue |  48 ++++-
 composables/useFeedAutoplay.ts            |  63 ++++++
 composables/useUserSettings.ts            |   7 +-
 package-lock.json                         | 248 ----------------------
 pages/settings.vue                        |  11 +-
 6 files changed, 125 insertions(+), 257 deletions(-)
 create mode 100644 composables/useFeedAutoplay.ts

diff --git a/assets/js/BackupHelper.ts b/assets/js/BackupHelper.ts
index 8d2d5f78..264b9392 100644
--- a/assets/js/BackupHelper.ts
+++ b/assets/js/BackupHelper.ts
@@ -17,7 +17,7 @@ export interface IBackupState {
 export async function createBackupState(): Promise<IBackupState> {
   const { userBooruList } = useBooruList()
   const { tagCollections } = useTagCollections()
-  const { postFullSizeImages, postsPerPage, autoplayAnimatedMedia } = useUserSettings()
+  const { postFullSizeImages, postsPerPage, autoplayAnimatedMedia, autoplayVideos } = useUserSettings()
 
   // TODO: Only save data that is not defaulted
 
@@ -30,7 +30,8 @@ export async function createBackupState(): Promise<IBackupState> {
     settings: {
       postFullSizeImages: postFullSizeImages.value,
       postsPerPage: postsPerPage.value,
-      autoplayAnimatedMedia: autoplayAnimatedMedia.value
+      autoplayAnimatedMedia: autoplayAnimatedMedia.value,
+      autoplayVideos: autoplayVideos.value
     }
   }
 
diff --git a/components/pages/posts/post/PostMedia.vue b/components/pages/posts/post/PostMedia.vue
index 8f688f84..ad2a601f 100644
--- a/components/pages/posts/post/PostMedia.vue
+++ b/components/pages/posts/post/PostMedia.vue
@@ -7,6 +7,10 @@
   const { autoplayAnimatedMedia, autoplayVideos } = useUserSettings()
   let { timesVideoHasRendered } = useEthics()
   const { wasCurrentPageSSR } = useSSRDetection()
+  const { hasInteracted } = useInteractionDetector()
+
+  const instance = getCurrentInstance()
+  const componentId = instance?.uid ?? Math.random()
 
   export interface PostMediaProps {
     postIndex: number
@@ -42,6 +46,8 @@
   const isAnimatedMediaPlaying = ref(false)
   const mediaHasLoaded = ref(false)
 
+  const { activeVideoId, updateCandidate } = useFeedAutoplay()
+
   onMounted(() => {
     if (!mediaElement.value) {
       return
@@ -60,6 +66,8 @@
   })
 
   onBeforeUnmount(() => {
+    updateCandidate(componentId, null, false)
+
     let finalMediaElement = mediaElement.value
 
     if (finalMediaElement == null) {
@@ -187,11 +195,41 @@
     }
 
     const entry = entries[0]
+    updateCandidate(componentId, mediaElement.value, entry.isIntersecting)
+  }
 
-    if (!entry.isIntersecting) {
-      videoPlayer?.pause()
+  // Watch for active video changes to play/pause accordingly
+  watch(activeVideoId, (newId) => {
+    if (!isVideo.value || !mediaElement.value) {
+      return
     }
-  }
+
+    const video = mediaElement.value as HTMLVideoElement
+
+    if (newId === componentId) {
+      console.debug('Autoplaying video', props.postIndex)
+
+      // If user hasn't interacted with the page yet, force mute to ensure autoplay works
+      // and to avoid blasting sound unexpectedly
+      if (!hasInteracted.value) {
+        video.muted = true
+      }
+
+      const playPromise = video.play()
+
+      if (playPromise !== undefined) {
+        playPromise.catch((error) => {
+          // Auto-play was prevented
+          // AbortError is expected when scrolling fast
+          if (error.name !== 'AbortError') {
+            console.error('Error playing video:', error)
+          }
+        })
+      }
+    } else {
+      video.pause()
+    }
+  })
 
   function onMediaLoad(event: Event) {
     mediaHasLoaded.value = true
@@ -402,9 +440,10 @@
       <!-- Fix(rounded borders): add the same rounded borders that the parent has -->
       <video
         ref="mediaElement"
-        v-intersection-observer="[onVideoIntersectionObserver, { rootMargin: '100px' }]"
+        v-intersection-observer="[onVideoIntersectionObserver, { threshold: 0.2 }]"
         :height="mediaSrcHeight"
         :poster="localPosterSrc"
+        :preload="autoplayVideos ? 'metadata' : 'none'"
         :src="localSrc"
         :style="`aspect-ratio: ${mediaSrcWidth}/${mediaSrcHeight};`"
         :width="mediaSrcWidth"
@@ -412,7 +451,6 @@
         controls
         loop
         playsinline
-        preload="none"
         @error="onMediaError"
       />
     </div>
diff --git a/composables/useFeedAutoplay.ts b/composables/useFeedAutoplay.ts
new file mode 100644
index 00000000..7bd671c7
--- /dev/null
+++ b/composables/useFeedAutoplay.ts
@@ -0,0 +1,63 @@
+import { useThrottleFn } from '@vueuse/core'
+
+// Only track elements that are currently visible
+const visibleElements = new Map<number, HTMLElement>()
+let globalActiveVideoId: Ref<number | null> | null = null
+
+const calculateBestVideo = () => {
+  if (!globalActiveVideoId || visibleElements.size === 0) {
+    if (globalActiveVideoId?.value) globalActiveVideoId.value = null
+    return
+  }
+
+  const center = window.innerHeight / 2
+  let bestId: number | null = null
+  let minDiff = Infinity
+
+  for (const [id, element] of visibleElements) {
+    const rect = element.getBoundingClientRect()
+    const diff = Math.abs(center - (rect.top + rect.height / 2))
+
+    if (diff < minDiff) {
+      minDiff = diff
+      bestId = id
+    }
+  }
+
+  if (bestId !== null && bestId !== globalActiveVideoId.value) {
+    globalActiveVideoId.value = bestId
+  }
+}
+
+const throttledCheck = useThrottleFn(calculateBestVideo, 200)
+
+let listening = false
+const toggleListeners = (enable: boolean) => {
+  if (listening === enable || typeof window === 'undefined') return
+  const method = enable ? 'addEventListener' : 'removeEventListener'
+  // @ts-expect-error - EventListener options overlap
+  window[method]('scroll', throttledCheck, { passive: true })
+  // @ts-expect-error - EventListener options overlap
+  window[method]('resize', throttledCheck, { passive: true })
+  listening = enable
+}
+
+export const useFeedAutoplay = () => {
+  const activeVideoId = useState<number | null>('activeVideoId', () => null)
+  if (import.meta.client) globalActiveVideoId = activeVideoId
+
+  const updateCandidate = (id: number, element: HTMLElement | null, isVisible: boolean) => {
+    if (!import.meta.client) return
+
+    if (isVisible && element) {
+      visibleElements.set(id, element)
+    } else {
+      visibleElements.delete(id)
+    }
+
+    toggleListeners(visibleElements.size > 0)
+    throttledCheck()
+  }
+
+  return { activeVideoId, updateCandidate }
+}
diff --git a/composables/useUserSettings.ts b/composables/useUserSettings.ts
index 490cd8de..7dacd5a7 100644
--- a/composables/useUserSettings.ts
+++ b/composables/useUserSettings.ts
@@ -4,6 +4,7 @@ export default function () {
   let postFullSizeImages = ref<boolean>(true)
   let postsPerPage = ref<number>(29)
   let autoplayAnimatedMedia = ref<boolean>(false)
+  let autoplayVideos = ref<boolean>(false)
 
   if (import.meta.client) {
     postFullSizeImages = useLocalStorage('settings-postFullSizeImages', true, {
@@ -15,11 +16,15 @@ export default function () {
     autoplayAnimatedMedia = useLocalStorage('settings-autoplayAnimatedMedia', false, {
       writeDefaults: false
     })
+    autoplayVideos = useLocalStorage('settings-autoplayVideos', false, {
+      writeDefaults: false
+    })
   }
 
   return {
     postFullSizeImages,
     postsPerPage,
-    autoplayAnimatedMedia
+    autoplayAnimatedMedia,
+    autoplayVideos
   }
 }
diff --git a/package-lock.json b/package-lock.json
index aa43b4fd..f4e34ac9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,6 @@
         "@vueuse/integrations": "^14.1.0",
         "@vueuse/rxjs": "^14.1.0",
         "es-toolkit": "^1.42.0",
-        "fluid-player": "^3.57.0",
         "js-abbreviation-number": "^1.4.0",
         "nuxt-headlessui": "^1.2.2",
         "nuxt-schema-org": "^5.0.9",
@@ -9664,45 +9663,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/bcp-47": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-1.0.8.tgz",
-      "integrity": "sha512-Y9y1QNBBtYtv7hcmoX0tR+tUNSFZGZ6OL6vKPObq8BbOhkCoyayF6ogfLTgAli/KuAEbsYHYUNq2AQuY6IuLag==",
-      "license": "MIT",
-      "dependencies": {
-        "is-alphabetical": "^1.0.0",
-        "is-alphanumerical": "^1.0.0",
-        "is-decimal": "^1.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/bcp-47-match": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-1.0.3.tgz",
-      "integrity": "sha512-LggQ4YTdjWQSKELZF5JwchnBa1u0pIQSZf5lSdOHEdbVP55h0qICA/FUp3+W99q0xqxYa1ZQizTUH87gecII5w==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/bcp-47-normalize": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/bcp-47-normalize/-/bcp-47-normalize-1.1.1.tgz",
-      "integrity": "sha512-jWZ1Jdu3cs0EZdfCkS0UE9Gg01PtxnChjEBySeB+Zo6nkqtFfnvtoQQgP1qU1Oo4qgJgxhTI6Sf9y/pZIhPs0A==",
-      "license": "MIT",
-      "dependencies": {
-        "bcp-47": "^1.0.0",
-        "bcp-47-match": "^1.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -10231,12 +10191,6 @@
         "node": ">= 0.12.0"
       }
     },
-    "node_modules/codem-isoboxer": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/codem-isoboxer/-/codem-isoboxer-0.3.9.tgz",
-      "integrity": "sha512-4XOTqEzBWrGOZaMd+sTED2hLpzfBbiQCf1W6OBGkIHqk1D8uwy8WFLazVbdQwfDpQ+vf39lqTGPa9IhWW0roTA==",
-      "license": "MIT"
-    },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.3.tgz",
@@ -11575,24 +11529,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dashjs": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/dashjs/-/dashjs-4.7.4.tgz",
-      "integrity": "sha512-+hldo25QPP3H/NOwqUrvt4uKdMse60/Gsz9AUAnoYfhga8qHWq4nWiojUosOiigbigkDTCAn9ORcvUaKCvmfCA==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "bcp-47-match": "^1.0.3",
-        "bcp-47-normalize": "^1.1.1",
-        "codem-isoboxer": "0.3.9",
-        "es6-promise": "^4.2.8",
-        "fast-deep-equal": "2.0.1",
-        "html-entities": "^1.2.1",
-        "imsc": "^1.1.5",
-        "localforage": "^1.7.1",
-        "path-browserify": "^1.0.1",
-        "ua-parser-js": "^1.0.37"
-      }
-    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -11984,11 +11920,6 @@
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
-    "node_modules/dom-walk": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
-      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
-    },
     "node_modules/domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -12463,12 +12394,6 @@
         "benchmarks"
       ]
     },
-    "node_modules/es6-promise": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
-      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
-      "license": "MIT"
-    },
     "node_modules/esbuild": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
@@ -12682,12 +12607,6 @@
       "integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==",
       "license": "MIT"
     },
-    "node_modules/fast-deep-equal": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
-      "integrity": "sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==",
-      "license": "MIT"
-    },
     "node_modules/fast-fifo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
@@ -12859,19 +12778,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/fluid-player": {
-      "version": "3.57.0",
-      "resolved": "https://registry.npmjs.org/fluid-player/-/fluid-player-3.57.0.tgz",
-      "integrity": "sha512-9WgTSQkZ2WOxsqVr9u2gjO0Cwneuo5p7hNbbBltM10w3BzDC+OesvK0HmFPQWZyRsZGQh9qbHAmSwOGhWdAyJQ==",
-      "license": "MIT",
-      "dependencies": {
-        "dashjs": "^4.5.2",
-        "es6-promise": "^4.2.8",
-        "hls.js": "^1.5.13",
-        "panolens": "^0.12.1",
-        "videojs-vtt.js": "^0.15.4"
-      }
-    },
     "node_modules/fontaine": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/fontaine/-/fontaine-0.7.0.tgz",
@@ -13826,16 +13732,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/global": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
-      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
-      "license": "MIT",
-      "dependencies": {
-        "min-document": "^2.19.0",
-        "process": "^0.11.10"
-      }
-    },
     "node_modules/global-directory": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/global-directory/-/global-directory-4.0.1.tgz",
@@ -14091,12 +13987,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hls.js": {
-      "version": "1.6.14",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.14.tgz",
-      "integrity": "sha512-CSpT2aXsv71HST8C5ETeVo+6YybqCpHBiYrCRQSn3U5QUZuLTSsvtq/bj+zuvjLVADeKxoebzo16OkH8m1+65Q==",
-      "license": "Apache-2.0"
-    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -14136,12 +14026,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/html-entities": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz",
-      "integrity": "sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==",
-      "license": "MIT"
-    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -14271,12 +14155,6 @@
       "integrity": "sha512-3MOLanc3sb3LNGWQl1RlQlNWURE5g32aUphrDyFeCsxBTk08iE3VNe4CwsUZ0Qs1X+EfX0+r29Sxdpza4B+yRA==",
       "license": "MIT"
     },
-    "node_modules/immediate": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
-      "license": "MIT"
-    },
     "node_modules/import-in-the-middle": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-in-the-middle/-/import-in-the-middle-2.0.0.tgz",
@@ -14322,15 +14200,6 @@
         "unplugin-utils": "^0.2.4"
       }
     },
-    "node_modules/imsc": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/imsc/-/imsc-1.1.5.tgz",
-      "integrity": "sha512-V8je+CGkcvGhgl2C1GlhqFFiUOIEdwXbXLiu1Fcubvvbo+g9inauqT3l0pNYXGoLPBj3jxtZz9t+wCopMkwadQ==",
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "sax": "1.2.1"
-      }
-    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -14491,30 +14360,6 @@
         "url": "https://github.com/sponsors/brc-dd"
       }
     },
-    "node_modules/is-alphabetical": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
-      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/is-alphanumerical": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
-      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
-      "license": "MIT",
-      "dependencies": {
-        "is-alphabetical": "^1.0.0",
-        "is-decimal": "^1.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -14661,16 +14506,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-decimal": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
-      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/is-docker": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
@@ -16700,15 +16535,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/lie": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
-      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
-      "license": "MIT",
-      "dependencies": {
-        "immediate": "~3.0.5"
-      }
-    },
     "node_modules/lightningcss": {
       "version": "1.30.2",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
@@ -17080,15 +16906,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/localforage": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
-      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "lie": "3.1.1"
-      }
-    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -17371,15 +17188,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/min-document": {
-      "version": "2.19.1",
-      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.1.tgz",
-      "integrity": "sha512-8lqe85PkqQJzIcs2iD7xW/WSxcncC3/DPVbTOafKNJDIMXwGfwXS350mH4SJslomntN2iYtFBuC0yNO3CEap6g==",
-      "license": "MIT",
-      "dependencies": {
-        "dom-walk": "^0.1.0"
-      }
-    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -18512,15 +18320,6 @@
       "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
       "license": "MIT"
     },
-    "node_modules/panolens": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/panolens/-/panolens-0.12.1.tgz",
-      "integrity": "sha512-2hpjm+rRnDdaLD5Bak49K0Y9/X6vOr1OcyJx5piSA6sCOs1tsgchMgKIwpSGCMpBMHWZ10E/Cz4BIwyXYebt5g==",
-      "license": "MIT",
-      "dependencies": {
-        "three": "^0.105.2"
-      }
-    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -20594,12 +20393,6 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
-    "node_modules/sax": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
-      "integrity": "sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==",
-      "license": "ISC"
-    },
     "node_modules/scule": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
@@ -22104,12 +21897,6 @@
         "node": ">=0.10"
       }
     },
-    "node_modules/three": {
-      "version": "0.105.2",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.105.2.tgz",
-      "integrity": "sha512-L3Al37k4g3hVbgFFS251UVtIc25chhyN0/RvXzR0C+uIBToV6EKDG+MZzEXm9L2miGUVMK27W46/VkP6WUZXMg==",
-      "license": "MIT"
-    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -22413,32 +22200,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/ua-parser-js": {
-      "version": "1.0.41",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.41.tgz",
-      "integrity": "sha512-LbBDqdIC5s8iROCUjMbW1f5dJQTEFB1+KO9ogbvlb3nm9n4YHa5p4KTvFPWvh2Hs8gZMBuiB1/8+pdfe/tDPug==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/ua-parser-js"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/faisalman"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/faisalman"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "ua-parser-js": "script/cli.js"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/ufo": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
@@ -23130,15 +22891,6 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
-    "node_modules/videojs-vtt.js": {
-      "version": "0.15.5",
-      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
-      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "global": "^4.3.1"
-      }
-    },
     "node_modules/vite": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",
diff --git a/pages/settings.vue b/pages/settings.vue
index f5ebd7dd..b55ab1e8 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -12,7 +12,7 @@
 
   const appVersion = version
 
-  const { postFullSizeImages, postsPerPage, autoplayAnimatedMedia } = useUserSettings()
+  const { postFullSizeImages, postsPerPage, autoplayAnimatedMedia, autoplayVideos } = useUserSettings()
   const { isPremium } = useUserData()
   const { selectedList, defaultBlockList, customBlockList, resetCustomBlockList } = useBlockLists()
 
@@ -119,6 +119,15 @@
     <!-- Settings -->
     <section class="mx-2 mt-4 flex-auto">
       <ol class="space-y-4">
+        <!-- autoplayVideos -->
+        <li>
+          <SettingSwitch v-model="autoplayVideos">
+            <template #name> Autoplay Videos</template>
+
+            <template #description> Automatically play videos when they scroll into view </template>
+          </SettingSwitch>
+        </li>
+
         <!-- autoplayAnimatedMedia -->
         <li>
           <SettingSwitch v-model="autoplayAnimatedMedia">

From eb065615b7c3f0faf051b39bb2738b425d6e3a8e Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Tue, 16 Dec 2025 15:51:16 +0700
Subject: [PATCH 3/9] fix: suggestions by AI

---
 components/pages/posts/post/PostMedia.vue |  4 ++--
 composables/useFeedAutoplay.ts            | 19 +++++++++++++------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/components/pages/posts/post/PostMedia.vue b/components/pages/posts/post/PostMedia.vue
index ad2a601f..081f84ac 100644
--- a/components/pages/posts/post/PostMedia.vue
+++ b/components/pages/posts/post/PostMedia.vue
@@ -10,7 +10,7 @@
   const { hasInteracted } = useInteractionDetector()
 
   const instance = getCurrentInstance()
-  const componentId = instance?.uid ?? Math.random()
+  const componentId = instance!.uid
 
   export interface PostMediaProps {
     postIndex: number
@@ -200,7 +200,7 @@
 
   // Watch for active video changes to play/pause accordingly
   watch(activeVideoId, (newId) => {
-    if (!isVideo.value || !mediaElement.value) {
+    if (!isVideo.value || !mediaElement.value || !autoplayVideos.value) {
       return
     }
 
diff --git a/composables/useFeedAutoplay.ts b/composables/useFeedAutoplay.ts
index 7bd671c7..4dd6cf59 100644
--- a/composables/useFeedAutoplay.ts
+++ b/composables/useFeedAutoplay.ts
@@ -34,20 +34,27 @@ const throttledCheck = useThrottleFn(calculateBestVideo, 200)
 let listening = false
 const toggleListeners = (enable: boolean) => {
   if (listening === enable || typeof window === 'undefined') return
-  const method = enable ? 'addEventListener' : 'removeEventListener'
-  // @ts-expect-error - EventListener options overlap
-  window[method]('scroll', throttledCheck, { passive: true })
-  // @ts-expect-error - EventListener options overlap
-  window[method]('resize', throttledCheck, { passive: true })
+  const options = { passive: true }
+  if (enable) {
+    window.addEventListener('scroll', throttledCheck, options)
+    window.addEventListener('resize', throttledCheck, options)
+  } else {
+    window.removeEventListener('scroll', throttledCheck)
+    window.removeEventListener('resize', throttledCheck)
+  }
   listening = enable
 }
 
 export const useFeedAutoplay = () => {
+  const { autoplayVideos } = useUserSettings()
+
   const activeVideoId = useState<number | null>('activeVideoId', () => null)
   if (import.meta.client) globalActiveVideoId = activeVideoId
 
   const updateCandidate = (id: number, element: HTMLElement | null, isVisible: boolean) => {
-    if (!import.meta.client) return
+    if (!import.meta.client || !autoplayVideos.value) {
+      return
+    }
 
     if (isVisible && element) {
       visibleElements.set(id, element)

From 2085a0148461cffb5ea359f5933a638cda5aeb5f Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Tue, 16 Dec 2025 16:00:20 +0700
Subject: [PATCH 4/9] Set video muted state via binding instead of JS

Replaces manual muting in JavaScript with a Vue binding on the 'muted' attribute, ensuring videos are muted until user interaction. This simplifies the logic and leverages Vue's reactivity.
---
 components/pages/posts/post/PostMedia.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/components/pages/posts/post/PostMedia.vue b/components/pages/posts/post/PostMedia.vue
index 081f84ac..abb7cda9 100644
--- a/components/pages/posts/post/PostMedia.vue
+++ b/components/pages/posts/post/PostMedia.vue
@@ -211,10 +211,6 @@
 
       // If user hasn't interacted with the page yet, force mute to ensure autoplay works
       // and to avoid blasting sound unexpectedly
-      if (!hasInteracted.value) {
-        video.muted = true
-      }
-
       const playPromise = video.play()
 
       if (playPromise !== undefined) {
@@ -444,6 +440,7 @@
         :height="mediaSrcHeight"
         :poster="localPosterSrc"
         :preload="autoplayVideos ? 'metadata' : 'none'"
+        :muted="!hasInteracted"
         :src="localSrc"
         :style="`aspect-ratio: ${mediaSrcWidth}/${mediaSrcHeight};`"
         :width="mediaSrcWidth"

From 2223060600f8a37210506035657030f455503ae5 Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Tue, 16 Dec 2025 16:01:34 +0700
Subject: [PATCH 5/9] Fix video muted prop logic for autoplay

Updated the 'muted' prop on the video element to only set it when videos are autoplaying, preventing unintended muting when autoplay is disabled.
---
 components/pages/posts/post/PostMedia.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/pages/posts/post/PostMedia.vue b/components/pages/posts/post/PostMedia.vue
index abb7cda9..d313c0e0 100644
--- a/components/pages/posts/post/PostMedia.vue
+++ b/components/pages/posts/post/PostMedia.vue
@@ -440,7 +440,7 @@
         :height="mediaSrcHeight"
         :poster="localPosterSrc"
         :preload="autoplayVideos ? 'metadata' : 'none'"
-        :muted="!hasInteracted"
+        :muted="autoplayVideos ? !hasInteracted : undefined"
         :src="localSrc"
         :style="`aspect-ratio: ${mediaSrcWidth}/${mediaSrcHeight};`"
         :width="mediaSrcWidth"

From 2761cff03cfdf8059a6bb1b35823910eed54ce46 Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Tue, 16 Dec 2025 18:12:16 +0700
Subject: [PATCH 6/9] Restore autoplayVideos setting from backup

Added support to restore the autoplayVideos user setting when restoring from a v3 backup. This ensures all relevant user preferences are correctly restored.
---
 assets/js/BackupHelper.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/assets/js/BackupHelper.ts b/assets/js/BackupHelper.ts
index 264b9392..318c39f6 100644
--- a/assets/js/BackupHelper.ts
+++ b/assets/js/BackupHelper.ts
@@ -52,7 +52,7 @@ async function restoreV3Backup(backupState: IBackupState) {
   }
 
   if (backupState.settings) {
-    const { postFullSizeImages, postsPerPage, autoplayAnimatedMedia } = useUserSettings()
+    const { postFullSizeImages, postsPerPage, autoplayAnimatedMedia, autoplayVideos } = useUserSettings()
 
     if (backupState.settings.postFullSizeImages != null) {
       postFullSizeImages.value = backupState.settings.postFullSizeImages
@@ -65,6 +65,10 @@ async function restoreV3Backup(backupState: IBackupState) {
     if (backupState.settings.autoplayAnimatedMedia != null) {
       autoplayAnimatedMedia.value = backupState.settings.autoplayAnimatedMedia
     }
+
+    if (backupState.settings.autoplayVideos != null) {
+      autoplayVideos.value = backupState.settings.autoplayVideos
+    }
   }
 }
 

From d7ac19001f55e138b443c454ace9e2ce0eecead3 Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Tue, 16 Dec 2025 18:21:03 +0700
Subject: [PATCH 7/9] Refactor useFeedAutoplay to use useState for state

Replaces module-level variables with useState for activeVideoId, visibleElements, and listening, improving reactivity and SSR compatibility. Refactors related logic to use the new state structure and cleans up global variable usage.
---
 composables/useFeedAutoplay.ts | 87 +++++++++++++++++-----------------
 1 file changed, 43 insertions(+), 44 deletions(-)

diff --git a/composables/useFeedAutoplay.ts b/composables/useFeedAutoplay.ts
index 4dd6cf59..30524d17 100644
--- a/composables/useFeedAutoplay.ts
+++ b/composables/useFeedAutoplay.ts
@@ -1,55 +1,54 @@
 import { useThrottleFn } from '@vueuse/core'
 
-// Only track elements that are currently visible
-const visibleElements = new Map<number, HTMLElement>()
-let globalActiveVideoId: Ref<number | null> | null = null
-
-const calculateBestVideo = () => {
-  if (!globalActiveVideoId || visibleElements.size === 0) {
-    if (globalActiveVideoId?.value) globalActiveVideoId.value = null
-    return
-  }
+export const useFeedAutoplay = () => {
+  const { autoplayVideos } = useUserSettings()
+
+  const activeVideoId = useState<number | null>('feedAutoplay:activeVideoId', () => null)
+  const visibleElements = useState<Map<number, HTMLElement>>('feedAutoplay:visibleElements', () => new Map())
+  const listening = useState<boolean>('feedAutoplay:listening', () => false)
+
+  const calculateBestVideo = () => {
+    if (visibleElements.value.size === 0) {
+      if (activeVideoId.value) activeVideoId.value = null
+      return
+    }
 
-  const center = window.innerHeight / 2
-  let bestId: number | null = null
-  let minDiff = Infinity
+    const center = window.innerHeight / 2
+    let bestId: number | null = null
+    let minDiff = Infinity
 
-  for (const [id, element] of visibleElements) {
-    const rect = element.getBoundingClientRect()
-    const diff = Math.abs(center - (rect.top + rect.height / 2))
+    for (const [id, element] of visibleElements.value) {
+      const rect = element.getBoundingClientRect()
+      const diff = Math.abs(center - (rect.top + rect.height / 2))
 
-    if (diff < minDiff) {
-      minDiff = diff
-      bestId = id
+      if (diff < minDiff) {
+        minDiff = diff
+        bestId = id
+      }
     }
-  }
 
-  if (bestId !== null && bestId !== globalActiveVideoId.value) {
-    globalActiveVideoId.value = bestId
+    if (bestId !== null && bestId !== activeVideoId.value) {
+      activeVideoId.value = bestId
+    }
   }
-}
 
-const throttledCheck = useThrottleFn(calculateBestVideo, 200)
-
-let listening = false
-const toggleListeners = (enable: boolean) => {
-  if (listening === enable || typeof window === 'undefined') return
-  const options = { passive: true }
-  if (enable) {
-    window.addEventListener('scroll', throttledCheck, options)
-    window.addEventListener('resize', throttledCheck, options)
-  } else {
-    window.removeEventListener('scroll', throttledCheck)
-    window.removeEventListener('resize', throttledCheck)
-  }
-  listening = enable
-}
+  const throttledCheck = useThrottleFn(calculateBestVideo, 200)
 
-export const useFeedAutoplay = () => {
-  const { autoplayVideos } = useUserSettings()
+  const toggleListeners = (enable: boolean) => {
+    if (listening.value === enable || typeof window === 'undefined') return
+
+    const options = { passive: true }
 
-  const activeVideoId = useState<number | null>('activeVideoId', () => null)
-  if (import.meta.client) globalActiveVideoId = activeVideoId
+    if (enable) {
+      window.addEventListener('scroll', throttledCheck, options)
+      window.addEventListener('resize', throttledCheck, options)
+    } else {
+      window.removeEventListener('scroll', throttledCheck)
+      window.removeEventListener('resize', throttledCheck)
+    }
+
+    listening.value = enable
+  }
 
   const updateCandidate = (id: number, element: HTMLElement | null, isVisible: boolean) => {
     if (!import.meta.client || !autoplayVideos.value) {
@@ -57,12 +56,12 @@ export const useFeedAutoplay = () => {
     }
 
     if (isVisible && element) {
-      visibleElements.set(id, element)
+      visibleElements.value.set(id, element)
     } else {
-      visibleElements.delete(id)
+      visibleElements.value.delete(id)
     }
 
-    toggleListeners(visibleElements.size > 0)
+    toggleListeners(visibleElements.value.size > 0)
     throttledCheck()
   }
 

From f852c52d3770911f93bfe5d0b040e9fc7a3370dc Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Tue, 16 Dec 2025 18:38:13 +0700
Subject: [PATCH 8/9] Refactor Sentry config and improve error filtering

Replaces Sentry DSN with applicationKey in project config and updates all references. Integrates Sentry's thirdPartyErrorFilterIntegration for improved error filtering, removing custom beforeSend logic and extensive ignore lists. Updates Nuxt config to use the new applicationKey for Sentry bundler plugin.
---
 config/project.ts       |   5 +-
 nuxt.config.js          |   6 +-
 sentry.client.config.ts | 177 ++--------------------------------------
 3 files changed, 17 insertions(+), 171 deletions(-)

diff --git a/config/project.ts b/config/project.ts
index ed01a1aa..9570a5b5 100644
--- a/config/project.ts
+++ b/config/project.ts
@@ -23,7 +23,7 @@ export interface Analytics {
 }
 
 export interface Sentry {
-  dsn: string
+  applicationKey: string
 }
 
 export interface SEO {
@@ -85,6 +85,9 @@ export const project: ProjectConfig = {
     formbricksEnvironmentId: 'cm6gbkjeq0008l7036ckdvtnm',
     formbricksAppUrl: 'https://app.formbricks.com'
   },
+  sentry: {
+    applicationKey: 'r34-app'
+  },
   seo: {
     title: 'Rule 34 porn videos, GIFs and images at R34.app',
     description:
diff --git a/nuxt.config.js b/nuxt.config.js
index 577be3bb..0aa5fc3c 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -281,7 +281,11 @@ _paq.push(['setExcludedQueryParams', ['page', 'cursor']])
       authToken: process.env.SENTRY_AUTH_TOKEN,
 
       telemetry: false
-    }
+    },
+
+    unstable_sentryBundlerPluginOptions: {
+      applicationKey: project.sentry.applicationKey,
+    },
   },
 
   /** @type {import('@nuxt/image').ModuleOptions} */
diff --git a/sentry.client.config.ts b/sentry.client.config.ts
index 229d0587..919c048d 100644
--- a/sentry.client.config.ts
+++ b/sentry.client.config.ts
@@ -1,5 +1,6 @@
 import * as Sentry from '@sentry/nuxt'
 import { useRuntimeConfig } from '#imports'
+import { project } from './config/project'
 
 const config = useRuntimeConfig()
 
@@ -14,68 +15,24 @@ Sentry.init({
     Sentry.replayIntegration({
       maskAllText: false,
       unblock: ['svg']
+    }),
+
+    Sentry.thirdPartyErrorFilterIntegration({
+      filterKeys: [project.sentry.applicationKey],
+
+      behaviour: 'drop-error-if-contains-third-party-frames'
     })
   ],
 
   replaysSessionSampleRate: 0,
   replaysOnErrorSampleRate: 0.5,
 
-  beforeSend(event, hint) {
-    if (isInjectedCode(event)) {
-      return null
-    }
-
-    return event
-  },
-
   denyUrls: [
     /**
      * @see https://github.com/fdev/sentry-ignores
      */
     // Specific files
     /\/js\/popunder\.js/,
-
-    // Random plugins and extensions.
-    /^resource:\/\//i,
-    /127\.0\.0\.1:4001\/isrunning/i,
-    /bestpriceninja/i,
-    /googleapis/i,
-    /googlebot/i,
-    /googlest/i,
-    /itunes\.apple\.com\//i,
-    /metrics\.itunes\.apple\.com\.edgesuite\.net\//i,
-    /re-markit/i,
-    /webappstoolbarba\.texthelp\.com\//i,
-
-    // Analytics.
-    /doubleclick\.net/i,
-    /hotjar\./i,
-    /netstats\.space/i,
-    /pagead\/js/i,
-    /posthog\.com/i,
-
-    // Chrome extensions.
-    /^chrome:\/\//i,
-    /chrome-extension:/i,
-    /extensions\//i,
-
-    // Facebook.
-    /connect\.facebook\.net\/en_US\/all\.js/i,
-    /graph\.facebook\.com/i,
-
-    // Kaspersky antivirus.
-    /kaspersky/i,
-
-    // Locally saved copies
-    /file:\/\//i,
-
-    // Proxy servers.
-    /nph-proxy\./i,
-    /\.cloudfront\..+\/statistic\//i,
-
-    // Safari extensions.
-    /safari-web-extension:/i,
-    /safari-extension:/i
   ],
 
   ignoreErrors: [
@@ -96,123 +53,5 @@ Sentry.init({
 
     // - Misc -
     'ResizeObserver loop limit exceeded',
-
-    /**
-     * @see https://github.com/fdev/sentry-ignores
-     */
-    // Random plugins and extensions.
-    // http://blog.errorception.com/2012/03/tale-of-unfindable-js-error.html
-    'atomicFindClose',
-    "Can't find variable: ZiteReader",
-    'canvas.contentDocument',
-    'ComboSearch is not defined',
-    'http://loading.retry.widdit.com/',
-    'http://tt.epicplay.com',
-    'jigsaw is not defined',
-    'miscellaneous_bindings',
-    'MyApp_RemoveAllHighlights',
-    'originalCreateNotification',
-    'top.GLOBALS',
-
-    // Generic error code from errors outside the security sandbox.
-    'Script error.',
-
-    // Analytics code.
-    'vars.hotjar.com',
-    'doubleclick.net',
-
-    // Avast.
-    '_avast_',
-
-    // Facebook.
-    'fb_xd_fragment',
-
-    // Broadcom ASG error.
-    'ICAP Error',
-
-    // Bytemobile proxy.
-    'bmi_SafeAddOnload',
-    'EBCallBackMessageReceived',
-
-    // Conduit Toolbar.
-    'conduitPage',
-
-    // Chrome for iOS bug.
-    // https://groups.google.com/a/chromium.org/forum/#!topic/chromium-discuss/7VU0_VvC7mE
-    '__gCrWeb',
-
-    // Chromium bug.
-    // https://bugs.chromium.org/p/chromium/issues/detail?id=97172
-    'ntp is not defined',
-
-    // Edge on iOS.
-    'instantSearchSDKJSBridgeClearHighlight',
-
-    // Firefox bug.
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=783260
-    // http://stackoverflow.com/a/13101119
-    'Permission denied to access property "toString"',
-
-    // Firefox internals.
-    '_firefox_',
-
-    // Firefox freeing add-on memory.
-    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Dead_object
-    "can't access dead object",
-
-    // Nuance Dragon Web Extension.
-    'plugin.setSuspendState',
-
-    // Safari bug.
-    // https://bugs.webkit.org/show_bug.cgi?id=119472
-    'promiseReactionJob',
-
-    // SafeBrowse extension.
-    'jQSB',
-
-    // Commonly ignored errors of unknown origin.
-    'androidInterface',
-    'eshopcomp',
-    'eval at C',
-    'eval at E_c',
-    'frameConnector_isForegroundChanged',
-    'harkedtremblings',
-    'kw__injected',
-    'NPObject',
-    'siteroot',
-    'SymBrowser_',
-    'touchDownX',
-    'uiWebview_',
-    'variable: inf',
-    'Window.dologin'
   ]
-})
-
-/**
- *  Disable errors originating from injected scripts such as Google Tag Manager
- *  @see https://github.com/getsentry/sentry-javascript/issues/3147#issuecomment-1782504804
- **/
-function isInjectedCode(event: Sentry.Event | undefined): boolean {
-  const frames = event?.exception?.values?.[0]?.stacktrace?.frames
-
-  if (!frames || frames.length === 0) return false
-
-  const firstFrame = frames[0]
-
-  if (firstFrame.filename === '<anonymous>') {
-    return true
-  }
-
-  if (
-    frames.some(
-      (frame) =>
-        typeof frame.filename === 'string' &&
-        // Ignore errors from Partytown
-        frame.filename.includes('partytown')
-    )
-  ) {
-    return true
-  }
-
-  return false
-}
+})
\ No newline at end of file

From 3ec2c8c8dbd7d0b7eb6d140e70e69a496af72a67 Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Tue, 16 Dec 2025 18:38:31 +0700
Subject: [PATCH 9/9] Update composables/useFeedAutoplay.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 composables/useFeedAutoplay.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/composables/useFeedAutoplay.ts b/composables/useFeedAutoplay.ts
index 30524d17..288f78bb 100644
--- a/composables/useFeedAutoplay.ts
+++ b/composables/useFeedAutoplay.ts
@@ -43,8 +43,8 @@ export const useFeedAutoplay = () => {
       window.addEventListener('scroll', throttledCheck, options)
       window.addEventListener('resize', throttledCheck, options)
     } else {
-      window.removeEventListener('scroll', throttledCheck)
-      window.removeEventListener('resize', throttledCheck)
+      window.removeEventListener('scroll', throttledCheck, options)
+      window.removeEventListener('resize', throttledCheck, options)
     }
 
     listening.value = enable