From 66582178653f21f630193668b25063b56740c0f5 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Thu, 23 Sep 2021 17:50:43 +0800
Subject: [PATCH] Restore "Stream Key Button (#7127)" + lint and modifications

- Consolidate functionality into existing component.
- Use proper strings.
---
 CHANGELOG.md                       |  1 +
 static/app-strings.json            |  3 ++
 ui/component/copyableText/view.jsx | 51 ++++++++++++++++++------------
 ui/page/livestreamSetup/view.jsx   |  5 +--
 4 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ebd737be..f03f0d4b2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Clicking on the title of a floating player will take you back to the list ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
 - Fix floating player stopping on markdown or image files ([#7073](https://github.com/lbryio/lbry-desktop/pull/7073))
 - Fix list thumbnail upload ([#7074](https://github.com/lbryio/lbry-desktop/pull/7074))
+- Stream Key is now hidden _community pr!_ ([#7127](https://github.com/lbryio/lbry-desktop/pull/7127))
 
 ## [0.51.2] - [2021-08-20]
 
diff --git a/static/app-strings.json b/static/app-strings.json
index b73b0aa35..2449386a6 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -207,6 +207,9 @@
   "View": "View",
   "Edit": "Edit",
   "Copied": "Copied",
+  "Copied stream key.": "Copied stream key.",
+  "Copied stream server URL.": "Copied stream server URL.",
+  "Failed to copy.": "Failed to copy.",
   "The publisher has chosen to charge %lbc% to view this content. Your balance is currently too low to view it. Check out %reward_link% for free %lbc% or send more %lbc% to your wallet. You can also %buy_link% more %lbc%.": "The publisher has chosen to charge %lbc% to view this content. Your balance is currently too low to view it. Check out %reward_link% for free %lbc% or send more %lbc% to your wallet. You can also %buy_link% more %lbc%.",
   "Connecting...": "Connecting...",
   "Comments": "Comments",
diff --git a/ui/component/copyableText/view.jsx b/ui/component/copyableText/view.jsx
index 195d8070b..a02ea44cf 100644
--- a/ui/component/copyableText/view.jsx
+++ b/ui/component/copyableText/view.jsx
@@ -12,23 +12,38 @@ type Props = {
   primaryButton?: boolean,
   name?: string,
   onCopy?: (string) => string,
+  enableInputMask?: boolean,
 };
 
 export default function CopyableText(props: Props) {
-  const { copyable, doToast, snackMessage, label, primaryButton = false, name, onCopy } = props;
+  const { copyable, doToast, snackMessage, label, primaryButton = false, name, onCopy, enableInputMask } = props;
+  const [maskInput, setMaskInput] = React.useState(enableInputMask);
 
   const input = useRef();
 
-  function copyToClipboard() {
-    const topRef = input.current;
-    if (topRef && topRef.input && topRef.input.current) {
-      topRef.input.current.select();
-      if (onCopy) {
-        onCopy(topRef.input.current);
+  function handleCopyText() {
+    if (enableInputMask) {
+      navigator.clipboard
+        .writeText(copyable)
+        .then(() => {
+          doToast({ message: snackMessage || __('Text copied') });
+        })
+        .catch(() => {
+          doToast({ message: __('Failed to copy.'), isError: true });
+        });
+    } else {
+      const topRef = input.current;
+      if (topRef && topRef.input && topRef.input.current) {
+        topRef.input.current.select();
+        if (onCopy) {
+          // Allow clients to change the selection before making the copy.
+          onCopy(topRef.input.current);
+        }
       }
-    }
 
-    document.execCommand('copy');
+      document.execCommand('copy');
+      doToast({ message: snackMessage || __('Text copied') });
+    }
   }
 
   function onFocus() {
@@ -41,7 +56,7 @@ export default function CopyableText(props: Props) {
 
   return (
     <FormField
-      type="text"
+      type={maskInput ? 'password' : 'text'}
       className="form-field--copyable"
       readOnly
       name={name}
@@ -50,16 +65,12 @@ export default function CopyableText(props: Props) {
       ref={input}
       onFocus={onFocus}
       inputButton={
-        <Button
-          button={primaryButton ? 'primary' : 'secondary'}
-          icon={ICONS.COPY}
-          onClick={() => {
-            copyToClipboard();
-            doToast({
-              message: snackMessage || __('Text copied'),
-            });
-          }}
-        />
+        <Button button={primaryButton ? 'primary' : 'secondary'} icon={ICONS.COPY} onClick={handleCopyText} />
+      }
+      helper={
+        enableInputMask && (
+          <Button button="link" onClick={() => setMaskInput(!maskInput)} label={maskInput ? __('Show') : __('Hide')} />
+        )
       }
     />
   );
diff --git a/ui/page/livestreamSetup/view.jsx b/ui/page/livestreamSetup/view.jsx
index ab3e06f4f..62142021a 100644
--- a/ui/page/livestreamSetup/view.jsx
+++ b/ui/page/livestreamSetup/view.jsx
@@ -184,14 +184,15 @@ export default function LivestreamSetupPage(props: Props) {
                       name="stream-server"
                       label={__('Stream server')}
                       copyable={LIVESTREAM_RTMP_URL}
-                      snackMessage={__('Copied')}
+                      snackMessage={__('Copied stream server URL.')}
                     />
                     <CopyableText
                       primaryButton
+                      enableInputMask
                       name="livestream-key"
                       label={__('Stream key')}
                       copyable={streamKey}
-                      snackMessage={__('Copied')}
+                      snackMessage={__('Copied stream key.')}
                     />
                   </>
                 }