feat: add optional subtitle style editor with live preview

examples/App.tsx

@@ -6,6 +6,7 @@ import './App.css'
 function App() {
   const [videoUrl, setVideoUrl] = useState('')
   const [useDemo, setUseDemo] = useState(true)
+  const [subtitleStyleEditorEnabled, setSubtitleStyleEditorEnabled] = useState(true)
 
   // Demo video URLs (you can replace with your own)
   const demoVideoUrl = '/player/ses.mp4'
@@ -37,6 +38,17 @@ function App() {
                 src={currentVideoUrl}
                 poster={useDemo ? demoPoster : undefined}
                 subtitles={demoSubtitles}
+                subtitleStyle={{
+                  fontSize: 24,
+                  fontWeight: 500,
+                  color: '#ffffff',
+                  backgroundColor: '#0f0f0f',
+                  backgroundOpacity: 0.78,
+                }}
+                subtitleStyleEditor={{
+                  enabled: subtitleStyleEditorEnabled,
+                  storageKey: 'source-player-example-subtitle-style',
+                }}
                 keyboardShortcuts={true}
                 pictureInPicture={true}
                 theme={{
@@ -63,13 +75,18 @@ function App() {
                 onChange={(e) => setVideoUrl(e.target.value)}
                 disabled={useDemo}
               />
-              <button
-                onClick={() => setUseDemo(!useDemo)}
-                className={useDemo ? 'active' : ''}
-              >
+              <button onClick={() => setUseDemo(!useDemo)} className={useDemo ? 'active' : ''}>
                 {useDemo ? 'Using Demo' : 'Use Demo'}
               </button>
             </div>
+            <label className="toggle-row">
+              <input
+                type="checkbox"
+                checked={subtitleStyleEditorEnabled}
+                onChange={(event) => setSubtitleStyleEditorEnabled(event.target.checked)}
+              />
+              <span>Enable subtitle style editor (with localStorage)</span>
+            </label>
           </div>
         </div>
 
@@ -79,14 +96,30 @@ function App() {
             <div className="feature">
               <h3>⌨️ Keyboard Shortcuts</h3>
               <ul>
-                <li><kbd>Space</kbd> or <kbd>K</kbd> - Play/Pause</li>
-                <li><kbd>←</kbd> / <kbd>→</kbd> - Seek 5s</li>
-                <li><kbd>J</kbd> / <kbd>L</kbd> - Seek 10s</li>
-                <li><kbd>↑</kbd> / <kbd>↓</kbd> - Volume</li>
-                <li><kbd>M</kbd> - Mute/Unmute</li>
-                <li><kbd>F</kbd> - Fullscreen</li>
-                <li><kbd>P</kbd> - Picture-in-Picture</li>
-                <li><kbd>0-9</kbd> - Jump to %</li>
+                <li>
+                  <kbd>Space</kbd> or <kbd>K</kbd> - Play/Pause
+                </li>
+                <li>
+                  <kbd>←</kbd> / <kbd>→</kbd> - Seek 5s
+                </li>
+                <li>
+                  <kbd>J</kbd> / <kbd>L</kbd> - Seek 10s
+                </li>
+                <li>
+                  <kbd>↑</kbd> / <kbd>↓</kbd> - Volume
+                </li>
+                <li>
+                  <kbd>M</kbd> - Mute/Unmute
+                </li>
+                <li>
+                  <kbd>F</kbd> - Fullscreen
+                </li>
+                <li>
+                  <kbd>P</kbd> - Picture-in-Picture
+                </li>
+                <li>
+                  <kbd>0-9</kbd> - Jump to %
+                </li>
               </ul>
             </div>
 
@@ -118,6 +151,7 @@ function App() {
                 <li>HLS streaming support</li>
                 <li>HTTP Range Request (MP4)</li>
                 <li>Subtitles (VTT, SRT)</li>
+                <li>Subtitle style editor + live preview</li>
                 <li>Multiple audio tracks</li>
                 <li>Playback speed control</li>
                 <li>Quality selector</li>