2 files changed, 48 insertions, 7 deletions

diff --git a/src/components/status/status.js b/src/components/status/status.js
index b14a74ec..2d485616 100644
--- a/src/components/status/status.js
+++ b/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',
@@ -35,7 +37,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: {
@@ -205,12 +208,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: {
@@ -220,7 +242,8 @@ const Status = {
     DeleteButton,
     PostStatusForm,
     UserCardContent,
-    StillImage
+    StillImage,
+    Gallery
   },
   methods: {
     visibilityIcon (visibility) {
@@ -295,6 +318,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: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 5c956467..c1800d64 100644
--- a/src/components/status/status.vue
+++ b/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'>
-            <attachment :size="attachmentSize" :status-id="status.id" :nsfw="nsfwClickthrough" :attachment="attachment" v-for="attachment in status.attachments" :key="attachment.id">
-            </attachment>
+          <div v-if="status.attachments && !hideSubjectStatus" class="attachments media-body">
+            <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="!noHeading && !noReplyLinks" class='status-actions media-body'>
@@ -561,7 +575,7 @@ a.unmute {
   }
 }
 
-@media all and (max-width: 960px) {
+@media all and (max-width: 800px) {
   .status-el {
     .retweet-info {
       .avatar {