forked from Kieran/zap.stream
feat: mobile and tablet styles
This commit is contained in:
parent
9fd8b65bdf
commit
803d0910af
@ -3,6 +3,7 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@react-hook/resize-observer": "^1.2.6",
|
||||
"@snort/system-react": "^1.0.8",
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^13.0.0",
|
||||
|
@ -2,5 +2,4 @@
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
display: inline-block;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
@ -1,13 +1,23 @@
|
||||
.live-chat {
|
||||
height: calc(100vh - 72px - 96px);
|
||||
grid-area: chat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px 16px 8px 24px;
|
||||
border: 1px solid #171717;
|
||||
border-radius: 24px;
|
||||
gap: 16px;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
height: unset;
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.live-chat {
|
||||
height: calc(100vh - 72px - 96px);
|
||||
padding: 24px 16px 8px 24px;
|
||||
border: 1px solid #171717;
|
||||
border-radius: 24px;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.live-chat>.header {
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
@ -15,12 +25,19 @@
|
||||
}
|
||||
|
||||
.live-chat>.messages {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-direction: column-reverse;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--border, #171717);
|
||||
}
|
||||
|
||||
@media (min-width: 1020px){
|
||||
.live-chat > .messages {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.live-chat>.write-message {
|
||||
@ -42,6 +59,10 @@
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.live-chat .message {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.live-chat .message .profile {
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
@ -69,6 +90,10 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
.live-chat .messages .pill:hover {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.live-chat .zap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -84,14 +109,21 @@
|
||||
|
||||
.top-zappers-container {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: space-between;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--border, #171717);
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.top-zappers-container {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--border, #171717);
|
||||
}
|
||||
}
|
||||
|
||||
.top-zapper {
|
||||
display: flex;
|
||||
padding: 4px 8px 4px 4px;
|
||||
@ -114,6 +146,6 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.top-zapper-icon {
|
||||
.zap-icon {
|
||||
color: #FFCB44;
|
||||
}
|
||||
|
@ -42,7 +42,8 @@ function totalZapped(pubkey: string, zaps: ParsedZap[]) {
|
||||
function TopZappers({ zaps }: { zaps: ParsedZap[] }) {
|
||||
const zappers = zaps
|
||||
.map((z) => (z.anonZap ? "anon" : z.sender))
|
||||
.map((p) => p as string);
|
||||
.map((p) => p as string)
|
||||
.slice(0, 3);
|
||||
|
||||
const sortedZappers = useMemo(() => {
|
||||
const sorted = [...new Set([...zappers])];
|
||||
@ -63,7 +64,7 @@ function TopZappers({ zaps }: { zaps: ParsedZap[] }) {
|
||||
) : (
|
||||
<Profile pubkey={pk} options={{ showName: false }} />
|
||||
)}
|
||||
<Icon name="zap" className="top-zapper-icon" />
|
||||
<Icon name="zap" className="zap-icon" />
|
||||
<p className="top-zapper-amount">{formatSats(total)}</p>
|
||||
</div>
|
||||
);
|
||||
@ -76,9 +77,11 @@ function TopZappers({ zaps }: { zaps: ParsedZap[] }) {
|
||||
export function LiveChat({
|
||||
link,
|
||||
options,
|
||||
height,
|
||||
}: {
|
||||
link: NostrLink;
|
||||
options?: LiveChatOptions;
|
||||
height?: number;
|
||||
}) {
|
||||
const messages = useLiveChatFeed(link);
|
||||
const login = useLogin();
|
||||
@ -88,7 +91,7 @@ export function LiveChat({
|
||||
.map((ev) => parseZap(ev, System.ProfileLoader.Cache))
|
||||
.filter((z) => z && z.valid);
|
||||
return (
|
||||
<div className="live-chat">
|
||||
<div className="live-chat" style={height ? { height: `${height}px` } : {}}>
|
||||
{(options?.showHeader ?? true) && (
|
||||
<div className="header">Stream Chat</div>
|
||||
)}
|
||||
@ -157,7 +160,7 @@ function ChatZap({ ev }: { ev: TaggedRawEvent }) {
|
||||
return (
|
||||
<div className="pill">
|
||||
<div className="zap">
|
||||
<Icon name="zap" />
|
||||
<Icon name="zap" className="zap-icon" />
|
||||
<Profile
|
||||
pubkey={parsed.anonZap ? "" : parsed.sender ?? ""}
|
||||
options={{
|
||||
@ -165,7 +168,6 @@ function ChatZap({ ev }: { ev: TaggedRawEvent }) {
|
||||
overrideName: parsed.anonZap ? "Anon" : undefined,
|
||||
}}
|
||||
/>
|
||||
zapped
|
||||
{formatSats(parsed.amount)}
|
||||
sats
|
||||
</div>
|
||||
|
@ -3,16 +3,23 @@ import { HTMLProps, useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
export enum VideoStatus {
|
||||
Online = "online",
|
||||
Offline = "offline"
|
||||
Offline = "offline",
|
||||
}
|
||||
|
||||
export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream?: string }) {
|
||||
export function LiveVideoPlayer(
|
||||
props: HTMLProps<HTMLVideoElement> & { stream?: string }
|
||||
) {
|
||||
const video = useRef<HTMLVideoElement>(null);
|
||||
const streamCached = useMemo(() => props.stream, [props.stream]);
|
||||
const [status, setStatus] = useState<VideoStatus>();
|
||||
|
||||
useEffect(() => {
|
||||
if (streamCached && video.current && !video.current.src && Hls.isSupported()) {
|
||||
if (
|
||||
streamCached &&
|
||||
video.current &&
|
||||
!video.current.src &&
|
||||
Hls.isSupported()
|
||||
) {
|
||||
try {
|
||||
const hls = new Hls();
|
||||
hls.loadSource(streamCached);
|
||||
@ -25,10 +32,10 @@ export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream?:
|
||||
hls.detachMedia();
|
||||
setStatus(VideoStatus.Offline);
|
||||
}
|
||||
})
|
||||
});
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
setStatus(VideoStatus.Online);
|
||||
})
|
||||
});
|
||||
return () => hls.destroy();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@ -37,9 +44,11 @@ export function LiveVideoPlayer(props: HTMLProps<HTMLVideoElement> & { stream?:
|
||||
}
|
||||
}, [video, streamCached]);
|
||||
return (
|
||||
<div className={status}>
|
||||
<div>{status}</div>
|
||||
<>
|
||||
<div className={status}>
|
||||
<div>{status}</div>
|
||||
</div>
|
||||
<video ref={video} {...props} controls={status === VideoStatus.Online} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -24,16 +24,24 @@ export function getName(pk: string, user?: UserMetadata) {
|
||||
|
||||
export function Profile({
|
||||
pubkey,
|
||||
avatarClassname,
|
||||
options,
|
||||
}: {
|
||||
pubkey: string;
|
||||
avatarClassname?: string;
|
||||
options?: ProfileOptions;
|
||||
}) {
|
||||
const profile = useUserProfile(System, pubkey);
|
||||
|
||||
return (
|
||||
<div className="profile">
|
||||
{(options?.showAvatar ?? true) && <img src={profile?.picture ?? ""} />}
|
||||
{(options?.showAvatar ?? true) && (
|
||||
<img
|
||||
alt={profile?.name || pubkey}
|
||||
className={avatarClassname ? avatarClassname : ""}
|
||||
src={profile?.picture ?? ""}
|
||||
/>
|
||||
)}
|
||||
{(options?.showName ?? true) &&
|
||||
(options?.overrideName ?? getName(pubkey, profile))}
|
||||
</div>
|
||||
|
@ -1,3 +1,7 @@
|
||||
.rta__textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.rta__list {
|
||||
border: none;
|
||||
}
|
||||
|
@ -1,5 +1,10 @@
|
||||
import { useMemo } from "react";
|
||||
import { NostrPrefix, RequestBuilder, ReplaceableNoteStore, NostrLink } from "@snort/system";
|
||||
import {
|
||||
NostrPrefix,
|
||||
RequestBuilder,
|
||||
ReplaceableNoteStore,
|
||||
NostrLink,
|
||||
} from "@snort/system";
|
||||
import { useRequestBuilder } from "@snort/system-react";
|
||||
|
||||
import { System } from "index";
|
||||
@ -8,8 +13,8 @@ export default function useEventFeed(link: NostrLink, leaveOpen = false) {
|
||||
const sub = useMemo(() => {
|
||||
const b = new RequestBuilder(`event:${link.id.slice(0, 12)}`);
|
||||
b.withOptions({
|
||||
leaveOpen
|
||||
})
|
||||
leaveOpen,
|
||||
});
|
||||
if (link.type === NostrPrefix.Address) {
|
||||
const f = b.withFilter().tag("d", [link.id]);
|
||||
if (link.author) {
|
||||
@ -21,14 +26,18 @@ export default function useEventFeed(link: NostrLink, leaveOpen = false) {
|
||||
} else {
|
||||
const f = b.withFilter().ids([link.id]);
|
||||
if (link.relays) {
|
||||
link.relays.slice(0, 2).forEach(r => f.relay(r));
|
||||
link.relays.slice(0, 2).forEach((r) => f.relay(r));
|
||||
}
|
||||
if (link.author) {
|
||||
f.authors([link.author]);
|
||||
}
|
||||
}
|
||||
return b;
|
||||
}, [link]);
|
||||
}, [link, leaveOpen]);
|
||||
|
||||
return useRequestBuilder<ReplaceableNoteStore>(System, ReplaceableNoteStore, sub);
|
||||
return useRequestBuilder<ReplaceableNoteStore>(
|
||||
System,
|
||||
ReplaceableNoteStore,
|
||||
sub
|
||||
);
|
||||
}
|
||||
|
@ -1,4 +1,74 @@
|
||||
.page {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"video-content"
|
||||
"profile"
|
||||
"chat";
|
||||
grid-template-rows: 64px 230px 56px min-content;
|
||||
grid-template-columns: 1fr;
|
||||
height: 100vh;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
|
||||
.live-chat {
|
||||
max-height: calc(100vh - 385px);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.video-content video {
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
.live-chat {
|
||||
width: fit-content;
|
||||
max-height: calc(100vh - 82px);
|
||||
}
|
||||
|
||||
.page {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"video-content chat";
|
||||
grid-template-rows: 64px min-content;
|
||||
grid-template-columns: calc(min(600px, 1fr)) 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.video-content video {
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: unset;
|
||||
display: grid;
|
||||
height: calc(100vh - 72px - 32px - 32px);
|
||||
padding: 0 40px;
|
||||
grid-template-columns: auto 376px;
|
||||
grid-template-rows: unset;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"video-content chat"
|
||||
"profile chat";
|
||||
gap: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2000px) {
|
||||
.page {
|
||||
grid-template-columns: auto 450px;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
grid-area: header;
|
||||
display: grid;
|
||||
grid-template-columns: min-content min-content auto;
|
||||
gap: 24px;
|
||||
@ -6,7 +76,7 @@ header {
|
||||
padding: 24px 40px 0 40px;
|
||||
}
|
||||
|
||||
header>div:nth-child(1) {
|
||||
header .logo {
|
||||
background: #171717;
|
||||
border-radius: 16px;
|
||||
width: 48px;
|
||||
@ -19,12 +89,12 @@ header>div:nth-child(1) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
header>div:nth-child(2) {
|
||||
header .input {
|
||||
min-width: 300px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
header>div:nth-child(3) {
|
||||
header .header-right {
|
||||
justify-self: end;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
@ -44,4 +114,31 @@ header button {
|
||||
header .profile img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
header {
|
||||
padding: 8px 16px 8px 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
header .header-right {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
header .input {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
header .input .search-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header .new-stream-button-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header .profile img {
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
@ -37,10 +37,11 @@ export function LayoutPage() {
|
||||
className="btn btn-primary"
|
||||
onClick={() => setNewStream(true)}
|
||||
>
|
||||
New Stream
|
||||
<span className="new-stream-button-text">New Stream</span>
|
||||
<Icon name="signal" />
|
||||
</button>
|
||||
<Profile
|
||||
avatarClassname="mb-squared"
|
||||
pubkey={login.pubkey}
|
||||
options={{
|
||||
showName: false,
|
||||
@ -77,14 +78,16 @@ export function LayoutPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="page">
|
||||
<header>
|
||||
<div onClick={() => navigate("/")}>S</div>
|
||||
<div className="logo" onClick={() => navigate("/")}>
|
||||
S
|
||||
</div>
|
||||
<div className="input">
|
||||
<input type="text" placeholder="Search" />
|
||||
<input className="search-input" type="text" placeholder="Search" />
|
||||
<Icon name="search" size={15} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="header-right">
|
||||
{loggedIn()}
|
||||
{loggedOut()}
|
||||
</div>
|
||||
@ -95,6 +98,6 @@ export function LayoutPage() {
|
||||
<NewStream onFinish={goToStream} />
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -5,6 +5,24 @@
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 1020px) {
|
||||
.video-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.video-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1600px) {
|
||||
.video-grid {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
@ -18,7 +36,6 @@
|
||||
}
|
||||
|
||||
.homepage h2 {
|
||||
|
||||
background: #171717;
|
||||
padding: 40px;
|
||||
}
|
||||
}
|
||||
|
@ -1,27 +1,21 @@
|
||||
.live-page {
|
||||
display: grid;
|
||||
height: calc(100vh - 72px - 32px - 32px);
|
||||
padding: 32px 40px;
|
||||
grid-template-columns: auto 376px;
|
||||
gap: 32px;
|
||||
.video-content {
|
||||
grid-area: video-content;
|
||||
}
|
||||
|
||||
@media (min-width: 2000px) {
|
||||
.live-page {
|
||||
grid-template-columns: auto 450px;
|
||||
|
||||
.video-content video {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
max-height: 230px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px){
|
||||
.video-content video {
|
||||
max-height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.live-page>div:nth-child(1) {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.live-page video {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.live-page .pill {
|
||||
.pill {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
@ -29,62 +23,106 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.live-page .pill.live {
|
||||
.pill.live {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.live-page .info {
|
||||
margin-top: 32px;
|
||||
.profile-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.live-page .info h1 {
|
||||
@media (min-width: 1020px) {
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
grid-area: profile;
|
||||
margin-top: 8px
|
||||
}
|
||||
|
||||
@media (min-width: 1020px) {
|
||||
.info {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.info h1 {
|
||||
margin: 0 0 8px 0;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.live-page .info p {
|
||||
.info p {
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.live-page .tags {
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.live-page .actions {
|
||||
.actions {
|
||||
margin: 8px 0 0 0;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.live-page .btn.zap {
|
||||
.info .btn.zap {
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.live-page .offline {
|
||||
.offline {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.live-page .online>div {
|
||||
.online>div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.live-page .offline>div {
|
||||
.offline>div {
|
||||
position: fixed;
|
||||
text-transform: uppercase;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.live-page .offline>video {
|
||||
.offline>video {
|
||||
z-index: -1;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
@ -1,7 +1,8 @@
|
||||
import "./stream-page.css";
|
||||
import { useState } from "react";
|
||||
import { useRef, useState, useLayoutEffect } from "react";
|
||||
import { parseNostrLink, EventPublisher } from "@snort/system";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import useResizeObserver from "@react-hook/resize-observer";
|
||||
import moment from "moment";
|
||||
|
||||
import useEventFeed from "hooks/event-feed";
|
||||
@ -15,26 +16,23 @@ import { useLogin } from "hooks/login";
|
||||
import { StreamState, System } from "index";
|
||||
import Modal from "element/modal";
|
||||
import { SendZaps } from "element/send-zap";
|
||||
import type { NostrLink } from "@snort/system";
|
||||
import { useUserProfile } from "@snort/system-react";
|
||||
import { NewStream } from "element/new-stream";
|
||||
|
||||
export function StreamPage() {
|
||||
const params = useParams();
|
||||
const link = parseNostrLink(params.id!);
|
||||
function ProfileInfo({ link }: { link: NostrLink }) {
|
||||
const thisEvent = useEventFeed(link, true);
|
||||
const login = useLogin();
|
||||
const navigate = useNavigate();
|
||||
const [zap, setZap] = useState(false);
|
||||
const [edit, setEdit] = useState(false);
|
||||
const profile = useUserProfile(System, thisEvent.data?.pubkey);
|
||||
const zapTarget = profile?.lud16 ?? profile?.lud06;
|
||||
|
||||
const stream = findTag(thisEvent.data, "streaming");
|
||||
const status = findTag(thisEvent.data, "status");
|
||||
const image = findTag(thisEvent.data, "image");
|
||||
const start = findTag(thisEvent.data, "starts");
|
||||
const isLive = status === "live";
|
||||
const isMine = link.author === login?.pubkey;
|
||||
const zapTarget = profile?.lud16 ?? profile?.lud06;
|
||||
|
||||
async function deleteStream() {
|
||||
const pub = await EventPublisher.nip7();
|
||||
@ -47,59 +45,54 @@ export function StreamPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="live-page">
|
||||
<div>
|
||||
<LiveVideoPlayer stream={stream} autoPlay={true} poster={image} />
|
||||
<div className="flex info">
|
||||
<div className="f-grow">
|
||||
<h1>{findTag(thisEvent.data, "title")}</h1>
|
||||
<p>{findTag(thisEvent.data, "summary")}</p>
|
||||
<div className="tags">
|
||||
<span className={`pill${isLive ? " live" : ""}`}>{status}</span>
|
||||
{status === StreamState.Planned && <span className="pill">Starts {moment(Number(start) * 1000).fromNow()}</span>}
|
||||
{thisEvent.data?.tags
|
||||
.filter((a) => a[0] === "t")
|
||||
.map((a) => a[1])
|
||||
.map((a) => (
|
||||
<span className="pill" key={a}>
|
||||
{a}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{isMine && (
|
||||
<div className="actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn"
|
||||
onClick={() => setEdit(true)}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<AsyncButton
|
||||
type="button"
|
||||
className="btn btn-red"
|
||||
onClick={deleteStream}
|
||||
>
|
||||
Delete
|
||||
</AsyncButton>
|
||||
</div>
|
||||
<>
|
||||
<div className="flex info">
|
||||
<div className="f-grow stream-info">
|
||||
<h1>{findTag(thisEvent.data, "title")}</h1>
|
||||
<p>{findTag(thisEvent.data, "summary")}</p>
|
||||
<div className="tags">
|
||||
<span className={`pill${isLive ? " live" : ""}`}>{status}</span>
|
||||
{status === StreamState.Planned && (
|
||||
<span className="pill">
|
||||
Starts {moment(Number(start) * 1000).fromNow()}
|
||||
</span>
|
||||
)}
|
||||
{thisEvent.data?.tags
|
||||
.filter((a) => a[0] === "t")
|
||||
.map((a) => a[1])
|
||||
.map((a) => (
|
||||
<span className="pill" key={a}>
|
||||
{a}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex g24">
|
||||
<Profile pubkey={thisEvent.data?.pubkey ?? ""} />
|
||||
{isMine && (
|
||||
<div className="actions">
|
||||
<button
|
||||
onClick={() => setZap(true)}
|
||||
className="btn btn-primary zap"
|
||||
type="button"
|
||||
className="btn"
|
||||
onClick={() => setEdit(true)}
|
||||
>
|
||||
Zap
|
||||
<Icon name="zap" size={16} />
|
||||
Edit
|
||||
</button>
|
||||
<AsyncButton
|
||||
type="button"
|
||||
className="btn btn-red"
|
||||
onClick={deleteStream}
|
||||
>
|
||||
Delete
|
||||
</AsyncButton>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="profile-info flex g24">
|
||||
<Profile pubkey={thisEvent.data?.pubkey ?? ""} />
|
||||
<button onClick={() => setZap(true)} className="btn btn-primary zap">
|
||||
Zap
|
||||
<Icon name="zap" size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<LiveChat link={link} />
|
||||
{zap && zapTarget && thisEvent.data && (
|
||||
<Modal onClose={() => setZap(false)}>
|
||||
<SendZaps
|
||||
@ -112,12 +105,74 @@ export function StreamPage() {
|
||||
)}
|
||||
{edit && thisEvent.data && (
|
||||
<Modal onClose={() => setEdit(false)}>
|
||||
<NewStream
|
||||
<NewStream ev={thisEvent.data} onFinish={() => setEdit(false)} />
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function VideoPlayer({ link }: { link: NostrLink }) {
|
||||
const thisEvent = useEventFeed(link);
|
||||
const [zap, setZap] = useState(false);
|
||||
const [edit, setEdit] = useState(false);
|
||||
const profile = useUserProfile(System, thisEvent.data?.pubkey);
|
||||
const zapTarget = profile?.lud16 ?? profile?.lud06;
|
||||
|
||||
const stream = findTag(thisEvent.data, "streaming");
|
||||
const image = findTag(thisEvent.data, "image");
|
||||
|
||||
return (
|
||||
<>
|
||||
{zap && zapTarget && thisEvent.data && (
|
||||
<Modal onClose={() => setZap(false)}>
|
||||
<SendZaps
|
||||
lnurl={zapTarget}
|
||||
ev={thisEvent.data}
|
||||
onFinish={() => setEdit(false)}
|
||||
targetName={getName(thisEvent.data.pubkey, profile)}
|
||||
onFinish={() => setZap(false)}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
{edit && thisEvent.data && (
|
||||
<Modal onClose={() => setEdit(false)}>
|
||||
<NewStream ev={thisEvent.data} onFinish={() => setEdit(false)} />
|
||||
</Modal>
|
||||
)}
|
||||
<div className="video-content">
|
||||
<LiveVideoPlayer stream={stream} autoPlay={true} poster={image} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function StreamPage() {
|
||||
const ref = useRef(null);
|
||||
const params = useParams();
|
||||
const link = parseNostrLink(params.id!);
|
||||
const [height, setHeight] = useState<number | undefined>();
|
||||
|
||||
function setChatHeight() {
|
||||
const contentHeight =
|
||||
document.querySelector(".live-page")?.clientHeight || 0;
|
||||
const videoContentHeight =
|
||||
document.querySelector(".video-content")?.clientHeight || 0;
|
||||
if (window.innerWidth <= 480) {
|
||||
setHeight(contentHeight - videoContentHeight);
|
||||
} else {
|
||||
setHeight(undefined);
|
||||
}
|
||||
}
|
||||
|
||||
useLayoutEffect(setChatHeight, []);
|
||||
useResizeObserver(ref, () => setChatHeight());
|
||||
|
||||
return (
|
||||
<>
|
||||
<div ref={ref}></div>
|
||||
<VideoPlayer link={link} />
|
||||
<ProfileInfo link={link} />
|
||||
<LiveChat link={link} height={height} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
24
yarn.lock
24
yarn.lock
@ -1634,6 +1634,11 @@
|
||||
"@jridgewell/resolve-uri" "3.1.0"
|
||||
"@jridgewell/sourcemap-codec" "1.4.14"
|
||||
|
||||
"@juggle/resize-observer@^3.3.1":
|
||||
version "3.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
|
||||
integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
|
||||
|
||||
"@leichtgewicht/ip-codec@^2.0.1":
|
||||
version "2.0.4"
|
||||
resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
|
||||
@ -1694,6 +1699,25 @@
|
||||
schema-utils "^3.0.0"
|
||||
source-map "^0.7.3"
|
||||
|
||||
"@react-hook/latest@^1.0.2":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@react-hook/latest/-/latest-1.0.3.tgz#c2d1d0b0af8b69ec6e2b3a2412ba0768ac82db80"
|
||||
integrity sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==
|
||||
|
||||
"@react-hook/passive-layout-effect@^1.2.0":
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz#c06dac2d011f36d61259aa1c6df4f0d5e28bc55e"
|
||||
integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==
|
||||
|
||||
"@react-hook/resize-observer@^1.2.6":
|
||||
version "1.2.6"
|
||||
resolved "https://registry.yarnpkg.com/@react-hook/resize-observer/-/resize-observer-1.2.6.tgz#9a8cf4c5abb09becd60d1d65f6bf10eec211e291"
|
||||
integrity sha512-DlBXtLSW0DqYYTW3Ft1/GQFZlTdKY5VAFIC4+km6IK5NiPPDFchGbEJm1j6pSgMqPRHbUQgHJX7RaR76ic1LWA==
|
||||
dependencies:
|
||||
"@juggle/resize-observer" "^3.3.1"
|
||||
"@react-hook/latest" "^1.0.2"
|
||||
"@react-hook/passive-layout-effect" "^1.2.0"
|
||||
|
||||
"@remix-run/router@1.6.3":
|
||||
version "1.6.3"
|
||||
resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.6.3.tgz#8205baf6e17ef93be35bf62c37d2d594e9be0dad"
|
||||
|
Loading…
Reference in New Issue
Block a user