forked from Kieran/zap.stream
more css tweaks
This commit is contained in:
parent
1175fbf211
commit
0d9a5b3b86
@ -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>
|
||||
);
|
||||
}
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user