lbry-desktop/ui/component/fileViewCount/view.jsx
Dan Peterson 038692cafc
Feature livestream scheduling (#458)
Add livestream scheduling feature
Also supports back to back streams, and will notify on a non-active stream of an active one.
2021-12-16 16:59:13 -05:00

44 lines
1.3 KiB
JavaScript

// @flow
import { SIMPLE_SITE } from 'config';
import React from 'react';
import HelpLink from 'component/common/help-link';
type Props = {
livestream?: boolean,
isLive?: boolean,
// --- redux ---
claimId: ?string,
fetchViewCount: (string) => void,
uri: string,
viewCount: string,
activeViewers?: number,
};
function FileViewCount(props: Props) {
const { claimId, fetchViewCount, viewCount, livestream, activeViewers, isLive = false } = props;
// @Note: it's important this only runs once on initial render.
React.useEffect(() => {
if (claimId) {
fetchViewCount(claimId);
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps
const formattedViewCount = Number(viewCount).toLocaleString();
return (
<span className="media__subtitle--centered">
{livestream &&
__('%viewer_count% currently %viewer_state%', {
viewer_count: activeViewers === undefined ? '...' : activeViewers,
viewer_state: isLive ? __('watching') : __('waiting'),
})}
{!livestream &&
activeViewers === undefined &&
(viewCount !== 1 ? __('%view_count% views', { view_count: formattedViewCount }) : __('1 view'))}
{!SIMPLE_SITE && <HelpLink href="https://odysee.com/@OdyseeHelp:b/OdyseeBasics:c" />}
</span>
);
}
export default FileViewCount;