diff --git a/packages/studio/src/player/components/timelineIcons.tsx b/packages/studio/src/player/components/timelineIcons.tsx index 9db5a3d22..8846cd049 100644 --- a/packages/studio/src/player/components/timelineIcons.tsx +++ b/packages/studio/src/player/components/timelineIcons.tsx @@ -39,8 +39,10 @@ const ICONS: Record = { }; export function getTrackStyle(tag: string): TrackVisualStyle { - const trackStyle = getTimelineTrackStyle(tag); - const normalized = tag.toLowerCase(); + if (!tag) console.warn("[Timeline] getTrackStyle received empty tag, defaulting to div"); + const safeTag = tag || "div"; + const trackStyle = getTimelineTrackStyle(safeTag); + const normalized = safeTag.toLowerCase(); const icon = normalized.startsWith("h") && normalized.length === 2 && "123456".includes(normalized[1] ?? "") ? ICONS.h1 diff --git a/packages/studio/src/player/lib/timelineDOM.ts b/packages/studio/src/player/lib/timelineDOM.ts index 825fe9d57..2657c1f54 100644 --- a/packages/studio/src/player/lib/timelineDOM.ts +++ b/packages/studio/src/player/lib/timelineDOM.ts @@ -61,6 +61,10 @@ export { // TimelineElement factories // --------------------------------------------------------------------------- +function resolveClipTag(clip: ClipManifestClip): string { + return clip.tagName || clip.kind || "div"; +} + export function createTimelineElementFromManifestClip(params: { clip: ClipManifestClip; fallbackIndex: number; @@ -72,7 +76,7 @@ export function createTimelineElementFromManifestClip(params: { const label = getTimelineElementDisplayLabel({ id: clip.id, label: clip.label, - tag: clip.tagName || clip.kind, + tag: resolveClipTag(clip), }); let domId: string | undefined; @@ -103,7 +107,7 @@ export function createTimelineElementFromManifestClip(params: { id: identity.id, label, key: identity.key, - tag: clip.tagName || clip.kind, + tag: resolveClipTag(clip), start: clip.start, duration: clip.duration, track: clip.track,