feature: thicker desktop like outline applied

Stremio · Dec 18, 2023 · 0ca645d · 0ca645d
1 parent c368992
commit 0ca645d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/src/HTMLVideo/HTMLVideo.js b/src/HTMLVideo/HTMLVideo.js
@@ -449,7 +449,19 @@ function HTMLVideo(options) {
             case 'subtitlesOutlineColor': {
                 if (typeof propValue === 'string') {
                     try {
-                        styleElement.sheet.cssRules[0].style.textShadow = Color(propValue).rgb().string() + ' 1px 1px 0.1em';
+                        var color = Color(propValue).rgb().string();
+                        var shadows = [
+                            color + ' 2px 0px 0',
+                            color + ' -2px 0px 0',
+                            color + ' 0px 2px 0',
+                            color + ' 0px -2px 0',
+                            color + ' 2px 2px 0',
+                            color + ' -2px -2px 0',
+                            color + ' 2px -2px 0',
+                            color + ' -2px 2px 0'
+                        ];
+
+                        styleElement.sheet.cssRules[0].style.textShadow = shadows.join(', ');
                     } catch (error) {
                         // eslint-disable-next-line no-console
                         console.error('HTMLVideo', error);

diff --git a/src/withHTMLSubtitles/withHTMLSubtitles.js b/src/withHTMLSubtitles/withHTMLSubtitles.js
@@ -74,13 +74,25 @@ function withHTMLSubtitles(Video) {
             }
 
             subtitlesElement.style.bottom = offset + '%';
+            var color = outlineColor;
+            var shadows = [
+                color + ' 2px 0px 0',
+                color + ' -2px 0px 0',
+                color + ' 0px 2px 0',
+                color + ' 0px -2px 0',
+                color + ' 2px 2px 0',
+                color + ' -2px -2px 0',
+                color + ' 2px -2px 0',
+                color + ' -2px 2px 0'
+            ];
+
             subtitlesRenderer.render(cuesByTime, videoState.time + delay).forEach(function(cueNode) {
                 cueNode.style.display = 'inline-block';
                 cueNode.style.padding = '0.2em';
                 cueNode.style.fontSize = Math.floor(size / 25) + 'vmin';
                 cueNode.style.color = textColor;
                 cueNode.style.backgroundColor = backgroundColor;
-                cueNode.style.textShadow = '1px 1px 0.1em ' + outlineColor;
+                cueNode.style.textShadow = shadows.join(', ');
                 subtitlesElement.appendChild(cueNode);
                 subtitlesElement.appendChild(document.createElement('br'));
             });