{"version":3,"file":"useActiveLayers.mjs","names":[],"sources":["../../../src/hooks/clips/useActiveLayers.ts"],"sourcesContent":["import { useTimelineEngine } from '#react/hooks/core/useTimelineEngine';\nimport { useTimelineSelector } from '#react/hooks/core/useTimelineSelector';\nimport { useTimelinePlayheadTime } from '#react/hooks/playback/useTimelinePlayheadTime';\nimport type { ActiveLayerOptions, ActiveLayerResult } from '@techsquidtv/canvas-timeline-core';\nimport { useMemo } from 'react';\n/**\n * Returns active timeline layers at a timeline time.\n *\n * @remarks\n *\n * The hook is collection-first: each named layer returns every matching active\n * clip in stable track order. `primary` is only a convenience first match.\n * Use it for preview panels, custom media status, subtitle overlays, and\n * diagnostics that need to inspect which timeline clips are active without\n * starting playback. For transport controls that drive an external media clock,\n * compose {@link useTimelineMediaSync} or {@link useTimelineMediaPlayback}\n * instead.\n *\n * @param options - Active layer selectors and optional lookup time.\n * @template LayerName - Named layer keys inferred from `options.layers`, such\n * as `\"visuals\" | \"audio\"`.\n * @returns Active clips grouped by the configured layer selectors.\n *\n * @example\n * ```tsx\n * import { useMemo } from 'react';\n * import { useActiveLayers } from '@techsquidtv/canvas-timeline-react';\n *\n * const previewLayers = {\n *   visuals: { trackKind: 'visual' },\n *   audio: { trackKind: 'audio' },\n * } as const;\n *\n * export function ActiveMediaReadout() {\n *   const layers = useMemo(() => previewLayers, []);\n *   const activeLayers = useActiveLayers({ layers });\n *\n *   return (\n *     <dl>\n *       <dt>Visual</dt>\n *       <dd>{activeLayers.primary.visuals?.clip.name ?? 'No visual clip'}</dd>\n *       <dt>Audio clips</dt>\n *       <dd>{activeLayers.layers.audio.length}</dd>\n *     </dl>\n *   );\n * }\n * ```\n *\n * @see {@link ActiveLayerOptions}\n * @see {@link ActiveLayerResult}\n * @see {@link useTimelineMediaSync}\n * @see {@link https://canvastimeline.com/docs/react-hooks | React editor hooks}\n */\nexport function useActiveLayers<LayerName extends string = string>(\n  options: ActiveLayerOptions<LayerName>\n): ActiveLayerResult<LayerName> {\n  const engine = useTimelineEngine();\n  const state = useTimelineSelector((state) => ({\n    tracks: state.tracks,\n    contentRevision: state.contentRevision,\n  }));\n  const playheadTime = useTimelinePlayheadTime();\n\n  // Keep the revision in this snapshot so memoized lookups refresh when clips move under a fixed time.\n  const lookupSnapshot = useMemo(\n    () => ({\n      layers: options.layers,\n      revision: state.tracks,\n      time: options.time ?? playheadTime,\n    }),\n    [options.layers, options.time, state.tracks, playheadTime]\n  );\n\n  return useMemo(() => {\n    return engine.media.getActiveLayers({\n      layers: lookupSnapshot.layers,\n      time: lookupSnapshot.time,\n    });\n  }, [lookupSnapshot, engine]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,SAAgB,gBACd,SAC8B;CAC9B,MAAM,SAAS,kBAAkB;CACjC,MAAM,QAAQ,qBAAqB,WAAW;EAC5C,QAAQ,MAAM;EACd,iBAAiB,MAAM;CACzB,EAAE;CACF,MAAM,eAAe,wBAAwB;CAG7C,MAAM,iBAAiB,eACd;EACL,QAAQ,QAAQ;EAChB,UAAU,MAAM;EAChB,MAAM,QAAQ,QAAQ;CACxB,IACA;EAAC,QAAQ;EAAQ,QAAQ;EAAM,MAAM;EAAQ;CAAY,CAC3D;CAEA,OAAO,cAAc;EACnB,OAAO,OAAO,MAAM,gBAAgB;GAClC,QAAQ,eAAe;GACvB,MAAM,eAAe;EACvB,CAAC;CACH,GAAG,CAAC,gBAAgB,MAAM,CAAC;AAC7B"}