socket improvements
This commit is contained in:
parent
60c317dedf
commit
f4fdee8331
9 changed files with 46 additions and 80 deletions
|
@ -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));
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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]);
|
||||
}
|
|
@ -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) {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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'));
|
||||
|
|
|
@ -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 },
|
||||
});
|
||||
|
|
|
@ -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 },
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue