Merge pull request 'attachment: fix over reliance on fileType()' (#3479) from Yonle/pleroma-fe:filetypeservice-1 into develop

Reviewed-on: https://git.pleroma.social/pleroma/pleroma-fe/pulls/3479

src/components/attachment/attachment.js

@@ -1,7 +1,6 @@
 import { mapGetters } from 'vuex'
 
 import nsfwImage from '../../assets/nsfw.png'
-import fileTypeService from '../../services/file_type/file_type.service.js'
 import Flash from '../flash/flash.vue'
 import StillImage from '../still-image/still-image.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
@@ -61,9 +60,7 @@ const Attachment = {
       hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
       preloadImage: this.$store.getters.mergedConfig.preloadImage,
       loading: false,
-      img:
-        fileTypeService.fileType(this.attachment.mimetype) === 'image' &&
-        document.createElement('img'),
+      img: this.attachment.type === 'image' && document.createElement('img'),
       modalOpen: false,
       showHidden: false,
       flashLoaded: false,
@@ -84,7 +81,7 @@ const Attachment = {
           '-editable': this.edit !== undefined,
           '-compact': this.compact,
         },
-        '-type-' + this.type,
+        '-type-' + this.attachment.type,
         this.size && '-size-' + this.size,
         `-${this.useContainFit ? 'contain' : 'cover'}-fit`,
       ]
@@ -97,14 +94,14 @@ const Attachment = {
     },
     placeholderName() {
       if (this.attachment.description === '' || !this.attachment.description) {
-        return this.type.toUpperCase()
+        return this.attachment.type.toUpperCase()
       }
       return this.attachment.description
     },
     placeholderIconClass() {
-      if (this.type === 'image') return 'image'
-      if (this.type === 'video') return 'video'
-      if (this.type === 'audio') return 'music'
+      if (this.attachment.type === 'image') return 'image'
+      if (this.attachment.type === 'video') return 'video'
+      if (this.attachment.type === 'audio') return 'music'
       return 'file'
     },
     referrerpolicy() {
@@ -112,14 +109,11 @@ const Attachment = {
         ? ''
         : 'no-referrer'
     },
-    type() {
-      return fileTypeService.fileType(this.attachment.mimetype)
-    },
     hidden() {
       return this.nsfw && this.hideNsfwLocal && !this.showHidden
     },
     isEmpty() {
-      return this.type === 'html' && !this.attachment.oembed
+      return this.attachment.type === 'html' && !this.attachment.oembed
     },
     useModal() {
       let modalTypes = []
@@ -134,7 +128,7 @@ const Attachment = {
             : ['image']
           break
       }
-      return modalTypes.includes(this.type)
+      return modalTypes.includes(this.attachment.type)
     },
     videoTag() {
       return this.useModal ? 'button' : 'span'
@@ -159,7 +153,7 @@ const Attachment = {
       if (this.useModal) {
         this.$emit('setMedia')
         useMediaViewerStore().setCurrentMedia(this.attachment)
-      } else if (this.type === 'unknown') {
+      } else if (this.attachment.type === 'unknown') {
         window.open(this.attachment.url)
       }
     },
@@ -192,7 +186,7 @@ const Attachment = {
       if (
         this.mergedConfig.useOneClickNsfw &&
         !this.showHidden &&
-        (this.type !== 'video' || this.mergedConfig.playVideosInModal)
+        (this.attachment.type !== 'video' || this.mergedConfig.playVideosInModal)
       ) {
         this.openModal(event)
         return

src/components/attachment/attachment.vue

@@ -6,7 +6,7 @@
     @click="openModal"
   >
     <a
-      v-if="type !== 'html'"
+      v-if="attachment.type !== 'html'"
       class="placeholder"
       target="_blank"
       :href="attachment.url"
@@ -70,7 +70,7 @@
           :src="nsfwImage"
         >
         <FAIcon
-          v-if="type === 'video'"
+          v-if="attachment.type === 'video'"
           class="play-icon"
           icon="play-circle"
         />
@@ -80,7 +80,7 @@
         class="attachment-buttons"
       >
         <button
-          v-if="type === 'flash' && flashLoaded"
+          v-if="attachment.type === 'flash' && flashLoaded"
           class="button-default attachment-button -transparent"
           :title="$t('status.attachment_stop_flash')"
           @click.prevent="stopFlash"
@@ -88,7 +88,7 @@
           <FAIcon icon="stop" />
         </button>
         <button
-          v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
+          v-if="attachment.description && size !== 'small' && !edit && attachment.type !== 'unknown'"
           class="button-default attachment-button -transparent"
           :title="$t('status.show_attachment_description')"
           @click.prevent="toggleDescription"
@@ -96,7 +96,7 @@
           <FAIcon icon="align-right" />
         </button>
         <button
-          v-if="!useModal && type !== 'unknown'"
+          v-if="!useModal && attachment.type !== 'unknown'"
           class="button-default attachment-button -transparent"
           :title="$t('status.show_attachment_in_modal')"
           @click.prevent="openModalForce"
@@ -138,7 +138,7 @@
       </div>
 
       <a
-        v-if="type === 'image' && (!hidden || preloadImage)"
+        v-if="attachment.type === 'image' && (!hidden || preloadImage)"
         class="image-container"
         :class="{'-hidden': hidden && preloadImage }"
         :href="attachment.url"
@@ -156,7 +156,7 @@
       </a>
 
       <a
-        v-if="type === 'unknown' && !hidden"
+        v-if="attachment.type === 'unknown' && !hidden"
         class="placeholder-container"
         :href="attachment.url"
         target="_blank"
@@ -173,7 +173,7 @@
 
       <component
         :is="videoTag"
-        v-if="type === 'video' && !hidden"
+        v-if="attachment.type === 'video' && !hidden"
         class="video-container"
         :href="attachment.url"
         @click.stop.prevent="openModal"
@@ -193,13 +193,13 @@
       </component>
 
       <span
-        v-if="type === 'audio' && !hidden"
+        v-if="attachment.type === 'audio' && !hidden"
         class="audio-container"
         :href="attachment.url"
         @click.stop.prevent="openModal"
       >
         <audio
-          v-if="type === 'audio'"
+          v-if="attachment.type === 'audio'"
           :src="attachment.url"
           :alt="attachment.description"
           :title="attachment.description"
@@ -210,7 +210,7 @@
       </span>
 
       <div
-        v-if="type === 'html' && attachment.oembed"
+        v-if="attachment.type === 'html' && attachment.oembed"
         class="oembed-container"
         @click.prevent="linkClicked"
       >
@@ -229,7 +229,7 @@
       </div>
 
       <span
-        v-if="type === 'flash' && !hidden"
+        v-if="attachment.type === 'flash' && !hidden"
         class="flash-container"
         :href="attachment.url"
         @click.stop.prevent="openModal"

src/components/chat_list_item/chat_list_item.js

@@ -6,8 +6,6 @@ import StatusBody from '../status_content/status_content.vue'
 import Timeago from '../timeago/timeago.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 
-import fileType from 'src/services/file_type/file_type.service'
-
 const ChatListItem = {
   name: 'ChatListItem',
   props: ['chat'],
@@ -28,7 +26,7 @@ const ChatListItem = {
       }
 
       const types = this.chat.lastMessage.attachments.map((file) =>
-        fileType.fileType(file.mimetype),
+        file.type,
       )
       if (types.includes('video')) {
         return this.$t('file_type.video')

src/components/gallery/gallery.js

@@ -4,6 +4,8 @@ import Attachment from '../attachment/attachment.vue'
 
 import { useMediaViewerStore } from 'src/stores/media_viewer.js'
 
+const displayTypes = new Set(["image", "video", "flash"])
+
 const Gallery = {
   props: [
     'attachments',
@@ -45,20 +47,14 @@ const Gallery = {
         : attachments
             .reduce(
               (acc, attachment, i) => {
-                if (attachment.mimetype.includes('audio')) {
+                if (attachment.type === 'audio') {
                   return [
                     ...acc,
                     { audio: true, items: [attachment] },
                     { items: [] },
                   ]
                 }
-                if (
-                  !(
-                    attachment.mimetype.includes('image') ||
-                    attachment.mimetype.includes('video') ||
-                    attachment.mimetype.includes('flash')
-                  )
-                ) {
+                if (!displayTypes.has(attachment.type)) {
                   return [
                     ...acc,
                     { minimal: true, items: [attachment] },

src/components/media_modal/media_modal.js

@@ -1,5 +1,4 @@
 import Flash from 'src/components/flash/flash.vue'
-import fileTypeService from '../../services/file_type/file_type.service.js'
 import GestureService from '../../services/gesture_service/gesture_service'
 import Modal from '../modal/modal.vue'
 import PinchZoom from '../pinch_zoom/pinch_zoom.vue'
@@ -59,9 +58,6 @@ const MediaModal = {
     canNavigate() {
       return this.media.length > 1
     },
-    type() {
-      return this.currentMedia ? this.getType(this.currentMedia) : null
-    },
     swipeDisableClickThreshold() {
       // If there is only one media, allow more mouse movements to close the modal
       // because there is less chance that the user wants to switch to another image
@@ -69,9 +65,6 @@ const MediaModal = {
     },
   },
   methods: {
-    getType(media) {
-      return fileTypeService.fileType(media.mimetype)
-    },
     hide() {
       // HACK: Closing immediately via a touch will cause the click
       // to be processed on the content below the overlay
@@ -96,7 +89,7 @@ const MediaModal = {
             ? this.media.length - 1
             : this.currentIndex - 1
         const newMedia = this.media[prevIndex]
-        if (this.getType(newMedia) === 'image') {
+        if (newMedia.type === 'image') {
           this.loading = true
         }
         useMediaViewerStore().setCurrentMedia(newMedia)
@@ -109,7 +102,7 @@ const MediaModal = {
             ? 0
             : this.currentIndex + 1
         const newMedia = this.media[nextIndex]
-        if (this.getType(newMedia) === 'image') {
+        if (newMedia.type === 'image') {
           this.loading = true
         }
         useMediaViewerStore().setCurrentMedia(newMedia)

src/components/media_modal/media_modal.vue

@@ -5,7 +5,7 @@
     @backdrop-clicked="hideIfNotSwiped"
   >
     <SwipeClick
-      v-if="type === 'image'"
+      v-if="currentMedia.type === 'image'"
       ref="swipeClick"
       class="modal-image-container"
       :direction="swipeDirection"
@@ -36,13 +36,13 @@
       </PinchZoom>
     </SwipeClick>
     <VideoAttachment
-      v-if="type === 'video'"
+      v-if="currentMedia.type === 'video'"
       class="modal-image"
       :attachment="currentMedia"
       :controls="true"
     />
     <audio
-      v-if="type === 'audio'"
+      v-if="currentMedia.type === 'audio'"
       class="modal-image"
       :src="currentMedia.url"
       :alt="currentMedia.description"
@@ -50,7 +50,7 @@
       controls
     />
     <Flash
-      v-if="type === 'flash'"
+      v-if="currentMedia.type === 'flash'"
       class="modal-image"
       :src="currentMedia.url"
       :alt="currentMedia.description"

src/components/post_status_form/post_status_form.js

@@ -6,7 +6,6 @@ import DraftCloser from 'src/components/draft_closer/draft_closer.vue'
 import Gallery from 'src/components/gallery/gallery.vue'
 import Popover from 'src/components/popover/popover.vue'
 import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
-import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
 import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import statusPoster from '../../services/status_poster/status_poster.service.js'
@@ -649,9 +648,6 @@ const PostStatusForm = {
       this.$emit('resize')
       this.uploadingFiles = false
     },
-    type(fileInfo) {
-      return fileTypeService.fileType(fileInfo.mimetype)
-    },
     paste(e) {
       this.autoPreview()
       this.resize(e)

src/components/status_body/status_body.js

@@ -2,8 +2,6 @@ import { mapGetters } from 'vuex'
 
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 
-import fileType from 'src/services/file_type/file_type.service'
-
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faFile,
@@ -104,7 +102,7 @@ const StatusBody = {
     },
     attachmentTypes() {
       return this.status.attachments.map((file) =>
-        fileType.fileType(file.mimetype),
+        file.type,
       )
     },
     collapsedStatus() {

src/components/user_card/user_card.js

@@ -426,7 +426,7 @@ export default {
     zoomAvatar() {
       const attachment = {
         url: this.user.profile_image_url_original,
-        mimetype: 'image',
+        type: 'image',
       }
       useMediaViewerStore().setMedia([attachment])
       useMediaViewerStore().setCurrentMedia(attachment)

src/services/entity_normalizer/entity_normalizer.service.js

@@ -1,5 +1,6 @@
 import { parseLinkHeader } from '@web3-storage/parse-link-header'
 import escapeHtml from 'escape-html'
+import fileTypeService from '../file_type/file_type.service.js'
 import punycode from 'punycode.js'
 
 import { isStatusNotification } from '../notification_utils/notification_utils.js'
@@ -297,6 +298,11 @@ export const parseAttachment = (data) => {
     // output.meta = ??? missing
   }
 
+  if (data.type !== 'unknown') {
+    output.type = data.type
+  } else {
+    output.type = fileTypeService.fileType(output.mimetype)
+  }
   output.url = data.url
   output.large_thumb_url = data.preview_url
   output.description = data.description

src/stores/media_viewer.js

@@ -1,7 +1,5 @@
 import { defineStore } from 'pinia'
 
-import fileTypeService from '../services/file_type/file_type.service.js'
-
 const supportedTypes = new Set(['image', 'video', 'audio', 'flash'])
 
 export const useMediaViewerStore = defineStore('mediaViewer', {
@@ -13,8 +11,7 @@ export const useMediaViewerStore = defineStore('mediaViewer', {
   actions: {
     setMedia(attachments) {
       const media = attachments.filter((attachment) => {
-        const type = fileTypeService.fileType(attachment.mimetype)
-        return supportedTypes.has(type)
+        return supportedTypes.has(attachment.type)
       })
 
       this.media = media