diff --git a/src/pages/layout.css b/src/pages/layout.css
index 1ca015f..be54589 100644
--- a/src/pages/layout.css
+++ b/src/pages/layout.css
@@ -11,16 +11,20 @@
gap: 0;
}
+.page.home {
+ display: grid;
+ grid-template-areas:
+ "header"
+ "video-content";
+ grid-template-rows: 64px 1fr;
+ grid-template-columns: 1fr;
+}
.live-chat {
max-height: calc(100vh - 385px);
}
@media (min-width: 768px) {
- .info {
- display: none;
- }
-
.video-content video {
height: calc(100vh - 64px);
}
@@ -34,18 +38,15 @@
display: grid;
grid-template-areas:
"header header"
+ "video-content profile"
"video-content chat";
grid-template-rows: 64px min-content;
- grid-template-columns: calc(min(600px, 1fr)) 1fr;
+ grid-template-columns: minmax(600px, 1fr) min-content;
gap: 0;
}
}
@media (min-width: 1020px) {
- .video-content video {
- height: unset;
- }
-
.page {
width: unset;
display: grid;
@@ -57,7 +58,7 @@
"header header"
"video-content chat"
"profile chat";
- gap: 32px;
+ gap: 0;
}
}
diff --git a/src/pages/layout.tsx b/src/pages/layout.tsx
index c23d625..5a34653 100644
--- a/src/pages/layout.tsx
+++ b/src/pages/layout.tsx
@@ -6,7 +6,7 @@ import {
encodeTLV,
NostrPrefix,
} from "@snort/system";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useNavigate, useLocation } from "react-router-dom";
import AsyncButton from "element/async-button";
import { Login } from "index";
import { useLogin } from "hooks/login";
@@ -19,6 +19,7 @@ export function LayoutPage() {
const navigate = useNavigate();
const login = useLogin();
const [newStream, setNewStream] = useState(false);
+ const location = useLocation();
async function doLogin() {
const pub = await EventPublisher.nip7();
@@ -78,7 +79,9 @@ export function LayoutPage() {
}
return (
-
+
navigate("/")}>
S
diff --git a/src/pages/stream-page.css b/src/pages/stream-page.css
index 4d4a58e..4ac6bff 100644
--- a/src/pages/stream-page.css
+++ b/src/pages/stream-page.css
@@ -62,6 +62,14 @@
.stream-info {
display: block;
}
+
+ .video-content video {
+ height: 100%;
+ }
+
+ .live-chat {
+ margin-left: 32px;
+ }
}
.info {
@@ -69,12 +77,6 @@
margin-top: 8px
}
-@media (min-width: 1020px) {
- .info {
- margin-top: 32px;
- }
-}
-
.info h1 {
margin: 0 0 8px 0;
font-weight: 600;
diff --git a/src/pages/stream-page.tsx b/src/pages/stream-page.tsx
index 7cf7051..2c1693c 100644
--- a/src/pages/stream-page.tsx
+++ b/src/pages/stream-page.tsx
@@ -1,8 +1,7 @@
import "./stream-page.css";
-import { useRef, useState, useLayoutEffect } from "react";
+import { useRef, useState } from "react";
import { parseNostrLink, EventPublisher } from "@snort/system";
import { useNavigate, useParams } from "react-router-dom";
-import useResizeObserver from "@react-hook/resize-observer";
import moment from "moment";
import useEventFeed from "hooks/event-feed";
@@ -150,31 +149,13 @@ export function StreamPage() {
const ref = useRef(null);
const params = useParams();
const link = parseNostrLink(params.id!);
- const [height, setHeight] = useState
();
-
- function setChatHeight() {
- const contentHeight =
- document.querySelector(".live-page")?.clientHeight || 0;
- const videoContentHeight =
- document.querySelector(".video-content")?.clientHeight || 0;
- if (window.innerWidth <= 480) {
- setHeight(contentHeight - videoContentHeight);
- } else if (window.innerWidth <= 768) {
- setHeight(videoContentHeight);
- } else {
- setHeight(undefined);
- }
- }
-
- useLayoutEffect(setChatHeight, []);
- useResizeObserver(ref, () => setChatHeight());
return (
<>
-
+
>
);
}