github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-26 22:29:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

add letterbox to videos

Browse Source
This commit is contained in:
Azri Kahar
2022-07-25 17:46:29 +08:00
parent ea5d3e6015
commit ffc7450687
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/src/views/private/components/file-preview.vue
View File

@@ -1,14 +1,12 @@
<template>
<div
v-if="type && !imgError"
class="file-preview"
:class="{ modal: inModal, small: isSmall, svg: isSVG, centered: type === 'video' }"
>
<div v-if="type && !imgError" class="file-preview" :class="{ modal: inModal, small: isSmall, svg: isSVG }">
<div v-if="type === 'image'" class="image" @click="$emit('click')">
<v-image :src="src" :width="width" :height="height" :alt="title" @error="imgError = true" />
</div>
<video v-else-if="type === 'video'" controls :src="authenticatedSrc" />
<div v-else-if="type === 'video'" class="video">
<video controls :src="authenticatedSrc" />
</div>
<audio v-else-if="type === 'audio'" controls :src="authenticatedSrc" />
@@ -69,11 +67,6 @@ const authenticatedSrc = computed(() => addTokenToURL(props.src));
position: relative;
max-width: calc((var(--form-column-max-width) * 2) + var(--form-horizontal-gap));
&.centered {
display: flex;
justify-content: center;
}
img,
video {
width: auto;
@@ -93,10 +86,13 @@ const authenticatedSrc = computed(() => addTokenToURL(props.src));
border-radius: var(--border-radius);
}
.image {
.image,
.video {
background-color: var(--background-normal);
border-radius: var(--border-radius);
}
.image {
img {
z-index: 1;
display: block;
@@ -104,6 +100,16 @@ const authenticatedSrc = computed(() => addTokenToURL(props.src));
}
}
.video {
display: flex;
justify-content: center;
video {
min-height: 80px;
min-width: 80px;
}
}
.fallback {
background-color: var(--background-normal);
display: flex;