mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 04:40:37 +03:00
Code Issues Projects Releases Packages Wiki Activity

Update footer

Browse source
This commit is contained in:
Gabe Kangas 2022-08-29 23:33:30 -07:00
parent 6954bb5f37
commit 6c06f4fd67
No known key found for this signature in database
GPG key ID: 9A56337728BC81EA
3 changed files with 123 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

140
web/components/ui/Content/Content.tsx
View file

@ -110,67 +110,68 @@ export default function ContentComponent() {
});
return (
<Content className={rootClassName}>
<div className={s.leftContent}>
<Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} />
<div>
<Content className={rootClassName}>
<div className={s.leftContent}>
<Spin className={s.loadingSpinner} size="large" spinning={appState.appLoading} />
<div className={s.topSection}>
{online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
{!online && (
<OfflineBanner
name={name}
text={
offlineMessage || 'Please follow and ask to get notified when the stream is live.'
}
<div className={s.topSection}>
{online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
{!online && (
<OfflineBanner
name={name}
text={
offlineMessage || 'Please follow and ask to get notified when the stream is live.'
}
/>
)}
<StatusBar
online={online}
lastConnectTime={lastConnectTime}
lastDisconnectTime={lastDisconnectTime}
viewerCount={viewerCount}
/>
)}
<StatusBar
online={online}
lastConnectTime={lastConnectTime}
lastDisconnectTime={lastDisconnectTime}
viewerCount={viewerCount}
/>
</div>
<div className={s.midSection}>
<div className={s.buttonsLogoTitleSection}>
<ActionButtonRow>
{externalActionButtons}
<FollowButton size="small" />
<NotifyReminderPopup
visible={showNotifyReminder}
notificationClicked={() => setShowNotifyPopup(true)}
notificationClosed={() => disableNotifyReminderPopup()}
>
<NotifyButton onClick={() => setShowNotifyPopup(true)} />
</NotifyReminderPopup>
</ActionButtonRow>
<Modal
title="Notify"
visible={showNotifyPopup}
afterClose={() => disableNotifyReminderPopup()}
handleCancel={() => disableNotifyReminderPopup()}
>
<BrowserNotifyModal />
</Modal>
</div>
</div>
<div className={s.lowerHalf}>
<ContentHeader
name={name}
title={streamTitle}
summary={summary}
tags={tags}
links={socialHandles}
logo="/logo"
/>
</div>
<div className={s.midSection}>
<div className={s.buttonsLogoTitleSection}>
<ActionButtonRow>
{externalActionButtons}
<FollowButton size="small" />
<NotifyReminderPopup
visible={showNotifyReminder}
notificationClicked={() => setShowNotifyPopup(true)}
notificationClosed={() => disableNotifyReminderPopup()}
>
<NotifyButton onClick={() => setShowNotifyPopup(true)} />
</NotifyReminderPopup>
</ActionButtonRow>
<div className={s.lowerSection}>
<Tabs defaultActiveKey="0" style={{ height: '100%' }}>
{isChatVisible && isMobile && (
<TabPane tab="Chat" key="0" style={{ height: '100%' }}>
{/* <div style={{ position: 'relative', height: '100%' }}>
<Modal
title="Notify"
visible={showNotifyPopup}
afterClose={() => disableNotifyReminderPopup()}
handleCancel={() => disableNotifyReminderPopup()}
>
<BrowserNotifyModal />
</Modal>
</div>
</div>
<div className={s.lowerHalf}>
<ContentHeader
name={name}
title={streamTitle}
summary={summary}
tags={tags}
links={socialHandles}
logo="/logo"
/>
</div>
<div className={s.lowerSection}>
<Tabs defaultActiveKey="0" style={{ height: '100%' }}>
{isChatVisible && isMobile && (
<TabPane tab="Chat" key="0" style={{ height: '100%' }}>
{/* <div style={{ position: 'relative', height: '100%' }}>
<div className={s.mobileChat}>
<ChatContainer
messages={messages}
@ -181,19 +182,20 @@ export default function ContentComponent() {
/>
</div>
</div> */}
</TabPane>
)}
<TabPane tab="About" key="2" className={s.pageContentSection}>
<CustomPageContent content={extraPageContent} />
</TabPane>
)}
<TabPane tab="About" key="2" className={s.pageContentSection}>
<CustomPageContent content={extraPageContent} />
</TabPane>
<TabPane tab="Followers" key="3" className={s.pageContentSection}>
<FollowerCollection />
</TabPane>
</Tabs>
{!isMobile && <Footer version={version} />}
<TabPane tab="Followers" key="3" className={s.pageContentSection}>
<FollowerCollection />
</TabPane>
</Tabs>
</div>
</div>
</div>
{isChatVisible && !isMobile && <Sidebar />}
</Content>
{isChatVisible && !isMobile && <Sidebar />}
</Content>
{!isMobile && <Footer version={version} />}
</div>
);
}

35
web/components/ui/Footer/Footer.module.scss
View file

@ -1,7 +1,32 @@
.footer {
font-size: 0.85em;
font-weight: 500;
color: var(--theme-color-palette-1);
background-color: transparent;
padding: var(--content-padding);
display: flex;
justify-content: space-between;
flex-direction: row;
background-color: var(--theme-color-background-header);
width: 100%;
color: var(--theme-color-components-text-on-dark);
font-family: var(--theme-text-body-font-family);
padding: 0.6em;
font-size: 0.8rem;
font-weight: 600;
opacity: 0.7;
border-top: 1px solid rgba(214, 211, 211, 0.5);
@media (max-width: 768px) {
display: none;
}
a {
color: var(--theme-text-secondary);
}
.links {
display: flex;
justify-content: space-between;
flex-direction: row;
.item {
margin-left: 1.2em;
}
}
}

28
web/components/ui/Footer/Footer.tsx
View file

@ -1,8 +1,5 @@
import { Layout } from 'antd';
import s from './Footer.module.scss';
const { Footer } = Layout;
interface Props {
version: string;
}
@ -11,8 +8,27 @@ export default function FooterComponent(props: Props) {
const { version } = props;
return (
<Footer className={s.footer}>
<a href="https://owncast.online">{version}</a>
</Footer>
<div className={s.footer}>
<div className={s.text}>
Powered by <a href="https://owncast.online">{version}</a>
</div>
<div className={s.links}>
<div className={s.item}>
<a href="https://owncast.online/docs" target="_blank" rel="noreferrer">
Documentation
</a>
</div>
<div className={s.item}>
<a href="https://owncast.online/help" target="_blank" rel="noreferrer">
Contribute
</a>
</div>
<div className={s.item}>
<a href="https://github.com/owncast/owncast" target="_blank" rel="noreferrer">
Source
</a>
</div>
</div>
</div>
);
}