feat: add optional subtitle style editor with live preview

examples/App.css

@@ -5,8 +5,9 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-    'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: #0f172a;
@@ -70,6 +71,9 @@ body {
 .controls-section {
   max-width: 1200px;
   margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
 }
 
 .url-input {
@@ -122,6 +126,20 @@ body {
   color: white;
 }
 
+.toggle-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  color: #cbd5e1;
+  font-size: 0.95rem;
+}
+
+.toggle-row input[type='checkbox'] {
+  width: 16px;
+  height: 16px;
+  accent-color: #ef4444;
+}
+
 .features-section {
   margin-top: 4rem;
 }

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>