feat: add premium classic video player toggle

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, preferClassicVideoPlayer } = 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,
+      preferClassicVideoPlayer: preferClassicVideoPlayer.value
     }
   }
 
@@ -51,7 +52,7 @@ async function restoreV3Backup(backupState: IBackupState) {
   }
 
   if (backupState.settings) {
-    const { postFullSizeImages, postsPerPage, autoplayAnimatedMedia } = useUserSettings()
+    const { postFullSizeImages, postsPerPage, autoplayAnimatedMedia, preferClassicVideoPlayer } = useUserSettings()
 
     if (backupState.settings.postFullSizeImages != null) {
       postFullSizeImages.value = backupState.settings.postFullSizeImages
@@ -64,6 +65,10 @@ async function restoreV3Backup(backupState: IBackupState) {
     if (backupState.settings.autoplayAnimatedMedia != null) {
       autoplayAnimatedMedia.value = backupState.settings.autoplayAnimatedMedia
     }
+
+    if (backupState.settings.preferClassicVideoPlayer != null) {
+      preferClassicVideoPlayer.value = backupState.settings.preferClassicVideoPlayer
+    }
   }
 }
 

components/pages/posts/post/PostMedia.vue

@@ -12,7 +12,7 @@
 
   const requestUrl = useRequestURL()
   const { isPremium } = useUserData()
-  const { autoplayAnimatedMedia } = useUserSettings()
+  const { autoplayAnimatedMedia, preferClassicVideoPlayer } = useUserSettings()
   let { timesVideoHasRendered } = useEthics()
   const { wasCurrentPageSSR } = useSSRDetection()
 
@@ -44,6 +44,7 @@
   const isAnimatedMedia = computed(
     () => props.mediaType === 'animated' || (props.mediaType === 'image' && props.mediaSrc.endsWith('.gif'))
   )
+  const shouldUseClassicVideoPlayer = computed(() => isVideo.value && isPremium.value && preferClassicVideoPlayer.value)
 
   const triedToLoadWithProxy = shallowRef(false)
   const triedToLoadPosterWithProxy = shallowRef(false)
@@ -61,6 +62,10 @@
 
     switch (true) {
       case isVideo.value:
+        if (shouldUseClassicVideoPlayer.value) {
+          break
+        }
+
         createVideoPlayer()
         break
 
@@ -72,6 +77,14 @@
     }
   })
 
+  function getVideoElement() {
+    if (!mediaElement.value || !isVideo.value) {
+      return null
+    }
+
+    return mediaElement.value as HTMLVideoElement
+  }
+
   onBeforeUnmount(() => {
     let finalMediaElement = mediaElement.value
 
@@ -96,6 +109,10 @@
 
     //
     else if (isVideo.value) {
+      if (shouldUseClassicVideoPlayer.value) {
+        return
+      }
+
       destroyVideoPlayer()
     }
   })
@@ -253,6 +270,26 @@
   }
 
   function reloadVideoPlayer(shouldPlay: boolean = false) {
+    if (shouldUseClassicVideoPlayer.value) {
+      nextTick(() => {
+        const videoElement = getVideoElement()
+
+        if (!videoElement) {
+          return
+        }
+
+        videoElement.load()
+
+        if (!shouldPlay) {
+          return
+        }
+
+        void videoElement.play().catch(() => undefined)
+      })
+
+      return
+    }
+
     nextTick(() => {
       destroyVideoPlayer()
 
@@ -368,6 +405,11 @@
     const entry = entries[0]
 
     if (!entry.isIntersecting) {
+      if (shouldUseClassicVideoPlayer.value) {
+        getVideoElement()?.pause()
+        return
+      }
+
       videoPlayer?.pause()
     }
   }

components/pages/settings/SettingSwitch.vue

@@ -5,7 +5,7 @@
 </script>
 
 <script setup>
-  const props = defineProps(['modelValue'])
+  const props = defineProps(['modelValue', 'disabled'])
   const emit = defineEmits(['update:modelValue'])
 </script>
 
@@ -17,28 +17,30 @@
     <span class="flex grow flex-col">
       <HeadlessSwitchLabel
         as="span"
-        class="font-medium leading-8 text-base-content-highlight"
+        class="text-base-content-highlight leading-8 font-medium"
         passive
       >
         <slot name="name" />
       </HeadlessSwitchLabel>
 
       <HeadlessSwitchDescription
         as="span"
-        class="text-sm text-base-content"
+        class="text-base-content text-sm"
       >
         <slot name="description" />
       </HeadlessSwitchDescription>
     </span>
 
     <HeadlessSwitch
+      :disabled="disabled"
       :modelValue="modelValue"
-      class="focus-visible:focus-outline-util relative inline-flex h-6 w-12 shrink-0 cursor-pointer rounded-full border-2 border-transparent ring-1 ring-base-0/20 transition-colors duration-200 ease-in-out ui-checked:bg-primary-700 ui-not-checked:bg-base-1000"
+      class="focus-visible:focus-outline-util ring-base-0/20 ui-checked:bg-primary-700 ui-not-checked:bg-base-1000 relative inline-flex h-6 w-12 shrink-0 rounded-full border-2 border-transparent ring-1 transition-colors duration-200 ease-in-out"
+      :class="disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'"
       @update:modelValue="emit('update:modelValue', $event)"
     >
       <span
         aria-hidden="true"
-        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-base-content-highlight shadow-sm ring-0 transition duration-200 ease-in-out ui-checked:translate-x-6 ui-not-checked:translate-x-0"
+        class="bg-base-content-highlight ui-checked:translate-x-6 ui-not-checked:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full shadow-sm ring-0 transition duration-200 ease-in-out"
       />
     </HeadlessSwitch>
   </HeadlessSwitchGroup>

composables/useUserSettings.ts

@@ -4,6 +4,7 @@ export default function () {
   let postFullSizeImages = ref<boolean>(false)
   let postsPerPage = ref<number>(29)
   let autoplayAnimatedMedia = ref<boolean>(false)
+  let preferClassicVideoPlayer = ref<boolean>(false)
   let blockAiGeneratedImages = ref<boolean>(false)
 
   if (import.meta.client) {
@@ -16,6 +17,9 @@ export default function () {
     autoplayAnimatedMedia = useLocalStorage('settings-autoplayAnimatedMedia', false, {
       writeDefaults: false
     })
+    preferClassicVideoPlayer = useLocalStorage('settings-preferClassicVideoPlayer', false, {
+      writeDefaults: false
+    })
     blockAiGeneratedImages = useLocalStorage('settings-blockAiGeneratedImages', false, {
       writeDefaults: false
     })
@@ -25,6 +29,7 @@ export default function () {
     postFullSizeImages,
     postsPerPage,
     autoplayAnimatedMedia,
+    preferClassicVideoPlayer,
     blockAiGeneratedImages
   }
 }

pages/settings.vue

@@ -13,7 +13,8 @@
 
   const appVersion = version
 
-  const { postFullSizeImages, postsPerPage, autoplayAnimatedMedia, blockAiGeneratedImages } = useUserSettings()
+  const { postFullSizeImages, postsPerPage, autoplayAnimatedMedia, preferClassicVideoPlayer, blockAiGeneratedImages } =
+    useUserSettings()
   const { isPremium } = useUserData()
   const { selectedList, selectedBlockList, defaultBlockList, customBlockList, resetCustomBlockList } = useBlockLists()
 
@@ -142,6 +143,20 @@
           </SettingSwitch>
         </li>
 
+        <li>
+          <SettingSwitch
+            v-model="preferClassicVideoPlayer"
+            :disabled="!isPremium"
+          >
+            <template #name> Classic video controls </template>
+
+            <template #description>
+              Use your browser's native video player instead of the JS player. Premium only so video ad support stays
+              intact.
+            </template>
+          </SettingSwitch>
+        </li>
+
         <!-- postFullSizeImages -->
         <li>
           <SettingSwitch v-model="postFullSizeImages">

test/pages/settings.test.ts

@@ -11,5 +11,6 @@ describe('/settings', async () => {
     await page.waitForSelector('h1')
 
     expect(await page.textContent('h1')).toBe('Settings')
+    expect(await page.textContent('body')).toContain('Classic video controls')
   })
 })