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

Minor fix for previews

Browse source
This commit is contained in:
Pavel Djundik 2018-07-10 17:44:50 +03:00 committed by Pavel Djundik
parent 2ab3518c52
commit 0654a4373f
2 changed files with 25 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
client/components/LinkPreview.vue
View file

@ -1,6 +1,8 @@
<template> <template>
<div class="preview"> <div
<div :class="['toggle-content', 'toggle-type-' + link.type, {show: link.shown}]"> v-if="link.shown && link.canDisplay"
class="preview">
<div :class="['toggle-content', 'toggle-type-' + link.type]">
<template v-if="link.type === 'link'"> <template v-if="link.type === 'link'">
<a <a
v-if="link.thumb" v-if="link.thumb"
@ -12,7 +14,8 @@
:src="link.thumb" :src="link.thumb"
decoding="async" decoding="async"
alt="" alt=""
class="thumb"> class="thumb"
@load="onPreviewReady">
</a> </a>
<div class="toggle-text"> <div class="toggle-text">
<div class="head"> <div class="head">
@ -53,13 +56,15 @@
<img <img
:src="link.thumb" :src="link.thumb"
decoding="async" decoding="async"
alt=""> alt=""
@load="onPreviewReady">
</a> </a>
</template> </template>
<template v-else-if="link.type === 'video'"> <template v-else-if="link.type === 'video'">
<video <video
preload="metadata" preload="metadata"
controls> controls
@canplay="onPreviewReady">
<source <source
:src="link.media" :src="link.media"
:type="link.mediaType"> :type="link.mediaType">
@ -68,7 +73,8 @@
<template v-else-if="link.type === 'audio'"> <template v-else-if="link.type === 'audio'">
<audio <audio
controls controls
preload="metadata"> preload="metadata"
@canplay="onPreviewReady">
<source <source
:src="link.media" :src="link.media"
:type="link.mediaType"> :type="link.mediaType">
@ -117,5 +123,16 @@ export default {
props: { props: {
link: Object, link: Object,
}, },
mounted() {
if (this.link.shown) {
const options = require("../js/options");
this.$set(this.link, "canDisplay", options.shouldOpenMessagePreview(this.link.type));
}
},
methods: {
onPreviewReady() {
},
},
}; };
</script> </script>

8
client/css/style.css
View file

@ -1382,12 +1382,13 @@ background on hover (unless active) */
#chat .toggle-content { #chat .toggle-content {
background: #f6f6f6; background: #f6f6f6;
border-radius: 5px; border-radius: 5px;
display: none;
max-width: 100%; max-width: 100%;
margin: 0; margin: 0;
margin-top: 6px; margin-top: 6px;
overflow: hidden; overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: inline-flex !important;
align-items: flex-start;
} }
/* This applies to images of preview-type-image and thumbnails of preview-type-link */ /* This applies to images of preview-type-image and thumbnails of preview-type-link */
@ -1478,11 +1479,6 @@ background on hover (unless active) */
content: "\f0da"; /* https://fontawesome.com/icons/caret-right?style=solid */ content: "\f0da"; /* https://fontawesome.com/icons/caret-right?style=solid */
} }
#chat .toggle-content.show {
display: inline-flex !important;
align-items: flex-start;
}
#chat audio { #chat audio {
width: 600px; width: 600px;
max-width: 100%; max-width: 100%;