Improve livestream external embeds

ui/component/app/view.jsx

@@ -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" />}

ui/effects/use-socket-connect.js

@@ -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]);
+}

ui/page/embedWrapper/index.js

@@ -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) => {
+const perform = {
-  return {
+  doResolveUri,
-    resolveUri: (uri) => dispatch(doResolveUri(uri)),
+  doPlayUri,
-    doPlayUri: (uri) => dispatch(doPlayUri(uri)),
+  doFetchCostInfoForUri,
-    doFetchCostInfoForUri: (uri) => dispatch(doFetchCostInfoForUri(uri)),
+  doFetchChannelLiveStatus,
-  };
+  doCommentSocketConnect,
+  doCommentSocketDisconnect,
+  doFetchActiveLivestreams,
 };
 
 export default connect(select, perform)(EmbedWrapperPage);

ui/page/embedWrapper/view.jsx

@@ -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: ?any,
-  claim: Claim,
-  doPlayUri: (string) => void,
   costInfo: any,
   streamingUrl: string,
-  doFetchCostInfoForUri: (string) => void,
   isResolvingUri: boolean,
-  blackListedOutpoints: Array<{
+  blackListedOutpoints: Array<{ txid: string, nout: number }>,
-    txid: string,
+  isCurrentClaimLive: boolean,
-    nout: number,
+  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(() => {
+  React.useEffect(doFetchActiveLivestreams, [doFetchActiveLivestreams]);
-    if (resolveUri && uri && !haveClaim) {
+
-      resolveUri(uri);
+  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
+    <div className={classnames('embed__wrapper', { 'embed__wrapper--light-background': embedLightBackground })}>
-      className={classnames('embed__wrapper', {
-        'embed__wrapper--light-background': embedLightBackground,
-      })}
-    >
       <EmbedContext.Provider value>
         {readyToDisplay ? (
           <FileRender uri={uri} embedded />

web/src/oEmbed.js

@@ -18,9 +18,7 @@ Lbry.setDaemonConnectionString(PROXY_URL);
 async function getClaim(requestUrl) {
   const uri = requestUrl.replace(`${URL}/`, 'lbry://');
 
-  let claim;
+  let claim, error;
-  let 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.';
     }
   }