Skip to content

Commit

Permalink
WIP: Add "End of chapter" option for sleep timer (#3151)
Browse files Browse the repository at this point in the history 
* Add SleepTimerTypes for countdown and chapter

* Add functionality for 'end of chapter' sleep timer

* Fix custom time for sleep timer

* Include end of chapter string for sleep timer

* Increase chapter end tolerance to 0.75

* Show sleep time options in modal when timer is active

* Add SleepTimerTypes for countdown and chapter

* Add functionality for 'end of chapter' sleep timer

* Fix custom time for sleep timer

* Include end of chapter string for sleep timer

* Increase chapter end tolerance to 0.75

* Show sleep time options in modal when timer is active

* Sleep timer cleanup

* Localization for sleep timer modal, UI updates

---------

Co-authored-by: advplyr <advplyr@protonmail.com>
  • Loading branch information
@glorenzen @advplyr
glorenzen and advplyr authored Jul 14, 2024
1 parent eabfa90 commit 733f610
Show file tree
Hide file tree
Showing 7 changed files with 131 additions and 79 deletions.
45 changes: 35 additions & 10 deletions client/components/app/MediaPlayerContainer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,13 @@
<player-ui
ref="audioPlayer"
:chapters="chapters"
:current-chapter="currentChapter"
:paused="!isPlaying"
:loading="playerLoading"
:bookmarks="bookmarks"
:sleep-timer-set="sleepTimerSet"
:sleep-timer-remaining="sleepTimerRemaining"
:sleep-timer-type="sleepTimerType"
:is-podcast="isPodcast"
@playPause="playPause"
@jumpForward="jumpForward"
Expand All @@ -56,7 +58,7 @@

<modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :current-time="bookmarkCurrentTime" :library-item-id="libraryItemId" @select="selectBookmark" />

<modals-sleep-timer-modal v-model="showSleepTimerModal" :timer-set="sleepTimerSet" :timer-time="sleepTimerTime" :remaining="sleepTimerRemaining" @set="setSleepTimer" @cancel="cancelSleepTimer" @increment="incrementSleepTimer" @decrement="decrementSleepTimer" />
<modals-sleep-timer-modal v-model="showSleepTimerModal" :timer-set="sleepTimerSet" :timer-type="sleepTimerType" :remaining="sleepTimerRemaining" :has-chapters="!!chapters.length" @set="setSleepTimer" @cancel="cancelSleepTimer" @increment="incrementSleepTimer" @decrement="decrementSleepTimer" />

<modals-player-queue-items-modal v-model="showPlayerQueueItemsModal" :library-item-id="libraryItemId" />

Expand All @@ -81,8 +83,8 @@ export default {
showPlayerQueueItemsModal: false,
showPlayerSettingsModal: false,
sleepTimerSet: false,
sleepTimerTime: 0,
sleepTimerRemaining: 0,
sleepTimerType: null,
sleepTimer: null,
displayTitle: null,
currentPlaybackRate: 1,
Expand Down Expand Up @@ -149,6 +151,9 @@ export default {
if (this.streamEpisode) return this.streamEpisode.chapters || []
return this.media.chapters || []
},
currentChapter() {
return this.chapters.find((chapter) => chapter.start <= this.currentTime && this.currentTime < chapter.end)
},
title() {
if (this.playerHandler.displayTitle) return this.playerHandler.displayTitle
return this.mediaMetadata.title || 'No Title'
Expand Down Expand Up @@ -208,14 +213,18 @@ export default {
this.$store.commit('setIsPlaying', isPlaying)
this.updateMediaSessionPlaybackState()
},
setSleepTimer(seconds) {
setSleepTimer(time) {
this.sleepTimerSet = true
this.sleepTimerTime = seconds
this.sleepTimerRemaining = seconds
this.runSleepTimer()
this.showSleepTimerModal = false
this.sleepTimerType = time.timerType
if (this.sleepTimerType === this.$constants.SleepTimerTypes.COUNTDOWN) {
this.runSleepTimer(time)
}
},
runSleepTimer() {
runSleepTimer(time) {
this.sleepTimerRemaining = time.seconds
var lastTick = Date.now()
clearInterval(this.sleepTimer)
this.sleepTimer = setInterval(() => {
Expand All @@ -224,12 +233,23 @@ export default {
this.sleepTimerRemaining -= elapsed / 1000
if (this.sleepTimerRemaining <= 0) {
this.clearSleepTimer()
this.playerHandler.pause()
this.$toast.info('Sleep Timer Done.. zZzzZz')
this.sleepTimerEnd()
}
}, 1000)
},
checkChapterEnd(time) {
if (!this.currentChapter) return
const chapterEndTime = this.currentChapter.end
const tolerance = 0.75
if (time >= chapterEndTime - tolerance) {
this.sleepTimerEnd()
}
},
sleepTimerEnd() {
this.clearSleepTimer()
this.playerHandler.pause()
this.$toast.info('Sleep Timer Done.. zZzzZz')
},
cancelSleepTimer() {
this.showSleepTimerModal = false
this.clearSleepTimer()
Expand All @@ -239,6 +259,7 @@ export default {
this.sleepTimerRemaining = 0
this.sleepTimer = null
this.sleepTimerSet = false
this.sleepTimerType = null
},
incrementSleepTimer(amount) {
if (!this.sleepTimerSet) return
Expand Down Expand Up @@ -279,6 +300,10 @@ export default {
if (this.$refs.audioPlayer) {
this.$refs.audioPlayer.setCurrentTime(time)
}
if (this.sleepTimerType === this.$constants.SleepTimerTypes.CHAPTER && this.sleepTimerSet) {
this.checkChapterEnd(time)
}
},
setDuration(duration) {
this.totalDuration = duration
Expand Down
12 changes: 6 additions & 6 deletions client/components/modals/PlayerSettingsModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ export default {
return {
useChapterTrack: false,
jumpValues: [
{ text: this.$getString('LabelJumpAmountSeconds', ['10']), value: 10 },
{ text: this.$getString('LabelJumpAmountSeconds', ['15']), value: 15 },
{ text: this.$getString('LabelJumpAmountSeconds', ['30']), value: 30 },
{ text: this.$getString('LabelJumpAmountSeconds', ['60']), value: 60 },
{ text: this.$getString('LabelJumpAmountMinutes', ['2']), value: 120 },
{ text: this.$getString('LabelJumpAmountMinutes', ['5']), value: 300 }
{ text: this.$getString('LabelTimeDurationXSeconds', ['10']), value: 10 },
{ text: this.$getString('LabelTimeDurationXSeconds', ['15']), value: 15 },
{ text: this.$getString('LabelTimeDurationXSeconds', ['30']), value: 30 },
{ text: this.$getString('LabelTimeDurationXSeconds', ['60']), value: 60 },
{ text: this.$getString('LabelTimeDurationXMinutes', ['2']), value: 120 },
{ text: this.$getString('LabelTimeDurationXMinutes', ['5']), value: 300 }
],
jumpForwardAmount: 10,
jumpBackwardAmount: 10
Expand Down
105 changes: 60 additions & 45 deletions client/components/modals/SleepTimerModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,36 @@
</div>
</template>

<div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
<div v-if="!timerSet" class="w-full">
<div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
<div class="w-full">
<template v-for="time in sleepTimes">
<div :key="time.text" class="flex items-center px-6 py-3 justify-center cursor-pointer hover:bg-bg relative" @click="setTime(time.seconds)">
<p class="text-xl text-center">{{ time.text }}</p>
<div :key="time.text" class="flex items-center px-6 py-3 justify-center cursor-pointer hover:bg-primary/25 relative" @click="setTime(time)">
<p class="text-lg text-center">{{ time.text }}</p>
</div>
</template>
<form class="flex items-center justify-center px-6 py-3" @submit.prevent="submitCustomTime">
<ui-text-input v-model="customTime" type="number" step="any" min="0.1" placeholder="Time in minutes" class="w-48" />
<ui-text-input v-model="customTime" type="number" step="any" min="0.1" :placeholder="$strings.LabelTimeInMinutes" class="w-48" />
<ui-btn color="success" type="submit" :padding-x="0" class="h-9 w-12 flex items-center justify-center ml-1">Set</ui-btn>
</form>
</div>
<div v-else class="w-full p-4">
<div class="mb-4 flex items-center justify-center">
<ui-btn :padding-x="2" small :disabled="remaining < 30 * 60" class="flex items-center mr-4" @click="decrement(30 * 60)">
<div v-if="timerSet" class="w-full p-4">
<div class="mb-4 h-px w-full bg-white/10" />

<div v-if="timerType === $constants.SleepTimerTypes.COUNTDOWN" class="mb-4 flex items-center justify-center space-x-4">
<ui-btn :padding-x="2" small :disabled="remaining < 30 * 60" class="flex items-center h-9" @click="decrement(30 * 60)">
<span class="material-symbols text-lg">remove</span>
<span class="pl-1 text-base font-mono">30m</span>
<span class="pl-1 text-sm">30m</span>
</ui-btn>

<ui-icon-btn icon="remove" @click="decrement(60 * 5)" />
<ui-icon-btn icon="remove" class="min-w-9" @click="decrement(60 * 5)" />

<p class="mx-6 text-2xl font-mono">{{ $secondsToTimestamp(remaining) }}</p>
<p class="text-2xl font-mono">{{ $secondsToTimestamp(remaining) }}</p>

<ui-icon-btn icon="add" @click="increment(60 * 5)" />
<ui-icon-btn icon="add" class="min-w-9" @click="increment(60 * 5)" />

<ui-btn :padding-x="2" small class="flex items-center ml-4" @click="increment(30 * 60)">
<ui-btn :padding-x="2" small class="flex items-center h-9" @click="increment(30 * 60)">
<span class="material-symbols text-lg">add</span>
<span class="pl-1 text-base font-mono">30m</span>
<span class="pl-1 text-sm">30m</span>
</ui-btn>
</div>
<ui-btn class="w-full" @click="$emit('cancel')">{{ $strings.ButtonCancel }}</ui-btn>
Expand All @@ -47,62 +49,71 @@ export default {
props: {
value: Boolean,
timerSet: Boolean,
timerTime: Number,
remaining: Number
timerType: String,
remaining: Number,
hasChapters: Boolean
},
data() {
return {
customTime: null,
sleepTimes: [
customTime: null
}
},
computed: {
show: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
},
sleepTimes() {
const times = [
{
seconds: 60 * 5,
text: '5 minutes'
text: this.$getString('LabelTimeDurationXMinutes', ['5']),
timerType: this.$constants.SleepTimerTypes.COUNTDOWN
},
{
seconds: 60 * 15,
text: '15 minutes'
text: this.$getString('LabelTimeDurationXMinutes', ['15']),
timerType: this.$constants.SleepTimerTypes.COUNTDOWN
},
{
seconds: 60 * 20,
text: '20 minutes'
text: this.$getString('LabelTimeDurationXMinutes', ['20']),
timerType: this.$constants.SleepTimerTypes.COUNTDOWN
},
{
seconds: 60 * 30,
text: '30 minutes'
text: this.$getString('LabelTimeDurationXMinutes', ['30']),
timerType: this.$constants.SleepTimerTypes.COUNTDOWN
},
{
seconds: 60 * 45,
text: '45 minutes'
text: this.$getString('LabelTimeDurationXMinutes', ['45']),
timerType: this.$constants.SleepTimerTypes.COUNTDOWN
},
{
seconds: 60 * 60,
text: '60 minutes'
text: this.$getString('LabelTimeDurationXMinutes', ['60']),
timerType: this.$constants.SleepTimerTypes.COUNTDOWN
},
{
seconds: 60 * 90,
text: '90 minutes'
text: this.$getString('LabelTimeDurationXMinutes', ['90']),
timerType: this.$constants.SleepTimerTypes.COUNTDOWN
},
{
seconds: 60 * 120,
text: '2 hours'
text: this.$getString('LabelTimeDurationXHours', ['2']),
timerType: this.$constants.SleepTimerTypes.COUNTDOWN
}
]
}
},
watch: {
show(newVal) {
if (newVal) {
}
}
},
computed: {
show: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
if (this.hasChapters) {
times.push({ seconds: -1, text: this.$strings.LabelEndOfChapter, timerType: this.$constants.SleepTimerTypes.CHAPTER })
}
return times
}
},
methods: {
Expand All @@ -113,10 +124,14 @@ export default {
}
const timeInSeconds = Math.round(Number(this.customTime) * 60)
this.setTime(timeInSeconds)
const time = {
seconds: timeInSeconds,
timerType: this.$constants.SleepTimerTypes.COUNTDOWN
}
this.setTime(time)
},
setTime(seconds) {
this.$emit('set', seconds)
setTime(time) {
this.$emit('set', time)
},
increment(amount) {
this.$emit('increment', amount)
Expand All @@ -130,4 +145,4 @@ export default {
}
}
}
</script>
</script>
4 changes: 2 additions & 2 deletions client/components/player/PlayerPlaybackControls.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,10 @@ export default {
let formattedTime = ''
if (amount <= 60) {
formattedTime = this.$getString('LabelJumpAmountSeconds', [amount])
formattedTime = this.$getString('LabelTimeDurationXSeconds', [amount])
} else {
const minutes = Math.floor(amount / 60)
formattedTime = this.$getString('LabelJumpAmountMinutes', [minutes])
formattedTime = this.$getString('LabelTimeDurationXMinutes', [minutes])
}
return `${prefix} - ${formattedTime}`
Expand Down
29 changes: 16 additions & 13 deletions client/components/player/PlayerUi.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<span v-if="!sleepTimerSet" class="material-symbols text-2xl">snooze</span>
<div v-else class="flex items-center">
<span class="material-symbols text-lg text-warning">snooze</span>
<p class="text-xl text-warning font-mono font-semibold text-center px-0.5 pb-0.5" style="min-width: 30px">{{ sleepTimerRemainingString }}</p>
<p class="text-sm sm:text-lg text-warning font-mono font-semibold text-center px-0.5 sm:pb-0.5 sm:min-w-8">{{ sleepTimerRemainingString }}</p>
</div>
</button>
</ui-tooltip>
Expand Down Expand Up @@ -72,12 +72,14 @@ export default {
type: Array,
default: () => []
},
currentChapter: Object,
bookmarks: {
type: Array,
default: () => []
},
sleepTimerSet: Boolean,
sleepTimerRemaining: Number,
sleepTimerType: String,
isPodcast: Boolean,
hideBookmarks: Boolean,
hideSleepTimer: Boolean
Expand All @@ -104,16 +106,20 @@ export default {
},
computed: {
sleepTimerRemainingString() {
var rounded = Math.round(this.sleepTimerRemaining)
if (rounded < 90) {
return `${rounded}s`
}
var minutesRounded = Math.round(rounded / 60)
if (minutesRounded < 90) {
return `${minutesRounded}m`
if (this.sleepTimerType === this.$constants.SleepTimerTypes.CHAPTER) {
return 'EoC'
} else {
var rounded = Math.round(this.sleepTimerRemaining)
if (rounded < 90) {
return `${rounded}s`
}
var minutesRounded = Math.round(rounded / 60)
if (minutesRounded <= 90) {
return `${minutesRounded}m`
}
var hoursRounded = Math.round(minutesRounded / 60)
return `${hoursRounded}h`
}
var hoursRounded = Math.round(minutesRounded / 60)
return `${hoursRounded}h`
},
token() {
return this.$store.getters['user/getToken']
Expand All @@ -138,9 +144,6 @@ export default {
if (!duration) return 0
return Math.round((100 * time) / duration)
},
currentChapter() {
return this.chapters.find((chapter) => chapter.start <= this.currentTime && this.currentTime < chapter.end)
},
currentChapterName() {
return this.currentChapter ? this.currentChapter.title : ''
},
Expand Down
Loading

0 comments on commit 733f610

Please sign in to comment.