@playkit-js/manual-hotspots 3.3.1-canary.0-7e9f2da → 3.3.1-canary.0-2996ab6

package/src/utils/hotspot-loader.ts

@@ -1,72 +0,0 @@
-import {RawLayoutHotspot} from './hotspot';
-import {HotspotConfigFull, HotspotInputConfig} from './hotspot-config';
-import {normalizeHotspotConfig} from './hotspot-normalizer';
-
-export class HotspotLoader {
-  constructor(private logger: KalturaPlayerTypes.Logger) {}
-
-  load(configHotspots: HotspotInputConfig[] | undefined): RawLayoutHotspot[] | null {
-    if (!Array.isArray(configHotspots)) {
-      this.logger.warn('Hotspots config should be an array');
-
-      return null;
-    }
-
-    return configHotspots
-      .map(hotspot => normalizeHotspotConfig(hotspot))
-      .filter((hotspot, index) => this._validateHotspot(hotspot, index))
-      .map(hotspot => this._transformConfigToRawHotspot(hotspot));
-  }
-
-  private _validateHotspot(hotspot: HotspotConfigFull, index: number): boolean {
-    if (!hotspot.id) {
-      this.logger.warn(`Hotspot at index ${index} is missing required 'id' field, skipping`);
-      return false;
-    }
-
-    if (typeof hotspot.startTime !== 'number') {
-      this.logger.warn(`Hotspot '${hotspot.id}' is missing required 'startTime' field, skipping`);
-      return false;
-    }
-
-    if (!hotspot.layout) {
-      this.logger.warn(`Hotspot '${hotspot.id}' is missing required 'layout' field, skipping`);
-      return false;
-    }
-
-    const requiredLayoutFields = ['relativeX', 'relativeY', 'relativeWidth', 'relativeHeight', 'stageWidth', 'stageHeight'];
-
-    for (const field of requiredLayoutFields) {
-      if (typeof hotspot.layout[field as keyof typeof hotspot.layout] !== 'number') {
-        this.logger.warn(`Hotspot '${hotspot.id}' has invalid layout.${field}, skipping`);
-        return false;
-      }
-    }
-
-    if (!hotspot.styles) {
-      this.logger.warn(`Hotspot '${hotspot.id}' is missing required 'styles' field, skipping`);
-      return false;
-    }
-
-    return true;
-  }
-
-  private _transformConfigToRawHotspot(config: HotspotConfigFull): RawLayoutHotspot {
-    return {
-      id: config.id,
-      startTime: config.startTime,
-      endTime: config.endTime,
-      label: config.label,
-      styles: config.styles as {[key: string]: string},
-      onClick: config.onClick as RawLayoutHotspot['onClick'],
-      rawLayout: {
-        relativeX: config.layout.relativeX,
-        relativeY: config.layout.relativeY,
-        relativeWidth: config.layout.relativeWidth,
-        relativeHeight: config.layout.relativeHeight,
-        stageWidth: config.layout.stageWidth,
-        stageHeight: config.layout.stageHeight
-      }
-    };
-  }
-}

package/src/utils/hotspot-normalizer.ts

@@ -1,104 +0,0 @@
-import {POSITION_PRESETS, SIZE_PRESETS, DEFAULT_STAGE, DEFAULT_STYLES, POSITION_ANCHORS, PositionPreset, SizePreset} from './hotspot-presets';
-import {HotspotConfigFull, HotspotInputConfig} from './hotspot-config';
-
-let idCounter = 0;
-function generateHotspotId(): string {
-  return `hotspot-${Date.now()}-${idCounter++}`;
-}
-
-function isPositionPreset(value: unknown): value is PositionPreset {
-  return typeof value === 'string' && value in POSITION_PRESETS;
-}
-
-function isSizePreset(value: unknown): value is SizePreset {
-  return typeof value === 'string' && value in SIZE_PRESETS;
-}
-
-function calculateAnchoredPosition(
-  baseX: number,
-  baseY: number,
-  width: number,
-  height: number,
-  position: PositionPreset
-): {relativeX: number; relativeY: number} {
-  if (!position || !isPositionPreset(position)) {
-    return {relativeX: baseX, relativeY: baseY};
-  }
-
-  const anchor = POSITION_ANCHORS[position];
-  return {
-    relativeX: Math.max(0, Math.min(1 - width, baseX - width * anchor.anchorX)),
-    relativeY: Math.max(0, Math.min(1 - height, baseY - height * anchor.anchorY))
-  };
-}
-
-export function normalizeHotspotConfig(simplified: HotspotInputConfig): HotspotConfigFull {
-  const layout = simplified.layout || {};
-
-  const sizePreset: SizePreset = isSizePreset(layout.size) ? layout.size : 'm';
-  const presetSize = SIZE_PRESETS[sizePreset];
-  const relativeWidth = layout.relativeWidth ?? presetSize.relativeWidth;
-  const relativeHeight = layout.relativeHeight ?? presetSize.relativeHeight;
-
-  const positionPreset = isPositionPreset(layout.position) ? layout.position : undefined;
-
-  let baseX: number;
-  let baseY: number;
-
-  if (layout.relativeX !== undefined) {
-    baseX = layout.relativeX;
-  } else if (positionPreset) {
-    baseX = POSITION_PRESETS[positionPreset].relativeX;
-  } else {
-    // default to center
-    baseX = POSITION_PRESETS['center'].relativeX;
-  }
-
-  if (layout.relativeY !== undefined) {
-    baseY = layout.relativeY;
-  } else if (positionPreset) {
-    baseY = POSITION_PRESETS[positionPreset].relativeY;
-  } else {
-    // default to center
-    baseY = POSITION_PRESETS['center'].relativeY;
-  }
-
-  const hasExplicitPosition = layout.relativeX !== undefined || layout.relativeY !== undefined;
-  const {relativeX, relativeY} = hasExplicitPosition
-    ? {relativeX: baseX, relativeY: baseY}
-    : calculateAnchoredPosition(baseX, baseY, relativeWidth, relativeHeight, positionPreset || 'center');
-
-  const userStyles = simplified.styles || {};
-  const mergedStyles: Record<string, string> = {};
-
-  // defaults
-  for (const [key, value] of Object.entries(DEFAULT_STYLES)) {
-    mergedStyles[key] = value;
-  }
-
-  // user overrides
-  for (const [key, value] of Object.entries(userStyles)) {
-    if (value !== undefined) {
-      mergedStyles[key] = value;
-    }
-  }
-
-  const fullConfig: HotspotConfigFull = {
-    id: simplified.id || generateHotspotId(),
-    startTime: simplified.startTime,
-    endTime: simplified.endTime,
-    label: simplified.label,
-    onClick: simplified.onClick,
-    layout: {
-      relativeX,
-      relativeY,
-      relativeWidth,
-      relativeHeight,
-      stageWidth: layout.stageWidth ?? DEFAULT_STAGE.stageWidth,
-      stageHeight: layout.stageHeight ?? DEFAULT_STAGE.stageHeight
-    },
-    styles: mergedStyles
-  };
-
-  return fullConfig;
-}

package/src/utils/hotspot-presets.ts

@@ -1,51 +0,0 @@
-export type PositionPreset = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
-
-export type SizePreset = 'xs' | 's' | 'm' | 'l' | 'xl';
-
-// include 5% padding from edges
-export const POSITION_PRESETS: Record<PositionPreset, {relativeX: number; relativeY: number}> = {
-  'top-left': {relativeX: 0.05, relativeY: 0.05},
-  top: {relativeX: 0.5, relativeY: 0.05},
-  'top-right': {relativeX: 0.95, relativeY: 0.05},
-  left: {relativeX: 0.05, relativeY: 0.5},
-  center: {relativeX: 0.5, relativeY: 0.5},
-  right: {relativeX: 0.95, relativeY: 0.5},
-  'bottom-left': {relativeX: 0.05, relativeY: 0.95},
-  bottom: {relativeX: 0.5, relativeY: 0.95},
-  'bottom-right': {relativeX: 0.95, relativeY: 0.95}
-};
-
-export const SIZE_PRESETS: Record<SizePreset, {relativeWidth: number; relativeHeight: number}> = {
-  xs: {relativeWidth: 0.12, relativeHeight: 0.08},
-  s: {relativeWidth: 0.18, relativeHeight: 0.1},
-  m: {relativeWidth: 0.25, relativeHeight: 0.12},
-  l: {relativeWidth: 0.32, relativeHeight: 0.14},
-  xl: {relativeWidth: 0.42, relativeHeight: 0.16}
-};
-
-// used for scaling font sizes and border radius
-export const DEFAULT_STAGE = {
-  stageWidth: 960,
-  stageHeight: 640
-};
-
-export const DEFAULT_STYLES: Record<string, string> = {
-  background: 'rgba(0, 0, 0, 0.75)',
-  color: '#ffffff',
-  'border-radius': '12px',
-  'font-size': '20px',
-  'font-weight': '500',
-  'font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
-};
-
-export const POSITION_ANCHORS: Record<PositionPreset, {anchorX: number; anchorY: number}> = {
-  'top-left': {anchorX: 0, anchorY: 0},
-  top: {anchorX: 0.5, anchorY: 0},
-  'top-right': {anchorX: 1, anchorY: 0},
-  left: {anchorX: 0, anchorY: 0.5},
-  center: {anchorX: 0.5, anchorY: 0.5},
-  right: {anchorX: 1, anchorY: 0.5},
-  'bottom-left': {anchorX: 0, anchorY: 1},
-  bottom: {anchorX: 0.5, anchorY: 1},
-  'bottom-right': {anchorX: 1, anchorY: 1}
-};

package/src/utils/hotspot-timeline-simple.ts

@@ -1,78 +0,0 @@
-interface TimelineHotspot {
-  id: string;
-  startTime: number; // ms
-  endTime?: number; // ms (exclusive); undefined => infinite
-}
-
-export class HotspotTimelineSimple<T extends TimelineHotspot> {
-  private _hotspotsMap: Map<string, T> = new Map();
-  private _visibleIds: Set<string> = new Set();
-
-  initialize(hotspots: T[]): void {
-    this._hotspotsMap.clear();
-    this._visibleIds.clear();
-
-    for (const hotspot of hotspots) {
-      this._hotspotsMap.set(hotspot.id, hotspot);
-    }
-  }
-
-  // Recompute visible set at time currentTimeMs.
-  // Returns true if visible set changed.
-  update(currentTimeMs: number): boolean {
-    const nextVisible = new Set<string>();
-
-    this._hotspotsMap.forEach((h, id) => {
-      if (currentTimeMs < h.startTime) {
-        return;
-      }
-
-      if (h.endTime !== undefined && currentTimeMs >= h.endTime) {
-        return;
-      }
-
-      nextVisible.add(id);
-    });
-
-    const prevVisible = this._visibleIds;
-
-    if (nextVisible.size !== prevVisible.size) {
-      this._visibleIds = nextVisible;
-      return true;
-    }
-
-    let changed = false;
-    nextVisible.forEach(id => {
-      if (!changed && !prevVisible.has(id)) {
-        changed = true;
-      }
-    });
-
-    this._visibleIds = nextVisible;
-
-    return changed;
-  }
-
-  getVisibleHotspots(): T[] {
-    const result: T[] = [];
-
-    this._visibleIds.forEach(id => {
-      const hotspot = this._hotspotsMap.get(id);
-
-      if (hotspot) {
-        result.push(hotspot);
-      }
-    });
-
-    return result;
-  }
-
-  get size(): number {
-    return this._hotspotsMap.size;
-  }
-
-  clear(): void {
-    this._hotspotsMap.clear();
-    this._visibleIds.clear();
-  }
-}

package/src/utils/hotspot.ts

@@ -1,88 +0,0 @@
-export interface Layout {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface Style {
-  radiusBorder: number;
-  fontSize: number;
-}
-
-export interface RawFloatingCuepoint {
-  id: string;
-  startTime: number;
-  endTime?: number;
-  rawLayout: {
-    relativeX: number;
-    relativeY: number;
-    relativeWidth: number;
-    relativeHeight: number;
-    stageWidth: number;
-    stageHeight: number;
-  };
-}
-
-export interface FloatingCuepoint extends RawFloatingCuepoint {
-  layout: Layout;
-  relativeStyle : Style;
-}
-
-export interface OpenUrl {
-  type: 'openUrl';
-  url: string;
-}
-export interface OpenUrlInNewTab {
-  type: 'openUrlInNewTab';
-  url: string;
-}
-export interface JumpToTime {
-  type: 'jumpToTime';
-  jumpToTime: number;
-}
-interface ScrollToAnchor {
-  type: 'scrollToAnchor';
-  selector: string;
-  scrollBehavior?: ScrollBehavior;
-  offsetY?: number;
-}
-interface PostMessage {
-  type: 'postMessage';
-  message: unknown;
-  targetOrigin?: string;
-  pauseVideo?: boolean;
-}
-
-export type OnClickAction = OpenUrl | OpenUrlInNewTab | JumpToTime | ScrollToAnchor | PostMessage;
-
-export type RawLayoutHotspot = RawFloatingCuepoint & {
-  onClick?: OnClickAction;
-  label?: string;
-  styles: {[key: string]: string};
-};
-
-export type LayoutHotspot = RawLayoutHotspot & FloatingCuepoint;
-
-export interface Size {
-  width: number;
-  height: number;
-}
-
-export interface Canvas {
-  playerSize: Size;
-  videoSize: Size;
-}
-
-export const shallowCompareHotspots = (arrA: LayoutHotspot[], arrB: LayoutHotspot[]) => {
-  const len = arrA.length;
-  if (arrB.length !== len) {
-    return false;
-  }
-  for (let i = 0; i < len; i++) {
-    if (arrA[i] !== arrB[i]) {
-      return false;
-    }
-  }
-  return true;
-};

package/src/utils/scale-video.ts

@@ -1,57 +0,0 @@
-export interface ScaleCalculation {
-  width: number;
-  height: number;
-  left: number;
-  top: number;
-  scaleToTargetWidth: boolean;
-}
-
-export function scaleVideo(
-  videoWidth: number,
-  videoHeight: number,
-  playerWidth: number,
-  playerHeight: number,
-  fLetterBox: boolean
-): ScaleCalculation {
-  const result: ScaleCalculation = {
-    width: 0,
-    height: 0,
-    left: 0,
-    top: 0,
-    scaleToTargetWidth: true
-  };
-
-  if (videoWidth <= 0 || videoHeight <= 0 || playerWidth <= 0 || playerHeight <= 0) {
-    return result;
-  }
-
-  // scale to the target width
-  const scaleX1 = playerWidth;
-  const scaleY1 = (videoHeight * playerWidth) / videoWidth;
-
-  // scale to the target height
-  const scaleX2 = (videoWidth * playerHeight) / videoHeight;
-  const scaleY2 = playerHeight;
-
-  // now figure out which one we should use
-  let fScaleOnWidth = scaleX2 > playerWidth;
-  if (fScaleOnWidth) {
-    fScaleOnWidth = fLetterBox;
-  } else {
-    fScaleOnWidth = !fLetterBox;
-  }
-
-  if (fScaleOnWidth) {
-    result.width = Math.abs(scaleX1);
-    result.height = Math.abs(scaleY1);
-    result.scaleToTargetWidth = true;
-  } else {
-    result.width = Math.abs(scaleX2);
-    result.height = Math.abs(scaleY2);
-    result.scaleToTargetWidth = false;
-  }
-  result.left = Math.abs((playerWidth - result.width) / 2);
-  result.top = Math.abs((playerHeight - result.height) / 2);
-
-  return result;
-}