LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

livestream replay upload styling

Browse source
This commit is contained in:
zeppi 2021-04-12 18:06:49 -04:00 • committed by Thomas Zarebczan
parent 9b6ffa404b
commit 39cc35f669
No known key found for this signature in database
GPG key ID: D505010BDB4364BC
2 changed files with 70 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
ui/component/publishFile/view.jsx
View file

@ -15,6 +15,7 @@ import usePersistedState from 'effects/use-persisted-state';
import * as PUBLISH_MODES from 'constants/publish_types'; import * as PUBLISH_MODES from 'constants/publish_types';
import PublishName from 'component/publishName'; import PublishName from 'component/publishName';
import CopyableText from 'component/copyableText'; import CopyableText from 'component/copyableText';
import Empty from 'component/common/empty';
import moment from 'moment'; import moment from 'moment';
import classnames from 'classnames'; import classnames from 'classnames';
import ReactPaginate from 'react-paginate'; import ReactPaginate from 'react-paginate';
@ -45,7 +46,6 @@ type Props = {
header: Node, header: Node,
livestreamData: LivestreamReplayData, livestreamData: LivestreamReplayData,
isLivestreamClaim: boolean, isLivestreamClaim: boolean,
remoteUrl?: string,
checkLivestreams: () => void, checkLivestreams: () => void,
isCheckingLivestreams: boolean, isCheckingLivestreams: boolean,
}; };
@ -76,7 +76,6 @@ function PublishFile(props: Props) {
livestreamData, livestreamData,
isLivestreamClaim, isLivestreamClaim,
subtitle, subtitle,
remoteUrl,
checkLivestreams, checkLivestreams,
isCheckingLivestreams, isCheckingLivestreams,
} = props; } = props;
@ -109,11 +108,11 @@ function PublishFile(props: Props) {
const fileSelectorModes = [ const fileSelectorModes = [
{ label: __('Choose Replay'), actionName: SOURCE_SELECT, icon: ICONS.MENU }, { label: __('Choose Replay'), actionName: SOURCE_SELECT, icon: ICONS.MENU },
{ label: __('Upload'), actionName: SOURCE_UPLOAD, icon: ICONS.PUBLISH }, { label: __('Upload'), actionName: SOURCE_UPLOAD, icon: ICONS.PUBLISH },
{ label: __('None'), actionName: SOURCE_NONE, icon: ICONS.REMOVE }, { label: __('None'), actionName: SOURCE_NONE },
]; ];
const hasLivestreamData = livestreamData && Boolean(livestreamData.length); const hasLivestreamData = livestreamData && Boolean(livestreamData.length);
const showSourceSelector = isLivestreamClaim && hasLivestreamData; const showSourceSelector = isLivestreamClaim;
const [fileSelectSource, setFileSelectSource] = useState( const [fileSelectSource, setFileSelectSource] = useState(
IS_WEB && showSourceSelector ? SOURCE_SELECT : SOURCE_UPLOAD IS_WEB && showSourceSelector ? SOURCE_SELECT : SOURCE_UPLOAD
@ -227,13 +226,6 @@ function PublishFile(props: Props) {
} }
} }
function getSourceMessage() {
if (remoteUrl || filePath) {
return __('Replay selected for update');
} else {
return __('No replay selected');
}
}
function getUploadMessage() { function getUploadMessage() {
// @if TARGET='web' // @if TARGET='web'
if (oversized) { if (oversized) {
@ -470,14 +462,14 @@ function PublishFile(props: Props) {
<> <>
{showSourceSelector && ( {showSourceSelector && (
<fieldset-section> <fieldset-section>
<div className="section__actions--between"> <div className="section__actions--between section__actions--align-bottom">
<div> <div>
<label>{__('Add replay video')}</label> <label>{__('Add replay video')}</label>
<div> <div className="button-group">
{fileSelectorModes.map((fmode) => ( {fileSelectorModes.map((fmode) => (
<Button <Button
key={fmode.label} key={fmode.label}
icon={fmode.icon} icon={fmode.icon || undefined}
iconSize={18} iconSize={18}
label={fmode.label} label={fmode.label}
button="alt" button="alt"
@ -491,15 +483,16 @@ function PublishFile(props: Props) {
/> />
))} ))}
</div> </div>
<div className="help--inline">{getSourceMessage()}</div>
</div> </div>
<Button {fileSelectSource === SOURCE_SELECT && (
button="secondary" <Button
label={__('Check for Replays')} button="secondary"
disabled={isCheckingLivestreams} label={__('Check for Replays')}
icon={ICONS.REFRESH} disabled={isCheckingLivestreams}
onClick={() => checkLivestreams()} icon={ICONS.REFRESH}
/> onClick={() => checkLivestreams()}
/>
)}
</div> </div>
</fieldset-section> </fieldset-section>
)} )}
@ -518,58 +511,54 @@ function PublishFile(props: Props) {
{getUploadMessage()} {getUploadMessage()}
</> </>
)} )}
{fileSelectSource === SOURCE_SELECT && showFileUpload && ( {fileSelectSource === SOURCE_SELECT && showFileUpload && hasLivestreamData && (
<> <>
<fieldset-section> <fieldset-section>
<label>{__('Select Replay')}</label> <label>{__('Select Replay')}</label>
<div className="table__wrapper"> <div className="table__wrapper">
<table className="table table--livestream-data"> <table className="table table--livestream-data">
<tbody> <tbody>
{livestreamData && {livestreamData.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE).map((item, i) => (
livestreamData <tr
.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE) onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)}
.map((item, i) => ( key={item.id}
<tr className={classnames('livestream__data-row', {
'livestream__data-row--selected': selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i,
})}
>
<td>
<FormField
type="radio"
checked={selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i}
label={null}
onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)} onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)}
key={item.id} className="livestream__data-row-radio"
className={classnames('livestream__data-row', { />
'livestream__data-row--selected': </td>
selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i, <td>
})} <div className="livestream_thumb_container">
> {item.data.thumbnails.slice(0, 3).map((thumb) => (
<td> <img key={thumb} className="livestream___thumb" src={thumb} />
<FormField ))}
type="radio" </div>
checked={selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i} </td>
label={null} <td>
onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)} {`${Math.floor(item.data.fileDuration / 60)} ${
className="livestream__data-row-radio" Math.floor(item.data.fileDuration / 60) > 1 ? __('minutes') : __('minute')
/> }`}
</td> <div className="table__item-label">
<td> {`${moment(item.data.uploadedAt).from(moment())}`}
<div className="livestream_thumb_container"> </div>
{item.data.thumbnails.slice(0, 3).map((thumb) => ( </td>
<img key={thumb} className="livestream___thumb" src={thumb} /> <td>
))} <CopyableText
</div> primaryButton
</td> copyable={normalizeUrlForProtocol(item.data.fileLocation)}
<td> snackMessage={__('Url copied.')}
{`${Math.floor(item.data.fileDuration / 60)} ${ />
Math.floor(item.data.fileDuration / 60) > 1 ? __('minutes') : __('minute') </td>
}`} </tr>
<div className="table__item-label"> ))}
{`${moment(item.data.uploadedAt).from(moment())}`}
</div>
</td>
<td>
<CopyableText
primaryButton
copyable={normalizeUrlForProtocol(item.data.fileLocation)}
snackMessage={__('Url copied.')}
/>
</td>
</tr>
))}
</tbody> </tbody>
</table> </table>
</div> </div>
@ -596,6 +585,16 @@ function PublishFile(props: Props) {
</fieldset-group> </fieldset-group>
</> </>
)} )}
{fileSelectSource === SOURCE_SELECT && showFileUpload && !hasLivestreamData && !isCheckingLivestreams && (
<div className="main--empty empty">
<Empty text={__('No replays found.')} />
</div>
)}
{fileSelectSource === SOURCE_SELECT && showFileUpload && !hasLivestreamData && isCheckingLivestreams && (
<div className="main--empty empty">
<Spinner small />
</div>
)}
</> </>
{/* @endif */} {/* @endif */}
{/* @if TARGET='app' */} {/* @if TARGET='app' */}

4
ui/scss/component/section.scss
View file

@ -172,6 +172,10 @@
} }
} }
.section__actions--align-bottom {
align-items: flex-end;
}
.section__actions--no-margin { .section__actions--no-margin {
@extend .section__actions; @extend .section__actions;
margin-top: 0; margin-top: 0;