diff --git a/CHANGELOG.md b/CHANGELOG.md index 2ebd737be..143ac994f 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. ([#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. \ No newline at end of file diff --git a/ui/component/copyableStreamkey/index.js b/ui/component/copyableStreamkey/index.js new file mode 100644 index 000000000..9646cfbfb --- /dev/null +++ b/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); diff --git a/ui/component/copyableStreamkey/view.jsx b/ui/component/copyableStreamkey/view.jsx new file mode 100644 index 000000000..14164bf18 --- /dev/null +++ b/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 ( + +
+
+ {' '} +
+ { + copyToClipboard(); + doToast({ + message: snackMessage || __('Text copied'), + }); + }} + /> + } + /> + +
+ ); +} diff --git a/ui/page/livestreamSetup/view.jsx b/ui/page/livestreamSetup/view.jsx index ab3e06f4f..e535751a0 100644 --- a/ui/page/livestreamSetup/view.jsx +++ b/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')} /> -