aboutsummaryrefslogtreecommitdiff
path: root/src/components/attachment/attachment.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/attachment/attachment.vue')
-rw-r--r--src/components/attachment/attachment.vue279
1 files changed, 154 insertions, 125 deletions
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:59:31 +0000