boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Refactored clips into chapters.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2021-02-27 00:37:22 +01:00
parent 0eba0461c9
commit bb20659934
115 changed files with 671 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
assets/components/releases/chapters.vue Normal file
View File

@@ -0,0 +1,161 @@
<template>
<ul class="chapters nolist">
<li
v-for="chapter in chapters"
:key="`chapter-${chapter.id}`"
class="chapter"
>
<a
v-if="chapter.poster"
:href="getPath(chapter.poster)"
target="_blank"
rel="noopener noreferrer"
>
<img
:src="getPath(chapter.poster, 'thumbnail')"
class="chapter-poster"
>
</a>
<span class="chapter-details">
<span
v-if="chapter.time"
v-tooltip="'Time in video'"
class="chapter-time"
><Icon icon="film3" /> {{ formatDuration(chapter.time) }}</span>
<span
v-if="chapter.duration"
v-tooltip="'Duration'"
class="chapter-duration"
><Icon icon="stopwatch" />{{ formatDuration(chapter.duration) }}</span>
</span>
<div class="chapter-info">
<h3
v-if="chapter.title"
class="chapter-row chapter-title"
:title="chapter.title"
>{{ chapter.title }}</h3>
<p
v-if="chapter.description"
class="chapter-row chapter-description"
>{{ chapter.description }}</p>
<Tags
:tags="chapter.tags"
class="chapter-row chapter-tags"
/>
</div>
</li>
</ul>
</template>
<script>
import Tags from './tags.vue';
export default {
components: {
Tags,
},
props: {
chapters: {
type: Array,
default: () => [],
},
},
};
</script>
<style lang="scss">
.chapter-tags.tags-container {
margin: 0 0 .5rem 0;
.tags {
padding: 2px 0 0 2px;
}
}
</style>
<style lang="scss" scoped>
@import 'breakpoints';
.chapters {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-gap: 1rem;
}
.chapter {
display: flex;
flex-direction: column;
background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak);
margin: 0 0 .5rem 0;
font-size: 0;
}
.chapter-poster {
width: 100%;
height: 10rem;
object-fit: cover;
object-position: center;
}
.chapter-details {
height: 1.75rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .5rem;
margin: 0 0 .75rem 0;
color: var(--text-light);
background: var(--profile);
font-size: .9rem;
font-weight: bold;
.icon {
fill: var(--text-light);
margin: -.1rem .5rem 0 0;
}
}
.chapter-duration,
.chapter-time {
display: flex;
align-items: center;
}
.chapter-duration .icon {
/* narrower icon */
margin: -.1rem .3rem 0 0;
}
.chapter-info {
padding: 0 .5rem;
font-size: 1rem;
}
.chapter-row {
margin: 0 0 .5rem 0;
}
.chapter-title {
padding: 0;
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chapter-description {
line-height: 1.5;
}
@media(max-width: $breakpoint-micro) {
.chapters {
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
}
</style>

126
assets/components/releases/clips.vue
View File

@@ -1,126 +0,0 @@
<template>
<ul class="clips nolist">
<li
v-for="clip in clips"
:key="`clip-${clip.id}`"
class="clip"
>
<div class="clip-poster-container">
<a
v-if="clip.poster"
:href="`/media/${clip.poster.path}`"
target="_blank"
rel="noopener noreferrer"
>
<img
:src="`/media/${clip.poster.thumbnail}`"
class="clip-poster"
>
</a>
<span
v-if="clip.duration"
class="clip-duration"
>{{ formatDuration(clip.duration) }}</span>
</div>
<div class="clip-info">
<h3
v-if="clip.title"
class="clip-row clip-title"
:title="clip.title"
>{{ clip.title }}</h3>
<p class="clip-row clip-description">{{ clip.description }}</p>
<Tags
:tags="clip.tags"
class="clip-row clip-tags"
/>
</div>
</li>
</ul>
</template>
<script>
import Tags from './tags.vue';
export default {
components: {
Tags,
},
props: {
clips: {
type: Array,
default: () => [],
},
},
};
</script>
<style lang="scss" scoped>
@import 'breakpoints';
.clips {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-gap: 1rem;
}
.clip {
background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak);
margin: 0 0 .5rem 0;
}
.clip-poster-container {
position: relative;
margin: 0 0 1rem 0;
}
.clip-poster {
width: 100%;
height: 10rem;
object-fit: cover;
object-position: center;
}
.clip-duration {
background: var(--darken);
color: var(--text-light);
display: block;
position: absolute;
top: 0;
right: 0;
padding: .25rem .5rem;
font-size: .9rem;
font-weight: bold;
text-shadow: 0 0 2px var(--darken-strong);
}
.clip-info {
padding: 0 1rem;
}
.clip-row {
margin: 0 0 .75rem 0;
}
.clip-title {
padding: 0;
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.clip-description {
line-height: 1.5;
}
@media(max-width: $breakpoint-micro) {
.clips {
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
}
</style>

22
assets/components/releases/release.vue
View File

@@ -104,6 +104,15 @@
<p class="description">{{ release.description }}</p>
</div>
<div
v-if="release.chapters?.length > 0"
class="row nolist"
>
<span class="row-label">Chapters</span>
<Chapters :chapters="release.chapters" />
</div>
<div class="row row-tidbits">
<div
v-if="release.duration"
@@ -169,15 +178,6 @@
</div>
</div>
<div
v-if="release.clips && release.clips.length > 0"
class="row nolist"
>
<span class="row-label">Clips</span>
<Clips :clips="release.clips" />
</div>
<div
v-if="release.comment"
class="row"
@@ -204,7 +204,7 @@ import Details from './details.vue';
import Banner from './banner.vue';
import Album from '../album/album.vue';
import Tags from './tags.vue';
import Clips from './clips.vue';
import Chapters from './chapters.vue';
import Actor from '../actors/tile.vue';
import Releases from './releases.vue';
import Scroll from '../scroll/scroll.vue';
@@ -244,7 +244,7 @@ export default {
Banner,
Scroll,
Releases,
Clips,
Chapters,
Tags,
},
data() {

5
assets/img/icons/clock.svg Normal file
View File

@@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>clock</title>
<path d="M10.293 11.707l-3.293-3.293v-4.414h2v3.586l2.707 2.707zM8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14c-3.314 0-6-2.686-6-6s2.686-6 6-6c3.314 0 6 2.686 6 6s-2.686 6-6 6z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 367 B

5
assets/img/icons/clock3.svg Normal file
View File

@@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>clock3</title>
<path d="M12 7v2h-5v-6h2v4zM8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14c-3.314 0-6-2.686-6-6s2.686-6 6-6c3.314 0 6 2.686 6 6s-2.686 6-6 6z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 331 B

5
assets/img/icons/clock4.svg Normal file
View File

@@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>clock4</title>
<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM12 9h-5v-6h2v4h3v2z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 261 B

5
assets/img/icons/pagebreak.svg Normal file
View File

@@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>pagebreak</title>
<path d="M4 6v-6h12v6h-1v-5h-10v5zM16 9v7h-12v-7h1v6h10v-6zM8 7h2v1h-2zM5 7h2v1h-2zM11 7h2v1h-2zM14 7h2v1h-2zM0 4.5l3 3-3 3z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 297 B

5
assets/img/icons/stack4.svg Normal file
View File

@@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>stack4</title>
<path d="M5 1v1.155l-2.619 0.368 0.17 1.211-2.551 0.732 3.308 11.535 10.189-2.921 0.558-0.079h1.945v-12h-11zM3.929 14.879l-2.808-9.793 1.558-0.447 1.373 9.766 2.997-0.421-3.119 0.894zM4.822 13.382l-1.418-10.088 1.595-0.224v9.93h2.543l-2.721 0.382zM15 12h-9v-10h9v10zM7 7.125h7v0.25h-7zM7 7.625h7v0.25h-7zM7 8.625h7v0.25h-7zM7 8.125h7v0.25h-7zM7 9.125h7v0.25h-7zM7 10.625h7v0.25h-7zM7 9.625h7v0.25h-7zM7 10.125h7v0.25h-7zM7 4.625h7v0.25h-7zM7 3.625h7v0.25h-7zM7 4.125h7v0.25h-7zM7 3.125h7v0.25h-7zM7 6.625h7v0.25h-7zM7 6.125h7v0.25h-7zM7 5.125h7v0.25h-7zM7 5.625h7v0.25h-7z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 742 B

6
assets/img/icons/watch2.svg Normal file
View File

@@ -0,0 +1,6 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>watch2</title>
<path d="M9.5 8h-1.5v-2.5c0-0.276-0.224-0.5-0.5-0.5s-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h2c0.276 0 0.5-0.224 0.5-0.5s-0.224-0.5-0.5-0.5z"></path>
<path d="M14 8c0-2.422-1.435-4.508-3.501-5.455h0.001l-0.5-2.545h-4l-0.5 2.545h0.001c-2.066 0.948-3.501 3.034-3.501 5.455s1.435 4.507 3.5 5.455l-0 0 0.5 2.545h4l0.5-2.545h-0.001c2.066-0.948 3.501-3.034 3.501-5.455zM8 12.5c-2.485 0-4.5-2.015-4.5-4.5s2.015-4.5 4.5-4.5c2.485 0 4.5 2.015 4.5 4.5s-2.015 4.5-4.5 4.5z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 637 B

2
assets/js/curate.js
View File

@@ -69,7 +69,7 @@ function curateRelease(release) {
if (release.scenes) curatedRelease.scenes = release.scenes.filter(Boolean).map(({ scene }) => curateRelease(scene));
if (release.movies) curatedRelease.movies = release.movies.filter(Boolean).map(({ movie }) => curateRelease(movie));
if (release.clips) curatedRelease.clips = release.clips.filter(Boolean).map(clip => curateRelease(clip));
if (release.chapters) curatedRelease.chapters = release.chapters.filter(Boolean).map(chapter => curateRelease(chapter));
if (release.photos) curatedRelease.photos = release.photos.filter(Boolean).map(photo => photo.media || photo);
if (release.covers) curatedRelease.covers = release.covers.filter(Boolean).map(({ media }) => media);
if (release.trailer) curatedRelease.trailer = release.trailer.media;

10
assets/js/fragments.js
View File

@@ -268,19 +268,21 @@ const releaseFragment = `
${releaseTrailerFragment}
${releaseTeaserFragment}
${siteFragment}
clips {
chapters {
id
index
time
duration
title
description
duration
tags: clipsTags {
tags: chaptersTags {
tag {
id
name
slug
}
}
poster: clipsPosterByClipId {
poster: chaptersPosterByChapterId {
media {
id
index