From aefa889ee4a8e1b0dc4af178a93c9555bd4953b5 Mon Sep 17 00:00:00 2001
From: infinite-persistence
 <64950861+infinite-persistence@users.noreply.github.com>
Date: Tue, 21 Sep 2021 23:48:05 +0800
Subject: [PATCH] Embed: add replay button + msg resizing (#7141)

* Embed: add replay button

Also, changed "Rewatch or Discuss" to "Discuss + external arrow" since there is a dedicated re-watch button.

* Embed: resize "ended message" based on container height
---
 static/app-strings.json                       |  1 +
 ui/scss/component/_file-render.scss           | 10 +++++++++-
 .../fileViewerEmbeddedEnded/view.jsx          | 19 ++++++++++++++++---
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index e1abc146d..b73b0aa35 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -2169,5 +2169,6 @@
   "Content Page": "Content Page",
   "Card Last 4": "Card Last 4",
   "Search blocked channel name": "Search blocked channel name",
+  "Discuss": "Discuss",
   "--end--": "--end--"
 }
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index 83b8995ca..d43615d91 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -196,7 +196,11 @@
 }
 
 .file-viewer_embed-ended-title {
-  white-space: pre-wrap;
+  max-width: 100%;
+  p {
+    font-size: 6vh;
+    white-space: pre-wrap;
+  }
 }
 
 .content__viewer--floating {
@@ -231,6 +235,10 @@
   .button + .button {
     margin-left: var(--spacing-m);
   }
+
+  .button--link {
+    vertical-align: middle;
+  }
 }
 
 .file-viewer__overlay-logo {
diff --git a/web/component/fileViewerEmbeddedEnded/view.jsx b/web/component/fileViewerEmbeddedEnded/view.jsx
index d56a77f27..d365146b5 100644
--- a/web/component/fileViewerEmbeddedEnded/view.jsx
+++ b/web/component/fileViewerEmbeddedEnded/view.jsx
@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import Button from 'component/button';
+import * as ICONS from 'constants/icons';
 import { formatLbryUrlForWeb } from 'util/url';
 import { withRouter } from 'react-router';
 import { URL, SITE_NAME } from 'config';
@@ -34,6 +35,7 @@ function FileViewerEmbeddedEnded(props: Props) {
   // $FlowFixMe
   const prompt = prompts[promptKey];
   const lbrytvLink = `${URL}${formatLbryUrlForWeb(uri)}?src=${promptKey}`;
+  const showReplay = Boolean(window.player);
 
   return (
     <div className="file-viewer__overlay">
@@ -44,11 +46,22 @@ function FileViewerEmbeddedEnded(props: Props) {
       </div>
       {!preferEmbed && (
         <>
-          <div className="file-viewer__overlay-title file-viewer_embed-ended-title">{prompt}</div>
+          <div className="file-viewer__overlay-title file-viewer_embed-ended-title">
+            <p>{prompt}</p>
+          </div>
           <div className="file-viewer__overlay-actions">
-            { /* add button to replay? */ }
             <>
-              <Button label={__('Rewatch or Discuss')} button="primary" href={lbrytvLink} />
+              {showReplay && (
+                <Button
+                  title={__('Replay')}
+                  button="link"
+                  iconRight={ICONS.REPLAY}
+                  onClick={() => {
+                    if (window.player) window.player.play();
+                  }}
+                />
+              )}
+              <Button label={__('Discuss')} iconRight={ICONS.EXTERNAL} button="primary" href={lbrytvLink} />
               {!isAuthenticated && (
                 <Button
                   label={__('Join %SITE_NAME%', { SITE_NAME })}