diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index d5bce12a7..f7d6ebf10 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -52,6 +52,7 @@ const Attachment = { 'shiftDn', 'edit', ], + emits: ['play', 'pause', 'naturalSizeLoad'], data() { return { localDescription: this.description || this.attachment.description, diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 54bcbd373..696167831 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -55,16 +55,6 @@ const sortAndFilterConversation = (conversation, statusoid) => { } const conversation = { - data() { - return { - highlight: null, - expanded: false, - threadDisplayStatusObject: {}, // id => 'showing' | 'hidden' - statusContentPropertiesObject: {}, - inlineDivePosition: null, - loadStatusError: null, - } - }, props: [ 'statusId', 'collapsable', @@ -74,6 +64,16 @@ const conversation = { 'profileUserId', 'virtualHidden', ], + data() { + return { + highlight: null, + expanded: false, + threadDisplayStatusObject: {}, // id => 'showing' | 'hidden' + inlineDivePosition: null, + loadStatusError: null, + unsuspendibleIds: new Set(), + } + }, created() { if (this.isPage) { this.fetchConversation() @@ -118,16 +118,7 @@ const conversation = { return this.otherRepliesButtonPosition === 'inside' }, suspendable() { - if (this.isTreeView) { - return Object.entries(this.statusContentProperties).every( - ([, prop]) => !prop.replying && prop.mediaPlaying.length === 0, - ) - } - if (this.$refs.statusComponent && this.$refs.statusComponent[0]) { - return this.$refs.statusComponent.every((s) => s.suspendable) - } else { - return true - } + return this.unsuspendibleIds.size > 0 }, hideStatus() { return this.virtualHidden && this.suspendable @@ -364,31 +355,6 @@ const conversation = { return a }, {}) }, - statusContentProperties() { - return this.conversation.reduce((a, k) => { - const id = k.id - const props = (() => { - const def = { - showingTall: false, - expandingSubject: false, - showingLongSubject: false, - isReplying: false, - mediaPlaying: [], - } - - if (this.statusContentPropertiesObject[id]) { - return { - ...def, - ...this.statusContentPropertiesObject[id], - } - } - return def - })() - - a[id] = props - return a - }, {}) - }, canDive() { return this.isTreeView && this.isExpanded }, @@ -514,22 +480,6 @@ const conversation = { showThreadRecursively(id) { this.setThreadDisplayRecursively(id, 'showing') }, - setStatusContentProperty(id, name, value) { - this.statusContentPropertiesObject = { - ...this.statusContentPropertiesObject, - [id]: { - ...this.statusContentPropertiesObject[id], - [name]: value, - }, - } - }, - toggleStatusContentProperty(id, name) { - this.setStatusContentProperty( - id, - name, - !this.statusContentProperties[id][name], - ) - }, leastVisibleAncestor(id) { let cur = id let parent = this.parentOf(cur) @@ -629,6 +579,13 @@ const conversation = { this.undive() this.threadDisplayStatusObject = {} }, + onStatusSuspendStateChange({ id, suspend }) { + if (!suspend) { + this.unsuspendibleIds.add(id) + } else { + this.unsuspendibleIds.delete(id) + } + }, }, } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 8d4734083..8a46722ad 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -97,7 +97,7 @@ :expandable="!isExpanded" :focused="isFocused(status.id)" - :highlight="getHighlight()" + :highlight="maybeHighlight" :inline-expanded="collapsable && isExpanded" :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]" :in-profile="inProfile" @@ -105,21 +105,11 @@ :profile-user-id="profileUserId" :simple-tree="treeViewIsSimple" :show-other-replies-as-button="showOtherRepliesButtonInsideStatus" - :dive="() => diveIntoStatus(status.id)" - - :controlled-showing-tall="statusContentProperties[status.id].showingTall" - :controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')" - :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject" - :controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')" - :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject" - :controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')" - :controlled-replying="statusContentProperties[status.id].replying" - :controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')" - :controlled-media-playing="statusContentProperties[status.id].mediaPlaying" - :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)" + can-dive @goto="setHighlight" - @toggle-expanded="toggleExpanded" + @dive="() => diveIntoStatus(status.id)" + @suspendable-state-change="onStatusSuspendStateChange" />
-
-
diff --git a/src/components/error_modal/error_modal.js b/src/components/error_modal/error_modal.js index aaa9f99ec..560de3a53 100644 --- a/src/components/error_modal/error_modal.js +++ b/src/components/error_modal/error_modal.js @@ -30,7 +30,7 @@ const ErrorModal = { type: Error, }, }, - emits: ['clear', 'recover'] + emits: ['clear', 'recover'], } export default ErrorModal diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index 252a32bf6..c244a8cb3 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -27,8 +27,10 @@ const Gallery = { return { sizes: {}, hidingLong: true, + playingMedia: new Set(), } }, + emits: ['play', 'pause'], components: { Attachment }, computed: { rows() { @@ -115,11 +117,21 @@ const Gallery = { return this.attachmentsDimensionalScore > 1 } }, + hasPlayingMedia() { + return this.playingMedia.size > 0 + }, }, methods: { onNaturalSizeLoad({ id, width, height }) { set(this.sizes, id, { width, height }) }, + onMediaStateChange(playing, id) { + if (playing) { + this.playingMedia.add(id) + } else { + this.playingMedia.delete(id) + } + }, rowStyle(row) { if (row.audio) { return { 'padding-bottom': '25%' } // fixed reduced height for audio @@ -146,6 +158,15 @@ const Gallery = { useMediaViewerStore().setMedia(this.attachments) }, }, + watch: { + hasPlayingMedia(newValue) { + if (newValue) { + this.$emit('play') + } else { + this.$emit('pause') + } + }, + }, } export default Gallery diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index 11637f3c2..a32d4feb7 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -34,6 +34,8 @@ :style="itemStyle(attachment.id, row.items)" @set-media="onMedia" @natural-size-load="onNaturalSizeLoad" + @play="() => onMediaStateChange(true, attachment.id)" + @pause="() => onMediaStateChange(false, attachment.id)" /> diff --git a/src/components/global_error/global_error.js b/src/components/global_error/global_error.js index 0f826f4c4..cd4593521 100644 --- a/src/components/global_error/global_error.js +++ b/src/components/global_error/global_error.js @@ -1,9 +1,9 @@ +import { mapActions, mapState } from 'pinia' + import ErrorModal from 'src/components/error_modal/error_modal.vue' import { useInterfaceStore } from 'src/stores/interface.js' -import { mapState, mapActions } from 'pinia' - const GlobalError = { components: { ErrorModal, @@ -24,7 +24,11 @@ const GlobalError = { details() { if (this.globalError == null) return null if (this.globalError.error != null) { - return this.globalError.error.toString() + '\n\n' + this.globalError.error.stack + return ( + this.globalError.error.toString() + + '\n\n' + + this.globalError.error.stack + ) } else { return this.globalError.details } diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue index 713a40673..25b818deb 100644 --- a/src/components/lists_edit/lists_edit.vue +++ b/src/components/lists_edit/lists_edit.vue @@ -50,7 +50,7 @@
{ - this.$emit('can-close') + this.$emit('close-accepted') }) }, discardAndCloseDraft() { this.abandonDraft().then(() => { - this.$emit('can-close') + this.$emit('close-accepted') }) }, addBeforeUnloadListener() { diff --git a/src/components/search/search.vue b/src/components/search/search.vue index 4302f93f9..16418d389 100644 --- a/src/components/search/search.vue +++ b/src/components/search/search.vue @@ -63,7 +63,6 @@ :compact="false" class="search-result" :statusoid="status" - :no-heading="false" />