feat: add optional subtitle style editor with live preview

src/components/menus/SettingsMenu.test.tsx

@@ -57,21 +57,36 @@ describe('SettingsMenu', () => {
       settings: {
         quality: null,
         subtitle: null,
+        subtitleStyle: {},
         audioTrack: null,
         playbackRate: 1,
       },
       setPlaybackRate: vi.fn(),
       setSubtitle: vi.fn(),
+      setSubtitleStyle: vi.fn(),
+      saveSubtitleStyle: vi.fn(),
+      revertSubtitleStyle: vi.fn(),
       setAudioTrack: vi.fn(),
       setQuality: vi.fn(),
       toggleSettings: vi.fn(),
+      subtitleStyleEditorEnabled: true,
       translations: {
         noSubtitlesAvailable: 'No subtitles available',
         subtitles: 'Subtitles',
+        subtitleStyle: 'Subtitle Style',
+        preview: 'Preview',
+        save: 'Save',
+        cancel: 'Cancel',
+        reset: 'Reset',
         off: 'Off',
         auto: 'Auto',
         quality: 'Quality',
         speed: 'Speed',
+        fontSize: 'Font Size',
+        fontWeight: 'Font Weight',
+        textColor: 'Text Color',
+        backgroundColor: 'Background Color',
+        backgroundOpacity: 'Background Opacity',
         normal: 'Normal',
         default: 'Default',
         audioTrack: 'Audio Track',
@@ -130,4 +145,19 @@ describe('SettingsMenu', () => {
     fireEvent.click(screen.getByText('720p'))
     expect(contextState.value.setQuality).toHaveBeenCalledWith(qualities[1])
   })
+
+  it('saves subtitle style from subtitle style editor', () => {
+    render(<SettingsMenu subtitles={subtitles} audioTracks={audioTracks} qualities={qualities} />)
+
+    fireEvent.click(screen.getByText('Subtitles'))
+    fireEvent.click(screen.getByRole('button', { name: /Subtitle Style/i }))
+    fireEvent.change(screen.getByLabelText('Font Size'), { target: { value: '30' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(contextState.value.saveSubtitleStyle).toHaveBeenCalledWith(
+      expect.objectContaining({
+        fontSize: 30,
+      })
+    )
+  })
 })