LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-09-20 18:09:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

43
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,8 +483,8 @@ function PublishFile(props: Props) {
/> />
))} ))}
</div> </div>
<div className="help--inline">{getSourceMessage()}</div>
</div> </div>
{fileSelectSource === SOURCE_SELECT && (
<Button <Button
button="secondary" button="secondary"
label={__('Check for Replays')} label={__('Check for Replays')}
@ -500,6 +492,7 @@ function PublishFile(props: Props) {
icon={ICONS.REFRESH} icon={ICONS.REFRESH}
onClick={() => checkLivestreams()} onClick={() => checkLivestreams()}
/> />
)}
</div> </div>
</fieldset-section> </fieldset-section>
)} )}
@ -518,23 +511,19 @@ 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
.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
.map((item, i) => (
<tr <tr
onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)} onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)}
key={item.id} key={item.id}
className={classnames('livestream__data-row', { className={classnames('livestream__data-row', {
'livestream__data-row--selected': 'livestream__data-row--selected': selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i,
selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i,
})} })}
> >
<td> <td>
@ -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;