player: refactored sagas

src/redux/player/api.ts

@@ -1,11 +1,8 @@
-import { IResultWithStatus, IEmbed } from '../types';
+import { api, cleanResult } from '~/utils/api';
-import { api, resultMiddleware, errorMiddleware } from '~/utils/api';
 import { API } from '~/constants/api';
+import { ApiGetEmbedYoutubeResult } from '~/redux/player/types';
 
-export const getEmbedYoutube = (
+export const getEmbedYoutube = (ids: string[]) =>
-  ids: string[]
-): Promise<IResultWithStatus<{ items: Record<string, IEmbed> }>> =>
   api
-    .get(API.EMBED.YOUTUBE, { params: { ids: ids.join(',') } })
+    .get<ApiGetEmbedYoutubeResult>(API.EMBED.YOUTUBE, { params: { ids: ids.join(',') } })
-    .then(resultMiddleware)
+    .then(cleanResult);
-    .catch(errorMiddleware);

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<string, IEmbed>;
 }>;
 
 const INITIAL_STATE: IPlayerState = {
   status: PLAYER_STATES.UNSET,
-  file: null,
+  file: undefined,
   youtubes: {},
 };
 

src/redux/player/sagas.ts

@@ -14,7 +14,12 @@ import { getEmbedYoutube } from './api';
 import { selectPlayer } from './selectors';
 
 function* setFileAndPlaySaga({ file }: ReturnType<typeof playerSetFile>) {
+  if (!file) {
+    return;
+  }
+
   yield put(playerSetFile(file));
+
   Player.set(getURL(file));
   Player.play();
 }
@@ -37,7 +42,7 @@ function seekSaga({ seek }: ReturnType<typeof playerSeek>) {
 
 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<typeof playerGetYoutubeInfo>; 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) {
+    if (!ticker && ids.length <= 25) {
-      const result: Unwrap<typeof getEmbedYoutube> = yield call(getEmbedYoutube, ids);
+      // 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<typeof getEmbedYoutube> = yield call(getEmbedYoutube, ids);
+
+      if (data.items && Object.keys(data.items).length) {
         const { youtubes }: ReturnType<typeof selectPlayer> = 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);
 }

src/redux/player/types.ts

@@ -0,0 +1,3 @@
+import { IEmbed } from '~/redux/types';
+
+export type ApiGetEmbedYoutubeResult = { items: Record<string, IEmbed> };