fix: unknown media crashing component

Rule-34 · Nov 11, 2023 · 73ea4ba · 73ea4ba
1 parent 7368f49
commit 73ea4ba
Show file tree

Hide file tree

Showing 5 changed files with 505 additions and 452 deletions.
diff --git a/assets/js/post.d.ts b/assets/js/post.d.ts
@@ -19,7 +19,7 @@ export interface IPost {
 
   rating: string
 
-  media_type: string
+  media_type: 'image' | 'video' | 'unknown'
 }
 
 export interface IPostHighResFile {

diff --git a/components/pages/posts/PromotedContent.vue b/components/pages/posts/PromotedContent.vue
@@ -1,51 +1,52 @@
 <script setup>
-  const promos = [
-    // Premium
-    {
-      media: '/img/promo/R34_App_Premium.jpg',
-      mediaWidth: 1280,
-      mediaHeight: 1280,
-      mediaType: 'image',
-      link: '/premium'
-    },
-    // HentaiPorn
-    {
-      media: '/img/promo/HentaiPorn.jpg',
-      mediaWidth: 1280,
-      mediaHeight: 1280,
-      mediaType: 'image',
-      link: 'https://hentaiporn.app/?utm_source=r34.app&utm_medium=promotion'
-    }
-  ]
+const promos = [
+  // Premium
+  {
+    media: '/img/promo/R34_App_Premium.jpg',
+    mediaWidth: 1280,
+    mediaHeight: 1280,
+    mediaType: 'image',
+    link: '/premium'
+  },
+  // HentaiPorn
+  {
+    media: '/img/promo/HentaiPorn.jpg',
+    mediaWidth: 1280,
+    mediaHeight: 1280,
+    mediaType: 'image',
+    link: 'https://hentaiporn.app/?utm_source=r34.app&utm_medium=promotion'
+  }
+]
 
-  const promo = promos[Math.floor(Math.random() * promos.length)]
+const promo = promos[Math.floor(Math.random() * promos.length)]
 </script>
 
 <template>
-  <figure class="promo -mx-1 overflow-hidden rounded-md ring-1 ring-base-0/20">
+  <figure class='promo -mx-1 overflow-hidden rounded-md ring-1 ring-base-0/20'>
     <!-- -->
 
     <!-- Media -->
     <NuxtLink
-      :href="promo.link"
-      class="focus-visible:focus-outline-util focus-visible:ring-inset"
-      target="_blank"
+      :href='promo.link'
+      class='focus-visible:focus-outline-util focus-visible:ring-inset'
+      target='_blank'
     >
       <PostMedia
-        :media-src="promo.media"
-        :media-src-height="promo.mediaHeight"
-        :media-src-width="promo.mediaWidth"
-        :media-type="promo.mediaType"
-        media-alt="Promoted content"
+        :media-alt="'Promoted content'"
+        :media-poster-src='null'
+        :media-src='promo.media'
+        :media-src-height='promo.mediaHeight'
+        :media-src-width='promo.mediaWidth'
+        :media-type='promo.mediaType'
       />
     </NuxtLink>
 
     <!-- Body -->
-    <figcaption class="whitespace-normal px-1 py-3 text-center text-sm">
+    <figcaption class='whitespace-normal px-1 py-3 text-center text-sm'>
       <NuxtLink
-        class="hover:hover-text-util focus-visible:focus-outline-util underline"
-        href="/premium"
-        >Get Premium<!----></NuxtLink
+        class='hover:hover-text-util focus-visible:focus-outline-util underline'
+        href='/premium'
+      >Get Premium<!----></NuxtLink
       ><!---->: No promos + exclusive features!
     </figcaption>
   </figure>

diff --git a/components/pages/posts/post/Post.vue b/components/pages/posts/post/Post.vue
@@ -5,6 +5,7 @@ import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 
 import { vOnLongPress } from '@vueuse/components'
 import Tag from '~/assets/js/tag.dto'
+import type { IPost } from '~/assets/js/post'
 import { toast } from 'vue-sonner'
 import { useAppStatistics } from '~/composables/useAppStatistics'
 
@@ -60,8 +61,9 @@ const mediaFile = computed(() => {
     }
 
     default:
-      // TODO: Handle unknown media type in PostMedia
-      throw new Error('Unknown media type: ' + props.post.media_type)
+      data.file = props.post.high_res_file.url
+      data.width = props.post.high_res_file.width
+      data.height = props.post.high_res_file.height
   }
 
   return data
@@ -117,11 +119,13 @@ function onClickLongTag(tag: Tag) {
       <!-- Actions -->
       <div class='flex items-center p-2'>
         <PostSave
+          v-if='mediaFile.file'
           :post='post'
           :postId='postName'
         />
 
         <PostDownload
+          v-if='mediaFile.file'
           :mediaName='postName'
           :mediaUrl='mediaFile.file'
         />

diff --git a/components/pages/posts/post/PostMedia.vue b/components/pages/posts/post/PostMedia.vue
@@ -1,27 +1,35 @@
 <script lang='ts' setup>
 import { vIntersectionObserver } from '@vueuse/components'
 import { ProxyHelper } from '~/assets/js/ProxyHelper'
+import type { IPost } from 'assets/js/post'
+
+const { isPremium } = useUserData()
 
 export interface PostMediaProps {
-  mediaSrc: string
+  mediaSrc: string | null
   mediaSrcHeight: number | null
   mediaSrcWidth: number | null
-  mediaPosterSrc?: string
-  mediaType: 'image' | 'video'
+  mediaPosterSrc: string | null
+  mediaType: IPost['media_type']
   mediaAlt: string
 }
 
 const props = defineProps<PostMediaProps>()
 
 const localSrc = ref(props.mediaSrc)
 
-const hasError = ref(false)
+const error = ref<Error | null>(null)
+const hasError = computed(() => error.value !== null)
 
 const isImage = computed(() => props.mediaType === 'image')
 const isVideo = computed(() => props.mediaType === 'video')
 
 const triedToLoadWithProxy = ref(false)
 
+if (props.mediaType === 'unknown') {
+  error.value = new Error('Unknown media type')
+}
+
 function onMediaError(event: Event) {
   if (hasError.value) {
     return
@@ -33,7 +41,7 @@ function onMediaError(event: Event) {
   // TODO: https://github.com/Bionus/imgbrd-grabber/issues/2692#issuecomment-1141236485
   // TODO: https://realbooru.com/index.php?page=forum&s=view&id=6522&pid=105
 
-  if (!triedToLoadWithProxy.value) {
+  if (!triedToLoadWithProxy.value && isPremium.value) {
     triedToLoadWithProxy.value = true
 
     const proxySrc = ProxyHelper.proxyUrl(localSrc.value)
@@ -43,13 +51,13 @@ function onMediaError(event: Event) {
     return
   }
 
-  hasError.value = true
+  error.value = new Error('Error loading media')
 }
 
 function manuallyReloadMedia() {
   // Reset state
   triedToLoadWithProxy.value = false
-  hasError.value = false
+  error.value = null
 
   // Reload media
   localSrc.value = ''
@@ -80,15 +88,16 @@ function onIntersectionObserver(entries: IntersectionObserverEntry[]) {
   <div :style='`aspect-ratio: ${mediaSrcWidth}/${mediaSrcHeight};`'>
     <!-- Error -->
     <template v-if='hasError'>
-      <div class='flex h-full flex-col items-center py-4'>
+      <div class='flex h-full flex-col items-center py-4 space-y-4'>
         <div class='flex flex-1 flex-col items-center justify-center gap-4'>
           <span
             class='rounded-md bg-gradient-to-l from-base-950 via-base-900 to-base-900 px-4 py-1.5 text-center text-base-content-highlight'
           >
-            Error loading media
+            {{ error?.message }}
           </span>
 
           <button
+            v-if='error?.message !== "Unknown media type"'
             class='focus-visible:focus-outline-util hover:hover-bg-util hover:hover-text-util mx-auto inline-flex items-center justify-center rounded-md px-2 py-1 text-sm ring-1 ring-base-0/20'
             type='button'
             @click='manuallyReloadMedia'
@@ -97,13 +106,38 @@ function onIntersectionObserver(entries: IntersectionObserverEntry[]) {
           </button>
         </div>
 
-        <NuxtLink
-          class='hover:hover-text-util focus-visible:focus-outline-util justify-self-end text-sm text-base-content underline'
-          href='https://www.rule34.app/frequently-asked-questions#74cfdf0316b04111b0c65b7f8502dfda'
-          target='_blank'
+        <!-- Premium promotion -->
+        <!-- TODO: Improve style -->
+        <div
+          v-if='!isPremium && error?.message !== "Unknown media type"'
+          class='text-xs text-base-content'
         >
-          Media not loading? Learn more
-        </NuxtLink>
+          <NuxtLink
+            class='hover:hover-text-util focus-visible:focus-outline-util  underline'
+            href='/premium'
+          >
+            <!-- @formatter:off -->
+            Get Premium</NuxtLink>
+
+          <span> to bypass website blocks</span>
+        </div>
+
+        <div
+          class='text-sm text-base-content'
+        >
+
+          <span>
+            Media not loading?
+          </span>
+
+          <NuxtLink
+            class='hover:hover-text-util focus-visible:focus-outline-util underline'
+            href='https://www.rule34.app/frequently-asked-questions#74cfdf0316b04111b0c65b7f8502dfda'
+            target='_blank'
+          >
+            Learn more
+          </NuxtLink>
+        </div>
       </div>
     </template>