Add live detection to livestream page

- reduce interval from 15 seconds to 10 seconds

ui/component/livestreamLink/view.jsx

@@ -43,11 +43,13 @@ export default function LivestreamLink(props: Props) {
         })
         .catch((e) => {});
     }
+
     let interval;
     if (livestreamChannelId) {
       if (!interval) fetchIsStreaming();
-      interval = setInterval(fetchIsStreaming, 15 * 1000);
+      interval = setInterval(fetchIsStreaming, 10 * 1000);
     }
+
     return () => {
       if (interval) {
         clearInterval(interval);

ui/page/livestream/index.js

@@ -1,14 +1,15 @@
 import { connect } from 'react-redux';
-import { doResolveUri } from 'lbry-redux';
+import { doResolveUri, makeSelectClaimForUri } from 'lbry-redux';
 import { doSetPlayingUri } from 'redux/actions/content';
 import { doUserSetReferrer } from 'redux/actions/user';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectHasUnclaimedRefereeReward } from 'redux/selectors/rewards';
 import LivestreamPage from './view';
 
-const select = (state) => ({
+const select = (state, props) => ({
   hasUnclaimedRefereeReward: selectHasUnclaimedRefereeReward(state),
   isAuthenticated: selectUserVerifiedEmail(state),
+  channelClaim: makeSelectClaimForUri(props.uri)(state),
 });
 
 export default connect(select, {

ui/page/livestream/view.jsx

@@ -11,16 +11,25 @@ type Props = {
   doSetPlayingUri: ({ uri: ?string }) => void,
   isAuthenticated: boolean,
   doUserSetReferrer: (string) => void,
+  channelClaim: ChannelClaim,
 };
 
 export default function LivestreamPage(props: Props) {
-  const { uri, claim, doSetPlayingUri, isAuthenticated, doUserSetReferrer } = props;
+  const {
+    uri,
+    claim,
+    doSetPlayingUri,
+    isAuthenticated,
+    doUserSetReferrer,
+    channelClaim,
+  } = props;
   const [activeViewers, setActiveViewers] = React.useState(0);
   const [isLive, setIsLive] = React.useState(false);
+  const livestreamChannelId = channelClaim && channelClaim.signing_channel && channelClaim.signing_channel.claim_id;
 
   React.useEffect(() => {
     function checkIsLive() {
-      fetch(`${BITWAVE_API}/MarkPugner`)
+      fetch(`${BITWAVE_API}/${livestreamChannelId}`)
         .then((res) => res.json())
         .then((res) => {
           if (!res || !res.data) {
@@ -30,23 +39,24 @@ export default function LivestreamPage(props: Props) {
 
           setActiveViewers(res.data.viewCount);
 
-          if (res.data.live) {
+          if (res.data.hasOwnProperty('live')) {
-            setIsLive(true);
+            setIsLive(res.data.live);
           }
         });
     }
 
     let interval;
-    checkIsLive();
+    if (livestreamChannelId) {
-    if (uri) {
+      if (!interval) checkIsLive();
-      interval = setInterval(checkIsLive, 10000);
+      interval = setInterval(checkIsLive, 10 * 1000);
     }
+
     return () => {
       if (interval) {
         clearInterval(interval);
       }
     };
-  }, [uri]);
+  }, [livestreamChannelId]);
 
   const stringifiedClaim = JSON.stringify(claim);
   React.useEffect(() => {
@@ -77,7 +87,11 @@ export default function LivestreamPage(props: Props) {
 
   return (
     <Page className="file-page" filePage livestream>
-      <LivestreamLayout uri={uri} activeViewers={activeViewers} isLive={isLive} />
+      <LivestreamLayout
+        uri={uri}
+        activeViewers={activeViewers}
+        isLive={isLive}
+      />
     </Page>
   );
 }