feat: 保存player状态到本地存储

This commit is contained in:
qier222 2022-04-05 23:02:37 +08:00
parent 49bb849982
commit abedbe7531
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
2 changed files with 27 additions and 10 deletions

View file

@ -1,6 +1,6 @@
import { proxy, subscribe } from 'valtio' import { proxy, subscribe } from 'valtio'
import { devtools } from 'valtio/utils' import { devtools } from 'valtio/utils'
import { player as PlayerCore } from '@/utils/player' import { Player } from '@/utils/player'
interface Store { interface Store {
uiStates: { uiStates: {
@ -28,8 +28,12 @@ subscribe(state, () => {
localStorage.setItem('state', JSON.stringify(state)) localStorage.setItem('state', JSON.stringify(state))
}) })
export const player = proxy(PlayerCore) const playerInLocalStorage = localStorage.getItem('player')
player.init() export const player = proxy(new Player())
player.init((playerInLocalStorage && JSON.parse(playerInLocalStorage)) || {})
subscribe(player, () => {
localStorage.setItem('player', JSON.stringify(player))
})
if (import.meta.env.DEV) { if (import.meta.env.DEV) {
;(window as any).player = player ;(window as any).player = player

View file

@ -57,8 +57,21 @@ export class Player {
repeatMode: RepeatMode = RepeatMode.OFF repeatMode: RepeatMode = RepeatMode.OFF
fmTrack: Track | null = null fmTrack: Track | null = null
init() { init(params: { [key: string]: any }) {
if (params._track) this._track = params._track
if (params._trackIndex) this._trackIndex = params._trackIndex
if (params._volume) this._volume = params._volume
if (params.state) this.trackList = params.state
if (params.mode) this.mode = params.mode
if (params.trackList) this.trackList = params.trackList
if (params.trackListSource) this.trackListSource = params.trackListSource
if (params.fmTrackList) this.fmTrackList = params.fmTrackList
if (params.shuffle) this.shuffle = params.shuffle
if (params.repeatMode) this.repeatMode = params.repeatMode
if (params.fmTrack) this.fmTrack = params.fmTrack
this.state = State.READY this.state = State.READY
this._playAudio(false) // just load the audio, not play
this._initFM() this._initFM()
} }
@ -189,7 +202,7 @@ export class Player {
/** /**
* Play audio via howler * Play audio via howler
*/ */
private async _playAudio() { private async _playAudio(autoplay: boolean = true) {
this._progress = 0 this._progress = 0
const { audio, id } = await this._fetchAudioSource(this.trackID) const { audio, id } = await this._fetchAudioSource(this.trackID)
if (!audio) { if (!audio) {
@ -202,13 +215,15 @@ export class Player {
src: [`${audio}?id=${id}`], src: [`${audio}?id=${id}`],
format: ['mp3', 'flac'], format: ['mp3', 'flac'],
html5: true, html5: true,
autoplay: true, autoplay,
volume: 1, volume: 1,
onend: () => this._howlerOnEndCallback(), onend: () => this._howlerOnEndCallback(),
}) })
_howler = howler _howler = howler
this.play() if (autoplay) {
this.state = State.PLAYING this.play()
this.state = State.PLAYING
}
_howler.once('load', () => { _howler.once('load', () => {
this._cacheAudio((_howler as any)._src) this._cacheAudio((_howler as any)._src)
}) })
@ -428,8 +443,6 @@ export class Player {
} }
} }
export const player = new Player()
if (import.meta.env.DEV) { if (import.meta.env.DEV) {
;(window as any).howler = _howler ;(window as any).howler = _howler
} }