/* eslint-disable react/no-danger */ import { FC, useEffect, useState } from 'react'; import classNames from 'classnames'; import Head from 'next/head'; import { Button, Typography } from 'antd'; import styles from './OfflineEmbed.module.scss'; import { Modal } from '../Modal/Modal'; import { FollowForm } from '../../modals/FollowModal/FollowForm'; const { Title } = Typography; export type OfflineEmbedProps = { streamName: string; subtitle?: string; image: string; supportsFollows: boolean; }; enum EmbedMode { CannotFollow = 1, CanFollow, } export const OfflineEmbed: FC = ({ streamName, subtitle, image, supportsFollows, }) => { const [currentMode, setCurrentMode] = useState(EmbedMode.CanFollow); const [showFollowModal, setShowFollowModal] = useState(false); useEffect(() => { if (!supportsFollows) { setCurrentMode(EmbedMode.CannotFollow); } else if (currentMode === EmbedMode.CannotFollow) { setCurrentMode(EmbedMode.CanFollow); } }, [supportsFollows]); const followButtonPressed = async () => { setShowFollowModal(true); }; return (
{streamName}
<div className={styles.pageLogo} style={{ backgroundImage: `url(${image})` }} /> <div className={styles.streamName}>{streamName}</div>
This stream is not currently live.
{currentMode === EmbedMode.CanFollow && ( <> setShowFollowModal(false)} > )}
); };