@livepeer-frameworks/streamcrafter-wc 0.1.0

package/src/components/fw-sc-compositor.ts

@@ -0,0 +1,162 @@
+/**
+ * <fw-sc-compositor> — Compact floating compositor controls overlay.
+ * Port of CompositorControls.tsx from streamcrafter-react.
+ */
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { sharedStyles } from "../styles/shared-styles.js";
+import { utilityStyles } from "../styles/utility-styles.js";
+import {
+  soloIcon,
+  pipBRIcon,
+  pipBLIcon,
+  pipTRIcon,
+  pipTLIcon,
+  splitHIcon,
+  splitVIcon,
+  focusLIcon,
+  focusRIcon,
+  gridIcon,
+  stackIcon,
+  dualPipIcon,
+  splitPipIcon,
+  featuredIcon,
+  featuredRIcon,
+  letterboxIcon,
+  cropIcon,
+  stretchIcon,
+} from "../icons/index.js";
+import type { IngestControllerHost } from "../controllers/ingest-controller-host.js";
+import type {
+  LayoutMode,
+  LayoutConfig,
+  ScalingMode,
+} from "@livepeer-frameworks/streamcrafter-core";
+import { isLayoutAvailable } from "@livepeer-frameworks/streamcrafter-core";
+
+interface LayoutPresetUI {
+  mode: LayoutMode;
+  label: string;
+  icon: () => ReturnType<typeof soloIcon>;
+  minSources: number;
+}
+
+const LAYOUT_PRESETS_UI: LayoutPresetUI[] = [
+  { mode: "solo", label: "Solo", icon: soloIcon, minSources: 1 },
+  { mode: "pip-br", label: "PiP ↘", icon: pipBRIcon, minSources: 2 },
+  { mode: "pip-bl", label: "PiP ↙", icon: pipBLIcon, minSources: 2 },
+  { mode: "pip-tr", label: "PiP ↗", icon: pipTRIcon, minSources: 2 },
+  { mode: "pip-tl", label: "PiP ↖", icon: pipTLIcon, minSources: 2 },
+  { mode: "split-h", label: "Split ⬌", icon: splitHIcon, minSources: 2 },
+  { mode: "split-v", label: "Split ⬍", icon: splitVIcon, minSources: 2 },
+  { mode: "focus-l", label: "Focus ◀", icon: focusLIcon, minSources: 2 },
+  { mode: "focus-r", label: "Focus ▶", icon: focusRIcon, minSources: 2 },
+  { mode: "pip-dual-br", label: "Main+2 PiP", icon: dualPipIcon, minSources: 3 },
+  { mode: "split-pip-r", label: "Split+PiP", icon: splitPipIcon, minSources: 3 },
+  { mode: "featured", label: "Featured", icon: featuredIcon, minSources: 3 },
+  { mode: "featured-r", label: "Featured ▶", icon: featuredRIcon, minSources: 3 },
+  { mode: "grid", label: "Grid", icon: gridIcon, minSources: 2 },
+  { mode: "stack", label: "Stack", icon: stackIcon, minSources: 2 },
+];
+
+const SCALING_MODES: {
+  mode: ScalingMode;
+  icon: () => ReturnType<typeof letterboxIcon>;
+  label: string;
+}[] = [
+  { mode: "letterbox", icon: letterboxIcon, label: "Letterbox (fit)" },
+  { mode: "crop", icon: cropIcon, label: "Crop (fill)" },
+  { mode: "stretch", icon: stretchIcon, label: "Stretch" },
+];
+
+@customElement("fw-sc-compositor")
+export class FwScCompositor extends LitElement {
+  @property({ attribute: false }) ic!: IngestControllerHost;
+
+  @state() private _tooltipText = "";
+  @state() private _tooltipTarget: Element | null = null;
+
+  static styles = [
+    sharedStyles,
+    utilityStyles,
+    css`
+      :host {
+        display: contents;
+      }
+    `,
+  ];
+
+  protected render() {
+    // Compositor uses controller compositor API — for now render layout bar from CSS classes
+    const sources = this.ic.s.sources;
+    const visibleSourceCount = sources.length;
+
+    const availableLayouts = LAYOUT_PRESETS_UI.filter((preset) =>
+      isLayoutAvailable(preset.mode, visibleSourceCount)
+    );
+
+    return html`
+      <div class="fw-sc-layout-overlay">
+        <div class="fw-sc-layout-bar">
+          <div class="fw-sc-layout-section">
+            <span class="fw-sc-layout-label">Layout</span>
+            <div class="fw-sc-layout-icons">
+              ${availableLayouts.map(
+                (preset) => html`
+                  <button
+                    type="button"
+                    class="fw-sc-layout-icon"
+                    @click=${(e: MouseEvent) => {
+                      e.stopPropagation();
+                      this._handleLayoutSelect(preset.mode);
+                    }}
+                    title=${preset.label}
+                  >
+                    ${preset.icon()}
+                  </button>
+                `
+              )}
+            </div>
+          </div>
+          <div class="fw-sc-layout-separator"></div>
+          <div class="fw-sc-layout-section">
+            <span class="fw-sc-layout-label">Display</span>
+            <div class="fw-sc-scaling-icons">
+              ${SCALING_MODES.map(
+                (sm) => html`
+                  <button
+                    type="button"
+                    class="fw-sc-layout-icon"
+                    @click=${(e: MouseEvent) => {
+                      e.stopPropagation();
+                    }}
+                    title=${sm.label}
+                  >
+                    ${sm.icon()}
+                  </button>
+                `
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private _handleLayoutSelect(mode: LayoutMode) {
+    this.dispatchEvent(
+      new CustomEvent("fw-sc-layout-select", {
+        detail: { mode },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-sc-compositor": FwScCompositor;
+  }
+}

package/src/components/fw-sc-layer-list.ts

@@ -0,0 +1,251 @@
+/**
+ * <fw-sc-layer-list> — Drag-to-reorder layer list.
+ * Port of LayerList.tsx from streamcrafter-react.
+ */
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { sharedStyles } from "../styles/shared-styles.js";
+import { utilityStyles } from "../styles/utility-styles.js";
+import { eyeIcon, eyeOffIcon, cameraIcon, monitorIcon, videoIcon } from "../icons/index.js";
+import type { Layer, MediaSource, LayerTransform } from "@livepeer-frameworks/streamcrafter-core";
+
+@customElement("fw-sc-layer-list")
+export class FwScLayerList extends LitElement {
+  @property({ attribute: false }) layers: Layer[] = [];
+  @property({ attribute: false }) sources: MediaSource[] = [];
+  @property({ type: String, attribute: "selected-layer-id" }) selectedLayerId: string | null = null;
+
+  @state() private _draggedId: string | null = null;
+  @state() private _dragOverId: string | null = null;
+  @state() private _editingLayerId: string | null = null;
+
+  static styles = [
+    sharedStyles,
+    utilityStyles,
+    css`
+      :host {
+        display: block;
+      }
+    `,
+  ];
+
+  private get _sortedLayers(): Layer[] {
+    return [...this.layers].sort((a, b) => b.zIndex - a.zIndex);
+  }
+
+  private _getSourceLabel(sourceId: string): string {
+    const source = this.sources.find((s) => s.id === sourceId);
+    return source?.label || sourceId;
+  }
+
+  private _getSourceIcon(sourceId: string) {
+    const source = this.sources.find((s) => s.id === sourceId);
+    switch (source?.type) {
+      case "camera":
+        return cameraIcon(14);
+      case "screen":
+        return monitorIcon(14);
+      default:
+        return videoIcon(14);
+    }
+  }
+
+  protected render() {
+    const sorted = this._sortedLayers;
+    return html`
+      <div class="fw-sc-layer-list">
+        <div class="fw-sc-layer-list-header">
+          <span class="fw-sc-layer-list-title">Layers</span>
+          <span class="fw-sc-layer-count">${this.layers.length}</span>
+        </div>
+
+        <div class="fw-sc-layer-items">
+          ${sorted.length === 0
+            ? html` <div class="fw-sc-layer-empty">No layers. Add a source to get started.</div> `
+            : sorted.map(
+                (layer, index) => html`
+                  <div
+                    class=${classMap({
+                      "fw-sc-layer-item": true,
+                      "fw-sc-layer-item--selected": layer.id === this.selectedLayerId,
+                      "fw-sc-layer-item--dragging": layer.id === this._draggedId,
+                      "fw-sc-layer-item--drag-over": layer.id === this._dragOverId,
+                      "fw-sc-layer-item--hidden": !layer.visible,
+                    })}
+                    draggable="true"
+                    @dragstart=${(e: DragEvent) => this._handleDragStart(e, layer.id)}
+                    @dragover=${(e: DragEvent) => this._handleDragOver(e, layer.id)}
+                    @dragleave=${() => {
+                      this._dragOverId = null;
+                    }}
+                    @drop=${(e: DragEvent) => this._handleDrop(e, layer.id)}
+                    @dragend=${() => {
+                      this._draggedId = null;
+                      this._dragOverId = null;
+                    }}
+                    @click=${() =>
+                      this._dispatch("fw-sc-layer-select", {
+                        layerId: layer.id === this.selectedLayerId ? null : layer.id,
+                      })}
+                  >
+                    <button
+                      class=${classMap({
+                        "fw-sc-layer-visibility": true,
+                        "fw-sc-layer-visibility--visible": layer.visible,
+                      })}
+                      @click=${(e: Event) => {
+                        e.stopPropagation();
+                        this._dispatch("fw-sc-visibility-toggle", {
+                          layerId: layer.id,
+                          visible: !layer.visible,
+                        });
+                      }}
+                      title=${layer.visible ? "Hide layer" : "Show layer"}
+                    >
+                      ${layer.visible ? eyeIcon(14) : eyeOffIcon(14)}
+                    </button>
+                    <span class="fw-sc-layer-icon">${this._getSourceIcon(layer.sourceId)}</span>
+                    <span class="fw-sc-layer-name">${this._getSourceLabel(layer.sourceId)}</span>
+
+                    ${this._editingLayerId === layer.id
+                      ? html`
+                          <div class="fw-sc-layer-opacity">
+                            <input
+                              type="range"
+                              min="0"
+                              max="1"
+                              step="0.1"
+                              .value=${String(layer.transform.opacity)}
+                              @input=${(e: Event) =>
+                                this._dispatch("fw-sc-transform-edit", {
+                                  layerId: layer.id,
+                                  transform: {
+                                    opacity: Number((e.target as HTMLInputElement).value),
+                                  },
+                                })}
+                              @click=${(e: Event) => e.stopPropagation()}
+                            />
+                            <span>${Math.round(layer.transform.opacity * 100)}%</span>
+                          </div>
+                        `
+                      : nothing}
+
+                    <div class="fw-sc-layer-controls">
+                      <button
+                        class="fw-sc-layer-btn"
+                        @click=${(e: Event) => {
+                          e.stopPropagation();
+                          this._moveUp(layer.id);
+                        }}
+                        ?disabled=${index === 0}
+                        title="Move up"
+                      >
+                        ↑
+                      </button>
+                      <button
+                        class="fw-sc-layer-btn"
+                        @click=${(e: Event) => {
+                          e.stopPropagation();
+                          this._moveDown(layer.id);
+                        }}
+                        ?disabled=${index === sorted.length - 1}
+                        title="Move down"
+                      >
+                        ↓
+                      </button>
+                      <button
+                        class=${classMap({
+                          "fw-sc-layer-btn": true,
+                          "fw-sc-layer-btn--active": this._editingLayerId === layer.id,
+                        })}
+                        @click=${(e: Event) => {
+                          e.stopPropagation();
+                          this._editingLayerId =
+                            this._editingLayerId === layer.id ? null : layer.id;
+                        }}
+                        title="Edit opacity"
+                      >
+                        ⚙
+                      </button>
+                      <button
+                        class="fw-sc-layer-btn fw-sc-layer-btn--danger"
+                        @click=${(e: Event) => {
+                          e.stopPropagation();
+                          this._dispatch("fw-sc-layer-remove", { layerId: layer.id });
+                        }}
+                        title="Remove layer"
+                      >
+                        ×
+                      </button>
+                    </div>
+                  </div>
+                `
+              )}
+        </div>
+      </div>
+    `;
+  }
+
+  private _dispatch(name: string, detail: unknown) {
+    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+
+  private _handleDragStart(e: DragEvent, layerId: string) {
+    this._draggedId = layerId;
+    e.dataTransfer!.effectAllowed = "move";
+    e.dataTransfer!.setData("text/plain", layerId);
+  }
+
+  private _handleDragOver(e: DragEvent, layerId: string) {
+    e.preventDefault();
+    e.dataTransfer!.dropEffect = "move";
+    this._dragOverId = layerId;
+  }
+
+  private _handleDrop(e: DragEvent, targetLayerId: string) {
+    e.preventDefault();
+    this._dragOverId = null;
+    if (!this._draggedId || this._draggedId === targetLayerId) {
+      this._draggedId = null;
+      return;
+    }
+    const sorted = this._sortedLayers;
+    const currentIds = sorted.map((l) => l.id);
+    const fromIndex = currentIds.indexOf(this._draggedId);
+    const toIndex = currentIds.indexOf(targetLayerId);
+    if (fromIndex === -1 || toIndex === -1) {
+      this._draggedId = null;
+      return;
+    }
+    const newOrder = [...currentIds];
+    newOrder.splice(fromIndex, 1);
+    newOrder.splice(toIndex, 0, this._draggedId);
+    this._dispatch("fw-sc-reorder", { layerIds: newOrder });
+    this._draggedId = null;
+  }
+
+  private _moveUp(layerId: string) {
+    const sorted = this._sortedLayers;
+    const ids = sorted.map((l) => l.id);
+    const idx = ids.indexOf(layerId);
+    if (idx <= 0) return;
+    [ids[idx - 1], ids[idx]] = [ids[idx], ids[idx - 1]];
+    this._dispatch("fw-sc-reorder", { layerIds: ids });
+  }
+
+  private _moveDown(layerId: string) {
+    const sorted = this._sortedLayers;
+    const ids = sorted.map((l) => l.id);
+    const idx = ids.indexOf(layerId);
+    if (idx >= ids.length - 1) return;
+    [ids[idx], ids[idx + 1]] = [ids[idx + 1], ids[idx]];
+    this._dispatch("fw-sc-reorder", { layerIds: ids });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-sc-layer-list": FwScLayerList;
+  }
+}

package/src/components/fw-sc-scene-switcher.ts

@@ -0,0 +1,163 @@
+/**
+ * <fw-sc-scene-switcher> — Horizontal scene selector with transition controls.
+ * Port of SceneSwitcher.tsx from streamcrafter-react.
+ */
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { sharedStyles } from "../styles/shared-styles.js";
+import { utilityStyles } from "../styles/utility-styles.js";
+import type {
+  Scene,
+  TransitionConfig,
+  TransitionType,
+} from "@livepeer-frameworks/streamcrafter-core";
+
+@customElement("fw-sc-scene-switcher")
+export class FwScSceneSwitcher extends LitElement {
+  @property({ attribute: false }) scenes: Scene[] = [];
+  @property({ type: String, attribute: "active-scene-id" }) activeSceneId: string | null = null;
+  @property({ type: Boolean, attribute: "show-transition-controls" }) showTransitionControls = true;
+
+  @state() private _selectedTransition: TransitionType = "fade";
+  @state() private _transitionDuration = 500;
+  @state() private _isTransitioning = false;
+
+  static styles = [
+    sharedStyles,
+    utilityStyles,
+    css`
+      :host {
+        display: block;
+      }
+    `,
+  ];
+
+  protected render() {
+    return html`
+      <div class="fw-sc-scene-switcher">
+        <div class="fw-sc-scene-switcher-header">
+          <span class="fw-sc-scene-switcher-title">Scenes</span>
+          ${this.showTransitionControls
+            ? html`
+                <div class="fw-sc-transition-controls">
+                  <select
+                    class="fw-sc-transition-select"
+                    .value=${this._selectedTransition}
+                    @change=${(e: Event) => {
+                      this._selectedTransition = (e.target as HTMLSelectElement)
+                        .value as TransitionType;
+                    }}
+                  >
+                    <option value="cut">Cut</option>
+                    <option value="fade">Fade</option>
+                    <option value="slide-left">Slide Left</option>
+                    <option value="slide-right">Slide Right</option>
+                    <option value="slide-up">Slide Up</option>
+                    <option value="slide-down">Slide Down</option>
+                  </select>
+                  <input
+                    type="number"
+                    class="fw-sc-transition-duration"
+                    .value=${String(this._transitionDuration)}
+                    @change=${(e: Event) => {
+                      this._transitionDuration = Number((e.target as HTMLInputElement).value);
+                    }}
+                    min="0"
+                    max="3000"
+                    step="100"
+                    title="Transition duration (ms)"
+                  />
+                  <span class="fw-sc-transition-unit">ms</span>
+                </div>
+              `
+            : nothing}
+        </div>
+
+        <div class="fw-sc-scene-list">
+          ${this.scenes.map(
+            (scene) => html`
+              <div
+                class=${classMap({
+                  "fw-sc-scene-item": true,
+                  "fw-sc-scene-item--active": scene.id === this.activeSceneId,
+                  "fw-sc-scene-item--transitioning": this._isTransitioning,
+                })}
+                @click=${() => this._handleSceneClick(scene.id)}
+                style="background-color:${scene.backgroundColor}"
+              >
+                <span class="fw-sc-scene-name">${scene.name}</span>
+                <span class="fw-sc-scene-layer-count">${scene.layers.length} layers</span>
+                ${this.scenes.length > 1 && scene.id !== this.activeSceneId
+                  ? html`
+                      <button
+                        class="fw-sc-scene-delete"
+                        @click=${(e: Event) => {
+                          e.stopPropagation();
+                          this._handleDelete(scene.id);
+                        }}
+                        title="Delete scene"
+                      >
+                        ×
+                      </button>
+                    `
+                  : nothing}
+              </div>
+            `
+          )}
+
+          <button
+            class="fw-sc-scene-add"
+            @click=${() =>
+              this.dispatchEvent(
+                new CustomEvent("fw-sc-scene-create", { bubbles: true, composed: true })
+              )}
+            title="Create new scene"
+          >
+            +
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  private async _handleSceneClick(sceneId: string) {
+    if (sceneId === this.activeSceneId || this._isTransitioning) return;
+    this._isTransitioning = true;
+    try {
+      this.dispatchEvent(
+        new CustomEvent("fw-sc-scene-select", {
+          detail: {
+            sceneId,
+            transition: {
+              type: this._selectedTransition,
+              durationMs: this._transitionDuration,
+              easing: "ease-in-out" as const,
+            } satisfies TransitionConfig,
+          },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    } finally {
+      this._isTransitioning = false;
+    }
+  }
+
+  private _handleDelete(sceneId: string) {
+    if (this.scenes.length <= 1) return;
+    this.dispatchEvent(
+      new CustomEvent("fw-sc-scene-delete", {
+        detail: { sceneId },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-sc-scene-switcher": FwScSceneSwitcher;
+  }
+}