Use icon instead of the word viewers
This commit is contained in:
parent
8d7a5d6d6e
commit
f6eeee2463
@ -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) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user