Stream Key Button (#7127)

* Added streamkey button.

* Added streamkey button.

* Updated changes

* Removed unused code.

* Removed copyableStreamkeyUnmask component.

* Rewrote StreamKeyMask to enableMask/enableMaskType

* Updated changelog and bumped version to 0.51.3

* Reverted changes

* Updated to correct area.

* Renamed CopyableText to CopyableStreamKey

* See commit notes.

* Fixed Show/Hide button

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. ([#7127](https://github.com/lbryio/lbry-desktop/pull/7127))
 
 ## [0.51.2] - [2021-08-20]
 
@@ -1955,4 +1956,4 @@ This release includes a breaking change that will reset many of your settings. T
 
 - Use local file for publishing
 - Use local file and html5 for video playback
-- Misc changes needed to make UI compatible with electron.
+- Misc changes needed to make UI compatible with electron.

ui/component/copyableStreamkey/index.js

@@ -0,0 +1,7 @@
+import { connect } from 'react-redux';
+import { doToast } from 'redux/actions/notifications';
+import CopyableStreamkey from './view';
+
+export default connect(null, {
+  doToast,
+})(CopyableStreamkey);

ui/component/copyableStreamkey/view.jsx

@@ -0,0 +1,93 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import { FormField } from 'component/common/form';
+import Button from 'component/button';
+import React, { useRef, Fragment } from 'react';
+
+type Props = {
+  copyable: string,
+  snackMessage: ?string,
+  doToast: ({ message: string }) => void,
+  primaryButton?: boolean,
+  name?: string,
+  onCopy?: (string) => string,
+  enableMask?: boolean,
+};
+
+export default function CopyableStreamkey(props: Props) {
+  const { copyable, doToast, snackMessage, primaryButton = false, name, onCopy, enableMask = true } = props;
+
+  const input = useRef();
+
+  function copyToClipboard() {
+    const topRef = input.current;
+    if (topRef[1].type === 'password') {
+      navigator.clipboard.writeText(topRef[1].defaultValue);
+    }
+    if (topRef[1].type === 'text') {
+      topRef[1].select();
+      if (onCopy) {
+        onCopy(topRef[1]);
+      }
+    }
+
+    document.execCommand('copy');
+  }
+
+  function checkMaskType() {
+    if (enableMask === true) {
+      return 'password';
+    }
+    if (enableMask === false) {
+      return 'text';
+    }
+  }
+  function showStreamkeyFunc() {
+    const topRef = input.current;
+    if (topRef[1].type === 'password') {
+      topRef[1].type = 'text';
+      topRef[0].innerText = 'Hide';
+      return;
+    }
+    if (topRef[1].type === 'text') {
+      topRef[1].type = 'password';
+      topRef[0].innerText = 'Show';
+    }
+  }
+
+  return (
+    <Fragment>
+      <form ref={input}>
+        <div>
+          <label name="livestream-key">Stream key</label>{' '}
+          <Button
+            className="button--link"
+            label={__('Show')}
+            onClick={() => {
+              showStreamkeyFunc();
+            }}
+          />
+        </div>
+        <FormField
+          type={checkMaskType()}
+          className="form-field--copyable-streamkey"
+          readOnly
+          name={name}
+          value={copyable || ''}
+          inputButton={
+            <Button
+              button={primaryButton ? 'primary' : 'secondary'}
+              icon={ICONS.COPY}
+              onClick={() => {
+                copyToClipboard();
+                doToast({
+                  message: snackMessage || __('Text copied'),
+                });
+              }}
+            />
+          }
+        />
+      </form>
+    </Fragment>
+  );
+}

ui/page/livestreamSetup/view.jsx

@@ -13,6 +13,7 @@ import { Lbry } from 'lbry-redux';
 import { toHex } from 'util/hex';
 import { FormField } from 'component/common/form';
 import CopyableText from 'component/copyableText';
+import CopyableStreamkey from 'component/copyableStreamkey';
 import Card from 'component/common/card';
 import ClaimList from 'component/claimList';
 import usePersistedState from 'effects/use-persisted-state';
@@ -186,7 +187,7 @@ export default function LivestreamSetupPage(props: Props) {
                       copyable={LIVESTREAM_RTMP_URL}
                       snackMessage={__('Copied')}
                     />
-                    <CopyableText
+                    <CopyableStreamkey
                       primaryButton
                       name="livestream-key"
                       label={__('Stream key')}