Improved clip layout. Using format module for duration and time.
This commit is contained in:
DebaucheryLibrarian
parent
501e764c21
commit
552e6da392
|
|
@ -5,34 +5,38 @@
|
|||
:key="`clip-${clip.id}`"
|
||||
class="clip"
|
||||
>
|
||||
<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}`"
|
||||
class="clip-poster"
|
||||
<div class="clip-poster-container">
|
||||
<a
|
||||
v-if="clip.poster"
|
||||
:href="`/media/${clip.poster.path}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
</a>
|
||||
<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">
|
||||
<div class="clip-header">
|
||||
<h3 class="clip-title">{{ clip.title }}</h3>
|
||||
<span
|
||||
v-if="clip.duration"
|
||||
class="clip-duration"
|
||||
>{{ formatDuration(clip.duration) }}</span>
|
||||
</div>
|
||||
<h3
|
||||
v-if="clip.title"
|
||||
class="clip-row clip-title"
|
||||
:title="clip.title"
|
||||
>{{ clip.title }}</h3>
|
||||
|
||||
<p
|
||||
v-if="clip.description"
|
||||
class="clip-description"
|
||||
>{{ clip.description }}</p>
|
||||
<p class="clip-row clip-description">{{ clip.description }}</p>
|
||||
|
||||
<Tags :tags="clip.tags" />
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue