koel/resources/assets/js/services/playbackService.ts

424 lines
12 KiB
TypeScript
Raw Normal View History

import isMobile from 'ismobilejs'
2022-04-15 14:24:30 +00:00
import plyr from 'plyr'
import { watch } from 'vue'
import { shuffle, throttle } from 'lodash'
2022-04-15 14:24:30 +00:00
import {
2022-04-24 08:50:45 +00:00
commonStore,
preferenceStore as preferences,
2022-04-15 14:24:30 +00:00
queueStore,
recentlyPlayedStore,
2022-04-24 08:50:45 +00:00
songStore,
userStore
2022-04-15 14:24:30 +00:00
} from '@/stores'
import { arrayify, isAudioContextSupported, logger } from '@/utils'
import { audioService, http, socketService, volumeManager } from '@/services'
2022-04-15 14:24:30 +00:00
/**
* The number of seconds before the current song ends to start preload the next one.
*/
const PRELOAD_BUFFER = 30
2022-07-25 18:23:30 +00:00
class PlaybackService {
public player!: Plyr
2022-07-25 18:23:30 +00:00
private repeatModes: RepeatMode[] = ['NO_REPEAT', 'REPEAT_ALL', 'REPEAT_ONE']
private initialized = false
2022-04-15 14:24:30 +00:00
public init (plyrWrapper: HTMLElement) {
if (this.initialized) return
2022-07-25 18:23:30 +00:00
this.player = plyr.setup(plyrWrapper, { controls: [] })[0]
2022-04-15 14:24:30 +00:00
this.listenToMediaEvents(this.player.media)
this.setMediaSessionActionHandlers()
2022-04-15 14:24:30 +00:00
watch(volumeManager.volume, volume => this.player.setVolume(volume), { immediate: true })
2022-04-15 14:24:30 +00:00
this.initialized = true
2022-07-25 18:23:30 +00:00
}
2022-04-15 14:24:30 +00:00
2022-07-25 18:23:30 +00:00
public registerPlay (song: Song) {
2022-04-15 14:24:30 +00:00
recentlyPlayedStore.add(song)
songStore.registerPlay(song)
2022-06-10 10:47:46 +00:00
song.play_count_registered = true
2022-07-25 18:23:30 +00:00
}
2022-04-15 14:24:30 +00:00
2022-07-25 18:23:30 +00:00
public preload (song: Song) {
2022-04-15 14:24:30 +00:00
const audioElement = document.createElement('audio')
audioElement.setAttribute('src', songStore.getSourceUrl(song))
audioElement.setAttribute('preload', 'auto')
audioElement.load()
song.preloaded = true
2022-07-25 18:23:30 +00:00
}
2022-04-15 14:24:30 +00:00
/**
* Play a song. Because
*
* So many adventures couldn't happen today,
* So many songs we forgot to play
* So many dreams swinging out of the blue
* We'll let them come true
*/
2022-07-25 18:23:30 +00:00
public async play (song: Song) {
// If for any reason (most likely a bug), the requested song has been deleted, just attempt the next song.
if (song.deleted) {
logger.warn('Attempted to play a deleted song', song)
if (this.next && this.next.id !== song.id) {
await this.playNext()
}
return
}
2022-04-15 14:24:30 +00:00
if (queueStore.current) {
2022-06-10 10:47:46 +00:00
queueStore.current.playback_state = 'Stopped'
2022-04-15 14:24:30 +00:00
}
2022-06-10 10:47:46 +00:00
song.playback_state = 'Playing'
2022-04-15 14:24:30 +00:00
await this.setNowPlayingMeta(song)
2022-04-15 14:24:30 +00:00
// Manually set the `src` attribute of the audio to prevent plyr from resetting
// the audio media object and cause our equalizer to malfunction.
2022-07-25 18:23:30 +00:00
this.player.media.src = songStore.getSourceUrl(song)
2022-04-15 14:24:30 +00:00
// We'll just "restart" playing the song, which will handle notification, scrobbling etc.
// Fixes #898
await this.restart()
}
private async setNowPlayingMeta(song) {
document.title = `${song.title} ♫ Koel`
this.player.media.setAttribute('title', `${song.artist_name} - ${song.title}`)
2022-04-15 14:24:30 +00:00
if (isAudioContextSupported) {
2022-11-02 19:25:22 +00:00
await audioService.context.resume()
2022-04-15 14:24:30 +00:00
}
2022-07-25 18:23:30 +00:00
}
2022-04-15 14:24:30 +00:00
2022-07-25 18:23:30 +00:00
public showNotification (song: Song) {
2022-10-31 14:55:24 +00:00
if (preferences.notify) {
try {
const notification = new window.Notification(`${song.title}`, {
icon: song.album_cover,
body: `${song.album_name} ${song.artist_name}`
})
notification.onclick = () => window.focus()
window.setTimeout(() => notification.close(), 5000)
} catch (e) {
// Notification fails.
// @link https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification
logger.error(e)
}
2022-04-15 14:24:30 +00:00
}
2022-10-31 14:55:24 +00:00
if (!navigator.mediaSession) return
2022-04-15 14:24:30 +00:00
2022-04-30 10:36:35 +00:00
navigator.mediaSession.metadata = new MediaMetadata({
title: song.title,
2022-06-10 10:47:46 +00:00
artist: song.artist_name,
album: song.album_name,
2022-10-31 14:55:24 +00:00
artwork: [48, 64, 96, 128, 192, 256, 384, 512].map(d => ({
src: song.album_cover,
sizes: `${d}x${d}`,
type: 'image/png'
}))
2022-04-30 10:36:35 +00:00
})
2022-07-25 18:23:30 +00:00
}
2022-04-15 14:24:30 +00:00
public setCurrentSongAndPlaybackPosition (song: Song, playbackPosition: number) {
if (queueStore.current) {
queueStore.current.playback_state = 'Stopped'
}
song.playback_state = 'Paused'
2022-04-15 14:24:30 +00:00
this.player.media.src = songStore.getSourceUrl(song)
this.player.seek(playbackPosition)
this.player.pause()
}
// Record the UNIX timestamp the song starts playing, for scrobbling purpose
private recordStartTime (song: Song) {
2022-06-10 10:47:46 +00:00
song.play_start_time = Math.floor(Date.now() / 1000)
song.play_count_registered = false
}
2022-04-15 14:24:30 +00:00
private broadcastSong (song: Song) {
socketService.broadcast('SOCKET_SONG', song)
}
public async restart () {
const song = queueStore.current!
this.recordStartTime(song)
this.broadcastSong(song)
try {
http.silently.put('queue/playback-status', {
song: song.id,
position: 0
})
} catch (error) {
logger.error(error)
}
2022-04-15 14:24:30 +00:00
2022-07-25 18:23:30 +00:00
this.player.restart()
2022-04-15 14:24:30 +00:00
try {
2022-07-25 18:23:30 +00:00
await this.player.media.play()
2022-10-31 14:55:24 +00:00
navigator.mediaSession && (navigator.mediaSession.playbackState = 'playing')
this.showNotification(song)
2022-04-15 14:24:30 +00:00
} catch (error) {
// convert this into a warning, as an error will cause Cypress to fail the tests entirely
2022-07-20 08:00:02 +00:00
logger.warn(error)
2022-04-15 14:24:30 +00:00
}
2022-07-25 18:23:30 +00:00
}
public get isTranscoding () {
return isMobile.any && preferences.transcodeOnMobile
}
2022-04-15 14:24:30 +00:00
/**
* The next song in the queue.
* If we're in REPEAT_ALL mode and there's no next song, just get the first song.
*/
2022-07-25 18:23:30 +00:00
public get next () {
2022-04-15 14:24:30 +00:00
if (queueStore.next) {
return queueStore.next
}
if (preferences.repeatMode === 'REPEAT_ALL') {
return queueStore.first
}
2022-07-25 18:23:30 +00:00
}
2022-04-15 14:24:30 +00:00
/**
* The previous song in the queue.
* If we're in REPEAT_ALL mode and there's no prev song, get the last song.
*/
2022-07-25 18:23:30 +00:00
public get previous () {
2022-04-15 14:24:30 +00:00
if (queueStore.previous) {
return queueStore.previous
}
if (preferences.repeatMode === 'REPEAT_ALL') {
return queueStore.last
}
2022-07-25 18:23:30 +00:00
}
2022-04-15 14:24:30 +00:00
/**
* Circle through the repeat mode.
* The selected mode will be stored into local storage as well.
*/
2022-07-25 18:23:30 +00:00
public changeRepeatMode () {
2022-04-15 14:24:30 +00:00
let index = this.repeatModes.indexOf(preferences.repeatMode) + 1
if (index >= this.repeatModes.length) {
index = 0
}
preferences.repeatMode = this.repeatModes[index]
2022-07-25 18:23:30 +00:00
}
2022-04-15 14:24:30 +00:00
/**
* Play the prev song in the queue, if one is found.
* If the prev song is not found and the current mode is NO_REPEAT, we stop completely.
*/
2022-07-25 18:23:30 +00:00
public async playPrev () {
2022-10-31 14:55:24 +00:00
// If the song's duration is greater than 5 seconds, and we've passed 5 seconds into it,
2022-04-15 14:24:30 +00:00
// restart playing instead.
2022-07-25 18:23:30 +00:00
if (this.player.media.currentTime > 5 && queueStore.current!.length > 5) {
this.player.restart()
2022-04-15 14:24:30 +00:00
return
}
if (!this.previous && preferences.repeatMode === 'NO_REPEAT') {
2022-06-10 10:47:46 +00:00
await this.stop()
2022-04-15 14:24:30 +00:00
} else {
2022-06-10 10:47:46 +00:00
this.previous && await this.play(this.previous)
2022-04-15 14:24:30 +00:00
}
2022-07-25 18:23:30 +00:00
}
2022-04-15 14:24:30 +00:00
/**
* Play the next song in the queue, if one is found.
* If the next song is not found and the current mode is NO_REPEAT, we stop completely.
*/
2022-07-25 18:23:30 +00:00
public async playNext () {
2022-04-15 14:24:30 +00:00
if (!this.next && preferences.repeatMode === 'NO_REPEAT') {
2022-06-10 10:47:46 +00:00
await this.stop() // Nothing lasts forever, even cold November rain.
2022-04-15 14:24:30 +00:00
} else {
2022-06-10 10:47:46 +00:00
this.next && await this.play(this.next)
2022-04-15 14:24:30 +00:00
}
2022-07-25 18:23:30 +00:00
}
2022-04-15 14:24:30 +00:00
2022-07-25 18:23:30 +00:00
public async stop () {
document.title = 'Koel'
2022-07-25 18:23:30 +00:00
this.player.pause()
this.player.seek(0)
2022-04-15 14:24:30 +00:00
2022-10-31 14:55:24 +00:00
queueStore.current && (queueStore.current.playback_state = 'Stopped')
navigator.mediaSession && (navigator.mediaSession.playbackState = 'none')
2022-04-15 14:24:30 +00:00
2022-04-24 08:50:45 +00:00
socketService.broadcast('SOCKET_PLAYBACK_STOPPED')
2022-07-25 18:23:30 +00:00
}
2022-04-15 14:24:30 +00:00
2022-07-25 18:23:30 +00:00
public pause () {
this.player.pause()
2022-10-31 14:55:24 +00:00
2022-06-10 10:47:46 +00:00
queueStore.current!.playback_state = 'Paused'
2022-10-31 14:55:24 +00:00
navigator.mediaSession && (navigator.mediaSession.playbackState = 'paused')
socketService.broadcast('SOCKET_SONG', queueStore.current)
2022-07-25 18:23:30 +00:00
}
2022-04-15 14:24:30 +00:00
2022-07-25 18:23:30 +00:00
public async resume () {
const song = queueStore.current!
if (!this.player.media.src) {
// on first load when the queue is loaded from saved state, the player's src is empty
// we need to properly set it as well as any kind of playback metadata
this.player.media.src = songStore.getSourceUrl(song)
this.player.seek(commonStore.state.queue_state.playback_position);
await this.setNowPlayingMeta(queueStore.current!)
this.recordStartTime(song)
}
2022-04-15 14:24:30 +00:00
try {
2022-07-25 18:23:30 +00:00
await this.player.media.play()
2022-04-15 14:24:30 +00:00
} catch (error) {
2022-07-20 08:00:02 +00:00
logger.error(error)
2022-04-15 14:24:30 +00:00
}
2022-06-10 10:47:46 +00:00
queueStore.current!.playback_state = 'Playing'
2022-10-31 14:55:24 +00:00
navigator.mediaSession && (navigator.mediaSession.playbackState = 'playing')
this.broadcastSong(song)
2022-07-25 18:23:30 +00:00
}
2022-04-15 14:24:30 +00:00
2022-07-25 18:23:30 +00:00
public async toggle () {
2022-04-15 14:24:30 +00:00
if (!queueStore.current) {
await this.playFirstInQueue()
return
}
2022-06-10 10:47:46 +00:00
if (queueStore.current.playback_state !== 'Playing') {
2022-04-15 14:24:30 +00:00
await this.resume()
return
}
this.pause()
2022-07-25 18:23:30 +00:00
}
2022-04-15 14:24:30 +00:00
/**
* Queue up songs (replace them into the queue) and start playing right away.
*
* @param {?Song[]} songs An array of song objects. Defaults to all songs if null.
* @param {Boolean=false} shuffled Whether to shuffle the songs before playing.
*/
2022-08-01 11:40:52 +00:00
public async queueAndPlay (songs: Song | Song[], shuffled = false) {
songs = arrayify(songs)
2022-04-15 14:24:30 +00:00
if (shuffled) {
songs = shuffle(songs)
}
2022-06-10 10:47:46 +00:00
await this.stop()
2022-04-15 14:24:30 +00:00
queueStore.replaceQueueWith(songs)
await this.play(queueStore.first)
2022-07-25 18:23:30 +00:00
}
2022-04-15 14:24:30 +00:00
2022-07-25 18:23:30 +00:00
public async playFirstInQueue () {
2022-06-10 10:47:46 +00:00
queueStore.all.length && await this.play(queueStore.first)
2022-04-15 14:24:30 +00:00
}
private setMediaSessionActionHandlers () {
2022-10-31 14:55:24 +00:00
if (!navigator.mediaSession) return
navigator.mediaSession.setActionHandler('play', () => this.resume())
navigator.mediaSession.setActionHandler('pause', () => this.pause())
2022-10-31 14:55:24 +00:00
navigator.mediaSession.setActionHandler('stop', () => this.stop())
navigator.mediaSession.setActionHandler('previoustrack', () => this.playPrev())
navigator.mediaSession.setActionHandler('nexttrack', () => this.playNext())
2022-10-31 14:55:24 +00:00
navigator.mediaSession.setActionHandler('seekbackward', details => {
this.player.media.currentTime -= (details.seekOffset || 10)
})
navigator.mediaSession.setActionHandler('seekforward', details => {
this.player.media.currentTime += (details.seekOffset || 10)
})
navigator.mediaSession.setActionHandler('seekto', details => {
if (details.fastSeek && 'fastSeek' in this.player.media) {
this.player.media.fastSeek(details.seekTime || 0)
return
}
this.player.media.currentTime = details.seekTime || 0
})
}
private listenToMediaEvents (media: HTMLMediaElement) {
media.addEventListener('error', () => this.playNext(), true)
media.addEventListener('ended', () => {
2024-01-04 11:35:36 +00:00
if (commonStore.state.uses_last_fm && userStore.current.preferences!.lastfm_session_key) {
songStore.scrobble(queueStore.current!)
}
preferences.repeatMode === 'REPEAT_ONE' ? this.restart() : this.playNext()
})
let timeUpdateHandler = () => {
const currentSong = queueStore.current
if (!currentSong) return
if (!currentSong.play_count_registered && !this.isTranscoding) {
// if we've passed 25% of the song, it's safe to say the song has been "played".
// Refer to https://github.com/koel/koel/issues/1087
if (!media.duration || media.currentTime * 4 >= media.duration) {
this.registerPlay(currentSong)
}
}
// every 5 seconds, we save the current playback position to the server
if (Math.ceil(media.currentTime) % 5 === 0) {
try {
http.silently.put('queue/playback-status', {
song: currentSong.id,
position: Math.ceil(media.currentTime)
})
} catch (error) {
logger.error(error)
}
}
const nextSong = queueStore.next
if (!nextSong || nextSong.preloaded || this.isTranscoding) {
return
}
if (media.duration && media.currentTime + PRELOAD_BUFFER > media.duration) {
this.preload(nextSong)
}
}
if (process.env.NODE_ENV !== 'test') {
timeUpdateHandler = throttle(timeUpdateHandler, 1000)
}
media.addEventListener('timeupdate', timeUpdateHandler)
}
2022-04-15 14:24:30 +00:00
}
2022-07-25 18:23:30 +00:00
export const playbackService = new PlaybackService()