2023-11-07 06:35:05 +03:00
|
|
|
import { StoryFn, Meta } from '@storybook/react';
|
2022-10-09 01:05:52 +03:00
|
|
|
import { RecoilRoot } from 'recoil';
|
2022-09-07 10:00:28 +03:00
|
|
|
import { OfflineBanner } from './OfflineBanner';
|
2022-09-03 21:38:52 +03:00
|
|
|
import OfflineState from '../../../stories/assets/mocks/offline-state.png';
|
2022-05-20 22:32:26 +03:00
|
|
|
|
2023-11-07 06:35:05 +03:00
|
|
|
const meta = {
|
2022-05-20 22:32:26 +03:00
|
|
|
title: 'owncast/Layout/Offline Banner',
|
|
|
|
component: OfflineBanner,
|
|
|
|
parameters: {
|
|
|
|
design: {
|
|
|
|
type: 'image',
|
|
|
|
url: OfflineState,
|
|
|
|
scale: 0.5,
|
|
|
|
},
|
|
|
|
docs: {
|
|
|
|
description: {
|
|
|
|
component: `When the stream is offline the player should be replaced by this banner that can support custom text and notify actions.`,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2023-11-07 06:35:05 +03:00
|
|
|
} satisfies Meta<typeof OfflineBanner>;
|
2022-05-20 22:32:26 +03:00
|
|
|
|
2023-11-07 06:35:05 +03:00
|
|
|
export default meta;
|
|
|
|
|
|
|
|
const Template: StoryFn<typeof OfflineBanner> = args => (
|
2022-10-09 01:05:52 +03:00
|
|
|
<RecoilRoot>
|
|
|
|
<OfflineBanner {...args} />
|
|
|
|
</RecoilRoot>
|
|
|
|
);
|
2022-05-20 22:32:26 +03:00
|
|
|
|
2023-11-07 06:35:05 +03:00
|
|
|
export const ExampleDefaultWithNotifications = {
|
|
|
|
render: Template,
|
|
|
|
|
|
|
|
args: {
|
|
|
|
streamName: 'Cool stream 42',
|
|
|
|
notificationsEnabled: true,
|
|
|
|
lastLive: new Date(),
|
|
|
|
},
|
2022-05-20 22:32:26 +03:00
|
|
|
};
|
|
|
|
|
2023-11-07 06:35:05 +03:00
|
|
|
export const ExampleDefaultWithDateAndFediverse = {
|
|
|
|
render: Template,
|
|
|
|
|
|
|
|
args: {
|
|
|
|
streamName: 'Dull stream 31337',
|
|
|
|
lastLive: new Date(),
|
|
|
|
notificationsEnabled: false,
|
|
|
|
fediverseAccount: 'streamer@coolstream.biz',
|
|
|
|
},
|
2022-10-09 01:05:52 +03:00
|
|
|
};
|
|
|
|
|
2023-11-07 06:35:05 +03:00
|
|
|
export const ExampleCustomWithDateAndNotifications = {
|
|
|
|
render: Template,
|
|
|
|
|
|
|
|
args: {
|
|
|
|
streamName: 'Dull stream 31337',
|
|
|
|
customText:
|
|
|
|
'This is some example offline text that a streamer can leave for a visitor of the page.',
|
|
|
|
lastLive: new Date(),
|
|
|
|
notificationsEnabled: true,
|
|
|
|
},
|
2022-10-09 01:05:52 +03:00
|
|
|
};
|
|
|
|
|
2023-11-07 06:35:05 +03:00
|
|
|
export const ExampleDefaultWithNotificationsAndFediverse = {
|
|
|
|
render: Template,
|
|
|
|
|
|
|
|
args: {
|
|
|
|
streamName: 'Cool stream 42',
|
|
|
|
notificationsEnabled: true,
|
|
|
|
fediverseAccount: 'streamer@coolstream.biz',
|
|
|
|
lastLive: new Date(),
|
|
|
|
},
|
2022-10-09 01:05:52 +03:00
|
|
|
};
|
|
|
|
|
2023-11-07 06:35:05 +03:00
|
|
|
export const ExampleDefaultWithoutNotifications = {
|
|
|
|
render: Template,
|
|
|
|
|
|
|
|
args: {
|
|
|
|
streamName: 'Cool stream 42',
|
|
|
|
notificationsEnabled: false,
|
|
|
|
lastLive: new Date(),
|
|
|
|
},
|
2022-10-09 01:05:52 +03:00
|
|
|
};
|
|
|
|
|
2023-11-07 06:35:05 +03:00
|
|
|
export const ExampleCustomTextWithoutNotifications = {
|
|
|
|
render: Template,
|
|
|
|
|
|
|
|
args: {
|
|
|
|
streamName: 'Dull stream 31337',
|
|
|
|
customText:
|
|
|
|
'This is some example offline text that a streamer can leave for a visitor of the page.',
|
|
|
|
},
|
2022-05-20 22:32:26 +03:00
|
|
|
};
|