From 6ffe720d901467dff2f734408409a87a27de8c7e Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Tue, 16 Aug 2022 17:49:21 -0700 Subject: [PATCH] Update to the page content header --- .../ContentHeader/ContentHeader.module.scss | 57 ++++++++++++ .../common/ContentHeader/ContentHeader.tsx | 36 ++++++++ web/components/common/ContentHeader/index.ts | 1 + .../common/StreamInfo/StreamInfo.module.scss | 89 ------------------- .../common/StreamInfo/StreamInfo.tsx | 65 -------------- web/components/common/StreamInfo/index.ts | 1 - web/components/ui/Content/Content.tsx | 24 ++++- web/components/ui/Logo/Logo.module.scss | 11 ++- .../ui/SocialLinks/SocialLinks.module.scss | 4 +- web/stories/ContentHeader.stories.tsx | 76 ++++++++++++++++ 10 files changed, 197 insertions(+), 167 deletions(-) create mode 100644 web/components/common/ContentHeader/ContentHeader.module.scss create mode 100644 web/components/common/ContentHeader/ContentHeader.tsx create mode 100644 web/components/common/ContentHeader/index.ts delete mode 100644 web/components/common/StreamInfo/StreamInfo.module.scss delete mode 100644 web/components/common/StreamInfo/StreamInfo.tsx delete mode 100644 web/components/common/StreamInfo/index.ts create mode 100644 web/stories/ContentHeader.stories.tsx diff --git a/web/components/common/ContentHeader/ContentHeader.module.scss b/web/components/common/ContentHeader/ContentHeader.module.scss new file mode 100644 index 000000000..0d18a9f27 --- /dev/null +++ b/web/components/common/ContentHeader/ContentHeader.module.scss @@ -0,0 +1,57 @@ +.root { + position: relative; + display: grid; +} + +.buttonsLogoTitleSection { + // margin-left: 1.5vw; + // margin-right: 1.5vw; +} + +.row { + margin-bottom: 7px; +} + +.logoTitleSection { + display: flex; + @media (max-width: 768px) { + flex-direction: column; + .logo { + margin-left: auto; + margin-right: auto; + margin-bottom: 10px; + } + } +} + +.titleSection { + display: flex; + flex-direction: column; + + .title { + font-size: 32px; + font-weight: bold; + color: black; + text-transform: uppercase; + line-height: 30px; + } + + .subtitle { + font-size: 24px; + font-weight: 400; + line-height: 22px; + color: var(--theme-text-secondary); + } +} + +.tagList { + font-family: var(--theme-text-display-font-family); + color: var(--theme-text-primary); + + span { + display: inline-block; + margin-right: 8px; + font-size: 14px; + font-weight: 300; + } +} diff --git a/web/components/common/ContentHeader/ContentHeader.tsx b/web/components/common/ContentHeader/ContentHeader.tsx new file mode 100644 index 000000000..02ac5a609 --- /dev/null +++ b/web/components/common/ContentHeader/ContentHeader.tsx @@ -0,0 +1,36 @@ +import cn from 'classnames'; + +import { ServerLogo } from '../../ui'; +import SocialLinks from '../../ui/SocialLinks/SocialLinks'; +import { SocialLink } from '../../../interfaces/social-link.model'; +import s from './ContentHeader.module.scss'; + +interface Props { + name: string; + title: string; + summary: string; + tags: string[]; + links: SocialLink[]; + logo: string; +} +export default function ContentHeader({ name, title, summary, logo, tags, links }: Props) { + return ( +
+
+
+ +
+
+
{name}
+
{title || summary}
+
+ {tags.length > 0 && tags.map(tag => #{tag} )} +
+
+ +
+
+
+
+ ); +} diff --git a/web/components/common/ContentHeader/index.ts b/web/components/common/ContentHeader/index.ts new file mode 100644 index 000000000..a75da8590 --- /dev/null +++ b/web/components/common/ContentHeader/index.ts @@ -0,0 +1 @@ +export { default } from './ContentHeader'; diff --git a/web/components/common/StreamInfo/StreamInfo.module.scss b/web/components/common/StreamInfo/StreamInfo.module.scss deleted file mode 100644 index 1d3e3c491..000000000 --- a/web/components/common/StreamInfo/StreamInfo.module.scss +++ /dev/null @@ -1,89 +0,0 @@ -.root { - position: relative; - display: grid; -} - -.buttonsLogoTitleSection { - margin-left: 1.5vw; - margin-right: 1.5vw; -} - -.logoTitleSection { - display: flex; - align-items: center; -} - -.titleSection { - display: flex; - flex-direction: column; - - .title { - font-size: 1.5rem; - font-weight: bold; - color: var(--theme-text-primary); - } - - .subtitle { - margin-top: 0.35em; - font-size: 1.5em; - font-weight: 300; - color: var(--theme-text-secondary); - text-transform: uppercase; - } -} - -.mobile { - &.root { - position: relative; - display: flex; - padding: 0 0.3rem; - align-items: center; - justify-content: space-between; - .mobileInfo { - display: flex; - align-items: center; - .title { - font-size: 1.2rem; - font-weight: 600; - } - } - .mobileStatus { - display: flex; - font-weight: 600; - .viewerCount { - display: flex; - align-items: center; - gap: 4px; - } - .liveStatus { - display: flex; - align-items: center; - margin-left: 0.5rem; - font-size: 0.8rem; - gap: 4px; - .liveCircle { - border-radius: 50%; - background-color: red; - width: 0.5rem; - height: 0.5rem; - } - } - } - } -} - -.tagList { - font-family: var(--theme-text-display-font-family); - color: var(--theme-text-secondary); - - ul { - margin: 0; - padding: 0; - } - - li { - display: inline-block; - margin: 0 0.7em 0 0; - font-weight: 600; - } -} diff --git a/web/components/common/StreamInfo/StreamInfo.tsx b/web/components/common/StreamInfo/StreamInfo.tsx deleted file mode 100644 index 80fee9bba..000000000 --- a/web/components/common/StreamInfo/StreamInfo.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { useRecoilValue } from 'recoil'; -import cn from 'classnames'; -import { EyeFilled } from '@ant-design/icons'; -import { useEffect } from 'react'; -import { ClientConfig } from '../../../interfaces/client-config.model'; -import { - clientConfigStateAtom, - isOnlineSelector, - serverStatusState, -} from '../../stores/ClientConfigStore'; -import { ServerLogo } from '../../ui'; -import SocialLinks from '../../ui/SocialLinks/SocialLinks'; -import s from './StreamInfo.module.scss'; -import { ServerStatus } from '../../../interfaces/server-status.model'; - -interface Props { - isMobile: boolean; -} -export default function StreamInfo({ isMobile }: Props) { - const { socialHandles, name, title, tags, summary } = - useRecoilValue(clientConfigStateAtom); - const { viewerCount } = useRecoilValue(serverStatusState); - const online = useRecoilValue(isOnlineSelector); - - useEffect(() => { - console.log({ online }); - }, [online]); - - return isMobile ? ( -
-
- -
{name}
-
-
-
- {online && ( - <> - {viewerCount} - - - )} -
-
- {online &&
} - {online ? 'LIVE' : 'OFFLINE'} -
-
-
- ) : ( -
-
- -
-
{name}
-
{title || summary}
-
- {tags.length > 0 && tags.map(tag => #{tag} )} -
- -
-
-
- ); -} diff --git a/web/components/common/StreamInfo/index.ts b/web/components/common/StreamInfo/index.ts deleted file mode 100644 index ec6c10c69..000000000 --- a/web/components/common/StreamInfo/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './StreamInfo'; diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx index d74bf4458..de9a50cca 100644 --- a/web/components/ui/Content/Content.tsx +++ b/web/components/ui/Content/Content.tsx @@ -35,7 +35,7 @@ import FollowButton from '../../action-buttons/FollowButton'; import NotifyButton from '../../action-buttons/NotifyButton'; import Modal from '../Modal/Modal'; import BrowserNotifyModal from '../../modals/BrowserNotify/BrowserNotifyModal'; -import StreamInfo from '../../common/StreamInfo'; +import ContentHeader from '../../common/ContentHeader'; import { ServerStatus } from '../../../interfaces/server-status.model'; import { StatusBar } from '..'; @@ -51,9 +51,18 @@ export default function ContentComponent() { const online = useRecoilValue(isOnlineSelector); const chatDisplayName = useRecoilValue(chatDisplayNameAtom); const chatUserId = useRecoilValue(chatUserIdAtom); - const { viewerCount, lastConnectTime, lastDisconnectTime } = + const { viewerCount, lastConnectTime, lastDisconnectTime, streamTitle } = useRecoilValue(serverStatusState); - const { extraPageContent, version, name, externalActions, offlineMessage } = clientConfig; + const { + extraPageContent, + version, + name, + summary, + socialHandles, + tags, + externalActions, + offlineMessage, + } = clientConfig; const [showNotifyReminder, setShowNotifyReminder] = useState(false); const [showNotifyPopup, setShowNotifyPopup] = useState(false); @@ -143,7 +152,14 @@ export default function ContentComponent() {
- +
diff --git a/web/components/ui/Logo/Logo.module.scss b/web/components/ui/Logo/Logo.module.scss index f68f9c7b2..4d9276889 100644 --- a/web/components/ui/Logo/Logo.module.scss +++ b/web/components/ui/Logo/Logo.module.scss @@ -4,17 +4,17 @@ align-items: center; justify-content: center; overflow: hidden; - margin-right: .5rem; - width: clamp(2.5vh, 9vw, 120px); - height: clamp(2.5vh, 9vw, 120px); + margin-right: 0.5rem; + width: 96px; + height: 96px; border-radius: 50%; - border-width: 3px; + border-width: 5px; border-style: solid; border-color: var(--theme-primary-color); background-color: var(--theme-background-secondary); } -.container { +.container { width: 90%; height: 90%; border-radius: 50%; @@ -28,4 +28,3 @@ background-position: center; overflow: hidden; } - diff --git a/web/components/ui/SocialLinks/SocialLinks.module.scss b/web/components/ui/SocialLinks/SocialLinks.module.scss index f5a403ea3..618119345 100644 --- a/web/components/ui/SocialLinks/SocialLinks.module.scss +++ b/web/components/ui/SocialLinks/SocialLinks.module.scss @@ -1,6 +1,6 @@ .link { - width: 2em; - margin-right: 4px; + width: 1.8em; + margin-right: 16px; } .links { diff --git a/web/stories/ContentHeader.stories.tsx b/web/stories/ContentHeader.stories.tsx new file mode 100644 index 000000000..2946dbb59 --- /dev/null +++ b/web/stories/ContentHeader.stories.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import ContentHeader from '../components/common/ContentHeader/ContentHeader'; + +export default { + title: 'owncast/Components/Content Header', + component: ContentHeader, + parameters: {}, +} as ComponentMeta; + +const Template: ComponentStory = args => ; + +export const Example = Template.bind({}); +Example.args = { + name: 'My Awesome Owncast Stream', + summary: 'A calvacade of glorious sights and sounds', + tags: ['word', 'tag with spaces', 'music'], + logo: 'https://watch.owncast.online/logo', + links: [ + { + platform: 'github', + url: 'https://github.com/owncast/owncast', + icon: 'https://watch.owncast.online/img/platformlogos/github.svg', + }, + { + platform: 'Documentation', + url: 'https://owncast.online', + icon: 'https://watch.owncast.online/img/platformlogos/link.svg', + }, + { + platform: 'mastodon', + url: 'https://fosstodon.org/users/owncast', + icon: 'https://watch.owncast.online/img/platformlogos/mastodon.svg', + }, + ], +}; + +export const LongContent = Template.bind({}); +LongContent.args = { + name: 'My Awesome Owncast Stream, streaming the best of streams and some lorem ipsum too', + summary: + 'A calvacade of glorious sights and sounds. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + tags: [ + 'word', + 'tag with spaces', + 'music', + 'more tags', + 'a bunch', + 'keep going', + 'and more', + 'just a few more', + 'video games', + 'things', + 'stuff', + 'ok some more', + 'this should do it', + ], + logo: 'https://watch.owncast.online/logo', + links: [ + { + platform: 'github', + url: 'https://github.com/owncast/owncast', + icon: 'https://watch.owncast.online/img/platformlogos/github.svg', + }, + { + platform: 'Documentation', + url: 'https://owncast.online', + icon: 'https://watch.owncast.online/img/platformlogos/link.svg', + }, + { + platform: 'mastodon', + url: 'https://fosstodon.org/users/owncast', + icon: 'https://watch.owncast.online/img/platformlogos/mastodon.svg', + }, + ], +};