feat: remove posts with unknown media

Rule-34 · Feb 19, 2024 · e00fc62 · e00fc62
1 parent 6a6181e
commit e00fc62
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 70 deletions.
diff --git a/components/pages/posts/post/Post.vue b/components/pages/posts/post/Post.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-  import { useUserSettings } from '~/composables/useUserSettings'
-  import { ChevronDownIcon } from '@heroicons/vue/24/outline'
+import {useUserSettings} from '~/composables/useUserSettings'
+import {ChevronDownIcon} from '@heroicons/vue/24/outline'
 
-  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'
+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'
 
-  const props = defineProps<{
+const props = defineProps<{
     domain: string
 
     post: IPost
@@ -138,7 +138,6 @@
         />
 
         <PostSource
-          v-if="post.media_type !== 'unknown'"
           :post-file-url="post.media_type === 'image' ? mediaFile.file : mediaFile.posterFile"
           :post-sources="post.sources"
         />

diff --git a/components/pages/posts/post/PostMedia.vue b/components/pages/posts/post/PostMedia.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-  import { vIntersectionObserver } from '@vueuse/components'
-  import type { IPost } from 'assets/js/post'
+import {vIntersectionObserver} from '@vueuse/components'
+import type {IPost} from 'assets/js/post'
 
-  const { isPremium } = useUserData()
+const { isPremium } = useUserData()
 
   export interface PostMediaProps {
     mediaSrc: string | null
@@ -27,10 +27,6 @@
 
   const triedToLoadWithProxy = shallowRef(false)
 
-  if (props.mediaType === 'unknown') {
-    error.value = new Error('Unknown media type')
-  }
-
   function onMediaError(event: Event) {
     if (hasError.value) {
       return
@@ -122,7 +118,6 @@
           </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"
@@ -134,7 +129,7 @@
         <!-- Premium promotion -->
         <!-- TODO: Improve style -->
         <div
-          v-if="!isPremium && error?.message !== 'Unknown media type'"
+          v-if="!isPremium"
           class="text-xs text-base-content"
         >
           <NuxtLink

diff --git a/pages/posts/[domain].vue b/pages/posts/[domain].vue
@@ -1,20 +1,20 @@
 <script lang="ts" setup>
-  import { useBooruList } from '~/composables/useBooruList'
-  import { ArrowPathIcon, ExclamationCircleIcon, QuestionMarkCircleIcon } from '@heroicons/vue/24/solid'
-  import { MagnifyingGlassIcon } from '@heroicons/vue/24/outline'
-  import { toast } from 'vue-sonner'
-  import Tag from '~/assets/js/tag.dto'
-  import type { Ref } from 'vue'
-  import { generatePostsRoute } from '~/assets/js/RouterHelper'
-  import { tagArrayToTitle } from '~/assets/js/SeoHelper'
-  import { capitalize } from 'lodash-es'
-  import type { Domain } from '~/assets/js/domain'
-  import type { IPostPage } from '~/assets/js/post'
-  import { useInfiniteQuery } from '@tanstack/vue-query'
-  import { FetchError } from 'ofetch'
-  import * as Sentry from '@sentry/vue'
-
-  const router = useRouter()
+import {useBooruList} from '~/composables/useBooruList'
+import {ArrowPathIcon, ExclamationCircleIcon, QuestionMarkCircleIcon} from '@heroicons/vue/24/solid'
+import {MagnifyingGlassIcon} from '@heroicons/vue/24/outline'
+import {toast} from 'vue-sonner'
+import Tag from '~/assets/js/tag.dto'
+import type {Ref} from 'vue'
+import {generatePostsRoute} from '~/assets/js/RouterHelper'
+import {tagArrayToTitle} from '~/assets/js/SeoHelper'
+import {capitalize} from 'lodash-es'
+import type {Domain} from '~/assets/js/domain'
+import type {IPostPage} from '~/assets/js/post'
+import {useInfiniteQuery} from '@tanstack/vue-query'
+import {FetchError} from 'ofetch'
+import * as Sentry from '@sentry/vue'
+
+const router = useRouter()
   const route = useRoute()
   const config = useRuntimeConfig()
   const $authState = useState('auth-internal')
@@ -149,6 +149,18 @@
   } = useInfiniteQuery({
     queryKey: ['posts', selectedBooru, selectedTags, selectedFilters],
     queryFn: fetchPosts,
+    select: (data) => {
+
+      // Delete all posts that have `media_type: 'unknown'`
+      data.pages.forEach((page) => {
+        page.data = page.data.filter((post) => post.media_type !== 'unknown')
+      })
+
+      return {
+        pages: data.pages,
+        pageParams: data.pageParams,
+      }
+    },
     initialPageParam: '',
     getNextPageParam: (lastPage, allPages, lastPageParam) => {
       if (lastPage.links.next == null) {

diff --git a/test/pages/posts.test.ts b/test/pages/posts.test.ts
@@ -1,13 +1,12 @@
-import { describe, expect, it } from 'vitest'
-import { createPage, setup, url } from '@nuxt/test-utils'
+import {describe, expect, it} from 'vitest'
+import {createPage, setup, url} from '@nuxt/test-utils'
 import {
   mockPostsPage0,
   mockPostsPage1,
   mockPostsPageWithOfflineMedia,
-  mockPostsPageWithoutResults,
-  mockPostsPageWithUnknownMedia
+  mockPostsPageWithoutResults
 } from './posts.mock-data'
-import { defaultSetupConfig } from '../helper'
+import {defaultSetupConfig} from '../helper'
 
 describe('/', async () => {
   await setup(defaultSetupConfig)
@@ -122,37 +121,7 @@ describe('/', async () => {
       ).toBe(mockPostsPage0.data[0].tags.general.length)
     })
 
-    it('renders warning when unknown media is loaded', async () => {
-      // Arrange
-      const page = await createPage()
-
-      await page.route(
-        '**/posts?baseEndpoint=*',
-        (route) =>
-          route.fulfill({
-            status: 200,
-            json: mockPostsPageWithUnknownMedia
-          }),
-        { times: 1 }
-      )
-
-      // Act
-      await Promise.all([page.goto(url('/posts/safebooru.org')), page.waitForResponse('**/posts?baseEndpoint=*')])
-
-      // Assert
-
-      // Expect 1 post
-      expect(
-        //
-        await page.getByTestId('posts-list').locator('li').count()
-      ).toBe(1)
-
-      // Expect post to have warning
-      expect(
-        //
-        await page.getByTestId('posts-list').locator('li').first().textContent()
-      ).toContain('Unknown media')
-    })
+    // TODO: Test that verifies if a post with 'unknown' media type is not rendered
 
     it.skip('proxies media when media failed to load', async () => {
       throw new Error('Not implemented')