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

chore: formatting

Browse Source
This commit is contained in:
Kieran 2023-12-11 12:20:53 +00:00
parent d5944d5239
commit cd51e508b7
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
3 changed files with 78 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/element/live-chat.tsx
View File

@ -131,7 +131,9 @@ export function LiveChat({
case -1:
case -2: {
return (
<b className="border px-3 py-2 text-center border-gray-2 rounded-xl bg-primary uppercase" key={`${a.kind}-${a.created_at}`}>
<b
className="border px-3 py-2 text-center border-gray-2 rounded-xl bg-primary uppercase"
key={`${a.kind}-${a.created_at}`}>
{a.kind === -1 ? (
<FormattedMessage defaultMessage="Stream Started" id="5tM0VD" />
) : (

138
src/element/live-video-player.tsx
View File

@ -108,11 +108,11 @@ export default function LiveVideoPlayer({
video.current.onpause = () => setPlayState("paused");
video.current.onseeking = () => {
if (video.current?.paused) {
setPlayState("paused")
setPlayState("paused");
} else {
setPlayState("loading")
setPlayState("loading");
}
}
};
video.current.onplay = () => setPlayState("loading");
video.current.onvolumechange = () => setVolume(video.current?.volume ?? 1);
video.current.ontimeupdate = () => setPosition(video.current?.currentTime);
@ -165,76 +165,78 @@ export default function LiveVideoPlayer({
}
function playerOverlay() {
return <>
{status === VideoStatus.Online && (
<div
className="absolute opacity-0 hover:opacity-90 transition-opacity w-full h-full z-20 bg-[#00000055]"
onClick={() => togglePlay()}>
<div className="absolute w-full h-full flex items-center justify-center pointer">
<Icon name={playStateToIcon()} size={80} className={playState === "loading" ? "animate-spin" : ""} />
</div>
return (
<>
{status === VideoStatus.Online && (
<div
className="absolute flex items-center gap-1 bottom-0 w-full bg-primary h-[40px]"
onClick={e => e.stopPropagation()}>
<div className="flex grow gap-1 items-center">
<div className="px-5 py-2 pointer" onClick={() => togglePlay()}>
<Icon name={playStateToIcon()} className={playState === "loading" ? "animate-spin" : ""} />
</div>
<div className="px-3 py-2 uppercase font-bold tracking-wide hover:bg-primary-hover">{pStatus}</div>
{pStatus === StreamState.Ended && maxPosition !== undefined && position !== undefined && (
<ProgressBar
value={position / maxPosition}
setValue={v => {
const ct = maxPosition * v;
if (video.current) {
video.current.currentTime = ct;
}
setPosition(ct);
}}
marker={<div className="w-[16px] h-[16px] mt-[-8px] rounded-full bg-white"></div>}
style={{ width: "100%", height: "4px" }}
/>
)}
</div>
<div className="flex gap-1 items-center h-full py-2">
<Icon name={muted ? "volume-muted" : "volume"} onClick={toggleMute} />
<ProgressBar value={volume} setValue={v => setVolume(v)} style={{ width: "100px", height: "100%" }} />
</div>
<div>
<Menu
direction="top"
align="center"
menuButton={<div className="px-3 py-2 tracking-wide pointer">{levelName(level)}</div>}
menuClassName="bg-primary w-fit">
{levels?.map(v => (
<MenuItem
value={v.level}
key={v.level}
onClick={() => setLevel(v.level)}
className="bg-primary px-3 py-2 text-white">
{levelName(v.level)}
</MenuItem>
))}
</Menu>
className="absolute opacity-0 hover:opacity-90 transition-opacity w-full h-full z-20 bg-[#00000055]"
onClick={() => togglePlay()}>
<div className="absolute w-full h-full flex items-center justify-center pointer">
<Icon name={playStateToIcon()} size={80} className={playState === "loading" ? "animate-spin" : ""} />
</div>
<div
className="px-3 py-2 pointer"
onClick={() => {
if (video.current) {
video.current.requestFullscreen();
}
}}>
<Icon name="fullscreen" size={24} />
className="absolute flex items-center gap-1 bottom-0 w-full bg-primary h-[40px]"
onClick={e => e.stopPropagation()}>
<div className="flex grow gap-1 items-center">
<div className="px-5 py-2 pointer" onClick={() => togglePlay()}>
<Icon name={playStateToIcon()} className={playState === "loading" ? "animate-spin" : ""} />
</div>
<div className="px-3 py-2 uppercase font-bold tracking-wide hover:bg-primary-hover">{pStatus}</div>
{pStatus === StreamState.Ended && maxPosition !== undefined && position !== undefined && (
<ProgressBar
value={position / maxPosition}
setValue={v => {
const ct = maxPosition * v;
if (video.current) {
video.current.currentTime = ct;
}
setPosition(ct);
}}
marker={<div className="w-[16px] h-[16px] mt-[-8px] rounded-full bg-white"></div>}
style={{ width: "100%", height: "4px" }}
/>
)}
</div>
<div className="flex gap-1 items-center h-full py-2">
<Icon name={muted ? "volume-muted" : "volume"} onClick={toggleMute} />
<ProgressBar value={volume} setValue={v => setVolume(v)} style={{ width: "100px", height: "100%" }} />
</div>
<div>
<Menu
direction="top"
align="center"
menuButton={<div className="px-3 py-2 tracking-wide pointer">{levelName(level)}</div>}
menuClassName="bg-primary w-fit">
{levels?.map(v => (
<MenuItem
value={v.level}
key={v.level}
onClick={() => setLevel(v.level)}
className="bg-primary px-3 py-2 text-white">
{levelName(v.level)}
</MenuItem>
))}
</Menu>
</div>
<div
className="px-3 py-2 pointer"
onClick={() => {
if (video.current) {
video.current.requestFullscreen();
}
}}>
<Icon name="fullscreen" size={24} />
</div>
</div>
</div>
</div>
)}
{status === VideoStatus.Offline && (
<div className="absolute w-full h-full z-20 bg-[#000000aa] flex items-center justify-center text-3xl font-bold uppercase">
<FormattedMessage defaultMessage="Offline" id="7UOvbT" />
</div>
)}
</>
)}
{status === VideoStatus.Offline && (
<div className="absolute w-full h-full z-20 bg-[#000000aa] flex items-center justify-center text-3xl font-bold uppercase">
<FormattedMessage defaultMessage="Offline" id="7UOvbT" />
</div>
)}
</>
);
}
return (
<div className="relative">

6
src/element/mention.tsx
View File

@ -10,5 +10,9 @@ interface MentionProps {
export function Mention({ pubkey }: MentionProps) {
const user = useUserProfile(pubkey);
const npub = hexToBech32("npub", pubkey);
return <Link to={`/p/${npub}`} className="text-primary">{user?.name || pubkey}</Link>;
return (
<Link to={`/p/${npub}`} className="text-primary">
{user?.name || pubkey}
</Link>
);
}