From c25cfe540b8b879c8ffafaa2cd99f49723cfb703 Mon Sep 17 00:00:00 2001 From: Sean King Date: Wed, 5 Apr 2023 13:55:38 -0600 Subject: [PATCH] Move media_viewer module to store --- src/components/attachment/attachment.js | 5 ++- src/components/gallery/gallery.js | 7 ++-- src/components/media_modal/media_modal.js | 13 +++--- .../status_content/status_content.js | 3 +- src/components/user_card/user_card.js | 5 ++- src/main.js | 2 - src/modules/media_viewer.js | 40 ------------------- src/stores/media_viewer.js | 30 ++++++++++++++ 8 files changed, 49 insertions(+), 56 deletions(-) delete mode 100644 src/modules/media_viewer.js create mode 100644 src/stores/media_viewer.js diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 6e14b24d..deffe22c 100644 --- 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 index e86a3eea..ab1adcf2 100644 --- 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 index 05ef9fbe..1c19afca 100644 --- 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 index 89f0aa51..af62f9e1 100644 --- 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 index ccbe9ce7..c2db9104 100644 --- 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 index 622c9a71..503467c4 100644 --- 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 deleted file mode 100644 index ebcba01d..00000000 --- a/src/modules/media_viewer.js +++ /dev/null @@ -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 new file mode 100644 index 00000000..0e0e1828 --- /dev/null +++ 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 + } + } +})