+);
+
+export default {
+ title: 'owncast/Chat/Input text field',
+ component: ChatTextField,
+ parameters: {},
+} as ComponentMeta;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory = args => ;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});
diff --git a/web/stories/ChatUserMessage.stories.tsx b/web/stories/ChatUserMessage.stories.tsx
new file mode 100644
index 000000000..02a7ee202
--- /dev/null
+++ b/web/stories/ChatUserMessage.stories.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import UserChatMessage from '../components/chat/ChatUserMessage';
+
+export default {
+ title: 'owncast/Chat/Messages/Standard user',
+ component: UserChatMessage,
+ parameters: {},
+} as ComponentMeta;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory = args => ;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Basic = Template.bind({});
diff --git a/web/stories/CustomPageContent.stories.tsx b/web/stories/CustomPageContent.stories.tsx
new file mode 100644
index 000000000..6cd9aaac4
--- /dev/null
+++ b/web/stories/CustomPageContent.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import CustomPageContent from '../components/CustomPageContent';
+
+export default {
+ title: 'owncast/Custom page content',
+ component: CustomPageContent,
+ parameters: {},
+} as ComponentMeta;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Template: ComponentStory = args => ;
+
+export const Example1 = Template.bind({});
+Example1.args = {
+ content: `"\u003cp\u003eOwncast TV is a 24/7 live stream run by the Owncast project as an example of the software in use. Learn more about how you can have your own live stream that you completely control at \u003ca href=\"https://owncast.online\"\u003eowncast.online\u003c/a\u003e.\u003c/p\u003e\n\u003cp\u003eThis example instance shows how you can customize the page by changing things like fonts and colors as well as how you can add custom action buttons such as a donation button.\u003c/p\u003e\n\u003cp\u003eStay tuned in to learn about Owncast, hear from some streamers about their experiences using it, some bits and pieces of Owncast promo material, and highlights from other projects that are pretty cool.\u003c/p\u003e\n\u003cp\u003eBut when you've seen what we have to share with you, do yourself a favor and visit the \u003ca href=\"https://directory.owncast.online\"\u003eOwncast Directory\u003c/a\u003e and find an awesome stream to check out!\u003c/p\u003e\n\u003chr\u003e\n\u003ch2\u003eLinks to content seen in this stream\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://owncast.online/quickstart/\"\u003eOwncast Install Quickstart\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://directory.owncast.online\"\u003eOwncast Directory\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://creativecommons.org\"\u003eCreative Commons\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://tilvids.com\"\u003eTILVids\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://studio.blender.org/\"\u003eBlender Studio\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://archive.org/details/computerchronicles\"\u003eComputer Chronicles\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://joinmastodon.org\"\u003eMastodon\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e",`,
+};
+
+export const Example2 = Template.bind({});
+Example2.args = {
+ content: `"
WHAT IS HAPPENING HERE
\n
Game That Tune Radio is live with fantastic video game music streaming around the clock! We've got music from NES, SNES, Sega Genesis, Nintendo 64, Playstation, PC, and more coming all the time! If it's been featured on our podcast, it's gonna be on this stream! We only play three songs from each game on our podcast, and we decided that everyone needs more tunes!
\n
We'll be updating this livestream with new games as they're played on the show, including your requests! To get priority in requesting games for the show, check out https://www.patreon.com/GameThatTune
Visit https://www.patreon.com/GameThatTune to help us keep up this live stream and upgrade our equipment for the live show! We've got exclusive mixtapes for our patrons, and lots more stuff planned for the future, so consider helping us out!
\n
HOW IT WORKS
\n
Featuring music from over 1000 games! Check out https://music.gamethattune.com/songs for the full list and make a request from your favorite game!
\n
Now that you've seen the list of games, make a request in the chat!
\n
!sr + anything = general search \n!gr + game title = random song from matching game \n!cr + composer name = random song from matching composer \n!tr + anything = random result only searching song titles \n!rr + anything = random result from all searchable fields \n!game gtt = starts a round of our guessing game for bonus points!
\n
We have gifs!
\n
Wanna see your favorite gif on screen? type !summon followed by the gif name! Want your favorite gif to take over the video? Type !spawn followed by the gif name!
\n
Still have questions? Ask the chatbot! type !info to...wait for it...get more info!
If this channel is offline you might want to checkout other great Owncast streams at the Owncast Directory.
\n\n
Pro-tips for new viewers
\n
Change chat name
\n
When you visit an Owncast channel for the first time then you've been given a random chat name. You see this name on the top right above the chat box. Click on that name in order to pick your own preferred chat name.
\n
Chat formatting
\n
The chat supports some basic Markdown, like *Italic*, **Bold** and \`Code blocks\` (from the Owncast docs)
\n
Player shortcuts
\n
The web video player has some keyboard shortcuts for you to use:
If you have a tv platform/set top box (apple, amazon, roku) that you can install IPTV apps on then you can add the url https://directory.owncast.online/api/iptv to watch this and other Owncast channels on the big screen.
My name is hatniX (or Frank), 48 years old. I'm a PC gamer for over 30 years now, playing games on Linux since 1998. And this is what you'll see here on this channel, me playing games on Linux. Preferable with a focus on storytelling and atmosphere, rather than "pro-gaming".
\n
Fediverse
\n
You can follow this server in the Fediverse: @hatnix@live.hatnix.net, in order to get announcements when the stream starts.
\n
Owncast
\n
This server is powered by Owncast. Check out the Owncast-Browser-Extension for Firefox or for Chrome browsers to see whether I'm live. Another great way to see when I (or other Owncast streamers) go online, is to follow the Owncast bots on Mastodon or Twitter.
\n
Chat bot
\n
I'm using an experimantal chat bot here, which I have written specifically for Owncast. Use !help in chat to get a list of the available commands. The source code of the bot is available at github.com/hatniX/hatbot (Public Domain).
\n
In case you wonder how I display the chat onscreen, incl. the fade effect, check out my CSS file.
If you want to support me, visit my streams, either lurk or be active in chat. You can also help me getting more attention, by telling others about my channel, or just boosting my stream announcements on Mastodon or retweeting them on Twitter.
\n
Liberapay
\n
Liberapay is a non-profit subscription platform, which means that they don't take a share. If you like, you can support me there, either with a one-time or a regular donation. Thank you so much!
\n
Ko-fi
\n
In case you want to buy me a coffee then you can do so at ko-fi. I appreciate that a lot!
\n
Support is never required, but always much appreciated. Thank you very much! <3