Collecting youtube ids for fetching

src/components/comment/CommentEmbedBlock/index.tsx

@@ -1,20 +1,42 @@
 import React, { FC, memo, useMemo } from 'react';
 import { ICommentBlock } from '~/constants/comment';
 import styles from './styles.scss';
-import { getYoutubeTitle, getYoutubeThumb } from '~/utils/dom';
+import { getYoutubeThumb } from '~/utils/dom';
-import { Icon } from '~/components/input/Icon';
+import { selectPlayer } from '~/redux/player/selectors';
+import { connect } from 'react-redux';
+import * as PLAYER_ACTIONS from '~/redux/player/actions';
 
-interface IProps {
+const mapStateToProps = state => ({
+  youtubes: selectPlayer(state).youtubes,
+});
+
+const mapDispatchToProps = {
+  playerGetYoutubeInfo: PLAYER_ACTIONS.playerGetYoutubeInfo,
+};
+
+type Props = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps & {
     block: ICommentBlock;
-}
+  };
 
-const CommentEmbedBlock: FC<IProps> = memo(({ block }) => {
+const CommentEmbedBlockUnconnected: FC<Props> = memo(
-  const link = block.content.match(
+  ({ block, youtubes, playerGetYoutubeInfo }) => {
-    /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-\&\=]+)/gi
+    const link = useMemo(
+      () =>
+        block.content.match(
+          /https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?([\w\-\=]+)/
+        ),
+      [block.content]
     );
 
     const preview = useMemo(() => getYoutubeThumb(block.content), [block.content]);
 
+    useMemo(() => {
+      if (!link[5] || youtubes[link[5]]) return;
+
+      playerGetYoutubeInfo(link[5]);
+    }, [playerGetYoutubeInfo]);
+
     return (
       <div className={styles.embed}>
         <a href={link[0]} target="_blank" />
@@ -26,6 +48,12 @@ const CommentEmbedBlock: FC<IProps> = memo(({ block }) => {
         </div>
       </div>
     );
-});
+  }
+);
+
+const CommentEmbedBlock = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CommentEmbedBlockUnconnected);
 
 export { CommentEmbedBlock };

src/redux/player/actions.ts

@@ -36,3 +36,8 @@ export const playerSeek = (seek: number) => ({
   type: PLAYER_ACTIONS.SEEK,
   seek,
 });
+
+export const playerGetYoutubeInfo = (url: string) => ({
+  type: PLAYER_ACTIONS.GET_YOUTUBE_INFO,
+  url,
+});

src/redux/player/constants.ts

@@ -10,6 +10,8 @@ export const PLAYER_ACTIONS = {
   SEEK: `${prefix}SEEK`,
   STOP: `${prefix}STOP`,
   STOPPED: `${prefix}STOPPED`,
+
+  GET_YOUTUBE_INFO: `${prefix}GET_YOUTUBE_INFO`,
 };
 
 export const PLAYER_STATES = {

src/redux/player/sagas.ts

@@ -1,6 +1,6 @@
-import { takeLatest, put } from 'redux-saga/effects';
+import { takeLatest, put, fork, race, take, delay } from 'redux-saga/effects';
 import { PLAYER_ACTIONS, PLAYER_STATES } from './constants';
-import { playerSetFile, playerSeek, playerSetStatus } from './actions';
+import { playerSetFile, playerSeek, playerSetStatus, playerGetYoutubeInfo } from './actions';
 import { Player } from '~/utils/player';
 import { getURL } from '~/utils/dom';
 
@@ -31,6 +31,29 @@ function* stoppedSaga() {
   yield put(playerSetFile(null));
 }
 
+function* getYoutubeInfo() {
+  let ids = [];
+
+  while (true) {
+    const {
+      action,
+      ticker,
+    }: { action: ReturnType<typeof playerGetYoutubeInfo>; ticker: any } = yield race({
+      action: take(PLAYER_ACTIONS.GET_YOUTUBE_INFO),
+      ...(ids.length > 0 ? { ticker: delay(1000) } : {}),
+    });
+
+    if (action) {
+      ids.push(action.url);
+    }
+
+    if (ticker || ids.length > 25) {
+      // console.log('FETCHING!', ids);
+      ids = [];
+    }
+  }
+}
+
 export default function* playerSaga() {
   yield takeLatest(PLAYER_ACTIONS.SET_FILE_AND_PLAY, setFileAndPlaySaga);
   yield takeLatest(PLAYER_ACTIONS.PAUSE, pauseSaga);
@@ -38,4 +61,7 @@ export default function* playerSaga() {
   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);
 }