Added series page and scene page section, no overview (yet).
This commit is contained in:
parent
eb2807d0e0
commit
5cfab6c9ca
|
|
@ -15,8 +15,8 @@
|
|||
>
|
||||
<img
|
||||
v-if="movie.covers[0]"
|
||||
:src="movie.covers[0].isS3 ? `https://cdndev.traxxx.me/${movie.covers[0].thumbnail}` : `/media/${movie.covers[0].thumbnail}`"
|
||||
:style="{ 'background-image': movie.covers[0].isS3 ? `url(https://cdndev.traxxx.me/${movie.covers[0].lazy})` : `url(/media/${movie.covers[0].lazy})` }"
|
||||
:src="getPath(movie.covers[0], 'thumbnail')"
|
||||
:style="{ 'background-image': `url(${getPath(movie.covers[0], 'lazy')})` }"
|
||||
class="thumbnail"
|
||||
loading="lazy"
|
||||
>
|
||||
|
|
@ -119,6 +119,8 @@
|
|||
import { ref, inject } from 'vue';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
import getPath from '#/src/get-path.js';
|
||||
|
||||
import Heart from '#/components/stashes/heart.vue';
|
||||
|
||||
const props = defineProps({
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<div class="serie-tile">
|
||||
<a
|
||||
:href="`/serie/${serie.id}/${serie.slug}`"
|
||||
class="poster-container"
|
||||
>
|
||||
<img
|
||||
v-if="serie.poster"
|
||||
:src="getPath(serie.poster, 'thumbnail')"
|
||||
:style="{ 'background-image': `url(${getPath(serie.poster, 'lazy')})` }"
|
||||
class="poster"
|
||||
loading="lazy"
|
||||
>
|
||||
</a>
|
||||
|
||||
<div class="tile-info">
|
||||
<a
|
||||
:href="`/serie/${serie.id}/${serie.slug}`"
|
||||
class="title nolink"
|
||||
>{{ serie.title }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import getPath from '#/src/get-path.js';
|
||||
|
||||
defineProps({
|
||||
serie: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.serie-tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||||
border-radius: .25rem;
|
||||
overflow: hidden;
|
||||
background: var(--background-base);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 3px var(--shadow-weak-20);
|
||||
|
||||
:deep(.bookmarks) .icon:not(.favorited):not(:hover) {
|
||||
fill: var(--text-light);
|
||||
}
|
||||
}
|
||||
|
||||
&.unstashed {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
.poster-container {
|
||||
aspect-ratio: 16/9;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.poster {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.tile-info {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
padding: .25rem .5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1 +1 @@
|
|||
export default '/movie/@movieId/*';
|
||||
export default '/serie/@serieId/*';
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@
|
|||
</ul>
|
||||
|
||||
<div
|
||||
v-if="scene.movies.length > 0"
|
||||
v-if="scene.movies.length > 0 || scene.series.length > 0"
|
||||
class="section"
|
||||
>
|
||||
<h3 class="heading">Part of</h3>
|
||||
|
|
@ -184,6 +184,15 @@
|
|||
:details="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="series">
|
||||
<SerieTile
|
||||
v-for="serie in scene.series"
|
||||
:key="`serie-${serie.id}`"
|
||||
:serie="serie"
|
||||
:details="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
@ -274,6 +283,7 @@ import getPath from '#/src/get-path.js';
|
|||
|
||||
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';
|
||||
|
||||
|
|
@ -370,7 +380,7 @@ function copySummary() {
|
|||
.content {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 .5rem;
|
||||
margin: 0 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -601,13 +611,21 @@ function copySummary() {
|
|||
}
|
||||
}
|
||||
|
||||
.movies {
|
||||
.movies,
|
||||
.series {
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
gap: .25rem;
|
||||
}
|
||||
|
||||
.movies {
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
}
|
||||
|
||||
.series {
|
||||
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -739,6 +757,10 @@ function copySummary() {
|
|||
.actors {
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
}
|
||||
|
||||
.series {
|
||||
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media(--small-50) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,625 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
<div class="content">
|
||||
<div
|
||||
class="banner-container"
|
||||
:style="{ 'background-image': `url(${getPath(serie.poster)})` }"
|
||||
>
|
||||
<div class="banner">
|
||||
<div
|
||||
v-if="serie.trailer"
|
||||
class="trailer"
|
||||
>
|
||||
<Player
|
||||
:video="serie.trailer"
|
||||
:poster="poster"
|
||||
class="item"
|
||||
:class="{ playing }"
|
||||
@play="playing = true; paused = false;"
|
||||
@pause="playing = false; paused = true;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="serie.poster"
|
||||
class="poster-container"
|
||||
>
|
||||
<div class="poster-link">
|
||||
<img
|
||||
:src="getPath(serie.poster, 'thumbnail')"
|
||||
:style="{ 'background-image': `url(${getPath(serie.poster, 'lazy')}` }"
|
||||
:width="serie.poster.width"
|
||||
:height="serie.poster.height"
|
||||
class="poster"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
v-for="cover in serie.covers"
|
||||
:key="`cover-${cover.id}`"
|
||||
:src="getPath(cover, 'thumbnail')"
|
||||
class="cover"
|
||||
>
|
||||
|
||||
<div
|
||||
v-if="serie.photos.length > 0"
|
||||
class="album"
|
||||
:class="{ single: serie.photos.length === 1 }"
|
||||
>
|
||||
<div
|
||||
v-for="photo in serie.photos"
|
||||
: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">
|
||||
<Link
|
||||
v-if="serie.channel"
|
||||
:href="`/${serie.channel.type}/${serie.channel.slug}`"
|
||||
class="channel-link entity-link"
|
||||
>
|
||||
<img
|
||||
v-if="serie.channel.hasLogo"
|
||||
:src="serie.channel.isIndependent || !serie.network ? `/logos/${serie.channel.slug}/network.png` : `/logos/${serie.network.slug}/${serie.channel.slug}.png`"
|
||||
class="channel-logo entity-logo"
|
||||
>
|
||||
</Link>
|
||||
|
||||
<span
|
||||
v-if="!serie.channel.isIndependent && serie.network"
|
||||
class="network-container"
|
||||
>
|
||||
by
|
||||
<Link
|
||||
:href="`/${serie.network.type}/${serie.network.slug}`"
|
||||
class="network-link entity-link"
|
||||
>
|
||||
<img
|
||||
v-if="serie.network.hasLogo"
|
||||
:src="`/logos/${serie.network.slug}/network.png`"
|
||||
class="network-logo entity-logo"
|
||||
>
|
||||
</Link>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<time
|
||||
:datetime="serie.date.toISOString()"
|
||||
class="date ellipsis"
|
||||
>{{ formatDate(serie.date, 'MMMM d, y') }}</time>
|
||||
</div>
|
||||
|
||||
<div class="header">
|
||||
<h2
|
||||
v-if="serie.title"
|
||||
:title="serie.title"
|
||||
class="title"
|
||||
>{{ serie.title }}</h2>
|
||||
|
||||
<h2
|
||||
v-else-if="serie.actors.length > 0"
|
||||
class="title notitle"
|
||||
>serie featuring {{ serie.actors.map((actor) => actor.name).join(', ') }}</h2>
|
||||
|
||||
<h2
|
||||
v-else
|
||||
class="title notitle"
|
||||
>No title</h2>
|
||||
|
||||
<div class="actions">
|
||||
<Heart
|
||||
domain="series"
|
||||
:item="serie"
|
||||
/>
|
||||
|
||||
<div class="view">
|
||||
<button
|
||||
v-if="serie.photos.length > 0"
|
||||
class="button view nolink"
|
||||
>View photos</button>
|
||||
|
||||
<Link
|
||||
v-if="serie.url"
|
||||
:href="serie.url"
|
||||
target="_blank"
|
||||
class="button watch nolink"
|
||||
>Watch serie</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<ul class="actors nolist">
|
||||
<li
|
||||
v-for="actor in serie.actors"
|
||||
:key="`actor-${actor.id}`"
|
||||
class="actor"
|
||||
>
|
||||
<ActorTile :actor="actor" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="tags nolist">
|
||||
<li
|
||||
v-for="tag in serie.tags"
|
||||
:key="`tag-${tag.id}`"
|
||||
>
|
||||
<Link
|
||||
:href="`/tag/${tag.slug}`"
|
||||
class="tag nolink"
|
||||
>{{ tag.name }}</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div
|
||||
v-if="scenes.length > 0"
|
||||
class="section"
|
||||
>
|
||||
<h3 class="heading">Scenes</h3>
|
||||
|
||||
<ul class="scenes nolist">
|
||||
<li
|
||||
v-for="scene in scenes"
|
||||
:key="`scene-${scene.id}`"
|
||||
>
|
||||
<SceneTile :scene="scene" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="serie.description"
|
||||
class="section"
|
||||
>
|
||||
<h3 class="heading">Description</h3>
|
||||
|
||||
<p class="description">{{ serie.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="section details">
|
||||
<div
|
||||
v-if="serie.duration"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Duration</h3>
|
||||
{{ formatDuration(serie.duration) }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="serie.directors.length > 0"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Director</h3>
|
||||
{{ serie.directors.map((director) => director.name).join(', ') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="serie.shootId"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Shoot</h3>
|
||||
{{ serie.shootId }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section details">
|
||||
<div class="detail">
|
||||
<h3 class="heading">Added</h3>
|
||||
<span class="added-date">{{ formatDate(serie.createdAt, 'yyyy-MM-dd') }}</span>
|
||||
<span
|
||||
:title="`Batch ${serie.createdBatchId}`"
|
||||
class="added-batch"
|
||||
>#{{ serie.createdBatchId }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="serie.comment"
|
||||
class="detail"
|
||||
>
|
||||
<h3 class="heading">Comment</h3>
|
||||
{{ serie.comment }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject } from 'vue';
|
||||
|
||||
import { formatDate, formatDuration } from '#/utils/format.js';
|
||||
import getPath from '#/src/get-path.js';
|
||||
|
||||
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');
|
||||
|
||||
const serie = pageContext.pageProps.serie;
|
||||
const scenes = pageContext.pageProps.scenes;
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: var(--background-base-10);
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 .5rem;
|
||||
display: flex;
|
||||
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;
|
||||
align-items: center;
|
||||
background: var(--grey-dark-40);
|
||||
border-radius: 0 0 .5rem .5rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.entity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
color: var(--highlight);
|
||||
}
|
||||
|
||||
.entity-link {
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
.entity-logo {
|
||||
width: 10rem;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.network-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.date {
|
||||
padding: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info,
|
||||
.header {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 1rem .5rem .5rem .5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0 .5rem 1rem 0;
|
||||
line-height: 1.25;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notitle {
|
||||
color: var(--grey-dark-10);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
|
||||
.icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
fill: var(--shadow);
|
||||
}
|
||||
|
||||
.button {
|
||||
flex-shrink: 0;
|
||||
padding: .75rem;
|
||||
}
|
||||
|
||||
.button:not(:last-child) {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bookmarks {
|
||||
margin-right: .75rem;
|
||||
}
|
||||
|
||||
.view {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.watch {
|
||||
background: var(--primary);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.cover {
|
||||
height: 20rem;
|
||||
}
|
||||
|
||||
.actors,
|
||||
.tags {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.heading {
|
||||
color: var(--primary);
|
||||
margin: 0 0 .5rem 0;
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
text-align: justify;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.added-batch {
|
||||
color: var(--shadow-weak-10);
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
.actors {
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
gap: .25rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: .5rem;
|
||||
border-radius: .25rem;
|
||||
margin: 0 .25rem .25rem 0;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
box-shadow: 0 0 3px var(--shadow-weak-20);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.scenes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
gap: .5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media(--small) {
|
||||
.content {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
.banner-container {
|
||||
border-radius: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.network-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
margin-left: .5rem;
|
||||
white-space: wrap;
|
||||
}
|
||||
|
||||
.meta {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.entity-logo {
|
||||
width: 7.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
.actors {
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media(--small-60) {
|
||||
.actors {
|
||||
grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
|
||||
|
||||
import { fetchSeriesById } from '#/src/series.js';
|
||||
import { fetchScenes } from '#/src/scenes.js';
|
||||
import { curateScenesQuery } from '#/src/web/scenes.js';
|
||||
|
||||
function getTitle(serie) {
|
||||
if (serie.title) {
|
||||
return serie.title;
|
||||
}
|
||||
|
||||
if (serie.actors.length > 0) {
|
||||
return `Serie with ${serie.actors.map((actor) => actor.name).join(', ')}`;
|
||||
}
|
||||
|
||||
return 'Serie';
|
||||
}
|
||||
|
||||
export async function onBeforeRender(pageContext) {
|
||||
const [[serie], serieScenes] = await Promise.all([
|
||||
fetchSeriesById([Number(pageContext.routeParams.serieId)], pageContext.user),
|
||||
fetchScenes(await curateScenesQuery({
|
||||
...pageContext.urlQuery,
|
||||
scope: 'oldest',
|
||||
serieId: Number(pageContext.routeParams.serieId),
|
||||
}), {
|
||||
page: Number(pageContext.routeParams.page) || 1,
|
||||
limit: Number(pageContext.urlParsed.search.limit) || 30,
|
||||
aggregate: true,
|
||||
}, pageContext.user),
|
||||
]);
|
||||
|
||||
if (!serie) {
|
||||
throw render(404, `Cannot find serie '${pageContext.routeParams.serieId}'.`);
|
||||
}
|
||||
|
||||
const {
|
||||
scenes,
|
||||
aggActors,
|
||||
aggTags,
|
||||
aggChannels,
|
||||
total,
|
||||
limit,
|
||||
} = serieScenes;
|
||||
|
||||
return {
|
||||
pageContext: {
|
||||
title: getTitle(serie),
|
||||
pageProps: {
|
||||
serie,
|
||||
scenes,
|
||||
aggActors,
|
||||
aggTags,
|
||||
aggChannels,
|
||||
total,
|
||||
limit,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export default '/serie/@serieId/*';
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
export function curateMedia(media) {
|
||||
if (!media) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
id: media.id,
|
||||
path: media.path,
|
||||
thumbnail: media.thumbnail,
|
||||
lazy: media.lazy,
|
||||
isS3: media.is_s3,
|
||||
width: media.width,
|
||||
height: media.height,
|
||||
};
|
||||
}
|
||||
|
|
@ -4,27 +4,12 @@ import { knexQuery as knex, knexOwner, knexManticore } from './knex.js';
|
|||
import { utilsApi } from './manticore.js';
|
||||
import { HttpError } from './errors.js';
|
||||
import { fetchActorsById, curateActor, sortActorsByGender } from './actors.js';
|
||||
import { curateMedia } from './media.js';
|
||||
import { fetchTagsById } from './tags.js';
|
||||
import { fetchEntitiesById } from './entities.js';
|
||||
import { curateStash } from './stashes.js';
|
||||
import promiseProps from '../utils/promise-props.js';
|
||||
|
||||
function curateMedia(media) {
|
||||
if (!media) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
id: media.id,
|
||||
path: media.path,
|
||||
thumbnail: media.thumbnail,
|
||||
lazy: media.lazy,
|
||||
isS3: media.is_s3,
|
||||
width: media.width,
|
||||
height: media.height,
|
||||
};
|
||||
}
|
||||
|
||||
function curateMovie(rawMovie, assets) {
|
||||
if (!rawMovie) {
|
||||
return null;
|
||||
|
|
@ -66,7 +51,7 @@ function curateMovie(rawMovie, assets) {
|
|||
slug: tag.slug,
|
||||
name: tag.name,
|
||||
})),
|
||||
poster: curateMedia(assets.poster),
|
||||
// poster: curateMedia(assets.poster),
|
||||
covers: assets.covers.map((cover) => curateMedia(cover)),
|
||||
photos: assets.photos.map((photo) => curateMedia(photo)),
|
||||
stashes: assets.stashes?.map((stash) => curateStash(stash)) || [],
|
||||
|
|
@ -147,7 +132,7 @@ export async function fetchMoviesById(movieIds, reqUser) {
|
|||
const movie = movies.find((movieEntry) => movieEntry.id === movieId);
|
||||
|
||||
if (!movie) {
|
||||
console.warn('cannot find movie', movieId);
|
||||
console.warn('Cannot find movie', movieId);
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -80,6 +80,12 @@ function curateScene(rawScene, assets) {
|
|||
title: movie.title,
|
||||
covers: movie.movie_covers?.map((cover) => curateMedia(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(assets.poster),
|
||||
trailer: curateMedia(assets.trailer),
|
||||
teaser: curateMedia(assets.teaser),
|
||||
|
|
@ -99,6 +105,7 @@ export async function fetchScenesById(sceneIds, { reqUser, ...context } = {}) {
|
|||
directors,
|
||||
tags,
|
||||
movies,
|
||||
series,
|
||||
posters,
|
||||
photos,
|
||||
trailers,
|
||||
|
|
@ -141,6 +148,13 @@ export async function fetchScenesById(sceneIds, { reqUser, ...context } = {}) {
|
|||
.leftJoin('media', 'media.id', 'movies_covers.media_id')
|
||||
.whereIn('scene_id', sceneIds)
|
||||
.groupBy('movies.id', 'movies_scenes.scene_id'),
|
||||
series: knex('series_scenes')
|
||||
.select('series_scenes.scene_id', 'series.*', knex.raw('row_to_json(media) as serie_poster'))
|
||||
.leftJoin('series', 'series.id', 'series_scenes.serie_id')
|
||||
.leftJoin('series_posters', 'series_posters.serie_id', 'series.id')
|
||||
.leftJoin('media', 'media.id', 'series_posters.media_id')
|
||||
.whereIn('scene_id', sceneIds)
|
||||
.groupBy('series.id', 'series_scenes.scene_id', 'media.*'),
|
||||
posters: knex('releases_posters')
|
||||
.whereIn('release_id', sceneIds)
|
||||
.leftJoin('media', 'media.id', 'releases_posters.media_id'),
|
||||
|
|
@ -198,13 +212,12 @@ export async function fetchScenesById(sceneIds, { reqUser, ...context } = {}) {
|
|||
return null;
|
||||
}
|
||||
|
||||
console.log(movies);
|
||||
|
||||
const sceneChannel = channels.find((entity) => entity.id === scene.entity_id);
|
||||
const sceneActors = actors.filter((actor) => actor.release_id === sceneId);
|
||||
const sceneDirectors = directors.filter((director) => director.release_id === sceneId);
|
||||
const sceneTags = tags.filter((tag) => tag.release_id === sceneId);
|
||||
const sceneMovies = movies.filter((movie) => movie.scene_id === sceneId);
|
||||
const sceneSeries = series.filter((serie) => serie.scene_id === sceneId);
|
||||
const scenePoster = posters.find((poster) => poster.release_id === sceneId);
|
||||
const scenePhotos = photos.filter((photo) => photo.release_id === sceneId);
|
||||
const sceneTrailers = trailers.find((trailer) => trailer.release_id === sceneId);
|
||||
|
|
@ -218,6 +231,7 @@ export async function fetchScenesById(sceneIds, { reqUser, ...context } = {}) {
|
|||
directors: sceneDirectors,
|
||||
tags: sceneTags,
|
||||
movies: sceneMovies,
|
||||
series: sceneSeries,
|
||||
poster: scenePoster,
|
||||
photos: scenePhotos,
|
||||
trailer: sceneTrailers,
|
||||
|
|
@ -490,6 +504,10 @@ async function queryManticoreSql(filters, options, _reqUser) {
|
|||
builder.whereRaw('any(movie_ids) = ?', filters.movieId);
|
||||
}
|
||||
|
||||
if (filters.serieId) {
|
||||
builder.whereRaw('any(serie_ids) = ?', filters.serieId);
|
||||
}
|
||||
|
||||
if (typeof filters.isShowcased === 'boolean') {
|
||||
builder.where('scenes.is_showcased', filters.isShowcased);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,151 @@
|
|||
import { knexQuery as knex, knexOwner } from './knex.js';
|
||||
import { curateActor, sortActorsByGender } from './actors.js';
|
||||
import { curateMedia } from './media.js';
|
||||
import { curateStash } from './stashes.js';
|
||||
import promiseProps from '../utils/promise-props.js';
|
||||
|
||||
function curateSerie(rawSerie, assets) {
|
||||
if (!rawSerie) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
id: rawSerie.id,
|
||||
title: rawSerie.title,
|
||||
slug: rawSerie.slug,
|
||||
url: rawSerie.url,
|
||||
date: rawSerie.date,
|
||||
createdAt: rawSerie.created_at,
|
||||
effectiveDate: rawSerie.effective_date,
|
||||
description: rawSerie.description,
|
||||
duration: rawSerie.duration,
|
||||
channel: {
|
||||
id: assets.channel.id,
|
||||
slug: assets.channel.slug,
|
||||
name: assets.channel.name,
|
||||
type: assets.channel.type,
|
||||
isIndependent: assets.channel.independent,
|
||||
hasLogo: assets.channel.has_logo,
|
||||
},
|
||||
network: assets.channel.network_id ? {
|
||||
id: assets.channel.network_id,
|
||||
slug: assets.channel.network_slug,
|
||||
name: assets.channel.network_name,
|
||||
type: assets.channel.network_type,
|
||||
hasLogo: assets.channel.has_logo,
|
||||
} : null,
|
||||
actors: sortActorsByGender(assets.actors.map((actor) => curateActor(actor, { sceneDate: rawSerie.effective_date }))),
|
||||
directors: assets.directors.map((director) => ({
|
||||
id: director.id,
|
||||
slug: director.slug,
|
||||
name: director.name,
|
||||
})),
|
||||
tags: assets.tags.map((tag) => ({
|
||||
id: tag.id,
|
||||
slug: tag.slug,
|
||||
name: tag.name,
|
||||
})),
|
||||
poster: curateMedia(assets.poster),
|
||||
// covers: assets.covers.map((cover) => curateMedia(cover)),
|
||||
photos: assets.photos.map((photo) => curateMedia(photo)),
|
||||
stashes: assets.stashes?.map((stash) => curateStash(stash)) || [],
|
||||
createdBatchId: rawSerie.created_batch_id,
|
||||
updatedBatchId: rawSerie.updated_batch_id,
|
||||
};
|
||||
}
|
||||
|
||||
export async function fetchSeriesById(serieIds, reqUser) {
|
||||
const {
|
||||
series,
|
||||
channels,
|
||||
actors,
|
||||
directors,
|
||||
tags,
|
||||
posters,
|
||||
photos,
|
||||
stashes,
|
||||
} = await promiseProps({
|
||||
series: knex('series')
|
||||
.select('series.*', knex.raw('sum(releases.duration) as duration'))
|
||||
.leftJoin('series_scenes', 'series_scenes.serie_id', 'series.id')
|
||||
.leftJoin('releases', 'releases.id', 'series_scenes.scene_id')
|
||||
.whereIn('series.id', serieIds)
|
||||
.groupBy('series.id'),
|
||||
channels: knex('series')
|
||||
.select('channels.*', 'networks.id as network_id', 'networks.slug as network_slug', 'networks.name as network_name', 'networks.type as network_type')
|
||||
.whereIn('series.id', serieIds)
|
||||
.leftJoin('entities as channels', 'channels.id', 'series.entity_id')
|
||||
.leftJoin('entities as networks', 'networks.id', 'channels.parent_id')
|
||||
.groupBy('channels.id', 'networks.id'),
|
||||
actors: knex('series')
|
||||
.select(
|
||||
'actors.*',
|
||||
'actors_meta.*',
|
||||
'releases_actors.release_id',
|
||||
'series.id as serie_id',
|
||||
)
|
||||
.distinctOn('actors.id', 'series.id') // cannot distinct on JSON column avatar, must specify
|
||||
.whereIn('series.id', serieIds)
|
||||
.whereNotNull('actors.id')
|
||||
.leftJoin('series_scenes', 'series_scenes.serie_id', 'series.id')
|
||||
.leftJoin('releases_actors', 'releases_actors.release_id', 'series_scenes.scene_id')
|
||||
.leftJoin('actors', 'actors.id', 'releases_actors.actor_id')
|
||||
.leftJoin('actors_meta', 'actors_meta.actor_id', 'actors.id'),
|
||||
directors: knex('series')
|
||||
.whereIn('series.id', serieIds)
|
||||
.leftJoin('series_scenes', 'series_scenes.serie_id', 'series.id')
|
||||
.leftJoin('releases_directors', 'releases_directors.release_id', 'series_scenes.scene_id')
|
||||
.leftJoin('actors as directors', 'directors.id', 'releases_directors.director_id'),
|
||||
tags: knex('series')
|
||||
.select('tags.id', 'tags.slug', 'tags.name', 'tags.priority', 'series.id as serie_id')
|
||||
.distinct()
|
||||
.whereIn('series.id', serieIds)
|
||||
.whereNotNull('tags.id')
|
||||
.leftJoin('series_scenes', 'series_scenes.serie_id', 'series.id')
|
||||
.leftJoin('releases_tags', 'releases_tags.release_id', 'series_scenes.scene_id')
|
||||
.leftJoin('tags', 'tags.id', 'releases_tags.tag_id')
|
||||
.orderBy('priority', 'desc'),
|
||||
posters: knex('series_posters')
|
||||
.whereIn('serie_id', serieIds)
|
||||
.leftJoin('media', 'media.id', 'series_posters.media_id')
|
||||
.orderBy('media.index'),
|
||||
photos: knex('series')
|
||||
.whereIn('series.id', serieIds)
|
||||
.leftJoin('series_scenes', 'series_scenes.serie_id', 'series.id')
|
||||
.leftJoin('releases_photos', 'releases_photos.release_id', 'series_scenes.scene_id')
|
||||
.leftJoin('media', 'media.id', 'releases_photos.media_id'),
|
||||
stashes: reqUser
|
||||
? knexOwner('stashes_series')
|
||||
.leftJoin('stashes', 'stashes.id', 'stashes_series.stash_id')
|
||||
.where('stashes.user_id', reqUser.id)
|
||||
.whereIn('stashes_series.serie_id', serieIds)
|
||||
: [],
|
||||
});
|
||||
|
||||
return serieIds.map((serieId) => {
|
||||
const serie = series.find((serieEntry) => serieEntry.id === serieId);
|
||||
|
||||
if (!serie) {
|
||||
console.warn('Cannot find serie', serieId);
|
||||
return null;
|
||||
}
|
||||
|
||||
const serieChannel = channels.find((entity) => entity.id === serie.entity_id);
|
||||
const serieActors = actors.filter((actor) => actor.serie_id === serieId);
|
||||
const serieDirectors = directors.filter((director) => director.release_id === serieId);
|
||||
const serieTags = tags.filter((tag) => tag.serie_id === serieId);
|
||||
const seriePosters = posters.filter((poster) => poster.serie_id === serieId);
|
||||
const seriePhotos = photos.filter((photo) => photo.release_id === serieId);
|
||||
const serieStashes = stashes.filter((stash) => stash.serie_id === serieId);
|
||||
|
||||
return curateSerie(serie, {
|
||||
channel: serieChannel,
|
||||
actors: serieActors,
|
||||
directors: serieDirectors,
|
||||
tags: serieTags,
|
||||
posters: seriePosters,
|
||||
photos: seriePhotos,
|
||||
stashes: serieStashes,
|
||||
});
|
||||
}).filter(Boolean);
|
||||
}
|
||||
|
|
@ -34,6 +34,7 @@ export async function curateScenesQuery(query) {
|
|||
entityId,
|
||||
notEntityIds,
|
||||
movieId: Number(query.movieId) || null,
|
||||
serieId: Number(query.serieId) || null,
|
||||
stashId: Number(query.stashId) || null,
|
||||
isShowcased: typeof query.isShowcased === 'boolean' ? query.isShowcased : null,
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue