Kieran/zap.stream
5
8
Fork 9
Code Issues 27 Pull Requests 1 Packages Projects 1 Releases Wiki Activity

video tile fixes

Browse Source
This commit is contained in:
Alejandro Gomez 2023-07-01 18:44:50 +02:00
parent b567a2515e
commit 12345da1e1
No known key found for this signature in database
GPG Key ID: 4DF39E566658C817
4 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@ -12,10 +12,10 @@
<title>Nostr stream</title> <title>Nostr stream</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>

6
src/element/video-tile.tsx
View File

@ -9,9 +9,11 @@ import { StreamState } from "index";
export function VideoTile({ export function VideoTile({
ev, ev,
showAuthor = true, showAuthor = true,
showStatus = true,
}: { }: {
ev: NostrEvent; ev: NostrEvent;
showAuthor?: boolean; showAuthor?: boolean;
showStatus?: boolean;
}) { }) {
const { inView, ref } = useInView({ triggerOnce: true }); const { inView, ref } = useInView({ triggerOnce: true });
const id = ev.tags.find((a) => a[0] === "d")?.[1]!; const id = ev.tags.find((a) => a[0] === "d")?.[1]!;
@ -29,13 +31,13 @@ export function VideoTile({
ev.pubkey ev.pubkey
); );
return ( return (
<Link to={`/${link}`} className="video-tile" ref={ref}> <Link to={`/live/${link}`} className="video-tile" ref={ref}>
<div <div
style={{ style={{
backgroundImage: `url(${inView ? image : ""})`, backgroundImage: `url(${inView ? image : ""})`,
}} }}
> >
<StatePill state={status as StreamState} /> {showStatus && <StatePill state={status as StreamState} />}
</div> </div>
<h3>{title}</h3> <h3>{title}</h3>
{showAuthor && <div>{inView && <Profile pubkey={host} />}</div>} {showAuthor && <div>{inView && <Profile pubkey={host} />}</div>}

16
src/pages/profile-page.css
View File

@ -197,3 +197,19 @@
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
} }
.stream-item .video-tile h3 {
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin: 6px 0 0 0;
}
.stream-item .timestamp {
color: #ADADAD;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
}

20
src/pages/profile-page.tsx
View File

@ -1,5 +1,6 @@
import "./profile-page.css"; import "./profile-page.css";
import { useMemo } from "react"; import { useMemo } from "react";
import moment from "moment";
import { useNavigate, useParams } from "react-router-dom"; import { useNavigate, useParams } from "react-router-dom";
import * as Tabs from "@radix-ui/react-tabs"; import * as Tabs from "@radix-ui/react-tabs";
import { import {
@ -17,7 +18,6 @@ import { FollowButton } from "element/follow-button";
import { useProfile } from "hooks/profile"; import { useProfile } from "hooks/profile";
import useTopZappers from "hooks/top-zappers"; import useTopZappers from "hooks/top-zappers";
import { Text } from "element/text"; import { Text } from "element/text";
import { Tags } from "element/tags";
import { StreamState, System } from "index"; import { StreamState, System } from "index";
import { findTag } from "utils"; import { findTag } from "utils";
import { formatSats } from "number"; import { formatSats } from "number";
@ -165,8 +165,13 @@ export function ProfilePage() {
<div className="stream-list"> <div className="stream-list">
{pastStreams.map((ev) => ( {pastStreams.map((ev) => (
<div key={ev.id} className="stream-item"> <div key={ev.id} className="stream-item">
<VideoTile ev={ev} showAuthor={false} /> <VideoTile ev={ev} showAuthor={false} showStatus={false} />
<Tags ev={ev} /> <span className="timestamp">
Streamed on{" "}
{moment(Number(ev.created_at) * 1000).format(
"MMM DD, YYYY"
)}
</span>
</div> </div>
))} ))}
</div> </div>
@ -175,8 +180,13 @@ export function ProfilePage() {
<div className="stream-list"> <div className="stream-list">
{futureStreams.map((ev) => ( {futureStreams.map((ev) => (
<div key={ev.id} className="stream-item"> <div key={ev.id} className="stream-item">
<VideoTile ev={ev} showAuthor={false} /> <VideoTile ev={ev} showAuthor={false} showStatus={false} />
<Tags ev={ev} /> <span className="timestamp">
Scheduled for{" "}
{moment(Number(ev.created_at) * 1000).format(
"MMM DD, YYYY h:mm:ss a"
)}
</span>
</div> </div>
))} ))}
</div> </div>