From d695dcaff91ce616549dc54c02b8bf9167f2be58 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 9 Apr 2021 19:09:22 +0300 Subject: experimental flash support through ruffle --- src/components/attachment/attachment.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/components/attachment/attachment.js') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 5f5779a0..8849f501 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -1,4 +1,5 @@ import StillImage from '../still-image/still-image.vue' +import Flash from '../flash/flash.vue' import VideoAttachment from '../video_attachment/video_attachment.vue' import nsfwImage from '../../assets/nsfw.png' import fileTypeService from '../../services/file_type/file_type.service.js' @@ -43,6 +44,7 @@ const Attachment = { } }, components: { + Flash, StillImage, VideoAttachment }, -- cgit v1.2.3-70-g09d2 From e654fead23ebb457f81e8642c65e1f3e98ee0027 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 17 Jun 2021 16:29:46 +0300 Subject: refactored attachments and gallery. All attachments now are in gallery. --- src/components/attachment/attachment.js | 41 ++- src/components/attachment/attachment.vue | 307 ++++++----------------- src/components/chat_message/chat_message.scss | 4 - src/components/flash/flash.js | 5 +- src/components/flash/flash.vue | 7 - src/components/gallery/gallery.js | 65 +++-- src/components/gallery/gallery.vue | 175 +++++++++---- src/components/status_content/status_content.js | 20 +- src/components/status_content/status_content.vue | 31 +-- src/i18n/en.json | 6 +- 10 files changed, 296 insertions(+), 365 deletions(-) (limited to 'src/components/attachment/attachment.js') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 8849f501..06928ca6 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -11,7 +11,9 @@ import { faImage, faVideo, faPlayCircle, - faTimes + faTimes, + faStop, + faSearchPlus } from '@fortawesome/free-solid-svg-icons' library.add( @@ -20,7 +22,9 @@ library.add( faImage, faVideo, faPlayCircle, - faTimes + faTimes, + faStop, + faSearchPlus ) const Attachment = { @@ -28,7 +32,6 @@ const Attachment = { 'attachment', 'nsfw', 'size', - 'allowPlay', 'setMedia', 'naturalSizeLoad' ], @@ -40,7 +43,8 @@ const Attachment = { loading: false, img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'), modalOpen: false, - showHidden: false + showHidden: false, + flashLoaded: false } }, components: { @@ -49,9 +53,22 @@ const Attachment = { VideoAttachment }, computed: { + classNames () { + return [ + { + '-loading': this.loading, + '-nsfw-placeholder': this.hidden + }, + '-' + this.type, + `-${this.useContainFit ? 'contain' : 'cover'}-fit` + ] + }, usePlaceholder () { return this.size === 'hide' || this.type === 'unknown' }, + useContainFit () { + return this.$store.getters.mergedConfig.useContainFit + }, placeholderName () { if (this.attachment.description === '' || !this.attachment.description) { return this.type.toUpperCase() @@ -79,10 +96,6 @@ const Attachment = { isSmall () { return this.size === 'small' }, - fullwidth () { - if (this.size === 'hide') return false - return this.type === 'html' || this.type === 'audio' || this.type === 'unknown' - }, useModal () { const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio'] : this.mergedConfig.playVideosInModal @@ -100,12 +113,20 @@ const Attachment = { }, openModal (event) { if (this.useModal) { - event.stopPropagation() - event.preventDefault() this.setMedia() this.$store.dispatch('setCurrent', this.attachment) } }, + openModalForce (event) { + this.setMedia() + this.$store.dispatch('setCurrent', this.attachment) + }, + stopFlash () { + this.$refs.flash.closePlayer() + }, + setFlashLoaded (event) { + this.flashLoaded = event + }, toggleHidden (event) { if ( (this.mergedConfig.useOneClickNsfw && !this.showHidden) && diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index f80badfd..fe9e9398 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,7 +1,8 @@ - + diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss index fcfa7c8a..1dbe1cad 100644 --- a/src/components/chat_message/chat_message.scss +++ b/src/components/chat_message/chat_message.scss @@ -62,10 +62,6 @@ &.with-media { width: 100%; - .gallery-row { - overflow: hidden; - } - .status { width: 100%; } diff --git a/src/components/flash/flash.js b/src/components/flash/flash.js index d03384c7..87f940a7 100644 --- a/src/components/flash/flash.js +++ b/src/components/flash/flash.js @@ -39,12 +39,13 @@ const Flash = { this.player = 'error' }) this.ruffleInstance = player + this.$emit('playerOpened') }) }, closePlayer () { - console.log(this.ruffleInstance) - this.ruffleInstance.remove() + this.ruffleInstance && this.ruffleInstance.remove() this.player = false + this.$emit('playerClosed') } } } diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue index d20d037b..5a77d235 100644 --- a/src/components/flash/flash.vue +++ b/src/components/flash/flash.vue @@ -36,13 +36,6 @@

- diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index f856fd0a..134ea77e 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -1,15 +1,17 @@ import Attachment from '../attachment/attachment.vue' -import { chunk, last, dropRight, sumBy } from 'lodash' +import { sumBy } from 'lodash' const Gallery = { props: [ 'attachments', 'nsfw', - 'setMedia' + 'setMedia', + 'size' ], data () { return { - sizes: {} + sizes: {}, + hidingLong: true } }, components: { Attachment }, @@ -18,26 +20,54 @@ const Gallery = { if (!this.attachments) { return [] } - const rows = chunk(this.attachments, 3) - if (last(rows).length === 1 && rows.length > 1) { - // if 1 attachment on last row -> add it to the previous row instead - const lastAttachment = last(rows)[0] - const allButLastRow = dropRight(rows) - last(allButLastRow).push(lastAttachment) - return allButLastRow + console.log(this.size) + if (this.size === 'hide') { + return this.attachments.map(item => ({ minimal: true, items: [item] })) } + const rows = this.attachments.reduce((acc, attachment, i) => { + if (attachment.mimetype.includes('audio')) { + return [...acc, { audio: true, items: [attachment] }, { items: [] }] + } + const maxPerRow = 3 + const attachmentsRemaining = this.attachments.length - i - 1 + const currentRow = acc[acc.length - 1].items + if ( + currentRow.length <= maxPerRow || + attachmentsRemaining === 1 + ) { + currentRow.push(attachment) + } + if (currentRow.length === maxPerRow && attachmentsRemaining > 1) { + return [...acc, { items: [] }] + } else { + return acc + } + }, [{ items: [] }]).filter(_ => _.items.length > 0) return rows }, - useContainFit () { - return this.$store.getters.mergedConfig.useContainFit + attachmentsDimensionalScore () { + return this.rows.reduce((acc, row) => { + return acc + (row.audio ? 0.25 : (1 / (row.items.length + 0.6))) + }, 0) + }, + tooManyAttachments () { + if (this.size === 'hide') { + return this.attachments.length > 8 + } else { + return this.attachmentsDimensionalScore > 1 + } } }, methods: { onNaturalSizeLoad (id, size) { this.$set(this.sizes, id, size) }, - rowStyle (itemsPerRow) { - return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` } + rowStyle (row) { + if (row.audio) { + return { 'padding-bottom': '25%' } // fixed reduced height for audio + } else if (!row.minimal) { + return { 'padding-bottom': `${(100 / (row.items.length + 0.6))}%` } + } }, itemStyle (id, row) { const total = sumBy(row, item => this.getAspectRatio(item.id)) @@ -46,6 +76,13 @@ const Gallery = { getAspectRatio (id) { const size = this.sizes[id] return size ? size.width / size.height : 1 + }, + toggleHidingLong (event) { + this.hidingLong = event + }, + openGallery () { + this.setMedia() + this.$store.dispatch('setCurrent', this.attachments[0]) } } } diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index ca91c9c1..8e08e514 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -1,26 +1,74 @@ diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index 134ea77e..cca67dbd 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -4,9 +4,15 @@ import { sumBy } from 'lodash' const Gallery = { props: [ 'attachments', + 'limitRows', + 'descriptions', 'nsfw', 'setMedia', - 'size' + 'size', + 'editable', + 'removeAttachment', + 'editAttachment', + 'maxPerRow' ], data () { return { @@ -20,24 +26,19 @@ const Gallery = { if (!this.attachments) { return [] } - console.log(this.size) if (this.size === 'hide') { return this.attachments.map(item => ({ minimal: true, items: [item] })) } const rows = this.attachments.reduce((acc, attachment, i) => { + if (this.size === 'small' && acc.length === 2) return acc if (attachment.mimetype.includes('audio')) { return [...acc, { audio: true, items: [attachment] }, { items: [] }] } - const maxPerRow = 3 - const attachmentsRemaining = this.attachments.length - i - 1 + const maxPerRow = this.maxPerRow || 3 + const attachmentsRemaining = this.attachments.length - i + 1 const currentRow = acc[acc.length - 1].items - if ( - currentRow.length <= maxPerRow || - attachmentsRemaining === 1 - ) { - currentRow.push(attachment) - } - if (currentRow.length === maxPerRow && attachmentsRemaining > 1) { + currentRow.push(attachment) + if (currentRow.length >= maxPerRow && attachmentsRemaining > maxPerRow) { return [...acc, { items: [] }] } else { return acc @@ -51,7 +52,9 @@ const Gallery = { }, 0) }, tooManyAttachments () { - if (this.size === 'hide') { + if (this.editable || this.size === 'small') { + return false + } else if (this.size === 'hide') { return this.attachments.length > 8 } else { return this.attachmentsDimensionalScore > 1 @@ -59,8 +62,8 @@ const Gallery = { } }, methods: { - onNaturalSizeLoad (id, size) { - this.$set(this.sizes, id, size) + onNaturalSizeLoad ({ id, width, height }) { + this.$set(this.sizes, id, { width, height }) }, rowStyle (row) { if (row.audio) { @@ -81,8 +84,11 @@ const Gallery = { this.hidingLong = event }, openGallery () { - this.setMedia() - this.$store.dispatch('setCurrent', this.attachments[0]) + this.$store.dispatch('setMedia', this.attachments) + this.$store.dispatch('setCurrentMedia', this.attachments[0]) + }, + onMedia () { + this.$store.dispatch('setMedia', this.attachments) } } } diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index 8e08e514..cedf64d3 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -17,13 +17,18 @@ v-for="attachment in row.items" class="gallery-item" :key="attachment.id" - :set-media="setMedia" :nsfw="nsfw" :attachment="attachment" :allow-play="false" :size="size" - :natural-size-load="onNaturalSizeLoad.bind(null, attachment.id)" + :editable="editable" + :remove="removeAttachment" + :edit="editAttachment" + :description="descriptions && descriptions[attachment.id]" + :hideDescription="tooManyAttachments && hidingLong" :style="itemStyle(attachment.id, row.items)" + @setMedia="onMedia" + @naturalSizeLoad="onNaturalSizeLoad" /> diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 5342894f..1a12db9c 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -4,6 +4,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue' import EmojiInput from '../emoji_input/emoji_input.vue' import PollForm from '../poll/poll_form.vue' import Attachment from '../attachment/attachment.vue' +import Gallery from 'src/components/gallery/gallery.vue' import StatusContent from '../status_content/status_content.vue' import fileTypeService from '../../services/file_type/file_type.service.js' import { findOffset } from '../../services/offset_finder/offset_finder.service.js' @@ -85,7 +86,8 @@ const PostStatusForm = { Checkbox, Select, Attachment, - StatusContent + StatusContent, + Gallery }, mounted () { this.updateIdempotencyKey() @@ -388,6 +390,10 @@ const PostStatusForm = { this.newStatus.files.splice(index, 1) this.$emit('resize') }, + editAttachment (fileInfo, newText) { + console.log(fileInfo, newText) + this.newStatus.mediaDescriptions[fileInfo.id] = newText + }, uploadFailed (errString, templateArgs) { templateArgs = templateArgs || {} this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs) diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index fbda41d6..c6f84a4b 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -287,32 +287,21 @@ @click="clearError" /> -
-
- - - -
-
+
video { - line-height: 0; - max-height: 200px; - max-width: 100%; -} -- cgit v1.2.3-70-g09d2 From bfe31e20eaddaa9435c98962c53c35f4184ed5fe Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 18 Jun 2021 14:12:50 +0300 Subject: better compact attachments --- src/components/attachment/attachment.js | 17 +++++++++++++---- src/components/gallery/gallery.vue | 5 ++++- src/components/status_body/status_body.scss | 6 +++--- src/components/status_content/status_content.vue | 5 ----- 4 files changed, 20 insertions(+), 13 deletions(-) (limited to 'src/components/attachment/attachment.js') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index a80c5c2e..84656ffa 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -68,6 +68,7 @@ const Attachment = { '-nsfw-placeholder': this.hidden }, '-' + this.type, + '-' + this.size, `-${this.useContainFit ? 'contain' : 'cover'}-fit` ] }, @@ -102,10 +103,18 @@ const Attachment = { return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown' }, useModal () { - const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio'] - : this.mergedConfig.playVideosInModal - ? ['image', 'video'] - : ['image'] + let modalTypes = [] + switch (this.size) { + case 'hide': + case 'small': + modalTypes = ['image', 'video', 'audio', 'flash'] + break + default: + modalTypes = this.mergedConfig.playVideosInModal + ? ['image', 'video', 'flash'] + : ['image'] + break + } return modalTypes.includes(this.type) }, ...mapGetters(['mergedConfig']) diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index a1f1c26c..65175366 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -95,7 +95,10 @@ height: 0; width: 100%; flex-grow: 1; - margin-top: 0.5em; + + &:not(:first-child) { + margin-top: 0.5em; + } } &.-long { diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 5be21171..f261108e 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -123,6 +123,7 @@ } &.-compact { + align-items: top; flex-direction: row; --emoji-size: 16px; @@ -140,9 +141,7 @@ mask-size: auto 3.5em, auto auto; mask-position: 0 0, 0 0; mask-repeat: repeat-x, repeat; - mask-image: - linear-gradient(to top, white 0.5em, transparent 2.5em), - linear-gradient(to top, white, white); + mask-image: linear-gradient(to bottom, white 2em, transparent 3em); /* Autoprefixed seem to ignore this one, and also syntax is different */ -webkit-mask-composite: xor; @@ -154,6 +153,7 @@ flex: 1 1 0; min-width: 5em; height: 100%; + margin-left: 0.5em; } .summary-wrapper { diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index 90ce130d..573eadf5 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -51,10 +51,5 @@ $status-margin: 0.75em; .StatusContent { flex: 1; min-width: 0; - &.-compact { - flex { - display: flex; - } - } } -- cgit v1.2.3-70-g09d2 From 8bab8658e8efd5b8b9f8de9311432c814fa2ef9c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 18 Jun 2021 16:11:16 +0300 Subject: better handling of unknown files, better upload display --- src/components/attachment/attachment.js | 7 ++--- src/components/attachment/attachment.vue | 31 +++++++++++++++++++++- src/components/gallery/gallery.js | 17 +++++++++++- .../post_status_form/post_status_form.vue | 4 +++ 4 files changed, 54 insertions(+), 5 deletions(-) (limited to 'src/components/attachment/attachment.js') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 84656ffa..bd424087 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -65,10 +65,11 @@ const Attachment = { return [ { '-loading': this.loading, - '-nsfw-placeholder': this.hidden + '-nsfw-placeholder': this.hidden, + '-editable': this.edit !== undefined }, - '-' + this.type, - '-' + this.size, + '-type-' + this.type, + this.size && '-size-' + this.size, `-${this.useContainFit ? 'contain' : 'cover'}-fit` ] }, diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 9b1e83a7..b8be82da 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -15,8 +15,37 @@ @click.prevent="" > - {{ nsfw ? "NSFW / " : "" }}{{ placeholderName }} + {{ nsfw ? "NSFW / " : "" }}{{ this.edit ? '' : placeholderName }} +
+ +
+
+ +

+ {{ localDescription }} +

+
{ - return acc + (row.audio ? 0.25 : (1 / (row.items.length + 0.6))) + let size = 0 + if (row.minimal) { + size += 1 / 8 + } else if (row.audio) { + size += 1 / 4 + } else { + size += 1 / (row.items.length + 0.6) + } + return acc + size }, 0) }, tooManyAttachments () { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 88ca4c9c..5078ad5f 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -338,6 +338,10 @@ .post-status-form { position: relative; + .attachments { + margin-bottom: 0.5em; + } + .form-bottom { display: flex; justify-content: space-between; -- cgit v1.2.3-70-g09d2 From 299c00cf74fbef8b8b597330b8c0e6e28765ab7e Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 15 Aug 2021 18:35:26 +0300 Subject: fix video attachments in notifications not having pointer cursor --- src/components/attachment/attachment.js | 3 +++ src/components/attachment/attachment.vue | 6 ++++-- 2 files changed, 7 insertions(+), 2 deletions(-) (limited to 'src/components/attachment/attachment.js') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index bd424087..b2ba1655 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -118,6 +118,9 @@ const Attachment = { } return modalTypes.includes(this.type) }, + videoTag () { + return this.useModal ? 'button' : 'span' + }, ...mapGetters(['mergedConfig']) }, watch: { diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 98d9c3ec..8a1c31c7 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -127,9 +127,11 @@ /> - @@ -145,7 +147,7 @@ class="play-icon" icon="play-circle" /> - + Date: Sun, 15 Aug 2021 21:04:28 +0300 Subject: inline description display --- src/components/attachment/attachment.js | 12 +++++++++--- src/components/attachment/attachment.scss | 13 ++----------- src/components/attachment/attachment.vue | 8 ++++++++ 3 files changed, 19 insertions(+), 14 deletions(-) (limited to 'src/components/attachment/attachment.js') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index b2ba1655..fea7c6f8 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -15,7 +15,8 @@ import { faStop, faSearchPlus, faTrashAlt, - faPencilAlt + faPencilAlt, + faAlignRight } from '@fortawesome/free-solid-svg-icons' library.add( @@ -28,7 +29,8 @@ library.add( faStop, faSearchPlus, faTrashAlt, - faPencilAlt + faPencilAlt, + faAlignRight ) const Attachment = { @@ -52,7 +54,8 @@ const Attachment = { img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'), modalOpen: false, showHidden: false, - flashLoaded: false + flashLoaded: false, + showDescription: false } }, components: { @@ -157,6 +160,9 @@ const Attachment = { setFlashLoaded (event) { this.flashLoaded = event }, + toggleDescription () { + this.showDescription = !this.showDescription + }, toggleHidden (event) { if ( (this.mergedConfig.useOneClickNsfw && !this.showHidden) && diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index 33e058e7..065c38d2 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -42,19 +42,10 @@ position: absolute; left: 0; right: 0; - top: 0; + bottom: 0; + padding-top: 0; background: var(--popover); box-shadow: var(--popupShadow); - opacity: 0; - transition: 0.35s all; - transition-timing-function: cubic-bezier(0, 1, 0.5, 1); - } - } - - &:hover { - .description-container.-static { - opacity: 1; - transform: translateY(-3em); } } diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 8a1c31c7..82a72a8d 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -86,6 +86,14 @@ > +
@@ -83,6 +83,7 @@ v-if="type === 'flash' && flashLoaded" class="button-unstyled attachment-button" @click.prevent="stopFlash" + :title="$t('status.attachment_stop_flash')" > @@ -98,6 +99,7 @@ v-if="!useModal" class="button-unstyled attachment-button" @click.prevent="openModalForce" + :title="$t('status.show_attachment_in_modal')" > @@ -105,13 +107,31 @@ v-if="nsfw && hideNsfwLocal" class="button-unstyled attachment-button" @click.prevent="toggleHidden" + :title="$t('status.hide_attachment')" > + + @@ -209,7 +229,7 @@
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js index 15436d61..094b3e57 100644 --- a/src/components/gallery/gallery.js +++ b/src/components/gallery/gallery.js @@ -12,6 +12,8 @@ const Gallery = { 'size', 'editable', 'removeAttachment', + 'shiftUpAttachment', + 'shiftDnAttachment', 'editAttachment', 'grid' ], diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index 18b94d58..f9cad8a9 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -6,8 +6,8 @@ >
- diff --git a/src/i18n/en.json b/src/i18n/en.json index a4f24c64..0ccd0da7 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -721,6 +721,13 @@ "many_attachments": "Post has {number} attachment(s)", "collapse_attachments": "Collapse attachments", "show_all_attachments": "Show all attachments", + "show_attachment_in_modal": "Show in media modal", + "show_attachment_description": "Preview description (open attachment for full description)", + "hide_attachment": "Hide attachment", + "remove_attachment": "Remove attachment", + "attachment_stop_flash": "Stop Flash player", + "move_up": "Shift attachment left", + "move_down": "Shift attachment right", "open_gallery": "Open gallery" }, "user_card": { -- cgit v1.2.3-70-g09d2 From befd4d5fc787d3f8287456dbf5d1a6c70419591f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 10 Feb 2022 15:42:28 +0200 Subject: improve unknown attachment handling --- src/components/attachment/attachment.js | 7 ++++--- src/components/attachment/attachment.scss | 10 ++++++++++ src/components/attachment/attachment.vue | 17 ++++++++++++++--- 3 files changed, 28 insertions(+), 6 deletions(-) (limited to 'src/components/attachment/attachment.js') diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index f9c8d981..d62a4adc 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -79,7 +79,7 @@ const Attachment = { ] }, usePlaceholder () { - return this.size === 'hide' || this.type === 'unknown' + return this.size === 'hide' }, useContainFit () { return this.$store.getters.mergedConfig.useContainFit @@ -106,7 +106,7 @@ const Attachment = { return this.nsfw && this.hideNsfwLocal && !this.showHidden }, isEmpty () { - return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown' + return (this.type === 'html' && !this.attachment.oembed) }, useModal () { let modalTypes = [] @@ -143,6 +143,8 @@ const Attachment = { if (this.useModal) { this.$emit('setMedia') this.$store.dispatch('setCurrentMedia', this.attachment) + } else if (this.type === 'unknown') { + window.open(this.attachment.url) } }, openModalForce (event) { @@ -150,7 +152,6 @@ const Attachment = { this.$store.dispatch('setCurrentMedia', this.attachment) }, onEdit (event) { - console.log('ONEDIT', event) this.edit && this.edit(this.attachment, event) }, onRemove () { diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index 065c38d2..dfda15bf 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -54,6 +54,7 @@ min-width: 0; } + & .placeholder-container, & .image-container, & .audio-container, & .video-container, @@ -93,6 +94,15 @@ } } + .placeholder-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding-top: 0.5em; + } + + .play-icon { position: absolute; font-size: 64px; diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 4abf63dd..59173759 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -12,7 +12,6 @@ :href="attachment.url" :alt="attachment.description" :title="attachment.description" - @click.prevent="" > {{ nsfw ? "NSFW / " : "" }}{{ edit ? '' : placeholderName }} @@ -88,7 +87,7 @@