florian/stream
1
0
Fork 0
forked from Kieran/zap.stream
Code Pull Requests Activity

more css tweaks

Browse Source
This commit is contained in:
Kieran 2023-07-24 21:43:51 +01:00
parent 1175fbf211
commit 0d9a5b3b86
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
2 changed files with 18 additions and 8 deletions
Show Stats 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]);
return (
<>
<div className="video-overlay">
<div className={status}>
<div>{status}</div>
</div>
<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]);
return (
<>
<div className="video-overlay">
<div className={status}>
<div>{status}</div>
</div>
<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;
grid-template-columns: auto 450px;
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 {
@ -10,26 +12,34 @@
gap: var(--gap-s);
display: flex;
flex-direction: column;
}
.stream-page .video-overlay {
position: relative;
}
.stream-page .video-content video {
width: 100%;
max-height: calc(100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s));
aspect-ratio: 16/9;
}
.stream-page .live-chat {
padding: 24px 16px 8px 24px;
border: 1px solid #171717;
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) {
.stream-page {
display: flex;
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 {