Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Update translations

Browse Source
This commit is contained in:
kieran
2024-09-19 18:41:09 +00:00
parent 6bc882fd41
commit 153a76a855
4 changed files with 160 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/app/src/Components/LiveStream/LiveEvent.tsx
View File

@ -11,18 +11,19 @@ import NoteAppHandler from "../Event/Note/NoteAppHandler";
import ProfileImage from "../User/ProfileImage"; import ProfileImage from "../User/ProfileImage";
const LiveKitRoom = lazy(() => import("./livekit")); const LiveKitRoom = lazy(() => import("./livekit"));
export function LiveEvent({ ev }: { ev: TaggedNostrEvent }) { export function LiveEvent({ ev }: { ev: TaggedNostrEvent }) {
const service = ev.tags.find(a => a[0] === "streaming")?.at(1); const service = ev.tags.find(a => a[0] === "streaming")?.at(1);
function inner() { function inner() {
if (service?.endsWith(".m3u8")) { if (service?.endsWith(".m3u8")) {
return <LiveStreamEvent ev={ev} /> return <LiveStreamEvent ev={ev} />;
} else if (service?.startsWith("wss+livekit://")) { } else if (service?.startsWith("wss+livekit://")) {
return <Suspense> return (
<LiveKitRoom ev={ev} canJoin={true} /> <Suspense>
</Suspense> <LiveKitRoom ev={ev} canJoin={true} />
</Suspense>
);
} }
return <NoteAppHandler ev={ev} /> return <NoteAppHandler ev={ev} />;
} }
return inner(); return inner();

166
packages/app/src/Components/LiveStream/livekit.tsx
View File

@ -15,103 +15,117 @@ import Avatar from "../User/Avatar";
import { AvatarGroup } from "../User/AvatarGroup"; import { AvatarGroup } from "../User/AvatarGroup";
import DisplayName from "../User/DisplayName"; import DisplayName from "../User/DisplayName";
export default function LiveKitRoom({ ev, canJoin }: { ev: TaggedNostrEvent, canJoin?: boolean }) { export default function LiveKitRoom({ ev, canJoin }: { ev: TaggedNostrEvent; canJoin?: boolean }) {
const { stream, service, id } = extractStreamInfo(ev); const { stream, service, id } = extractStreamInfo(ev);
const { publisher } = useEventPublisher(); const { publisher } = useEventPublisher();
const [join, setJoin] = useState(false); const [join, setJoin] = useState(false);
const [token, setToken] = useState<string>(); const [token, setToken] = useState<string>();
async function getToken() { async function getToken() {
if (!service || !publisher) if (!service || !publisher) return;
return; const url = `${service}/api/v1/nests/${id}`;
const url = `${service}/api/v1/nests/${id}`; const auth = await publisher.generic(eb => {
const auth = await publisher.generic(eb => { eb.kind(EventKind.HttpAuthentication);
eb.kind(EventKind.HttpAuthentication); eb.tag(["url", url]);
eb.tag(["url", url]); eb.tag(["u", url]);
eb.tag(["u", url]) eb.tag(["method", "GET"]);
eb.tag(["method", "GET"]); return eb;
return eb; });
}); const rsp = await fetch(url, {
const rsp = await fetch(url, { headers: {
headers: { authorization: `Nostr ${window.btoa(JSON.stringify(auth))}`,
authorization: `Nostr ${window.btoa(JSON.stringify(auth))}`, },
} });
});
const text = await rsp.text(); const text = await rsp.text();
if (rsp.ok) { if (rsp.ok) {
return JSON.parse(text) as { token: string }; return JSON.parse(text) as { token: string };
}
} }
}
useEffect(() => { useEffect(() => {
if (join && !token) { if (join && !token) {
getToken().then(t => setToken(t?.token)).catch(console.error); getToken()
} .then(t => setToken(t?.token))
}, [join]); .catch(console.error);
if (!join) {
return <div className="p flex flex-col gap-2">
<RoomHeader ev={ev} />
{(canJoin ?? false) && <AsyncButton onClick={() => setJoin(true)}>
<FormattedMessage defaultMessage="Join Room" />
</AsyncButton>}
</div>
} }
return <LiveKitRoomContext token={token} serverUrl={stream?.replace("wss+livekit://", "wss://")} connect={true}> }, [join]);
<RoomAudioRenderer volume={1} />
<ParticipantList ev={ev} /> if (!join) {
return (
<div className="p flex flex-col gap-2">
<RoomHeader ev={ev} />
{(canJoin ?? false) && (
<AsyncButton onClick={() => setJoin(true)}>
<FormattedMessage defaultMessage="Join Room" />
</AsyncButton>
)}
</div>
);
}
return (
<LiveKitRoomContext token={token} serverUrl={stream?.replace("wss+livekit://", "wss://")} connect={true}>
<RoomAudioRenderer volume={1} />
<ParticipantList ev={ev} />
</LiveKitRoomContext> </LiveKitRoomContext>
);
} }
function RoomHeader({ ev }: { ev: TaggedNostrEvent }) { function RoomHeader({ ev }: { ev: TaggedNostrEvent }) {
const { image, title } = extractStreamInfo(ev); const { image, title } = extractStreamInfo(ev);
return <div className="relative rounded-xl h-[140px] w-full overflow-hidden"> return (
{image ? <ProxyImg src={image} className="w-full" /> : <div className="relative rounded-xl h-[140px] w-full overflow-hidden">
<div className="absolute bg-gray-dark w-full h-full" />} {image ? <ProxyImg src={image} className="w-full" /> : <div className="absolute bg-gray-dark w-full h-full" />}
<div className="absolute left-4 top-4 w-full flex justify-between pr-4"> <div className="absolute left-4 top-4 w-full flex justify-between pr-4">
<div className="text-2xl"> <div className="text-2xl">{title}</div>
{title} <div>
</div> <NostrParticipants ev={ev} />
<div>
<NostrParticipants ev={ev} />
</div>
</div> </div>
</div>
</div> </div>
);
} }
function ParticipantList({ ev }: { ev: TaggedNostrEvent }) { function ParticipantList({ ev }: { ev: TaggedNostrEvent }) {
const participants = useParticipants() const participants = useParticipants();
return <div className="p"> return (
<RoomHeader ev={ev} /> <div className="p">
<h3> <RoomHeader ev={ev} />
<FormattedMessage defaultMessage="Participants" /> <h3>
</h3> <FormattedMessage defaultMessage="Participants" />
<div className="grid grid-cols-4"> </h3>
{participants.map(a => <LiveKitUser p={a} key={a.identity} />)} <div className="grid grid-cols-4">
</div> {participants.map(a => (
<LiveKitUser p={a} key={a.identity} />
))}
</div>
</div> </div>
);
} }
function NostrParticipants({ ev }: { ev: TaggedNostrEvent }) { function NostrParticipants({ ev }: { ev: TaggedNostrEvent }) {
const link = NostrLink.fromEvent(ev); const link = NostrLink.fromEvent(ev);
const sub = useMemo(() => { const sub = useMemo(() => {
const sub = new RequestBuilder(`livekit-participants:${link.tagKey}`); const sub = new RequestBuilder(`livekit-participants:${link.tagKey}`);
sub.withFilter().replyToLink([link]).kinds([10_312 as EventKind]).since(unixNow() - 600); sub
return sub; .withFilter()
}, [link.tagKey]); .replyToLink([link])
.kinds([10_312 as EventKind])
.since(unixNow() - 600);
return sub;
}, [link.tagKey]);
const presense = useRequestBuilder(sub); const presense = useRequestBuilder(sub);
return <AvatarGroup ids={dedupe(presense.map(a => a.pubkey))} size={32} /> return <AvatarGroup ids={dedupe(presense.map(a => a.pubkey))} size={32} />;
} }
function LiveKitUser({ p }: { p: RemoteParticipant | LocalParticipant }) { function LiveKitUser({ p }: { p: RemoteParticipant | LocalParticipant }) {
const pubkey = p.identity.startsWith("guest-") ? "anon" : p.identity const pubkey = p.identity.startsWith("guest-") ? "anon" : p.identity;
const profile = useUserProfile(pubkey); const profile = useUserProfile(pubkey);
return <div className="flex flex-col gap-2 items-center text-center"> return (
<Avatar pubkey={pubkey} className={p.isSpeaking ? "outline" : ""} user={profile} size={48} /> <div className="flex flex-col gap-2 items-center text-center">
<DisplayName pubkey={pubkey} user={pubkey === "anon" ? { name: "Anon" } : profile} /> <Avatar pubkey={pubkey} className={p.isSpeaking ? "outline" : ""} user={profile} size={48} />
<DisplayName pubkey={pubkey} user={pubkey === "anon" ? { name: "Anon" } : profile} />
</div> </div>
);
} }

11
packages/app/src/Components/User/AvatarGroup.tsx
View File

@ -3,10 +3,17 @@ import React from "react";
import ProfileImage from "@/Components/User/ProfileImage"; import ProfileImage from "@/Components/User/ProfileImage";
export function AvatarGroup({ ids, onClick, size }: { ids: HexKey[]; onClick?: () => void, size?: number }) { export function AvatarGroup({ ids, onClick, size }: { ids: HexKey[]; onClick?: () => void; size?: number }) {
return ids.map((a, index) => ( return ids.map((a, index) => (
<div className={`inline-block ${index > 0 ? "-ml-4" : ""}`} key={a} style={{ zIndex: ids.length - index }}> <div className={`inline-block ${index > 0 ? "-ml-4" : ""}`} key={a} style={{ zIndex: ids.length - index }}>
<ProfileImage link="" onClick={onClick} showFollowDistance={false} pubkey={a} size={size ?? 24} showUsername={false} /> <ProfileImage
link=""
onClick={onClick}
showFollowDistance={false}
pubkey={a}
size={size ?? 24}
showUsername={false}
/>
</div> </div>
)); ));
} }

105
packages/app/src/Utils/stream.ts
View File

@ -1,72 +1,71 @@
import { TaggedNostrEvent } from "@snort/system"; import { TaggedNostrEvent } from "@snort/system";
export function getHost(ev?: TaggedNostrEvent) { export function getHost(ev?: TaggedNostrEvent) {
return ev?.tags.find(a => a[0] === "p" && a[3] === "host")?.[1] ?? ev?.pubkey ?? ""; return ev?.tags.find(a => a[0] === "p" && a[3] === "host")?.[1] ?? ev?.pubkey ?? "";
} }
export type StreamState = "live" | "ended" | "planned"; export type StreamState = "live" | "ended" | "planned";
export interface StreamInfo { export interface StreamInfo {
id?: string; id?: string;
title?: string; title?: string;
summary?: string; summary?: string;
image?: string; image?: string;
thumbnail?: string; thumbnail?: string;
status?: StreamState; status?: StreamState;
stream?: string; stream?: string;
recording?: string; recording?: string;
contentWarning?: string; contentWarning?: string;
tags: Array<string>; tags: Array<string>;
goal?: string; goal?: string;
participants?: string; participants?: string;
starts?: string; starts?: string;
ends?: string; ends?: string;
service?: string; service?: string;
host?: string; host?: string;
gameId?: string; gameId?: string;
} }
const gameTagFormat = /^[a-z-]+:[a-z0-9-]+$/i; const gameTagFormat = /^[a-z-]+:[a-z0-9-]+$/i;
export function extractStreamInfo(ev?: TaggedNostrEvent) { export function extractStreamInfo(ev?: TaggedNostrEvent) {
const ret = { const ret = {
host: getHost(ev), host: getHost(ev),
} as StreamInfo; } as StreamInfo;
const matchTag = (tag: Array<string>, k: string, into: (v: string) => void) => { const matchTag = (tag: Array<string>, k: string, into: (v: string) => void) => {
if (tag[0] === k) { if (tag[0] === k) {
into(tag[1]); into(tag[1]);
}
};
for (const t of ev?.tags ?? []) {
matchTag(t, "d", v => (ret.id = v));
matchTag(t, "title", v => (ret.title = v));
matchTag(t, "summary", v => (ret.summary = v));
matchTag(t, "image", v => (ret.image = v));
matchTag(t, "thumbnail", v => (ret.thumbnail = v));
matchTag(t, "status", v => (ret.status = v as StreamState));
if (t[0] === "streaming") {
matchTag(t, "streaming", v => (ret.stream = v));
}
matchTag(t, "recording", v => (ret.recording = v));
matchTag(t, "url", v => (ret.recording = v));
matchTag(t, "content-warning", v => (ret.contentWarning = v));
matchTag(t, "current_participants", v => (ret.participants = v));
matchTag(t, "goal", v => (ret.goal = v));
matchTag(t, "starts", v => (ret.starts = v));
matchTag(t, "ends", v => (ret.ends = v));
matchTag(t, "service", v => (ret.service = v));
} }
const { regularTags } = sortStreamTags(ev?.tags ?? []); };
ret.tags = regularTags;
return ret; for (const t of ev?.tags ?? []) {
matchTag(t, "d", v => (ret.id = v));
matchTag(t, "title", v => (ret.title = v));
matchTag(t, "summary", v => (ret.summary = v));
matchTag(t, "image", v => (ret.image = v));
matchTag(t, "thumbnail", v => (ret.thumbnail = v));
matchTag(t, "status", v => (ret.status = v as StreamState));
if (t[0] === "streaming") {
matchTag(t, "streaming", v => (ret.stream = v));
}
matchTag(t, "recording", v => (ret.recording = v));
matchTag(t, "url", v => (ret.recording = v));
matchTag(t, "content-warning", v => (ret.contentWarning = v));
matchTag(t, "current_participants", v => (ret.participants = v));
matchTag(t, "goal", v => (ret.goal = v));
matchTag(t, "starts", v => (ret.starts = v));
matchTag(t, "ends", v => (ret.ends = v));
matchTag(t, "service", v => (ret.service = v));
}
const { regularTags } = sortStreamTags(ev?.tags ?? []);
ret.tags = regularTags;
return ret;
} }
export function sortStreamTags(tags: Array<string | Array<string>>) { export function sortStreamTags(tags: Array<string | Array<string>>) {
const plainTags = tags.filter(a => (Array.isArray(a) ? a[0] === "t" : true)).map(a => (Array.isArray(a) ? a[1] : a)); const plainTags = tags.filter(a => (Array.isArray(a) ? a[0] === "t" : true)).map(a => (Array.isArray(a) ? a[1] : a));
const regularTags = plainTags.filter(a => !a.match(gameTagFormat)) ?? []; const regularTags = plainTags.filter(a => !a.match(gameTagFormat)) ?? [];
const prefixedTags = plainTags.filter(a => !regularTags.includes(a)); const prefixedTags = plainTags.filter(a => !regularTags.includes(a));
return { regularTags, prefixedTags }; return { regularTags, prefixedTags };
} }