Merge branch 'feat/media-modal' into 'develop'

modal for viewing attachments in-tab

See merge request pleroma/pleroma-fe!468

src/App.js

@@ -6,6 +6,7 @@ import InstanceSpecificPanel from './components/instance_specific_panel/instance
 import FeaturesPanel from './components/features_panel/features_panel.vue'
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
 import ChatPanel from './components/chat_panel/chat_panel.vue'
+import MediaModal from './components/media_modal/media_modal.vue'
 import SideDrawer from './components/side_drawer/side_drawer.vue'
 import { unseenNotificationsFromStore } from './services/notification_utils/notification_utils'
 
@@ -20,6 +21,7 @@ export default {
     FeaturesPanel,
     WhoToFollowPanel,
     ChatPanel,
+    MediaModal,
     SideDrawer
   },
   data: () => ({

src/App.scss

@@ -505,7 +505,7 @@ nav {
 }
 
 .main {
-  flex-basis: 60%;
+  flex-basis: 50%;
   flex-grow: 1;
   flex-shrink: 1;
 }
@@ -539,7 +539,7 @@ nav {
   }
 }
 
-@media all and (min-width: 960px) {
+@media all and (min-width: 800px) {
   body {
     overflow-y: scroll;
   }
@@ -623,7 +623,7 @@ nav {
   color: $fallback--faint;
   color: var(--faint, $fallback--faint);
 }
-@media all and (min-width: 959px) {
+@media all and (min-width: 800px) {
   .logo {
     opacity: 1 !important;
   }
@@ -687,7 +687,7 @@ nav {
   }
 }
 
-@media all and (max-width: 959px) {
+@media all and (max-width: 800px) {
   .mobile-hidden {
     display: none;
   }

src/App.vue

@@ -41,6 +41,7 @@
           <router-view></router-view>
         </transition>
       </div>
+      <media-modal></media-modal>
     </div>
     <chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel>
   </div>

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'
 
@@ -7,23 +8,29 @@ const Attachment = {
     'attachment',
     'nsfw',
     'statusId',
-    'size'
+    'size',
+    'allowPlay',
+    'setMedia'
   ],
   data () {
     return {
       nsfwImage: this.$store.state.instance.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')
+      img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
+      modalOpen: false,
+      showHidden: false
     }
   },
   components: {
-    StillImage
+    StillImage,
+    VideoAttachment
   },
   computed: {
+    usePlaceHolder () {
+      return this.size === 'hide' || this.type === 'unknown'
+    },
     referrerpolicy () {
       return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'
     },
@@ -40,7 +47,7 @@ const Attachment = {
       return this.size === 'small'
     },
     fullwidth () {
-      return fileTypeService.fileType(this.attachment.mimetype) === 'html'
+      return this.type === 'html' || this.type === 'audio'
     }
   },
   methods: {
@@ -49,7 +56,24 @@ const Attachment = {
         window.open(target.href, '_blank')
       }
     },
-    toggleHidden () {
+    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
+      }
       if (this.img && !this.preloadImage) {
         if (this.img.onload) {
           this.img.onload()
@@ -64,23 +88,6 @@ const Attachment = {
       } else {
         this.showHidden = !this.showHidden
       }
-    },
-    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
-        }
-      }
     }
   }
 }

src/components/attachment/attachment.vue

@@ -1,19 +1,44 @@
 <template>
-  <div v-if="size==='hide'">
+  <div v-if="usePlaceHolder" @click="openModal">
-    <a class="placeholder" v-if="type !== 'html'" target="_blank" :href="attachment.url">[{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]</a>
+    <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">
+  <div
-    <a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()">
+    v-else class="attachment"
-      <img :key="nsfwImage" :src="nsfwImage"/>
+    :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
+    v-show="!isEmpty"
+  >
+    <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>
+      <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)"
+      @click="openModal"
+      class="image-attachment"
+      :class="{'hidden': hidden && preloadImage }"
+      :href="attachment.url" target="_blank"
+      :title="attachment.description"
+    >
+      <StillImage :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"
+      @click="openModal"
+      v-if="type === 'video' && !hidden"
+      :class="{'small': isSmall}"
+      :href="allowPlay ? undefined : attachment.url"
+    >
+      <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>
 
@@ -40,12 +65,17 @@
 
   .attachment.media-upload-container {
     flex: 0 0 auto;
-    max-height: 300px;
+    max-height: 200px;
     max-width: 100%;
+    display: flex;
+    video {
+      max-width: 100%;
+    }
   }
 
   .placeholder {
-    margin-right: 0.5em;
+    margin-right: 8px;
+    margin-bottom: 4px;
   }
 
   .nsfw-placeholder {
@@ -56,17 +86,9 @@
     }
   }
 
-  .small-attachment {
-    &.image, &.video {
-      max-width: 35%;
-    }
-    max-height: 100px;
-  }
-
   .attachment {
     position: relative;
-    flex: 1 0 30%;
+    margin: 0.5em 0.5em 0em 0em;
-    margin: 0.5em 0.7em 0.6em 0.0em;
     align-self: flex-start;
     line-height: 0;
 
@@ -78,6 +100,28 @@
     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%;
   }
@@ -86,6 +130,28 @@
     line-height: 0;
   }
 
+  .video-container {
+    display: flex;
+    max-height: 100%;
+  }
+
+  .video {
+    width: 100%;
+  }
+
+  .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%;
@@ -94,6 +160,7 @@
 
   .hider {
     position: absolute;
+    white-space: nowrap;
     margin: 10px;
     padding: 5px;
     background: rgba(230,230,230,0.6);
@@ -104,13 +171,7 @@
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
   }
 
-  .small {
-    max-height: 100px;
-  }
   video {
-    max-height: 500px;
-    height: 100%;
-    width: 100%;
     z-index: 0;
   }
 
@@ -120,7 +181,7 @@
 
   img.media-upload {
     line-height: 0;
-    max-height: 300px;
+    max-height: 200px;
     max-width: 100%;
   }
 
@@ -157,29 +218,20 @@
   }
 
   .image-attachment {
-    display: flex;
+    width: 100%;
-    flex: 1;
+    height: 100%;
 
     &.hidden {
       display: none;
     }
 
-    .still-image {
+    .nsfw {
+      object-fit: cover;
       width: 100%;
       height: 100%;
     }
 
-    .small {
-      img {
-        max-height: 100px;
-      }
-    }
-
     img {
-      object-fit: contain;
-      width: 100%;
-      height: 100%; /* If this isn't here, chrome will stretch the images */
-      max-height: 500px;
       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

@@ -0,0 +1,38 @@
+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,
+    VideoAttachment
+  },
+  computed: {
+    showing () {
+      return this.$store.state.mediaViewer.activated
+    },
+    currentIndex () {
+      return this.$store.state.mediaViewer.currentIndex
+    },
+    currentMedia () {
+      return this.$store.state.mediaViewer.media[this.currentIndex]
+    },
+    type () {
+      return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
+    }
+  },
+  created () {
+    document.addEventListener('keyup', e => {
+      if (e.keyCode === 27 && this.showing) { // escape
+        this.hide()
+      }
+    })
+  },
+  methods: {
+    hide () {
+      this.$store.dispatch('closeMediaViewer')
+    }
+  }
+}
+
+export default MediaModal

src/components/media_modal/media_modal.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="modal-view" v-if="showing" @click.prevent="hide">
+    <img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img>
+    <VideoAttachment
+      class="modal-image"
+      v-if="type === 'video'"
+      :attachment="currentMedia"
+      :controls="true"
+      @click.stop.native="">
+    </VideoAttachment>
+  </div>
+</template>
+
+<script src="./media_modal.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.modal-view {
+  z-index: 1000;
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+}
+
+.modal-image {
+  max-width: 90%;
+  max-height: 90%;
+  box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
+}
+</style>

src/components/registration/registration.vue

@@ -197,7 +197,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,
 
@@ -29,7 +30,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,
@@ -58,13 +58,16 @@ const settings = {
 
       stopGifs: user.stopGifs,
       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')
+        Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
+      playVideosInline: user.playVideosInline,
+      useContainFit: user.useContainFit
     }
   },
   components: {
@@ -96,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 })
     },
@@ -157,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">
@@ -141,6 +145,14 @@
                 </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,11 +5,13 @@ 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 LinkPreview from '../link-preview/link-preview.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'
+import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import { mentionMatchesUrl } from 'src/services/mention_matcher/mention_matcher.js'
+import { filter, find } from 'lodash'
 
 const Status = {
   name: 'Status',
@@ -37,7 +39,8 @@ const Status = {
       expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
         ? !this.$store.state.instance.collapseMessageWithSubject
         : !this.$store.state.config.collapseMessageWithSubject,
-      betterShadow: this.$store.state.interface.browserSupport.cssFilter
+      betterShadow: this.$store.state.interface.browserSupport.cssFilter,
+      maxAttachments: 9
     }
   },
   computed: {
@@ -207,12 +210,31 @@ const Status = {
     },
     attachmentSize () {
       if ((this.$store.state.config.hideAttachments && !this.inConversation) ||
-        (this.$store.state.config.hideAttachmentsInConv && this.inConversation)) {
+        (this.$store.state.config.hideAttachmentsInConv && this.inConversation) ||
+        (this.status.attachments.length > this.maxAttachments)) {
         return 'hide'
       } else if (this.compact) {
         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: {
@@ -223,6 +245,7 @@ const Status = {
     PostStatusForm,
     UserCardContent,
     StillImage,
+    Gallery,
     LinkPreview
   },
   methods: {
@@ -310,6 +333,10 @@ const Status = {
     },
     generateUserProfileLink (id, name) {
       return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
+    },
+    setMedia () {
+      const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
+      return () => this.$store.dispatch('setMedia', attachments)
     }
   },
   watch: {

src/components/status/status.vue

@@ -93,9 +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 :size="attachmentSize" :status-id="status.id" :nsfw="nsfwClickthrough" :attachment="attachment" v-for="attachment in status.attachments" :key="attachment.id">
+            <attachment
-            </attachment>
+              class="non-gallery"
+              v-for="attachment in nonGalleryAttachments"
+              :size="attachmentSize"
+              :nsfw="nsfwClickthrough"
+              :attachment="attachment"
+              :allowPlay="true"
+              :setMedia="setMedia()"
+              :key="attachment.id"
+            />
+            <gallery
+              v-if="galleryAttachments.length > 0"
+              :nsfw="nsfwClickthrough"
+              :attachments="galleryAttachments"
+              :setMedia="setMedia()"
+            />
           </div>
 
           <div v-if="status.card && !hideSubjectStatus && !noHeading" class="link-preview media-body">
@@ -569,7 +583,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>

src/i18n/en.json

@@ -133,6 +133,7 @@
     "hide_attachments_in_tl": "Hide attachments in timeline",
     "hide_isp": "Hide instance-specific panel",
     "preload_images": "Preload images",
+    "use_one_click_nsfw": "Open NSFW attachments with just one click",
     "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
     "hide_user_stats": "Hide user statistics (e.g. the number of followers)",
     "import_followers_from_a_csv_file": "Import follows from a csv file",
@@ -149,6 +150,8 @@
     "lock_account_description": "Restrict your account to approved followers only",
     "loop_video": "Loop videos",
     "loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
+    "play_videos_inline": "Play videos directly on timeline",
+    "use_contain_fit": "Don't crop the attachment in thumbnails",
     "name": "Name",
     "name_bio": "Name & Bio",
     "new_password": "New password",

src/i18n/fi.json

@@ -1,4 +1,16 @@
 {
+  "chat": {
+    "title": "Chat"
+  },
+  "features_panel": {
+    "chat": "Chat",
+    "gopher": "Gopher",
+    "media_proxy": "Media-välityspalvelin",
+    "scope_options": "Näkyvyyden rajaus",
+    "text_limit": "Tekstin pituusraja",
+    "title": "Ominaisuudet",
+    "who_to_follow": "Seurausehdotukset"
+  },
   "finder": {
     "error_fetching_user": "Virhe hakiessa käyttäjää",
     "find_user": "Hae käyttäjä"
@@ -9,87 +21,245 @@
   },
   "login": {
     "login": "Kirjaudu sisään",
+    "description": "Kirjaudu sisään OAuthilla",
     "logout": "Kirjaudu ulos",
     "password": "Salasana",
-    "placeholder": "esim. lain",
+    "placeholder": "esim. Seppo",
     "register": "Rekisteröidy",
     "username": "Käyttäjänimi"
   },
   "nav": {
+    "about": "Tietoja",
+    "back": "Takaisin",
+    "chat": "Paikallinen Chat",
+    "friend_requests": "Seurauspyynnöt",
     "mentions": "Maininnat",
+    "dms": "Yksityisviestit",
     "public_tl": "Julkinen Aikajana",
     "timeline": "Aikajana",
-    "twkn": "Koko Tunnettu Verkosto"
+    "twkn": "Koko Tunnettu Verkosto",
+    "user_search": "Käyttäjähaku",
+    "who_to_follow": "Seurausehdotukset",
+    "preferences": "Asetukset"
   },
   "notifications": {
+    "broken_favorite": "Viestiä ei löydetty...",
     "favorited_you": "tykkäsi viestistäsi",
     "followed_you": "seuraa sinua",
+    "load_older": "Lataa vanhempia ilmoituksia",
     "notifications": "Ilmoitukset",
     "read": "Lue!",
     "repeated_you": "toisti viestisi",
     "no_more_notifications": "Ei enempää ilmoituksia"
   },
   "post_status": {
+    "new_status": "Uusi viesti",
+    "account_not_locked_warning": "Tilisi ei ole {0}. Kuka vain voi seurata sinua nähdäksesi 'vain-seuraajille' -viestisi",
+    "account_not_locked_warning_link": "lukittu",
+    "attachments_sensitive": "Merkkaa liitteet arkaluonteisiksi",
+    "content_type": {
+      "plain_text": "Tavallinen teksti"
+    },
+    "content_warning": "Aihe (valinnainen)",
     "default": "Tulin juuri saunasta.",
-    "posting": "Lähetetään"
+    "direct_warning": "Tämä viesti näkyy vain mainituille käyttäjille.",
+    "posting": "Lähetetään",
+    "scope": {
+      "direct": "Yksityisviesti - Näkyy vain mainituille käyttäjille",
+      "private": "Vain-seuraajille - Näkyy vain seuraajillesi",
+      "public": "Julkinen - Näkyy julkisilla aikajanoilla",
+      "unlisted": "Listaamaton - Ei näy julkisilla aikajanoilla"
+    }
   },
   "registration": {
     "bio": "Kuvaus",
     "email": "Sähköposti",
     "fullname": "Koko nimi",
     "password_confirm": "Salasanan vahvistaminen",
-    "registration": "Rekisteröityminen"
+    "registration": "Rekisteröityminen",
+    "token": "Kutsuvaltuus",
+    "captcha": "Varmenne",
+    "new_captcha": "Paina kuvaa saadaksesi uuden varmenteen",
+    "validations": {
+      "username_required": "ei voi olla tyhjä",
+      "fullname_required": "ei voi olla tyhjä",
+      "email_required": "ei voi olla tyhjä",
+      "password_required": "ei voi olla tyhjä",
+      "password_confirmation_required": "ei voi olla tyhjä",
+      "password_confirmation_match": "pitää vastata salasanaa"
+    }
   },
   "settings": {
+    "attachmentRadius": "Liitteet",
     "attachments": "Liitteet",
     "autoload": "Lataa vanhempia viestejä automaattisesti ruudun pohjalla",
     "avatar": "Profiilikuva",
+    "avatarAltRadius": "Profiilikuvat (ilmoitukset)",
+    "avatarRadius": "Profiilikuvat",
     "background": "Tausta",
     "bio": "Kuvaus",
+    "btnRadius": "Napit",
+    "cBlue": "Sininen (Vastaukset, seuraukset)",
+    "cGreen": "Vihreä (Toistot)",
+    "cOrange": "Oranssi (Tykkäykset)",
+    "cRed": "Punainen (Peruminen)",
+    "change_password": "Vaihda salasana",
+    "change_password_error": "Virhe vaihtaessa salasanaa.",
+    "changed_password": "Salasana vaihdettu!",
+    "collapse_subject": "Minimoi viestit, joille on asetettu aihe",
+    "composing": "Viestien laatiminen",
+    "confirm_new_password": "Vahvista uusi salasana",
     "current_avatar": "Nykyinen profiilikuvasi",
+    "current_password": "Nykyinen salasana",
     "current_profile_banner": "Nykyinen julisteesi",
+    "data_import_export_tab": "Tietojen tuonti / vienti",
+    "default_vis": "Oletusnäkyvyysrajaus",
+    "delete_account": "Poista tili",
+    "delete_account_description": "Poista tilisi ja viestisi pysyvästi.",
+    "delete_account_error": "Virhe poistaessa tiliäsi. Jos virhe jatkuu, ota yhteyttä palvelimesi ylläpitoon.",
+    "delete_account_instructions": "Syötä salasanasi vahvistaaksesi tilin poiston.",
+    "export_theme": "Tallenna teema",
     "filtering": "Suodatus",
     "filtering_explanation": "Kaikki viestit, jotka sisältävät näitä sanoja, suodatetaan. Yksi sana per rivi.",
+    "follow_export": "Seurausten vienti",
+    "follow_export_button": "Vie seurauksesi CSV-tiedostoon",
+    "follow_export_processing": "Käsitellään, sinua pyydetään lataamaan tiedosto hetken päästä",
+    "follow_import": "Seurausten tuonti",
+    "follow_import_error": "Virhe tuodessa seuraksia",
+    "follows_imported": "Seuraukset tuotu! Niiden käsittely vie hetken.",
     "foreground": "Korostus",
+    "general": "Yleinen",
     "hide_attachments_in_convo": "Piilota liitteet keskusteluissa",
     "hide_attachments_in_tl": "Piilota liitteet aikajanalla",
+    "hide_isp": "Piilota palvelimenkohtainen ruutu",
+    "preload_images": "Esilataa kuvat",
+    "use_one_click_nsfw": "Avaa NSFW-liitteet yhdellä painalluksella",
+    "hide_post_stats": "Piilota viestien statistiikka (esim. tykkäysten määrä)",
+    "hide_user_stats": "Piilota käyttäjien statistiikka (esim. seuraajien määrä)",
+    "import_followers_from_a_csv_file": "Tuo seuraukset CSV-tiedostosta",
+    "import_theme": "Tuo tallennettu teema",
+    "inputRadius": "Syöttökentät",
+    "checkboxRadius": "Valintalaatikot",
+    "instance_default": "(oletus: {value})",
+    "instance_default_simple": "(oletus)",
+    "interface": "Käyttöliittymä",
+    "interfaceLanguage": "Käyttöliittymän kieli",
+    "invalid_theme_imported": "Tuotu tallennettu teema on epäkelpo, muutoksia ei tehty nykyiseen teemaasi.",
+    "limited_availability": "Ei saatavilla selaimessasi",
     "links": "Linkit",
+    "lock_account_description": "Vain erikseen hyväksytyt käyttäjät voivat seurata tiliäsi",
+    "loop_video": "Uudelleentoista videot",
+    "loop_video_silent_only": "Uudelleentoista ainoastaan äänettömät videot (Video-\"giffit\")",
+    "play_videos_inline": "Toista videot suoraan aikajanalla",
+    "use_contain_fit": "Älä rajaa liitteitä esikatselussa",
     "name": "Nimi",
     "name_bio": "Nimi ja kuvaus",
-    "nsfw_clickthrough": "Piilota NSFW liitteet klikkauksen taakse.",
+    "new_password": "Uusi salasana",
+    "notification_visibility": "Ilmoitusten näkyvyys",
+    "notification_visibility_follows": "Seuraukset",
+    "notification_visibility_likes": "Tykkäykset",
+    "notification_visibility_mentions": "Maininnat",
+    "notification_visibility_repeats": "Toistot",
+    "no_rich_text_description": "Älä näytä tekstin muotoilua.",
+    "hide_network_description": "Älä näytä seurauksiani tai seuraajiani",
+    "nsfw_clickthrough": "Piilota NSFW liitteet klikkauksen taakse",
+    "panelRadius": "Ruudut",
+    "pause_on_unfocused": "Pysäytä automaattinen viestien näyttö välilehden ollessa pois fokuksesta",
     "presets": "Valmiit teemat",
     "profile_background": "Taustakuva",
     "profile_banner": "Juliste",
+    "profile_tab": "Profiili",
+    "radii_help": "Aseta reunojen pyöristys (pikseleinä)",
+    "replies_in_timeline": "Keskustelut aikajanalla",
     "reply_link_preview": "Keskusteluiden vastauslinkkien esikatselu",
+    "reply_visibility_all": "Näytä kaikki vastaukset",
+    "reply_visibility_following": "Näytä vain vastaukset minulle tai seuraamilleni käyttäjille",
+    "reply_visibility_self": "Näytä vain vastaukset minulle",
+    "saving_err": "Virhe tallentaessa asetuksia",
+    "saving_ok": "Asetukset tallennettu",
+    "security_tab": "Tietoturva",
+    "scope_copy": "Kopioi näkyvyysrajaus vastatessa (Yksityisviestit aina kopioivat)",
     "set_new_avatar": "Aseta uusi profiilikuva",
     "set_new_profile_background": "Aseta uusi taustakuva",
     "set_new_profile_banner": "Aseta uusi juliste",
     "settings": "Asetukset",
+    "subject_input_always_show": "Näytä aihe-kenttä",
+    "subject_line_behavior": "Aihe-kentän kopiointi",
+    "subject_line_email": "Kuten sähköposti: \"re: aihe\"",
+    "subject_line_mastodon": "Kopioi sellaisenaan",
+    "subject_line_noop": "Älä kopioi",
+    "stop_gifs": "Toista giffit vain kohdistaessa",
     "streaming": "Näytä uudet viestit automaattisesti ollessasi ruudun huipulla",
     "text": "Teksti",
     "theme": "Teema",
     "theme_help": "Käytä heksadesimaalivärejä muokataksesi väriteemaasi.",
-    "user_settings": "Käyttäjän asetukset"
+    "theme_help_v2_1": "Voit asettaa tiettyjen osien värin tai läpinäkyvyyden täyttämällä valintalaatikon, käytä \"Tyhjennä kaikki\"-nappia tyhjentääksesi kaiken.",
+    "theme_help_v2_2": "Ikonit kenttien alla ovat kontrasti-indikaattoreita, lisätietoa kohdistamalla. Käyttäessä läpinäkyvyyttä ne näyttävät pahimman skenaarion.",
+    "tooltipRadius": "Ohje- tai huomioviestit",
+    "user_settings": "Käyttäjän asetukset",
+    "values": {
+      "false": "pois päältä",
+      "true": "päällä"
+    }
   },
   "timeline": {
     "collapse": "Sulje",
     "conversation": "Keskustelu",
     "error_fetching": "Virhe ladatessa viestejä",
     "load_older": "Lataa vanhempia viestejä",
+    "no_retweet_hint": "Viesti ei ole julkinen, eikä sitä voi toistaa",
     "repeated": "toisti",
     "show_new": "Näytä uudet",
     "up_to_date": "Ajantasalla",
     "no_more_statuses": "Ei enempää viestejä"
   },
   "user_card": {
+    "approve": "Hyväksy",
+    "block": "Estä",
+    "blocked": "Estetty!",
+    "deny": "Älä hyväksy",
     "follow": "Seuraa",
+    "follow_sent": "Pyyntö lähetetty!",
+    "follow_progress": "Pyydetään...",
+    "follow_again": "Lähetä pyyntö uudestaan",
+    "follow_unfollow": "Älä seuraa",
     "followees": "Seuraa",
     "followers": "Seuraajat",
     "following": "Seuraat!",
     "follows_you": "Seuraa sinua!",
+    "its_you": "Sinun tili!",
     "mute": "Hiljennä",
     "muted": "Hiljennetty",
     "per_day": "päivässä",
+    "remote_follow": "Seuraa muualta",
     "statuses": "Viestit"
+  },
+  "user_profile": {
+    "timeline_title": "Käyttäjän aikajana"
+  },
+  "who_to_follow": {
+    "more": "Lisää",
+    "who_to_follow": "Seurausehdotukset"
+  },
+  "tool_tip": {
+    "media_upload": "Lataa tiedosto",
+    "repeat": "Toista",
+    "reply": "Vastaa",
+    "favorite": "Tykkää",
+    "user_settings": "Käyttäjäasetukset"
+  },
+  "upload":{
+    "error": {
+    "base": "Lataus epäonnistui.",
+    "file_too_big": "Tiedosto liian suuri [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
+    "default": "Yritä uudestaan myöhemmin"
+    },
+    "file_size_units": {
+      "B": "tavua",
+      "KiB": "kt",
+      "MiB": "Mt",
+      "GiB": "Gt",
+      "TiB": "Tt"
+    }
   }
 }

src/main.js

@@ -10,6 +10,7 @@ import apiModule from './modules/api.js'
 import configModule from './modules/config.js'
 import chatModule from './modules/chat.js'
 import oauthModule from './modules/oauth.js'
+import mediaViewerModule from './modules/media_viewer.js'
 
 import VueTimeago from 'vue-timeago'
 import VueI18n from 'vue-i18n'
@@ -62,7 +63,8 @@ createPersistedState(persistedStateOptions).then((persistedState) => {
       api: apiModule,
       config: configModule,
       chat: chatModule,
-      oauth: oauthModule
+      oauth: oauthModule,
+      mediaViewer: mediaViewerModule
     },
     plugins: [persistedState, pushNotifications],
     strict: false // Socket modifies itself, let's ignore this for now.

src/modules/media_viewer.js

@@ -0,0 +1,39 @@
+import fileTypeService from '../services/file_type/file_type.service.js'
+
+const mediaViewer = {
+  state: {
+    media: [],
+    currentIndex: 0,
+    activated: false
+  },
+  mutations: {
+    setMedia (state, media) {
+      state.media = media
+    },
+    setCurrent (state, index) {
+      state.activated = true
+      state.currentIndex = index
+    },
+    close (state) {
+      state.activated = false
+    }
+  },
+  actions: {
+    setMedia ({ commit }, attachments) {
+      const media = attachments.filter(attachment => {
+        const type = fileTypeService.fileType(attachment.mimetype)
+        return type === 'image' || type === 'video'
+      })
+      commit('setMedia', media)
+    },
+    setCurrent ({ commit, state }, current) {
+      const index = state.media.indexOf(current)
+      commit('setCurrent', index || 0)
+    },
+    closeMediaViewer ({ commit }) {
+      commit('close')
+    }
+  }
+}
+
+export default mediaViewer

src/services/file_type/file_type.service.js

@@ -1,27 +1,32 @@
-const fileType = (typeString) => {
+// TODO this func might as well take the entire file and use its mimetype
-  let type = 'unknown'
+// or the entire service could be just mimetype service that only operates
-
+// on mimetypes and not files. Currently the naming is confusing.
-  if (typeString.match(/text\/html/)) {
+const fileType = mimetype => {
-    type = 'html'
+  if (mimetype.match(/text\/html/)) {
+    return 'html'
   }
 
-  if (typeString.match(/image/)) {
+  if (mimetype.match(/image/)) {
-    type = 'image'
+    return 'image'
   }
 
-  if (typeString.match(/video/)) {
+  if (mimetype.match(/video/)) {
-    type = 'video'
+    return 'video'
   }
 
-  if (typeString.match(/audio/)) {
+  if (mimetype.match(/audio/)) {
-    type = 'audio'
+    return 'audio'
   }
 
-  return type
+  return 'unknown'
 }
 
+const fileMatchesSomeType = (types, file) =>
+  types.some(type => fileType(file.mimetype) === type)
+
 const fileTypeService = {
-  fileType
+  fileType,
+  fileMatchesSomeType
 }
 
 export default fileTypeService

static/config.json

@@ -19,5 +19,8 @@
   "loginMethod": "password",
   "webPushNotifications": false,
   "noAttachmentLinks": false,
-  "nsfwCensorImage": ""
+  "nsfwCensorImage": "",
+  "useOneClickNsfw": true,
+  "playVideosInline": false,
+  "useContainFit": false
 }

static/font/config.json

@@ -221,6 +221,18 @@
       "css": "plus",
       "code": 59413,
       "src": "fontawesome"
+    },
+    {
+      "uid": "41087bc74d4b20b55059c60a33bf4008",
+      "css": "edit",
+      "code": 59415,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "5717236f6134afe2d2a278a5c9b3927a",
+      "css": "play-circled",
+      "code": 61764,
+      "src": "fontawesome"
     }
   ]
 }

static/font/css/fontello-codes.css

@@ -22,6 +22,7 @@
 .icon-attention:before { content: '\e814'; } /* '' */
 .icon-plus:before { content: '\e815'; } /* '' */
 .icon-adjust:before { content: '\e816'; } /* '' */
+.icon-edit:before { content: '\e817'; } /* '' */
 .icon-spin3:before { content: '\e832'; } /* '' */
 .icon-spin4:before { content: '\e834'; } /* '' */
 .icon-link-ext:before { content: '\f08e'; } /* '' */
@@ -32,6 +33,7 @@
 .icon-plus-squared:before { content: '\f0fe'; } /* '' */
 .icon-reply:before { content: '\f112'; } /* '' */
 .icon-lock-open-alt:before { content: '\f13e'; } /* '' */
+.icon-play-circled:before { content: '\f144'; } /* '' */
 .icon-thumbs-up-alt:before { content: '\f164'; } /* '' */
 .icon-binoculars:before { content: '\f1e5'; } /* '' */
 .icon-user-plus:before { content: '\f234'; } /* '' */

static/font/css/fontello-ie7-codes.css

@@ -22,6 +22,7 @@
 .icon-attention { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-adjust { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-edit { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
@@ -32,6 +33,7 @@
 .icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-lock-open-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-play-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-thumbs-up-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-user-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

static/font/css/fontello-ie7.css

@@ -33,6 +33,7 @@
 .icon-attention { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-adjust { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-edit { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
@@ -43,6 +44,7 @@
 .icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-lock-open-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-play-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-thumbs-up-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-binoculars { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-user-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

static/font/css/fontello.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'fontello';
-  src: url('../font/fontello.eot?97335193');
+  src: url('../font/fontello.eot?94672585');
-  src: url('../font/fontello.eot?97335193#iefix') format('embedded-opentype'),
+  src: url('../font/fontello.eot?94672585#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?97335193') format('woff2'),
+       url('../font/fontello.woff2?94672585') format('woff2'),
-       url('../font/fontello.woff?97335193') format('woff'),
+       url('../font/fontello.woff?94672585') format('woff'),
-       url('../font/fontello.ttf?97335193') format('truetype'),
+       url('../font/fontello.ttf?94672585') format('truetype'),
-       url('../font/fontello.svg?97335193#fontello') format('svg');
+       url('../font/fontello.svg?94672585#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('../font/fontello.svg?97335193#fontello') format('svg');
+    src: url('../font/fontello.svg?94672585#fontello') format('svg');
   }
 }
 */
@@ -78,6 +78,7 @@
 .icon-attention:before { content: '\e814'; } /* '' */
 .icon-plus:before { content: '\e815'; } /* '' */
 .icon-adjust:before { content: '\e816'; } /* '' */
+.icon-edit:before { content: '\e817'; } /* '' */
 .icon-spin3:before { content: '\e832'; } /* '' */
 .icon-spin4:before { content: '\e834'; } /* '' */
 .icon-link-ext:before { content: '\f08e'; } /* '' */
@@ -88,6 +89,7 @@
 .icon-plus-squared:before { content: '\f0fe'; } /* '' */
 .icon-reply:before { content: '\f112'; } /* '' */
 .icon-lock-open-alt:before { content: '\f13e'; } /* '' */
+.icon-play-circled:before { content: '\f144'; } /* '' */
 .icon-thumbs-up-alt:before { content: '\f164'; } /* '' */
 .icon-binoculars:before { content: '\f1e5'; } /* '' */
 .icon-user-plus:before { content: '\f234'; } /* '' */

static/font/demo.html

@@ -229,11 +229,11 @@ body {
 }
 @font-face {
       font-family: 'fontello';
-      src: url('./font/fontello.eot?32716429');
+      src: url('./font/fontello.eot?28736547');
-      src: url('./font/fontello.eot?32716429#iefix') format('embedded-opentype'),
+      src: url('./font/fontello.eot?28736547#iefix') format('embedded-opentype'),
-           url('./font/fontello.woff?32716429') format('woff'),
+           url('./font/fontello.woff?28736547') format('woff'),
-           url('./font/fontello.ttf?32716429') format('truetype'),
+           url('./font/fontello.ttf?28736547') format('truetype'),
-           url('./font/fontello.svg?32716429#fontello') format('svg');
+           url('./font/fontello.svg?28736547#fontello') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -331,23 +331,27 @@ body {
         <div class="the-icons span3" title="Code: 0xe814"><i class="demo-icon icon-attention">&#xe814;</i> <span class="i-name">icon-attention</span><span class="i-code">0xe814</span></div>
         <div class="the-icons span3" title="Code: 0xe815"><i class="demo-icon icon-plus">&#xe815;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe815</span></div>
         <div class="the-icons span3" title="Code: 0xe816"><i class="demo-icon icon-adjust">&#xe816;</i> <span class="i-name">icon-adjust</span><span class="i-code">0xe816</span></div>
-        <div class="the-icons span3" title="Code: 0xe832"><i class="demo-icon icon-spin3 animate-spin">&#xe832;</i> <span class="i-name">icon-spin3</span><span class="i-code">0xe832</span></div>
+        <div class="the-icons span3" title="Code: 0xe817"><i class="demo-icon icon-edit">&#xe817;</i> <span class="i-name">icon-edit</span><span class="i-code">0xe817</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xe832"><i class="demo-icon icon-spin3 animate-spin">&#xe832;</i> <span class="i-name">icon-spin3</span><span class="i-code">0xe832</span></div>
         <div class="the-icons span3" title="Code: 0xe834"><i class="demo-icon icon-spin4 animate-spin">&#xe834;</i> <span class="i-name">icon-spin4</span><span class="i-code">0xe834</span></div>
         <div class="the-icons span3" title="Code: 0xf08e"><i class="demo-icon icon-link-ext">&#xf08e;</i> <span class="i-name">icon-link-ext</span><span class="i-code">0xf08e</span></div>
         <div class="the-icons span3" title="Code: 0xf08f"><i class="demo-icon icon-link-ext-alt">&#xf08f;</i> <span class="i-name">icon-link-ext-alt</span><span class="i-code">0xf08f</span></div>
-        <div class="the-icons span3" title="Code: 0xf0c9"><i class="demo-icon icon-menu">&#xf0c9;</i> <span class="i-name">icon-menu</span><span class="i-code">0xf0c9</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xf0c9"><i class="demo-icon icon-menu">&#xf0c9;</i> <span class="i-name">icon-menu</span><span class="i-code">0xf0c9</span></div>
         <div class="the-icons span3" title="Code: 0xf0e0"><i class="demo-icon icon-mail-alt">&#xf0e0;</i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xf0e0</span></div>
         <div class="the-icons span3" title="Code: 0xf0e5"><i class="demo-icon icon-comment-empty">&#xf0e5;</i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xf0e5</span></div>
         <div class="the-icons span3" title="Code: 0xf0fe"><i class="demo-icon icon-plus-squared">&#xf0fe;</i> <span class="i-name">icon-plus-squared</span><span class="i-code">0xf0fe</span></div>
-        <div class="the-icons span3" title="Code: 0xf112"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xf112"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>
         <div class="the-icons span3" title="Code: 0xf13e"><i class="demo-icon icon-lock-open-alt">&#xf13e;</i> <span class="i-name">icon-lock-open-alt</span><span class="i-code">0xf13e</span></div>
+        <div class="the-icons span3" title="Code: 0xf144"><i class="demo-icon icon-play-circled">&#xf144;</i> <span class="i-name">icon-play-circled</span><span class="i-code">0xf144</span></div>
         <div class="the-icons span3" title="Code: 0xf164"><i class="demo-icon icon-thumbs-up-alt">&#xf164;</i> <span class="i-name">icon-thumbs-up-alt</span><span class="i-code">0xf164</span></div>
+      </div>
+      <div class="row">
         <div class="the-icons span3" title="Code: 0xf1e5"><i class="demo-icon icon-binoculars">&#xf1e5;</i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div>
         <div class="the-icons span3" title="Code: 0xf234"><i class="demo-icon icon-user-plus">&#xf234;</i> <span class="i-name">icon-user-plus</span><span class="i-code">0xf234</span></div>
       </div>

static/font/font/fontello.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2018 by original authors @ fontello.com</metadata>
+<metadata>Copyright (C) 2019 by original authors @ fontello.com</metadata>
 <defs>
 <font id="fontello" horiz-adv-x="1000" >
 <font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="857" descent="-143" />
@@ -52,6 +52,8 @@
 
 <glyph glyph-name="adjust" unicode="&#xe816;" d="M429 53v608q-83 0-153-41t-110-111-41-152 41-152 110-111 153-41z m428 304q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="edit" unicode="&#xe817;" d="M496 196l64 65-85 85-64-65v-31h53v-54h32z m245 402q-9 9-18 0l-196-196q-9-9 0-18t18 0l196 196q9 9 0 18z m45-331v-106q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h464q35 0 65-14 9-4 10-13 2-10-5-16l-27-28q-8-8-18-4-13 3-25 3h-464q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v70q0 7 5 12l36 36q8 8 20 4t11-16z m-54 411l161-160-375-375h-161v160z m248-73l-51-52-161 161 51 52q16 15 38 15t38-15l85-85q16-16 16-38t-16-38z" horiz-adv-x="1000" />
+
 <glyph glyph-name="spin3" unicode="&#xe832;" d="M494 857c-266 0-483-210-494-472-1-19 13-20 13-20l84 0c16 0 19 10 19 18 10 199 176 358 378 358 107 0 205-45 273-118l-58-57c-11-12-11-27 5-31l247-50c21-5 46 11 37 44l-58 227c-2 9-16 22-29 13l-65-60c-89 91-214 148-352 148z m409-508c-16 0-19-10-19-18-10-199-176-358-377-358-108 0-205 45-274 118l59 57c10 12 10 27-5 31l-248 50c-21 5-46-11-37-44l58-227c2-9 16-22 30-13l64 60c89-91 214-148 353-148 265 0 482 210 493 473 1 18-13 19-13 19l-84 0z" horiz-adv-x="1000" />
 
 <glyph glyph-name="spin4" unicode="&#xe834;" d="M498 857c-114 0-228-39-320-116l0 0c173 140 428 130 588-31 134-134 164-332 89-495-10-29-5-50 12-68 21-20 61-23 84 0 3 3 12 15 15 24 71 180 33 393-112 539-99 98-228 147-356 147z m-409-274c-14 0-29-5-39-16-3-3-13-15-15-24-71-180-34-393 112-539 185-185 479-195 676-31l0 0c-173-140-428-130-589 31-134 134-163 333-89 495 11 29 6 50-12 68-11 11-27 17-44 16z" horiz-adv-x="1001" />
@@ -72,6 +74,8 @@
 
 <glyph glyph-name="lock-open-alt" unicode="&#xf13e;" d="M589 428q23 0 38-15t16-38v-322q0-22-16-37t-38-16h-535q-23 0-38 16t-16 37v322q0 22 16 38t38 15h17v179q0 103 74 177t176 73 177-73 73-177q0-14-10-25t-25-11h-36q-14 0-25 11t-11 25q0 59-42 101t-101 42-101-42-41-101v-179h410z" horiz-adv-x="642.9" />
 
+<glyph glyph-name="play-circled" unicode="&#xf144;" d="M429 786q116 0 215-58t156-156 57-215-57-215-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58z m214-460q18 10 18 31t-18 31l-304 178q-17 11-35 1-18-11-18-31v-358q0-20 18-31 9-4 17-4 10 0 18 5z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="thumbs-up-alt" unicode="&#xf164;" d="M143 107q0 15-11 25t-25 11q-15 0-25-11t-11-25q0-15 11-25t25-11q15 0 25 11t11 25z m89 286v-357q0-15-10-25t-26-11h-160q-15 0-25 11t-11 25v357q0 14 11 25t25 10h160q15 0 26-10t10-25z m661 0q0-48-31-83 9-25 9-43 1-42-24-76 9-31 0-66-9-31-31-52 5-62-27-101-36-43-110-44h-72q-37 0-80 9t-68 16-67 22q-69 24-88 25-15 0-25 11t-11 25v357q0 14 10 25t24 11q13 1 42 33t57 67q38 49 56 67 10 10 17 27t10 27 8 34q4 22 7 34t11 29 19 28q10 11 25 11 25 0 46-6t33-15 22-22 14-25 7-28 2-25 1-22q0-21-6-43t-10-33-16-31q-1-4-5-10t-6-13-5-13h155q43 0 75-32t32-75z" horiz-adv-x="928.6" />
 
 <glyph glyph-name="binoculars" unicode="&#xf1e5;" d="M393 678v-428q0-15-11-25t-25-11v-321q0-15-10-25t-26-11h-285q-15 0-25 11t-11 25v285l139 488q4 12 17 12h237z m178 0v-392h-142v392h142z m429-500v-285q0-15-11-25t-25-11h-285q-15 0-25 11t-11 25v321q-15 0-25 11t-11 25v428h237q13 0 17-12z m-589 661v-125h-197v125q0 8 5 13t13 5h161q8 0 13-5t5-13z m375 0v-125h-197v125q0 8 5 13t13 5h161q8 0 13-5t5-13z" horiz-adv-x="1000" />

test/unit/specs/services/file_type/file_type.spec.js

@@ -0,0 +1,19 @@
+import fileType from 'src/services/file_type/file_type.service.js'
+
+describe('fileType service', () => {
+  describe('fileMatchesSomeType', () => {
+    it('should be true when file type is one of the listed', () => {
+      const file = { mimetype: 'audio/mpeg' }
+      const types = ['video', 'audio']
+
+      expect(fileType.fileMatchesSomeType(types, file)).to.eql(true)
+    })
+
+    it('should be false when files type is not included in type list', () => {
+      const file = { mimetype: 'audio/mpeg' }
+      const types = ['image', 'video']
+
+      expect(fileType.fileMatchesSomeType(types, file)).to.eql(false)
+    })
+  })
+})