diff --git a/web/components/SocialLinks.tsx b/web/components/SocialLinks.tsx deleted file mode 100644 index 83320859c..000000000 --- a/web/components/SocialLinks.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { SocialLink } from '../interfaces/social-link.model'; - -interface Props { - // eslint-disable-next-line react/no-unused-prop-types - links: SocialLink[]; -} - -// eslint-disable-next-line @typescript-eslint/no-unused-vars -export default function SocialLinks(props: Props) { - return
Social links component goes here
; -} diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx index 206ea0b85..6e4ce2cd1 100644 --- a/web/components/ui/Content/Content.tsx +++ b/web/components/ui/Content/Content.tsx @@ -1,5 +1,5 @@ import { useRecoilValue } from 'recoil'; -import { Layout, Button, Tabs } from 'antd'; +import { Layout, Button, Tabs, Typography } from 'antd'; import { chatVisibilityAtom, clientConfigStateAtom, @@ -23,9 +23,13 @@ import ActionButton from '../../action-buttons/ActionButton'; import Statusbar from '../Statusbar/Statusbar'; import { ServerStatus } from '../../../interfaces/server-status.model'; import { Follower } from '../../../interfaces/follower'; +import SocialLinks from '../SocialLinks/SocialLinks'; +import NotifyReminderPopup from '../NotifyReminderPopup/NotifyReminderPopup'; +import ServerLogo from '../Logo/Logo'; const { TabPane } = Tabs; const { Content } = Layout; +const { Title } = Typography; export default function ContentComponent() { const status = useRecoilValue(serverStatusState); @@ -34,7 +38,7 @@ export default function ContentComponent() { const messages = useRecoilValue(chatMessagesAtom); const chatState = useRecoilValue(chatStateAtom); - const { extraPageContent, version } = clientConfig; + const { extraPageContent, version, socialHandles, name, title, tags } = clientConfig; const { online, viewerCount, lastConnectTime, lastDisconnectTime } = status; const followers: Follower[] = []; @@ -73,26 +77,31 @@ export default function ContentComponent() { {externalActionButtons} - + {}} notificationClosed={() => {}}> + +
- + + {name} + {online && title !== '' && {title}} +
{tags.length > 0 && tags.map(tag => #{tag} )}
+ + - {chatVisibility && (
)} -
diff --git a/web/components/ui/Footer/Footer.tsx b/web/components/ui/Footer/Footer.tsx index 7a53889c5..f5edf007f 100644 --- a/web/components/ui/Footer/Footer.tsx +++ b/web/components/ui/Footer/Footer.tsx @@ -9,5 +9,9 @@ interface Props { export default function FooterComponent(props: Props) { const { version } = props; - return
Owncast {version}
; + return ( + + ); } diff --git a/web/components/ui/Logo/Logo.module.scss b/web/components/ui/Logo/Logo.module.scss new file mode 100644 index 000000000..9c062eed7 --- /dev/null +++ b/web/components/ui/Logo/Logo.module.scss @@ -0,0 +1,9 @@ +.logo { + width: 120px; + border-radius: 50%; + border-width: 3px; + border-style: solid; + border-color: var(--theme-primary-color); + background-color: var(--theme-background-secondary); + padding: 3px; +} \ No newline at end of file diff --git a/web/components/ui/Logo/Logo.tsx b/web/components/ui/Logo/Logo.tsx new file mode 100644 index 000000000..3a3e9f707 --- /dev/null +++ b/web/components/ui/Logo/Logo.tsx @@ -0,0 +1,5 @@ +import s from './Logo.module.scss'; + +export default function SocialLinks() { + return logo; +} diff --git a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx index 99c1b73ea..140677013 100644 --- a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx +++ b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx @@ -5,7 +5,7 @@ import s from './NotifyReminderPopup.module.scss'; interface Props { visible: boolean; - children: React.ReactNode[]; + children: React.ReactNode; notificationClicked: () => void; notificationClosed: () => void; } diff --git a/web/components/ui/SocialLinks/SocialLinks.module.scss b/web/components/ui/SocialLinks/SocialLinks.module.scss new file mode 100644 index 000000000..4fc9f74de --- /dev/null +++ b/web/components/ui/SocialLinks/SocialLinks.module.scss @@ -0,0 +1,11 @@ +.link { + width: 2em; + margin-left: 4px; + margin-right: 4px; +} + +.links { + display: flex; + align-items: center; + justify-content: flex-end; +} \ No newline at end of file diff --git a/web/components/ui/SocialLinks/SocialLinks.tsx b/web/components/ui/SocialLinks/SocialLinks.tsx new file mode 100644 index 000000000..77227a7b0 --- /dev/null +++ b/web/components/ui/SocialLinks/SocialLinks.tsx @@ -0,0 +1,21 @@ +import { SocialLink } from '../../../interfaces/social-link.model'; +import s from './SocialLinks.module.scss'; + +interface Props { + // eslint-disable-next-line react/no-unused-prop-types + links: SocialLink[]; +} + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +export default function SocialLinks(props: Props) { + const { links } = props; + return ( +
+ {links.map(link => ( + + {link.platform} + + ))} +
+ ); +} diff --git a/web/next.config.js b/web/next.config.js index f5f3a601c..c29eee1fe 100644 --- a/web/next.config.js +++ b/web/next.config.js @@ -12,6 +12,10 @@ module.exports = withLess({ source: '/hls/:path*', destination: 'http://localhost:8080/hls/:path*', // Proxy to Backend to work around CORS. }, + { + source: '/img/:path*', + destination: 'http://localhost:8080/hls/:path*', // Proxy to Backend to work around CORS. + }, { source: '/logo', destination: 'http://localhost:8080/logo', // Proxy to Backend to work around CORS. diff --git a/web/public/img/platformlogos/bandcamp.svg b/web/public/img/platformlogos/bandcamp.svg new file mode 100644 index 000000000..11764f43b --- /dev/null +++ b/web/public/img/platformlogos/bandcamp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/default.svg b/web/public/img/platformlogos/default.svg new file mode 100644 index 000000000..85d53e93e --- /dev/null +++ b/web/public/img/platformlogos/default.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/discord.svg b/web/public/img/platformlogos/discord.svg new file mode 100644 index 000000000..da184aecb --- /dev/null +++ b/web/public/img/platformlogos/discord.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/donate.svg b/web/public/img/platformlogos/donate.svg new file mode 100644 index 000000000..42f27720d --- /dev/null +++ b/web/public/img/platformlogos/donate.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/facebook.svg b/web/public/img/platformlogos/facebook.svg new file mode 100644 index 000000000..5517d3d5c --- /dev/null +++ b/web/public/img/platformlogos/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/follow.svg b/web/public/img/platformlogos/follow.svg new file mode 100644 index 000000000..f988debfc --- /dev/null +++ b/web/public/img/platformlogos/follow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/github.svg b/web/public/img/platformlogos/github.svg new file mode 100644 index 000000000..3a8245bb0 --- /dev/null +++ b/web/public/img/platformlogos/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/gitlab.svg b/web/public/img/platformlogos/gitlab.svg new file mode 100644 index 000000000..1a766a7d8 --- /dev/null +++ b/web/public/img/platformlogos/gitlab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/google.svg b/web/public/img/platformlogos/google.svg new file mode 100644 index 000000000..96da1efb4 --- /dev/null +++ b/web/public/img/platformlogos/google.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/instagram.svg b/web/public/img/platformlogos/instagram.svg new file mode 100644 index 000000000..fd3fe9fe5 --- /dev/null +++ b/web/public/img/platformlogos/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/keyoxide.png b/web/public/img/platformlogos/keyoxide.png new file mode 100644 index 000000000..d4476f494 Binary files /dev/null and b/web/public/img/platformlogos/keyoxide.png differ diff --git a/web/public/img/platformlogos/ko-fi.svg b/web/public/img/platformlogos/ko-fi.svg new file mode 100644 index 000000000..1e53bd6a0 --- /dev/null +++ b/web/public/img/platformlogos/ko-fi.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/lbry.svg b/web/public/img/platformlogos/lbry.svg new file mode 100644 index 000000000..cc26f9a12 --- /dev/null +++ b/web/public/img/platformlogos/lbry.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/liberapay.svg b/web/public/img/platformlogos/liberapay.svg new file mode 100644 index 000000000..e12410977 --- /dev/null +++ b/web/public/img/platformlogos/liberapay.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/link.svg b/web/public/img/platformlogos/link.svg new file mode 100644 index 000000000..5f21fe22a --- /dev/null +++ b/web/public/img/platformlogos/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/linkedin.svg b/web/public/img/platformlogos/linkedin.svg new file mode 100644 index 000000000..e3099960e --- /dev/null +++ b/web/public/img/platformlogos/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/mastodon.svg b/web/public/img/platformlogos/mastodon.svg new file mode 100644 index 000000000..c5bc4af4a --- /dev/null +++ b/web/public/img/platformlogos/mastodon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/odysee.svg b/web/public/img/platformlogos/odysee.svg new file mode 100644 index 000000000..a900c51ab --- /dev/null +++ b/web/public/img/platformlogos/odysee.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/patreon.svg b/web/public/img/platformlogos/patreon.svg new file mode 100644 index 000000000..5d8671cbe --- /dev/null +++ b/web/public/img/platformlogos/patreon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/paypal.svg b/web/public/img/platformlogos/paypal.svg new file mode 100644 index 000000000..dbc668aa1 --- /dev/null +++ b/web/public/img/platformlogos/paypal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/snapchat.svg b/web/public/img/platformlogos/snapchat.svg new file mode 100644 index 000000000..6371b2abf --- /dev/null +++ b/web/public/img/platformlogos/snapchat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/soundcloud.svg b/web/public/img/platformlogos/soundcloud.svg new file mode 100644 index 000000000..9f52826af --- /dev/null +++ b/web/public/img/platformlogos/soundcloud.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/spotify.svg b/web/public/img/platformlogos/spotify.svg new file mode 100644 index 000000000..d5b89c722 --- /dev/null +++ b/web/public/img/platformlogos/spotify.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/steam.svg b/web/public/img/platformlogos/steam.svg new file mode 100644 index 000000000..712df4c91 --- /dev/null +++ b/web/public/img/platformlogos/steam.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/tiktok.svg b/web/public/img/platformlogos/tiktok.svg new file mode 100644 index 000000000..b1da38f60 --- /dev/null +++ b/web/public/img/platformlogos/tiktok.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/twitch.svg b/web/public/img/platformlogos/twitch.svg new file mode 100644 index 000000000..052a086e3 --- /dev/null +++ b/web/public/img/platformlogos/twitch.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/twitter.svg b/web/public/img/platformlogos/twitter.svg new file mode 100644 index 000000000..3dedf3e15 --- /dev/null +++ b/web/public/img/platformlogos/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/public/img/platformlogos/youtube.svg b/web/public/img/platformlogos/youtube.svg new file mode 100644 index 000000000..5741120f6 --- /dev/null +++ b/web/public/img/platformlogos/youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/stories/SocialLinks.stories.tsx b/web/stories/SocialLinks.stories.tsx index f12e6fb37..4cdca87d2 100644 --- a/web/stories/SocialLinks.stories.tsx +++ b/web/stories/SocialLinks.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { ComponentStory, ComponentMeta } from '@storybook/react'; -import SocialLinks from '../components/SocialLinks'; +import SocialLinks from '../components/ui/SocialLinks/SocialLinks'; export default { title: 'owncast/Social links', @@ -20,7 +20,11 @@ Populated.args = { url: 'https://github.com/owncast/owncast', icon: '/img/platformlogos/github.svg', }, - { platform: 'Documentation', url: 'https://owncast.online' }, + { + platform: 'Documentation', + url: 'https://owncast.online', + icon: '/img/platformlogos/link.svg', + }, { platform: 'mastodon', url: 'https://fosstodon.org/users/owncast', diff --git a/web/styles/ant-overrides.scss b/web/styles/ant-overrides.scss index 02abe3cb0..92ddeaaf8 100644 --- a/web/styles/ant-overrides.scss +++ b/web/styles/ant-overrides.scss @@ -446,20 +446,6 @@ textarea.ant-input { border-radius: 0 0 var(--container-border-radius) var(--container-border-radius); } -// ANT POPOVER -.ant-popover-inner { - background-color: var(--popover-base-color); -} -.ant-popover-message, -.ant-popover-inner-content { - color: var(--default-text-color); -} -.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow { - border-color: var(--popover-base-color); -} -.ant-popover-arrow-content { - background-color: var(--popover-base-color); -} // ANT TOOLTIP .ant-tooltip {