@joewinke/jatui 0.2.27 → 0.2.29

package/dist/components/VideoPlayer.svelte.d.ts

@@ -0,0 +1,72 @@
+/** A model-authored marker: the video's structure. */
+export interface VideoChapter {
+    startSec: number;
+    title: string;
+    /** Optional captured still, shown in the band's hover card. */
+    thumbUrl?: string | null;
+}
+/** A diarized turn (or an ad read, `ad: true`). Structurally accepts meeting data. */
+export interface VideoSpeakerTurn {
+    startSec: number;
+    endSec: number;
+    speakerIdentity?: string | null;
+    speakerName?: string | null;
+    /** Explicit oklch hue (0–360). Omit to take the next palette colour. */
+    hue?: number | null;
+    /** Ad read — shares the lane but reads as not-a-person. */
+    ad?: boolean;
+}
+/** Transcript line. Structurally compatible with TranscriptPlayer's `TranscriptSegment`. */
+export interface VideoTranscriptSegment {
+    id: string;
+    startSec: number;
+    endSec: number;
+    speakerIdentity?: string | null;
+    speakerName?: string | null;
+    text: string;
+}
+/** A user-authored marker. Structurally compatible with `TranscriptBookmark`. */
+export interface VideoBookmark {
+    playbackSec: number;
+    label?: string | null;
+    note?: string | null;
+    participantName?: string | null;
+}
+/** Precomputed audio envelope. `peaks` are normalised against their own max. */
+export interface VideoWaveform {
+    peaks: number[];
+    /** Seconds the peaks span. Defaults to the video's duration. */
+    durationSec?: number;
+}
+/** Per-speaker totals. Structurally compatible with `TranscriptSpeakerTalkTime`. */
+export interface VideoSpeakerTalkTime {
+    speakerIdentity?: string | null;
+    speakerName?: string | null;
+    seconds: number;
+}
+type $$ComponentProps = {
+    src: string;
+    poster?: string | null;
+    captionsSrc?: string | null;
+    captionsLabel?: string;
+    captionsLang?: string;
+    chapters?: VideoChapter[];
+    speakers?: VideoSpeakerTurn[];
+    transcript?: VideoTranscriptSegment[];
+    bookmarks?: VideoBookmark[];
+    waveform?: VideoWaveform | null;
+    talkTime?: VideoSpeakerTalkTime[];
+    /** Seek here once metadata lands (a queued seek never fires on a later source). */
+    startAt?: number | null;
+    transcriptPosition?: 'below' | 'side';
+    transcriptMaxHeight?: string;
+    onTimeUpdate?: (video: HTMLVideoElement) => void;
+    /** Present ⇒ the band grows an "add bookmark at current time" control. */
+    onAddBookmark?: (playbackSec: number, label: string) => void;
+    /** Right-click on the band. The host owns the panel; this only hit-tests. */
+    onBookmarkContext?: (sec: number, existing: VideoBookmark | null, clientX: number, clientY: number) => void;
+    class?: string;
+};
+declare const VideoPlayer: import("svelte").Component<$$ComponentProps, {}, "">;
+type VideoPlayer = ReturnType<typeof VideoPlayer>;
+export default VideoPlayer;

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export { default as ChapterTimeline } from './components/replay/ChapterTimeline.
 export type { ChapterBlock } from './components/replay/ChapterTimeline.svelte';
 export { default as TranscriptPlayer } from './components/TranscriptPlayer.svelte';
 export type { TranscriptSegment, TranscriptBookmark, TranscriptChapter, TranscriptSpeakerTalkTime, } from './components/TranscriptPlayer.svelte';
+export { default as VideoPlayer } from './components/VideoPlayer.svelte';
+export type { VideoChapter, VideoSpeakerTurn, VideoTranscriptSegment, VideoBookmark, VideoWaveform, VideoSpeakerTalkTime, } from './components/VideoPlayer.svelte';
 export { buildLinkedSession, buildLinkedSessionFromWork, rawTypeToState, sampleLinkedSession, SAMPLE_TRANSCRIPT_LINES, } from './components/session-nav/transcriptModel';
 export type { ItemKind, TranscriptItem, FileTouchedEntry, SignalNode, LinkedSession, WorkBlockClient, WorkTranscriptItemClient, } from './components/session-nav/transcriptModel';
 export { default as UserAvatar } from './components/UserAvatar.svelte';

package/dist/index.js

@@ -7,6 +7,12 @@ export { default as Collapse } from './components/Collapse.svelte';
 export { default as LinkedColumns } from './components/linked-columns/LinkedColumns.svelte';
 export { default as ChapterTimeline } from './components/replay/ChapterTimeline.svelte';
 export { default as TranscriptPlayer } from './components/TranscriptPlayer.svelte';
+// The generalized player: everything TranscriptPlayer does plus the
+// extension-library timeline band (waveform scrubber, chapters, diarized
+// speaker colouring, bookmarks, scroll-to-zoom), with every intelligence prop
+// optional so a bare mp4 still gets the full playback UX. TranscriptPlayer
+// stays exported unchanged — meetings already depends on it.
+export { default as VideoPlayer } from './components/VideoPlayer.svelte';
 // Data models — Session transcript (from JAT IDE, jat-jj79f.16 G1)
 export { buildLinkedSession, buildLinkedSessionFromWork, rawTypeToState, sampleLinkedSession, SAMPLE_TRANSCRIPT_LINES, } from './components/session-nav/transcriptModel';
 // Components — Universal

package/dist/meet/ControlBar.svelte

@@ -11,7 +11,13 @@
 	 * red "Leave" that stands apart. Presentational: it reflects the local
 	 * participant + room state you pass and calls back on intent.
 	 */
-	import type { MeetParticipant, MeetRoomState, MeetHostActions, MeetLocalControls } from './types.js';
+	import type {
+		MeetParticipant,
+		MeetRoomState,
+		MeetHostActions,
+		MeetLocalControls,
+		MeetDevicePickers
+	} from './types.js';
 
 	interface Props {
 		/** The local participant (drives mic/cam/share pressed state). */
@@ -33,6 +39,13 @@
 		 * camera gives that feedback for free, the mic never did. Omit to hide.
 		 */
 		micLevel?: number;
+		/**
+		 * In-meeting device switching. When provided, a settings gear renders a
+		 * dropdown listing microphones and cameras with the active one checked —
+		 * pick to switch live (mid-meeting mic/cam tweaking). Available to every
+		 * participant, unlike the host menu.
+		 */
+		devices?: MeetDevicePickers;
 		class?: string;
 	}
 
@@ -44,6 +57,7 @@
 		controls = {},
 		hostActions = {},
 		micLevel,
+		devices,
 		class: className = ''
 	}: Props = $props();
 
@@ -136,6 +150,63 @@
 		</button>
 	{/if}
 
+	{#if devices}
+		<!-- Device settings: mic/camera source pickers, live-switchable -->
+		<div class="dropdown dropdown-top dropdown-end">
+			<div tabindex="0" role="button" class="btn btn-circle btn-ghost" aria-label="Device settings">
+				<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+				</svg>
+			</div>
+			<ul
+				class="dropdown-content menu z-[1] mb-2 max-h-80 w-72 flex-nowrap gap-0.5 overflow-y-auto bg-base-100 p-2 shadow-lg"
+				style="border-radius: var(--jatui-radius-box);"
+			>
+				<li class="menu-title text-xs">Microphone</li>
+				{#each devices.audioInputs as d (d.deviceId)}
+					<li>
+						<button
+							type="button"
+							class="justify-between gap-2"
+							aria-pressed={d.deviceId === devices.activeAudioId}
+							onclick={() => devices?.onSelectAudio?.(d.deviceId)}
+						>
+							<span class="truncate">{d.label}</span>
+							{#if d.deviceId === devices.activeAudioId}
+								<svg class="h-4 w-4 shrink-0 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
+								</svg>
+							{/if}
+						</button>
+					</li>
+				{:else}
+					<li class="px-3 py-1 text-xs opacity-60">No microphones found</li>
+				{/each}
+				<li class="menu-title mt-1 text-xs">Camera</li>
+				{#each devices.videoInputs as d (d.deviceId)}
+					<li>
+						<button
+							type="button"
+							class="justify-between gap-2"
+							aria-pressed={d.deviceId === devices.activeVideoId}
+							onclick={() => devices?.onSelectVideo?.(d.deviceId)}
+						>
+							<span class="truncate">{d.label}</span>
+							{#if d.deviceId === devices.activeVideoId}
+								<svg class="h-4 w-4 shrink-0 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
+								</svg>
+							{/if}
+						</button>
+					</li>
+				{:else}
+					<li class="px-3 py-1 text-xs opacity-60">No cameras found</li>
+				{/each}
+			</ul>
+		</div>
+	{/if}
+
 	{#if isHost}
 		<div class="mx-1 h-8 w-px bg-base-content/15"></div>
 

package/dist/meet/ControlBar.svelte.d.ts

@@ -10,7 +10,7 @@
      * red "Leave" that stands apart. Presentational: it reflects the local
      * participant + room state you pass and calls back on intent.
      */
-import type { MeetParticipant, MeetRoomState, MeetHostActions, MeetLocalControls } from './types.js';
+import type { MeetParticipant, MeetRoomState, MeetHostActions, MeetLocalControls, MeetDevicePickers } from './types.js';
 interface Props {
     /** The local participant (drives mic/cam/share pressed state). */
     local: MeetParticipant;
@@ -31,6 +31,13 @@ interface Props {
      * camera gives that feedback for free, the mic never did. Omit to hide.
      */
     micLevel?: number;
+    /**
+     * In-meeting device switching. When provided, a settings gear renders a
+     * dropdown listing microphones and cameras with the active one checked —
+     * pick to switch live (mid-meeting mic/cam tweaking). Available to every
+     * participant, unlike the host menu.
+     */
+    devices?: MeetDevicePickers;
     class?: string;
 }
 declare const ControlBar: import("svelte").Component<Props, {}, "">;

package/dist/meet/index.d.ts

@@ -6,4 +6,4 @@ export { default as ParticipantList } from './ParticipantList.svelte';
 export { default as RecordingBadge } from './RecordingBadge.svelte';
 export { loadLiveKit, isLiveKitAvailable, LiveKitNotInstalledError } from './livekit.js';
 export type { LiveKitModule } from './livekit.js';
-export type { MeetRole, MeetConnectionQuality, MeetParticipant, MeetHostActions, MeetLocalControls, PreJoinResult, MeetRoomState, MeetLayout } from './types.js';
+export type { MeetRole, MeetConnectionQuality, MeetParticipant, MeetHostActions, MeetLocalControls, MeetDeviceOption, MeetDevicePickers, PreJoinResult, MeetRoomState, MeetLayout } from './types.js';

package/dist/meet/types.d.ts

@@ -75,6 +75,31 @@ export interface MeetLocalControls {
     /** Leave the meeting (local participant only). */
     onLeave?: () => void;
 }
+/** One selectable input device (a distilled MediaDeviceInfo). */
+export interface MeetDeviceOption {
+    deviceId: string;
+    label: string;
+}
+/**
+ * In-meeting device pickers for ControlBar's settings dropdown. Presentational
+ * contract: the host app enumerates devices and performs the actual switch
+ * (e.g. livekit-client `room.switchActiveDevice`); ControlBar only renders the
+ * menu and reports intent.
+ */
+export interface MeetDevicePickers {
+    /** Available microphones. */
+    audioInputs: MeetDeviceOption[];
+    /** Available cameras. */
+    videoInputs: MeetDeviceOption[];
+    /** deviceId of the microphone currently in use. */
+    activeAudioId?: string;
+    /** deviceId of the camera currently in use. */
+    activeVideoId?: string;
+    /** User picked a microphone. */
+    onSelectAudio?: (deviceId: string) => void;
+    /** User picked a camera. */
+    onSelectVideo?: (deviceId: string) => void;
+}
 /** Result of the pre-join device check, handed to the join handler. */
 export interface PreJoinResult {
     /** Confirmed display name. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.2.27",
+  "version": "0.2.29",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",