{streamName}

/* eslint-disable react/no-danger */ import { FC, useEffect, useState } from 'react'; import classNames from 'classnames'; import Head from 'next/head'; import { Button, Input, Space, Spin, Alert, Typography } from 'antd'; import styles from './OfflineEmbed.module.scss'; import { isValidFediverseAccount } from '../../../utils/validators'; const { Title } = Typography; const ENDPOINT = '/api/remotefollow'; export type OfflineEmbedProps = { streamName: string; subtitle?: string; image: string; supportsFollows: boolean; }; enum EmbedMode { CannotFollow = 1, CanFollow, FollowPrompt, InProgress, } export const OfflineEmbed: FC = ({ streamName, subtitle, image, supportsFollows, }) => { const [currentMode, setCurrentMode] = useState(EmbedMode.CanFollow); const [remoteAccount, setRemoteAccount] = useState(null); const [valid, setValid] = useState(false); const [loading, setLoading] = useState(false); const [errorMessage, setErrorMessage] = useState(null); useEffect(() => { if (!supportsFollows) { setCurrentMode(EmbedMode.CannotFollow); } }, [supportsFollows]); const followButtonPressed = async () => { setCurrentMode(EmbedMode.FollowPrompt); }; const remoteFollowButtonPressed = async () => { setLoading(true); setCurrentMode(EmbedMode.CannotFollow); try { const sanitizedAccount = remoteAccount.replace(/^@+/, ''); const request = { account: sanitizedAccount }; const rawResponse = await fetch(ENDPOINT, { method: 'POST', body: JSON.stringify(request), }); const result = await rawResponse.json(); if (result.redirectUrl) { window.open(result.redirectUrl, '_blank'); } if (!result.success) { setErrorMessage(result.message); setLoading(false); return; } if (!result.redirectUrl) { setErrorMessage('Unable to follow.'); setLoading(false); return; } } catch (e) { setErrorMessage(e.message); } setLoading(false); }; const handleAccountChange = a => { setRemoteAccount(a); if (isValidFediverseAccount(a)) { setValid(true); } else { setValid(false); } }; return (

{streamName}

This stream is not currently live.

{streamName}

{errorMessage && ( )} {currentMode === EmbedMode.CanFollow && ( )} {currentMode === EmbedMode.InProgress && ( Follow the instructions on your Fediverse server to complete the follow. )} {currentMode === EmbedMode.FollowPrompt && (

handleAccountChange(e.target.value)} placeholder="Your fediverse account @account@server" defaultValue={remoteAccount} />

You'll be redirected to your Fediverse server and asked to confirm the action.

)}

); };