mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 21:03:19 +03:00
Code Issues Projects Releases Packages Wiki Activity

Add popover with thumbnail

Browse source
This commit is contained in:
Gabe Kangas 2020-11-11 22:54:27 -08:00
parent d14743c396
commit 500e20281c
1 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
web/pages/components/main-layout.tsx
View file

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import Link from 'next/link';
import { differenceInSeconds } from "date-fns";
import { useRouter } from 'next/router';
import { Layout, Menu } from 'antd';
import { Layout, Menu, Popover } from 'antd';
import {
SettingOutlined,
@ -38,6 +38,11 @@ export default function MainLayout(props) {
const streamDurationString = online ? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time))) : "";
const content = (
<div>
<img src="/thumbnail.jpg" width="200px" />
</div>
);
const statusIcon = online ? <PlayCircleFilled /> : <MinusSquareFilled />;
const statusMessage = online ? `Online ${streamDurationString}` : "Offline";
@ -145,10 +150,12 @@ export default function MainLayout(props) {
<Layout>
<Header className={adminStyles.header}>
<Popover content={content} title="Thumbnail" trigger="hover">
<div className={adminStyles.statusIndicatorContainer}>
<span className={adminStyles.statusLabel}>{statusMessage}</span>
<span className={adminStyles.statusIcon}>{statusIcon}</span>
</div>
</Popover>
</Header>
<Content className={adminStyles.contentMain}>{children}</Content>