From 7b70db4ea7a0b24b40e78ca8c35eccc10458f416 Mon Sep 17 00:00:00 2001
From: saltrafael <a657ee92-7eb9-46eb-97d2-6735799df838@aleeas.com>
Date: Fri, 20 Aug 2021 07:28:38 -0300
Subject: [PATCH] Add Replay Option to autoplayCountdown

---
 ui/component/autoplayCountdown/view.jsx             | 13 +++++++++++++
 .../viewers/videoViewer/internal/videojs.jsx        |  9 +++++++++
 ui/component/viewers/videoViewer/view.jsx           |  5 ++++-
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/ui/component/autoplayCountdown/view.jsx b/ui/component/autoplayCountdown/view.jsx
index 31f2cc4bd..9be2a80f3 100644
--- a/ui/component/autoplayCountdown/view.jsx
+++ b/ui/component/autoplayCountdown/view.jsx
@@ -7,6 +7,8 @@ import { formatLbryUrlForWeb } from 'util/url';
 import { withRouter } from 'react-router';
 import debounce from 'util/debounce';
 import { COLLECTIONS_CONSTS } from 'lbry-redux';
+import * as ICONS from 'constants/icons';
+
 const DEBOUNCE_SCROLL_HANDLER_MS = 150;
 const CLASSNAME_AUTOPLAY_COUNTDOWN = 'autoplay-countdown';
 
@@ -19,6 +21,7 @@ type Props = {
   doPlayUri: (string) => void,
   modal: { id: string, modalProps: {} },
   collectionId?: string,
+  setReplay: (boolean) => void,
 };
 
 function AutoplayCountdown(props: Props) {
@@ -31,6 +34,7 @@ function AutoplayCountdown(props: Props) {
     history: { push },
     modal,
     collectionId,
+    setReplay,
   } = props;
   const nextTitle = nextRecommendedClaim && nextRecommendedClaim.value && nextRecommendedClaim.value.title;
 
@@ -142,6 +146,15 @@ function AutoplayCountdown(props: Props) {
               <Button label={__('Cancel')} button="link" onClick={() => setTimerCanceled(true)} />
             </div>
           )}
+          <Button
+            label={__('Replay?')}
+            button="link"
+            iconRight={ICONS.REPLAY}
+            onClick={() => {
+              setTimerCanceled(true);
+              setReplay(true);
+            }}
+          />
         </div>
       </div>
     </div>
diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx
index a3fcc48de..fb91099d1 100644
--- a/ui/component/viewers/videoViewer/internal/videojs.jsx
+++ b/ui/component/viewers/videoViewer/internal/videojs.jsx
@@ -59,6 +59,7 @@ type Props = {
   userId: ?number,
   // allowPreRoll: ?boolean,
   shareTelemetry: boolean,
+  replay: boolean,
 };
 
 // type VideoJSOptions = {
@@ -197,6 +198,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     userId,
     // allowPreRoll,
     shareTelemetry,
+    replay,
   } = props;
 
   const [reload, setReload] = useState('initial');
@@ -601,6 +603,13 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     return vjs;
   }
 
+  useEffect(() => {
+    const player = playerRef.current;
+    if (replay && player) {
+      player.play();
+    }
+  }, [replay]);
+
   // This lifecycle hook is only called once (on mount), or when `isAudio` changes.
   useEffect(() => {
     const vjsElement = createVideoPlayerDOM(containerRef.current);
diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx
index e8617d57d..be8aa49db 100644
--- a/ui/component/viewers/videoViewer/view.jsx
+++ b/ui/component/viewers/videoViewer/view.jsx
@@ -108,6 +108,7 @@ function VideoViewer(props: Props) {
   /* isLoading was designed to show loading screen on first play press, rather than completely black screen, but
   breaks because some browsers (e.g. Firefox) block autoplay but leave the player.play Promise pending */
   const [isLoading, setIsLoading] = useState(false);
+  const [replay, setReplay] = useState(false);
 
   // force everything to recent when URI changes, can cause weird corner cases otherwise (e.g. navigate while autoplay is true)
   useEffect(() => {
@@ -174,6 +175,7 @@ function VideoViewer(props: Props) {
     setIsPlaying(true);
     setShowAutoplayCountdown(false);
     setIsEndededEmbed(false);
+    setReplay(false);
     analytics.videoIsPlaying(true, player);
   }
 
@@ -285,7 +287,7 @@ function VideoViewer(props: Props) {
       })}
       onContextMenu={stopContextMenu}
     >
-      {showAutoplayCountdown && <AutoplayCountdown uri={uri} />}
+      {showAutoplayCountdown && <AutoplayCountdown uri={uri} setReplay={setReplay} />}
       {isEndededEmbed && <FileViewerEmbeddedEnded uri={uri} />}
       {embedded && !isEndededEmbed && <FileViewerEmbeddedTitle uri={uri} />}
       {/* disable this loading behavior because it breaks when player.play() promise hangs */}
@@ -336,6 +338,7 @@ function VideoViewer(props: Props) {
           userId={userId}
           allowPreRoll={!embedded && !authenticated}
           shareTelemetry={shareTelemetry}
+          replay={replay}
         />
       )}
     </div>