use tag to disable interactions on livestreams

This commit is contained in:
zeppi 2021-06-03 11:55:16 -04:00 committed by Thomas Zarebczan
parent 213c336192
commit 28a3db28b7
7 changed files with 34 additions and 7 deletions

View file

@ -6,7 +6,9 @@ import {
doPrepareEdit, doPrepareEdit,
selectMyChannelClaims, selectMyChannelClaims,
makeSelectClaimIsStreamPlaceholder, makeSelectClaimIsStreamPlaceholder,
makeSelectTagInClaimOrChannelForUri,
} from 'lbry-redux'; } from 'lbry-redux';
import { DISABLE_COMMENTS_TAG } from 'constants/tags';
import { makeSelectCostInfoForUri } from 'lbryinc'; import { makeSelectCostInfoForUri } from 'lbryinc';
import { doSetPlayingUri } from 'redux/actions/content'; import { doSetPlayingUri } from 'redux/actions/content';
import { doToast } from 'redux/actions/notifications'; import { doToast } from 'redux/actions/notifications';
@ -23,6 +25,7 @@ const select = (state, props) => ({
costInfo: makeSelectCostInfoForUri(props.uri)(state), costInfo: makeSelectCostInfoForUri(props.uri)(state),
myChannels: selectMyChannelClaims(state), myChannels: selectMyChannelClaims(state),
isLivestreamClaim: makeSelectClaimIsStreamPlaceholder(props.uri)(state), isLivestreamClaim: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
reactionsDisabled: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_COMMENTS_TAG)(state),
}); });
const perform = (dispatch) => ({ const perform = (dispatch) => ({

View file

@ -26,6 +26,7 @@ type Props = {
doToast: ({ message: string }) => void, doToast: ({ message: string }) => void,
clearPlayingUri: () => void, clearPlayingUri: () => void,
isLivestreamClaim: boolean, isLivestreamClaim: boolean,
reactionsDisabled: boolean,
}; };
function FileActions(props: Props) { function FileActions(props: Props) {
@ -42,6 +43,7 @@ function FileActions(props: Props) {
clearPlayingUri, clearPlayingUri,
doToast, doToast,
isLivestreamClaim, isLivestreamClaim,
reactionsDisabled,
} = props; } = props;
const { const {
push, push,
@ -82,7 +84,7 @@ function FileActions(props: Props) {
const lhsSection = ( const lhsSection = (
<> <>
{ENABLE_FILE_REACTIONS && <FileReactions uri={uri} />} {ENABLE_FILE_REACTIONS && !reactionsDisabled && <FileReactions uri={uri} />}
<ClaimSupportButton uri={uri} fileAction /> <ClaimSupportButton uri={uri} fileAction />
<Button <Button
button="alt" button="alt"

View file

@ -1,10 +1,12 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { makeSelectClaimForUri, makeSelectThumbnailForUri } from 'lbry-redux'; import { makeSelectClaimForUri, makeSelectTagInClaimOrChannelForUri, makeSelectThumbnailForUri } from 'lbry-redux';
import LivestreamLayout from './view'; import LivestreamLayout from './view';
import { DISABLE_COMMENTS_TAG } from 'constants/tags';
const select = (state, props) => ({ const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state), claim: makeSelectClaimForUri(props.uri)(state),
thumbnail: makeSelectThumbnailForUri(props.uri)(state), thumbnail: makeSelectThumbnailForUri(props.uri)(state),
chatDisabled: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_COMMENTS_TAG)(state),
}); });
export default connect(select)(LivestreamLayout); export default connect(select)(LivestreamLayout);

View file

@ -10,10 +10,11 @@ type Props = {
claim: ?StreamClaim, claim: ?StreamClaim,
isLive: boolean, isLive: boolean,
activeViewers: number, activeViewers: number,
chatDisabled: boolean,
}; };
export default function LivestreamLayout(props: Props) { export default function LivestreamLayout(props: Props) {
const { claim, uri, isLive, activeViewers } = props; const { claim, uri, isLive, activeViewers, chatDisabled } = props;
const isMobile = useIsMobile(); const isMobile = useIsMobile();
if (!claim || !claim.signing_channel) { if (!claim || !claim.signing_channel) {
@ -36,6 +37,14 @@ export default function LivestreamLayout(props: Props) {
</div> </div>
</div> </div>
{Boolean(chatDisabled) && (
<div className="help--notice">
{__('%channel% has disabled chat for this stream. Enjoy!', {
channel: channelName || __('This channel'),
})}
</div>
)}
{!isLive && ( {!isLive && (
<div className="help--notice"> <div className="help--notice">
{__("%channel% isn't live right now, but the chat is! Check back later to watch the stream.", { {__("%channel% isn't live right now, but the chat is! Check back later to watch the stream.", {

View file

@ -29,6 +29,7 @@ type Props = {
videoTheaterMode: boolean, videoTheaterMode: boolean,
isMarkdown?: boolean, isMarkdown?: boolean,
livestream?: boolean, livestream?: boolean,
chatDisabled: boolean,
rightSide?: Node, rightSide?: Node,
backout: { backout: {
backLabel?: string, backLabel?: string,
@ -53,6 +54,7 @@ function Page(props: Props) {
isMarkdown = false, isMarkdown = false,
livestream, livestream,
rightSide, rightSide,
chatDisabled,
} = props; } = props;
const { const {
@ -112,7 +114,7 @@ function Page(props: Props) {
'main--file-page': filePage, 'main--file-page': filePage,
'main--markdown': isMarkdown, 'main--markdown': isMarkdown,
'main--theater-mode': isOnFilePage && videoTheaterMode && !livestream, 'main--theater-mode': isOnFilePage && videoTheaterMode && !livestream,
'main--livestream': livestream, 'main--livestream': livestream && !chatDisabled,
})} })}
> >
{children} {children}

View file

@ -1,15 +1,17 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { doResolveUri, makeSelectClaimForUri } from 'lbry-redux'; import { doResolveUri, makeSelectTagInClaimOrChannelForUri, makeSelectClaimForUri } from 'lbry-redux';
import { doSetPlayingUri } from 'redux/actions/content'; import { doSetPlayingUri } from 'redux/actions/content';
import { doUserSetReferrer } from 'redux/actions/user'; import { doUserSetReferrer } from 'redux/actions/user';
import { selectUserVerifiedEmail } from 'redux/selectors/user'; import { selectUserVerifiedEmail } from 'redux/selectors/user';
import { selectHasUnclaimedRefereeReward } from 'redux/selectors/rewards'; import { selectHasUnclaimedRefereeReward } from 'redux/selectors/rewards';
import { DISABLE_COMMENTS_TAG } from 'constants/tags';
import LivestreamPage from './view'; import LivestreamPage from './view';
const select = (state, props) => ({ const select = (state, props) => ({
hasUnclaimedRefereeReward: selectHasUnclaimedRefereeReward(state), hasUnclaimedRefereeReward: selectHasUnclaimedRefereeReward(state),
isAuthenticated: selectUserVerifiedEmail(state), isAuthenticated: selectUserVerifiedEmail(state),
channelClaim: makeSelectClaimForUri(props.uri)(state), channelClaim: makeSelectClaimForUri(props.uri)(state),
chatDisabled: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_COMMENTS_TAG)(state),
}); });
export default connect(select, { export default connect(select, {

View file

@ -14,10 +14,11 @@ type Props = {
isAuthenticated: boolean, isAuthenticated: boolean,
doUserSetReferrer: (string) => void, doUserSetReferrer: (string) => void,
channelClaim: ChannelClaim, channelClaim: ChannelClaim,
chatDisabled: boolean,
}; };
export default function LivestreamPage(props: Props) { export default function LivestreamPage(props: Props) {
const { uri, claim, doSetPlayingUri, isAuthenticated, doUserSetReferrer, channelClaim } = props; const { uri, claim, doSetPlayingUri, isAuthenticated, doUserSetReferrer, channelClaim, chatDisabled } = props;
const [activeViewers, setActiveViewers] = React.useState(0); const [activeViewers, setActiveViewers] = React.useState(0);
const [isLive, setIsLive] = React.useState(false); const [isLive, setIsLive] = React.useState(false);
const livestreamChannelId = channelClaim && channelClaim.signing_channel && channelClaim.signing_channel.claim_id; const livestreamChannelId = channelClaim && channelClaim.signing_channel && channelClaim.signing_channel.claim_id;
@ -112,7 +113,13 @@ export default function LivestreamPage(props: Props) {
}, [doSetPlayingUri]); }, [doSetPlayingUri]);
return ( return (
<Page className="file-page" noFooter livestream rightSide={<LivestreamComments uri={uri} />}> <Page
className="file-page"
noFooter
livestream
chatDisabled={chatDisabled}
rightSide={!chatDisabled && <LivestreamComments uri={uri} />}
>
<LivestreamLayout uri={uri} activeViewers={activeViewers} isLive={isLive} /> <LivestreamLayout uri={uri} activeViewers={activeViewers} isLive={isLive} />
</Page> </Page>
); );