1 files changed, 68 insertions, 34 deletions

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index b80300b4..ad5120c0 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -1,19 +1,35 @@
 <template>
-  <div v-if="size==='hide'">
+  <div v-if="usePlaceHolder" @click="toggleModal">
     <a class="placeholder" v-if="type !== 'html'" target="_blank" :href="attachment.url">[{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]</a>
   </div>
-  <div v-else class="attachment" :class="{[type]: true, loading, 'small-attachment': isSmall, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}" v-show="!isEmpty">
-    <a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()">
-      <img :key="nsfwImage" :src="nsfwImage"/>
+  <div
+    v-else class="attachment"
+    :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
+    v-show="!isEmpty"
+    @click="toggleModal"
+  >
+    <a class="image-attachment" v-if="hidden" :href="attachment.url">
+      <img :key="nsfwImage" :src="nsfwImage" :class="{'small': isSmall}"/>
+      <i v-if="type === 'video'" class="play-icon icon-play-circled"></i>
     </a>
-    <div class="hider" v-if="nsfw && hideNsfwLocal && !hidden">
-      <a href="#" @click.prevent="toggleHidden()">Hide</a>
-    </div>
-    <a v-if="type === 'image' && (!hidden || preloadImage)" class="image-attachment" :class="{'hidden': hidden && preloadImage}" :href="attachment.url" target="_blank" :title="attachment.description">
-      <StillImage :class="{'small': isSmall}" :referrerpolicy="referrerPolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
+
+    <a v-if="type === 'image' && (!hidden || preloadImage)"
+      class="image-attachment"
+      :class="{'hidden': hidden && preloadImage}"
+      :href="attachment.url" target="_blank"
+      :title="attachment.description"
+    >
+      <StillImage :class="{'small': isSmall}" referrerpolicy="referrerPolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
     </a>
 
-    <video :class="{'small': isSmall}" v-if="type === 'video' && !hidden" @loadeddata="onVideoDataLoad" :src="attachment.url" controls :loop="loopVideo" playsinline></video>
+    <a class="video-container"
+      v-if="type === 'video' && !hidden"
+      :class="{'small': isSmall}"
+      :href="attachment.url"
+    >
+      <video class="video" :src="attachment.url"></video>
+      <i class="play-icon icon-play-circled"></i>
+    </a>
 
     <audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
 
@@ -34,18 +50,23 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
+$normalheight: 140px;
+$normalwidth: 180px;
+$smallheight: 80px;
+
 .attachments {
   display: flex;
   flex-wrap: wrap;
 
   .attachment.media-upload-container {
     flex: 0 0 auto;
-    max-height: 300px;
+    max-height: $normalheight;
     max-width: 100%;
   }
 
   .placeholder {
-    margin-right: 0.5em;
+    margin-right: 8px;
+    margin-bottom: 4px;
   }
 
   .nsfw-placeholder {
@@ -56,19 +77,12 @@
     }
   }
 
-  .small-attachment {
-    &.image, &.video {
-      max-width: 35%;
-    }
-    max-height: 100px;
-  }
-
   .attachment {
     position: relative;
-    flex: 1 0 30%;
-    margin: 0.5em 0.7em 0.6em 0.0em;
+    margin: 0.5em 0.5em 0em 0em;
     align-self: flex-start;
     line-height: 0;
+    flex-grow: 0;
 
     border-style: solid;
     border-width: 1px;
@@ -86,6 +100,30 @@
     line-height: 0;
   }
 
+  .video-container {
+    width: auto;
+    height: $normalheight;
+    max-width: $normalwidth;
+  }
+
+  .video {
+    width: auto;
+    object-fit: cover;
+  }
+
+  .play-icon {
+    position: absolute;
+    font-size: 64px;
+    top: calc(50% - 32px);
+    left: calc(50% - 32px);
+    color: rgba(255, 255, 255, 0.75);
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+  }
+
+  .play-icon::before {
+    margin: 0;
+  }
+
   &.html {
     flex-basis: 90%;
     width: 100%;
@@ -105,12 +143,11 @@
   }
 
   .small {
-    max-height: 100px;
+    max-height: $smallheight;
   }
+
   video {
-    max-height: 500px;
     height: 100%;
-    width: 100%;
     z-index: 0;
   }
 
@@ -120,7 +157,7 @@
 
   img.media-upload {
     line-height: 0;
-    max-height: 300px;
+    max-height: $normalheight;
     max-width: 100%;
   }
 
@@ -157,29 +194,26 @@
   }
 
   .image-attachment {
-    display: flex;
-    flex: 1;
+    flex-grow: 0;
 
     &.hidden {
       display: none;
     }
 
     .still-image {
-      width: 100%;
-      height: 100%;
     }
 
     .small {
       img {
-        max-height: 100px;
+        height: $smallheight;
       }
     }
 
     img {
-      object-fit: contain;
-      width: 100%;
-      height: 100%; /* If this isn't here, chrome will stretch the images */
-      max-height: 500px;
+      object-fit: cover;
+      height: $normalheight;
+      width: auto;
+      max-width: $normalwidth;
       image-orientation: from-image;
     }
   }