Add audience reactions: floating emoji reactions from phones to TV (#19)

* Add audience reactions e2e tests (multi-user Gherkin)

Tests cover:
- Single user sends reaction, TV shows floating emoji
- Multiple users send reactions simultaneously
- Reactions panel hidden when no song playing
- Available emoji options displayed during playback

* Implement audience reactions: emoji reactions from phones float across TV display

Mobile users tap emojis (🔥❤️🎤👏😂🙌) during playback, which broadcast
via WebSocket and animate upward on the TV display in real-time.

* Fix audience reactions e2e step definitions for actual test IDs

- join-session-button (not join-button)
- tv-interface (not tv-display)
- reactions-panel to verify playback state (visible on search tab)
- match multi-user confirmation dialog pattern (10s timeout)

* Redesign ReactionsPanel as a FAB instead of pinned block

Emoji reactions now live behind a floating action button (bottom-right).
Tap to expand the emoji column, tap an emoji to react. Much less intrusive.

* Show sender name beneath floating emoji reactions on TV display

* Adjust reaction name pill styling for TV readability

* Add unit tests for ReactionsPanel and FloatingReactions components

Author: johnpc

__tests__/app/tv/page.test.tsx

@@ -103,6 +103,16 @@ vi.mock("@/components/tv/ApplausePlayer", () => ({
   ApplausePlayer: () => <div data-testid="applause-player">ApplausePlayer</div>,
 }));
 
+vi.mock("@/components/tv/FloatingReactions", () => ({
+  FloatingReactions: () => (
+    <div data-testid="floating-reactions">FloatingReactions</div>
+  ),
+}));
+
+vi.mock("@/hooks/useReactions", () => ({
+  useReactions: () => ({ reactions: [] }),
+}));
+
 describe("TV Display Page", () => {
   beforeEach(() => {
     vi.clearAllMocks();

__tests__/components/mobile/ReactionsPanel.test.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { ReactionsPanel } from "@/components/mobile/ReactionsPanel";
+
+describe("ReactionsPanel", () => {
+  const mockOnReaction = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("renders the FAB button in closed state", () => {
+    render(<ReactionsPanel onReaction={mockOnReaction} />);
+
+    const fab = screen.getByLabelText("Open reactions");
+    expect(fab).toBeInTheDocument();
+  });
+
+  it("does not show emoji buttons when closed", () => {
+    render(<ReactionsPanel onReaction={mockOnReaction} />);
+
+    expect(screen.queryByTestId("reaction-🔥")).not.toBeInTheDocument();
+  });
+
+  it("shows emoji buttons when FAB is clicked", () => {
+    render(<ReactionsPanel onReaction={mockOnReaction} />);
+
+    fireEvent.click(screen.getByLabelText("Open reactions"));
+
+    expect(screen.getByTestId("reaction-🔥")).toBeInTheDocument();
+    expect(screen.getByTestId("reaction-❤️")).toBeInTheDocument();
+    expect(screen.getByTestId("reaction-🎤")).toBeInTheDocument();
+    expect(screen.getByTestId("reaction-👏")).toBeInTheDocument();
+    expect(screen.getByTestId("reaction-😂")).toBeInTheDocument();
+    expect(screen.getByTestId("reaction-🙌")).toBeInTheDocument();
+  });
+
+  it("calls onReaction with the emoji when an emoji button is tapped", () => {
+    render(<ReactionsPanel onReaction={mockOnReaction} />);
+
+    fireEvent.click(screen.getByLabelText("Open reactions"));
+    fireEvent.click(screen.getByTestId("reaction-🔥"));
+
+    expect(mockOnReaction).toHaveBeenCalledWith("🔥");
+  });
+
+  it("shows close button when open", () => {
+    render(<ReactionsPanel onReaction={mockOnReaction} />);
+
+    fireEvent.click(screen.getByLabelText("Open reactions"));
+
+    expect(screen.getByLabelText("Close reactions")).toBeInTheDocument();
+  });
+
+  it("hides emoji buttons when close is clicked", () => {
+    render(<ReactionsPanel onReaction={mockOnReaction} />);
+
+    fireEvent.click(screen.getByLabelText("Open reactions"));
+    expect(screen.getByTestId("reaction-🔥")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByLabelText("Close reactions"));
+    expect(screen.queryByTestId("reaction-🔥")).not.toBeInTheDocument();
+  });
+
+  it("applies scale animation on tap then resets", () => {
+    render(<ReactionsPanel onReaction={mockOnReaction} />);
+
+    fireEvent.click(screen.getByLabelText("Open reactions"));
+    const btn = screen.getByTestId("reaction-❤️");
+
+    fireEvent.click(btn);
+    expect(btn.className).toContain("scale-125");
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+    expect(btn.className).toContain("scale-100");
+  });
+});

__tests__/components/tv/FloatingReactions.test.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { FloatingReactions } from "@/components/tv/FloatingReactions";
+import { Reaction } from "@/hooks/useReactions";
+
+const makeReaction = (
+  id: string,
+  emoji: string,
+  userName: string
+): Reaction => ({
+  id,
+  emoji,
+  userName,
+  timestamp: Date.now(),
+});
+
+describe("FloatingReactions", () => {
+  it("renders nothing when reactions array is empty", () => {
+    const { container } = render(<FloatingReactions reactions={[]} />);
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders floating reactions with emojis and usernames", () => {
+    const reactions = [
+      makeReaction("r1", "🔥", "Alice"),
+      makeReaction("r2", "❤️", "Bob"),
+    ];
+
+    render(<FloatingReactions reactions={reactions} />);
+
+    const elements = screen.getAllByTestId("floating-reaction");
+    expect(elements).toHaveLength(2);
+    expect(elements[0]).toHaveTextContent("🔥");
+    expect(elements[0]).toHaveTextContent("Alice");
+    expect(elements[1]).toHaveTextContent("❤️");
+    expect(elements[1]).toHaveTextContent("Bob");
+  });
+
+  it("positions reactions based on their ID hash", () => {
+    const reactions = [makeReaction("abc", "🎤", "Charlie")];
+
+    render(<FloatingReactions reactions={reactions} />);
+
+    const el = screen.getByTestId("floating-reaction");
+    const style = el.getAttribute("style");
+    expect(style).toContain("left:");
+    expect(style).toMatch(/left: \d+%/);
+  });
+
+  it("renders the container with pointer-events-none", () => {
+    const reactions = [makeReaction("r1", "👏", "Dave")];
+
+    render(<FloatingReactions reactions={reactions} />);
+
+    const container = screen.getByTestId("floating-reactions-container");
+    expect(container.className).toContain("pointer-events-none");
+  });
+});

e2e/features/audience-reactions.feature

@@ -0,0 +1,32 @@
+@multi-user
+Feature: Audience Reactions
+  As audience members watching a karaoke performance
+  We want to send emoji reactions from our phones
+  So that the TV display shows real-time encouragement
+
+  Scenario: Audience member sends a reaction that appears on the TV
+    Given "Alice" has joined the session on device 1
+    And the TV display is open
+    And a song is currently playing
+    When Alice sends a "🔥" reaction
+    Then the TV display shows the "🔥" reaction floating across the screen
+
+  Scenario: Multiple users send reactions simultaneously
+    Given "Alice" has joined the session on device 1
+    And "Bob" has joined the session on device 2
+    And the TV display is open
+    And a song is currently playing
+    When Alice sends a "🎤" reaction
+    And Bob sends a "❤️" reaction
+    Then the TV display shows both reactions
+
+  Scenario: Reactions are only available during playback
+    Given "Alice" has joined the session on device 1
+    And no songs are in the queue
+    Then Alice does not see the reactions panel
+
+  Scenario: Reaction panel shows available emoji options
+    Given "Alice" has joined the session on device 1
+    And a song is currently playing
+    Then Alice sees the reactions panel with emoji options
+    And the available reactions include "🔥", "❤️", "🎤", "👏", "😂", "🙌"

e2e/steps/audience-reactions.steps.ts

@@ -0,0 +1,180 @@
+import { expect, Page, BrowserContext } from "@playwright/test";
+import { test as base, createBdd } from "playwright-bdd";
+
+const test = base.extend<{
+  alicePage: Page;
+  aliceContext: BrowserContext;
+  bobPage: Page;
+  bobContext: BrowserContext;
+  tvPage: Page;
+  tvContext: BrowserContext;
+}>({
+  aliceContext: async ({ browser }, use) => {
+    const context = await browser.newContext();
+    await use(context);
+    await context.close();
+  },
+  alicePage: async ({ aliceContext }, use) => {
+    const page = await aliceContext.newPage();
+    await use(page);
+  },
+  bobContext: async ({ browser }, use) => {
+    const context = await browser.newContext();
+    await use(context);
+    await context.close();
+  },
+  bobPage: async ({ bobContext }, use) => {
+    const page = await bobContext.newPage();
+    await use(page);
+  },
+  tvContext: async ({ browser }, use) => {
+    const context = await browser.newContext();
+    await use(context);
+    await context.close();
+  },
+  tvPage: async ({ tvContext }, use) => {
+    const page = await tvContext.newPage();
+    await use(page);
+  },
+});
+
+export { test };
+const { Given, When, Then } = createBdd(test);
+
+const BASE_URL = "http://localhost:3000";
+
+async function clearQueue(page: Page): Promise<void> {
+  const response = await page.request.get(`${BASE_URL}/api/queue`);
+  const data = await response.json();
+  if (data.queue) {
+    for (const item of data.queue) {
+      await page.request.delete(
+        `${BASE_URL}/api/queue?queueItemId=${item.id}&userId=test`
+      );
+    }
+  }
+  await page.request.put(`${BASE_URL}/api/queue`, {
+    data: { action: "skip", userId: "test" },
+  });
+}
+
+async function joinSession(page: Page, userName: string): Promise<void> {
+  await page.goto(BASE_URL);
+  const nameInput = page.getByTestId("username-input");
+  await nameInput.fill(userName);
+  const joinButton = page.getByTestId("join-session-button");
+  await joinButton.click();
+  await page.waitForSelector('[data-testid="search-input"]', {
+    timeout: 15000,
+  });
+}
+
+async function addSongToQueue(page: Page): Promise<void> {
+  const artistItem = page.getByTestId("artist-item").first();
+  await artistItem.click();
+  const addButton = page.getByTestId("add-song-button").first();
+  await addButton.waitFor({ state: "visible", timeout: 30000 });
+  await addButton.click();
+  const dialog = page.locator("[data-testid='confirmation-dialog']");
+  await dialog.waitFor({ timeout: 10000 });
+  await dialog.locator("button[aria-label='Close']").click();
+  await dialog.waitFor({ state: "hidden", timeout: 5000 });
+}
+
+Given(
+  "{string} has joined the session on device {int}",
+  async ({ alicePage, bobPage }, name: string, device: number) => {
+    const page = device === 1 ? alicePage : bobPage;
+    if (device === 1) await clearQueue(page);
+    await joinSession(page, name);
+  }
+);
+
+Given("the TV display is open", async ({ tvPage }) => {
+  await tvPage.goto(`${BASE_URL}/tv`);
+  await tvPage.waitForSelector('[data-testid="tv-interface"]', {
+    timeout: 15000,
+  });
+});
+
+Given("a song is currently playing", async ({ alicePage }) => {
+  await addSongToQueue(alicePage);
+  await alicePage.waitForSelector('[data-testid="reactions-panel"]', {
+    timeout: 30000,
+  });
+});
+
+Given("no songs are in the queue", async ({ alicePage }) => {
+  await clearQueue(alicePage);
+});
+
+async function openReactionsFab(page: Page): Promise<void> {
+  const fab = page
+    .getByTestId("reactions-panel")
+    .locator("button[aria-label='Open reactions']");
+  await fab.click();
+}
+
+When(
+  "Alice sends a {string} reaction",
+  async ({ alicePage }, emoji: string) => {
+    await openReactionsFab(alicePage);
+    const reactionButton = alicePage.getByTestId(`reaction-${emoji}`);
+    await reactionButton.waitFor({ state: "visible", timeout: 10000 });
+    await reactionButton.click();
+  }
+);
+
+When("Bob sends a {string} reaction", async ({ bobPage }, emoji: string) => {
+  await openReactionsFab(bobPage);
+  const reactionButton = bobPage.getByTestId(`reaction-${emoji}`);
+  await reactionButton.waitFor({ state: "visible", timeout: 10000 });
+  await reactionButton.click();
+});
+
+Then(
+  "the TV display shows the {string} reaction floating across the screen",
+  async ({ tvPage }, emoji: string) => {
+    const reaction = tvPage.getByTestId("floating-reaction").filter({
+      hasText: emoji,
+    });
+    await reaction.waitFor({ state: "visible", timeout: 10000 });
+  }
+);
+
+Then("the TV display shows both reactions", async ({ tvPage }) => {
+  const reactions = tvPage.getByTestId("floating-reaction");
+  await expect(reactions).toHaveCount(2, { timeout: 10000 });
+});
+
+Then("Alice does not see the reactions panel", async ({ alicePage }) => {
+  const panel = alicePage.getByTestId("reactions-panel");
+  await expect(panel).toHaveCount(0);
+});
+
+Then(
+  "Alice sees the reactions panel with emoji options",
+  async ({ alicePage }) => {
+    const panel = alicePage.getByTestId("reactions-panel");
+    await panel.waitFor({ state: "visible", timeout: 10000 });
+  }
+);
+
+Then(
+  "the available reactions include {string}, {string}, {string}, {string}, {string}, {string}",
+  async (
+    { alicePage },
+    e1: string,
+    e2: string,
+    e3: string,
+    e4: string,
+    e5: string,
+    e6: string
+  ) => {
+    await openReactionsFab(alicePage);
+    for (const emoji of [e1, e2, e3, e4, e5, e6]) {
+      const button = alicePage.getByTestId(`reaction-${emoji}`);
+      await expect(button).toBeVisible();
+    }
+  }
+);