feat: show alt button even when content hidden

This commit is contained in:
freeplay 2023-07-03 00:02:36 -04:00
parent ac51ce0051
commit b37ba33c12

View File

@ -1,62 +1,64 @@
<template> <template>
<button v-if="hide" class="qjewsnkg" @click="hide = false"> <div class="media" :class="{ mini: plyrMini }">
<ImgWithBlurhash <button v-if="hide" class="hidden" @click="hide = false">
:hash="media.blurhash"
:title="media.comment"
:alt="media.comment"
/>
<div class="text">
<div class="wrapper">
<b style="display: block"
><i class="ph-warning ph-bold ph-lg"></i>
{{ i18n.ts.sensitive }}</b
>
<span style="display: block">{{ i18n.ts.clickToShow }}</span>
</div>
</div>
</button>
<div v-else class="gqnyydlz media" :class="{ mini: plyrMini }">
<a
v-if="media.type.startsWith('image')"
:href="media.url"
>
<ImgWithBlurhash <ImgWithBlurhash
:hash="media.blurhash" :hash="media.blurhash"
:src="url" :title="media.comment"
:alt="media.comment" :alt="media.comment"
:type="media.type"
:cover="false"
/> />
<div v-if="media.type === 'image/gif'" class="gif">GIF</div> <div class="text">
</a> <div class="wrapper">
<VuePlyr <b style="display: block"
v-if="media.type.startsWith('video')" ><i class="ph-warning ph-bold ph-lg"></i>
ref="plyr" {{ i18n.ts.sensitive }}</b
:options="{ >
controls: [ <span style="display: block">{{ i18n.ts.clickToShow }}</span>
'play-large', </div>
'play', </div>
'progress', </button>
'current-time', <template v-else>
'mute', <a
'volume', v-if="media.type.startsWith('image')"
'pip', :href="media.url"
'download',
'fullscreen',
],
disableContextMenu: false,
}"
>
<video
:poster="media.thumbnailUrl"
:aria-label="media.comment"
preload="none"
controls
@contextmenu.stop
> >
<source :src="media.url" :type="media.type" /> <ImgWithBlurhash
</video> :hash="media.blurhash"
</VuePlyr> :src="url"
:alt="media.comment"
:type="media.type"
:cover="false"
/>
<div v-if="media.type === 'image/gif'" class="gif">GIF</div>
</a>
<VuePlyr
v-if="media.type.startsWith('video')"
ref="plyr"
:options="{
controls: [
'play-large',
'play',
'progress',
'current-time',
'mute',
'volume',
'pip',
'download',
'fullscreen',
],
disableContextMenu: false,
}"
>
<video
:poster="media.thumbnailUrl"
:aria-label="media.comment"
preload="none"
controls
@contextmenu.stop
>
<source :src="media.url" :type="media.type" />
</video>
</VuePlyr>
</template>
<div class="buttons"> <div class="buttons">
<button <button
v-if="media.comment" v-if="media.comment"
@ -67,9 +69,10 @@
<i class="ph-subtitles ph-bold ph-lg"></i> <i class="ph-subtitles ph-bold ph-lg"></i>
</button> </button>
<button <button
v-if="!hide"
v-tooltip="i18n.ts.hide" v-tooltip="i18n.ts.hide"
class="_button" class="_button"
@click="hide = true" @click.stop="hide = true"
> >
<i class="ph-eye-slash ph-bold ph-lg"></i> <i class="ph-eye-slash ph-bold ph-lg"></i>
</button> </button>
@ -141,9 +144,11 @@ onMounted(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.qjewsnkg { .hidden {
all: unset; all: unset;
position: relative; position: relative;
width: 100%;
height: 100%;
> .text { > .text {
position: relative; position: relative;