Redo everything in the MR

src/components/attachment/attachment.js

@@ -1,4 +1,5 @@
 import StillImage from '../still-image/still-image.vue'
+import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 
@@ -8,6 +9,7 @@ const Attachment = {
     'nsfw',
     'statusId',
     'size',
+    'allowPlay',
     'setMedia'
   ],
   data () {
@@ -16,11 +18,14 @@ const Attachment = {
       hideNsfwLocal: this.$store.state.config.hideNsfw,
       preloadImage: this.$store.state.config.preloadImage,
       loading: false,
-      modalOpen: false
+      img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
+      modalOpen: false,
+      showHidden: false
     }
   },
   components: {
-    StillImage
+    StillImage,
+    VideoAttachment
   },
   computed: {
     usePlaceHolder () {
@@ -33,7 +38,7 @@ const Attachment = {
       return fileTypeService.fileType(this.attachment.mimetype)
     },
     hidden () {
-      return this.nsfw && this.hideNsfwLocal
+      return this.nsfw && this.hideNsfwLocal && !this.showHidden
     },
     isEmpty () {
       return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
@@ -51,14 +56,38 @@ const Attachment = {
         window.open(target.href, '_blank')
       }
     },
-    toggleModal (event) {
-      if (this.type !== 'image' && this.type !== 'video') {
+    openModal (event) {
+      const modalTypes = this.$store.state.config.playVideosInline
+        ? ['image']
+        : ['image', 'video']
+      if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) ||
+        this.usePlaceHolder
+      ) {
+        event.stopPropagation()
+        event.preventDefault()
+        this.setMedia()
+        this.$store.dispatch('setCurrent', this.attachment)
+      }
+    },
+    toggleHidden (event) {
+      if (this.$store.state.config.useOneClickNsfw && !this.showHidden) {
+        this.openModal(event)
         return
       }
-      event.stopPropagation()
-      event.preventDefault()
-      this.setMedia()
-      this.$store.dispatch('setCurrent', this.attachment)
+      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
+      }
     }
   }
 }

src/components/attachment/attachment.vue

@@ -1,34 +1,43 @@
 <template>
-  <div v-if="usePlaceHolder" @click="toggleModal">
-    <a class="placeholder" v-if="type !== 'html'" target="_blank" :href="attachment.url">[{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]</a>
+  <div v-if="usePlaceHolder" @click="openModal">
+    <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, '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}"/>
+    <a class="image-attachment" v-if="hidden" :href="attachment.url" @click.prevent="toggleHidden">
+      <img class="nsfw" :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)"
+      @click="openModal"
       class="image-attachment"
-      :class="{'hidden': hidden && preloadImage}"
+      :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"/>
+      <StillImage referrerpolicy="referrerPolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
     </a>
 
     <a class="video-container"
+      @click="openModal"
       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>
+      <VideoAttachment class="video" :attachment="attachment" :controls="allowPlay" />
+      <i v-if="!allowPlay" class="play-icon icon-play-circled"></i>
     </a>
 
     <audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
@@ -50,18 +59,18 @@
 <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: $normalheight;
+    max-height: 200px;
     max-width: 100%;
+    display: flex;
+    video {
+      max-width: 100%;
+    }
   }
 
   .placeholder {
@@ -82,7 +91,6 @@ $smallheight: 80px;
     margin: 0.5em 0.5em 0em 0em;
     align-self: flex-start;
     line-height: 0;
-    flex-grow: 0;
 
     border-style: solid;
     border-width: 1px;
@@ -92,6 +100,28 @@ $smallheight: 80px;
     border-color: var(--border, $fallback--border);
     overflow: hidden;
   }
+
+  .non-gallery.attachment {
+    &.video {
+      flex: 1 0 40%;
+    }
+    .nsfw {
+      height: 260px;
+    }
+    .small {
+      height: 120px;
+      flex-grow: 0;
+    }
+    .video {
+      height: 260px;
+      display: flex;
+    }
+    video {
+      max-height: 100%;
+      object-fit: contain;
+    }
+  }
+
   .fullwidth {
     flex-basis: 100%;
   }
@@ -101,14 +131,12 @@ $smallheight: 80px;
   }
 
   .video-container {
-    width: auto;
-    height: $normalheight;
-    max-width: $normalwidth;
+    display: flex;
+    max-height: 100%;
   }
 
   .video {
-    width: auto;
-    object-fit: cover;
+    width: 100%;
   }
 
   .play-icon {
@@ -132,6 +160,7 @@ $smallheight: 80px;
 
   .hider {
     position: absolute;
+    white-space: nowrap;
     margin: 10px;
     padding: 5px;
     background: rgba(230,230,230,0.6);
@@ -142,12 +171,7 @@ $smallheight: 80px;
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
   }
 
-  .small {
-    max-height: $smallheight;
-  }
-
   video {
-    height: 100%;
     z-index: 0;
   }
 
@@ -157,7 +181,7 @@ $smallheight: 80px;
 
   img.media-upload {
     line-height: 0;
-    max-height: $normalheight;
+    max-height: 200px;
     max-width: 100%;
   }
 
@@ -194,26 +218,20 @@ $smallheight: 80px;
   }
 
   .image-attachment {
-    flex-grow: 0;
+    width: 100%;
+    height: 100%;
 
     &.hidden {
       display: none;
     }
 
-    .still-image {
-    }
-
-    .small {
-      img {
-        height: $smallheight;
-      }
+    .nsfw {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
     }
 
     img {
-      object-fit: cover;
-      height: $normalheight;
-      width: auto;
-      max-width: $normalwidth;
       image-orientation: from-image;
     }
   }

src/components/gallery/gallery.js

@@ -0,0 +1,55 @@
+import Attachment from '../attachment/attachment.vue'
+import { chunk, last, dropRight } from 'lodash'
+
+const Gallery = {
+  data: () => ({
+    width: 500
+  }),
+  props: [
+    'attachments',
+    'nsfw',
+    'setMedia'
+  ],
+  components: { Attachment },
+  mounted () {
+    this.resize()
+    window.addEventListener('resize', this.resize)
+  },
+  destroyed () {
+    window.removeEventListener('resize', this.resize)
+  },
+  computed: {
+    rows () {
+      if (!this.attachments) {
+        return []
+      }
+      const rows = chunk(this.attachments, 3)
+      if (last(rows).length === 1 && rows.length > 1) {
+        // if 1 attachment on last row -> add it to the previous row instead
+        const lastAttachment = last(rows)[0]
+        const allButLastRow = dropRight(rows)
+        last(allButLastRow).push(lastAttachment)
+        return allButLastRow
+      }
+      return rows
+    },
+    rowHeight () {
+      return itemsPerRow => ({ 'height': `${(this.width / (itemsPerRow + 0.6))}px` })
+    },
+    useContainFit () {
+      return this.$store.state.config.useContainFit
+    }
+  },
+  methods: {
+    resize () {
+      // Quick optimization to make resizing not always trigger state change,
+      // only update attachment size in 10px steps
+      const width = Math.floor(this.$el.getBoundingClientRect().width / 10) * 10
+      if (this.width !== width) {
+        this.width = width
+      }
+    }
+  }
+}
+
+export default Gallery

src/components/gallery/gallery.vue

@@ -0,0 +1,60 @@
+<template>
+  <div ref="galleryContainer" style="width: 100%;">
+    <div class="gallery-row" v-for="row in rows" :style="rowHeight(row.length)" :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }">
+      <attachment
+        v-for="attachment in row"
+        :setMedia="setMedia"
+        :nsfw="nsfw"
+        :attachment="attachment"
+        :allowPlay="false"
+        :key="attachment.id"
+      />
+    </div>
+  </div>
+</template>
+
+<script src='./gallery.js'></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.gallery-row {
+  height: 200px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  flex-grow: 1;
+  margin-top: 0.5em;
+
+  .attachments, .attachment {
+    margin: 0 0.5em 0 0;
+    flex-grow: 1;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .image-attachment {
+    width: 100%;
+    height: 100%;
+  }
+
+  .video-container {
+    height: 100%;
+  }
+
+  &.contain-fit {
+    img, video {
+      object-fit: contain;
+    }
+  }
+
+  &.cover-fit {
+    img, video {
+      object-fit: cover;
+    }
+  }
+}
+
+</style>

src/components/media_modal/media_modal.js

@@ -1,9 +1,11 @@
 import StillImage from '../still-image/still-image.vue'
+import VideoAttachment from '../video_attachment/video_attachment.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 
 const MediaModal = {
   components: {
-    StillImage
+    StillImage,
+    VideoAttachment
   },
   computed: {
     showing () {
@@ -17,9 +19,6 @@ const MediaModal = {
     },
     type () {
       return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
-    },
-    loopVideo () {
-      return this.$store.state.config.loopVideo
     }
   },
   created () {

src/components/media_modal/media_modal.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="modal-view" v-if="showing" @click.prevent="hide">
     <img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img>
-    <video
+    <VideoAttachment
       class="modal-image"
       v-if="type === 'video'"
-      :src="currentMedia.url"
-      @click.stop=""
-      controls autoplay
-      :loop="loopVideo">
-    </video>
+      :attachment="currentMedia"
+      :controls="true"
+      @click.stop.native="">
+    </VideoAttachment>
   </div>
 </template>
 
@@ -18,7 +17,7 @@
 @import '../../_variables.scss';
 
 .modal-view {
-  z-index: 1005;
+  z-index: 1000;
   position: fixed;
   width: 100vw;
   height: 100vh;

src/components/registration/registration.vue

@@ -215,7 +215,7 @@ $validations-cRed: #f04124;
   }
 }
 
-@media all and (max-width: 959px) {
+@media all and (max-width: 800px) {
   .registration-form .container {
     flex-direction: column-reverse;
   }

src/components/settings/settings.js

@@ -13,6 +13,7 @@ const settings = {
       hideAttachmentsLocal: user.hideAttachments,
       hideAttachmentsInConvLocal: user.hideAttachmentsInConv,
       hideNsfwLocal: user.hideNsfw,
+      useOneClickNsfw: user.useOneClickNsfw,
       hideISPLocal: user.hideISP,
       preloadImage: user.preloadImage,
 
@@ -56,7 +57,17 @@ const settings = {
       scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy),
 
       stopGifs: user.stopGifs,
-      webPushNotificationsLocal: user.webPushNotifications
+      webPushNotificationsLocal: user.webPushNotifications,
+      loopVideoSilentOnlyLocal: user.loopVideosSilentOnly,
+      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'),
+      playVideosInline: user.playVideosInline,
+      useContainFit: user.useContainFit
     }
   },
   components: {
@@ -88,6 +99,9 @@ const settings = {
     hideNsfwLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideNsfw', value })
     },
+    useOneClickNsfw (value) {
+      this.$store.dispatch('setOption', { name: 'useOneClickNsfw', value })
+    },
     preloadImage (value) {
       this.$store.dispatch('setOption', { name: 'preloadImage', value })
     },
@@ -112,6 +126,9 @@ 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 })
     },
@@ -146,6 +163,12 @@ const settings = {
     webPushNotificationsLocal (value) {
       this.$store.dispatch('setOption', { name: 'webPushNotifications', value })
       if (value) this.$store.dispatch('registerPushNotifications')
+    },
+    playVideosInline (value) {
+      this.$store.dispatch('setOption', { name: 'playVideosInline', value })
+    },
+    useContainFit (value) {
+      this.$store.dispatch('setOption', { name: 'useContainFit', value })
     }
   }
 }

src/components/settings/settings.vue

@@ -123,6 +123,10 @@
                 <input :disabled="!hideNsfwLocal" type="checkbox" id="preloadImage" v-model="preloadImage">
                 <label for="preloadImage">{{$t('settings.preload_images')}}</label>
               </li>
+              <li>
+                <input type="checkbox" id="useOneClickNsfw" v-model="useOneClickNsfw">
+                <label for="useOneClickNsfw">{{$t('settings.use_one_click_nsfw')}}</label>
+              </li>
             </ul>
             <li>
               <input type="checkbox" id="stopGifs" v-model="stopGifs">
@@ -131,6 +135,23 @@
             <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>
+            <li>
+              <input type="checkbox" id="playVideosInline" v-model="playVideosInline">
+              <label for="playVideosInline">{{$t('settings.play_videos_inline')}}</label>
+            </li>
+            <li>
+              <input type="checkbox" id="useContainFit" v-model="useContainFit">
+              <label for="useContainFit">{{$t('settings.use_contain_fit')}}</label>
             </li>
           </ul>
         </div>

src/components/status/status.js

@@ -5,9 +5,11 @@ import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
 import StillImage from '../still-image/still-image.vue'
+import Gallery from '../gallery/gallery.vue'
 import { filter, find } from 'lodash'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import fileType from 'src/services/file_type/file_type.service'
 
 const Status = {
   name: 'Status',
@@ -197,6 +199,24 @@ const Status = {
         return 'small'
       }
       return 'normal'
+    },
+    galleryTypes () {
+      if (this.attachmentSize === 'hide') {
+        return []
+      }
+      return this.$store.state.config.playVideosInline
+        ? ['image']
+        : ['image', 'video']
+    },
+    galleryAttachments () {
+      return this.status.attachments.filter(
+        file => fileType.fileMatchesSomeType(this.galleryTypes, file)
+      )
+    },
+    nonGalleryAttachments () {
+      return this.status.attachments.filter(
+        file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
+      )
     }
   },
   components: {
@@ -206,7 +226,8 @@ const Status = {
     DeleteButton,
     PostStatusForm,
     UserCardContent,
-    StillImage
+    StillImage,
+    Gallery
   },
   methods: {
     visibilityIcon (visibility) {
@@ -283,7 +304,7 @@ const Status = {
       return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
     },
     setMedia () {
-      const attachments = this.status.attachments
+      const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
       return () => this.$store.dispatch('setMedia', attachments)
     }
   },

src/components/status/status.vue

@@ -93,16 +93,23 @@
             <a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">Show less</a>
           </div>
 
-          <div v-if='status.attachments && !hideSubjectStatus' class='attachments media-body'>
+          <div v-if="status.attachments && !hideSubjectStatus" class="attachments media-body">
             <attachment
+              class="non-gallery"
+              v-for="attachment in nonGalleryAttachments"
               :size="attachmentSize"
-              :status-id="status.id"
               :nsfw="nsfwClickthrough"
               :attachment="attachment"
-              :set-media="setMedia()"
-              v-for="attachment in status.attachments"
-              :key="attachment.id">
-            </attachment>
+              :allowPlay="true"
+              :setMedia="setMedia()"
+              :key="attachment.id"
+            />
+            <gallery
+              v-if="galleryAttachments.length > 0"
+              :nsfw="nsfwClickthrough"
+              :attachments="galleryAttachments"
+              :setMedia="setMedia()"
+            />
           </div>
 
           <div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'>
@@ -568,7 +575,7 @@ a.unmute {
   }
 }
 
-@media all and (max-width: 960px) {
+@media all and (max-width: 800px) {
   .status-el {
     .retweet-info {
       .avatar {

src/components/video_attachment/video_attachment.js

@@ -0,0 +1,31 @@
+
+const VideoAttachment = {
+  props: ['attachment', 'controls'],
+  data () {
+    return {
+      loopVideo: this.$store.state.config.loopVideo
+    }
+  },
+  methods: {
+    onVideoDataLoad (e) {
+      const target = e.srcElement || e.target
+      if (typeof target.webkitAudioDecodedByteCount !== 'undefined') {
+        // non-zero if video has audio track
+        if (target.webkitAudioDecodedByteCount > 0) {
+          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+        }
+      } else if (typeof target.mozHasAudio !== 'undefined') {
+        // true if video has audio track
+        if (target.mozHasAudio) {
+          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+        }
+      } else if (typeof target.audioTracks !== 'undefined') {
+        if (target.audioTracks.length > 0) {
+          this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+        }
+      }
+    }
+  }
+}
+
+export default VideoAttachment

src/components/video_attachment/video_attachment.vue

@@ -0,0 +1,11 @@
+<template>
+  <video class="video"
+    @loadeddata="onVideoDataLoad"
+    :src="attachment.url"
+    :loop="loopVideo"
+    :controls="controls"
+    playsinline
+  />
+</template>
+
+<script src="./video_attachment.js"></script>