Polish for videos, smaller sizes, remove gif-looping options

7 files changed, 52 insertions, 105 deletions

diff --git a/src/assets/nsfw.png b/src/assets/nsfw.png
index 42749033..972bcb4c 100644
--- a/src/assets/nsfw.png
+++ b/src/assets/nsfw.png
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 5e672ef2..2698fb67 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -15,10 +15,7 @@ const Attachment = {
       nsfwImage: this.$store.state.config.nsfwCensorImage || nsfwImage,
       hideNsfwLocal: this.$store.state.config.hideNsfw,
       preloadImage: this.$store.state.config.preloadImage,
-      loopVideo: this.$store.state.config.loopVideo,
-      showHidden: false,
       loading: false,
-      img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
       modalOpen: false
     }
   },
@@ -33,7 +30,7 @@ const Attachment = {
       return fileTypeService.fileType(this.attachment.mimetype)
     },
     hidden () {
-      return this.nsfw && this.hideNsfwLocal && !this.showHidden
+      return this.nsfw && this.hideNsfwLocal
     },
     isEmpty () {
       return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
@@ -51,46 +48,14 @@ const Attachment = {
         window.open(target.href, '_blank')
       }
     },
-    toggleHidden () {
-      if (this.img && !this.preloadImage) {
-        if (this.img.onload) {
-          this.img.onload()
-        } else {
-          this.loading = true
-          this.img.src = this.attachment.url
-          this.img.onload = () => {
-            this.loading = false
-            this.showHidden = !this.showHidden
-          }
-        }
-      } else {
-        this.showHidden = !this.showHidden
-      }
-    },
     toggleModal (event) {
       if (this.type !== 'image' && this.type !== 'video') {
         return
       }
+      event.stopPropagation()
       event.preventDefault()
       this.setMedia()
       this.$store.dispatch('setCurrent', this.attachment)
-    },
-    onVideoDataLoad (e) {
-      if (typeof e.srcElement.webkitAudioDecodedByteCount !== 'undefined') {
-        // non-zero if video has audio track
-        if (e.srcElement.webkitAudioDecodedByteCount > 0) {
-          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
-        }
-      } else if (typeof e.srcElement.mozHasAudio !== 'undefined') {
-        // true if video has audio track
-        if (e.srcElement.mozHasAudio) {
-          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
-        }
-      } else if (typeof e.srcElement.audioTracks !== 'undefined') {
-        if (e.srcElement.audioTracks.length > 0) {
-          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
-        }
-      }
     }
   }
 }
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 1c6b84df..74993fd9 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -4,16 +4,15 @@
   </div>
   <div
     v-else class="attachment"
-    :class="{[type]: true, loading, 'small-attachment': isSmall, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
+    :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
     v-show="!isEmpty"
     @click="toggleModal"
   >
-    <a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()">
-      <img :key="nsfwImage" :src="nsfwImage"/>
+    <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}"
@@ -23,7 +22,14 @@
       <StillImage :class="{'small': isSmall}" referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
     </a>
 
-    <video :class="{'small': isSmall}" v-if="type === 'video' && !hidden" :src="attachment.url"></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>
 
@@ -44,13 +50,17 @@
 <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: 160px;
+    max-height: $normalheight;
     max-width: 100%;
   }
 
@@ -67,15 +77,12 @@
     }
   }
 
-  .small-attachment {
-    max-height: 100px;
-  }
-
   .attachment {
     position: relative;
     margin: 0.5em 0.5em 0em 0em;
     align-self: flex-start;
     line-height: 0;
+    flex-grow: 0;
 
     border-style: solid;
     border-width: 1px;
@@ -93,10 +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%;
@@ -116,11 +143,10 @@
   }
 
   .small {
-    max-height: 100px;
+    max-height: $smallheight;
   }
 
   video {
-    max-height: 160px;
     height: 100%;
     z-index: 0;
   }
@@ -131,7 +157,7 @@
 
   img.media-upload {
     line-height: 0;
-    max-height: 160px;
+    max-height: $normalheight;
     max-width: 100%;
   }
 
@@ -168,27 +194,26 @@
   }
 
   .image-attachment {
-    display: flex;
-    flex: 1;
+    flex-grow: 0;
 
     &.hidden {
       display: none;
     }
 
     .still-image {
-      height: 100%;
     }
 
     .small {
       img {
-        max-height: 80px;
+        height: $smallheight;
       }
     }
 
     img {
       object-fit: cover;
-      height: 100%; /* If this isn't here, chrome will stretch the images */
-      height: 160px;
+      height: $normalheight;
+      width: auto;
+      max-width: $normalwidth;
       image-orientation: from-image;
     }
   }
diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index 95c3b4a9..7f10589c 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -2,11 +2,6 @@ import StillImage from '../still-image/still-image.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 
 const MediaModal = {
-  data () {
-    return {
-      loopVideo: this.$store.state.config.loopVideo
-    }
-  },
   components: {
     StillImage
   },
@@ -22,6 +17,9 @@ const MediaModal = {
     },
     type () {
       return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
+    },
+    loopVideo () {
+      return this.$store.state.config.loopVideo
     }
   },
   created () {
@@ -34,26 +32,6 @@ const MediaModal = {
   methods: {
     hide () {
       this.$store.dispatch('closeMediaViewer')
-    },
-    onVideoDataLoad (e) {
-      if (!e.srcElement) {
-        return
-      }
-      if (typeof e.srcElement.webkitAudioDecodedByteCount !== 'undefined') {
-        // non-zero if video has audio track
-        if (e.srcElement.webkitAudioDecodedByteCount > 0) {
-          this.loopVideo = this.$store.state.config.loopVideo && !this.$store.state.config.loopVideoSilentOnly
-        }
-      } else if (typeof e.srcElement.mozHasAudio !== 'undefined') {
-        // true if video has audio track
-        if (e.srcElement.mozHasAudio) {
-          this.loopVideo = this.$store.state.config.loopVideo && !this.$store.state.config.loopVideoSilentOnly
-        }
-      } else if (typeof e.srcElement.audioTracks !== 'undefined') {
-        if (e.srcElement.audioTracks.length > 0) {
-          this.loopVideo = this.$store.state.config.loopVideo && !this.$store.state.config.loopVideoSilentOnly
-        }
-      }
     }
   }
 }
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index c8b4c306..eb8fca53 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -7,7 +7,6 @@
       :src="currentMedia.url"
       @click.stop=""
       controls autoplay
-      @loadeddata="onVideoDataLoad" 
       :loop="loopVideo">
     </video>
   </div>
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index d45ec72d..76b42bab 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -29,7 +29,6 @@ const settings = {
       notificationVisibilityLocal: user.notificationVisibility,
       replyVisibilityLocal: user.replyVisibility,
       loopVideoLocal: user.loopVideo,
-      loopVideoSilentOnlyLocal: user.loopVideoSilentOnly,
       muteWordsString: user.muteWords.join('\n'),
       autoLoadLocal: user.autoLoad,
       streamingLocal: user.streaming,
@@ -57,14 +56,7 @@ const settings = {
       scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy),
 
       stopGifs: user.stopGifs,
-      webPushNotificationsLocal: user.webPushNotifications,
-      loopSilentAvailable:
-        // Firefox
-        Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
-        // Chrome-likes
-        Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
-        // Future spec, still not supported in Nightly 63 as of 08/2018
-        Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
+      webPushNotificationsLocal: user.webPushNotifications
     }
   },
   components: {
@@ -120,9 +112,6 @@ const settings = {
     loopVideoLocal (value) {
       this.$store.dispatch('setOption', { name: 'loopVideo', value })
     },
-    loopVideoSilentOnlyLocal (value) {
-      this.$store.dispatch('setOption', { name: 'loopVideoSilentOnly', value })
-    },
     autoLoadLocal (value) {
       this.$store.dispatch('setOption', { name: 'autoLoad', value })
     },
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 39125009..e84bd3f6 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -131,15 +131,6 @@
             <li>
               <input type="checkbox" id="loopVideo" v-model="loopVideoLocal">
               <label for="loopVideo">{{$t('settings.loop_video')}}</label>
-              <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
-                <li>
-                  <input :disabled="!loopVideoLocal || !loopSilentAvailable" type="checkbox" id="loopVideoSilentOnly" v-model="loopVideoSilentOnlyLocal">
-                  <label for="loopVideoSilentOnly">{{$t('settings.loop_video_silent_only')}}</label>
-                  <div v-if="!loopSilentAvailable" class="unavailable">
-                    <i class="icon-globe"/>! {{$t('settings.limited_availability')}}
-                  </div>
-                </li>
-              </ul>
             </li>
           </ul>
         </div>