(
html: string,
element: Omit<TimelineElement, "id"> & { id?: string },
)
| 620 | } |
| 621 | |
| 622 | export function addElementToHtml( |
| 623 | html: string, |
| 624 | element: Omit<TimelineElement, "id"> & { id?: string }, |
| 625 | ): { html: string; id: string } { |
| 626 | const parser = new DOMParser(); |
| 627 | const doc = parser.parseFromString(html, "text/html"); |
| 628 | |
| 629 | if (!doc.documentElement) { |
| 630 | throw new CompositionHtmlParseError( |
| 631 | "addElementToHtml: input HTML is empty or could not be parsed", |
| 632 | ); |
| 633 | } |
| 634 | |
| 635 | // Prefer zoom container, fall back to stage, then container, then body |
| 636 | const container = |
| 637 | doc.querySelector("#stage-zoom-container") || |
| 638 | doc.querySelector(".container") || |
| 639 | doc.querySelector("#stage") || |
| 640 | doc.body; |
| 641 | |
| 642 | if (!container) { |
| 643 | throw new CompositionHtmlParseError("addElementToHtml: input HTML has no <body>"); |
| 644 | } |
| 645 | |
| 646 | const id = element.id || `element-${Date.now()}`; |
| 647 | |
| 648 | let newEl: Element; |
| 649 | |
| 650 | function applyMediaAttrs(el: Element, mediaEl: TimelineMediaElement): void { |
| 651 | if (mediaEl.src) el.setAttribute("src", mediaEl.src); |
| 652 | if (mediaEl.volume !== undefined && mediaEl.volume !== 1) { |
| 653 | el.setAttribute("data-volume", String(mediaEl.volume)); |
| 654 | } |
| 655 | } |
| 656 | |
| 657 | switch (element.type) { |
| 658 | case "video": { |
| 659 | const mediaEl = element as TimelineMediaElement; |
| 660 | newEl = doc.createElement("video"); |
| 661 | newEl.setAttribute("muted", ""); |
| 662 | newEl.setAttribute("playsinline", ""); |
| 663 | applyMediaAttrs(newEl, mediaEl); |
| 664 | if (mediaEl.hasAudio) { |
| 665 | newEl.setAttribute("data-has-audio", "true"); |
| 666 | } |
| 667 | break; |
| 668 | } |
| 669 | case "image": { |
| 670 | const mediaEl = element as TimelineMediaElement; |
| 671 | newEl = doc.createElement("img"); |
| 672 | if (mediaEl.src) newEl.setAttribute("src", mediaEl.src); |
| 673 | newEl.setAttribute("alt", element.name); |
| 674 | break; |
| 675 | } |
| 676 | case "audio": { |
| 677 | const mediaEl = element as TimelineMediaElement; |
| 678 | newEl = doc.createElement("audio"); |
| 679 | applyMediaAttrs(newEl, mediaEl); |
no test coverage detected