mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-26 14:56:14 +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 Link from 'next/link';
import { differenceInSeconds } from "date-fns"; import { differenceInSeconds } from "date-fns";
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { Layout, Menu } from 'antd'; import { Layout, Menu, Popover } from 'antd';
import { import {
SettingOutlined, SettingOutlined,
@ -38,6 +38,11 @@ export default function MainLayout(props) {
const streamDurationString = online ? parseSecondsToDurationString(differenceInSeconds(new Date(), new Date(broadcaster.time))) : ""; 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 statusIcon = online ? <PlayCircleFilled /> : <MinusSquareFilled />;
const statusMessage = online ? `Online ${streamDurationString}` : "Offline"; const statusMessage = online ? `Online ${streamDurationString}` : "Offline";
@ -145,10 +150,12 @@ export default function MainLayout(props) {
<Layout> <Layout>
<Header className={adminStyles.header}> <Header className={adminStyles.header}>
<Popover content={content} title="Thumbnail" trigger="hover">
<div className={adminStyles.statusIndicatorContainer}> <div className={adminStyles.statusIndicatorContainer}>
<span className={adminStyles.statusLabel}>{statusMessage}</span> <span className={adminStyles.statusLabel}>{statusMessage}</span>
<span className={adminStyles.statusIcon}>{statusIcon}</span> <span className={adminStyles.statusIcon}>{statusIcon}</span>
</div> </div>
</Popover>
</Header> </Header>
<Content className={adminStyles.contentMain}>{children}</Content> <Content className={adminStyles.contentMain}>{children}</Content>