feat: implement TalkingHead renderer with image/audio props

src/react/elements.ts

@@ -2,6 +2,7 @@ import {
   resolveImageElement,
   resolveMusicElement,
   resolveSpeechElement,
+  resolveTalkingHeadElement,
   resolveVideoElement,
 } from "./resolve";
 import type { ResolvedElement } from "./resolved-element";
@@ -141,11 +142,14 @@ export function Speech(
 
 export function TalkingHead(
   props: TalkingHeadProps,
-): VargElement<"talking-head"> {
-  return createElement(
+): VargElement<"talking-head"> & PromiseLike<ResolvedElement<"talking-head">> {
+  const element = createElement(
     "talking-head",
     props as Record<string, unknown>,
-    props.children,
+    undefined,
+  );
+  return makeThenable(element, (el) =>
+    resolveTalkingHeadElement(el, el.props as unknown as TalkingHeadProps),
   );
 }
 

src/react/renderers/clip.ts

@@ -26,6 +26,7 @@ import { renderSlider } from "./slider";
 import { renderSpeech } from "./speech";
 import { renderSubtitle } from "./subtitle";
 import { renderSwipe } from "./swipe";
+import { renderTalkingHead } from "./talking-head";
 import { renderTitle } from "./title";
 import { resolvePath } from "./utils";
 import { renderVideo } from "./video";
@@ -151,6 +152,27 @@ async function renderClipLayers(
         break;
       }
 
+      case "talking-head": {
+        pending.push({
+          type: "async",
+          promise: renderTalkingHead(
+            element as VargElement<"talking-head">,
+            ctx,
+          )
+            .then((file) => ctx.backend.resolvePath(file))
+            .then(
+              (path) =>
+                ({
+                  type: "video",
+                  path,
+                  resizeMode: "cover",
+                  mixVolume: 1,
+                }) as VideoLayer,
+            ),
+        });
+        break;
+      }
+
       case "music": {
         const props = element.props as MusicProps;
         pending.push({