Add action buttons and status bar

web/stories/ActionButton.stories.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ExternalActionButton from '../components/action-buttons/ExternalActionButton';
+import ActionButton from '../components/action-buttons/ActionButton';
 
 export default {
   title: 'owncast/External action button',
-  component: ExternalActionButton,
+  component: ActionButton,
   parameters: {},
-} as ComponentMeta<typeof ExternalActionButton>;
+} as ComponentMeta<typeof ActionButton>;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof ExternalActionButton> = args => (
-  <ExternalActionButton {...args} />
-);
+const Template: ComponentStory<typeof ActionButton> = args => <ActionButton {...args} />;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Example1 = Template.bind({});

web/stories/ActionButtonRow.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ActionButtonRow from '../components/action-buttons/ActionButtonRow';
+import ActionButton from '../components/action-buttons/ActionButton';
+
+export default {
+  title: 'owncast/External action button row',
+  component: ActionButtonRow,
+  parameters: {},
+} as ComponentMeta<typeof ActionButtonRow>;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory<typeof ActionButtonRow> = args => (
+  <ActionButtonRow>{args.buttons}</ActionButtonRow>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const actions = [
+  {
+    url: 'https://owncast.online/docs',
+    title: 'Documentation',
+    description: 'Owncast Documentation',
+    icon: 'https://owncast.online/images/logo.svg',
+    color: '#5232c8',
+    openExternally: false,
+  },
+  {
+    url: 'https://opencollective.com/embed/owncast/donate',
+    title: 'Support Owncast',
+    description: 'Contribute to Owncast',
+    icon: 'https://opencollective.com/static/images/opencollective-icon.svg',
+    color: '#2b4863',
+    openExternally: false,
+  },
+];
+
+const buttons = actions.map(action => <ActionButton action={action} />);
+export const Example1 = Template.bind({});
+Example1.args = {
+  buttons,
+};

web/stories/Colors.stories.mdx

@@ -24,7 +24,7 @@ import {Color, ColorRow} from './Color';
 <ColorRow colors={['theme-text-color', 'theme-text-color-secondary', 'theme-link-color']} />
 
 ## Backgrounds
-<ColorRow colors={['theme-background', 'popover-background']} />
+<ColorRow colors={['theme-background', 'theme-background-secondary', 'popover-background']} />
 
 ## Status
 <ColorRow colors={['theme-success-color', 'theme-info-color', 'theme-warning-color', 'theme-error-color']} />

web/stories/ExternalActionButtonRow.stories.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ExternalActionButtonRow from '../components/action-buttons/ExternalActionButtonRow';
-
-export default {
-  title: 'owncast/External action button row',
-  component: ExternalActionButtonRow,
-  parameters: {},
-} as ComponentMeta<typeof ExternalActionButtonRow>;
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof ExternalActionButtonRow> = args => (
-  <ExternalActionButtonRow {...args} />
-);
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Example1 = Template.bind({});
-Example1.args = {
-  actions: [
-    {
-      url: 'https://owncast.online/docs',
-      title: 'Documentation',
-      description: 'Owncast Documentation',
-      icon: 'https://owncast.online/images/logo.svg',
-      color: '#5232c8',
-      openExternally: false,
-    },
-    {
-      url: 'https://opencollective.com/embed/owncast/donate',
-      title: 'Support Owncast',
-      description: 'Contribute to Owncast',
-      icon: 'https://opencollective.com/static/images/opencollective-icon.svg',
-      color: '#2b4863',
-      openExternally: false,
-    },
-  ],
-};

web/stories/StatusBar.stories.tsx

@@ -1,25 +1,25 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import StatusBar from '../components/video/StatusBar';
+import { subHours } from 'date-fns';
+import Statusbar from '../components/ui/Statusbar/Statusbar';
 
 export default {
   title: 'owncast/Status bar',
-  component: StatusBar,
+  component: Statusbar,
   parameters: {},
-} as ComponentMeta<typeof StatusBar>;
+} as ComponentMeta<typeof Statusbar>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof StatusBar> = args => <StatusBar {...args} />;
+const Template: ComponentStory<typeof Statusbar> = args => <Statusbar {...args} />;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Online = Template.bind({});
 Online.args = {
   online: true,
-  viewers: 42,
-  timer: '10:42',
+  viewerCount: 42,
+  lastConnectTime: subHours(new Date(), 3),
 };
 
 export const Offline = Template.bind({});
 Offline.args = {
   online: false,
+  lastDisconnectTime: subHours(new Date(), 3),
 };