Merged scene and movie page banner into single component. Improved movie cover display.
This commit is contained in:
parent
1a389ef843
commit
ea3ef0fc1a
|
|
@ -168,11 +168,11 @@
|
|||
</li>
|
||||
|
||||
<li
|
||||
v-if="user?.primaryStash"
|
||||
v-if="primaryStash"
|
||||
class="menu-item"
|
||||
>
|
||||
<a
|
||||
:href="`/stash/${user.username}/${user.primaryStash.slug}`"
|
||||
:href="`/stash/${user.username}/${primaryStash.slug}`"
|
||||
class="menu-button nolink favorites"
|
||||
>
|
||||
<Icon icon="heart7" />
|
||||
|
|
@ -257,6 +257,7 @@ const pageContext = inject('pageContext');
|
|||
const theme = ref(pageContext.env.theme);
|
||||
|
||||
const user = pageContext.user;
|
||||
const { primaryStash } = pageContext.assets;
|
||||
const unseen = ref(pageContext.meta.unseenNotifications);
|
||||
const query = ref(pageContext.urlParsed.search.q || '');
|
||||
const allowLogin = pageContext.env.allowLogin;
|
||||
|
|
|
|||
|
|
@ -1,59 +1,9 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
<div
|
||||
class="banner-container"
|
||||
:style="{ 'background-image': `url(${getPath(movie.poster || movie.covers[0])})` }"
|
||||
>
|
||||
<div class="banner">
|
||||
<img
|
||||
v-for="cover in movie.covers"
|
||||
:key="`cover-${cover.id}`"
|
||||
:src="getPath(cover, 'thumbnail')"
|
||||
class="cover"
|
||||
>
|
||||
|
||||
<div
|
||||
v-if="movie.trailer"
|
||||
class="trailer"
|
||||
>
|
||||
<Player
|
||||
:video="movie.trailer"
|
||||
:poster="getPath(movie.poster || movie.covers[0])"
|
||||
class="item"
|
||||
:class="{ playing }"
|
||||
@play="playing = true; paused = false;"
|
||||
@pause="playing = false; paused = true;"
|
||||
<Banner
|
||||
:release="movie"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="movie.photos.length > 0 || movie.caps.length > 0"
|
||||
class="album"
|
||||
:class="{ single: (movie.photos.length + movie.caps.length) === 1 }"
|
||||
>
|
||||
<div
|
||||
v-for="photo in movie.photos.concat(movie.caps)"
|
||||
:key="`photo-${photo.id}`"
|
||||
class="photo-container"
|
||||
>
|
||||
<a
|
||||
:href="getPath(photo)"
|
||||
target="_blank"
|
||||
class="photo-link"
|
||||
>
|
||||
<img
|
||||
:src="getPath(photo, 'thumbnail')"
|
||||
:style="{ 'background-image': getPath(photo, 'lazy') }"
|
||||
:width="photo.width"
|
||||
:height="photo.height"
|
||||
class="photo"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="meta">
|
||||
<div class="entity">
|
||||
|
|
@ -236,11 +186,10 @@
|
|||
import { inject } from 'vue';
|
||||
|
||||
import { formatDate, formatDuration } from '#/utils/format.js';
|
||||
import getPath from '#/src/get-path.js';
|
||||
|
||||
import Banner from '#/components/media/banner.vue';
|
||||
import ActorTile from '#/components/actors/tile.vue';
|
||||
import SceneTile from '#/components/scenes/tile.vue';
|
||||
import Player from '#/components/video/player.vue';
|
||||
import Heart from '#/components/stashes/heart.vue';
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
|
|
@ -265,102 +214,6 @@ const scenes = pageContext.pageProps.scenes;
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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);
|
||||
}
|
||||
|
||||
.trailer {
|
||||
max-width: 100%;
|
||||
width: calc(21/9 * 16rem);
|
||||
margin-right: .5rem;
|
||||
flex-shrink: 0;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
:deep(.player) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:not(.playing) {
|
||||
&[poster],
|
||||
.vjs-tech[poster],
|
||||
.vjs-poster img {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.album {
|
||||
height: auto;
|
||||
flex-grow: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
gap: .25rem;
|
||||
box-sizing: border-box;
|
||||
padding: .5rem .5rem .5rem 0;
|
||||
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;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -462,10 +315,6 @@ const scenes = pageContext.pageProps.scenes;
|
|||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.cover {
|
||||
height: 21rem;
|
||||
}
|
||||
|
||||
.actors,
|
||||
.tags {
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -535,11 +384,6 @@ const scenes = pageContext.pageProps.scenes;
|
|||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
border-radius: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.network-container {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -570,29 +414,6 @@ const scenes = pageContext.pageProps.scenes;
|
|||
}
|
||||
|
||||
@media(--small-10) {
|
||||
.banner {
|
||||
justify-content: center;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.poster-container {
|
||||
margin: 0;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.trailer {
|
||||
margin: 0;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.poster {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.album {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 1rem .5rem 1.5rem .5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,63 +1,9 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
<div
|
||||
class="banner-container"
|
||||
:style="{ 'background-image': `url(${getPath(scene.poster, 'thumbnail')})` }"
|
||||
>
|
||||
<div class="banner">
|
||||
<div
|
||||
v-if="scene.trailer || scene.teaser"
|
||||
class="trailer"
|
||||
>
|
||||
<Player
|
||||
:video="scene.trailer || scene.teaser"
|
||||
:poster="poster"
|
||||
class="item"
|
||||
:class="{ playing }"
|
||||
@play="playing = true; paused = false;"
|
||||
@pause="playing = false; paused = true;"
|
||||
<Banner
|
||||
:release="scene"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="scene.poster"
|
||||
class="poster-container"
|
||||
>
|
||||
<div class="poster-link">
|
||||
<img
|
||||
:src="getPath(scene.poster, 'thumbnail')"
|
||||
:style="{ 'background-image': `url(${getPath(scene.poster, 'lazy')}` }"
|
||||
:width="scene.poster.width"
|
||||
:height="scene.poster.height"
|
||||
class="poster"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="scene.photos.length > 0 || scene.caps.length > 0"
|
||||
class="album"
|
||||
:class="{ single: (scene.photos.length + scene.caps.length) === 1 }"
|
||||
>
|
||||
<div
|
||||
v-for="photo in [...scene.photos, ...scene.caps]"
|
||||
:key="`photo-${photo.id}`"
|
||||
class="photo-container"
|
||||
>
|
||||
<div class="photo-link">
|
||||
<img
|
||||
:src="getPath(photo, 'thumbnail')"
|
||||
:style="{ 'background-image': getPath(photo, 'lazy') }"
|
||||
:width="photo.width"
|
||||
:height="photo.height"
|
||||
class="photo"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="meta">
|
||||
<div class="entity">
|
||||
|
|
@ -359,18 +305,17 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, inject } from 'vue';
|
||||
import { ref, inject } from 'vue';
|
||||
import Cookies from 'js-cookie';
|
||||
|
||||
import { formatDate, formatDuration } from '#/utils/format.js';
|
||||
import events from '#/src/events.js';
|
||||
import getPath from '#/src/get-path.js';
|
||||
import processSummaryTemplate from '#/utils/process-summary-template.js';
|
||||
|
||||
import Banner from '#/components/media/banner.vue';
|
||||
import ActorTile from '#/components/actors/tile.vue';
|
||||
import MovieTile from '#/components/movies/tile.vue';
|
||||
import SerieTile from '#/components/series/tile.vue';
|
||||
import Player from '#/components/video/player.vue';
|
||||
import Heart from '#/components/stashes/heart.vue';
|
||||
import Campaign from '#/components/campaigns/campaign.vue';
|
||||
import EditSummary from '#/components/scenes/edit-summary.vue';
|
||||
|
|
@ -391,9 +336,6 @@ const {
|
|||
|
||||
const { scene } = pageProps;
|
||||
|
||||
const playing = ref(false);
|
||||
const paused = ref(false);
|
||||
|
||||
const showSummaryDialog = ref(false);
|
||||
|
||||
const qualities = {
|
||||
|
|
@ -407,22 +349,6 @@ const qualities = {
|
|||
360: 'nHD',
|
||||
};
|
||||
|
||||
const poster = computed(() => {
|
||||
if (scene.poster) {
|
||||
return getPath(scene.poster, 'thumbnail');
|
||||
}
|
||||
|
||||
if (scene.covers?.length > 0) {
|
||||
return getPath(scene.covers[0], 'thumbnail');
|
||||
}
|
||||
|
||||
if (scene.photos?.length > 0) {
|
||||
return getPath(scene.photos[0], 'thumbnail');
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
|
||||
const summary = ref(null);
|
||||
const selectedTemplate = ref(null);
|
||||
|
||||
|
|
@ -483,107 +409,6 @@ function copySummary() {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.trailer {
|
||||
max-width: 100%;
|
||||
width: calc(21/9 * 16rem);
|
||||
margin-right: .5rem;
|
||||
flex-shrink: 0;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
:deep(.player) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:not(.playing) {
|
||||
&[poster],
|
||||
.vjs-tech[poster],
|
||||
.vjs-poster img {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.album {
|
||||
height: auto;
|
||||
flex-grow: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
gap: .25rem;
|
||||
box-sizing: border-box;
|
||||
padding: .5rem .5rem .5rem 0;
|
||||
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;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
height: 3.25rem;
|
||||
|
|
@ -836,11 +661,6 @@ function copySummary() {
|
|||
margin: 0 .75rem;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
border-radius: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.network-container {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -871,45 +691,6 @@ function copySummary() {
|
|||
}
|
||||
|
||||
@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 {
|
||||
margin: 0;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.poster {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.album {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-shrink: 0;
|
||||
overflow-x: auto;
|
||||
height: 6rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.photo-container {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 1rem .5rem .5rem .5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export function curateMedia(media) {
|
||||
export function curateMedia(media, context = {}) {
|
||||
if (!media) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -13,5 +13,6 @@ export function curateMedia(media) {
|
|||
height: media.height,
|
||||
index: media.index,
|
||||
credit: media.credit,
|
||||
type: context.type || null,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,10 +54,10 @@ function curateMovie(rawMovie, assets) {
|
|||
name: tag.name,
|
||||
})),
|
||||
// poster: curateMedia(assets.poster),
|
||||
covers: assets.covers.map((cover) => curateMedia(cover)),
|
||||
photos: assets.photos.map((photo) => curateMedia(photo)),
|
||||
caps: assets.caps.map((cap) => curateMedia(cap)),
|
||||
trailer: curateMedia(assets.trailer),
|
||||
covers: assets.covers.map((cover) => curateMedia(cover, { type: 'cover' })),
|
||||
photos: assets.photos.map((photo) => curateMedia(photo, { type: 'photo' })),
|
||||
caps: assets.caps.map((cap) => curateMedia(cap, { type: 'cap' })),
|
||||
trailer: curateMedia(assets.trailer, { type: 'trailer' }),
|
||||
stashes: assets.stashes?.map((stash) => curateStash(stash)) || [],
|
||||
createdBatchId: rawMovie.created_batch_id,
|
||||
updatedBatchId: rawMovie.updated_batch_id,
|
||||
|
|
|
|||
|
|
@ -104,19 +104,19 @@ function curateScene(rawScene, assets) {
|
|||
id: movie.id,
|
||||
slug: movie.slug,
|
||||
title: movie.title,
|
||||
covers: movie.movie_covers?.map((cover) => curateMedia(cover)).toSorted((coverA, coverB) => coverA.index - coverB.index) || [],
|
||||
covers: movie.movie_covers?.map((cover) => curateMedia(cover, { type: 'cover' })).toSorted((coverA, coverB) => coverA.index - coverB.index) || [],
|
||||
})),
|
||||
series: assets.series.map((serie) => ({
|
||||
id: serie.id,
|
||||
slug: serie.slug,
|
||||
title: serie.title,
|
||||
poster: curateMedia(serie.serie_poster),
|
||||
poster: curateMedia(serie.serie_poster, { type: 'poster' }),
|
||||
})),
|
||||
poster: curateMedia(assets.poster),
|
||||
trailer: curateMedia(assets.trailer),
|
||||
teaser: curateMedia(assets.teaser),
|
||||
photos: assets.photos?.map((photo) => curateMedia(photo)) || [],
|
||||
caps: assets.caps?.map((cap) => curateMedia(cap)) || [],
|
||||
poster: curateMedia(assets.poster, { type: 'poster' }),
|
||||
trailer: curateMedia(assets.trailer, { type: 'trailer' }),
|
||||
teaser: curateMedia(assets.teaser, { type: 'teaser' }),
|
||||
photos: assets.photos?.map((photo) => curateMedia(photo, { type: 'photo' })) || [],
|
||||
caps: assets.caps?.map((cap) => curateMedia(cap, { type: 'cap' })) || [],
|
||||
stashes: assets.stashes?.map((stash) => curateStash(stash)) || [],
|
||||
createdBatchId: rawScene.created_batch_id,
|
||||
updatedBatchId: rawScene.updated_batch_id,
|
||||
|
|
|
|||
Loading…
Reference in New Issue