fetchimg video infos

src/constants/api.ts

@@ -33,4 +33,7 @@ export const API = {
   SEARCH: {
     NODES: '/search/nodes',
   },
+  EMBED: {
+    YOUTUBE: '/embed/youtube',
+  },
 };

src/redux/auth/sagas.ts

@@ -110,7 +110,6 @@ function* refreshUser() {
 function* checkUserSaga({ key }: RehydrateAction) {
   if (key !== 'auth') return;
   yield call(refreshUser);
-  // yield put(authOpenProfile("gvorcek", "settings"));
 }
 
 function* gotPostMessageSaga({ token }: ReturnType<typeof gotAuthPostMessage>) {

src/redux/player/actions.ts

@@ -1,6 +1,11 @@
 import { IPlayerState } from './reducer';
 import { PLAYER_ACTIONS } from './constants';
 
+export const playerSet = (player: Partial<IPlayerState>) => ({
+  type: PLAYER_ACTIONS.SET,
+  player,
+});
+
 export const playerSetFile = (file: IPlayerState['file']) => ({
   type: PLAYER_ACTIONS.SET_FILE,
   file,

src/redux/player/api.ts

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

src/redux/player/constants.ts

@@ -1,6 +1,8 @@
 const prefix = 'PLAYER.';
 
 export const PLAYER_ACTIONS = {
+  SET: `${prefix}SET`,
+
   SET_FILE: `${prefix}SET_FILE`,
   SET_FILE_AND_PLAY: `${prefix}SET_FILE_AND_PLAY`,
   SET_STATUS: `${prefix}SET_STATUS`,

src/redux/player/handlers.ts

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

src/redux/player/reducer.ts

@@ -1,17 +1,12 @@
 import { createReducer } from '~/utils/reducer';
 import { PLAYER_HANDLERS } from './handlers';
 import { PLAYER_STATES } from './constants';
-import { IFile } from '../types';
+import { IFile, IEmbed } from '../types';
-
-interface IYoutubeInfo {
-  title: string;
-  thumbnail: string;
-}
 
 export type IPlayerState = Readonly<{
   status: typeof PLAYER_STATES[keyof typeof PLAYER_STATES];
   file: IFile;
-  youtubes: Record<string, IYoutubeInfo>;
+  youtubes: Record<string, IEmbed>;
 }>;
 
 const INITIAL_STATE: IPlayerState = {

src/redux/player/sagas.ts

@@ -1,8 +1,17 @@
-import { takeLatest, put, fork, race, take, delay } from 'redux-saga/effects';
+import { takeLatest, put, fork, race, take, delay, call, select } from 'redux-saga/effects';
 import { PLAYER_ACTIONS, PLAYER_STATES } from './constants';
-import { playerSetFile, playerSeek, playerSetStatus, playerGetYoutubeInfo } from './actions';
+import {
+  playerSetFile,
+  playerSeek,
+  playerSetStatus,
+  playerGetYoutubeInfo,
+  playerSet,
+} from './actions';
 import { Player } from '~/utils/player';
 import { getURL } from '~/utils/dom';
+import { Unwrap } from '../types';
+import { getEmbedYoutube } from './api';
+import { selectPlayer } from './selectors';
 
 function* setFileAndPlaySaga({ file }: ReturnType<typeof playerSetFile>) {
   yield put(playerSetFile(file));
@@ -32,7 +41,7 @@ function* stoppedSaga() {
 }
 
 function* getYoutubeInfo() {
-  let ids = [];
+  let ids: string[] = [];
 
   while (true) {
     const {
@@ -48,7 +57,13 @@ function* getYoutubeInfo() {
     }
 
     if (ticker || ids.length > 25) {
-      // console.log('FETCHING!', ids);
+      const result: Unwrap<ReturnType<typeof getEmbedYoutube>> = yield call(getEmbedYoutube, ids);
+
+      if (!result.error && result.data.items && Object.keys(result.data.items).length) {
+        const { youtubes }: ReturnType<typeof selectPlayer> = yield select(selectPlayer);
+        yield put(playerSet({ youtubes: { ...youtubes, ...result.data.items } }));
+      }
+
       ids = [];
     }
   }

src/redux/types.ts

@@ -194,3 +194,14 @@ export type INodeNotification = {
 export type INotification = IMessageNotification | ICommentNotification;
 
 export type Unwrap<T> = T extends Promise<infer U> ? U : T;
+
+export interface IEmbed {
+  provider: string;
+  address: string;
+  id: number;
+  metadata: {
+    title: string;
+    thumb: string;
+    duration: string;
+  };
+}