feat(av-cliper): add font style support for subtitles

- Add fontWeight and fontStyle options to EmbedSubtitlesClip
- Support both string ('bold') and numeric (700) font weights
- Support italic and normal font styles
- Add test cases for new font style features

Author: Dramalf

packages/av-cliper/demo/concat-media.ts

@@ -193,6 +193,8 @@ document.querySelector('#mp4-srt')?.addEventListener('click', () => {
         lineWidth: 20,
         lineJoin: 'round',
         lineCap: 'round',
+        fontWeight: 700,
+        fontStyle: 'italic',
         textShadow: {
           offsetX: 2,
           offsetY: 2,

packages/av-cliper/src/clips/__tests__/embed-subtitles.test.ts

@@ -91,3 +91,34 @@ test('split by time', async () => {
     preClip.meta.duration + postClip.meta.duration,
   );
 });
+
+test('EmbedSubtitles with font styles', async () => {
+  const es = new EmbedSubtitlesClip(txt2, {
+    videoWidth: 1280,
+    videoHeight: 720,
+    fontWeight: 'bold',
+    fontStyle: 'italic',
+  });
+
+  // Check if the clip is created successfully
+  expect(es).toBeDefined();
+
+  const vf1 = (await es.tick(342000)).video;
+  expect(vf1?.timestamp).toBe(342000);
+  expect(vf1?.duration).toBe(3218000 - 342000);
+});
+
+test('EmbedSubtitles with numeric font weight', async () => {
+  const es = new EmbedSubtitlesClip(txt2, {
+    videoWidth: 1280,
+    videoHeight: 720,
+    fontWeight: 700, // Bold weight
+    fontStyle: 'normal',
+  });
+
+  expect(es).toBeDefined();
+
+  const vf1 = (await es.tick(342000)).video;
+  expect(vf1?.timestamp).toBe(342000);
+  expect(vf1?.duration).toBe(3218000 - 342000);
+});

packages/av-cliper/src/clips/embed-subtitles-clip.ts

@@ -21,6 +21,8 @@ interface IEmbedSubtitlesOpts {
   };
   videoWidth: number;
   videoHeight: number;
+  fontWeight?: string | number;
+  fontStyle?: 'normal' | 'italic';
 }
 
 declare global {
@@ -81,6 +83,8 @@ export class EmbedSubtitlesClip implements IClip {
     },
     videoWidth: 1280,
     videoHeight: 720,
+    fontWeight: 'normal',
+    fontStyle: 'normal',
   };
 
   #cvs: OffscreenCanvas;
@@ -106,15 +110,21 @@ export class EmbedSubtitlesClip implements IClip {
     this.#linePadding =
       opts.textBgColor == null ? 0 : (opts.fontSize ?? 50) * 0.2;
 
-    const { fontSize, fontFamily, videoWidth, videoHeight, letterSpacing } =
-      this.#opts;
+    const {
+      fontSize,
+      fontFamily,
+      fontWeight,
+      fontStyle,
+      videoWidth,
+      videoHeight,
+    } = this.#opts;
     this.#lineHeight = fontSize + this.#linePadding * 2;
     this.#cvs = new OffscreenCanvas(videoWidth, videoHeight);
     this.#ctx = this.#cvs.getContext('2d')!;
-    this.#ctx.font = `${fontSize}px ${fontFamily}`;
+    this.#ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
     this.#ctx.textAlign = 'center';
     this.#ctx.textBaseline = 'top';
-    this.#ctx.letterSpacing = letterSpacing ?? '0px';
+    this.#ctx.letterSpacing = this.#opts.letterSpacing ?? '0px';
 
     this.#meta = {
       width: videoWidth,