pleroma-fe

commit: befd4d5fc787d3f8287456dbf5d1a6c70419591f
parent d1f02221cb8e15654da2e101d51440db1570e14d
Author: Henry Jameson <me@hjkos.com>
Date:   Thu, 10 Feb 2022 15:42:28 +0200

improve unknown attachment handling

Diffstat:
M
src/components/attachment/attachment.js
7
++++---
M
src/components/attachment/attachment.scss
10
++++++++++
M
src/components/attachment/attachment.vue
17
++++++++++++++---

3 files changed, 28 insertions(+), 6 deletions(-)
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
@@ -79,7 +79,7 @@ const Attachment = {
       ]
     },
     usePlaceholder () {
-      return this.size === 'hide' || this.type === 'unknown'
+      return this.size === 'hide'
     },
     useContainFit () {
       return this.$store.getters.mergedConfig.useContainFit
@@ -106,7 +106,7 @@ const Attachment = {
       return this.nsfw && this.hideNsfwLocal && !this.showHidden
     },
     isEmpty () {
-      return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
+      return (this.type === 'html' && !this.attachment.oembed)
     },
     useModal () {
       let modalTypes = []
@@ -143,6 +143,8 @@ const Attachment = {
       if (this.useModal) {
         this.$emit('setMedia')
         this.$store.dispatch('setCurrentMedia', this.attachment)
+      } else if (this.type === 'unknown') {
+        window.open(this.attachment.url)
       }
     },
     openModalForce (event) {
@@ -150,7 +152,6 @@ const Attachment = {
       this.$store.dispatch('setCurrentMedia', this.attachment)
     },
     onEdit (event) {
-      console.log('ONEDIT', event)
       this.edit && this.edit(this.attachment, event)
     },
     onRemove () {
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
@@ -54,6 +54,7 @@
     min-width: 0;
   }
 
+  & .placeholder-container,
   & .image-container,
   & .audio-container,
   & .video-container,
@@ -93,6 +94,15 @@
     }
   }
 
+  .placeholder-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 0.5em;
+  }
+
+
   .play-icon {
     position: absolute;
     font-size: 64px;
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
@@ -12,7 +12,6 @@
       :href="attachment.url"
       :alt="attachment.description"
       :title="attachment.description"
-      @click.prevent=""
     >
       <FAIcon :icon="placeholderIconClass" />
       <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }}
@@ -88,7 +87,7 @@
           <FAIcon icon="stop" />
         </button>
         <button
-          v-if="attachment.description && size !== 'small' && !edit"
+          v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
           class="button-unstyled attachment-button"
           @click.prevent="toggleDescription"
           :title="$t('status.show_attachment_description')"
@@ -96,7 +95,7 @@
           <FAIcon icon="align-right" />
         </button>
         <button
-          v-if="!useModal"
+          v-if="!useModal && type !== 'unknown'"
           class="button-unstyled attachment-button"
           @click.prevent="openModalForce"
           :title="$t('status.show_attachment_in_modal')"
@@ -155,6 +154,18 @@
         />
       </a>
 
+      <a
+        v-if="type === 'unknown' && !hidden"
+        class="placeholder-container"
+        :href="attachment.url"
+        target="_blank"
+      >
+        <FAIcon size="5x" :icon="placeholderIconClass" />
+        <p>
+          {{ localDescription }}
+        </p>
+      </a>
+
       <component
         :is="videoTag"
         v-if="type === 'video' && !hidden"