From 8756b26d7f849df928d1364270dac147071083ab Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Tue, 23 Jun 2026 13:32:05 +0700
Subject: [PATCH 1/7] Fix proxied video poster loading for blocked booru CDNs.

Route video preview thumbnails through imgproxy under the same rules as feed images, add a premium CORS-proxy fallback when posters still fail, and keep PocketBase auth state in sync so premium retries run reliably.
---
 app/assets/js/nuxt-image/get-imgproxy-url.ts  |  12 ++
 app/components/pages/posts/post/PostMedia.vue |  83 +++++++++----
 app/composables/usePocketbase.ts              |  10 --
 app/composables/useUserData.ts                |  22 ++--
 app/plugins/030.pocketbase.ts                 |  23 ++++
 test/assets/get-imgproxy-url.test.ts          |  30 +++++
 test/pages/posts-video-proxy.test.ts          | 110 ++++++++++++++++++
 test/pages/posts.mock-data.ts                 |  43 +++++++
 test/pages/posts.test.ts                      |   8 +-
 test/server-mocks/plugin.ts                   |   5 +
 10 files changed, 297 insertions(+), 49 deletions(-)
 create mode 100644 app/assets/js/nuxt-image/get-imgproxy-url.ts
 create mode 100644 test/assets/get-imgproxy-url.test.ts
 create mode 100644 test/pages/posts-video-proxy.test.ts

diff --git a/app/assets/js/nuxt-image/get-imgproxy-url.ts b/app/assets/js/nuxt-image/get-imgproxy-url.ts
new file mode 100644
index 000000000..eee350d99
--- /dev/null
+++ b/app/assets/js/nuxt-image/get-imgproxy-url.ts
@@ -0,0 +1,12 @@
+import { project } from '../../../../config/project'
+import imgproxyProvider from './imgproxy.provider'
+
+export function getImgproxyUrl(src: string) {
+  const { url } = imgproxyProvider().getImage(src, {
+    baseUrl: project.imgproxy.baseUrl,
+    internalProxyUrl: project.imgproxy.internalProxyUrl,
+    mediaProxyUrls: project.imgproxy.mediaProxyUrls
+  })
+
+  return url
+}
diff --git a/app/components/pages/posts/post/PostMedia.vue b/app/components/pages/posts/post/PostMedia.vue
index e04be94f2..d45130dfc 100644
--- a/app/components/pages/posts/post/PostMedia.vue
+++ b/app/components/pages/posts/post/PostMedia.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
   import type { IPost, PostMediaType } from '~/assets/js/post.dto'
   import { vIntersectionObserver } from '@vueuse/components'
+  import { getImgproxyUrl } from '~/assets/js/nuxt-image/get-imgproxy-url'
   import { proxyUrl } from '~/assets/js/proxy'
 
   const localePath = useLocalePath()
@@ -35,8 +36,35 @@
 
   const mediaElement = shallowRef<MediaElementRef>(null)
 
+  const shouldProxyPosterWithImgproxy = computed(() => isPremium.value || (wasCurrentPageSSR.value && props.postIndex < 8))
+
+  function resolvePosterSrc(posterSrc: string | null | undefined) {
+    if (!posterSrc) {
+      return undefined
+    }
+
+    if (shouldProxyPosterWithImgproxy.value) {
+      return getImgproxyUrl(posterSrc)
+    }
+
+    return posterSrc
+  }
+
   const localSrc = shallowRef(props.mediaSrc ?? '')
-  const localPosterSrc = shallowRef(props.mediaPosterSrc ?? undefined)
+  const localPosterSrc = shallowRef(resolvePosterSrc(props.mediaPosterSrc))
+  const triedToLoadWithProxy = shallowRef(false)
+  const triedToLoadPosterWithProxy = shallowRef(false)
+
+  watch(
+    () => [props.mediaPosterSrc, shouldProxyPosterWithImgproxy.value] as const,
+    ([posterSrc]) => {
+      if (triedToLoadPosterWithProxy.value) {
+        return
+      }
+
+      localPosterSrc.value = resolvePosterSrc(posterSrc)
+    }
+  )
 
   const error = ref<Error | null>(null)
   const hasError = computed(() => error.value !== null)
@@ -79,9 +107,6 @@
     link: lcpVideoPosterPreloadLinks.value
   }))
 
-  const triedToLoadWithProxy = shallowRef(false)
-  const triedToLoadPosterWithProxy = shallowRef(false)
-
   let videoPlayer: FluidPlayerInstance | undefined
   let videoPlayerInitPromise: Promise<void> | null = null
   let videoPlayerIdleScheduled = false
@@ -297,8 +322,6 @@
     }
 
     videoPlayer = fluidPlayer(initializedVideoElement, fluidPlayerOptions)
-
-    // TODO: Handle poster error
   }
 
   function initializeVideoPlayer() {
@@ -388,21 +411,6 @@
       return
     }
 
-    // Proxy videos
-    if (
-      isVideo.value &&
-      isPremium.value &&
-      //
-      !triedToLoadWithProxy.value
-    ) {
-      localSrc.value = proxyUrl(localSrc.value)
-
-      reloadVideoPlayer(true)
-
-      triedToLoadWithProxy.value = true
-      return
-    }
-
     // Reset loading state if there's an error with GIF
     if (isAnimatedMedia.value && isAnimatedMediaPlaying.value) {
       isAnimatedMediaLoading.value = false
@@ -445,6 +453,25 @@
     error.value = new Error(t('errors.mediaLoadError'))
   }
 
+  function onVideoPosterPreloadError() {
+    if (!isPremium.value || triedToLoadPosterWithProxy.value || !props.mediaPosterSrc) {
+      return
+    }
+
+    localPosterSrc.value = proxyUrl(props.mediaPosterSrc)
+    triedToLoadPosterWithProxy.value = true
+  }
+
+  function onVideoPlaybackError(event: Event) {
+    if (hasError.value || !(event.target instanceof HTMLVideoElement) || !isPremium.value || triedToLoadWithProxy.value) {
+      return
+    }
+
+    localSrc.value = proxyUrl(props.mediaSrc ?? '')
+    reloadVideoPlayer(true)
+    triedToLoadWithProxy.value = true
+  }
+
   function manuallyReloadMedia() {
     // Reset state
     triedToLoadWithProxy.value = false
@@ -453,7 +480,7 @@
 
     // Reload media
     localSrc.value = props.mediaSrc ?? ''
-    localPosterSrc.value = props.mediaPosterSrc ?? undefined
+    localPosterSrc.value = resolvePosterSrc(props.mediaPosterSrc)
 
     if (isVideo.value) {
       nextTick(() => {
@@ -757,6 +784,16 @@
       v-else-if="isVideo"
       :key="localSrc"
     >
+      <!-- Detect poster load failures; video poster attr does not emit reliable error events. -->
+      <img
+        v-if="localPosterSrc"
+        :src="localPosterSrc"
+        alt=""
+        aria-hidden="true"
+        class="sr-only"
+        @error="onVideoPosterPreloadError"
+      />
+
       <!-- TODO: Add load animation -->
       <!-- Fix(rounded borders): add the same rounded borders that the parent has -->
       <video
@@ -772,7 +809,7 @@
         loop
         playsinline
         preload="none"
-        @error="onMediaError"
+        @error="onVideoPlaybackError"
         @focus="initializeVideoPlayer"
         @pointerdown="initializeVideoPlayer"
         @pointerenter="initializeVideoPlayer"
diff --git a/app/composables/usePocketbase.ts b/app/composables/usePocketbase.ts
index c9e06a0cd..7ddb840be 100644
--- a/app/composables/usePocketbase.ts
+++ b/app/composables/usePocketbase.ts
@@ -1,18 +1,8 @@
 export default function () {
-  const { $pocketBase } = useNuxtApp()
-
   const email = useState<string | null>('pocketbase-email', () => null)
   const license = useState<string | null>('pocketbase-license', () => null)
   const subscription_expires_at = useState<string | null>('pocketbase-subscription_expires_at', () => null)
 
-  const authModel = $pocketBase.authStore.model
-
-  if ($pocketBase.authStore.isValid && authModel) {
-    email.value = authModel.email
-    license.value = authModel.username
-    subscription_expires_at.value = authModel.subscription_expires_at
-  }
-
   return {
     email,
     license,
diff --git a/app/composables/useUserData.ts b/app/composables/useUserData.ts
index 2a7af6a20..096a56b17 100644
--- a/app/composables/useUserData.ts
+++ b/app/composables/useUserData.ts
@@ -3,21 +3,17 @@ export default function () {
   const { subscription_expires_at, license, email } = usePocketbase()
 
   return {
-    isPremium: computed(
-      //
-      () => {
-        // TODO: Check why this changes so many times
-        if (!$pocketBase.authStore.isValid) {
-          return false
-        }
-
-        if (!subscription_expires_at.value) {
-          return false
-        }
+    isPremium: computed(() => {
+      if (!$pocketBase.authStore.isValid) {
+        return false
+      }
 
-        return new Date(subscription_expires_at.value) > new Date()
+      if (!subscription_expires_at.value) {
+        return false
       }
-    ),
+
+      return new Date(subscription_expires_at.value) > new Date()
+    }),
 
     email: computed(
       //
diff --git a/app/plugins/030.pocketbase.ts b/app/plugins/030.pocketbase.ts
index 680b2a316..7ae7cd3b5 100644
--- a/app/plugins/030.pocketbase.ts
+++ b/app/plugins/030.pocketbase.ts
@@ -50,8 +50,31 @@ export default defineNuxtPlugin<{ pocketBase: PocketBase }>({
       pb.authStore.save(authCookie.token, authCookie.model)
     }
 
+    const subscriptionExpiresAt = useState<string | null>('pocketbase-subscription_expires_at', () => null)
+    const pocketbaseEmail = useState<string | null>('pocketbase-email', () => null)
+    const pocketbaseLicense = useState<string | null>('pocketbase-license', () => null)
+
+    function syncAuthState() {
+      const authModel = pb.authStore.model
+
+      if (!pb.authStore.isValid || !authModel) {
+        subscriptionExpiresAt.value = null
+        pocketbaseEmail.value = null
+        pocketbaseLicense.value = null
+        return
+      }
+
+      subscriptionExpiresAt.value = authModel.subscription_expires_at
+      pocketbaseEmail.value = authModel.email
+      pocketbaseLicense.value = authModel.username
+    }
+
+    syncAuthState()
+
     // send back the default 'pb_auth' cookie to the client with the latest store state
     pb.authStore.onChange(() => {
+      syncAuthState()
+
       cookie.value = {
         token: pb.authStore.token,
         model: pb.authStore.model
diff --git a/test/assets/get-imgproxy-url.test.ts b/test/assets/get-imgproxy-url.test.ts
new file mode 100644
index 000000000..c24f0cd57
--- /dev/null
+++ b/test/assets/get-imgproxy-url.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { getImgproxyUrl } from '../../app/assets/js/nuxt-image/get-imgproxy-url'
+
+function decodeImgproxySource(url: string) {
+  const parsedUrl = URL.parse(url)
+
+  if (!parsedUrl) {
+    throw new Error(`Invalid imgproxy URL: ${url}`)
+  }
+
+  const encodedSource = parsedUrl.pathname.split('/').at(-1)
+
+  if (!encodedSource) {
+    throw new Error('Missing encoded imgproxy source')
+  }
+
+  const padded = encodedSource.padEnd(Math.ceil(encodedSource.length / 4) * 4, '=')
+  return Buffer.from(padded.replace(/-/g, '+').replace(/_/g, '/'), 'base64').toString('utf8')
+}
+
+describe('getImgproxyUrl', () => {
+  it('returns an imgproxy URL that fetches through the internal nginx proxy', () => {
+    const sourceUrl = 'https://example.local/thumbnails/998/thumbnail_998.jpg'
+
+    const proxiedUrl = getImgproxyUrl(sourceUrl)
+
+    expect(proxiedUrl.startsWith('https://imgproxy2.r34.app/')).toBe(true)
+    expect(decodeImgproxySource(proxiedUrl)).toBe(`http://nginx-proxy/proxy?url=${sourceUrl}`)
+  })
+})
diff --git a/test/pages/posts-video-proxy.test.ts b/test/pages/posts-video-proxy.test.ts
new file mode 100644
index 000000000..1726f01b5
--- /dev/null
+++ b/test/pages/posts-video-proxy.test.ts
@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest'
+import { setup, url } from '@nuxt/test-utils'
+import { mockPostsPageWithOfflineVideo } from './posts.mock-data'
+import { defaultSetupConfig, useTrackedPageFactory } from '../helper'
+import { addPocketBaseAuthCookie, createPocketBaseMockState, mockPocketBase } from '../pocketbase-mock'
+
+function decodeImgproxySourceUrl(src: string) {
+  const encodedSource = src.split('/').pop()
+
+  if (!encodedSource) {
+    return null
+  }
+
+  const base64 = encodedSource.replace(/-/g, '+').replace(/_/g, '/')
+  const paddedBase64 = base64.padEnd(Math.ceil(base64.length / 4) * 4, '=')
+
+  return Buffer.from(paddedBase64, 'base64').toString('utf8')
+}
+
+function expectPosterSrcToReference(src: string | null, expectedUrl: string) {
+  expect(src).toBeTruthy()
+
+  if (src?.startsWith('https://imgproxy2.r34.app/')) {
+    expect(decodeImgproxySourceUrl(src)).toBe(`http://nginx-proxy/proxy?url=${expectedUrl}`)
+    return
+  }
+
+  expect(src).toBe(expectedUrl)
+}
+
+type TrackedPage = Awaited<ReturnType<ReturnType<typeof useTrackedPageFactory>>>
+
+async function getPostVideoPoster(page: TrackedPage, testId: string) {
+  await page.waitForFunction(
+    (id) => document.querySelector(`[data-testid="${id}"] video`)?.getAttribute('poster'),
+    testId,
+    { timeout: 10000 }
+  )
+
+  return page.evaluate(
+    (id) => document.querySelector(`[data-testid="${id}"] video`)?.getAttribute('poster') ?? null,
+    testId
+  )
+}
+
+describe('Video poster proxying', async () => {
+  await setup(defaultSetupConfig)
+
+  const createTrackedPage = useTrackedPageFactory()
+  const offlineVideoPost = mockPostsPageWithOfflineVideo.data[0]!
+  const postTestId = `safebooru.org-${offlineVideoPost.id}`
+
+  it('proxies blocked video posters and playback for premium users', async () => {
+    const page = await createTrackedPage()
+    const pocketBase = createPocketBaseMockState()
+
+    await mockPocketBase(page, pocketBase)
+    await addPocketBaseAuthCookie(page, url('/'))
+    await Promise.all([
+      page.waitForResponse((response) => response.url().includes('/auth-refresh') && response.ok()),
+      page.goto(url('/posts/safebooru.org?tags=offline_video_test'), { waitUntil: 'domcontentloaded' })
+    ])
+
+    const post = page.getByTestId(postTestId).first()
+    await post.waitFor({ state: 'visible' })
+    await page
+      .locator('button[aria-label="Save post"], button[aria-label="Unsave post"]')
+      .first()
+      .waitFor({ state: 'visible', timeout: 10000 })
+
+    const posterPreloadImage = post.locator('img.sr-only')
+    await posterPreloadImage.waitFor({ state: 'attached' })
+    await posterPreloadImage.evaluate((image) => {
+      image.dispatchEvent(new Event('error'))
+    })
+
+    await expect
+      .poll(async () => getPostVideoPoster(page, postTestId), { timeout: 15000 })
+      .toContain(`q=${encodeURIComponent(offlineVideoPost.preview_file.url)}`)
+
+    await page.route('https://example.local/videos/**', (route) => route.abort('failed'))
+
+    const video = post.locator('video')
+    await video.waitFor({ state: 'visible' })
+    await video.evaluate((videoElement) => {
+      videoElement.load()
+      videoElement.dispatchEvent(new Event('error'))
+    })
+
+    await expect
+      .poll(
+        async () =>
+          page.evaluate(
+            (id) => document.querySelector(`[data-testid="${id}"] video`)?.getAttribute('src') ?? null,
+            postTestId
+          ),
+        { timeout: 15000 }
+      )
+      .toContain(`q=${encodeURIComponent(offlineVideoPost.high_res_file.url)}`)
+  }, 30000)
+
+  it('proxies video poster through imgproxy on SSR for blocked preview URLs', async () => {
+    const page = await createTrackedPage()
+
+    await page.goto(url('/posts/safebooru.org?tags=offline_video_test'), { waitUntil: 'domcontentloaded' })
+    await page.getByTestId(postTestId).first().waitFor({ state: 'visible' })
+
+    expectPosterSrcToReference(await getPostVideoPoster(page, postTestId), offlineVideoPost.preview_file.url)
+  }, 20000)
+})
diff --git a/test/pages/posts.mock-data.ts b/test/pages/posts.mock-data.ts
index 066e7f362..b25bcbd0a 100644
--- a/test/pages/posts.mock-data.ts
+++ b/test/pages/posts.mock-data.ts
@@ -3834,3 +3834,46 @@ export const mockPostsPageWithOfflineMedia = {
     next: 'http://192.168.1.65:8080/booru/gelbooru/posts?baseEndpoint=safebooru.org&pageID=1&limit=30'
   }
 }
+
+export const mockPostsPageWithOfflineVideo = {
+  data: [
+    {
+      id: 998,
+      score: 0,
+      high_res_file: {
+        url: 'https://example.local/videos/998/sample_998.mp4',
+        width: 1280,
+        height: 720
+      },
+      low_res_file: {
+        url: 'https://example.local/samples/998/sample_998.jpg',
+        width: 850,
+        height: 478
+      },
+      preview_file: {
+        url: 'https://example.local/thumbnails/998/thumbnail_998.jpg',
+        width: 150,
+        height: 84
+      },
+      tags: {
+        artist: [],
+        character: [],
+        copyright: [],
+        general: ['video'],
+        meta: []
+      },
+      sources: [],
+      rating: 'questionable',
+      media_type: 'video'
+    }
+  ],
+  meta: { items_count: 1, total_items: null, current_page: 0, total_pages: null, items_per_page: 30 },
+  links: {
+    self: 'http://192.168.1.65:8080/booru/gelbooru/posts?baseEndpoint=safebooru.org&pageID=0&limit=30&tags=offline_video_test',
+    first:
+      'http://192.168.1.65:8080/booru/gelbooru/posts?baseEndpoint=safebooru.org&pageID=0&limit=30&tags=offline_video_test',
+    last: null,
+    prev: null,
+    next: null
+  }
+}
diff --git a/test/pages/posts.test.ts b/test/pages/posts.test.ts
index b4fa4946b..42f21291e 100644
--- a/test/pages/posts.test.ts
+++ b/test/pages/posts.test.ts
@@ -1,6 +1,10 @@
 import { describe, expect, it } from 'vitest'
 import { setup, url } from '@nuxt/test-utils'
-import { mockPostsPage0, mockPostsPage1, mockPostsPageWithOfflineMedia } from './posts.mock-data'
+import {
+  mockPostsPage0,
+  mockPostsPage1,
+  mockPostsPageWithOfflineMedia
+} from './posts.mock-data'
 import { defaultSetupConfig, useTrackedPageFactory } from '../helper'
 
 function decodeImgproxySourceUrl(src: string) {
@@ -194,8 +198,6 @@ describe('/', async () => {
 
     // TODO: Test that verifies if a post with 'unknown' media type is not rendered
 
-    it.todo('proxies media when media failed to load', async () => {})
-
     it('renders warning when media failed to load', async () => {
       // Arrange
       const page = await createTrackedPage()
diff --git a/test/server-mocks/plugin.ts b/test/server-mocks/plugin.ts
index 06f791db4..10657d5e6 100644
--- a/test/server-mocks/plugin.ts
+++ b/test/server-mocks/plugin.ts
@@ -7,6 +7,7 @@ import {
   mockPostsPage0,
   mockPostsPage1,
   mockPostsPageWithOfflineMedia,
+  mockPostsPageWithOfflineVideo,
   mockPostsPageWithoutResults
 } from '../pages/posts.mock-data'
 
@@ -72,6 +73,10 @@ function resolveMockPostsPage(requestUrl: URL) {
     return mockPostsPageWithOfflineMedia
   }
 
+  if (tags === 'offline_video_test') {
+    return mockPostsPageWithOfflineVideo
+  }
+
   if (tags === '1girl') {
     return {
       ...mockPostsPage1,

From bc962f38672e796f43907ea6f24c16181ed5e538 Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Tue, 23 Jun 2026 13:39:20 +0700
Subject: [PATCH 2/7] Trim PR to video poster proxy scope only.

Revert PocketBase auth sync and premium browser tests that depended on it; keep imgproxy poster coverage.
---
 app/composables/usePocketbase.ts     | 10 ++++++
 app/composables/useUserData.ts       | 22 +++++++-----
 app/plugins/030.pocketbase.ts        | 23 -------------
 test/pages/posts-video-proxy.test.ts | 50 ----------------------------
 test/pages/posts.test.ts             |  8 ++---
 5 files changed, 26 insertions(+), 87 deletions(-)

diff --git a/app/composables/usePocketbase.ts b/app/composables/usePocketbase.ts
index 7ddb840be..c9e06a0cd 100644
--- a/app/composables/usePocketbase.ts
+++ b/app/composables/usePocketbase.ts
@@ -1,8 +1,18 @@
 export default function () {
+  const { $pocketBase } = useNuxtApp()
+
   const email = useState<string | null>('pocketbase-email', () => null)
   const license = useState<string | null>('pocketbase-license', () => null)
   const subscription_expires_at = useState<string | null>('pocketbase-subscription_expires_at', () => null)
 
+  const authModel = $pocketBase.authStore.model
+
+  if ($pocketBase.authStore.isValid && authModel) {
+    email.value = authModel.email
+    license.value = authModel.username
+    subscription_expires_at.value = authModel.subscription_expires_at
+  }
+
   return {
     email,
     license,
diff --git a/app/composables/useUserData.ts b/app/composables/useUserData.ts
index 096a56b17..2a7af6a20 100644
--- a/app/composables/useUserData.ts
+++ b/app/composables/useUserData.ts
@@ -3,17 +3,21 @@ export default function () {
   const { subscription_expires_at, license, email } = usePocketbase()
 
   return {
-    isPremium: computed(() => {
-      if (!$pocketBase.authStore.isValid) {
-        return false
-      }
+    isPremium: computed(
+      //
+      () => {
+        // TODO: Check why this changes so many times
+        if (!$pocketBase.authStore.isValid) {
+          return false
+        }
 
-      if (!subscription_expires_at.value) {
-        return false
-      }
+        if (!subscription_expires_at.value) {
+          return false
+        }
 
-      return new Date(subscription_expires_at.value) > new Date()
-    }),
+        return new Date(subscription_expires_at.value) > new Date()
+      }
+    ),
 
     email: computed(
       //
diff --git a/app/plugins/030.pocketbase.ts b/app/plugins/030.pocketbase.ts
index 7ae7cd3b5..680b2a316 100644
--- a/app/plugins/030.pocketbase.ts
+++ b/app/plugins/030.pocketbase.ts
@@ -50,31 +50,8 @@ export default defineNuxtPlugin<{ pocketBase: PocketBase }>({
       pb.authStore.save(authCookie.token, authCookie.model)
     }
 
-    const subscriptionExpiresAt = useState<string | null>('pocketbase-subscription_expires_at', () => null)
-    const pocketbaseEmail = useState<string | null>('pocketbase-email', () => null)
-    const pocketbaseLicense = useState<string | null>('pocketbase-license', () => null)
-
-    function syncAuthState() {
-      const authModel = pb.authStore.model
-
-      if (!pb.authStore.isValid || !authModel) {
-        subscriptionExpiresAt.value = null
-        pocketbaseEmail.value = null
-        pocketbaseLicense.value = null
-        return
-      }
-
-      subscriptionExpiresAt.value = authModel.subscription_expires_at
-      pocketbaseEmail.value = authModel.email
-      pocketbaseLicense.value = authModel.username
-    }
-
-    syncAuthState()
-
     // send back the default 'pb_auth' cookie to the client with the latest store state
     pb.authStore.onChange(() => {
-      syncAuthState()
-
       cookie.value = {
         token: pb.authStore.token,
         model: pb.authStore.model
diff --git a/test/pages/posts-video-proxy.test.ts b/test/pages/posts-video-proxy.test.ts
index 1726f01b5..bd4a5e4c3 100644
--- a/test/pages/posts-video-proxy.test.ts
+++ b/test/pages/posts-video-proxy.test.ts
@@ -2,7 +2,6 @@ import { describe, expect, it } from 'vitest'
 import { setup, url } from '@nuxt/test-utils'
 import { mockPostsPageWithOfflineVideo } from './posts.mock-data'
 import { defaultSetupConfig, useTrackedPageFactory } from '../helper'
-import { addPocketBaseAuthCookie, createPocketBaseMockState, mockPocketBase } from '../pocketbase-mock'
 
 function decodeImgproxySourceUrl(src: string) {
   const encodedSource = src.split('/').pop()
@@ -50,55 +49,6 @@ describe('Video poster proxying', async () => {
   const offlineVideoPost = mockPostsPageWithOfflineVideo.data[0]!
   const postTestId = `safebooru.org-${offlineVideoPost.id}`
 
-  it('proxies blocked video posters and playback for premium users', async () => {
-    const page = await createTrackedPage()
-    const pocketBase = createPocketBaseMockState()
-
-    await mockPocketBase(page, pocketBase)
-    await addPocketBaseAuthCookie(page, url('/'))
-    await Promise.all([
-      page.waitForResponse((response) => response.url().includes('/auth-refresh') && response.ok()),
-      page.goto(url('/posts/safebooru.org?tags=offline_video_test'), { waitUntil: 'domcontentloaded' })
-    ])
-
-    const post = page.getByTestId(postTestId).first()
-    await post.waitFor({ state: 'visible' })
-    await page
-      .locator('button[aria-label="Save post"], button[aria-label="Unsave post"]')
-      .first()
-      .waitFor({ state: 'visible', timeout: 10000 })
-
-    const posterPreloadImage = post.locator('img.sr-only')
-    await posterPreloadImage.waitFor({ state: 'attached' })
-    await posterPreloadImage.evaluate((image) => {
-      image.dispatchEvent(new Event('error'))
-    })
-
-    await expect
-      .poll(async () => getPostVideoPoster(page, postTestId), { timeout: 15000 })
-      .toContain(`q=${encodeURIComponent(offlineVideoPost.preview_file.url)}`)
-
-    await page.route('https://example.local/videos/**', (route) => route.abort('failed'))
-
-    const video = post.locator('video')
-    await video.waitFor({ state: 'visible' })
-    await video.evaluate((videoElement) => {
-      videoElement.load()
-      videoElement.dispatchEvent(new Event('error'))
-    })
-
-    await expect
-      .poll(
-        async () =>
-          page.evaluate(
-            (id) => document.querySelector(`[data-testid="${id}"] video`)?.getAttribute('src') ?? null,
-            postTestId
-          ),
-        { timeout: 15000 }
-      )
-      .toContain(`q=${encodeURIComponent(offlineVideoPost.high_res_file.url)}`)
-  }, 30000)
-
   it('proxies video poster through imgproxy on SSR for blocked preview URLs', async () => {
     const page = await createTrackedPage()
 
diff --git a/test/pages/posts.test.ts b/test/pages/posts.test.ts
index 42f21291e..b4fa4946b 100644
--- a/test/pages/posts.test.ts
+++ b/test/pages/posts.test.ts
@@ -1,10 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { setup, url } from '@nuxt/test-utils'
-import {
-  mockPostsPage0,
-  mockPostsPage1,
-  mockPostsPageWithOfflineMedia
-} from './posts.mock-data'
+import { mockPostsPage0, mockPostsPage1, mockPostsPageWithOfflineMedia } from './posts.mock-data'
 import { defaultSetupConfig, useTrackedPageFactory } from '../helper'
 
 function decodeImgproxySourceUrl(src: string) {
@@ -198,6 +194,8 @@ describe('/', async () => {
 
     // TODO: Test that verifies if a post with 'unknown' media type is not rendered
 
+    it.todo('proxies media when media failed to load', async () => {})
+
     it('renders warning when media failed to load', async () => {
       // Arrange
       const page = await createTrackedPage()

From d11d0ddb633897af527b6afed4383a987f8e5b2a Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Tue, 23 Jun 2026 13:45:48 +0700
Subject: [PATCH 3/7] Show media error UI when video playback cannot be
 proxied.

Restore the non-premium and post-retry failure path that was lost when video errors moved to onVideoPlaybackError.
---
 app/components/pages/posts/post/PostMedia.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/components/pages/posts/post/PostMedia.vue b/app/components/pages/posts/post/PostMedia.vue
index d45130dfc..ce1f79faf 100644
--- a/app/components/pages/posts/post/PostMedia.vue
+++ b/app/components/pages/posts/post/PostMedia.vue
@@ -463,13 +463,18 @@
   }
 
   function onVideoPlaybackError(event: Event) {
-    if (hasError.value || !(event.target instanceof HTMLVideoElement) || !isPremium.value || triedToLoadWithProxy.value) {
+    if (hasError.value || !(event.target instanceof HTMLVideoElement)) {
       return
     }
 
-    localSrc.value = proxyUrl(props.mediaSrc ?? '')
-    reloadVideoPlayer(true)
-    triedToLoadWithProxy.value = true
+    if (isPremium.value && !triedToLoadWithProxy.value && props.mediaSrc) {
+      triedToLoadWithProxy.value = true
+      localSrc.value = proxyUrl(props.mediaSrc)
+      void reloadVideoPlayer(true)
+      return
+    }
+
+    error.value = new Error(t('errors.mediaLoadError'))
   }
 
   function manuallyReloadMedia() {

From 461e56dd95ea09f86b7da5f9115da45c7ec9d8c7 Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Wed, 24 Jun 2026 17:56:52 +0700
Subject: [PATCH 4/7] Simplify video poster proxying in PostMedia.

Derive poster URLs from a computed instead of a watcher, fold video proxy retries back into onMediaError, and keep GIF poster state separate from video posters.
---
 app/components/pages/posts/post/PostMedia.vue | 107 +++++++++---------
 1 file changed, 52 insertions(+), 55 deletions(-)

diff --git a/app/components/pages/posts/post/PostMedia.vue b/app/components/pages/posts/post/PostMedia.vue
index ce1f79faf..9a10d4fef 100644
--- a/app/components/pages/posts/post/PostMedia.vue
+++ b/app/components/pages/posts/post/PostMedia.vue
@@ -36,35 +36,29 @@
 
   const mediaElement = shallowRef<MediaElementRef>(null)
 
-  const shouldProxyPosterWithImgproxy = computed(() => isPremium.value || (wasCurrentPageSSR.value && props.postIndex < 8))
-
-  function resolvePosterSrc(posterSrc: string | null | undefined) {
-    if (!posterSrc) {
-      return undefined
-    }
-
-    if (shouldProxyPosterWithImgproxy.value) {
-      return getImgproxyUrl(posterSrc)
-    }
-
-    return posterSrc
-  }
-
   const localSrc = shallowRef(props.mediaSrc ?? '')
-  const localPosterSrc = shallowRef(resolvePosterSrc(props.mediaPosterSrc))
+  const localPosterSrc = shallowRef(props.mediaPosterSrc ?? undefined)
+  const videoPosterProxyOverride = shallowRef<string | null>(null)
   const triedToLoadWithProxy = shallowRef(false)
   const triedToLoadPosterWithProxy = shallowRef(false)
 
-  watch(
-    () => [props.mediaPosterSrc, shouldProxyPosterWithImgproxy.value] as const,
-    ([posterSrc]) => {
-      if (triedToLoadPosterWithProxy.value) {
-        return
-      }
+  const videoPosterSrc = computed(() => {
+    if (videoPosterProxyOverride.value) {
+      return videoPosterProxyOverride.value
+    }
+
+    const poster = props.mediaPosterSrc
 
-      localPosterSrc.value = resolvePosterSrc(posterSrc)
+    if (!poster) {
+      return undefined
     }
-  )
+
+    if (isPremium.value || (wasCurrentPageSSR.value && props.postIndex < 8)) {
+      return getImgproxyUrl(poster)
+    }
+
+    return poster
+  })
 
   const error = ref<Error | null>(null)
   const hasError = computed(() => error.value !== null)
@@ -89,7 +83,7 @@
     props.mediaSrcWidth && props.mediaSrcHeight ? `${props.mediaSrcWidth}/${props.mediaSrcHeight}` : undefined
   )
   const lcpVideoPosterPreloadLinks = computed(() => {
-    if (!isLikelyLcpMedia.value || !isVideo.value || !localPosterSrc.value) {
+    if (!isLikelyLcpMedia.value || !isVideo.value || !videoPosterSrc.value) {
       return []
     }
 
@@ -97,7 +91,7 @@
       {
         rel: 'preload',
         as: 'image' as const,
-        href: localPosterSrc.value,
+        href: videoPosterSrc.value,
         fetchpriority: 'high' as const
       }
     ]
@@ -416,6 +410,32 @@
       isAnimatedMediaLoading.value = false
     }
 
+    // Proxy videos
+    if (isVideo.value && target instanceof HTMLVideoElement) {
+      if (isPremium.value && !triedToLoadWithProxy.value && props.mediaSrc) {
+        triedToLoadWithProxy.value = true
+        localSrc.value = proxyUrl(props.mediaSrc)
+        void reloadVideoPlayer(true)
+        return
+      }
+
+      error.value = new Error(t('errors.mediaLoadError'))
+      return
+    }
+
+    // Proxy video posters (hidden preload img; <video poster> does not emit reliable errors)
+    if (
+      isVideo.value &&
+      isPremium.value &&
+      target instanceof HTMLImageElement &&
+      !triedToLoadPosterWithProxy.value &&
+      props.mediaPosterSrc
+    ) {
+      videoPosterProxyOverride.value = proxyUrl(props.mediaPosterSrc)
+      triedToLoadPosterWithProxy.value = true
+      return
+    }
+
     // Proxy GIFs
     if (isAnimatedMedia.value && isPremium.value) {
       //
@@ -453,39 +473,16 @@
     error.value = new Error(t('errors.mediaLoadError'))
   }
 
-  function onVideoPosterPreloadError() {
-    if (!isPremium.value || triedToLoadPosterWithProxy.value || !props.mediaPosterSrc) {
-      return
-    }
-
-    localPosterSrc.value = proxyUrl(props.mediaPosterSrc)
-    triedToLoadPosterWithProxy.value = true
-  }
-
-  function onVideoPlaybackError(event: Event) {
-    if (hasError.value || !(event.target instanceof HTMLVideoElement)) {
-      return
-    }
-
-    if (isPremium.value && !triedToLoadWithProxy.value && props.mediaSrc) {
-      triedToLoadWithProxy.value = true
-      localSrc.value = proxyUrl(props.mediaSrc)
-      void reloadVideoPlayer(true)
-      return
-    }
-
-    error.value = new Error(t('errors.mediaLoadError'))
-  }
-
   function manuallyReloadMedia() {
     // Reset state
     triedToLoadWithProxy.value = false
     triedToLoadPosterWithProxy.value = false
+    videoPosterProxyOverride.value = null
     error.value = null
 
     // Reload media
     localSrc.value = props.mediaSrc ?? ''
-    localPosterSrc.value = resolvePosterSrc(props.mediaPosterSrc)
+    localPosterSrc.value = props.mediaPosterSrc ?? undefined
 
     if (isVideo.value) {
       nextTick(() => {
@@ -791,12 +788,12 @@
     >
       <!-- Detect poster load failures; video poster attr does not emit reliable error events. -->
       <img
-        v-if="localPosterSrc"
-        :src="localPosterSrc"
+        v-if="videoPosterSrc"
+        :src="videoPosterSrc"
         alt=""
         aria-hidden="true"
         class="sr-only"
-        @error="onVideoPosterPreloadError"
+        @error="onMediaError"
       />
 
       <!-- TODO: Add load animation -->
@@ -805,7 +802,7 @@
         ref="mediaElement"
         v-intersection-observer="[onVideoIntersectionObserver, { rootMargin: '100px' }]"
         :height="mediaSrcHeightAttribute"
-        :poster="localPosterSrc"
+        :poster="videoPosterSrc"
         :src="localSrc"
         :style="mediaAspectRatio ? `aspect-ratio: ${mediaAspectRatio};` : undefined"
         :width="mediaSrcWidthAttribute"
@@ -814,7 +811,7 @@
         loop
         playsinline
         preload="none"
-        @error="onVideoPlaybackError"
+        @error="onMediaError"
         @focus="initializeVideoPlayer"
         @pointerdown="initializeVideoPlayer"
         @pointerenter="initializeVideoPlayer"

From 1cfb75e14704bf4377eae3b1df21417b9c01f49d Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Wed, 24 Jun 2026 18:00:37 +0700
Subject: [PATCH 5/7] Clarify PostMedia proxy variable names.

Distinguish imgproxy poster routing from CORS-proxy retries, and separate GIF poster state from video poster URLs.
---
 app/components/pages/posts/post/PostMedia.vue | 94 ++++++++++---------
 1 file changed, 49 insertions(+), 45 deletions(-)

diff --git a/app/components/pages/posts/post/PostMedia.vue b/app/components/pages/posts/post/PostMedia.vue
index 9a10d4fef..3a2e78b90 100644
--- a/app/components/pages/posts/post/PostMedia.vue
+++ b/app/components/pages/posts/post/PostMedia.vue
@@ -36,15 +36,19 @@
 
   const mediaElement = shallowRef<MediaElementRef>(null)
 
-  const localSrc = shallowRef(props.mediaSrc ?? '')
-  const localPosterSrc = shallowRef(props.mediaPosterSrc ?? undefined)
-  const videoPosterProxyOverride = shallowRef<string | null>(null)
-  const triedToLoadWithProxy = shallowRef(false)
-  const triedToLoadPosterWithProxy = shallowRef(false)
+  const mediaUrl = shallowRef(props.mediaSrc ?? '')
+  const gifPosterUrl = shallowRef(props.mediaPosterSrc ?? undefined)
+  const videoPosterCorsFallbackUrl = shallowRef<string | null>(null)
+  const corsProxyRetriedForMedia = shallowRef(false)
+  const corsProxyRetriedForPoster = shallowRef(false)
+
+  const shouldProxyPosterWithImgproxy = computed(
+    () => isPremium.value || (wasCurrentPageSSR.value && props.postIndex < 8)
+  )
 
-  const videoPosterSrc = computed(() => {
-    if (videoPosterProxyOverride.value) {
-      return videoPosterProxyOverride.value
+  const videoPosterUrl = computed(() => {
+    if (videoPosterCorsFallbackUrl.value) {
+      return videoPosterCorsFallbackUrl.value
     }
 
     const poster = props.mediaPosterSrc
@@ -53,7 +57,7 @@
       return undefined
     }
 
-    if (isPremium.value || (wasCurrentPageSSR.value && props.postIndex < 8)) {
+    if (shouldProxyPosterWithImgproxy.value) {
       return getImgproxyUrl(poster)
     }
 
@@ -66,7 +70,7 @@
   const isImage = computed(() => props.mediaType === 'image')
   const isVideo = computed(() => props.mediaType === 'video')
   const isAnimatedMedia = computed(
-    () => props.mediaType === 'animated' || (props.mediaType === 'image' && localSrc.value.endsWith('.gif'))
+    () => props.mediaType === 'animated' || (props.mediaType === 'image' && mediaUrl.value.endsWith('.gif'))
   )
   const postImageSizes = {
     sm: '400px',
@@ -83,7 +87,7 @@
     props.mediaSrcWidth && props.mediaSrcHeight ? `${props.mediaSrcWidth}/${props.mediaSrcHeight}` : undefined
   )
   const lcpVideoPosterPreloadLinks = computed(() => {
-    if (!isLikelyLcpMedia.value || !isVideo.value || !videoPosterSrc.value) {
+    if (!isLikelyLcpMedia.value || !isVideo.value || !videoPosterUrl.value) {
       return []
     }
 
@@ -91,7 +95,7 @@
       {
         rel: 'preload',
         as: 'image' as const,
-        href: videoPosterSrc.value,
+        href: videoPosterUrl.value,
         fetchpriority: 'high' as const
       }
     ]
@@ -218,7 +222,7 @@
             },
             {
               label: t('media.download'),
-              href: localSrc.value
+              href: mediaUrl.value
             }
           ]
         },
@@ -246,7 +250,7 @@
               return
             }
 
-            currentVideoElement.src = localSrc.value
+            currentVideoElement.src = mediaUrl.value
             videoPlayer?.play()
           }
         },
@@ -410,11 +414,11 @@
       isAnimatedMediaLoading.value = false
     }
 
-    // Proxy videos
+    // Premium CORS-proxy retry for blocked video CDNs
     if (isVideo.value && target instanceof HTMLVideoElement) {
-      if (isPremium.value && !triedToLoadWithProxy.value && props.mediaSrc) {
-        triedToLoadWithProxy.value = true
-        localSrc.value = proxyUrl(props.mediaSrc)
+      if (isPremium.value && !corsProxyRetriedForMedia.value && props.mediaSrc) {
+        corsProxyRetriedForMedia.value = true
+        mediaUrl.value = proxyUrl(props.mediaSrc)
         void reloadVideoPlayer(true)
         return
       }
@@ -423,37 +427,37 @@
       return
     }
 
-    // Proxy video posters (hidden preload img; <video poster> does not emit reliable errors)
+    // Premium CORS-proxy retry for video posters (hidden img; <video poster> has no reliable @error)
     if (
       isVideo.value &&
       isPremium.value &&
       target instanceof HTMLImageElement &&
-      !triedToLoadPosterWithProxy.value &&
+      !corsProxyRetriedForPoster.value &&
       props.mediaPosterSrc
     ) {
-      videoPosterProxyOverride.value = proxyUrl(props.mediaPosterSrc)
-      triedToLoadPosterWithProxy.value = true
+      videoPosterCorsFallbackUrl.value = proxyUrl(props.mediaPosterSrc)
+      corsProxyRetriedForPoster.value = true
       return
     }
 
-    // Proxy GIFs
+    // Premium CORS-proxy retry for GIFs
     if (isAnimatedMedia.value && isPremium.value) {
       //
 
       // Case 1: The poster image failed to load
       if (
         !isAnimatedMediaPlaying.value &&
-        target.src === localPosterSrc.value &&
+        target.src === gifPosterUrl.value &&
         //
-        !triedToLoadPosterWithProxy.value
+        !corsProxyRetriedForPoster.value
       ) {
-        if (!localPosterSrc.value) {
+        if (!gifPosterUrl.value) {
           return
         }
 
-        localPosterSrc.value = proxyUrl(localPosterSrc.value)
+        gifPosterUrl.value = proxyUrl(gifPosterUrl.value)
 
-        triedToLoadPosterWithProxy.value = true
+        corsProxyRetriedForPoster.value = true
         return
       }
 
@@ -461,11 +465,11 @@
       if (
         isAnimatedMediaPlaying.value &&
         //
-        !triedToLoadWithProxy.value
+        !corsProxyRetriedForMedia.value
       ) {
-        localSrc.value = proxyUrl(localSrc.value)
+        mediaUrl.value = proxyUrl(mediaUrl.value)
 
-        triedToLoadWithProxy.value = true
+        corsProxyRetriedForMedia.value = true
         return
       }
     }
@@ -475,14 +479,14 @@
 
   function manuallyReloadMedia() {
     // Reset state
-    triedToLoadWithProxy.value = false
-    triedToLoadPosterWithProxy.value = false
-    videoPosterProxyOverride.value = null
+    corsProxyRetriedForMedia.value = false
+    corsProxyRetriedForPoster.value = false
+    videoPosterCorsFallbackUrl.value = null
     error.value = null
 
     // Reload media
-    localSrc.value = props.mediaSrc ?? ''
-    localPosterSrc.value = props.mediaPosterSrc ?? undefined
+    mediaUrl.value = props.mediaSrc ?? ''
+    gifPosterUrl.value = props.mediaPosterSrc ?? undefined
 
     if (isVideo.value) {
       nextTick(() => {
@@ -651,7 +655,7 @@
           :loading="mediaLoading"
           :preload="mediaPreload"
           :sizes="postImageSizes"
-          :src="localSrc"
+          :src="mediaUrl"
           :width="mediaSrcWidthAttribute"
           provider="imgproxy"
           @error="onMediaError"
@@ -678,7 +682,7 @@
           :loading="mediaLoading"
           :preload="mediaPreload"
           :sizes="postImageSizes"
-          :src="localSrc"
+          :src="mediaUrl"
           :width="mediaSrcWidthAttribute"
           provider="imgproxy"
           @error="onMediaError"
@@ -696,7 +700,7 @@
           :height="mediaSrcHeightAttribute"
           :loading="mediaLoading"
           :preload="mediaPreload"
-          :src="localSrc"
+          :src="mediaUrl"
           :style="mediaAspectRatio ? `aspect-ratio: ${mediaAspectRatio};` : undefined"
           :width="mediaSrcWidthAttribute"
           class="h-auto w-full rounded-t-md"
@@ -719,7 +723,7 @@
         :height="mediaSrcHeightAttribute"
         :loading="mediaLoading"
         :preload="mediaPreload"
-        :src="isAnimatedMediaPlaying ? localSrc : localPosterSrc"
+        :src="isAnimatedMediaPlaying ? mediaUrl : gifPosterUrl"
         :style="mediaAspectRatio ? `aspect-ratio: ${mediaAspectRatio};` : undefined"
         :width="mediaSrcWidthAttribute"
         class="h-auto w-full rounded-t-md"
@@ -784,12 +788,12 @@
     <!-- Video -->
     <div
       v-else-if="isVideo"
-      :key="localSrc"
+      :key="mediaUrl"
     >
       <!-- Detect poster load failures; video poster attr does not emit reliable error events. -->
       <img
-        v-if="videoPosterSrc"
-        :src="videoPosterSrc"
+        v-if="videoPosterUrl"
+        :src="videoPosterUrl"
         alt=""
         aria-hidden="true"
         class="sr-only"
@@ -802,8 +806,8 @@
         ref="mediaElement"
         v-intersection-observer="[onVideoIntersectionObserver, { rootMargin: '100px' }]"
         :height="mediaSrcHeightAttribute"
-        :poster="videoPosterSrc"
-        :src="localSrc"
+        :poster="videoPosterUrl"
+        :src="mediaUrl"
         :style="mediaAspectRatio ? `aspect-ratio: ${mediaAspectRatio};` : undefined"
         :width="mediaSrcWidthAttribute"
         class="h-auto w-full rounded-t-md"

From 955718def222829924e0eda5d245f3a6d1966ef7 Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Wed, 24 Jun 2026 18:02:22 +0700
Subject: [PATCH 6/7] Extract CORS-proxy retry helpers from onMediaError.

Keep onMediaError as a thin dispatcher while grouping video and GIF retry logic into dedicated functions.
---
 app/components/pages/posts/post/PostMedia.vue | 108 ++++++++----------
 1 file changed, 50 insertions(+), 58 deletions(-)

diff --git a/app/components/pages/posts/post/PostMedia.vue b/app/components/pages/posts/post/PostMedia.vue
index 3a2e78b90..b5cbb1a6e 100644
--- a/app/components/pages/posts/post/PostMedia.vue
+++ b/app/components/pages/posts/post/PostMedia.vue
@@ -392,6 +392,55 @@
     isAnimatedMediaPlaying.value = true
   }
 
+  function tryCorsProxyRetryForVideo(target: HTMLImageElement | HTMLVideoElement) {
+    if (!isVideo.value || !isPremium.value) {
+      return false
+    }
+
+    if (target instanceof HTMLVideoElement) {
+      if (corsProxyRetriedForMedia.value || !props.mediaSrc) {
+        return false
+      }
+
+      corsProxyRetriedForMedia.value = true
+      mediaUrl.value = proxyUrl(props.mediaSrc)
+      void reloadVideoPlayer(true)
+      return true
+    }
+
+    if (corsProxyRetriedForPoster.value || !props.mediaPosterSrc) {
+      return false
+    }
+
+    videoPosterCorsFallbackUrl.value = proxyUrl(props.mediaPosterSrc)
+    corsProxyRetriedForPoster.value = true
+    return true
+  }
+
+  function tryCorsProxyRetryForGif(target: HTMLImageElement | HTMLVideoElement) {
+    if (!isAnimatedMedia.value || !isPremium.value || !(target instanceof HTMLImageElement)) {
+      return false
+    }
+
+    if (!isAnimatedMediaPlaying.value && target.src === gifPosterUrl.value && !corsProxyRetriedForPoster.value) {
+      if (!gifPosterUrl.value) {
+        return false
+      }
+
+      gifPosterUrl.value = proxyUrl(gifPosterUrl.value)
+      corsProxyRetriedForPoster.value = true
+      return true
+    }
+
+    if (isAnimatedMediaPlaying.value && !corsProxyRetriedForMedia.value) {
+      mediaUrl.value = proxyUrl(mediaUrl.value)
+      corsProxyRetriedForMedia.value = true
+      return true
+    }
+
+    return false
+  }
+
   function onMediaError(payload: string | Event) {
     if (hasError.value) {
       return
@@ -409,71 +458,14 @@
       return
     }
 
-    // Reset loading state if there's an error with GIF
     if (isAnimatedMedia.value && isAnimatedMediaPlaying.value) {
       isAnimatedMediaLoading.value = false
     }
 
-    // Premium CORS-proxy retry for blocked video CDNs
-    if (isVideo.value && target instanceof HTMLVideoElement) {
-      if (isPremium.value && !corsProxyRetriedForMedia.value && props.mediaSrc) {
-        corsProxyRetriedForMedia.value = true
-        mediaUrl.value = proxyUrl(props.mediaSrc)
-        void reloadVideoPlayer(true)
-        return
-      }
-
-      error.value = new Error(t('errors.mediaLoadError'))
+    if (tryCorsProxyRetryForVideo(target) || tryCorsProxyRetryForGif(target)) {
       return
     }
 
-    // Premium CORS-proxy retry for video posters (hidden img; <video poster> has no reliable @error)
-    if (
-      isVideo.value &&
-      isPremium.value &&
-      target instanceof HTMLImageElement &&
-      !corsProxyRetriedForPoster.value &&
-      props.mediaPosterSrc
-    ) {
-      videoPosterCorsFallbackUrl.value = proxyUrl(props.mediaPosterSrc)
-      corsProxyRetriedForPoster.value = true
-      return
-    }
-
-    // Premium CORS-proxy retry for GIFs
-    if (isAnimatedMedia.value && isPremium.value) {
-      //
-
-      // Case 1: The poster image failed to load
-      if (
-        !isAnimatedMediaPlaying.value &&
-        target.src === gifPosterUrl.value &&
-        //
-        !corsProxyRetriedForPoster.value
-      ) {
-        if (!gifPosterUrl.value) {
-          return
-        }
-
-        gifPosterUrl.value = proxyUrl(gifPosterUrl.value)
-
-        corsProxyRetriedForPoster.value = true
-        return
-      }
-
-      // Case 2: The actual GIF failed to load
-      if (
-        isAnimatedMediaPlaying.value &&
-        //
-        !corsProxyRetriedForMedia.value
-      ) {
-        mediaUrl.value = proxyUrl(mediaUrl.value)
-
-        corsProxyRetriedForMedia.value = true
-        return
-      }
-    }
-
     error.value = new Error(t('errors.mediaLoadError'))
   }
 

From 6a67c199863e421fefe7883d2e8395cd96bcca60 Mon Sep 17 00:00:00 2001
From: Alejandro Akbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Wed, 24 Jun 2026 18:06:09 +0700
Subject: [PATCH 7/7] Address CodeRabbit feedback on video poster handling.

Limit SSR imgproxy to the LCP poster only and treat hidden poster probe failures as non-fatal so playable videos keep their UI.
---
 app/components/pages/posts/post/PostMedia.vue | 41 +++++++++++--------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/app/components/pages/posts/post/PostMedia.vue b/app/components/pages/posts/post/PostMedia.vue
index b5cbb1a6e..27bc274dc 100644
--- a/app/components/pages/posts/post/PostMedia.vue
+++ b/app/components/pages/posts/post/PostMedia.vue
@@ -42,8 +42,10 @@
   const corsProxyRetriedForMedia = shallowRef(false)
   const corsProxyRetriedForPoster = shallowRef(false)
 
+  const isLikelyLcpMedia = computed(() => props.postIndex === 0)
+
   const shouldProxyPosterWithImgproxy = computed(
-    () => isPremium.value || (wasCurrentPageSSR.value && props.postIndex < 8)
+    () => isPremium.value || (wasCurrentPageSSR.value && isLikelyLcpMedia.value)
   )
 
   const videoPosterUrl = computed(() => {
@@ -76,7 +78,6 @@
     sm: '400px',
     md: '768px'
   }
-  const isLikelyLcpMedia = computed(() => props.postIndex === 0)
   const mediaDecoding = computed(() => (props.postIndex < 3 ? undefined : 'async'))
   const mediaFetchPriority = computed(() => (isLikelyLcpMedia.value ? 'high' : undefined))
   const mediaLoading = computed(() => (isLikelyLcpMedia.value ? 'eager' : 'lazy'))
@@ -392,28 +393,31 @@
     isAnimatedMediaPlaying.value = true
   }
 
-  function tryCorsProxyRetryForVideo(target: HTMLImageElement | HTMLVideoElement) {
-    if (!isVideo.value || !isPremium.value) {
-      return false
+  function tryCorsProxyRetryForVideoPoster(target: HTMLImageElement | HTMLVideoElement) {
+    if (!isVideo.value || !(target instanceof HTMLImageElement)) {
+      return
     }
 
-    if (target instanceof HTMLVideoElement) {
-      if (corsProxyRetriedForMedia.value || !props.mediaSrc) {
-        return false
-      }
+    if (!isPremium.value || corsProxyRetriedForPoster.value || !props.mediaPosterSrc) {
+      return
+    }
 
-      corsProxyRetriedForMedia.value = true
-      mediaUrl.value = proxyUrl(props.mediaSrc)
-      void reloadVideoPlayer(true)
-      return true
+    videoPosterCorsFallbackUrl.value = proxyUrl(props.mediaPosterSrc)
+    corsProxyRetriedForPoster.value = true
+  }
+
+  function tryCorsProxyRetryForVideo(target: HTMLImageElement | HTMLVideoElement) {
+    if (!isVideo.value || !(target instanceof HTMLVideoElement)) {
+      return false
     }
 
-    if (corsProxyRetriedForPoster.value || !props.mediaPosterSrc) {
+    if (!isPremium.value || corsProxyRetriedForMedia.value || !props.mediaSrc) {
       return false
     }
 
-    videoPosterCorsFallbackUrl.value = proxyUrl(props.mediaPosterSrc)
-    corsProxyRetriedForPoster.value = true
+    corsProxyRetriedForMedia.value = true
+    mediaUrl.value = proxyUrl(props.mediaSrc)
+    void reloadVideoPlayer(true)
     return true
   }
 
@@ -462,6 +466,11 @@
       isAnimatedMediaLoading.value = false
     }
 
+    if (isVideo.value && target instanceof HTMLImageElement) {
+      tryCorsProxyRetryForVideoPoster(target)
+      return
+    }
+
     if (tryCorsProxyRetryForVideo(target) || tryCorsProxyRetryForGif(target)) {
       return
     }