disconnect from comment websocket when leaving livestream page

ui/component/livestreamComments/index.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { makeSelectClaimForUri } from 'lbry-redux';
-import { doCommentSocketConnect } from 'redux/actions/websocket';
+import { doCommentSocketConnect, doCommentSocketDisconnect } from 'redux/actions/websocket';
 import { doCommentList } from 'redux/actions/comments';
 import { makeSelectTopLevelCommentsForUri, selectIsFetchingComments } from 'redux/selectors/comments';
 import LivestreamFeed from './view';
@@ -11,4 +11,4 @@ const select = (state, props) => ({
   fetchingComments: selectIsFetchingComments(state),
 });
 
-export default connect(select, { doCommentSocketConnect, doCommentList })(LivestreamFeed);
+export default connect(select, { doCommentSocketConnect, doCommentSocketDisconnect, doCommentList })(LivestreamFeed);

ui/component/livestreamComments/view.jsx

@@ -13,13 +13,23 @@ type Props = {
   activeViewers: number,
   embed?: boolean,
   doCommentSocketConnect: (string, string) => void,
+  doCommentSocketDisconnect: (string) => void,
   doCommentList: (string) => void,
   comments: Array<Comment>,
   fetchingComments: boolean,
 };
 
 export default function LivestreamFeed(props: Props) {
-  const { claim, uri, embed, doCommentSocketConnect, comments, doCommentList, fetchingComments } = props;
+  const {
+    claim,
+    uri,
+    embed,
+    doCommentSocketConnect,
+    doCommentSocketDisconnect,
+    comments,
+    doCommentList,
+    fetchingComments,
+  } = props;
   const commentsRef = React.createRef();
   const hasScrolledComments = React.useRef();
   const [performedInitialScroll, setPerformedInitialScroll] = React.useState(false);
@@ -31,7 +41,13 @@ export default function LivestreamFeed(props: Props) {
       doCommentList(uri);
       doCommentSocketConnect(uri, claimId);
     }
-  }, [claimId, uri]);
+
+    return () => {
+      if (claimId) {
+        doCommentSocketDisconnect(claimId);
+      }
+    };
+  }, [claimId, uri, doCommentList, doCommentSocketConnect, doCommentSocketDisconnect]);
 
   React.useEffect(() => {
     const element = commentsRef.current;

ui/component/livestreamLayout/view.jsx

@@ -1,5 +1,5 @@
 // @flow
-import { BITWAVE_EMBED_URL } from 'constants/livestream';
+// import { BITWAVE_EMBED_URL } from 'constants/livestream';
 import React from 'react';
 import FileTitleSection from 'component/fileTitleSection';
 import LivestreamComments from 'component/livestreamComments';
@@ -22,7 +22,7 @@ export default function LivestreamLayout(props: Props) {
       <div className="section card-stack">
         <div className="file-render file-render--video livestream">
           <div className="file-viewer">
-            <iframe src={`${BITWAVE_EMBED_URL}/${'doomtube'}?skin=odysee&autoplay=1`} scrolling="no" allowFullScreen />
+            {/* <iframe src={`${BITWAVE_EMBED_URL}/${'doomtube'}?skin=odysee&autoplay=1`} scrolling="no" allowFullScreen /> */}
           </div>
         </div>
 

ui/redux/actions/websocket.js

@@ -2,6 +2,8 @@ import * as ACTIONS from 'constants/action_types';
 import { getAuthToken } from 'util/saved-passwords';
 import { doNotificationList } from 'redux/actions/notifications';
 
+const COMMENT_WS_URL = `wss://comments.lbry.com/api/v2/live-chat/subscribe?subscription_id=`;
+
 let sockets = {};
 let retryCount = 0;
 
@@ -26,20 +28,31 @@ export const doSocketConnect = (url, cb) => {
 
       sockets[url].onerror = (e) => {
         console.error('websocket onerror', e); // eslint-disable-line
-        // onerror and onclose will both fire, so nothing is needed here
-      };
-
-      sockets[url].onclose = (e) => {
-        console.error('websocket onclose', e); // eslint-disable-line
         retryCount += 1;
         connectToSocket();
       };
+
+      sockets[url].onclose = () => {
+        console.log('\n Disconnected from WS\n\n'); // eslint-disable-line
+        sockets[url] = null;
+      };
     }, timeToWait);
   }
 
   connectToSocket();
 };
 
+export const doSocketDisconnect = (url) => (dispatch) => {
+  if (sockets[url] !== undefined && sockets[url] !== null) {
+    sockets[url].close();
+    sockets[url] = null;
+
+    dispatch({
+      type: ACTIONS.WS_DISCONNECT,
+    });
+  }
+};
+
 export const doNotificationSocketConnect = () => (dispatch) => {
   const authToken = getAuthToken();
   if (!authToken) {
@@ -56,7 +69,7 @@ export const doNotificationSocketConnect = () => (dispatch) => {
 };
 
 export const doCommentSocketConnect = (uri, claimId) => (dispatch) => {
-  const url = `wss://comments.lbry.com/api/v2/live-chat/subscribe?subscription_id=${claimId}`;
+  const url = `${COMMENT_WS_URL}${claimId}`;
 
   doSocketConnect(url, (response) => {
     if (response.type === 'delta') {
@@ -69,6 +82,7 @@ export const doCommentSocketConnect = (uri, claimId) => (dispatch) => {
   });
 };
 
-export const doSocketDisconnect = () => ({
+export const doCommentSocketDisconnect = (claimId) => (dispatch) => {
-  type: ACTIONS.WS_DISCONNECT,
+  const url = `${COMMENT_WS_URL}${claimId}`;
-});
+  dispatch(doSocketDisconnect(url));
+};