0

Use icon instead of the word viewers

This commit is contained in:
Gabe Kangas 2022-05-16 23:20:56 -07:00
parent 8d7a5d6d6e
commit f6eeee2463
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA

View File

@ -1,6 +1,7 @@
import formatDistanceToNow from 'date-fns/formatDistanceToNow'; import formatDistanceToNow from 'date-fns/formatDistanceToNow';
import intervalToDuration from 'date-fns/intervalToDuration'; import intervalToDuration from 'date-fns/intervalToDuration';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { EyeOutlined } from '@ant-design/icons';
import s from './Statusbar.module.scss'; import s from './Statusbar.module.scss';
interface Props { interface Props {
@ -35,13 +36,15 @@ export default function Statusbar(props: Props) {
const { online, lastConnectTime, lastDisconnectTime, viewerCount } = props; const { online, lastConnectTime, lastDisconnectTime, viewerCount } = props;
let onlineMessage = ''; let onlineMessage = '';
let rightSideMessage = ''; let rightSideMessage: any;
if (online && lastConnectTime) { if (online && lastConnectTime) {
const duration = makeDurationString(new Date(lastConnectTime)); const duration = makeDurationString(new Date(lastConnectTime));
onlineMessage = online ? `Live for ${duration}` : 'Offline'; onlineMessage = online ? `Live for ${duration}` : 'Offline';
rightSideMessage = `${viewerCount > 0 ? `${viewerCount}` : 'No'} ${ rightSideMessage = (
viewerCount === 1 ? 'viewer' : 'viewers' <span>
}`; <EyeOutlined /> {viewerCount}
</span>
);
} else { } else {
onlineMessage = 'Offline'; onlineMessage = 'Offline';
if (lastDisconnectTime) { if (lastDisconnectTime) {