socket improvements

This commit is contained in:
Rafael 2022-03-16 08:35:58 -03:00 committed by Thomas Zarebczan
parent 60c317dedf
commit f4fdee8331
9 changed files with 46 additions and 80 deletions

View file

@ -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));

View file

@ -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) {

View file

@ -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

View file

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

View file

@ -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) {

View file

@ -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);

View file

@ -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'));

View file

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

View file

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