Skip to content

Commit

Permalink
feat: implement subtitles opacity
Browse files Browse the repository at this point in the history
  • Loading branch information
@tymmesyde
tymmesyde committed Jan 31, 2024
1 parent b999315 commit 8c273ca
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 5 deletions.
30 changes: 29 additions & 1 deletion src/TizenVideo/TizenVideo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -138,6 +141,7 @@ function TizenVideo(options) {
subtitlesTextColor: false,
subtitlesBackgroundColor: false,
subtitlesOutlineColor: false,
subtitlesOpacity: false,
audioTracks: false,
selectedAudioTrackId: false,
playbackSpeed: false
Expand Down Expand Up @@ -272,6 +276,13 @@ function TizenVideo(options) {

return outlineColor;
}
case 'subtitlesOpacity': {
if (destroyed) {
return null;
}

return subtitlesOpacity;
}
case 'audioTracks': {
if (stream === null) {
return [];
Expand Down Expand Up @@ -506,6 +517,22 @@ function TizenVideo(options) {

break;
}
case 'subtitlesOpacity': {
if (typeof propValue === 'number') {
try {
subtitlesOpacity = Math.max(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) {

Expand Down Expand Up @@ -608,6 +635,7 @@ function TizenVideo(options) {
onPropChanged('subtitlesTextColor');
onPropChanged('subtitlesBackgroundColor');
onPropChanged('subtitlesOutlineColor');
onPropChanged('subtitlesOpacity');
onPropChanged('playbackSpeed');
events.removeAllListeners();
containerElement.removeChild(objElement);
Expand Down Expand Up @@ -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']
};
Expand Down
28 changes: 27 additions & 1 deletion src/WebOsVideo/WebOsVideo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -443,6 +444,7 @@ function WebOsVideo(options) {
subtitlesSize: false,
subtitlesTextColor: false,
subtitlesBackgroundColor: false,
subtitlesOpacity: false,
audioTracks: false,
selectedAudioTrackId: false,
volume: false,
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -821,6 +830,22 @@ function WebOsVideo(options) {

break;
}
case 'subtitlesOpacity': {
if (typeof propValue === 'number') {
luna({
method: 'setSubtitleBackgroundOpacity',
parameters: {
'mediaId': knownMediaId,
'bgOpacity': Math.max(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);

Expand Down Expand Up @@ -1014,6 +1039,7 @@ function WebOsVideo(options) {
onPropChanged('subtitlesSize');
onPropChanged('subtitlesTextColor');
onPropChanged('subtitlesBackgroundColor');
onPropChanged('subtitlesOpacity');
onPropChanged('volume');
onPropChanged('muted');
onPropChanged('playbackSpeed');
Expand Down Expand Up @@ -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']
};
Expand Down
33 changes: 30 additions & 3 deletions src/withHTMLSubtitles/withHTMLSubtitles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -61,7 +62,8 @@ function withHTMLSubtitles(Video) {
extraSubtitlesOffset: false,
extraSubtitlesTextColor: false,
extraSubtitlesBackgroundColor: false,
extraSubtitlesOutlineColor: false
extraSubtitlesOutlineColor: false,
extraSubtitlesOpacity: false
};

function renderSubtitles() {
Expand All @@ -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';
Expand Down Expand Up @@ -178,6 +181,13 @@ function withHTMLSubtitles(Video) {

return outlineColor;
}
case 'extraSubtitlesOpacity': {
if (destroyed) {
return null;
}

return opacity;
}
default: {
return videoPropValue;
}
Expand All @@ -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;
Expand Down Expand Up @@ -326,6 +337,21 @@ function withHTMLSubtitles(Video) {

return true;
}
case 'extraSubtitlesOpacity': {
if (typeof propValue === 'number') {
try {
opacity = Math.max(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;
}
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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; }),
Expand Down

0 comments on commit 8c273ca

Please sign in to comment.