Kieran/zap.stream
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

more css tweaks

Browse Source
This commit is contained in:
Kieran
2023-07-24 21:43:51 +01:00
parent 1175fbf211
commit 0d9a5b3b86
2 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/element/live-video-player.tsx
View File

@ -59,12 +59,12 @@ export function LiveVideoPlayer(
}, [video, streamCached, props.status]); }, [video, streamCached, props.status]);
return ( return (
<> <div className="video-overlay">
<div className={status}> <div className={status}>
<div>{status}</div> <div>{status}</div>
</div> </div>
<video ref={video} autoPlay={true} poster={props.poster} src={src} playsInline={true} controls={status === VideoStatus.Online} /> <video ref={video} autoPlay={true} poster={props.poster} src={src} playsInline={true} controls={status === VideoStatus.Online} />
</> </div>
); );
} }
@ -90,11 +90,11 @@ export function WebRTCPlayer(props: VideoPlayerProps) {
}, [video, streamCached]); }, [video, streamCached]);
return ( return (
<> <div className="video-overlay">
<div className={status}> <div className={status}>
<div>{status}</div> <div>{status}</div>
</div> </div>
<video ref={video} autoPlay={true} poster={props.poster} controls={status === VideoStatus.Online} /> <video ref={video} autoPlay={true} poster={props.poster} controls={status === VideoStatus.Online} />
</> </div>
); );
} }

18
src/pages/stream-page.css
View File

@ -2,7 +2,9 @@
display: grid; display: grid;
grid-template-columns: auto 450px; grid-template-columns: auto 450px;
gap: var(--gap-m); gap: var(--gap-m);
height: calc(100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s)); height: calc(
100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s)
);
} }
.stream-page .video-content { .stream-page .video-content {
@ -10,26 +12,34 @@
gap: var(--gap-s); gap: var(--gap-s);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
.stream-page .video-overlay {
position: relative; position: relative;
} }
.stream-page .video-content video { .stream-page .video-content video {
width: 100%; width: 100%;
max-height: calc(100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s)); aspect-ratio: 16/9;
} }
.stream-page .live-chat { .stream-page .live-chat {
padding: 24px 16px 8px 24px; padding: 24px 16px 8px 24px;
border: 1px solid #171717; border: 1px solid #171717;
border-radius: 24px; border-radius: 24px;
height: calc(100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s) - 24px - 8px); height: calc(
100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s) -
24px - 8px
);
} }
@media (max-width: 1020px) { @media (max-width: 1020px) {
.stream-page { .stream-page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s)); height: calc(
100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s)
);
} }
.stream-page .video-content { .stream-page .video-content {