roland/stream
1
0
Fork 0
forked from Kieran/zap.stream
Code Pull Requests Activity

Optimize home page loading

Browse Source
This commit is contained in:
Kieran 2023-06-22 12:17:36 +01:00
parent 37ccda1ce9
commit 0ad5e387a1
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
3 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -10,6 +10,7 @@
"hls.js": "^1.4.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-intersection-observer": "^9.5.1",
"react-router-dom": "^6.13.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.0"

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

@ -2,8 +2,10 @@ import { Link } from "react-router-dom";
import { Profile } from "./profile";
import "./video-tile.css";
import { NostrEvent, encodeTLV, NostrPrefix } from "@snort/system";
import { useInView } from "react-intersection-observer";
export function VideoTile({ ev }: { ev: NostrEvent }) {
const { inView, ref } = useInView({ triggerOnce: true });
const id = ev.tags.find(a => a[0] === "d")?.[1]!;
const title = ev.tags.find(a => a[0] === "title")?.[1];
const image = ev.tags.find(a => a[0] === "image")?.[1];
@ -11,9 +13,9 @@ export function VideoTile({ ev }: { ev: NostrEvent }) {
const isLive = status === "live";
const link = encodeTLV(NostrPrefix.Address, id, undefined, ev.kind, ev.pubkey);
return <Link to={`/live/${link}`} className="video-tile">
return <Link to={`/live/${link}`} className="video-tile" ref={ref}>
<div style={{
backgroundImage: `url(${image})`
backgroundImage: `url(${inView ? image : ""})`
}}>
<span className={`pill${isLive ? " live" : ""}`}>
{status}
@ -21,7 +23,7 @@ export function VideoTile({ ev }: { ev: NostrEvent }) {
</div>
<h3>{title}</h3>
<div>
<Profile pubkey={ev.pubkey} />
{inView && <Profile pubkey={ev.pubkey} />}
</div>
</Link>
}

5
yarn.lock
View File

@ -7739,6 +7739,11 @@ react-error-overlay@^6.0.11:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
react-intersection-observer@^9.5.1:
version "9.5.1"
resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.5.1.tgz#63a6d7c45f7251610ad2f5a5abb85204ee0926ac"
integrity sha512-YwcNF/4WsMAG1rLVDQHSbpdEW9vDaIl4QW88d+vqeXNUewFV4AJDQB14oHpAJ3rRCnKRmwu3nqfwwYe6wioNIg==
react-is@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"