Added media components directory to repo.
This commit is contained in:
parent
6a0d5b8030
commit
9e9fd087ba
|
@ -4,3 +4,4 @@ config/*
|
||||||
!config/default.*js
|
!config/default.*js
|
||||||
log/
|
log/
|
||||||
media/
|
media/
|
||||||
|
!components/media
|
||||||
|
|
|
@ -0,0 +1,293 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="banner-container"
|
||||||
|
:style="{ 'background-image': `url(${getPath(release.poster || release.covers?.[0] || release.photos?.[0], 'thumbnail')})` }"
|
||||||
|
>
|
||||||
|
<div class="banner">
|
||||||
|
<div
|
||||||
|
v-if="release.covers?.length > 0 && !release.trailer"
|
||||||
|
class="covers"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
v-for="cover in release.covers"
|
||||||
|
:key="`cover-${cover.id}`"
|
||||||
|
:src="getPath(cover, 'thumbnail')"
|
||||||
|
class="cover"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="release.trailer || release.teaser"
|
||||||
|
class="trailer"
|
||||||
|
>
|
||||||
|
<Player
|
||||||
|
:video="release.trailer || release.teaser"
|
||||||
|
:poster="poster"
|
||||||
|
class="item"
|
||||||
|
:class="{
|
||||||
|
playing,
|
||||||
|
['player-movie']: release.covers?.length > 0 && !release.poster,
|
||||||
|
}"
|
||||||
|
@play="playing = true; paused = false;"
|
||||||
|
@pause="playing = false; paused = true;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-else-if="release.poster"
|
||||||
|
class="poster-container"
|
||||||
|
>
|
||||||
|
<div class="poster-link">
|
||||||
|
<img
|
||||||
|
:src="getPath(release.poster, 'thumbnail')"
|
||||||
|
:style="{ 'background-image': `url(${getPath(release.poster, 'lazy')}` }"
|
||||||
|
:width="release.poster.width"
|
||||||
|
:height="release.poster.height"
|
||||||
|
class="poster"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="release.photos.length > 0 || release.caps.length > 0 || coversInAlbum"
|
||||||
|
class="album"
|
||||||
|
:class="{ single: (release.photos.length + release.caps.length) === 1 }"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="photo in [...(coversInAlbum ? release.covers : []), ...release.photos, ...release.caps]"
|
||||||
|
:key="`photo-${photo.id}`"
|
||||||
|
class="photo-container"
|
||||||
|
>
|
||||||
|
<div class="photo-link">
|
||||||
|
<img
|
||||||
|
:src="getPath(photo, 'thumbnail')"
|
||||||
|
:style="{ 'background-image': `url(${getPath(photo, 'lazy')})` }"
|
||||||
|
:width="photo.width"
|
||||||
|
:height="photo.height"
|
||||||
|
class="photo"
|
||||||
|
:class="{ [`album-${photo.type}`]: !!photo.type }"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
|
||||||
|
import getPath from '#/src/get-path.js';
|
||||||
|
|
||||||
|
import Player from '#/components/video/player.vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
release: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const playing = ref(false);
|
||||||
|
const paused = ref(false);
|
||||||
|
|
||||||
|
const poster = computed(() => {
|
||||||
|
if (props.release.poster) {
|
||||||
|
return getPath(props.release.poster, 'thumbnail');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.release.covers?.length > 0) {
|
||||||
|
return getPath(props.release.covers[0], 'thumbnail');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.release.photos?.length > 0) {
|
||||||
|
return getPath(props.release.photos[0], 'thumbnail');
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
|
||||||
|
const coversInAlbum = props.release.covers?.length > 0 && props.release.trailer;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.banner-container {
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
border-radius: .5rem .5rem 0 0;
|
||||||
|
margin-top: .5rem;
|
||||||
|
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
max-height: 21rem;
|
||||||
|
border-radius: .5rem 0 0 0;
|
||||||
|
display: flex;
|
||||||
|
font-size: 0;
|
||||||
|
backdrop-filter: brightness(150%) blur(1rem);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poster-container {
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poster-link {
|
||||||
|
height: 100%;
|
||||||
|
width: calc(21/9 * 16rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.poster {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: .25rem 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poster,
|
||||||
|
.photo {
|
||||||
|
object-fit: cover;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
box-shadow: 0 0 3px var(--shadow-weak-10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.covers {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cover {
|
||||||
|
height: 21rem;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trailer {
|
||||||
|
max-width: 100%;
|
||||||
|
width: calc(21/9 * 16rem);
|
||||||
|
flex-shrink: 0;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.player) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&:not(.playing):not(.player-movie) {
|
||||||
|
&[poster],
|
||||||
|
.vjs-tech[poster],
|
||||||
|
.vjs-poster img {
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* nesting doesn't seem to work? */
|
||||||
|
:deep(.player.player-movie) {
|
||||||
|
background-color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album {
|
||||||
|
height: auto;
|
||||||
|
flex-grow: 1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||||
|
gap: .25rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: .5rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
scrollbar-width: 0;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.single .photo {
|
||||||
|
max-height: calc(100% - 1.5rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-link {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-cover {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(--compact) {
|
||||||
|
.banner-container {
|
||||||
|
border-radius: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(--small-10) {
|
||||||
|
.banner {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 0;
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poster-container {
|
||||||
|
margin: 0;
|
||||||
|
flex-shrink: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poster-link {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trailer {
|
||||||
|
flex-shrink: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poster {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.covers {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cover {
|
||||||
|
width: 0;
|
||||||
|
height: auto;
|
||||||
|
max-width: min-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
flex-shrink: 0;
|
||||||
|
overflow-x: auto;
|
||||||
|
height: 6rem;
|
||||||
|
padding: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-container {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.album-cover {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue