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

livestream related publish fixes

Browse source
This commit is contained in:
zeppi 2021-04-14 11:56:45 -04:00 committed by jessopb
parent 0653dbde04
commit 9b82f57006
7 changed files with 155 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -112,17 +112,17 @@ function PublishFile(props: Props) {
);
const fileSelectorModes = [
{ label: __('Choose Replay'), actionName: SOURCE_SELECT, icon: ICONS.MENU },
{ label: __('Upload'), actionName: SOURCE_UPLOAD, icon: ICONS.PUBLISH },
{ label: __('Choose Replay'), actionName: SOURCE_SELECT, icon: ICONS.MENU },
{ label: __('None'), actionName: SOURCE_NONE },
];
const livestreamDataStr = JSON.stringify(livestreamData);
const hasLivestreamData = livestreamData && Boolean(livestreamData.length);
const showSourceSelector = isLivestreamClaim;
const showSourceSelector = isLivestreamClaim || (hasLivestreamData && mode === PUBLISH_MODES.FILE);
const [fileSelectSource, setFileSelectSource] = useState(
IS_WEB && showSourceSelector ? SOURCE_SELECT : SOURCE_UPLOAD
IS_WEB && showSourceSelector && name ? SOURCE_SELECT : SOURCE_UPLOAD
);
// const [showFileUpdate, setShowFileUpdate] = useState(false);
const [selectedFileIndex, setSelectedFileIndex] = useState(null);
@ -437,7 +437,7 @@ function PublishFile(props: Props) {
updatePublishForm(publishFormParams);
}
const showFileUpload = mode === PUBLISH_MODES.FILE || (mode === PUBLISH_MODES.LIVESTREAM && hasLivestreamData);
const showFileUpload = mode === PUBLISH_MODES.FILE;
const isPublishPost = mode === PUBLISH_MODES.POST;
return (
@ -474,7 +474,7 @@ function PublishFile(props: Props) {
<fieldset-section>
<div className="section__actions--between section__actions--align-bottom">
<div>
<label>{__('Add replay video')}</label>
<label>{__('Replay video available')}</label>
<div className="button-group">
{fileSelectorModes.map((fmode) => (
<Button

29
ui/component/publishForm/view.jsx
View file

@ -130,6 +130,7 @@ function PublishForm(props: Props) {
const urlParams = new URLSearchParams(location.search);
const TYPE_PARAM = 'type';
const uploadType = urlParams.get(TYPE_PARAM);
const _uploadType = uploadType && uploadType.toLowerCase();
const enableLivestream =
ENABLE_NO_SOURCE_CLAIMS &&
user &&
@ -137,6 +138,7 @@ function PublishForm(props: Props) {
(activeChannelStakedLevel >= CHANNEL_STAKED_LEVEL_LIVESTREAM || user.odysee_live_enabled);
// $FlowFixMe
const AVAILABLE_MODES = Object.values(PUBLISH_MODES).filter((mode) => {
// $FlowFixMe
if (editingURI) {
if (isPostClaim) {
return mode === PUBLISH_MODES.POST;
@ -145,11 +147,10 @@ function PublishForm(props: Props) {
} else {
return mode === PUBLISH_MODES.FILE;
}
} else if (_uploadType) {
return mode === _uploadType && (mode !== PUBLISH_MODES.LIVESTREAM || enableLivestream);
} else {
if (mode === PUBLISH_MODES.LIVESTREAM) {
return enableLivestream;
}
return true;
return mode !== PUBLISH_MODES.LIVESTREAM || enableLivestream;
}
});
@ -159,7 +160,7 @@ function PublishForm(props: Props) {
[PUBLISH_MODES.LIVESTREAM]: 'Livestream --[noun, livestream tab button]--',
};
const [mode, setMode] = React.useState(uploadType || PUBLISH_MODES.FILE);
const [mode, setMode] = React.useState(_uploadType || PUBLISH_MODES.FILE);
const [isCheckingLivestreams, setCheckingLivestreams] = React.useState(false);
let customSubtitle;
@ -208,7 +209,9 @@ function PublishForm(props: Props) {
myClaimForUri && myClaimForUri.value && myClaimForUri.value.source
? myClaimForUri.value.source.media_type
: undefined;
const claimChannelId = myClaimForUri && myClaimForUri.signing_channel && myClaimForUri.signing_channel.claim_id;
const claimChannelId =
(myClaimForUri && myClaimForUri.signing_channel && myClaimForUri.signing_channel.claim_id) ||
(activeChannelClaim && activeChannelClaim.claim_id);
const nameEdited = isStillEditing && name !== prevName;
@ -283,10 +286,10 @@ function PublishForm(props: Props) {
useEffect(() => {
const signedMessage = JSON.parse(signedMessageStr);
if (claimChannelId && isLivestreamClaim && signedMessage.signature) {
if (claimChannelId && signedMessage.signature) {
fetchLivestreams(claimChannelId, signedMessage.signature, signedMessage.signing_ts);
}
}, [claimChannelId, isLivestreamClaim, signedMessageStr]);
}, [claimChannelId, signedMessageStr]);
const isLivestreamMode = mode === PUBLISH_MODES.LIVESTREAM;
let submitLabel;
@ -395,8 +398,6 @@ function PublishForm(props: Props) {
// set mode based on urlParams 'type'
useEffect(() => {
const _uploadType = uploadType && uploadType.toLowerCase();
// Default to standard file publish if none specified
if (!_uploadType) {
setMode(PUBLISH_MODES.FILE);
@ -425,15 +426,15 @@ function PublishForm(props: Props) {
// Default to standard file publish
setMode(PUBLISH_MODES.FILE);
}, [uploadType, enableLivestream]);
}, [_uploadType, enableLivestream]);
// if we have a type urlparam, update it? necessary?
useEffect(() => {
if (!uploadType) return;
if (!_uploadType) return;
const newParams = new URLSearchParams();
newParams.set(TYPE_PARAM, mode.toLowerCase());
replace({ search: newParams.toString() });
}, [mode, uploadType]);
}, [mode, _uploadType]);
// @if TARGET='web'
function createWebFile() {
@ -575,7 +576,7 @@ function PublishForm(props: Props) {
{!publishing && (
<div className={classnames({ 'card--disabled': formDisabled })}>
{mode === PUBLISH_MODES.FILE && <PublishDescription disabled={formDisabled} />}
{mode !== PUBLISH_MODES.POST && <PublishDescription disabled={formDisabled} />}
<Card actions={<SelectThumbnail livestreamdData={livestreamData} />} />
<TagsSelect
suggestMature={!SIMPLE_SITE}

6
ui/constants/publish_types.js
View file

@ -1,3 +1,3 @@
export const FILE = 'File';
export const POST = 'Post';
export const LIVESTREAM = 'Livestream';
export const FILE = 'file';
export const POST = 'post';
export const LIVESTREAM = 'livestream';

4
ui/page/home/view.jsx
View file

@ -81,7 +81,7 @@ function HomePage(props: Props) {
)}
{rowData.map(({ title, route, link, icon, help, options = {} }, index) => (
<div key={title} className="claim-grid__wrapper">
{title && (
{index !== 0 && title && typeof title === 'string' && (
<h1 className="claim-grid__header">
<Button navigate={route || link} button="link">
{icon && <Icon className="claim-grid__header-icon" sectionIcon icon={icon} size={20} />}
@ -92,7 +92,7 @@ function HomePage(props: Props) {
)}
<ClaimTilesDiscover {...options} />
{link && (
{(route || link) && (
<Button
className="claim-grid__title--secondary"
button="link"

12
ui/page/livestreamSetup/index.js
View file

@ -1,7 +1,8 @@
import { connect } from 'react-redux';
import { selectMyChannelClaims, selectFetchingMyChannels, selectPendingClaims } from 'lbry-redux';
import { selectMyChannelClaims, selectFetchingMyChannels, selectPendingClaims, doClearPublish } from 'lbry-redux';
import { selectActiveChannelClaim } from 'redux/selectors/app';
import LivestreamSetupPage from './view';
import { push } from 'connected-react-router';
const select = (state) => ({
channels: selectMyChannelClaims(state),
@ -9,5 +10,10 @@ const select = (state) => ({
activeChannelClaim: selectActiveChannelClaim(state),
pendingClaims: selectPendingClaims(state),
});
export default connect(select)(LivestreamSetupPage);
const perform = (dispatch) => ({
doNewLivestream: (path) => {
dispatch(doClearPublish());
dispatch(push(path));
},
});
export default connect(select, perform)(LivestreamSetupPage);

130
ui/page/livestreamSetup/view.jsx
View file

@ -2,6 +2,7 @@
import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons';
import * as PUBLISH_MODES from 'constants/publish_types';
import I18nMessage from 'component/i18nMessage';
import React from 'react';
import Page from 'component/page';
import Spinner from 'component/spinner';
@ -15,17 +16,19 @@ import CopyableText from 'component/copyableText';
import Card from 'component/common/card';
import ClaimList from 'component/claimList';
import usePersistedState from 'effects/use-persisted-state';
import usePrevious from 'effects/use-previous';
type Props = {
channels: Array<ChannelClaim>,
fetchingChannels: boolean,
activeChannelClaim: ?ChannelClaim,
pendingClaims: Array<Claim>,
doNewLivestream: (string) => void,
};
export default function LivestreamSetupPage(props: Props) {
const LIVESTREAM_CLAIM_POLL_IN_MS = 60000;
const { channels, fetchingChannels, activeChannelClaim, pendingClaims } = props;
const { channels, fetchingChannels, activeChannelClaim, pendingClaims, doNewLivestream } = props;
const [sigData, setSigData] = React.useState({ signature: undefined, signing_ts: undefined });
const [showHelpTest, setShowHelpTest] = usePersistedState('livestream-help-seen', true);
@ -50,8 +53,18 @@ export default function LivestreamSetupPage(props: Props) {
claim.value_type === 'stream' && !(claim.value && claim.value.source)
)
: [];
const [localPending, setLocalPending] = React.useState([]); //
const localPendingStr = JSON.stringify(localPending);
const pendingLivestreamClaimsStr = JSON.stringify(pendingLiveStreamClaims);
const prevPendingLiveStreamClaimStr = usePrevious(pendingLivestreamClaimsStr);
const liveStreamClaimsStr = JSON.stringify(livestreamClaims);
const prevLiveStreamClaimsStr = JSON.stringify(liveStreamClaimsStr);
const pendingLength = pendingLiveStreamClaims.length;
const totalLivestreamClaims = pendingLiveStreamClaims.concat(livestreamClaims);
const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
const localPendingForChannel = localPending.filter(
(claim) => claim.signing_channel && claim.signing_channel.claim_id === activeChannelId
);
const helpText = (
<div className="section__subtitle">
<p>
@ -110,16 +123,53 @@ export default function LivestreamSetupPage(props: Props) {
}
}, [activeChannelClaimStr, setSigData]);
// The following 2 effects handle the time between pending disappearing and claim_search being able to find it.
// We'll maintain our own pending list:
// add to it when there are new things in pending
// remove items only when our claim_search finds it
React.useEffect(() => {
let checkClaimsInterval;
if (!activeChannelClaimStr) return;
const channelClaim = JSON.parse(activeChannelClaimStr);
// add to localPending when pending changes
const localPending = JSON.parse(localPendingStr);
const pendingLivestreamClaims = JSON.parse(pendingLivestreamClaimsStr);
if (
pendingLiveStreamClaims !== prevPendingLiveStreamClaimStr ||
(pendingLivestreamClaims.length && !localPending.length)
) {
const prevPendingLivestreamClaims = prevPendingLiveStreamClaimStr
? JSON.parse(prevPendingLiveStreamClaimStr)
: [];
const pendingClaimIds = pendingLivestreamClaims.map((claim) => claim.claim_id);
const prevPendingClaimIds = prevPendingLivestreamClaims.map((claim) => claim.claim_id);
const newLocalPending = [];
if (pendingClaimIds.length > prevPendingClaimIds.length) {
pendingLivestreamClaims.forEach((pendingClaim) => {
if (!localPending.some((lClaim) => lClaim.claim_id === pendingClaim.claim_id)) {
newLocalPending.push(pendingClaim);
}
});
setLocalPending(localPending.concat(newLocalPending));
}
}
}, [pendingLivestreamClaimsStr, prevPendingLiveStreamClaimStr, localPendingStr, setLocalPending]);
function checkLivestreamClaims() {
React.useEffect(() => {
// remove from localPending when livestreamClaims found
const localPending = JSON.parse(localPendingStr);
if (liveStreamClaimsStr !== prevLiveStreamClaimsStr && localPending.length) {
const livestreamClaims = JSON.parse(liveStreamClaimsStr);
setLocalPending(
localPending.filter((pending) => !livestreamClaims.some((claim) => claim.claim_id === pending.claim_id))
);
}
}, [liveStreamClaimsStr, prevLiveStreamClaimsStr, localPendingStr, setLocalPending]);
const checkLivestreams = React.useCallback(
function checkLivestreamClaims(channelClaimId, setLivestreamClaims, setSpin) {
Lbry.claim_search({
channel_ids: [channelClaim.claim_id],
channel_ids: [channelClaimId],
has_no_source: true,
claim_type: ['stream'],
include_purchase_receipt: true,
})
.then((res) => {
if (res && res.items && res.items.length > 0) {
@ -133,17 +183,27 @@ export default function LivestreamSetupPage(props: Props) {
setLivestreamClaims([]);
setSpin(false);
});
}
},
[activeChannelId]
);
React.useEffect(() => {
let checkClaimsInterval;
if (!activeChannelClaimStr) return;
const channelClaim = JSON.parse(activeChannelClaimStr);
if (!checkClaimsInterval) {
checkLivestreamClaims();
checkClaimsInterval = setInterval(checkLivestreamClaims, LIVESTREAM_CLAIM_POLL_IN_MS);
checkLivestreams(channelClaim.claim_id, setLivestreamClaims, setSpin);
checkClaimsInterval = setInterval(
() => checkLivestreams(channelClaim.claim_id, setLivestreamClaims, setSpin),
LIVESTREAM_CLAIM_POLL_IN_MS
);
}
return () => {
if (checkClaimsInterval) {
clearInterval(checkClaimsInterval);
}
};
}, [activeChannelClaimStr, pendingLength, setSpin]);
}, [activeChannelClaimStr, pendingLength, setSpin, checkLivestreams]);
return (
<Page>
@ -189,6 +249,7 @@ export default function LivestreamSetupPage(props: Props) {
)}
{streamKey && totalLivestreamClaims.length > 0 && (
<Card
className="section"
title={__('Your stream key')}
actions={
<>
@ -212,22 +273,65 @@ export default function LivestreamSetupPage(props: Props) {
)}
{totalLivestreamClaims.length > 0 ? (
<>
{Boolean(localPendingForChannel.length) && (
<div className="section">
<ClaimList
header={__('Your pending livestream uploads')}
uris={localPendingForChannel.map((claim) => claim.permanent_url)}
/>
</div>
)}
{Boolean(livestreamClaims.length) && (
<div className="section">
<ClaimList
header={__('Your livestream uploads')}
uris={totalLivestreamClaims.map((claim) => claim.permanent_url)}
empty={
<I18nMessage
tokens={{
check_again: (
<Button
button="link"
onClick={() => checkLivestreams(activeChannelId, setLivestreamClaims, setSpin)}
label={__('Check again')}
/>
),
}}
>
Nothing here yet. %check_again%
</I18nMessage>
}
uris={livestreamClaims
.filter((c) => !pendingLiveStreamClaims.some((p) => p.permanent_url === c.permanent_url))
.map((claim) => claim.permanent_url)}
/>
</div>
)}
</>
) : (
<Yrbl
className="livestream__publish-intro"
title={__('No livestream publishes found')}
subtitle={__('You need to upload your livestream details before you can go live.')}
subtitle={__(
'You need to upload your livestream details before you can go live. If you already created one in this channel, it should appear soon.'
)}
actions={
<div className="section__actions">
<Button
button="primary"
navigate={`/$/${PAGES.UPLOAD}?type=${PUBLISH_MODES.LIVESTREAM.toLowerCase()}`}
onClick={() =>
doNewLivestream(`/$/${PAGES.UPLOAD}?type=${PUBLISH_MODES.LIVESTREAM.toLowerCase()}`)
}
label={__('Create A Livestream')}
/>
<Button
button="alt"
onClick={() => {
setSpin(true);
checkLivestreams(activeChannelId, setLivestreamClaims, setSpin);
}}
label={__('Check again...')}
/>
</div>
}
/>

2
ui/scss/component/_livestream.scss
View file

@ -257,7 +257,7 @@
}
&:nth-child(n) {
&.livestream__data-row--selected {
background-color: var(--color-input-toggle-bg-hover);
background-color: var(--color-button-toggle-bg);
}
}
td {