New offline embed (#3599)

* WIP

* feat(web): add new offline embed view. First step of #2917

* feat(web): support remote fediverse follow flow from embed

* feat(chore): add back offline video embed browser test

web/pages/embed/video/index.tsx

@@ -10,7 +10,6 @@ import {
   serverStatusState,
   appStateAtom,
 } from '../../../components/stores/ClientConfigStore';
-import { OfflineBanner } from '../../../components/ui/OfflineBanner/OfflineBanner';
 import { Statusbar } from '../../../components/ui/Statusbar/Statusbar';
 import { OwncastPlayer } from '../../../components/video/OwncastPlayer/OwncastPlayer';
 import { ClientConfig } from '../../../interfaces/client-config.model';
@@ -18,17 +17,18 @@ import { ServerStatus } from '../../../interfaces/server-status.model';
 import { AppStateOptions } from '../../../components/stores/application-state';
 import { Theme } from '../../../components/theme/Theme';
 import styles from './VideoEmbed.module.scss';
+import { OfflineEmbed } from '../../../components/ui/OfflineEmbed/OfflineEmbed';
 
 export default function VideoEmbed() {
   const status = useRecoilValue<ServerStatus>(serverStatusState);
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
   const appState = useRecoilValue<AppStateOptions>(appStateAtom);
 
-  const { name } = clientConfig;
+  const { name, summary, offlineMessage, federation } = clientConfig;
 
-  const { offlineMessage } = clientConfig;
   const { viewerCount, lastConnectTime, lastDisconnectTime, streamTitle } = status;
   const online = useRecoilValue<boolean>(isOnlineSelector);
+  const { enabled: socialEnabled } = federation;
 
   const router = useRouter();
 
@@ -48,6 +48,7 @@ export default function VideoEmbed() {
   );
 
   const initiallyMuted = query.initiallyMuted === 'true';
+  const supportsSocialFollow = socialEnabled && query.supportsSocialFollow !== 'false';
 
   const loadingState = <Skeleton active style={{ padding: '10px' }} paragraph={{ rows: 10 }} />;
 
@@ -57,11 +58,11 @@ export default function VideoEmbed() {
   }, []);
 
   const offlineState = (
-    <OfflineBanner
+    <OfflineEmbed
       streamName={name}
-      customText={offlineMessage}
-      lastLive={lastDisconnectTime}
-      notificationsEnabled={false}
+      subtitle={offlineMessage || summary}
+      image="https://placehold.co/600x400/orange/white"
+      supportsFollows={supportsSocialFollow}
     />
   );