From f4fdee833101d2672f5fde6ed61fdb959e436293 Mon Sep 17 00:00:00 2001 From: Rafael Date: Wed, 16 Mar 2022 08:35:58 -0300 Subject: [PATCH] socket improvements --- ui/component/fileRenderFloating/index.js | 6 ++-- ui/component/fileRenderFloating/view.jsx | 31 ++++++------------- .../viewers/videoViewer/internal/videojs.jsx | 3 +- ui/effects/use-socket-connect.js | 27 ---------------- ui/page/embedWrapper/view.jsx | 16 ++++++++-- ui/page/livestream/index.js | 6 ++-- ui/page/livestream/view.jsx | 22 +++++-------- ui/redux/actions/livestream.js | 6 ---- ui/redux/actions/websocket.js | 9 ++++++ 9 files changed, 46 insertions(+), 80 deletions(-) delete mode 100644 ui/effects/use-socket-connect.js diff --git a/ui/component/fileRenderFloating/index.js b/ui/component/fileRenderFloating/index.js index 4575b6b74..1bbb7a851 100644 --- a/ui/component/fileRenderFloating/index.js +++ b/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)); diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx index 45bd262db..a5f7e56a0 100644 --- a/ui/component/fileRenderFloating/view.jsx +++ b/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); - doSetSocketConnected(true); + // Only connect if not yet connected, so for example clicked on an embed instead of accessing + // from the Livestream page + if (!socketConnected) doCommentSocketConnect(uri, channelName, claimId); - return () => { - doCommentSocketDisconnect(claimId, channelName); - doSetSocketConnected(false); - }; + // This will be used to disconnect for every case, since this is the main player component + return () => doCommentSocketDisconnect(claimId, channelName); // only listen to socketConnected on initial mount // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ - channelClaimUrl, - claimId, - doCommentSocketConnect, - doCommentSocketDisconnect, - doSetSocketConnected, - isCurrentClaimLive, - uri, - ]); + }, [channelUrl, claimId, doCommentSocketConnect, doCommentSocketDisconnect, isCurrentClaimLive, uri]); React.useEffect(() => { if (playingPrimaryUri || playingUrl) { diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index 964169c98..666c1cc01 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs.jsx @@ -357,7 +357,8 @@ export default React.memo(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 diff --git a/ui/effects/use-socket-connect.js b/ui/effects/use-socket-connect.js deleted file mode 100644 index 22e90e3cf..000000000 --- a/ui/effects/use-socket-connect.js +++ /dev/null @@ -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]); -} diff --git a/ui/page/embedWrapper/view.jsx b/ui/page/embedWrapper/view.jsx index c82ff8dae..9cfc75085 100644 --- a/ui/page/embedWrapper/view.jsx +++ b/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) { diff --git a/ui/page/livestream/index.js b/ui/page/livestream/index.js index 7b95244f9..c6289d963 100644 --- a/ui/page/livestream/index.js +++ b/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); diff --git a/ui/page/livestream/view.jsx b/ui/page/livestream/view.jsx index fc719f727..c4a623de8 100644 --- a/ui/page/livestream/view.jsx +++ b/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(); @@ -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')); diff --git a/ui/redux/actions/livestream.js b/ui/redux/actions/livestream.js index e8d444e32..16c8aabd8 100644 --- a/ui/redux/actions/livestream.js +++ b/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 }, - }); diff --git a/ui/redux/actions/websocket.js b/ui/redux/actions/websocket.js index 070855348..dfd0b7434 100644 --- a/ui/redux/actions/websocket.js +++ b/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 }, + });