deblan-mirror/thelounge
deblan-mirror/thelounge
1
0
Fork 0
mirror of https://github.com/thelounge/thelounge.git synced 2024-06-03 14:22:19 +02:00
Code Issues Projects Releases Wiki Activity

Individual improved styling for each media elements filename

Browse source
This commit is contained in:
Nachtalb 2021-04-11 15:31:50 +02:00 committed by Nachtalb
parent f654ea2585
commit ad6dc63a6a
No known key found for this signature in database
GPG key ID: FB8B6CA09AE73612
2 changed files with 76 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
client/components/LinkPreview.vue
View file

@ -8,7 +8,11 @@
>
<div
ref="content"
:class="['toggle-content', 'toggle-type-' + link.type, {opened: isContentShown}]"
:class="[
'toggle-content',
'toggle-type-' + link.type,
{opened: isContentShown, 'with-filename': link.filename},
]"
>
<template v-if="link.type === 'link'">
<a
@ -64,11 +68,17 @@
<template v-else-if="link.type === 'image'">
<a
:href="link.link"
:title="link.filename"
class="toggle-thumbnail"
target="_blank"
rel="noopener"
@click="onThumbnailClick"
>
<div v-if="link.filename" class="image-filename">
<span class="inner-image-filename">
{{ link.filename }}
</span>
</div>
<img
v-show="link.sourceLoaded"
:src="link.thumb"
@ -79,6 +89,7 @@
</a>
</template>
<template v-else-if="link.type === 'video'">
<span v-if="link.filename" class="video-filename">{{ link.filename }}</span>
<video
v-show="link.sourceLoaded"
preload="metadata"
@ -89,14 +100,28 @@
</video>
</template>
<template v-else-if="link.type === 'audio'">
<audio
v-show="link.sourceLoaded"
controls
preload="metadata"
@canplay="onPreviewReady"
>
<source :src="link.media" :type="link.mediaType" />
</audio>
<div>
<a
v-if="link.filename"
:href="link.link"
:title="link.filename"
target="_blank"
rel="noopener"
class="audio-filename"
>
<span class="inner-audio-filename">
{{ link.filename }}
</span>
</a>
<audio
v-show="link.sourceLoaded"
controls
preload="metadata"
@canplay="onPreviewReady"
>
<source :src="link.media" :type="link.mediaType" />
</audio>
</div>
</template>
<template v-else-if="link.type === 'error'">
<em v-if="link.error === 'image-too-big'">
@ -125,11 +150,6 @@
</button>
</template>
</template>
<span
v-if="link.filename && link.type !== 'error'"
class="preview-filename"
v-text="link.filename"
></span>
</div>
</div>
</template>

42
client/css/style.css
View file

@ -1718,8 +1718,50 @@ textarea.input {
max-width: 100%;
}
#chat .toggle-type-image > a {
position: relative;
font-weight: 700;
color: inherit;
}
#chat .toggle-type-image.with-filename .image-filename {
padding: 8px 10px 10px;
display: flex;
}
#chat .toggle-type-image .inner-image-filename,
#chat .toggle-type-audio .inner-audio-filename {
width: 0;
flex-grow: 1;
}
#chat .toggle-content.toggle-type-audio.with-filename {
padding: 8px 10px 10px;
}
#chat .toggle-content.toggle-type-audio .audio-filename {
font-weight: 700;
padding-bottom: 10px;
color: inherit;
display: flex;
}
#chat .toggle-type-audio .head {
padding-bottom: 10px;
}
#chat .toggle-type-video {
max-width: 640px;
position: relative;
}
#chat .toggle-type-video .video-filename {
position: absolute;
top: 0;
width: 100%;
padding: 1em;
background: linear-gradient(black, transparent);
color: white;
}
#chat video {