Merge pull request #57 from Stremio/feat/subtitles-opacity

Subtitles opacity

Author: tymmesyde

src/TizenVideo/TizenVideo.js

@@ -24,6 +24,7 @@ function TizenVideo(options) {
     var textColor = 'rgb(255, 255, 255)';
     var backgroundColor = 'rgba(0, 0, 0, 0)';
     var outlineColor = 'rgb(34, 34, 34)';
+    var subtitlesOpacity = 1;
 
     var objElement = document.createElement('object');
     objElement.type = 'application/avplayer';
@@ -59,6 +60,8 @@ function TizenVideo(options) {
         }
 
         subtitlesElement.style.bottom = offset + '%';
+        subtitlesElement.style.opacity = subtitlesOpacity;
+
         var cueNode = document.createElement('span');
         cueNode.innerHTML = text;
         cueNode.style.display = 'inline-block';
@@ -138,6 +141,7 @@ function TizenVideo(options) {
         subtitlesTextColor: false,
         subtitlesBackgroundColor: false,
         subtitlesOutlineColor: false,
+        subtitlesOpacity: false,
         audioTracks: false,
         selectedAudioTrackId: false,
         playbackSpeed: false
@@ -272,6 +276,13 @@ function TizenVideo(options) {
 
                 return outlineColor;
             }
+            case 'subtitlesOpacity': {
+                if (destroyed) {
+                    return null;
+                }
+
+                return subtitlesOpacity;
+            }
             case 'audioTracks': {
                 if (stream === null) {
                     return [];
@@ -506,6 +517,22 @@ function TizenVideo(options) {
 
                 break;
             }
+            case 'subtitlesOpacity': {
+                if (typeof propValue === 'number') {
+                    try {
+                        subtitlesOpacity = Math.min(Math.max(propValue / 100, 0), 1);
+                    } catch (error) {
+                        // eslint-disable-next-line no-console
+                        console.error('Tizen player with HTML Subtitles', error);
+                    }
+
+                    refreshSubtitle();
+
+                    onPropChanged('subtitlesOpacity');
+                }
+
+                break;
+            }
             case 'selectedAudioTrackId': {
                 if (stream !== null) {
 
@@ -608,6 +635,7 @@ function TizenVideo(options) {
                 onPropChanged('subtitlesTextColor');
                 onPropChanged('subtitlesBackgroundColor');
                 onPropChanged('subtitlesOutlineColor');
+                onPropChanged('subtitlesOpacity');
                 onPropChanged('playbackSpeed');
                 events.removeAllListeners();
                 containerElement.removeChild(objElement);
@@ -657,7 +685,7 @@ TizenVideo.canPlayStream = function() {
 TizenVideo.manifest = {
     name: 'TizenVideo',
     external: false,
-    props: ['stream', 'paused', 'time', 'duration', 'buffering', 'audioTracks', 'selectedAudioTrackId', 'subtitlesTracks', 'selectedSubtitlesTrackId', 'subtitlesOffset', 'subtitlesSize', 'subtitlesTextColor', 'subtitlesBackgroundColor', 'subtitlesOutlineColor', 'playbackSpeed'],
+    props: ['stream', 'paused', 'time', 'duration', 'buffering', 'audioTracks', 'selectedAudioTrackId', 'subtitlesTracks', 'selectedSubtitlesTrackId', 'subtitlesOffset', 'subtitlesSize', 'subtitlesTextColor', 'subtitlesBackgroundColor', 'subtitlesOutlineColor', 'subtitlesOpacity', 'playbackSpeed'],
     commands: ['load', 'unload', 'destroy'],
     events: ['propValue', 'propChanged', 'ended', 'error', 'subtitlesTrackLoaded', 'audioTrackLoaded']
 };

src/WebOsVideo/WebOsVideo.js

@@ -430,6 +430,7 @@ function WebOsVideo(options) {
     var stream = null;
     var startTime = null;
     var subtitlesOffset = 0;
+    var subtitlesOpacity = 255;
     var observedProps = {
         stream: false,
         paused: false,
@@ -443,6 +444,7 @@ function WebOsVideo(options) {
         subtitlesSize: false,
         subtitlesTextColor: false,
         subtitlesBackgroundColor: false,
+        subtitlesOpacity: false,
         audioTracks: false,
         selectedAudioTrackId: false,
         volume: false,
@@ -539,6 +541,13 @@ function WebOsVideo(options) {
 
                 return lastSubBgColor || 'rgba(255, 255, 255, 0)';
             }
+            case 'subtitlesOpacity': {
+                if (destroyed) {
+                    return null;
+                }
+
+                return subtitlesOpacity || 255;
+            }
             case 'audioTracks': {
                 return audioTracks;
             }
@@ -821,6 +830,22 @@ function WebOsVideo(options) {
 
                 break;
             }
+            case 'subtitlesOpacity': {
+                if (typeof propValue === 'number') {
+                    luna({
+                        method: 'setSubtitleBackgroundOpacity',
+                        parameters: {
+                            'mediaId': knownMediaId,
+                            'bgOpacity': Math.min(Math.max(propValue / 0.4, 0), 255),
+                        }
+                    });
+
+                    subtitlesOpacity = propValue;
+                    onPropChanged('subtitlesOpacity');
+                }
+
+                break;
+            }
             case 'selectedAudioTrackId': {
                 // console.log('WebOS', 'change audio track for id: ', knownMediaId, ' index:', propValue);
 
@@ -1014,6 +1039,7 @@ function WebOsVideo(options) {
                 onPropChanged('subtitlesSize');
                 onPropChanged('subtitlesTextColor');
                 onPropChanged('subtitlesBackgroundColor');
+                onPropChanged('subtitlesOpacity');
                 onPropChanged('volume');
                 onPropChanged('muted');
                 onPropChanged('playbackSpeed');
@@ -1084,7 +1110,7 @@ WebOsVideo.canPlayStream = function() { // function(stream)
 WebOsVideo.manifest = {
     name: 'WebOsVideo',
     external: false,
-    props: ['stream', 'paused', 'time', 'duration', 'buffering', 'buffered', 'audioTracks', 'selectedAudioTrackId', 'subtitlesTracks', 'selectedSubtitlesTrackId', 'subtitlesOffset', 'subtitlesSize', 'subtitlesTextColor', 'subtitlesBackgroundColor', 'volume', 'muted', 'playbackSpeed'],
+    props: ['stream', 'paused', 'time', 'duration', 'buffering', 'buffered', 'audioTracks', 'selectedAudioTrackId', 'subtitlesTracks', 'selectedSubtitlesTrackId', 'subtitlesOffset', 'subtitlesSize', 'subtitlesTextColor', 'subtitlesBackgroundColor', 'subtitlesOpacity', 'volume', 'muted', 'playbackSpeed'],
     commands: ['load', 'unload', 'destroy'],
     events: ['propValue', 'propChanged', 'ended', 'error', 'subtitlesTrackLoaded', 'audioTrackLoaded']
 };

src/withHTMLSubtitles/withHTMLSubtitles.js

@@ -53,6 +53,7 @@ function withHTMLSubtitles(Video) {
         var textColor = 'rgb(255, 255, 255)';
         var backgroundColor = 'rgba(0, 0, 0, 0)';
         var outlineColor = 'rgb(34, 34, 34)';
+        var opacity = 1;
         var observedProps = {
             extraSubtitlesTracks: false,
             selectedExtraSubtitlesTrackId: false,
@@ -61,7 +62,8 @@ function withHTMLSubtitles(Video) {
             extraSubtitlesOffset: false,
             extraSubtitlesTextColor: false,
             extraSubtitlesBackgroundColor: false,
-            extraSubtitlesOutlineColor: false
+            extraSubtitlesOutlineColor: false,
+            extraSubtitlesOpacity: false
         };
 
         function renderSubtitles() {
@@ -74,6 +76,7 @@ function withHTMLSubtitles(Video) {
             }
 
             subtitlesElement.style.bottom = offset + '%';
+            subtitlesElement.style.opacity = opacity;
             subtitlesRenderer.render(cuesByTime, videoState.time - delay).forEach(function(cueNode) {
                 cueNode.style.display = 'inline-block';
                 cueNode.style.padding = '0.2em';
@@ -178,6 +181,13 @@ function withHTMLSubtitles(Video) {
 
                     return outlineColor;
                 }
+                case 'extraSubtitlesOpacity': {
+                    if (destroyed) {
+                        return null;
+                    }
+
+                    return opacity;
+                }
                 default: {
                     return videoPropValue;
                 }
@@ -192,7 +202,8 @@ function withHTMLSubtitles(Video) {
                 case 'extraSubtitlesOffset':
                 case 'extraSubtitlesTextColor':
                 case 'extraSubtitlesBackgroundColor':
-                case 'extraSubtitlesOutlineColor': {
+                case 'extraSubtitlesOutlineColor':
+                case 'extraSubtitlesOpacity': {
                     events.emit('propValue', propName, getProp(propName, null));
                     observedProps[propName] = true;
                     return true;
@@ -326,6 +337,21 @@ function withHTMLSubtitles(Video) {
 
                     return true;
                 }
+                case 'extraSubtitlesOpacity': {
+                    if (typeof propValue === 'number') {
+                        try {
+                            opacity = Math.min(Math.max(propValue / 100, 0), 1);
+                        } catch (error) {
+                            // eslint-disable-next-line no-console
+                            console.error('withHTMLSubtitles', error);
+                        }
+
+                        renderSubtitles();
+                        onPropChanged('extraSubtitlesOpacity');
+                    }
+
+                    return true;
+                }
                 default: {
                     return false;
                 }
@@ -387,6 +413,7 @@ function withHTMLSubtitles(Video) {
                     onPropChanged('extraSubtitlesTextColor');
                     onPropChanged('extraSubtitlesBackgroundColor');
                     onPropChanged('extraSubtitlesOutlineColor');
+                    onPropChanged('extraSubtitlesOpacity');
                     video.dispatch({ type: 'command', commandName: 'destroy' });
                     events.removeAllListeners();
                     containerElement.removeChild(subtitlesElement);
@@ -448,7 +475,7 @@ function withHTMLSubtitles(Video) {
     VideoWithHTMLSubtitles.manifest = {
         name: Video.manifest.name + 'WithHTMLSubtitles',
         external: Video.manifest.external,
-        props: Video.manifest.props.concat(['extraSubtitlesTracks', 'selectedExtraSubtitlesTrackId', 'extraSubtitlesDelay', 'extraSubtitlesSize', 'extraSubtitlesOffset', 'extraSubtitlesTextColor', 'extraSubtitlesBackgroundColor', 'extraSubtitlesOutlineColor'])
+        props: Video.manifest.props.concat(['extraSubtitlesTracks', 'selectedExtraSubtitlesTrackId', 'extraSubtitlesDelay', 'extraSubtitlesSize', 'extraSubtitlesOffset', 'extraSubtitlesTextColor', 'extraSubtitlesBackgroundColor', 'extraSubtitlesOutlineColor', 'extraSubtitlesOpacity'])
             .filter(function(value, index, array) { return array.indexOf(value) === index; }),
         commands: Video.manifest.commands.concat(['load', 'unload', 'destroy', 'addExtraSubtitlesTracks'])
             .filter(function(value, index, array) { return array.indexOf(value) === index; }),