aboutsummaryrefslogtreecommitdiff
path: root/src/components/attachment
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/attachment')
-rw-r--r--src/components/attachment/attachment.js30
-rw-r--r--src/components/attachment/attachment.vue279
2 files changed, 177 insertions, 132 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 3ea96a7a..a80c5c2e 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -13,7 +13,9 @@ import {
faPlayCircle,
faTimes,
faStop,
- faSearchPlus
+ faSearchPlus,
+ faTrashAlt,
+ faPencilAlt
} from '@fortawesome/free-solid-svg-icons'
library.add(
@@ -24,19 +26,25 @@ library.add(
faPlayCircle,
faTimes,
faStop,
- faSearchPlus
+ faSearchPlus,
+ faTrashAlt,
+ faPencilAlt
)
const Attachment = {
props: [
'attachment',
+ 'description',
+ 'hideDescription',
'nsfw',
'size',
'setMedia',
- 'naturalSizeLoad'
+ 'remove',
+ 'edit'
],
data () {
return {
+ localDescription: this.description || this.attachment.description,
nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,
hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
preloadImage: this.$store.getters.mergedConfig.preloadImage,
@@ -93,9 +101,6 @@ const Attachment = {
isEmpty () {
return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
},
- isSmall () {
- return this.size === 'small'
- },
useModal () {
const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio']
: this.mergedConfig.playVideosInModal
@@ -105,6 +110,11 @@ const Attachment = {
},
...mapGetters(['mergedConfig'])
},
+ watch: {
+ localDescription (newVal) {
+ this.onEdit(newVal)
+ }
+ },
methods: {
linkClicked ({ target }) {
if (target.tagName === 'A') {
@@ -121,6 +131,12 @@ const Attachment = {
this.$emit('setMedia')
this.$store.dispatch('setCurrentMedia', this.attachment)
},
+ onEdit (event) {
+ console.log('ONEDIT', event)
+ this.edit && this.edit(this.attachment, event)
+ },
+ onRemove () {
+ this.remove && this.remove(this.attachment)
},
stopFlash () {
this.$refs.flash.closePlayer()
@@ -154,7 +170,7 @@ const Attachment = {
onImageLoad (image) {
const width = image.naturalWidth
const height = image.naturalHeight
- this.naturalSizeLoad && this.naturalSizeLoad({ width, height })
+ this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
}
}
}
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index fe9e9398..9b1e83a7 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -12,151 +12,180 @@
:href="attachment.url"
:alt="attachment.description"
:title="attachment.description"
+ @click.prevent=""
>
<FAIcon :icon="placeholderIconClass" />
<b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
</a>
</button>
<div
- v-else
- v-show="!isEmpty"
class="Attachment"
:class="classNames"
+ v-else
>
- <a
- v-if="hidden"
- class="image-container"
- :href="attachment.url"
- :alt="attachment.description"
- :title="attachment.description"
- @click.prevent.stop="toggleHidden"
- >
- <img
- :key="nsfwImage"
- class="nsfw"
- :src="nsfwImage"
- >
- <FAIcon
- v-if="type === 'video'"
- class="play-icon"
- icon="play-circle"
- />
- </a>
<div
- class="attachment-buttons"
- v-if="!hidden"
- >
- <button
- v-if="type === 'flash' && flashLoaded"
- class="button-unstyled attachment-button"
- @click.prevent="stopFlash"
- >
- <FAIcon icon="stop" />
- </button>
- <button
- v-if="!useModal"
- class="button-unstyled attachment-button"
- @click.prevent="openModalForce"
- >
- <FAIcon icon="search-plus" />
- </button>
- <button
- v-if="nsfw && hideNsfwLocal"
- class="button-unstyled attachment-button"
- @click.prevent="toggleHidden"
- >
- <FAIcon icon="times" />
- </button>
- </div>
-
- <a
- v-if="type === 'image' && (!hidden || preloadImage)"
- class="image-container"
- :class="{'-hidden': hidden && preloadImage }"
- :href="attachment.url"
- target="_blank"
- @click.stop.prevent="openModal"
+ class="attachment-wrapper"
+ v-show="!isEmpty"
>
- <StillImage
- class="image"
- :referrerpolicy="referrerpolicy"
- :mimetype="attachment.mimetype"
- :src="attachment.large_thumb_url || attachment.url"
- :image-load-handler="onImageLoad"
+ <a
+ v-if="hidden"
+ class="image-container"
+ :href="attachment.url"
:alt="attachment.description"
- />
- </a>
+ :title="attachment.description"
+ @click.prevent.stop="toggleHidden"
+ >
+ <img
+ :key="nsfwImage"
+ class="nsfw"
+ :src="nsfwImage"
+ >
+ <FAIcon
+ v-if="type === 'video'"
+ class="play-icon"
+ icon="play-circle"
+ />
+ </a>
+ <div
+ class="attachment-buttons"
+ v-if="!hidden"
+ >
+ <button
+ v-if="type === 'flash' && flashLoaded"
+ class="button-unstyled attachment-button"
+ @click.prevent="stopFlash"
+ >
+ <FAIcon icon="stop" />
+ </button>
+ <button
+ v-if="!useModal"
+ class="button-unstyled attachment-button"
+ @click.prevent="openModalForce"
+ >
+ <FAIcon icon="search-plus" />
+ </button>
+ <button
+ v-if="nsfw && hideNsfwLocal"
+ class="button-unstyled attachment-button"
+ @click.prevent="toggleHidden"
+ >
+ <FAIcon icon="times" />
+ </button>
+ <button
+ v-if="remove"
+ class="button-unstyled attachment-button"
+ @click.prevent="onRemove"
+ >
+ <FAIcon icon="trash-alt" />
+ </button>
+ </div>
- <a
- v-if="type === 'video' && !hidden"
- class="video-container"
- :href="attachment.url"
- @click.stop.prevent="openModal"
- >
- <VideoAttachment
- class="video"
- :attachment="attachment"
- :controls="!useModal"
- @play="$emit('play')"
- @pause="$emit('pause')"
- />
- <FAIcon
- v-if="useModal"
- class="play-icon"
- icon="play-circle"
- />
- </a>
+ <a
+ v-if="type === 'image' && (!hidden || preloadImage)"
+ class="image-container"
+ :class="{'-hidden': hidden && preloadImage }"
+ :href="attachment.url"
+ target="_blank"
+ @click.stop.prevent="openModal"
+ >
+ <StillImage
+ class="image"
+ :referrerpolicy="referrerpolicy"
+ :mimetype="attachment.mimetype"
+ :src="attachment.large_thumb_url || attachment.url"
+ :image-load-handler="onImageLoad"
+ :alt="attachment.description"
+ />
+ </a>
- <a
- v-if="type === 'audio' && !hidden"
- class="audio-container"
- :href="attachment.url"
- @click.stop.prevent="openModal"
- >
- <audio
- v-if="type === 'audio'"
- :src="attachment.url"
- :alt="attachment.description"
- :title="attachment.description"
- controls
- @play="$emit('play')"
- @pause="$emit('pause')"
- />
- </a>
+ <a
+ v-if="type === 'video' && !hidden"
+ class="video-container"
+ :href="attachment.url"
+ @click.stop.prevent="openModal"
+ >
+ <VideoAttachment
+ class="video"
+ :attachment="attachment"
+ :controls="!useModal"
+ @play="$emit('play')"
+ @pause="$emit('pause')"
+ />
+ <FAIcon
+ v-if="useModal"
+ class="play-icon"
+ icon="play-circle"
+ />
+ </a>
+
+ <a
+ v-if="type === 'audio' && !hidden"
+ class="audio-container"
+ :href="attachment.url"
+ @click.stop.prevent="openModal"
+ >
+ <audio
+ v-if="type === 'audio'"
+ :src="attachment.url"
+ :alt="attachment.description"
+ :title="attachment.description"
+ controls
+ @play="$emit('play')"
+ @pause="$emit('pause')"
+ />
+ </a>
- <div
- v-if="type === 'html' && attachment.oembed"
- class="oembed-container"
- @click.prevent="linkClicked"
- >
<div
- v-if="attachment.thumb_url"
- class="image"
+ v-if="type === 'html' && attachment.oembed"
+ class="oembed-container"
+ @click.prevent="linkClicked"
>
- <img :src="attachment.thumb_url">
- </div>
- <div class="text">
- <!-- eslint-disable vue/no-v-html -->
- <h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
- <div v-html="attachment.oembed.oembedHTML" />
- <!-- eslint-enable vue/no-v-html -->
+ <div
+ v-if="attachment.thumb_url"
+ class="image"
+ >
+ <img :src="attachment.thumb_url">
+ </div>
+ <div class="text">
+ <!-- eslint-disable vue/no-v-html -->
+ <h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
+ <div v-html="attachment.oembed.oembedHTML" />
+ <!-- eslint-enable vue/no-v-html -->
+ </div>
</div>
- </div>
- <a
- v-if="type === 'flash' && !hidden"
- class="flash-container"
- :href="attachment.url"
- @click.stop.prevent="openModal"
+ <a
+ v-if="type === 'flash' && !hidden"
+ class="flash-container"
+ :href="attachment.url"
+ @click.stop.prevent="openModal"
+ >
+ <Flash
+ class="flash"
+ ref="flash"
+ :src="attachment.large_thumb_url || attachment.url"
+ @playerOpened="setFlashLoaded(true)"
+ @playerClosed="setFlashLoaded(false)"
+ />
+ </a>
+ </div>
+ <div
+ v-if="size !== 'hide' && !hideDescription && (edit || localDescription)"
+ class="description-container"
+ :class="{ '-static': !edit }"
>
- <Flash
- class="flash"
- ref="flash"
- :src="attachment.large_thumb_url || attachment.url"
- @playerOpened="setFlashLoaded(true)"
- @playerClosed="setFlashLoaded(false)"
- />
- </a>
+ <input
+ v-if="edit"
+ v-model="localDescription"
+ type="text"
+ class="description-field"
+ :placeholder="$t('post_status.media_description')"
+ @keydown.enter.prevent=""
+ >
+ <p v-else>
+ {{ localDescription }}
+ </p>
+ </div>
</div>
</template>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 11:16:58 +0000