diff --git a/js/web/src/components/header.tsx b/js/web/src/components/header.tsx index 9a0495408..7fe82baa8 100644 --- a/js/web/src/components/header.tsx +++ b/js/web/src/components/header.tsx @@ -1,3 +1,4 @@ +import { place } from "streamplace"; import { Link, useNavigate } from "@tanstack/react-router"; import { ArrowRight, Search, X } from "lucide-react"; import { useCallback, useEffect, useRef, useState } from "react"; @@ -51,12 +52,12 @@ export default function Header() { } try { setSearching(true); - const response = await agent.place.stream.live.searchActorsTypeahead({ + const response = await agent.client.call(place.stream.live.searchActorsTypeahead, { q, limit: 8, }); setResults( - response.data.actors.map((a: any) => ({ + response.actors.map((a: any) => ({ did: a.did, handle: a.handle, displayName: a.displayName, @@ -148,7 +149,7 @@ export default function Header() {
{/* logo */}
- +

Streamplace

diff --git a/js/web/src/components/player/player-controls.test.ts b/js/web/src/components/player/player-controls.test.ts new file mode 100644 index 000000000..f468c3c8c --- /dev/null +++ b/js/web/src/components/player/player-controls.test.ts @@ -0,0 +1,16 @@ +import { describe, expect, it } from "vitest"; +import { shouldShowUnmutePrompt } from "./player-controls"; + +describe("shouldShowUnmutePrompt", () => { + it("shows while autoplay is playing silently", () => { + expect(shouldShowUnmutePrompt(true, true)).toBe(true); + }); + + it("hides after the viewer unmutes", () => { + expect(shouldShowUnmutePrompt(true, false)).toBe(false); + }); + + it("hides when playback is paused", () => { + expect(shouldShowUnmutePrompt(false, true)).toBe(false); + }); +}); diff --git a/js/web/src/components/player/player-controls.tsx b/js/web/src/components/player/player-controls.tsx index 7bc2ff351..d39fc667b 100644 --- a/js/web/src/components/player/player-controls.tsx +++ b/js/web/src/components/player/player-controls.tsx @@ -63,6 +63,10 @@ export type PlayerControlsProps = { onShowDanmuChange: (showDanmu: boolean) => void; }; +export function shouldShowUnmutePrompt(playing: boolean, muted: boolean) { + return playing && muted; +} + export function PlayerControls({ videoRef, containerRef, @@ -248,7 +252,8 @@ export function PlayerControls({ return () => window.removeEventListener("keydown", onKey); }, [togglePlay, toggleMute, toggleFullscreen, theatre, setTheatre]); - const visible = forceVisible || showControls || bigPlay; + const showUnmutePrompt = shouldShowUnmutePrompt(playing, muted); + const visible = forceVisible || showControls || bigPlay || showUnmutePrompt; return (
- {bigPlay && ( - + + - )} + Unmute +
+
{" "} - {t("chat-log-in-to")} + {t("chat-log-in-to")} +
); } diff --git a/js/web/src/components/svg/streamplace-bw.tsx b/js/web/src/components/svg/streamplace-bw.tsx index bb966327c..90010b195 100644 --- a/js/web/src/components/svg/streamplace-bw.tsx +++ b/js/web/src/components/svg/streamplace-bw.tsx @@ -1,4 +1,5 @@ export default function StreamplaceSvg(props: React.ComponentProps<"svg">) { + const color = "oklch(0.6803 0.2158 339.7)"; return ( ) { > );