mirror of
https://github.com/owncast/owncast.git
synced 2025-11-02 20:23:29 +08:00
87c7571d5c
* restyle and relayout embed screen to account for smaller screen displays. - address https://github.com/owncast/owncast/issues/3683 to address overflow issues - address https://github.com/owncast/owncast/issues/4051 to move the name of the stream * Javascript formatting autofixes * clean up; restore package lock * accommodate cases when there's no follow option; put follow form on one line, but wrap if need * clean up * separate out follow form into separate standalone component to be used in multiple places * improve follow error styling; rm defaultProps for Modal to get rid of warning * improve styling of follow form and components for legibility * prettyify scss * prettyify scss again * one more time * prettify ant file * simplify layout, center everything * just use gap * tweak and lint * lint, again --------- Co-authored-by: Owncast <owncast@owncast.online>
84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
/* 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<OfflineEmbedProps> = ({
|
|
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 (
|
|
<div>
|
|
<Head>
|
|
<title>{streamName}</title>
|
|
</Head>
|
|
<div className={classNames(styles.offlineContainer)}>
|
|
<div className={styles.content}>
|
|
<Title level={1} className={styles.headerContainer}>
|
|
<div className={styles.pageLogo} style={{ backgroundImage: `url(${image})` }} />
|
|
<div className={styles.streamName}>{streamName}</div>
|
|
</Title>
|
|
|
|
<div className={styles.messageContainer}>
|
|
<Title level={2} className={styles.offlineTitle}>
|
|
This stream is not currently live.
|
|
</Title>
|
|
<div className={styles.message} dangerouslySetInnerHTML={{ __html: subtitle }} />
|
|
</div>
|
|
|
|
{currentMode === EmbedMode.CanFollow && (
|
|
<>
|
|
<Button className={styles.followButton} type="primary" onClick={followButtonPressed}>
|
|
Follow Server
|
|
</Button>
|
|
<Modal
|
|
title={`Follow ${streamName}`}
|
|
open={showFollowModal}
|
|
handleCancel={() => setShowFollowModal(false)}
|
|
>
|
|
<FollowForm />
|
|
</Modal>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|