refactor(stories): co-locate stories with components (#2078)

* refactor: move ActionButton component

* refactor: move BanUserButton component

* refactor: move ChatActionMessage component

* refactor: move ChatContainer component

* refactor: move AuthModal component

* refactor: move BrowserNotifyModal component

* refactor: move ChatUserMessage component

* refactor: move ChatJoinMessage component

* refactor: move ChatTextField component

* refactor: move ChatUserBadge component

* refactor: move FollowerCollection and SingleFollower components

* fix: bad import path

* refactor: move FollowModal component

* refactor: move Modal component

* refactor: move ContentHeader component

* refactor: move ChatSystemMessage component

* refactor: move Header component

* refactor: move Footer component

* refactor: move StatusBar component

* refactor: move OfflineBanner component

* refactor: move OwncastPlayer component

* refactor: move IndieAuthModal component

* refactor: move SocialLinks component

* refactor: move VideoPoster component

* refactor: move FollowModal component

* refactor: move FediAuthModal.tsx component

* refactor: move UserDropdown component

* refactor: move ChatSocialMessage component

* refactor: move Logo component

* refactor: move NotifyReminderPopup component

* refactor: move NameChangeModal component

* refactor: move FatalErrorStateModal component

* refactor: move ChatModeratorNotification component

* refactor: move ChatModerationActionMenu and ChatModerationDetailsModal components

* refactor: move CustomPageContent component

* refactor: move storybook Introduction file

* refactor: update storybook story import path

* refactor: move storybook preview styles

* refactor: move storybook doc pages

* refactor: move Color and ImageAsset components

* fix: bad import path

* fix: bad import path in story file

web/components/video/VideoPoster/VideoPoster.module.scss

@@ -0,0 +1,7 @@
+.poster {
+  background-color: black;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}

web/components/video/VideoPoster/VideoPoster.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import VideoPoster from './VideoPoster';
+
+export default {
+  title: 'owncast/Player/Video poster',
+  component: VideoPoster,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+- Sits on top of the video player when playback is not taking place.
+- Shows the instance logo when the video is offline.
+- Initial image is the logo when online.
+- When the stream is online, will transition, via cross-fades, through the thumbnail.
+- Will be removed when playback starts.`,
+      },
+    },
+  },
+} as ComponentMeta<typeof VideoPoster>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof VideoPoster> = args => <VideoPoster {...args} />;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Example1 = Template.bind({});
+Example1.args = {
+  initialSrc: 'https://watch.owncast.online/logo',
+  src: 'https://watch.owncast.online/thumbnail.jpg',
+  online: true,
+};
+
+export const Example2 = Template.bind({});
+Example2.args = {
+  initialSrc: 'https://listen.batstationrad.io/logo',
+  src: 'https://listen.batstationrad.io//thumbnail.jpg',
+  online: true,
+};
+
+export const Offline = Template.bind({});
+Offline.args = {
+  initialSrc: 'https://watch.owncast.online/logo',
+  src: 'https://watch.owncast.online/thumbnail.jpg',
+  online: false,
+};

web/components/video/VideoPoster/VideoPoster.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import CrossfadeImage from '../../ui/CrossfadeImage/CrossfadeImage';
+import s from './VideoPoster.module.scss';
+
+const REFRESH_INTERVAL = 20_000;
+
+interface Props {
+  initialSrc: string;
+  src: string;
+  online: boolean;
+}
+
+export default function VideoPoster(props: Props) {
+  const { online, initialSrc, src: base } = props;
+
+  let timer: ReturnType<typeof setInterval>;
+  const [src, setSrc] = useState(initialSrc);
+  const [duration, setDuration] = useState('0s');
+
+  useEffect(() => {
+    clearInterval(timer);
+    timer = setInterval(() => {
+      if (duration === '0s') {
+        setDuration('3s');
+      }
+      setSrc(`${base}?${Date.now()}`);
+    }, REFRESH_INTERVAL);
+  }, []);
+
+  return (
+    <div className={s.poster}>
+      {!online && <img src={initialSrc} alt="logo" />}
+
+      {online && (
+        <CrossfadeImage
+          src={src}
+          duration={duration}
+          objectFit="cover"
+          width="100%"
+          height="100%"
+        />
+      )}
+    </div>
+  );
+}