commit: c25cfe540b8b879c8ffafaa2cd99f49723cfb703
parent 3430604ddae7ef9af666d673d9a4e627b482f226
Author: Sean King <seanking2919@protonmail.com>
Date: Wed, 5 Apr 2023 13:55:38 -0600
Move media_viewer module to store
Diffstat:
8 files changed, 49 insertions(+), 56 deletions(-)
diff --git a/src/components/attachment/attachment.js b/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)
diff --git a/src/components/gallery/gallery.js b/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)
}
}
}
diff --git a/src/components/media_modal/media_modal.js b/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 () {
diff --git a/src/components/status_content/status_content.js b/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)
}
}
}
diff --git a/src/components/user_card/user_card.js b/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 })
diff --git a/src/main.js b/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,
diff --git a/src/modules/media_viewer.js b/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
diff --git a/src/stores/media_viewer.js b/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
+ }
+ }
+})
