feat(item details): add 'Ends At' Section to item details page

Calcuates when a show would end, and displays it next to production year, genre, and runtime
This commit is contained in:
Cameron Clark 2020-09-13 16:26:57 +01:00 committed by Cameron
parent 7a6ef95a52
commit f257efec70
2 changed files with 19 additions and 3 deletions

View File

@ -3,6 +3,7 @@
"continueListening": "Continue listening",
"continueWatching": "Continue watching",
"episodeNumber": "Episode {episodeNumber}",
"endsAt": "Ends at",
"home": "Home",
"incorrectUsernameOrPassword": "Incorrect username or password",
"login": "Login",

View File

@ -78,24 +78,39 @@ export default Vue.extend({
return `${this.$axios.defaults.baseURL}/Items/${id}/Images/Backdrop`;
}
},
getEndsAtTime(ticks: number): string {
const ms = ticks / 10000;
const endTimeLong = new Date(Date.now() + ms);
const endTimeShort = endTimeLong.toLocaleString('en-US', {
hour: 'numeric',
minute: 'numeric'
});
return `${this.$t('endsAt')}: ${endTimeShort}`;
},
ticksToTime(ticks: number) {
const ms = ticks / 600000000;
if (Math.floor(ms / 60)) {
if (Math.floor(ms / 60) && Math.floor(ms % 60)) {
return `${Math.floor(ms / 60)} hrs ${Math.floor(ms % 60)} min`;
} else if (Math.floor(ms / 60)) {
return `${Math.floor(ms / 60)} hrs`;
} else {
return `${Math.floor(ms % 60)} min`;
}
},
renderItemSubHeading() {
const response = [];
if (this.item.ProductionYear) {
response.push(this.item.ProductionYear);
}
if (this.item.Genres) {
response.push(this.item.Genres[0]);
}
if (this.item.RunTimeTicks) {
response.push(this.ticksToTime(this.item.RunTimeTicks));
}
if (this.item.ProductionYear) {
response.push(this.item.ProductionYear);
if (this.item.RunTimeTicks) {
response.push(this.getEndsAtTime(this.item.RunTimeTicks));
}
return response.join(' • ');
},