diff --git a/assets/components/releases/clips.vue b/assets/components/releases/clips.vue index 3494a577..a17ce45c 100644 --- a/assets/components/releases/clips.vue +++ b/assets/components/releases/clips.vue @@ -5,34 +5,38 @@ :key="`clip-${clip.id}`" class="clip" > - - + - + + + + {{ formatDuration(clip.duration) }} +
-
-

{{ clip.title }}

- {{ formatDuration(clip.duration) }} -
+

{{ clip.title }}

-

{{ clip.description }}

+

{{ clip.description }}

- +
@@ -55,35 +59,66 @@ export default { diff --git a/assets/components/releases/media.vue b/assets/components/releases/media.vue index c491a9bb..5335e087 100644 --- a/assets/components/releases/media.vue +++ b/assets/components/releases/media.vue @@ -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 diff --git a/assets/js/format.js b/assets/js/format.js new file mode 100644 index 00000000..e37e6fe8 --- /dev/null +++ b/assets/js/format.js @@ -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); +} diff --git a/assets/js/fragments.js b/assets/js/fragments.js index 0f0374cb..5e3c084e 100644 --- a/assets/js/fragments.js +++ b/assets/js/fragments.js @@ -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 diff --git a/assets/js/main.js b/assets/js/main.js index ce3ab4a5..6adb4cd2 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -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);