Added media components directory to repo.

This commit is contained in:
DebaucheryLibrarian 2024-08-29 01:54:39 +02:00
parent 6a0d5b8030
commit 9e9fd087ba
2 changed files with 294 additions and 0 deletions

1
.gitignore vendored
View File

@ -4,3 +4,4 @@ config/*
!config/default.*js
log/
media/
!components/media

293
components/media/banner.vue Normal file
View File

@ -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>