From c74ab019275b2e5845aed9edf96d412de1c054ec Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sun, 19 Apr 2020 11:55:27 +0700 Subject: [PATCH] fetchimg video infos --- src/constants/api.ts | 3 +++ src/redux/auth/sagas.ts | 1 - src/redux/player/actions.ts | 5 +++++ src/redux/player/api.ts | 11 +++++++++++ src/redux/player/constants.ts | 2 ++ src/redux/player/handlers.ts | 8 +++++++- src/redux/player/reducer.ts | 9 ++------- src/redux/player/sagas.ts | 23 +++++++++++++++++++---- src/redux/types.ts | 11 +++++++++++ 9 files changed, 60 insertions(+), 13 deletions(-) create mode 100644 src/redux/player/api.ts diff --git a/src/constants/api.ts b/src/constants/api.ts index 6464a302..c211d541 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -33,4 +33,7 @@ export const API = { SEARCH: { NODES: '/search/nodes', }, + EMBED: { + YOUTUBE: '/embed/youtube', + }, }; diff --git a/src/redux/auth/sagas.ts b/src/redux/auth/sagas.ts index 9664e4ea..a368c1da 100644 --- a/src/redux/auth/sagas.ts +++ b/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) { diff --git a/src/redux/player/actions.ts b/src/redux/player/actions.ts index 1da13480..e98e696f 100644 --- a/src/redux/player/actions.ts +++ b/src/redux/player/actions.ts @@ -1,6 +1,11 @@ import { IPlayerState } from './reducer'; import { PLAYER_ACTIONS } from './constants'; +export const playerSet = (player: Partial) => ({ + type: PLAYER_ACTIONS.SET, + player, +}); + export const playerSetFile = (file: IPlayerState['file']) => ({ type: PLAYER_ACTIONS.SET_FILE, file, diff --git a/src/redux/player/api.ts b/src/redux/player/api.ts new file mode 100644 index 00000000..9f1c0936 --- /dev/null +++ b/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 }>> => + api + .get(API.EMBED.YOUTUBE, { params: { ids: ids.join(',') } }) + .then(resultMiddleware) + .catch(errorMiddleware); diff --git a/src/redux/player/constants.ts b/src/redux/player/constants.ts index 9dda64aa..b05a9d94 100644 --- a/src/redux/player/constants.ts +++ b/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`, diff --git a/src/redux/player/handlers.ts b/src/redux/player/handlers.ts index a83fb08e..4644dfca 100644 --- a/src/redux/player/handlers.ts +++ b/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) => assocPath(['file'], file, state); @@ -8,7 +8,13 @@ const setFile = (state, { file }: ReturnType) => const setStatus = (state, { status }: ReturnType) => assocPath(['status'], status, state); +const setPlayer = (state, { player }: ReturnType) => ({ + ...state, + ...player, +}); + export const PLAYER_HANDLERS = { [PLAYER_ACTIONS.SET_FILE]: setFile, [PLAYER_ACTIONS.SET_STATUS]: setStatus, + [PLAYER_ACTIONS.SET]: setPlayer, }; diff --git a/src/redux/player/reducer.ts b/src/redux/player/reducer.ts index 70080b44..e8c88810 100644 --- a/src/redux/player/reducer.ts +++ b/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'; - -interface IYoutubeInfo { - title: string; - thumbnail: string; -} +import { IFile, IEmbed } from '../types'; export type IPlayerState = Readonly<{ status: typeof PLAYER_STATES[keyof typeof PLAYER_STATES]; file: IFile; - youtubes: Record; + youtubes: Record; }>; const INITIAL_STATE: IPlayerState = { diff --git a/src/redux/player/sagas.ts b/src/redux/player/sagas.ts index 1a21879f..36e4b8b4 100644 --- a/src/redux/player/sagas.ts +++ b/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) { 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> = yield call(getEmbedYoutube, ids); + + if (!result.error && result.data.items && Object.keys(result.data.items).length) { + const { youtubes }: ReturnType = yield select(selectPlayer); + yield put(playerSet({ youtubes: { ...youtubes, ...result.data.items } })); + } + ids = []; } } diff --git a/src/redux/types.ts b/src/redux/types.ts index fa0bea30..d846b750 100644 --- a/src/redux/types.ts +++ b/src/redux/types.ts @@ -194,3 +194,14 @@ export type INodeNotification = { export type INotification = IMessageNotification | ICommentNotification; export type Unwrap = T extends Promise ? U : T; + +export interface IEmbed { + provider: string; + address: string; + id: number; + metadata: { + title: string; + thumb: string; + duration: string; + }; +}