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

Improved clip layout. Using format module for duration and time.

This commit is contained in:
DebaucheryLibrarian 2020-08-20 20:48:52 +02:00
parent 501e764c21
commit 552e6da392
5 changed files with 107 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,12 +5,12 @@
: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"
class="clip-poster-link"
>
<img
:src="`/media/${clip.poster.thumbnail}`"
@ -18,21 +18,25 @@
>
</a>
<div class="clip-info">
<div class="clip-header">
<h3 class="clip-title">{{ clip.title }}</h3>
<span
v-if="clip.duration"
class="clip-duration"
>{{ formatDuration(clip.duration) }}</span>
</div>
<p
v-if="clip.description"
class="clip-description"
>{{ clip.description }}</p>
<div class="clip-info">
<h3
v-if="clip.title"
class="clip-row clip-title"
:title="clip.title"
>{{ clip.title }}</h3>
<Tags :tags="clip.tags" />
<p class="clip-row clip-description">{{ clip.description }}</p>
<Tags
:tags="clip.tags"
class="clip-row clip-tags"
/>
</div>
</li>
</ul>
@ -55,35 +59,66 @@ export default {
</script>
<style lang="scss" scoped>
.clip {
@import 'breakpoints';
.clips {
display: grid;
grid-template-columns: .25fr .75fr;
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%;
max-height: 100%;
height: 10rem;
object-fit: cover;
object-position: center;
}
.clip-info {
flex-grow: 1;
padding: 1rem 1rem .5rem 1rem;
overflow: hidden;
.clip-duration {
color: var(--text-light);
display: block;
position: absolute;
bottom: 0;
left: 0;
padding: .5rem .5rem .75rem 1rem;
font-weight: bold;
text-shadow: 0 0 2px var(--darken-strong);
}
.clip-header {
display: flex;
justify-content: space-between;
.clip-info {
padding: 0 1rem;
}
.clip-row {
margin: 0 0 .75rem 0;
}
.clip-title {
display: inline-block;
padding: 0;
margin: 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>

4
assets/components/releases/media.vue
View File

@ -105,7 +105,9 @@ function sfw() {
}
function photos() {
const photosWithClipPosters = (this.release.photos || []).concat(this.release.clips ? this.release.clips.map(clip => clip.poster) : []);
const clipPostersById = (this.release.clips || []).reduce((acc, clip) => ({ ...acc, [clip.poster.id]: clip.poster }), {});
const uniqueClipPosters = Array.from(new Set(this.release.clips.map(clip => clip.poster.id) || [])).map(posterId => clipPostersById[posterId]);
const photosWithClipPosters = (this.release.photos || []).concat(uniqueClipPosters);
if (this.release.trailer || this.release.teaser) {
// poster will be on trailer video

29
assets/js/format.js Normal file
View File

@ -0,0 +1,29 @@
import dayjs from 'dayjs';
export function formatDuration(duration, forceHours) {
const hours = Math.floor(duration / 3600);
const minutes = Math.floor((duration % 3600) / 60);
const seconds = Math.floor(duration % 60);
const [formattedHours, formattedMinutes, formattedSeconds] = [hours, minutes, seconds].map(segment => segment.toString().padStart(2, '0'));
if (duration >= 3600 || forceHours) {
return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}
return `${formattedMinutes}:${formattedSeconds}`;
}
export function formatDate(date, format = 'MMMM D, YYYY', precision = 'day') {
if (precision === 'year') {
const newFormat = format.match(/Y+/);
return dayjs(date).format(newFormat ? newFormat[0] : 'YYYY');
}
if (precision === 'month') {
const newFormat = format.match(/(M{1,4})|(Y{2,4})/g);
return dayjs(date).format(newFormat ? newFormat.join(' ') : 'MMMM YYYY');
}
return dayjs(date).format(format);
}

3
assets/js/fragments.js
View File

@ -165,6 +165,7 @@ const releaseTrailerFragment = `
const releaseTeaserFragment = `
teaser: releasesTeaserByReleaseId {
media {
id
index
path
thumbnail
@ -269,6 +270,7 @@ const releaseFragment = `
}
poster: clipsPosterByClipId {
media {
id
index
path
thumbnail
@ -297,6 +299,7 @@ const releaseFragment = `
slug
covers: moviesCovers {
media {
id
index
path
thumbnail

31
assets/js/main.js
View File

@ -5,43 +5,16 @@ import dayjs from 'dayjs';
import router from './router';
import initStore from './store';
import initUiObservers from './ui/observers';
import { formatDate, formatDuration } from './format';
import '../css/style.scss';
import Container from '../components/container/container.vue';
import Icon from '../components/icon/icon.vue';
import Footer from '../components/footer/footer.vue';
function formatDuration(duration, forceHours) {
const hours = Math.floor(duration / 3600);
const minutes = Math.floor((duration % 3600) / 60);
const seconds = Math.floor(duration % 60);
const [formattedHours, formattedMinutes, formattedSeconds] = [hours, minutes, seconds].map(segment => segment.toString().padStart(2, '0'));
if (duration >= 3600 || forceHours) {
return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}
return `${formattedMinutes}:${formattedSeconds}`;
}
function formatDate(date, format = 'MMMM D, YYYY', precision = 'day') {
if (precision === 'year') {
const newFormat = format.match(/Y+/);
return dayjs(date).format(newFormat ? newFormat[0] : 'YYYY');
}
if (precision === 'month') {
const newFormat = format.match(/(M{1,4})|(Y{2,4})/g);
return dayjs(date).format(newFormat ? newFormat.join(' ') : 'MMMM YYYY');
}
return dayjs(date).format(format);
}
function init() {
const store = initStore(router);