Add stories to display screenshots. Not yet automated.

web/.storybook/stories-category-doc-pages/screenshots/android/Screenshots-android-stock-browser.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/Android/Stock Browser"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-offline.png"
+  alt="Android Browser offline"
+  height="1000px"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-online.png"
+  alt="Android Browser offline"
+  height="1000px"
+/>
+
+</Story>

web/.storybook/stories-category-doc-pages/screenshots/ipad/Screenshots-iPad-landscape-safari.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/iPad Landscape/Safari"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
+  alt="macOS Safari offline"
+  width="800px"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
+  alt="macOS Safari online"
+  width="800px"
+/>
+
+</Story>

web/.storybook/stories-category-doc-pages/screenshots/ipad/Screenshots-iPad-portrait-safari.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/iPad Portrait/Safari"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-offline.png"
+  alt="macOS Safari offline"
+  width="800px"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-online.png"
+  alt="macOS Safari online"
+  width="800px"
+/>
+
+</Story>

web/.storybook/stories-category-doc-pages/screenshots/iphone/Screenshots-iPhone-safari-landscape.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/iPhone/Safari/Landscape"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
+  alt="iPhone Safari offline"
+  height="1000px"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
+  alt="iPhone Safari online"
+  height="1000px"
+/>
+
+</Story>

web/.storybook/stories-category-doc-pages/screenshots/iphone/Screenshots-iPhone-safari-portrait.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/iPhone/Safari/Portrait"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
+  alt="iPhone Safari offline"
+  height="1000px"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
+  alt="iPhone Safari online"
+  height="1000px"
+/>
+
+</Story>

web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-chrome.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/macOS/Chrome"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/os-x-ventura-chrome-desktop-default-offline.png"
+  alt="macOS Chrome offline"
+  width="100%"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/os-x-ventura-chrome-desktop-default-online.png"
+  alt="macOS Chrome online"
+  width="100%"
+/>
+
+</Story>

web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-firefox.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/macOS/Firefox"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/os-x-ventura-firefox-desktop-default-offline.png"
+  alt="macOS Chrome offline"
+  width="100%"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/os-x-ventura-firefox-desktop-default-online.png"
+  alt="macOS Chrome online"
+  width="100%"
+/>
+
+</Story>

web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-safari.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/macOS/Safari"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/os-x-ventura-safari-desktop-default-offline.png"
+  alt="macOS Safari offline"
+  width="100%"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/os-x-ventura-safari-desktop-default-online.png"
+  alt="macOS Safari online"
+  width="100%"
+/>
+
+</Story>

web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows-chrome.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/Windows/Chrome"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/windows-11-chrome-desktop-default-offline.png"
+  alt="Windows Chrome offline"
+  width="100%"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/windows-11-chrome-desktop-default-online.png"
+  alt="Windows Chrome online"
+  width="100%"
+/>
+
+</Story>

web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows-firefox.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/Windows/Firefox"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/windows-10-firefox-desktop-default-offline.png"
+  alt="Windows Firefox offline"
+  width="100%"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/windows-10-firefox-desktop-default-online.png"
+  alt="Windows Firefox online"
+  width="100%"
+/>
+
+</Story>

web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows.edge.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/Windows/Edge"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/windows-10-edge-desktop-default-offline.png"
+  alt="Windows Edge offline"
+  width="100%"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/windows-10-edge-desktop-default-online.png"
+  alt="Windows Edge online"
+  width="100%"
+/>
+
+</Story>