socket improvements

ui/component/fileRenderFloating/index.js

@@ -21,7 +21,6 @@ import { selectMobilePlayerDimensions } from 'redux/selectors/app';
 import { selectIsActiveLivestreamForUri, selectCommentSocketConnected } from 'redux/selectors/livestream';
 import { doSetMobilePlayerDimensions } from 'redux/actions/app';
 import { doCommentSocketConnect, doCommentSocketDisconnect } from 'redux/actions/websocket';
-import { doSetSocketConnected } from 'redux/actions/livestream';
 import { isStreamPlaceholderClaim } from 'util/claim';
 import FileRenderFloating from './view';
 
@@ -33,11 +32,11 @@ const select = (state, props) => {
 
   const claim = uri && selectClaimForUri(state, uri);
   const { claim_id: claimId, signing_channel: channelClaim } = claim || {};
-  const { canonical_url: channelClaimUrl } = channelClaim || {};
+  const { canonical_url: channelUrl } = channelClaim || {};
 
   return {
     claimId,
-    channelClaimUrl,
+    channelUrl,
     uri,
     playingUri,
     primaryUri: selectPrimaryUri(state),
@@ -66,7 +65,6 @@ const perform = {
   doSetMobilePlayerDimensions,
   doCommentSocketConnect,
   doCommentSocketDisconnect,
-  doSetSocketConnected,
 };
 
 export default withRouter(connect(select, perform)(FileRenderFloating));

ui/component/fileRenderFloating/view.jsx

@@ -36,7 +36,7 @@ export const FLOATING_PLAYER_CLASS = 'content__viewer--floating';
 
 type Props = {
   claimId: ?string,
-  channelClaimUrl: ?string,
+  channelUrl: ?string,
   isFloating: boolean,
   uri: string,
   streamingUrl?: string,
@@ -61,13 +61,12 @@ type Props = {
   doSetMobilePlayerDimensions: ({ height?: ?number, width?: ?number }) => void,
   doCommentSocketConnect: (string, string, string) => void,
   doCommentSocketDisconnect: (string, string) => void,
-  doSetSocketConnected: (connected: boolean) => void,
 };
 
 export default function FileRenderFloating(props: Props) {
   const {
     claimId,
-    channelClaimUrl,
+    channelUrl,
     uri,
     streamingUrl,
     title,
@@ -92,7 +91,6 @@ export default function FileRenderFloating(props: Props) {
     doSetMobilePlayerDimensions,
     doCommentSocketConnect,
     doCommentSocketDisconnect,
-    doSetSocketConnected,
   } = props;
 
   const isMobile = useIsMobile();
@@ -199,29 +197,20 @@ export default function FileRenderFloating(props: Props) {
 
   // Establish web socket connection for viewer count.
   React.useEffect(() => {
-    if (!claimId || !channelClaimUrl || !isCurrentClaimLive || socketConnected) return;
+    if (!claimId || !channelUrl || !isCurrentClaimLive) return;
 
-    const channelName = formatLbryChannelName(channelClaimUrl);
+    const channelName = formatLbryChannelName(channelUrl);
 
-    doCommentSocketConnect(uri, channelName, claimId);
+    // Only connect if not yet connected, so for example clicked on an embed instead of accessing
-    doSetSocketConnected(true);
+    // from the Livestream page
+    if (!socketConnected) doCommentSocketConnect(uri, channelName, claimId);
 
-    return () => {
+    // This will be used to disconnect for every case, since this is the main player component
-      doCommentSocketDisconnect(claimId, channelName);
+    return () => doCommentSocketDisconnect(claimId, channelName);
-      doSetSocketConnected(false);
-    };
 
     // only listen to socketConnected on initial mount
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
+  }, [channelUrl, claimId, doCommentSocketConnect, doCommentSocketDisconnect, isCurrentClaimLive, uri]);
-    channelClaimUrl,
-    claimId,
-    doCommentSocketConnect,
-    doCommentSocketDisconnect,
-    doSetSocketConnected,
-    isCurrentClaimLive,
-    uri,
-  ]);
 
   React.useEffect(() => {
     if (playingPrimaryUri || playingUrl) {

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -357,7 +357,8 @@ export default React.memo<Props>(function VideoJs(props: Props) {
       window.addEventListener('keydown', curried_function(playerRef, containerRef));
 
       // $FlowFixMe
-      document.querySelector('.vjs-control-bar').style.setProperty('opacity', '1', 'important');
+      const controlBar = document.querySelector('.vjs-control-bar');
+      if (controlBar) controlBar.style.setProperty('opacity', '1', 'important');
 
       if (isLivestreamClaim && userClaimId) {
         // $FlowFixMe

ui/effects/use-socket-connect.js

@@ -1,27 +0,0 @@
-// @flow
-import React from 'react';
-import { formatLbryChannelName } from 'util/url';
-
-export default function useSocketConnect(
-  isLivestreamClaim: boolean,
-  claimId: ?string,
-  channelUrl: ?string,
-  canonicalUrl: ?string,
-  doCommentSocketConnect: (canonicalUrl: string, channelName: string, claimId: string) => void,
-  doCommentSocketDisconnect: (claimId: 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 () => {
-      if (claimId) {
-        doCommentSocketDisconnect(claimId, channelName);
-      }
-    };
-  }, [canonicalUrl, channelUrl, claimId, doCommentSocketConnect, doCommentSocketDisconnect, isLivestreamClaim]);
-}

ui/page/embedWrapper/view.jsx

@@ -9,7 +9,6 @@ import Button from 'component/button';
 import Card from 'component/common/card';
 import { formatLbryUrlForWeb, formatLbryChannelName } from 'util/url';
 import { useHistory } from 'react-router';
-import useSocketConnect from 'effects/use-socket-connect';
 
 const LIVESTREAM_STATUS_CHECK_INTERVAL = 30000;
 
@@ -81,7 +80,20 @@ const EmbedWrapperPage = (props: Props) => {
 
   React.useEffect(doFetchActiveLivestreams, [doFetchActiveLivestreams]);
 
-  useSocketConnect(liveClaim, claimId, channelUrl, canonicalUrl, doCommentSocketConnect, doCommentSocketDisconnect);
+  // Establish web socket connection for viewer count.
+  React.useEffect(() => {
+    if (!liveClaim || !claimId || !channelUrl || !canonicalUrl) return;
+
+    const channelName = formatLbryChannelName(channelUrl);
+
+    doCommentSocketConnect(canonicalUrl, channelName, claimId);
+
+    return () => {
+      if (claimId) {
+        doCommentSocketDisconnect(claimId, channelName);
+      }
+    };
+  }, [canonicalUrl, channelUrl, claimId, doCommentSocketConnect, doCommentSocketDisconnect, liveClaim]);
 
   React.useEffect(() => {
     if (doResolveUri && uri && !haveClaim) {

ui/page/livestream/index.js

@@ -4,14 +4,14 @@ import { doSetPrimaryUri } from 'redux/actions/content';
 import { doUserSetReferrer } from 'redux/actions/user';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { DISABLE_COMMENTS_TAG } from 'constants/tags';
-import { doCommentSocketConnect, doCommentSocketDisconnect } from 'redux/actions/websocket';
+import { doCommentSocketConnect } from 'redux/actions/websocket';
 import { getChannelIdFromClaim } from 'util/claim';
 import {
   selectActiveLivestreamForChannel,
   selectActiveLivestreamInitialized,
   selectCommentSocketConnected,
 } from 'redux/selectors/livestream';
-import { doFetchChannelLiveStatus, doSetSocketConnected } from 'redux/actions/livestream';
+import { doFetchChannelLiveStatus } from 'redux/actions/livestream';
 import LivestreamPage from './view';
 
 const select = (state, props) => {
@@ -32,9 +32,7 @@ const perform = {
   doSetPrimaryUri,
   doUserSetReferrer,
   doCommentSocketConnect,
-  doCommentSocketDisconnect,
   doFetchChannelLiveStatus,
-  doSetSocketConnected,
 };
 
 export default connect(select, perform)(LivestreamPage);

ui/page/livestream/view.jsx

@@ -27,10 +27,8 @@ type Props = {
   socketConnected: boolean,
   doSetPrimaryUri: (uri: ?string) => void,
   doCommentSocketConnect: (string, string, string) => void,
-  doCommentSocketDisconnect: (string, string) => void,
   doFetchChannelLiveStatus: (string) => void,
   doUserSetReferrer: (string) => void,
-  doSetSocketConnected: (connected: boolean) => void,
 };
 
 export const LayoutRenderContext = React.createContext<any>();
@@ -47,10 +45,8 @@ export default function LivestreamPage(props: Props) {
     socketConnected,
     doSetPrimaryUri,
     doCommentSocketConnect,
-    doCommentSocketDisconnect,
     doFetchChannelLiveStatus,
     doUserSetReferrer,
-    doSetSocketConnected,
   } = props;
 
   const isMobile = useIsMobile();
@@ -76,28 +72,24 @@ export default function LivestreamPage(props: Props) {
     analytics.playerLoadedEvent('livestream', false);
   }, []);
 
-  // Establish web socket connection for viewer count.
+  const { signing_channel: channelClaim } = claim || {};
+  const { canonical_url: channelUrl } = channelClaim || {};
+
+  // On livestream page, only connect, fileRenderFloating will handle disconnect.
+  // (either by leaving page with floating player off, or by closing the player)
   React.useEffect(() => {
     if (!claim || socketConnected) return;
 
     const { claim_id: claimId, signing_channel: channelClaim } = claim;
-    const channelName = channelClaim && formatLbryChannelName(channelClaim.canonical_url);
+    const channelName = channelClaim && formatLbryChannelName(channelUrl);
 
     if (claimId && channelName) {
       doCommentSocketConnect(uri, channelName, claimId);
-      doSetSocketConnected(true);
     }
 
-    return () => {
-      if (claimId && channelName) {
-        doCommentSocketDisconnect(claimId, channelName);
-        doSetSocketConnected(false);
-      }
-    };
-
     // only listen to socketConnected on initial mount
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [claim, uri, doCommentSocketConnect, doCommentSocketDisconnect]);
+  }, [channelUrl, claim, doCommentSocketConnect, uri]);
 
   const claimReleaseStartingSoonStatic = () =>
     release.isBetween(moment(), moment().add(LIVESTREAM_STARTS_SOON_BUFFER, 'minutes'));

ui/redux/actions/livestream.js

@@ -210,9 +210,3 @@ export const doFetchActiveLivestreams = (
     dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_FAILED });
   }
 };
-
-export const doSetSocketConnected = (connected: boolean) => (dispatch: Dispatch) =>
-  dispatch({
-    type: ACTIONS.COMMENT_SOCKET_CONNECTED,
-    data: { connected },
-  });

ui/redux/actions/websocket.js

@@ -148,12 +148,15 @@ export const doCommentSocketConnect = (uri, channelName, claimId, subCategory) =
     },
     'comment'
   );
+
+  dispatch(doSetSocketConnected(true));
 };
 
 export const doCommentSocketDisconnect = (claimId, channelName) => (dispatch) => {
   const url = getCommentSocketUrl(claimId, channelName);
 
   dispatch(doSocketDisconnect(url));
+  dispatch(doSetSocketConnected(false));
 };
 
 export const doCommentSocketConnectAsCommenter = (uri, channelName, claimId) => (dispatch) => {
@@ -165,3 +168,9 @@ export const doCommentSocketDisconnectAsCommenter = (claimId, channelName) => (d
 
   dispatch(doSocketDisconnect(url));
 };
+
+export const doSetSocketConnected = (connected) => (dispatch) =>
+  dispatch({
+    type: ACTIONS.COMMENT_SOCKET_CONNECTED,
+    data: { connected },
+  });