Add player poster

web/stories/Video.stories.tsx

@@ -3,9 +3,9 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import OwncastPlayer from '../components/video/OwncastPlayer';
 
 const streams = {
-  DemoServer: `https://watch.owncast.online`,
-  RetroStrangeTV: `https://live.retrostrange.com`,
-  localhost: `http://localhost:8080`,
+  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 {
@@ -28,5 +28,5 @@ const Template: ComponentStory<typeof OwncastPlayer> = args => <OwncastPlayer {.
 export const LiveDemo = Template.bind({});
 LiveDemo.args = {
   online: true,
-  source: 'https://watch.owncast.online',
+  source: 'https://watch.owncast.online/hls/stream.m3u8',
 };

web/stories/VideoPoster.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import VideoPoster from '../components/video/VideoPoster';
+
+export default {
+  title: 'owncast/Video poster',
+  component: VideoPoster,
+  parameters: {},
+} 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,
+};