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)
+      useMediaViewerStore().setMedia(this.attachments)
-      this.$store.dispatch('setCurrentMedia', this.attachments[0])
+      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])
+      useMediaViewerStore().setMedia([attachment])
-      this.$store.dispatch('setCurrentMedia', attachment)
+      useMediaViewerStore().setCurrentMedia(attachment)
     },
     mentionUser () {
       usePostStatusStore().openPostStatusModal({ replyTo: true, repliedUser: this.user })

src/main.js

@@ -15,7 +15,6 @@ import serverSideConfigModule from './modules/serverSideConfig.js'
 import serverSideStorageModule from './modules/serverSideStorage.js'
 import oauthModule from './modules/oauth.js'
 import authFlowModule from './modules/auth_flow.js'
-import mediaViewerModule from './modules/media_viewer.js'
 import oauthTokensModule from './modules/oauth_tokens.js'
 import reportsModule from './modules/reports.js'
 import pollsModule from './modules/polls.js'
@@ -78,7 +77,6 @@ const persistedStateOptions = {
       serverSideStorage: serverSideStorageModule,
       oauth: oauthModule,
       authFlow: authFlowModule,
-      mediaViewer: mediaViewerModule,
       oauthTokens: oauthTokensModule,
       reports: reportsModule,
       polls: pollsModule,

src/modules/media_viewer.js

@@ -1,40 +0,0 @@
-import fileTypeService from '../services/file_type/file_type.service.js'
-const supportedTypes = new Set(['image', 'video', 'audio', 'flash'])
-
-const mediaViewer = {
-  state: {
-    media: [],
-    currentIndex: 0,
-    activated: false
-  },
-  mutations: {
-    setMedia (state, media) {
-      state.media = media
-    },
-    setCurrentMedia (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 supportedTypes.has(type)
-      })
-      commit('setMedia', media)
-    },
-    setCurrentMedia ({ commit, state }, current) {
-      const index = state.media.indexOf(current)
-      commit('setCurrentMedia', index || 0)
-    },
-    closeMediaViewer ({ commit }) {
-      commit('close')
-    }
-  }
-}
-
-export default mediaViewer

src/stores/media_viewer.js

@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia'
+import fileTypeService from '../services/file_type/file_type.service.js'
+
+const supportedTypes = new Set(['image', 'video', 'audio', 'flash'])
+
+export const useMediaViewerStore = defineStore('mediaViewer', {
+  state: () => ({
+    media: [],
+    currentIndex: 0,
+    activated: false
+  }),
+  actions: {
+    setMedia (attachments) {
+      const media = attachments.filter(attachment => {
+        const type = fileTypeService.fileType(attachment.mimetype)
+        return supportedTypes.has(type)
+      })
+
+      this.media = media
+    },
+    setCurrentMedia (current) {
+      const index = this.media.indexOf(current)
+      this.activated = true
+      this.currentIndex = index
+    },
+    closeMediaViewer () {
+      this.activated = false
+    }
+  }
+})