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.vue | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/components/attachment/attachment.vue') diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 2c1c1682..2102127d 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -117,6 +117,8 @@ + + -- cgit v1.2.3-70-g09d2 From adafae977a5cc2b5ce1e3ab044bc17c4d4f11a4e Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 12 Apr 2021 00:00:23 +0300 Subject: Play-on-click, layout improvements. --- src/components/attachment/attachment.vue | 1 + src/components/flash/flash.js | 36 +++++++++++++++++--- src/components/flash/flash.vue | 57 +++++++++++++++++++++++++++++--- src/i18n/en.json | 3 +- 4 files changed, 87 insertions(+), 10 deletions(-) (limited to 'src/components/attachment/attachment.vue') diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 2102127d..9bb0d0be 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -174,6 +174,7 @@ } .non-gallery.attachment { + &.flash, &.video { flex: 1 0 40%; } diff --git a/src/components/flash/flash.js b/src/components/flash/flash.js index e707a4c4..832705a2 100644 --- a/src/components/flash/flash.js +++ b/src/components/flash/flash.js @@ -1,16 +1,44 @@ import RuffleService from '../../services/ruffle_service/ruffle_service.js' +import { library } from '@fortawesome/fontawesome-svg-core' +import { faStop } from '@fortawesome/free-solid-svg-icons' + +library.add( + faStop, +) const Flash = { props: [ 'src' ], - created () { - this.$nextTick(function () { + data () { + return { + player: false, // can be true, "hidden", false. hidden = element exists + loaded: false, + ruffleInstance: null + } + }, + methods: { + openPlayer () { + if (this.player) return // prevent double-loading + this.player = 'hidden' RuffleService.getRuffle().then((ruffle) => { const player = ruffle.newest().createPlayer() + player.config = { + letterbox: 'on' + } const container = this.$refs.cunt container.appendChild(player) - player.load(this.src) + player.style.width = '100%' + player.style.height = '100%' + player.load(this.src).then(() => { + this.player = true + }) + this.ruffleInstance = player }) - }) + }, + closePlayer () { + console.log(this.ruffleInstance) + this.ruffleInstance.remove() + this.player = false + } } } diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue index 510fe6d2..adef67ff 100644 --- a/src/components/flash/flash.vue +++ b/src/components/flash/flash.vue @@ -1,8 +1,31 @@ @@ -10,6 +33,30 @@ diff --git a/src/i18n/en.json b/src/i18n/en.json index d6138482..90cbbf0f 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -79,7 +79,8 @@ "role": { "admin": "Admin", "moderator": "Moderator" - } + }, + "flash_content": "Click to show Flash content using Ruffle (Experimental)" }, "image_cropper": { "crop_picture": "Crop picture", -- cgit v1.2.3-70-g09d2 From f0641d05dffe627abd093c296a8cf9e5296b3098 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 12 Apr 2021 00:07:28 +0300 Subject: linting --- src/components/attachment/attachment.vue | 5 ++++- src/components/flash/flash.js | 2 +- src/components/flash/flash.vue | 16 +++++++++++----- 3 files changed, 16 insertions(+), 7 deletions(-) (limited to 'src/components/attachment/attachment.vue') diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 9bb0d0be..f80badfd 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -118,7 +118,10 @@ - + diff --git a/src/components/flash/flash.js b/src/components/flash/flash.js index 832705a2..17a52747 100644 --- a/src/components/flash/flash.js +++ b/src/components/flash/flash.js @@ -3,7 +3,7 @@ import { library } from '@fortawesome/fontawesome-svg-core' import { faStop } from '@fortawesome/free-solid-svg-icons' library.add( - faStop, + faStop ) const Flash = { diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue index adef67ff..a27d3930 100644 --- a/src/components/flash/flash.vue +++ b/src/components/flash/flash.vue @@ -8,13 +8,19 @@ /> @@ -24,8 +30,8 @@ @click="closePlayer" > - - + + -- 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.vue') 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 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.vue') 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 4ba8d95a10fdf22a7cefc56ea0515b7c30ee53ff Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 22 Jun 2021 20:33:57 +0300 Subject: fix videos and related not having working drag controls --- src/components/attachment/attachment.vue | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'src/components/attachment/attachment.vue') diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index b8be82da..e1e700c4 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -127,7 +127,7 @@ /> - - + - - +
- - +
Date: Tue, 22 Jun 2021 20:47:35 +0300 Subject: lint --- src/components/attachment/attachment.vue | 16 ++++++++-------- src/components/gallery/gallery.vue | 12 ++++++------ src/components/post_status_form/post_status_form.vue | 4 ++-- src/components/status_body/status_body.vue | 6 +++--- src/components/status_content/status_content.js | 1 - src/components/status_content/status_content.vue | 12 ++++++------ 6 files changed, 25 insertions(+), 26 deletions(-) (limited to 'src/components/attachment/attachment.vue') diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index e1e700c4..98d9c3ec 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -15,12 +15,12 @@ @click.prevent="" > - {{ nsfw ? "NSFW / " : "" }}{{ this.edit ? '' : placeholderName }} + {{ nsfw ? "NSFW / " : "" }}{{ edit ? '' : placeholderName }}
+ class="attachment-buttons" + >
+ class="attachment-buttons" + >