Kieran/zap.stream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<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>
<body>
<div id="root"></div>
</body>
</html>
</html>

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

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

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

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