@hyperframes/studio 0.6.97 → 0.6.98

package/src/utils/studioHelpers.ts

@@ -1,6 +1,7 @@
-import type { TimelineElement } from "../player";
+import type { TimelineElement } from "../player/store/playerStore";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import type { TimelineAssetKind } from "./timelineAssetDrop";
+import { roundToCenti } from "./rounding";
 
 export interface EditingFile {
   path: string;
@@ -171,6 +172,8 @@ export function clampNumber(value: number, min: number, max: number): number {
   return Math.min(Math.max(value, min), max);
 }
 
+export { COMPOSITION_ROOT_OPEN_TAG_RE } from "./compositionPatterns";
+
 export function collectHtmlIds(source: string): string[] {
   return Array.from(source.matchAll(/\bid="([^"]+)"/g), (match) => match[1] ?? "");
 }
@@ -205,7 +208,7 @@ export async function resolveDroppedAssetDuration(
         const raw = Number(media.duration);
         finalize(
           Number.isFinite(raw) && raw > 0
-            ? Math.round(raw * 100) / 100
+            ? roundToCenti(raw)
             : DEFAULT_TIMELINE_ASSET_DURATION[kind],
         );
       },

package/src/utils/studioUrlState.ts

@@ -1,6 +1,7 @@
 import type { RightPanelTab } from "./studioHelpers";
 import { buildProjectHash, parseProjectHashRoute } from "./projectRouting";
 import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability";
+import { roundTo3 } from "./rounding";
 
 export interface StudioUrlSelectionState {
   sourceFile?: string;
@@ -111,7 +112,7 @@ export function buildStudioHash(projectId: string, state: StudioUrlState): strin
   params.set("v", "1");
   if (state.activeCompPath) params.set("comp", state.activeCompPath);
   if (state.currentTime != null && Number.isFinite(state.currentTime)) {
-    params.set("t", String(Math.max(0, Math.round(state.currentTime * 1000) / 1000)));
+    params.set("t", String(Math.max(0, roundTo3(state.currentTime))));
   }
   if (state.rightPanelTab) params.set("tab", state.rightPanelTab);
   if (state.rightCollapsed != null) params.set("rc", state.rightCollapsed ? "1" : "0");

package/src/utils/timelineAssetDrop.ts

@@ -1,4 +1,6 @@
 import { AUDIO_EXT, IMAGE_EXT, VIDEO_EXT } from "./mediaTypes";
+import { roundToCenti } from "./rounding";
+import { COMPOSITION_ROOT_OPEN_TAG_RE } from "./compositionPatterns";
 
 export const TIMELINE_ASSET_MIME = "application/x-hyperframes-asset";
 export const TIMELINE_BLOCK_MIME = "application/x-hyperframes-block";
@@ -51,13 +53,13 @@ export function buildTimelineFileDropPlacements(
   durations: number[],
   occupiedClips: Array<{ start: number; duration: number; track: number }> = [],
 ): Array<{ start: number; track: number }> {
-  let nextStart = Math.round(Math.max(0, placement.start) * 100) / 100;
+  let nextStart = roundToCenti(Math.max(0, placement.start));
   const sequenceStart = nextStart;
   const resolvedDurations = durations.map((duration) =>
     Number.isFinite(duration) && duration > 0 ? duration : FALLBACK_TIMELINE_FILE_DROP_DURATION,
   );
   const sequenceEnd = resolvedDurations.reduce(
-    (end, duration) => Math.round((end + duration) * 100) / 100,
+    (end, duration) => roundToCenti(end + duration),
     sequenceStart,
   );
   const overlapsDropTrack = occupiedClips.some((clip) => {
@@ -72,7 +74,7 @@ export function buildTimelineFileDropPlacements(
 
   return resolvedDurations.map((duration) => {
     const start = nextStart;
-    nextStart = Math.round((nextStart + duration) * 100) / 100;
+    nextStart = roundToCenti(nextStart + duration);
     return { start, track };
   });
 }
@@ -120,8 +122,7 @@ export function buildTimelineAssetInsertHtml(input: {
 }
 
 export function insertTimelineAssetIntoSource(source: string, assetHtml: string): string {
-  const rootOpenTag = /<[^>]*data-composition-id="[^"]+"[^>]*>/i;
-  const match = rootOpenTag.exec(source);
+  const match = COMPOSITION_ROOT_OPEN_TAG_RE.exec(source);
   if (!match || match.index == null) {
     throw new Error("No composition root found in target source");
   }

package/src/utils/timelineInspector.ts

@@ -1,18 +1,10 @@
 import type { TimelineElement } from "../player";
 
-const TIMELINE_INSPECTOR_BOUNDARY_EPSILON_SECONDS = 0.08;
-
 const AUDIO_TIMELINE_TAGS = new Set(["audio", "music", "sfx", "sound", "narration"]);
 const AUDIO_SOURCE_EXT_RE = /\.(aac|flac|m4a|mp3|ogg|opus|wav)(?:[?#].*)?$/i;
+const MUSIC_ID_RE = /\b(music|bgm|soundtrack|background[-_]?music)\b/i;
 
-export function getTimelineElementKey(
-  element: Pick<TimelineElement, "id" | "key"> | null | undefined,
-): string | null {
-  if (!element) return null;
-  return element.key ?? element.id;
-}
-
-export function isAudioTimelineElement(
+function isAudioTimelineElement(
   element: Pick<TimelineElement, "tag" | "src"> | null | undefined,
 ): boolean {
   if (!element) return false;
@@ -21,96 +13,19 @@ export function isAudioTimelineElement(
   return Boolean(element.src && AUDIO_SOURCE_EXT_RE.test(element.src));
 }
 
-export function canInspectTimelineElement(
-  element: Pick<TimelineElement, "tag" | "src"> | null | undefined,
-): boolean {
-  return !isAudioTimelineElement(element);
-}
-
-export function shouldShowTimelineInspectorBounds(
-  currentTime: number,
-  element: Pick<TimelineElement, "start" | "duration"> | null | undefined,
-  epsilonSeconds = TIMELINE_INSPECTOR_BOUNDARY_EPSILON_SECONDS,
-): boolean {
-  if (!element) return false;
-  if (!Number.isFinite(currentTime)) return false;
-  if (!Number.isFinite(element.start) || !Number.isFinite(element.duration)) return false;
-  const start = Math.max(0, element.start);
-  const end = Math.max(start, start + Math.max(0, element.duration));
-  const epsilon = Math.max(0, epsilonSeconds);
-  return Math.abs(currentTime - start) <= epsilon || Math.abs(currentTime - end) <= epsilon;
-}
-
-export function isTimelineElementActiveAtTime(
-  currentTime: number,
-  element: Pick<TimelineElement, "start" | "duration"> | null | undefined,
-  epsilonSeconds = TIMELINE_INSPECTOR_BOUNDARY_EPSILON_SECONDS,
+/** True for the music track: an audio element with data-timeline-role="music",
+ *  or — when no role is set — an id matching the music regex. Voiceover/other
+ *  audio (explicit non-music role) is excluded. */
+export function isMusicTrack(
+  element:
+    | Pick<TimelineElement, "tag" | "src" | "id" | "domId" | "timelineRole">
+    | null
+    | undefined,
 ): boolean {
   if (!element) return false;
-  if (!Number.isFinite(currentTime)) return false;
-  if (!Number.isFinite(element.start) || !Number.isFinite(element.duration)) return false;
-  const start = Math.max(0, element.start);
-  const end = Math.max(start, start + Math.max(0, element.duration));
-  const epsilon = Math.max(0, epsilonSeconds);
-  return currentTime >= start - epsilon && currentTime <= end + epsilon;
-}
-
-export interface TimelineLayerVisibility {
-  visible: boolean;
-  compositeOpacity: number;
-  hasBox: boolean;
-  inViewport: boolean;
-}
-
-export function getTimelineLayerVisibilityInPreview(
-  element: HTMLElement,
-  options: { minCompositeOpacity?: number } = {},
-): TimelineLayerVisibility {
-  const hidden: TimelineLayerVisibility = {
-    visible: false,
-    compositeOpacity: 0,
-    hasBox: false,
-    inViewport: false,
-  };
-  if (!element.isConnected) return hidden;
-  const doc = element.ownerDocument;
-  const win = doc.defaultView;
-  if (!win) return hidden;
-
-  const minCompositeOpacity = options.minCompositeOpacity ?? 0.01;
-  let compositeOpacity = 1;
-  let current: HTMLElement | null = element;
-  while (current && current !== doc.body && current !== doc.documentElement) {
-    const style = win.getComputedStyle(current);
-    if (style.display === "none" || style.visibility === "hidden") {
-      return { ...hidden, compositeOpacity };
-    }
-    compositeOpacity *= Number.parseFloat(style.opacity || "1");
-    if (compositeOpacity <= minCompositeOpacity) {
-      return { ...hidden, compositeOpacity };
-    }
-    current = current.parentElement;
-  }
-
-  const rect = element.getBoundingClientRect();
-  const hasBox = rect.width > 0.5 && rect.height > 0.5;
-  if (!hasBox) return { visible: false, compositeOpacity, hasBox, inViewport: false };
-
-  const viewportWidth = win.innerWidth || doc.documentElement.clientWidth;
-  const viewportHeight = win.innerHeight || doc.documentElement.clientHeight;
-  const inViewport =
-    rect.right > 0 && rect.bottom > 0 && rect.left < viewportWidth && rect.top < viewportHeight;
-  return {
-    visible: inViewport,
-    compositeOpacity,
-    hasBox,
-    inViewport,
-  };
-}
-
-export function isTimelineLayerVisibleInPreview(
-  element: HTMLElement,
-  options: { minCompositeOpacity?: number } = {},
-): boolean {
-  return getTimelineLayerVisibilityInPreview(element, options).visible;
+  if (!isAudioTimelineElement(element)) return false;
+  if (element.timelineRole === "music") return true;
+  if (element.timelineRole && element.timelineRole !== "music") return false;
+  const id = element.domId ?? element.id ?? "";
+  return MUSIC_ID_RE.test(id);
 }