Merge pull request #407 from Dramalf/main

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

Author: hughfenghen

.changeset/four-peaches-bow.md

@@ -0,0 +1,5 @@
+---
+'@webav/av-cliper': patch
+---
+
+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. Update demo and test cases.

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,12 +110,19 @@ 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,
+      letterSpacing,
+    } = 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';