lbry-desktop/ui/component/livestreamLayout/view.jsx

63 lines
1.8 KiB
React
Raw Normal View History

// @flow
2021-03-18 18:21:49 +01:00
import { BITWAVE_EMBED_URL } from 'constants/livestream';
import React from 'react';
2021-03-14 04:42:21 +01:00
import FileTitleSection from 'component/fileTitleSection';
import LivestreamComments from 'component/livestreamComments';
2021-04-23 21:59:48 +02:00
import { useIsMobile } from 'effects/use-screensize';
type Props = {
uri: string,
claim: ?StreamClaim,
2021-03-18 18:21:49 +01:00
isLive: boolean,
activeViewers: number,
chatDisabled: boolean,
};
export default function LivestreamLayout(props: Props) {
const { claim, uri, isLive, activeViewers, chatDisabled } = props;
2021-04-23 21:59:48 +02:00
const isMobile = useIsMobile();
2021-03-19 21:14:31 +01:00
if (!claim || !claim.signing_channel) {
return null;
}
2021-03-19 21:14:31 +01:00
const channelName = claim.signing_channel.name;
const channelClaimId = claim.signing_channel.claim_id;
2021-03-18 18:21:49 +01:00
return (
<>
<div className="section card-stack">
<div className="file-render file-render--video livestream">
<div className="file-viewer">
2021-03-19 21:14:31 +01:00
<iframe
src={`${BITWAVE_EMBED_URL}/${channelClaimId}?skin=odysee&autoplay=1`}
scrolling="no"
allowFullScreen
/>
</div>
</div>
{Boolean(chatDisabled) && (
<div className="help--notice">
2021-06-03 18:05:25 +02:00
{__('%channel% has disabled chat for this stream. Enjoy the stream!', {
channel: channelName || __('This channel'),
})}
</div>
)}
2021-03-18 18:21:49 +01:00
{!isLive && (
<div className="help--notice">
{__("%channel% isn't live right now, but the chat is! Check back later to watch the stream.", {
channel: channelName || __('This channel'),
})}
</div>
)}
2021-04-23 21:59:48 +02:00
{isMobile && <LivestreamComments uri={uri} />}
<FileTitleSection uri={uri} livestream isLive={isLive} activeViewers={activeViewers} />
</div>
</>
);
}