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
This commit is contained in:
GG2015 2021-09-23 02:17:59 -04:00 committed by GitHub
parent de6eb99d41
commit 5c8878353f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 104 additions and 2 deletions

View file

@ -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.

View file

@ -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);

View file

@ -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>
);
}

View file

@ -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')}