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/OwncastPlayer/OwncastPlayer.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+import OwncastPlayer from './OwncastPlayer';
+
+const streams = {
+  DemoServer: `https://watch.owncast.online/hls/stream.m3u8`,
+  RetroStrangeTV: `https://live.retrostrange.com/hls/stream.m3u8`,
+  localhost: `http://localhost:8080/hls/stream.m3u8`,
+};
+
+export default {
+  title: 'owncast/Player/Player',
+  component: OwncastPlayer,
+  argTypes: {
+    source: {
+      options: Object.keys(streams),
+      mapping: streams,
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  parameters: {},
+} as ComponentMeta<typeof OwncastPlayer>;
+
+const Template: ComponentStory<typeof OwncastPlayer> = args => (
+  <RecoilRoot>
+    <OwncastPlayer {...args} />
+  </RecoilRoot>
+);
+
+export const LiveDemo = Template.bind({});
+LiveDemo.args = {
+  online: true,
+  source: 'https://watch.owncast.online/hls/stream.m3u8',
+};

web/components/video/OwncastPlayer/OwncastPlayer.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useHotkeys } from 'react-hotkeys-hook';
-import VideoJS from './player';
-import ViewerPing from './viewer-ping';
-import VideoPoster from './VideoPoster';
-import { getLocalStorage, setLocalStorage } from '../../utils/localStorage';
-import { isVideoPlayingAtom, clockSkewAtom } from '../stores/ClientConfigStore';
-import PlaybackMetrics from './metrics/playback';
-import createVideoSettingsMenuButton from './settings-menu';
-import LatencyCompensator from './latencyCompensator';
+import VideoJS from '../player';
+import ViewerPing from '../viewer-ping';
+import VideoPoster from '../VideoPoster/VideoPoster';
+import { getLocalStorage, setLocalStorage } from '../../../utils/localStorage';
+import { isVideoPlayingAtom, clockSkewAtom } from '../../stores/ClientConfigStore';
+import PlaybackMetrics from '../metrics/playback';
+import createVideoSettingsMenuButton from '../settings-menu';
+import LatencyCompensator from '../latencyCompensator';
 
 const VIDEO_CONFIG_URL = '/api/video/variants';
 const PLAYER_VOLUME = 'owncast_volume';

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import CrossfadeImage from '../ui/CrossfadeImage/CrossfadeImage';
+import CrossfadeImage from '../../ui/CrossfadeImage/CrossfadeImage';
 import s from './VideoPoster.module.scss';
 
 const REFRESH_INTERVAL = 20_000;