AudioPlayer initial

src/redux/player/actions.ts

@@ -0,0 +1,20 @@
+import { IPlayerState } from './reducer';
+import { PLAYER_ACTIONS } from './constants';
+
+export const playerSetFile = (file: IPlayerState['file']) => ({
+  type: PLAYER_ACTIONS.SET_FILE,
+  file,
+});
+
+export const playerSetStatus = (status: IPlayerState['status']) => ({
+  type: PLAYER_ACTIONS.SET_STATUS,
+  status,
+});
+
+export const playerPlay = () => ({
+  type: PLAYER_ACTIONS.PLAY,
+});
+
+export const playerPause = () => ({
+  type: PLAYER_ACTIONS.PAUSE,
+});

src/redux/player/constants.ts

@@ -0,0 +1,15 @@
+const prefix = 'PLAYER.';
+
+export const PLAYER_ACTIONS = {
+  SET_FILE: `${prefix}SET_FILE`,
+  SET_STATUS: `${prefix}SET_STATUS`,
+
+  PLAY: `${prefix}PLAY`,
+  PAUSE: `${prefix}PAUSE`,
+};
+
+export const PLAYER_STATES = {
+  PLAYING: 'PLAYING',
+  PAUSED: 'PAUSED',
+  UNSET: 'UNSET',
+};

src/redux/player/handlers.ts

@@ -0,0 +1,14 @@
+import { PLAYER_ACTIONS } from './constants';
+import assocPath from 'ramda/es/assocPath';
+import { playerSetFile, playerSetStatus } from './actions';
+
+const setFile = (state, { file }: ReturnType<typeof playerSetFile>) =>
+  assocPath(['file'], file, state);
+
+const setStatus = (state, { status }: ReturnType<typeof playerSetStatus>) =>
+  assocPath(['status'], status, state);
+
+export const PLAYER_HANDLERS = {
+  [PLAYER_ACTIONS.SET_FILE]: setFile,
+  [PLAYER_ACTIONS.SET_STATUS]: setStatus,
+};

src/redux/player/reducer.ts

@@ -0,0 +1,16 @@
+import { createReducer } from '~/utils/reducer';
+import { PLAYER_HANDLERS } from './handlers';
+import { PLAYER_STATES } from './constants';
+import { IFile } from '../types';
+
+export type IPlayerState = Readonly<{
+  status: typeof PLAYER_STATES[keyof typeof PLAYER_STATES];
+  file: IFile;
+}>;
+
+const INITIAL_STATE: IPlayerState = {
+  status: PLAYER_STATES.UNSET,
+  file: null,
+};
+
+export default createReducer(INITIAL_STATE, PLAYER_HANDLERS);

src/redux/player/sagas.ts

@@ -0,0 +1,24 @@
+import { takeLatest } from 'redux-saga/effects';
+import { PLAYER_ACTIONS } from './constants';
+import { playerSetFile } from './actions';
+import { Player } from '~/utils/player';
+import { getURL } from '~/utils/dom';
+
+function setFileSaga({ file }: ReturnType<typeof playerSetFile>) {
+  Player.set(getURL(file));
+  Player.play();
+}
+
+function playSaga() {
+  Player.play();
+}
+
+function pauseSaga() {
+  Player.pause();
+}
+
+export default function* playerSaga() {
+  yield takeLatest(PLAYER_ACTIONS.SET_FILE, setFileSaga);
+  yield takeLatest(PLAYER_ACTIONS.PAUSE, pauseSaga);
+  yield takeLatest(PLAYER_ACTIONS.PLAY, playSaga);
+}

src/redux/player/selectors.ts

@@ -0,0 +1,3 @@
+import { IState } from '~/redux/store';
+
+export const selectPlayer = (state: IState) => state.player;

src/redux/store.ts

@@ -19,6 +19,9 @@ import flowSaga from '~/redux/flow/sagas';
 import uploadReducer, { IUploadState } from '~/redux/uploads/reducer';
 import uploadSaga from '~/redux/uploads/sagas';
 
+import playerReducer, { IPlayerState } from '~/redux/player/reducer';
+import playerSaga from '~/redux/player/sagas';
+
 import { IAuthState } from '~/redux/auth/types';
 
 import modalReducer, { IModalState } from '~/redux/modal/reducer';
@@ -36,6 +39,7 @@ export interface IState {
   node: INodeState;
   uploads: IUploadState;
   flow: IFlowState;
+  player: IPlayerState;
 }
 
 export const sagaMiddleware = createSagaMiddleware();
@@ -54,6 +58,7 @@ export const store = createStore(
     node: nodeReducer,
     uploads: uploadReducer,
     flow: flowReducer,
+    player: playerReducer,
   }),
   composeEnhancers(applyMiddleware(routerMiddleware(history), sagaMiddleware))
 );
@@ -63,6 +68,7 @@ export function configureStore(): { store: Store<IState>; persistor: Persistor }
   sagaMiddleware.run(nodeSaga);
   sagaMiddleware.run(uploadSaga);
   sagaMiddleware.run(flowSaga);
+  sagaMiddleware.run(playerSaga);
 
   const persistor = persistStore(store);