Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change loading state. Closes #2248

Browse Source
This commit is contained in:
Gabe Kangas 2022-12-12 19:10:49 -08:00
parent b4fb6b77b9
commit 660ea10dab
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
1 changed files with 80 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
web/components/ui/Content/Content.tsx
View File

@ -1,5 +1,5 @@
import { useRecoilState, useRecoilValue } from 'recoil'; import { useRecoilState, useRecoilValue } from 'recoil';
import { Layout, Tabs, Spin } from 'antd'; import { Layout, Tabs, Skeleton } from 'antd';
import { FC, MutableRefObject, useEffect, useRef, useState } from 'react'; import { FC, MutableRefObject, useEffect, useRef, useState } from 'react';
import cn from 'classnames'; import cn from 'classnames';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
@ -304,89 +304,88 @@ export const Content: FC = () => {
return ( return (
<> <>
<div className={styles.main}> <div className={styles.main}>
<Spin wrapperClassName={styles.loadingSpinner} size="large" spinning={appState.appLoading}> <AntContent className={styles.root}>
<AntContent className={styles.root}> <div className={styles.mainSection}>
<div className={styles.mainSection}> <div className={styles.topSection}>
<div className={styles.topSection}> {appState.appLoading && <Skeleton loading active paragraph={{ rows: 7 }} />}
{online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />} {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
{!online && !appState.appLoading && ( {!online && !appState.appLoading && (
<OfflineBanner <OfflineBanner
streamName={name} streamName={name}
customText={offlineMessage} customText={offlineMessage}
notificationsEnabled={browserNotificationsEnabled} notificationsEnabled={browserNotificationsEnabled}
fediverseAccount={fediverseAccount} fediverseAccount={fediverseAccount}
lastLive={lastDisconnectTime} lastLive={lastDisconnectTime}
onNotifyClick={() => setShowNotifyModal(true)} onNotifyClick={() => setShowNotifyModal(true)}
onFollowClick={() => setShowFollowModal(true)} onFollowClick={() => setShowFollowModal(true)}
/> />
)} )}
{online && ( {online && (
<Statusbar <Statusbar
online={online} online={online}
lastConnectTime={lastConnectTime} lastConnectTime={lastConnectTime}
lastDisconnectTime={lastDisconnectTime} lastDisconnectTime={lastDisconnectTime}
viewerCount={viewerCount} viewerCount={viewerCount}
/>
)}
</div>
<div className={styles.midSection}>
<div className={styles.buttonsLogoTitleSection}>
{!isMobile && (
<ActionButtonRow>
{externalActionButtons}
<FollowButton size="small" onClick={() => setShowFollowModal(true)} />
<NotifyReminderPopup
open={showNotifyReminder}
notificationClicked={() => setShowNotifyModal(true)}
notificationClosed={() => disableNotifyReminderPopup()}
>
<NotifyButton onClick={() => setShowNotifyModal(true)} />
</NotifyReminderPopup>
</ActionButtonRow>
)}
<Modal
title="Browser Notifications"
open={showNotifyModal}
afterClose={() => disableNotifyReminderPopup()}
handleCancel={() => disableNotifyReminderPopup()}
>
<BrowserNotifyModal />
</Modal>
</div>
</div>
{isMobile ? (
<MobileContent
name={name}
streamTitle={streamTitle}
summary={summary}
tags={tags}
socialHandles={socialHandles}
extraPageContent={extraPageContent}
messages={messages}
currentUser={currentUser}
showChat={showChat}
actions={externalActions}
setExternalActionToDisplay={externalActionSelected}
setShowNotifyPopup={setShowNotifyModal}
setShowFollowModal={setShowFollowModal}
/>
) : (
<DesktopContent
name={name}
streamTitle={streamTitle}
summary={summary}
tags={tags}
socialHandles={socialHandles}
extraPageContent={extraPageContent}
setShowFollowModal={setShowFollowModal}
/> />
)} )}
<Footer version={version} />
</div> </div>
{showChat && !isMobile && <Sidebar />} <div className={styles.midSection}>
</AntContent> <div className={styles.buttonsLogoTitleSection}>
</Spin> {!isMobile && (
<ActionButtonRow>
{externalActionButtons}
<FollowButton size="small" onClick={() => setShowFollowModal(true)} />
<NotifyReminderPopup
open={showNotifyReminder}
notificationClicked={() => setShowNotifyModal(true)}
notificationClosed={() => disableNotifyReminderPopup()}
>
<NotifyButton onClick={() => setShowNotifyModal(true)} />
</NotifyReminderPopup>
</ActionButtonRow>
)}
<Modal
title="Browser Notifications"
open={showNotifyModal}
afterClose={() => disableNotifyReminderPopup()}
handleCancel={() => disableNotifyReminderPopup()}
>
<BrowserNotifyModal />
</Modal>
</div>
</div>
{isMobile ? (
<MobileContent
name={name}
streamTitle={streamTitle}
summary={summary}
tags={tags}
socialHandles={socialHandles}
extraPageContent={extraPageContent}
messages={messages}
currentUser={currentUser}
showChat={showChat}
actions={externalActions}
setExternalActionToDisplay={externalActionSelected}
setShowNotifyPopup={setShowNotifyModal}
setShowFollowModal={setShowFollowModal}
/>
) : (
<DesktopContent
name={name}
streamTitle={streamTitle}
summary={summary}
tags={tags}
socialHandles={socialHandles}
extraPageContent={extraPageContent}
setShowFollowModal={setShowFollowModal}
/>
)}
<Footer version={version} />
</div>
{showChat && !isMobile && <Sidebar />}
</AntContent>
{!isMobile && false && <Footer version={version} />} {!isMobile && false && <Footer version={version} />}
</div> </div>
{externalActionToDisplay && ( {externalActionToDisplay && (