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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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);