improve subtitle rendering

src/renderer/src/App.module.css

@@ -0,0 +1,13 @@
+/* https://stackoverflow.com/questions/18270894/html5-video-does-not-hide-controls-in-fullscreen-mode-in-chrome */
+video.video::-webkit-media-controls {
+  display:none !important;
+}
+
+video.video::cue {
+  background-color: rgba(0,0,0,0.3);
+}
+
+/* remove gap between subtitle lines https://stackoverflow.com/questions/41317044/need-help-styling-subtitles-on-html5-using-the-track-element */
+video.video::-webkit-media-text-track-display {
+  overflow: visible !important;
+}

src/renderer/src/App.tsx

@@ -95,6 +95,7 @@ import useThumbnails from './hooks/useThumbnails';
 import useSubtitles from './hooks/useSubtitles';
 import useStreamsMeta from './hooks/useStreamsMeta';
 import { bottomStyle, videoStyle } from './styles';
+import styles from './App.module.css';
 
 const electron = window.require('electron');
 const { exists } = window.require('fs-extra');
@@ -2390,7 +2391,7 @@ function App() {
                   <div className="no-user-select" style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, visibility: !isFileOpened || !hasVideo || bigWaveformEnabled ? 'hidden' : undefined }} onWheel={onTimelineWheel}>
                     {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
                     <video
-                      className="main-player"
+                      className={styles['video']}
                       tabIndex={-1}
                       muted={playbackVolume === 0 || compatPlayerEnabled}
                       ref={videoRef}

src/renderer/src/main.css

@@ -108,8 +108,3 @@ code.highlighted {
 .link-button:focus {
   outline: revert;
 }
-
-/* https://stackoverflow.com/questions/18270894/html5-video-does-not-hide-controls-in-fullscreen-mode-in-chrome */
-video.main-player::-webkit-media-controls {
-  display:none !important;
-}