diff --git a/src/redux/player/api.ts b/src/redux/player/api.ts index 9f1c0936..57e73420 100644 --- a/src/redux/player/api.ts +++ b/src/redux/player/api.ts @@ -1,11 +1,8 @@ -import { IResultWithStatus, IEmbed } from '../types'; -import { api, resultMiddleware, errorMiddleware } from '~/utils/api'; +import { api, cleanResult } from '~/utils/api'; import { API } from '~/constants/api'; +import { ApiGetEmbedYoutubeResult } from '~/redux/player/types'; -export const getEmbedYoutube = ( - ids: string[] -): Promise }>> => +export const getEmbedYoutube = (ids: string[]) => api - .get(API.EMBED.YOUTUBE, { params: { ids: ids.join(',') } }) - .then(resultMiddleware) - .catch(errorMiddleware); + .get(API.EMBED.YOUTUBE, { params: { ids: ids.join(',') } }) + .then(cleanResult); diff --git a/src/redux/player/reducer.ts b/src/redux/player/reducer.ts index e8c88810..c0ebba7e 100644 --- a/src/redux/player/reducer.ts +++ b/src/redux/player/reducer.ts @@ -5,13 +5,13 @@ import { IFile, IEmbed } from '../types'; export type IPlayerState = Readonly<{ status: typeof PLAYER_STATES[keyof typeof PLAYER_STATES]; - file: IFile; + file?: IFile; youtubes: Record; }>; const INITIAL_STATE: IPlayerState = { status: PLAYER_STATES.UNSET, - file: null, + file: undefined, youtubes: {}, }; diff --git a/src/redux/player/sagas.ts b/src/redux/player/sagas.ts index d4a199d8..1b651e2a 100644 --- a/src/redux/player/sagas.ts +++ b/src/redux/player/sagas.ts @@ -14,7 +14,12 @@ import { getEmbedYoutube } from './api'; import { selectPlayer } from './selectors'; function* setFileAndPlaySaga({ file }: ReturnType) { + if (!file) { + return; + } + yield put(playerSetFile(file)); + Player.set(getURL(file)); Player.play(); } @@ -37,7 +42,7 @@ function seekSaga({ seek }: ReturnType) { function* stoppedSaga() { yield put(playerSetStatus(PLAYER_STATES.UNSET)); - yield put(playerSetFile(null)); + yield put(playerSetFile(undefined)); } function* getYoutubeInfo() { @@ -49,34 +54,38 @@ function* getYoutubeInfo() { ticker, }: { action: ReturnType; ticker: any } = yield race({ action: take(PLAYER_ACTIONS.GET_YOUTUBE_INFO), - ...(ids.length > 0 ? { ticker: delay(1000) } : {}), + ...(ids.length > 0 ? { ticker: delay(500) } : {}), }); if (action) { ids.push(action.url); } - if (ticker || ids.length > 25) { - const result: Unwrap = yield call(getEmbedYoutube, ids); + if (!ticker && ids.length <= 25) { + // Try to collect more items in next 500ms + continue; + } - if (!result.error && result.data.items && Object.keys(result.data.items).length) { + try { + const data: Unwrap = yield call(getEmbedYoutube, ids); + + if (data.items && Object.keys(data.items).length) { const { youtubes }: ReturnType = yield select(selectPlayer); - yield put(playerSet({ youtubes: { ...youtubes, ...result.data.items } })); + yield put(playerSet({ youtubes: { ...youtubes, ...data.items } })); } ids = []; - } + } catch {} } } export default function* playerSaga() { + yield fork(getYoutubeInfo); + 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); - - yield fork(getYoutubeInfo); - // yield takeEvery(PLAYER_ACTIONS.GET_YOUTUBE_INFO, getYoutubeInfo); } diff --git a/src/redux/player/types.ts b/src/redux/player/types.ts new file mode 100644 index 00000000..98e6f91d --- /dev/null +++ b/src/redux/player/types.ts @@ -0,0 +1,3 @@ +import { IEmbed } from '~/redux/types'; + +export type ApiGetEmbedYoutubeResult = { items: Record };