diff --git a/src/pages/layout.css b/src/pages/layout.css
index 4168b96..abc9ec0 100644
--- a/src/pages/layout.css
+++ b/src/pages/layout.css
@@ -1,95 +1,36 @@
.page {
- display: grid;
- gap: 0;
- grid-template-areas:
- "header"
- "main-content"
- "profile"
- "chat";
- grid-template-rows: 64px 230px 56px 1fr;
- grid-template-columns: 1fr;
- height: 100vh;
+ --page-pad-tb: 16px;
+ --page-pad-lr: 40px;
+ --header-page-padding: calc(var(--page-pad-tb) + var(--page-pad-tb));
+
+ padding: var(--page-pad-tb) var(--page-pad-lr);
+ display: flex;
+ flex-direction: column;
+ gap: var(--gap-s);
}
-.page.only-content {
- display: grid;
- height: 100vh;
- grid-template-areas:
- "header"
- "main-content";
- grid-template-rows: 64px 1fr;
- grid-template-columns: 1fr;
+.page.stream {
+ height: calc(100vh - var(--header-page-padding));
+ overflow: hidden;
}
-@media (min-width: 768px) {
+@media (max-width: 1020px) {
.page {
- display: grid;
- height: 100vh;
- grid-template-areas:
- "header header"
- "main-content profile"
- "main-content chat";
- grid-template-rows: 64px min-content;
- grid-template-columns: 600px 1fr;
- gap: 0;
+ --page-pad-tb: 8px;
+ --page-pad-lr: 0;
}
-
- .video-content video {
- height: 100%;
+ .page.stream {
+ display: flex;
+ flex-direction: column;
}
-
-}
-
-@media (min-width: 1020px) {
- .page {
- display: grid;
- height: calc(100vh - 72px);
- padding: 0 40px;
- grid-template-columns: auto 376px;
- grid-template-rows: unset;
- grid-template-areas:
- "header header"
- "main-content chat"
- "profile chat";
- gap: 0;
- }
-
-}
-
-@media (min-width: 2000px) {
- .page {
- padding: 0 40px;
- grid-template-columns: auto 450px;
- }
-
- .video-content {
- max-height: calc(100vh - 320px);
- }
-
- .video-content video {
- height: 100%;
+ header {
+ padding: 0 16px;
}
}
header {
- grid-area: header;
- align-items: center;
- display: grid;
- grid-template-columns: min-content min-content min-content auto;
- padding: 8px 16px;
- gap: 8px;
- white-space: nowrap;
-}
-
-@media (min-width: 1020px) {
- header {
- gap: 24px;
- padding: 24px 0 32px 0;
- }
-
- .page.only-content {
- grid-template-rows: 88px 1fr;
- }
+ display: flex;
+ gap: 24px;
}
header .logo {
@@ -178,7 +119,7 @@ button span.hide-on-mobile {
}
.zap-icon {
- color: #FF8D2B;
+ color: #ff8d2b;
}
.tags {
@@ -194,7 +135,7 @@ button span.hide-on-mobile {
top: 0;
left: 0;
z-index: 999;
- background: #0A0A0A;
+ background: #0a0a0a;
}
.age-check {
diff --git a/src/pages/layout.tsx b/src/pages/layout.tsx
index 83eeb12..f691cff 100644
--- a/src/pages/layout.tsx
+++ b/src/pages/layout.tsx
@@ -1,7 +1,7 @@
import "./layout.css";
import { useState } from "react";
import * as Dialog from "@radix-ui/react-dialog";
-import { Outlet, useNavigate, useLocation, Link } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet";
import { Icon } from "element/icon";
@@ -16,7 +16,6 @@ import { Login } from "index";
export function LayoutPage() {
const navigate = useNavigate();
const login = useLogin();
- const location = useLocation();
const [showLogin, setShowLogin] = useState(false);
function loggedIn() {
@@ -81,21 +80,9 @@ export function LayoutPage() {
);
}
- const isNsfw = window.location.pathname === "/nsfw";
return (
-
+
Home - zap.stream
@@ -105,47 +92,15 @@ export function LayoutPage() {
-
-
- Adult (18+)
-
-
-
+
+ {/* Future menu items go here */}
+
{loggedIn()}
{loggedOut()}
- {isNsfw &&
}
);
-}
-
-function ContentWarningOverlay() {
- const navigate = useNavigate();
- const [is18Plus, setIs18Plus] = useState(
- Boolean(window.localStorage.getItem("accepted-content-warning"))
- );
- if (is18Plus) return null;
-
- function grownUp() {
- window.localStorage.setItem("accepted-content-warning", "true");
- setIs18Plus(true);
- }
-
- return (
-
-
Sexually explicit material ahead!
-
Confirm your age
-
-
-
-
-
- );
-}
+}
\ No newline at end of file
diff --git a/src/pages/root.css b/src/pages/root.css
index e2a590a..3324dbb 100644
--- a/src/pages/root.css
+++ b/src/pages/root.css
@@ -1,7 +1,7 @@
.video-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
- gap: 32px;
+ gap: var(--gap-l);
padding: 40px 0;
}
@@ -18,7 +18,6 @@
.video-grid {
display: grid;
grid-template-columns: 1fr;
- gap: 32px;
padding: 16px;
}
}
@@ -35,11 +34,6 @@
}
}
-.homepage {
- width: 100%;
- grid-area: main-content;
-}
-
.divider {
display: flex;
}
diff --git a/src/pages/root.tsx b/src/pages/root.tsx
index 8b82202..1d3bd34 100644
--- a/src/pages/root.tsx
+++ b/src/pages/root.tsx
@@ -12,7 +12,7 @@ import { VideoTile } from "../element/video-tile";
import { findTag } from "../utils";
import { LIVE_STREAM } from "../const";
-export function RootPage({ nsfw }: { nsfw?: boolean }) {
+export function RootPage() {
const rb = useMemo(() => {
const rb = new RequestBuilder("root");
rb.withOptions({
@@ -31,7 +31,7 @@ export function RootPage({ nsfw }: { nsfw?: boolean }) {
);
const feedSorted = useMemo(() => {
if (feed.data) {
- return [...feed.data].filter(a => nsfw ? findTag(a, "content-warning") !== undefined : findTag(a, "content-warning") === undefined).sort((a, b) => {
+ return [...feed.data].sort((a, b) => {
const aStatus = findTag(a, "status")!;
const bStatus = findTag(b, "status")!;
if (aStatus === bStatus) {
@@ -44,7 +44,7 @@ export function RootPage({ nsfw }: { nsfw?: boolean }) {
});
}
return [];
- }, [feed.data, nsfw]);
+ }, [feed.data]);
const live = feedSorted.filter(
(a) => findTag(a, "status") === StreamState.Live
diff --git a/src/pages/stream-page.css b/src/pages/stream-page.css
index 814d8c0..ea72e22 100644
--- a/src/pages/stream-page.css
+++ b/src/pages/stream-page.css
@@ -1,43 +1,77 @@
-.video-content {
- grid-area: main-content;
+.stream-page {
+ display: grid;
+ grid-template-columns: auto 450px;
+ gap: var(--gap-m);
+ height: calc(100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s));
}
-.video-content video {
- max-height: 230px;
- width: 100vw;
- max-width: 100vw;
- background: #000;
+.stream-page .video-content {
+ overflow-y: auto;
+ height: fit-content;
+ gap: var(--gap-s);
+ display: flex;
+ flex-direction: column;
}
-.live-chat {
- max-width: calc(100vw - 32px);
+.stream-page .video-content video {
+ width: 100%;
+}
+
+.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);
+}
+
+@media (max-width: 1020px) {
+ .stream-page {
+ display: flex;
+ flex-direction: column;
+ height: calc(100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s));
+ }
+
+ .stream-page .video-content {
+ overflow-y: visible;
+ }
+
+ .stream-page .live-chat {
+ border-radius: 0;
+ border: 0;
+ padding: 8px 16px;
+ height: unset;
+ min-height: 0;
+ }
+
+ .stream-page .live-chat .top-zappers h3,
+ .stream-page .live-chat .header {
+ display: none;
+ }
+
+ .stream-page .info {
+ flex-direction: column;
+ }
+
+ .stream-page .stream-info {
+ display: none;
+ }
+
+ .stream-page .profile-info {
+ width: calc(100% - 32px);
+ }
}
.profile-info {
display: flex;
justify-content: space-between;
padding: 0 16px;
- gap: 24px;
+ gap: var(--gap-m);
}
.profile-info .btn {
padding: 12px 16px;
}
-@media (min-width: 768px) {
- .video-content {
- height: calc(100vh - 64px);
- }
-
- .video-content video {
- max-height: unset;
- }
-
- .profile-info {
- max-height: 42px;
- }
-}
-
.pill {
font-weight: 700;
font-size: 14px;
@@ -55,53 +89,6 @@
background: rgba(23, 23, 23, 0.7);
}
-@media (min-width: 1020px) {
- .info {
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
- }
-
- .video-content video {
- width: unset;
- }
-
- .profile-info {
- width: unset;
- }
-}
-
-.live-chat .header {
- display: none;
-}
-
-.stream-info {
- display: none;
-}
-
-@media (min-width: 1020px) {
- .live-chat .header {
- display: block;
- }
-
- .stream-info {
- display: block;
- }
-
- .video-content {
- height: 100%;
- }
-
- .live-chat {
- margin-left: 32px;
- }
-}
-
-.info {
- grid-area: profile;
- margin-top: 8px;
-}
-
.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 7c81f7b..d168647 100644
--- a/src/pages/stream-page.tsx
+++ b/src/pages/stream-page.tsx
@@ -45,7 +45,7 @@ function ProfileInfo({ ev, goal }: { ev?: NostrEvent; goal?: TaggedRawEvent }) {
const viewers = Number(findTag(ev, "current_participants") ?? "0");
return (
<>
-
+
{findTag(ev, "title")}
{findTag(ev, "summary")}
@@ -76,7 +76,7 @@ function ProfileInfo({ ev, goal }: { ev?: NostrEvent; goal?: TaggedRawEvent }) {
)}
-
+
{ev && (
@@ -100,18 +100,6 @@ function ProfileInfo({ ev, goal }: { ev?: NostrEvent; goal?: TaggedRawEvent }) {
);
}
-function VideoPlayer({ ev }: { ev?: NostrEvent }) {
- const stream = findTag(ev, "streaming");
- const image = findTag(ev, "image");
- const status = findTag(ev, "status");
-
- return (
-
-
-
- );
-}
-
export function StreamPage() {
const params = useParams();
const link = parseNostrLink(params.id!);
@@ -122,6 +110,7 @@ export function StreamPage() {
const title = findTag(ev, "title");
const summary = findTag(ev, "summary");
const image = findTag(ev, "image");
+ const stream = findTag(ev, "streaming");
const tags = ev?.tags.filter((a) => a[0] === "t").map((a) => a[1]) ?? [];
const descriptionContent = [
@@ -130,7 +119,7 @@ export function StreamPage() {
...tags,
].join(", ");
return (
- <>
+
{`${title} - zap.stream`}
@@ -143,9 +132,11 @@ export function StreamPage() {
-
-
+
- >
+
);
}