Improve livestream external embeds
This commit is contained in:
parent
b096aad70e
commit
b7f9152dca
5 changed files with 104 additions and 44 deletions
|
@ -94,8 +94,6 @@ type Props = {
|
|||
fetchModAmIList: () => void,
|
||||
};
|
||||
|
||||
export const SocketContext = React.createContext<any>();
|
||||
|
||||
function App(props: Props) {
|
||||
const {
|
||||
theme,
|
||||
|
@ -139,8 +137,6 @@ function App(props: Props) {
|
|||
const previousHasVerifiedEmail = usePrevious(hasVerifiedEmail);
|
||||
const previousRewardApproved = usePrevious(isRewardApproved);
|
||||
|
||||
const [socketConnected, setSocketConnection] = React.useState(false);
|
||||
|
||||
const [gdprRequired, setGdprRequired] = usePersistedState('gdprRequired');
|
||||
const [localeLangs, setLocaleLangs] = React.useState();
|
||||
const [localeSwitchDismissed] = usePersistedState('locale-switch-dismissed', false);
|
||||
|
@ -567,13 +563,11 @@ function App(props: Props) {
|
|||
/>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<SocketContext.Provider value={socketConnected}>
|
||||
<Router />
|
||||
</SocketContext.Provider>
|
||||
<ModalRouter />
|
||||
<React.Suspense fallback={null}>{renderFiledrop && <FileDrop />}</React.Suspense>
|
||||
|
||||
<FileRenderFloating setSocketConnection={setSocketConnection} />
|
||||
<FileRenderFloating />
|
||||
|
||||
<React.Suspense fallback={null}>
|
||||
{isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}
|
||||
|
|
23
ui/effects/use-socket-connect.js
Normal file
23
ui/effects/use-socket-connect.js
Normal file
|
@ -0,0 +1,23 @@
|
|||
// @flow
|
||||
import React from 'react';
|
||||
import { formatLbryChannelName } from 'util/url';
|
||||
|
||||
export default function useSocketConnect(
|
||||
isLivestreamClaim: boolean,
|
||||
claimId: boolean,
|
||||
channelUrl: ?string,
|
||||
canonicalUrl: boolean,
|
||||
doCommentSocketConnect: (string, string, string) => void,
|
||||
doCommentSocketDisconnect: (string, string) => void
|
||||
) {
|
||||
// Establish web socket connection for viewer count.
|
||||
React.useEffect(() => {
|
||||
if (!isLivestreamClaim || !claimId || !channelUrl || !canonicalUrl) return;
|
||||
|
||||
const channelName = formatLbryChannelName(channelUrl);
|
||||
|
||||
doCommentSocketConnect(canonicalUrl, channelName, claimId);
|
||||
|
||||
return () => doCommentSocketDisconnect(claimId, channelName);
|
||||
}, [canonicalUrl, channelUrl, claimId, doCommentSocketConnect, doCommentSocketDisconnect, isLivestreamClaim]);
|
||||
}
|
|
@ -1,33 +1,46 @@
|
|||
import { connect } from 'react-redux';
|
||||
import EmbedWrapperPage from './view';
|
||||
import { makeSelectClaimForUri, selectIsUriResolving } from 'redux/selectors/claims';
|
||||
import { selectClaimForUri, selectIsUriResolving } from 'redux/selectors/claims';
|
||||
import { makeSelectStreamingUrlForUri } from 'redux/selectors/file_info';
|
||||
import { doResolveUri } from 'redux/actions/claims';
|
||||
import { buildURI } from 'util/lbryURI';
|
||||
import { doPlayUri } from 'redux/actions/content';
|
||||
import { selectCostInfoForUri, doFetchCostInfoForUri, selectBlackListedOutpoints } from 'lbryinc';
|
||||
import { doCommentSocketConnect, doCommentSocketDisconnect } from 'redux/actions/websocket';
|
||||
import { doFetchActiveLivestreams, doFetchChannelLiveStatus } from 'redux/actions/livestream';
|
||||
import { selectIsActiveLivestreamForUri, selectActiveLivestreams } from 'redux/selectors/livestream';
|
||||
import { isStreamPlaceholderClaim } from 'util/claim';
|
||||
|
||||
const select = (state, props) => {
|
||||
const { match } = props;
|
||||
const { params } = match;
|
||||
const { claimName, claimId } = params;
|
||||
const uri = claimName ? buildURI({ claimName, claimId }) : '';
|
||||
|
||||
const claim = selectClaimForUri(state, uri);
|
||||
const { canonical_url: canonicalUrl } = claim || {};
|
||||
|
||||
return {
|
||||
uri,
|
||||
claim: makeSelectClaimForUri(uri)(state),
|
||||
claim,
|
||||
costInfo: selectCostInfoForUri(state, uri),
|
||||
streamingUrl: makeSelectStreamingUrlForUri(uri)(state),
|
||||
isResolvingUri: selectIsUriResolving(state, uri),
|
||||
blackListedOutpoints: selectBlackListedOutpoints(state),
|
||||
isCurrentClaimLive: canonicalUrl && selectIsActiveLivestreamForUri(state, canonicalUrl),
|
||||
isLivestreamClaim: isStreamPlaceholderClaim(claim),
|
||||
activeLivestreams: selectActiveLivestreams(state),
|
||||
};
|
||||
};
|
||||
|
||||
const perform = (dispatch) => {
|
||||
return {
|
||||
resolveUri: (uri) => dispatch(doResolveUri(uri)),
|
||||
doPlayUri: (uri) => dispatch(doPlayUri(uri)),
|
||||
doFetchCostInfoForUri: (uri) => dispatch(doFetchCostInfoForUri(uri)),
|
||||
};
|
||||
const perform = {
|
||||
doResolveUri,
|
||||
doPlayUri,
|
||||
doFetchCostInfoForUri,
|
||||
doFetchChannelLiveStatus,
|
||||
doCommentSocketConnect,
|
||||
doCommentSocketDisconnect,
|
||||
doFetchActiveLivestreams,
|
||||
};
|
||||
|
||||
export default connect(select, perform)(EmbedWrapperPage);
|
||||
|
|
|
@ -1,51 +1,70 @@
|
|||
// @flow
|
||||
import { SITE_NAME } from 'config';
|
||||
import React, { useEffect } from 'react';
|
||||
import React from 'react';
|
||||
import classnames from 'classnames';
|
||||
import FileRender from 'component/fileRender';
|
||||
import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
|
||||
import Spinner from 'component/spinner';
|
||||
import Button from 'component/button';
|
||||
import Card from 'component/common/card';
|
||||
import { formatLbryUrlForWeb } from 'util/url';
|
||||
import { formatLbryUrlForWeb, formatLbryChannelName } from 'util/url';
|
||||
import { useHistory } from 'react-router';
|
||||
import useSocketConnect from 'effects/use-socket-connect';
|
||||
|
||||
const LIVESTREAM_STATUS_CHECK_INTERVAL = 30000;
|
||||
|
||||
type Props = {
|
||||
uri: string,
|
||||
resolveUri: (string) => void,
|
||||
claim: Claim,
|
||||
doPlayUri: (string) => void,
|
||||
claim: ?any,
|
||||
costInfo: any,
|
||||
streamingUrl: string,
|
||||
doFetchCostInfoForUri: (string) => void,
|
||||
isResolvingUri: boolean,
|
||||
blackListedOutpoints: Array<{
|
||||
txid: string,
|
||||
nout: number,
|
||||
}>,
|
||||
blackListedOutpoints: Array<{ txid: string, nout: number }>,
|
||||
isCurrentClaimLive: boolean,
|
||||
isLivestreamClaim: boolean,
|
||||
activeLivestreams: ?any,
|
||||
doResolveUri: (uri: string) => void,
|
||||
doPlayUri: (uri: string) => void,
|
||||
doFetchCostInfoForUri: (uri: string) => void,
|
||||
doFetchChannelLiveStatus: (string) => void,
|
||||
doCommentSocketConnect: (string, string, string) => void,
|
||||
doCommentSocketDisconnect: (string, string) => void,
|
||||
doFetchActiveLivestreams: () => void,
|
||||
};
|
||||
|
||||
export const EmbedContext = React.createContext<any>();
|
||||
|
||||
const EmbedWrapperPage = (props: Props) => {
|
||||
const {
|
||||
resolveUri,
|
||||
claim,
|
||||
uri,
|
||||
doPlayUri,
|
||||
claim,
|
||||
costInfo,
|
||||
streamingUrl,
|
||||
doFetchCostInfoForUri,
|
||||
isResolvingUri,
|
||||
blackListedOutpoints,
|
||||
isCurrentClaimLive,
|
||||
isLivestreamClaim: liveClaim,
|
||||
activeLivestreams,
|
||||
doResolveUri,
|
||||
doPlayUri,
|
||||
doFetchCostInfoForUri,
|
||||
doFetchChannelLiveStatus,
|
||||
doCommentSocketConnect,
|
||||
doCommentSocketDisconnect,
|
||||
doFetchActiveLivestreams,
|
||||
} = props;
|
||||
|
||||
const {
|
||||
location: { search },
|
||||
} = useHistory();
|
||||
|
||||
const { claim_id: claimId, canonical_url: canonicalUrl, signing_channel: channelClaim } = claim || {};
|
||||
|
||||
const channelUrl = channelClaim && formatLbryChannelName(channelClaim.canonical_url);
|
||||
const urlParams = new URLSearchParams(search);
|
||||
const embedLightBackground = urlParams.get('embedBackgroundLight');
|
||||
const haveClaim = Boolean(claim);
|
||||
const readyToDisplay = claim && streamingUrl;
|
||||
const readyToDisplay = isCurrentClaimLive || (claim && streamingUrl);
|
||||
const loading = !claim && isResolvingUri;
|
||||
const noContentFound = !claim && !isResolvingUri;
|
||||
const isPaidContent = costInfo && costInfo.cost > 0;
|
||||
|
@ -60,21 +79,38 @@ const EmbedWrapperPage = (props: Props) => {
|
|||
(outpoint.txid === claim.txid && outpoint.nout === claim.nout)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (resolveUri && uri && !haveClaim) {
|
||||
resolveUri(uri);
|
||||
React.useEffect(doFetchActiveLivestreams, [doFetchActiveLivestreams]);
|
||||
|
||||
useSocketConnect(liveClaim, claimId, channelUrl, canonicalUrl, doCommentSocketConnect, doCommentSocketDisconnect);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (doResolveUri && uri && !haveClaim) {
|
||||
doResolveUri(uri);
|
||||
}
|
||||
if (uri && haveClaim && costInfo && costInfo.cost === 0) {
|
||||
doPlayUri(uri);
|
||||
}
|
||||
}, [resolveUri, uri, doPlayUri, haveClaim, costInfo]);
|
||||
}, [doResolveUri, uri, doPlayUri, haveClaim, costInfo]);
|
||||
|
||||
useEffect(() => {
|
||||
React.useEffect(() => {
|
||||
if (haveClaim && uri && doFetchCostInfoForUri) {
|
||||
doFetchCostInfoForUri(uri);
|
||||
}
|
||||
}, [uri, haveClaim, doFetchCostInfoForUri]);
|
||||
|
||||
// Find out current channels status + active live claim every 30 seconds
|
||||
React.useEffect(() => {
|
||||
if (!channelClaim || !activeLivestreams) return;
|
||||
|
||||
const { claim_id: channelClaimId } = channelClaim || {};
|
||||
|
||||
doFetchChannelLiveStatus(channelClaimId);
|
||||
|
||||
const intervalId = setInterval(() => doFetchChannelLiveStatus(channelClaimId), LIVESTREAM_STATUS_CHECK_INTERVAL);
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
}, [activeLivestreams, channelClaim, doFetchChannelLiveStatus]);
|
||||
|
||||
if (isClaimBlackListed) {
|
||||
return (
|
||||
<Card
|
||||
|
@ -92,11 +128,7 @@ const EmbedWrapperPage = (props: Props) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classnames('embed__wrapper', {
|
||||
'embed__wrapper--light-background': embedLightBackground,
|
||||
})}
|
||||
>
|
||||
<div className={classnames('embed__wrapper', { 'embed__wrapper--light-background': embedLightBackground })}>
|
||||
<EmbedContext.Provider value>
|
||||
{readyToDisplay ? (
|
||||
<FileRender uri={uri} embedded />
|
||||
|
|
|
@ -18,9 +18,7 @@ Lbry.setDaemonConnectionString(PROXY_URL);
|
|||
async function getClaim(requestUrl) {
|
||||
const uri = requestUrl.replace(`${URL}/`, 'lbry://');
|
||||
|
||||
let claim;
|
||||
let error;
|
||||
|
||||
let claim, error;
|
||||
try {
|
||||
const response = await Lbry.resolve({ urls: [uri] });
|
||||
if (response && response[uri] && !response[uri].error) {
|
||||
|
@ -33,7 +31,7 @@ async function getClaim(requestUrl) {
|
|||
} else {
|
||||
const { value_type, value } = claim;
|
||||
|
||||
if (value_type !== 'stream' || value.stream_type !== 'video') {
|
||||
if (value_type !== 'stream' || (value.stream_type !== 'video' && value.stream_type !== undefined)) {
|
||||
error = 'The URL is not associated with a video claim.';
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue