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

Make the player fit the full width but content stay the same. For #2360

Browse source
This commit is contained in:
Gabe Kangas 2023-01-21 12:50:30 -08:00
parent 1236f57805
commit f725bc28f4
No known key found for this signature in database
GPG key ID: 4345B2060657F330
4 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -233,7 +233,7 @@ export const Content: FC = () => {
const isChatVisible = useRecoilValue<boolean>(isChatVisibleSelector); const isChatVisible = useRecoilValue<boolean>(isChatVisibleSelector);
const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector); const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
const currentUser = useRecoilValue(currentUserAtom); const currentUser = useRecoilValue(currentUserAtom);
const serverStatus = useRecoilValue<ServerStatus>(serverStatusState);
const [isMobile, setIsMobile] = useRecoilState<boolean | undefined>(isMobileAtom); const [isMobile, setIsMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom); const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
const online = useRecoilValue<boolean>(isOnlineSelector); const online = useRecoilValue<boolean>(isOnlineSelector);
@ -259,6 +259,7 @@ export const Content: FC = () => {
const { account: fediverseAccount, enabled: fediverseEnabled } = federation; const { account: fediverseAccount, enabled: fediverseEnabled } = federation;
const { browser: browserNotifications } = notifications; const { browser: browserNotifications } = notifications;
const { enabled: browserNotificationsEnabled } = browserNotifications; const { enabled: browserNotificationsEnabled } = browserNotifications;
const { online: isStreamLive } = serverStatus;
const [externalActionToDisplay, setExternalActionToDisplay] = useState<ExternalAction>(null); const [externalActionToDisplay, setExternalActionToDisplay] = useState<ExternalAction>(null);
const [supportsBrowserNotifications, setSupportsBrowserNotifications] = useState(false); const [supportsBrowserNotifications, setSupportsBrowserNotifications] = useState(false);
@ -346,7 +347,7 @@ export const Content: FC = () => {
onFollowClick={() => setShowFollowModal(true)} onFollowClick={() => setShowFollowModal(true)}
/> />
)} )}
{online && ( {isStreamLive && (
<Statusbar <Statusbar
online={online} online={online}
lastConnectTime={lastConnectTime} lastConnectTime={lastConnectTime}

12
web/components/video/OwncastPlayer/OwncastPlayer.module.scss
View file

@ -1,16 +1,20 @@
@import '../../../styles/mixins.scss';
.container { .container {
display: grid; display: grid;
width: 100%; width: 100%;
justify-items: center; justify-items: center;
height: 78vh;
@include screen(tablet) {
aspect-ratio: 16 / 9;
height: unset;
}
.player, .player,
.poster { .poster {
// position: static;
// height: auto !important;
width: 100%; width: 100%;
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
aspect-ratio: 16 / 9;
max-height: 75vh;
} }
} }

1
web/components/video/OwncastPlayer/OwncastPlayer.tsx
View file

@ -218,6 +218,7 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({
controls: true, controls: true,
responsive: true, responsive: true,
fluid: false, fluid: false,
fill: true,
playsinline: true, playsinline: true,
liveui: true, liveui: true,
preload: 'auto', preload: 'auto',

4
web/components/video/VideoJS/VideoJS.module.scss
View file

@ -1,9 +1,5 @@
@import '../../../styles/mixins.scss'; @import '../../../styles/mixins.scss';
.player { .player {
height: auto !important;
width: 100%; width: 100%;
video {
position: static !important;
}
} }