pleroma-fe/src/components/attachment/attachment.vue

271 lines
7.1 KiB
Vue
Raw Normal View History

2016-10-28 16:08:03 +00:00
<template>
<button
v-if="usePlaceholder"
class="Attachment -placeholder button-unstyled"
:class="classNames"
2019-07-05 07:17:44 +00:00
@click="openModal"
>
<a
2019-01-26 15:45:03 +00:00
v-if="type !== 'html'"
2019-07-05 07:17:44 +00:00
class="placeholder"
target="_blank"
:href="attachment.url"
:alt="attachment.description"
:title="attachment.description"
@click.prevent
2019-01-26 15:45:03 +00:00
>
2020-10-20 21:01:28 +00:00
<FAIcon :icon="placeholderIconClass" />
2021-06-22 17:47:35 +00:00
<b>{{ nsfw ? "NSFW / " : "" }}</b>{{ edit ? '' : placeholderName }}
2019-01-26 15:45:03 +00:00
</a>
<div
v-if="edit || remove"
2021-06-22 17:47:35 +00:00
class="attachment-buttons"
>
<button
v-if="remove"
class="button-unstyled attachment-button"
@click.prevent="onRemove"
>
<FAIcon icon="trash-alt" />
</button>
</div>
<div
v-if="size !== 'hide' && !hideDescription && (edit || localDescription || showDescription)"
class="description-container"
:class="{ '-static': !edit }"
>
<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>
</button>
<div
2021-06-22 17:47:35 +00:00
v-else
class="Attachment"
:class="classNames"
>
<div
2021-06-17 23:04:01 +00:00
v-show="!isEmpty"
2021-06-22 17:47:35 +00:00
class="attachment-wrapper"
>
2021-06-17 23:04:01 +00:00
<a
v-if="hidden"
class="image-container"
:href="attachment.url"
2019-02-18 05:03:26 +00:00
:alt="attachment.description"
2021-06-17 23:04:01 +00:00
: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
v-if="!hidden"
2021-06-22 17:47:35 +00:00
class="attachment-buttons"
>
2021-06-17 23:04:01 +00:00
<button
v-if="type === 'flash' && flashLoaded"
class="button-unstyled attachment-button"
:title="$t('status.attachment_stop_flash')"
2022-03-06 19:22:59 +00:00
@click.prevent="stopFlash"
2021-06-17 23:04:01 +00:00
>
<FAIcon icon="stop" />
</button>
2021-08-15 18:04:28 +00:00
<button
2022-02-10 13:42:28 +00:00
v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
2021-08-15 18:04:28 +00:00
class="button-unstyled attachment-button"
:title="$t('status.show_attachment_description')"
2022-03-06 19:22:59 +00:00
@click.prevent="toggleDescription"
2021-08-15 18:04:28 +00:00
>
<FAIcon icon="align-right" />
</button>
2021-06-17 23:04:01 +00:00
<button
2022-02-10 13:42:28 +00:00
v-if="!useModal && type !== 'unknown'"
2021-06-17 23:04:01 +00:00
class="button-unstyled attachment-button"
:title="$t('status.show_attachment_in_modal')"
2022-03-06 19:22:59 +00:00
@click.prevent="openModalForce"
2021-06-17 23:04:01 +00:00
>
<FAIcon icon="search-plus" />
</button>
<button
v-if="nsfw && hideNsfwLocal"
class="button-unstyled attachment-button"
:title="$t('status.hide_attachment')"
2022-03-06 19:22:59 +00:00
@click.prevent="toggleHidden"
2021-06-17 23:04:01 +00:00
>
<FAIcon icon="times" />
</button>
<button
v-if="shiftUp"
class="button-unstyled attachment-button"
:title="$t('status.move_up')"
2022-03-06 19:22:59 +00:00
@click.prevent="onShiftUp"
>
<FAIcon icon="chevron-left" />
</button>
<button
v-if="shiftDn"
class="button-unstyled attachment-button"
:title="$t('status.move_down')"
2022-03-06 19:22:59 +00:00
@click.prevent="onShiftDn"
>
<FAIcon icon="chevron-right" />
</button>
2021-06-17 23:04:01 +00:00
<button
v-if="remove"
class="button-unstyled attachment-button"
:title="$t('status.remove_attachment')"
2022-03-06 19:22:59 +00:00
@click.prevent="onRemove"
2021-06-17 23:04:01 +00:00
>
<FAIcon icon="trash-alt" />
</button>
</div>
2016-10-28 16:08:03 +00:00
2021-06-17 23:04:01 +00:00
<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>
2016-10-28 16:08:03 +00:00
2022-02-10 13:42:28 +00:00
<a
v-if="type === 'unknown' && !hidden"
class="placeholder-container"
:href="attachment.url"
target="_blank"
>
2022-03-06 19:22:59 +00:00
<FAIcon
size="5x"
:icon="placeholderIconClass"
/>
2022-02-10 13:42:28 +00:00
<p>
{{ localDescription }}
</p>
</a>
<component
:is="videoTag"
2021-06-17 23:04:01 +00:00
v-if="type === 'video' && !hidden"
class="video-container"
:class="{ 'button-unstyled': 'isModal' }"
2021-06-17 23:04:01 +00:00
: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"
/>
</component>
2021-06-17 23:04:01 +00:00
<span
2021-06-17 23:04:01 +00:00
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')"
/>
</span>
2016-11-22 18:45:18 +00:00
2019-07-05 07:17:44 +00:00
<div
2021-06-17 23:04:01 +00:00
v-if="type === 'html' && attachment.oembed"
class="oembed-container"
@click.prevent="linkClicked"
2019-07-05 07:17:44 +00:00
>
2021-06-17 23:04:01 +00:00
<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>
2016-10-28 23:38:41 +00:00
</div>
<span
2021-06-17 23:04:01 +00:00
v-if="type === 'flash' && !hidden"
class="flash-container"
:href="attachment.url"
@click.stop.prevent="openModal"
>
<Flash
ref="flash"
2021-06-22 17:47:35 +00:00
class="flash"
2021-06-17 23:04:01 +00:00
:src="attachment.large_thumb_url || attachment.url"
@playerOpened="setFlashLoaded(true)"
@playerClosed="setFlashLoaded(false)"
/>
</span>
2021-06-17 23:04:01 +00:00
</div>
<div
v-if="size !== 'hide' && !hideDescription && (edit || (localDescription && showDescription))"
2021-06-17 23:04:01 +00:00
class="description-container"
:class="{ '-static': !edit }"
>
<textarea
2021-06-17 23:04:01 +00:00
v-if="edit"
v-model="localDescription"
class="description-field"
:placeholder="$t('post_status.media_description')"
rows="1"
cols="1"
@keydown.ctrl.enter="postStatus()"
@input="resize"
/>
2021-06-17 23:04:01 +00:00
<p v-else>
{{ localDescription }}
</p>
</div>
2016-10-28 16:08:03 +00:00
</div>
</template>
<script src="./attachment.js"></script>
2016-10-28 23:38:41 +00:00
<style src="./attachment.scss" lang="scss"></style>