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:
parent
de6eb99d41
commit
5c8878353f
4 changed files with 104 additions and 2 deletions
|
@ -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.
|
7
ui/component/copyableStreamkey/index.js
Normal file
7
ui/component/copyableStreamkey/index.js
Normal 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);
|
93
ui/component/copyableStreamkey/view.jsx
Normal file
93
ui/component/copyableStreamkey/view.jsx
Normal 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>
|
||||
);
|
||||
}
|
|
@ -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')}
|
||||
|
|
Loading…
Reference in a new issue