Move media_viewer module to store

src/components/attachment/attachment.js

@@ -18,6 +18,7 @@ import {
   faPencilAlt,
   faAlignRight
 } from '@fortawesome/free-solid-svg-icons'
+import { useMediaViewerStore } from '../../stores/media_viewer'
 
 library.add(
   faFile,
@@ -147,14 +148,14 @@ const Attachment = {
     openModal (event) {
       if (this.useModal) {
         this.$emit('setMedia')
-        this.$store.dispatch('setCurrentMedia', this.attachment)
+        useMediaViewerStore().setCurrentMedia(this.attachment)
       } else if (this.type === 'unknown') {
         window.open(this.attachment.url)
       }
     },
     openModalForce (event) {
       this.$emit('setMedia')
-      this.$store.dispatch('setCurrentMedia', this.attachment)
+      useMediaViewerStore().setCurrentMedia(this.attachment)
     },
     onEdit (event) {
       this.edit && this.edit(this.attachment, event)

src/components/gallery/gallery.js

@@ -1,3 +1,4 @@
+import { useMediaViewerStore } from '../../stores/media_viewer'
 import Attachment from '../attachment/attachment.vue'
 import { sumBy, set } from 'lodash'
 
@@ -107,11 +108,11 @@ const Gallery = {
       this.hidingLong = event
     },
     openGallery () {
-      this.$store.dispatch('setMedia', this.attachments)
-      this.$store.dispatch('setCurrentMedia', this.attachments[0])
+      useMediaViewerStore().setMedia(this.attachments)
+      useMediaViewerStore().setCurrentMedia(this.attachments[0])
     },
     onMedia () {
-      this.$store.dispatch('setMedia', this.attachments)
+      useMediaViewerStore().setMedia(this.attachments)
     }
   }
 }

src/components/media_modal/media_modal.js

@@ -13,6 +13,7 @@ import {
   faCircleNotch,
   faTimes
 } from '@fortawesome/free-solid-svg-icons'
+import { useMediaViewerStore } from '../../stores/media_viewer'
 
 library.add(
   faChevronLeft,
@@ -44,16 +45,16 @@ const MediaModal = {
   },
   computed: {
     showing () {
-      return this.$store.state.mediaViewer.activated
+      return useMediaViewerStore().activated
     },
     media () {
-      return this.$store.state.mediaViewer.media
+      return useMediaViewerStore().media
     },
     description () {
       return this.currentMedia.description
     },
     currentIndex () {
-      return this.$store.state.mediaViewer.currentIndex
+      return useMediaViewerStore().currentIndex
     },
     currentMedia () {
       return this.media[this.currentIndex]
@@ -79,7 +80,7 @@ const MediaModal = {
       // to be processed on the content below the overlay
       const transitionTime = 100 // ms
       setTimeout(() => {
-        this.$store.dispatch('closeMediaViewer')
+        useMediaViewerStore().closeMediaViewer()
       }, transitionTime)
     },
     hideIfNotSwiped (event) {
@@ -98,7 +99,7 @@ const MediaModal = {
         if (this.getType(newMedia) === 'image') {
           this.loading = true
         }
-        this.$store.dispatch('setCurrentMedia', newMedia)
+        useMediaViewerStore().setCurrentMedia(newMedia)
       }
     },
     goNext () {
@@ -108,7 +109,7 @@ const MediaModal = {
         if (this.getType(newMedia) === 'image') {
           this.loading = true
         }
-        this.$store.dispatch('setCurrentMedia', newMedia)
+        useMediaViewerStore().setCurrentMedia(newMedia)
       }
     },
     onImageLoaded () {

src/components/status_content/status_content.js

@@ -13,6 +13,7 @@ import {
   faLink,
   faPollH
 } from '@fortawesome/free-solid-svg-icons'
+import { useMediaViewerStore } from '../../stores/media_viewer'
 
 library.add(
   faCircleNotch,
@@ -123,7 +124,7 @@ const StatusContent = {
     },
     setMedia () {
       const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
-      return () => this.$store.dispatch('setMedia', attachments)
+      return () => useMediaViewerStore().setMedia(attachments)
     }
   }
 }

src/components/user_card/user_card.js

@@ -23,6 +23,7 @@ import {
   faTimes,
   faExpandAlt
 } from '@fortawesome/free-solid-svg-icons'
+import { useMediaViewerStore } from '../../stores/media_viewer'
 
 library.add(
   faRss,
@@ -222,8 +223,8 @@ export default {
         url: this.user.profile_image_url_original,
         mimetype: 'image'
       }
-      this.$store.dispatch('setMedia', [attachment])
-      this.$store.dispatch('setCurrentMedia', attachment)
+      useMediaViewerStore().setMedia([attachment])
+      useMediaViewerStore().setCurrentMedia(attachment)
     },
     mentionUser () {
       usePostStatusStore().openPostStatusModal({ replyTo: true, repliedUser: this.user })