@wolffm/watchparty-ui

React UI components for the Hadoku Watch Party application.

Installation

This package is published to GitHub Packages. To install:

1. Configure npm to use GitHub Packages by creating/updating .npmrc:

@wolffm:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

2. Install the package:

npm install @wolffm/watchparty-ui
# or
pnpm add @wolffm/watchparty-ui

Usage

Basic Setup

import { WatchPartyProvider, WatchPartyRoom } from '@wolffm/watchparty-ui';
import '@wolffm/watchparty-ui/dist/style.css';

function App() {
  return (
    <WatchPartyProvider serverOrigin="https://your-server.com">
      <WatchPartyRoom defaultRoomKey="your-room-key" />
    </WatchPartyProvider>
  );
}

Configuration

The UI components can be configured via props:

• serverOrigin: WebSocket server URL (default: /)
• defaultRoomKey: Room to join on mount (optional)

Development

To work on this package locally:

# Install dependencies
pnpm install

# Run dev server
pnpm dev

# Build for production
pnpm build

Publishing

This package is automatically published to GitHub Packages on every push to main that affects the UI code.

The version is CI's, never a commit's: publish-packages.yml sets it to one patch above the registry's newest (WolffM/hadoku-actions/next-version), in the CI workspace only, in lockstep with @wolffm/rooms-protocol and @wolffm/rooms-server. Never edit it by hand.

Development Notes

Phase 0 scaffold (React 19 + Vite) is in place.

Key config:

• Base path: /watchparty/
• Router basename: /watchparty
• Tailwind + Zustand + socket.io-client

Runtime Server Integration (Phase 2)

The UI now auto-joins a placeholder room key demo when the user presses "Join Room" in the Identity drawer. It sends a Socket.IO join payload containing { room_key:'demo', leader_key?, name, sprite }.

Configure a different backend origin (if UI served from a different host) via environment:

VITE_SERVER_ORIGIN=https://api.example.com

If omitted, the client connects relative to current origin (/watchparty/ws).

Duplicate joins are suppressed (if me.clientId already populated). This interim flow will be replaced once a room selection / creation UX exists.

CSS Reset / Preflight

Tailwind v4 preflight is disabled to eliminate console warnings about legacy vendor selectors. A minimal custom reset is applied in src/styles.css. The theme uses CSS variables from @wolffm/themes mapped in the @theme block.

Dark Theme Lock / Extension Interference

The app enforces a permanent dark theme to avoid color inversion by extensions like Dark Reader:

• Added <meta name="color-scheme" content="dark"> & data-theme="dark" on <html>.
• Set data-darkreader-skip on <html> and <body> to hint Dark Reader not to transform.
• Declared stable color CSS variables (--wp-*) and color-scheme: dark to reduce heuristics.
• Explicit black background ensures no flash when extension toggles.

If future light mode is desired, introduce a controlled theme switch and remove data-darkreader-skip selectively rather than allowing uncontrolled extension mutation.