From 2b757a07a24a103afbe2683aceefc60891b6c734 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 18 Apr 2020 22:33:59 +0700
Subject: [PATCH] Collecting youtube ids for fetching

---
 .../comment/CommentEmbedBlock/index.tsx       | 76 +++++++++++++------
 src/redux/player/actions.ts                   |  5 ++
 src/redux/player/constants.ts                 |  2 +
 src/redux/player/sagas.ts                     | 30 +++++++-
 4 files changed, 87 insertions(+), 26 deletions(-)

diff --git a/src/components/comment/CommentEmbedBlock/index.tsx b/src/components/comment/CommentEmbedBlock/index.tsx
index dd4e8e98..34b10e6c 100644
--- a/src/components/comment/CommentEmbedBlock/index.tsx
+++ b/src/components/comment/CommentEmbedBlock/index.tsx
@@ -1,31 +1,59 @@
 import React, { FC, memo, useMemo } from 'react';
 import { ICommentBlock } from '~/constants/comment';
 import styles from './styles.scss';
-import { getYoutubeTitle, getYoutubeThumb } from '~/utils/dom';
-import { Icon } from '~/components/input/Icon';
+import { getYoutubeThumb } from '~/utils/dom';
+import { selectPlayer } from '~/redux/player/selectors';
+import { connect } from 'react-redux';
+import * as PLAYER_ACTIONS from '~/redux/player/actions';
 
-interface IProps {
-  block: ICommentBlock;
-}
-
-const CommentEmbedBlock: FC<IProps> = memo(({ block }) => {
-  const link = block.content.match(
-    /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-\&\=]+)/gi
-  );
-
-  const preview = useMemo(() => getYoutubeThumb(block.content), [block.content]);
-
-  return (
-    <div className={styles.embed}>
-      <a href={link[0]} target="_blank" />
-
-      <div className={styles.preview}>
-        <div style={{ backgroundImage: `url("${preview}")` }}>
-          <div className={styles.backdrop}>{link[0]}</div>
-        </div>
-      </div>
-    </div>
-  );
+const mapStateToProps = state => ({
+  youtubes: selectPlayer(state).youtubes,
 });
 
+const mapDispatchToProps = {
+  playerGetYoutubeInfo: PLAYER_ACTIONS.playerGetYoutubeInfo,
+};
+
+type Props = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps & {
+    block: ICommentBlock;
+  };
+
+const CommentEmbedBlockUnconnected: FC<Props> = memo(
+  ({ block, youtubes, playerGetYoutubeInfo }) => {
+    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" />
+
+        <div className={styles.preview}>
+          <div style={{ backgroundImage: `url("${preview}")` }}>
+            <div className={styles.backdrop}>{link[0]}</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+const CommentEmbedBlock = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CommentEmbedBlockUnconnected);
+
 export { CommentEmbedBlock };
diff --git a/src/redux/player/actions.ts b/src/redux/player/actions.ts
index fc242e2b..1da13480 100644
--- a/src/redux/player/actions.ts
+++ b/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,
+});
diff --git a/src/redux/player/constants.ts b/src/redux/player/constants.ts
index ab36ee61..9dda64aa 100644
--- a/src/redux/player/constants.ts
+++ b/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 = {
diff --git a/src/redux/player/sagas.ts b/src/redux/player/sagas.ts
index 28b24354..1a21879f 100644
--- a/src/redux/player/sagas.ts
+++ b/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);
 }