mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 21:06:42 +07:00
better audio player
This commit is contained in:
parent
87b9b5f514
commit
c84dfdd2ab
7 changed files with 54 additions and 14 deletions
|
@ -6,6 +6,11 @@ export const playerSetFile = (file: IPlayerState['file']) => ({
|
|||
file,
|
||||
});
|
||||
|
||||
export const playerSetFileAndPlay = (file: IPlayerState['file']) => ({
|
||||
type: PLAYER_ACTIONS.SET_FILE_AND_PLAY,
|
||||
file,
|
||||
});
|
||||
|
||||
export const playerSetStatus = (status: IPlayerState['status']) => ({
|
||||
type: PLAYER_ACTIONS.SET_STATUS,
|
||||
status,
|
||||
|
@ -19,6 +24,14 @@ export const playerPause = () => ({
|
|||
type: PLAYER_ACTIONS.PAUSE,
|
||||
});
|
||||
|
||||
export const playerStop = () => ({
|
||||
type: PLAYER_ACTIONS.STOP,
|
||||
});
|
||||
|
||||
export const playerStopped = () => ({
|
||||
type: PLAYER_ACTIONS.STOPPED,
|
||||
});
|
||||
|
||||
export const playerSeek = (seek: number) => ({
|
||||
type: PLAYER_ACTIONS.SEEK,
|
||||
seek,
|
||||
|
|
|
@ -2,11 +2,14 @@ const prefix = 'PLAYER.';
|
|||
|
||||
export const PLAYER_ACTIONS = {
|
||||
SET_FILE: `${prefix}SET_FILE`,
|
||||
SET_FILE_AND_PLAY: `${prefix}SET_FILE_AND_PLAY`,
|
||||
SET_STATUS: `${prefix}SET_STATUS`,
|
||||
|
||||
PLAY: `${prefix}PLAY`,
|
||||
PAUSE: `${prefix}PAUSE`,
|
||||
SEEK: `${prefix}SEEK`,
|
||||
STOP: `${prefix}STOP`,
|
||||
STOPPED: `${prefix}STOPPED`,
|
||||
};
|
||||
|
||||
export const PLAYER_STATES = {
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
import { takeLatest } from 'redux-saga/effects';
|
||||
import { PLAYER_ACTIONS } from './constants';
|
||||
import { playerSetFile, playerSeek } from './actions';
|
||||
import { takeLatest, put } from 'redux-saga/effects';
|
||||
import { PLAYER_ACTIONS, PLAYER_STATES } from './constants';
|
||||
import { playerSetFile, playerSeek, playerSetStatus } from './actions';
|
||||
import { Player } from '~/utils/player';
|
||||
import { getURL } from '~/utils/dom';
|
||||
|
||||
function setFileSaga({ file }: ReturnType<typeof playerSetFile>) {
|
||||
function* setFileAndPlaySaga({ file }: ReturnType<typeof playerSetFile>) {
|
||||
yield put(playerSetFile(file));
|
||||
Player.set(getURL(file));
|
||||
Player.play();
|
||||
}
|
||||
|
@ -17,13 +18,24 @@ function pauseSaga() {
|
|||
Player.pause();
|
||||
}
|
||||
|
||||
function stopSaga() {
|
||||
Player.stop();
|
||||
}
|
||||
|
||||
function seekSaga({ seek }: ReturnType<typeof playerSeek>) {
|
||||
Player.jumpToPercent(seek * 100);
|
||||
}
|
||||
|
||||
function* stoppedSaga() {
|
||||
yield put(playerSetStatus(PLAYER_STATES.UNSET));
|
||||
yield put(playerSetFile(null));
|
||||
}
|
||||
|
||||
export default function* playerSaga() {
|
||||
yield takeLatest(PLAYER_ACTIONS.SET_FILE, setFileSaga);
|
||||
yield takeLatest(PLAYER_ACTIONS.SET_FILE_AND_PLAY, setFileAndPlaySaga);
|
||||
yield takeLatest(PLAYER_ACTIONS.PAUSE, pauseSaga);
|
||||
yield takeLatest(PLAYER_ACTIONS.PLAY, playSaga);
|
||||
yield takeLatest(PLAYER_ACTIONS.SEEK, seekSaga);
|
||||
yield takeLatest(PLAYER_ACTIONS.STOP, stopSaga);
|
||||
yield takeLatest(PLAYER_ACTIONS.STOPPED, stoppedSaga);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue