Restore "Stream Key Button (#7127)" + lint and modifications

- Consolidate functionality into existing component.
- Use proper strings.

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]
 

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",

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')} />
+        )
       }
     />
   );

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.')}
                     />
                   </>
                 }