@livepeer-frameworks/player-svelte 0.1.2 → 0.2.1

package/dist/controls/SettingsMenu.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Readable } from "svelte/store";
+  import { SettingsIcon } from "../icons";
+  import {
+    SPEED_PRESETS,
+    getAvailableLocales,
+    getLocaleDisplayName,
+    createTranslator,
+    type TranslateFn,
+  } from "@livepeer-frameworks/player-core";
+  import type { FwLocale } from "@livepeer-frameworks/player-core";
+
+  interface Props {
+    qualities?: Array<{ id: string; label: string; active?: boolean }>;
+    activeQuality?: string;
+    onSelectQuality?: (id: string) => void;
+    textTracks?: Array<{ id: string; label: string; active?: boolean }>;
+    activeCaption?: string;
+    onSelectCaption?: (id: string) => void;
+    playbackRate?: number;
+    onSpeedChange?: (rate: number) => void;
+    supportsSpeed?: boolean;
+    playbackMode?: "auto" | "low-latency" | "quality";
+    onModeChange?: (mode: "auto" | "low-latency" | "quality") => void;
+    showModeSelector?: boolean;
+    activeLocale?: FwLocale;
+    onLocaleChange?: (locale: FwLocale) => void;
+  }
+
+  let {
+    qualities: propQualities,
+    activeQuality,
+    onSelectQuality,
+    textTracks: propTextTracks,
+    activeCaption,
+    onSelectCaption,
+    playbackRate = 1,
+    onSpeedChange,
+    supportsSpeed = true,
+    playbackMode,
+    onModeChange,
+    showModeSelector = false,
+    activeLocale = undefined,
+    onLocaleChange = undefined,
+  }: Props = $props();
+
+  let availableLocales = getAvailableLocales();
+
+  let controller: any = getContext("fw-player-controller");
+  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
+  const fallbackT = createTranslator({ locale: "en" });
+  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+  let isOpen = $state(false);
+
+  let qualities = $derived(propQualities ?? controller?.getQualities?.() ?? []);
+  let qualityValue = $derived(activeQuality ?? qualities.find((q: any) => q.active)?.id ?? "auto");
+  let textTracks = $derived(propTextTracks ?? []);
+  let captionValue = $derived(activeCaption ?? textTracks.find((t: any) => t.active)?.id ?? "none");
+
+  function selectQuality(id: string) {
+    if (onSelectQuality) onSelectQuality(id);
+    else controller?.selectQuality?.(id);
+    isOpen = false;
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      isOpen = false;
+      e.preventDefault();
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const menu = e.currentTarget as HTMLElement;
+      const items = menu.querySelectorAll<HTMLButtonElement>("button");
+      if (!items.length) return;
+      const current = Array.from(items).indexOf(document.activeElement as HTMLButtonElement);
+      const next =
+        e.key === "ArrowDown"
+          ? (current + 1) % items.length
+          : (current - 1 + items.length) % items.length;
+      items[next]?.focus();
+    }
+  }
+</script>
+
+<div class="fw-control-group" style="position: relative">
+  <button
+    type="button"
+    class="fw-btn-flush group"
+    class:fw-btn-flush--active={isOpen}
+    aria-label={t("settings")}
+    title={t("settings")}
+    onclick={() => (isOpen = !isOpen)}
+  >
+    <SettingsIcon size={16} />
+  </button>
+
+  {#if isOpen}
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <div class="fw-settings-menu" role="menu" aria-label={t("settings")} onkeydown={handleKeyDown}>
+      {#if showModeSelector && onModeChange}
+        <div class="fw-settings-section">
+          <div class="fw-settings-label">{t("mode")}</div>
+          <div class="fw-settings-options">
+            {#each ["auto", "low-latency", "quality"] as mode}
+              <button
+                class="fw-settings-btn"
+                class:fw-settings-btn--active={playbackMode === mode}
+                onclick={() => {
+                  onModeChange?.(mode as any);
+                  isOpen = false;
+                }}
+              >
+                {mode === "low-latency" ? t("fast") : mode === "quality" ? t("stable") : t("auto")}
+              </button>
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if supportsSpeed}
+        <div class="fw-settings-section">
+          <div class="fw-settings-label">{t("speed")}</div>
+          <div class="fw-settings-options fw-settings-options--wrap">
+            {#each SPEED_PRESETS as rate}
+              <button
+                class="fw-settings-btn"
+                class:fw-settings-btn--active={playbackRate === rate}
+                onclick={() => {
+                  onSpeedChange?.(rate);
+                  isOpen = false;
+                }}
+              >
+                {rate}x
+              </button>
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if qualities.length > 0}
+        <div class="fw-settings-section">
+          <div class="fw-settings-label">{t("quality")}</div>
+          <div class="fw-settings-list">
+            <button
+              class="fw-settings-list-item"
+              class:fw-settings-list-item--active={qualityValue === "auto"}
+              onclick={() => selectQuality("auto")}>{t("auto")}</button
+            >
+            {#each qualities as q}
+              <button
+                class="fw-settings-list-item"
+                class:fw-settings-list-item--active={qualityValue === q.id}
+                onclick={() => selectQuality(q.id)}>{q.label}</button
+              >
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if textTracks.length > 0}
+        <div class="fw-settings-section">
+          <div class="fw-settings-label">{t("captions")}</div>
+          <div class="fw-settings-list">
+            <button
+              class="fw-settings-list-item"
+              class:fw-settings-list-item--active={captionValue === "none"}
+              onclick={() => {
+                onSelectCaption?.("none");
+                isOpen = false;
+              }}>{t("captionsOff")}</button
+            >
+            {#each textTracks as tt}
+              <button
+                class="fw-settings-list-item"
+                class:fw-settings-list-item--active={captionValue === tt.id}
+                onclick={() => {
+                  onSelectCaption?.(tt.id);
+                  isOpen = false;
+                }}>{tt.label || tt.id}</button
+              >
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if onLocaleChange}
+        <div class="fw-settings-section">
+          <div class="fw-settings-label">{t("language")}</div>
+          <div class="fw-settings-list">
+            {#each availableLocales as l}
+              <button
+                class="fw-settings-list-item"
+                class:fw-settings-list-item--active={activeLocale === l}
+                onclick={() => {
+                  onLocaleChange?.(l);
+                  isOpen = false;
+                }}>{getLocaleDisplayName(l)}</button
+              >
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/controls/SettingsMenu.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { FwLocale } from "@livepeer-frameworks/player-core";
+interface Props {
+    qualities?: Array<{
+        id: string;
+        label: string;
+        active?: boolean;
+    }>;
+    activeQuality?: string;
+    onSelectQuality?: (id: string) => void;
+    textTracks?: Array<{
+        id: string;
+        label: string;
+        active?: boolean;
+    }>;
+    activeCaption?: string;
+    onSelectCaption?: (id: string) => void;
+    playbackRate?: number;
+    onSpeedChange?: (rate: number) => void;
+    supportsSpeed?: boolean;
+    playbackMode?: "auto" | "low-latency" | "quality";
+    onModeChange?: (mode: "auto" | "low-latency" | "quality") => void;
+    showModeSelector?: boolean;
+    activeLocale?: FwLocale;
+    onLocaleChange?: (locale: FwLocale) => void;
+}
+declare const SettingsMenu: import("svelte").Component<Props, {}, "">;
+type SettingsMenu = ReturnType<typeof SettingsMenu>;
+export default SettingsMenu;

package/dist/controls/SkipButton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Readable } from "svelte/store";
+  import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
+  import { SkipBackIcon, SkipForwardIcon } from "../icons";
+
+  interface Props {
+    direction: "back" | "forward";
+    seconds?: number;
+  }
+
+  let { direction, seconds = 10 }: Props = $props();
+  let pc: any = getContext("fw-player-controller");
+  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
+  const fallbackT = createTranslator({ locale: "en" });
+  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+
+  let label = $derived(direction === "back" ? t("skipBackward") : t("skipForward"));
+</script>
+
+<button
+  type="button"
+  class="fw-btn-flush"
+  aria-label={label}
+  title={label}
+  onclick={() => pc?.seek((pc?.currentTime ?? 0) + (direction === "back" ? -seconds : seconds))}
+>
+  {#if direction === "back"}
+    <SkipBackIcon size={16} />
+  {:else}
+    <SkipForwardIcon size={16} />
+  {/if}
+</button>

package/dist/controls/SkipButton.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    direction: "back" | "forward";
+    seconds?: number;
+}
+declare const SkipButton: import("svelte").Component<Props, {}, "">;
+type SkipButton = ReturnType<typeof SkipButton>;
+export default SkipButton;

package/dist/controls/TimeDisplay.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { formatTimeDisplay } from "@livepeer-frameworks/player-core";
+
+  let pc: any = getContext("fw-player-controller");
+
+  let timeText = $derived(
+    formatTimeDisplay({
+      isLive: pc?.isEffectivelyLive ?? false,
+      currentTime: pc?.currentTime ?? 0,
+      duration: pc?.duration ?? NaN,
+      liveEdge: pc?.duration ?? 0,
+      seekableStart: 0,
+    })
+  );
+</script>
+
+<span class="fw-time-display">{timeText}</span>

package/dist/controls/TimeDisplay.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TimeDisplay: import("svelte").Component<Record<string, never>, {}, "">;
+type TimeDisplay = ReturnType<typeof TimeDisplay>;
+export default TimeDisplay;

package/dist/controls/VolumeControl.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Readable } from "svelte/store";
+  import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
+  import { VolumeUpIcon, VolumeOffIcon } from "../icons";
+
+  let pc: any = getContext("fw-player-controller");
+  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
+  const fallbackT = createTranslator({ locale: "en" });
+  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+</script>
+
+<button
+  type="button"
+  class="fw-btn-flush"
+  aria-label={pc?.isMuted ? t("unmute") : t("mute")}
+  aria-pressed={pc?.isMuted ?? false}
+  title={pc?.isMuted ? t("unmute") : t("mute")}
+  onclick={() => pc?.toggleMute()}
+>
+  {#if pc?.isMuted}
+    <VolumeOffIcon size={16} />
+  {:else}
+    <VolumeUpIcon size={16} />
+  {/if}
+</button>

package/dist/controls/VolumeControl.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const VolumeControl: import("svelte").Component<Record<string, never>, {}, "">;
+type VolumeControl = ReturnType<typeof VolumeControl>;
+export default VolumeControl;

package/dist/controls/index.d.ts

@@ -0,0 +1,7 @@
+export { default as PlayButton } from "./PlayButton.svelte";
+export { default as SkipButton } from "./SkipButton.svelte";
+export { default as VolumeControl } from "./VolumeControl.svelte";
+export { default as TimeDisplay } from "./TimeDisplay.svelte";
+export { default as LiveBadge } from "./LiveBadge.svelte";
+export { default as FullscreenButton } from "./FullscreenButton.svelte";
+export { default as SettingsMenu } from "./SettingsMenu.svelte";

package/dist/controls/index.js

@@ -0,0 +1,7 @@
+export { default as PlayButton } from "./PlayButton.svelte";
+export { default as SkipButton } from "./SkipButton.svelte";
+export { default as VolumeControl } from "./VolumeControl.svelte";
+export { default as TimeDisplay } from "./TimeDisplay.svelte";
+export { default as LiveBadge } from "./LiveBadge.svelte";
+export { default as FullscreenButton } from "./FullscreenButton.svelte";
+export { default as SettingsMenu } from "./SettingsMenu.svelte";

package/dist/index.d.ts

@@ -41,10 +41,11 @@ export { default as TitleOverlay } from "./TitleOverlay.svelte";
 export { default as ThumbnailOverlay } from "./ThumbnailOverlay.svelte";
 export { default as StatsPanel } from "./StatsPanel.svelte";
 export { default as DevModePanel } from "./DevModePanel.svelte";
+export * from "./controls";
 export * from "./icons";
 export * from "./stores";
 export * from "./ui/context-menu";
 export type { SkipDirection } from "./types";
-export { PlayerController, PlayerManager, globalPlayerManager, } from "@livepeer-frameworks/player-core";
+export { PlayerController, PlayerManager, globalPlayerManager, createTranslator, getAvailableLocales, getLocaleDisplayName, } from "@livepeer-frameworks/player-core";
 export type { PlayerControllerConfig, PlayerControllerEvents, } from "@livepeer-frameworks/player-core";
-export type { PlayerState, PlayerStateContext, StreamState, StreamStatus, ContentMetadata, ContentEndpoints, EndpointInfo, PlaybackMode, PlaybackQuality, MistStreamInfo, PlayerOptions, PlayerMetadata, PlayerSelection, PlayerCombination, PlayerManagerOptions, PlayerManagerEvents, } from "@livepeer-frameworks/player-core";
+export type { PlayerState, PlayerStateContext, StreamState, StreamStatus, ContentMetadata, ContentEndpoints, EndpointInfo, PlaybackMode, PlaybackQuality, MistStreamInfo, PlayerOptions, PlayerMetadata, PlayerSelection, PlayerCombination, PlayerManagerOptions, PlayerManagerEvents, FwLocale, TranslateFn, TranslationStrings, I18nConfig, } from "@livepeer-frameworks/player-core";

package/dist/index.js

@@ -44,6 +44,8 @@ export { default as TitleOverlay } from "./TitleOverlay.svelte";
 export { default as ThumbnailOverlay } from "./ThumbnailOverlay.svelte";
 export { default as StatsPanel } from "./StatsPanel.svelte";
 export { default as DevModePanel } from "./DevModePanel.svelte";
+// Composable control components
+export * from "./controls";
 // Icon components
 export * from "./icons";
 // Stores
@@ -51,4 +53,4 @@ export * from "./stores";
 // Context menu components
 export * from "./ui/context-menu";
 // Re-export core types and classes for Svelte users
-export { PlayerController, PlayerManager, globalPlayerManager, } from "@livepeer-frameworks/player-core";
+export { PlayerController, PlayerManager, globalPlayerManager, createTranslator, getAvailableLocales, getLocaleDisplayName, } from "@livepeer-frameworks/player-core";

package/dist/stores/i18n.d.ts

@@ -0,0 +1,3 @@
+import { type FwLocale } from "@livepeer-frameworks/player-core";
+export declare const localeStore: import("svelte/store").Writable<FwLocale>;
+export declare const translatorStore: import("svelte/store").Readable<import("@livepeer-frameworks/player-core").TranslateFn>;

package/dist/stores/i18n.js

@@ -0,0 +1,4 @@
+import { writable, derived } from "svelte/store";
+import { createTranslator } from "@livepeer-frameworks/player-core";
+export const localeStore = writable("en");
+export const translatorStore = derived(localeStore, ($locale) => createTranslator({ locale: $locale }));

package/dist/stores/index.d.ts

@@ -12,4 +12,5 @@ export { createEndpointResolver, createDerivedEndpoints, createDerivedPrimaryEnd
 export { createPlayerContext, setPlayerContextInComponent, getPlayerContextFromComponent, getPlayerContextOrFallback, createDerivedVideoElement, createDerivedIsReady, createDerivedPlayerInfo, type PlayerContextState, type PlayerContextStore, } from "./playerContext";
 export { createPlaybackQualityMonitor, createDerivedQualityScore, createDerivedStallCount, createDerivedFrameDropRate, createDerivedBitrate, createDerivedLatency, type PlaybackQualityOptions, type PlaybackQualityStore, } from "./playbackQuality";
 export { createPlayerSelectionStore, createDerivedSelection, createDerivedCombinations, createDerivedReady, createDerivedSelectedPlayer, createDerivedSelectedSourceType, createDerivedCompatibleCombinations, createDerivedIncompatibleCombinations, type PlayerSelectionOptions, type PlayerSelectionState, type PlayerSelectionStore, } from "./playerSelection";
+export { localeStore, translatorStore } from "./i18n";
 export { createPlayerControllerStore, createDerivedState, createDerivedIsPlaying, createDerivedCurrentTime, createDerivedDuration, createDerivedError, createDerivedVideoElement as createDerivedControllerVideoElement, createDerivedShouldShowControls, createDerivedShouldShowIdleScreen, type PlayerControllerStoreConfig, type PlayerControllerState, type PlayerControllerStore, } from "./playerController";

package/dist/stores/index.js

@@ -17,5 +17,7 @@ export { createPlayerContext, setPlayerContextInComponent, getPlayerContextFromC
 export { createPlaybackQualityMonitor, createDerivedQualityScore, createDerivedStallCount, createDerivedFrameDropRate, createDerivedBitrate, createDerivedLatency, } from "./playbackQuality";
 // Player selection (event-driven, cached)
 export { createPlayerSelectionStore, createDerivedSelection, createDerivedCombinations, createDerivedReady, createDerivedSelectedPlayer, createDerivedSelectedSourceType, createDerivedCompatibleCombinations, createDerivedIncompatibleCombinations, } from "./playerSelection";
+// i18n (locale + translator)
+export { localeStore, translatorStore } from "./i18n";
 // PlayerController store (central orchestrator)
 export { createPlayerControllerStore, createDerivedState, createDerivedIsPlaying, createDerivedCurrentTime, createDerivedDuration, createDerivedError, createDerivedVideoElement as createDerivedControllerVideoElement, createDerivedShouldShowControls, createDerivedShouldShowIdleScreen, } from "./playerController";

package/dist/stores/playerController.d.ts

@@ -98,6 +98,8 @@ export interface PlayerControllerStore extends Readable<PlayerControllerState> {
     seek: (time: number) => void;
     /** Seek by delta */
     seekBy: (delta: number) => void;
+    /** Jump to live edge (for live streams) */
+    jumpToLive: () => void;
     /** Set volume */
     setVolume: (volume: number) => void;
     /** Toggle mute */

package/dist/stores/playerController.js

@@ -267,6 +267,9 @@ export function createPlayerControllerStore(config) {
     function seekBy(delta) {
         controller?.seekBy(delta);
     }
+    function jumpToLive() {
+        controller?.jumpToLive();
+    }
     function setVolume(volume) {
         controller?.setVolume(volume);
     }
@@ -338,6 +341,7 @@ export function createPlayerControllerStore(config) {
         togglePlay,
         seek,
         seekBy,
+        jumpToLive,
         setVolume,
         toggleMute,
         toggleLoop,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer-frameworks/player-svelte",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "type": "module",
   "description": "Svelte 5 components for FrameWorks streaming player",
   "svelte": "./dist/index.js",
@@ -20,30 +20,22 @@
     },
     "./player.css": "./src/player.css"
   },
-  "scripts": {
-    "build": "svelte-package -i src -o dist",
-    "build:watch": "svelte-package -i src -o dist --watch",
-    "type-check": "svelte-check",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
-  },
   "dependencies": {
-    "@livepeer-frameworks/player-core": "workspace:*",
-    "bits-ui": "^2.15.5"
+    "bits-ui": "^2.15.5",
+    "@livepeer-frameworks/player-core": "0.2.1"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "@testing-library/svelte": "^5.2.7",
+    "@testing-library/svelte": "^5.3.1",
     "@vitest/coverage-v8": "^4.0.18",
-    "jsdom": "^28.0.0",
-    "svelte": "^5.50.0",
-    "svelte-check": "^4.3.6",
-    "typescript": "^5.9.2",
+    "jsdom": "^28.1.0",
+    "svelte": "^5.51.2",
+    "svelte-check": "^4.4.0",
+    "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.0.18"
   },
@@ -55,5 +47,13 @@
     "video"
   ],
   "author": "Livepeer FrameWorks",
-  "license": "Unlicense"
-}
+  "license": "Unlicense",
+  "scripts": {
+    "build": "svelte-package -i src -o dist",
+    "build:watch": "svelte-package -i src -o dist --watch",
+    "type-check": "svelte-check",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  }
+}

package/src/DevModePanel.svelte

@@ -67,7 +67,7 @@
   let internalIsOpen = $state(false);
   let activeTab = $state<"config" | "stats">("config");
   let hoveredComboIndex = $state<number | null>(null);
-  let tooltipAbove = $state(false);
+  let tooltipPos = $state<{ top: number; left: number } | null>(null);
   let showDisabledPlayers = $state(false);
   let comboListRef: HTMLDivElement | undefined = $state();
 
@@ -163,14 +163,12 @@
 
   function handleComboHover(index: number, e: MouseEvent) {
     hoveredComboIndex = index;
-    if (comboListRef) {
-      const container = comboListRef;
-      const row = e.currentTarget as HTMLElement;
-      const containerRect = container.getBoundingClientRect();
-      const rowRect = row.getBoundingClientRect();
-      const relativePosition = (rowRect.top - containerRect.top) / containerRect.height;
-      tooltipAbove = relativePosition > 0.6;
-    }
+    const row = e.currentTarget as HTMLElement;
+    const rowRect = row.getBoundingClientRect();
+    tooltipPos = {
+      top: Math.max(8, Math.min(rowRect.top, window.innerHeight - 200)),
+      left: Math.max(8, rowRect.left - 228),
+    };
   }
 
   // Quality monitoring
@@ -387,7 +385,10 @@
                   class="fw-dev-combo"
                   role="listitem"
                   onmouseenter={(e) => handleComboHover(index, e)}
-                  onmouseleave={() => (hoveredComboIndex = null)}
+                  onmouseleave={() => {
+                    hoveredComboIndex = null;
+                    tooltipPos = null;
+                  }}
                 >
                   <button
                     type="button"
@@ -446,12 +447,10 @@
                   </button>
 
                   <!-- Tooltip -->
-                  {#if hoveredComboIndex === index}
+                  {#if hoveredComboIndex === index && tooltipPos}
                     <div
-                      class={cn(
-                        "fw-dev-tooltip",
-                        tooltipAbove ? "fw-dev-tooltip--above" : "fw-dev-tooltip--below"
-                      )}
+                      class="fw-dev-tooltip"
+                      style="top: {tooltipPos.top}px; left: {tooltipPos.left}px;"
                     >
                       <div class="fw-dev-tooltip-header">
                         <div class="fw-dev-tooltip-title">{combo.playerName}</div>
@@ -467,7 +466,8 @@
                       {#if combo.compatible && combo.scoreBreakdown}
                         <div class="fw-dev-tooltip-score">Score: {combo.score.toFixed(2)}</div>
                         <div class="fw-dev-tooltip-row">
-                          Tracks: <span class="fw-dev-tooltip-value"
+                          Tracks [{combo.scoreBreakdown.trackTypes.join(", ")}]:
+                          <span class="fw-dev-tooltip-value"
                             >{combo.scoreBreakdown.trackScore.toFixed(2)}</span
                           >
                           <span class="fw-dev-tooltip-weight"
@@ -490,6 +490,43 @@
                             >x{combo.scoreBreakdown.weights.source}</span
                           >
                         </div>
+                        {#if combo.scoreBreakdown.reliabilityScore !== undefined}
+                          <div class="fw-dev-tooltip-row">
+                            Reliability: <span class="fw-dev-tooltip-value"
+                              >{combo.scoreBreakdown.reliabilityScore.toFixed(2)}</span
+                            >
+                            <span class="fw-dev-tooltip-weight"
+                              >x{combo.scoreBreakdown.weights.reliability ?? 0}</span
+                            >
+                          </div>
+                        {/if}
+                        {#if combo.scoreBreakdown.modeBonus !== undefined && combo.scoreBreakdown.modeBonus !== 0}
+                          <div class="fw-dev-tooltip-row">
+                            Mode ({playbackMode}):
+                            <span class="fw-dev-tooltip-bonus"
+                              >+{combo.scoreBreakdown.modeBonus.toFixed(2)}</span
+                            >
+                            <span class="fw-dev-tooltip-weight"
+                              >x{combo.scoreBreakdown.weights.mode ?? 0}</span
+                            >
+                          </div>
+                        {/if}
+                        {#if combo.scoreBreakdown.routingBonus !== undefined && combo.scoreBreakdown.routingBonus !== 0}
+                          <div class="fw-dev-tooltip-row">
+                            Routing: <span
+                              class={combo.scoreBreakdown.routingBonus > 0
+                                ? "fw-dev-tooltip-bonus"
+                                : "fw-dev-tooltip-penalty"}
+                            >
+                              {combo.scoreBreakdown.routingBonus > 0
+                                ? "+"
+                                : ""}{combo.scoreBreakdown.routingBonus.toFixed(2)}
+                            </span>
+                            <span class="fw-dev-tooltip-weight"
+                              >x{combo.scoreBreakdown.weights.routing ?? 0}</span
+                            >
+                          </div>
+                        {/if}
                       {:else}
                         <div class="fw-dev-tooltip-error">
                           {combo.incompatibleReason || "Incompatible"}