diff --git a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js index d9724d02..c9a5b6f5 100644 --- a/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js @@ -15,7 +15,6 @@ Ox.BlockVideoTimeline = function(options, self) { position: 0, results: [], showPointMarkers: false, - showSubtitles: false, state: 'default', subtitles: [], width: 0 @@ -58,7 +57,7 @@ Ox.BlockVideoTimeline = function(options, self) { out: self.options.out, results: self.options.results, state: self.options.state, - subtitles: self.options.showSubtitles ? self.options.subtitles : [], + subtitles: self.options.subtitles, timeline: self.options.getImageURL, width: Math.round(self.options.duration), type: 'editor' @@ -245,6 +244,11 @@ Ox.BlockVideoTimeline = function(options, self) { updateTimelines(); } + function setSubtitles() { + self.$image.options({subtitles: self.options.subtitles}); + updateTimelines(); + } + function setWidth() { self.lines = getLines(); setCSS(); @@ -294,6 +298,8 @@ Ox.BlockVideoTimeline = function(options, self) { setPositionMarker(); } else if (key == 'results') { setResults(); + } else if (key == 'subtitles') { + setSubtitles(); } else if (key == 'state') { setState(); } else if (key == 'width') { diff --git a/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js b/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js index c88b9e93..ee363261 100644 --- a/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.LargeVideoTimeline.js @@ -173,6 +173,7 @@ Ox.LargeVideoTimeline = function(options, self) { } function setSubtitles() { + that.find('.OxSubtitle').remove(); self.$subtitles = []; self.options.subtitles.forEach(function(subtitle, i) { var found = self.options.find @@ -220,14 +221,13 @@ Ox.LargeVideoTimeline = function(options, self) { self.setOption = function(key, value) { if (key == 'find') { - that.find('.OxSubtitle').remove(); setSubtitles(); } else if (key == 'in' || key == 'out') { setPointMarker(key); } else if (key == 'position') { setPosition(); } else if (key == 'subtitles') { - // ... + setSubtitles(); } else if (key == 'width') { setWidth(); } diff --git a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js index 15e1a2af..31cbf698 100644 --- a/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js +++ b/source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js @@ -22,6 +22,7 @@ Ox.SmallVideoTimeline = function(options, self) { results: [], showMilliseconds: 0, state: 'default', + subtitles: [], timeline: '', type: 'player', width: 256 diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index e25acfa0..0d2a8106 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -306,7 +306,7 @@ Ox.VideoEditor = function(options, self) { //matches: self.options.matches, out: self.options.out, position: self.options.position, - subtitles: self.options.subtitles, + subtitles: self.options.enableSubtitles ? self.options.subtitles : [], type: 'editor', width: self.sizes.timeline[0].width }) @@ -332,9 +332,8 @@ Ox.VideoEditor = function(options, self) { position: self.options.position, results: find(self.options.find), showPointMarkers: true, - showSubtitles: true, state: self.options.selected ? 'selected' : 'default', - subtitles: self.options.subtitles, + subtitles: self.options.enableSubtitles ? self.options.subtitles : [], videoId: self.options.videoId, width: self.sizes.timeline[1].width }) @@ -431,34 +430,39 @@ Ox.VideoEditor = function(options, self) { }); self.$videoMenuButton = Ox.MenuButton({ - items: Ox.merge([ - {group: 'size', min: 1, max: 1, items: [ - {id: 'small', title: 'Small Player', checked: self.options.videoSize == 'small'}, - {id: 'large', title: 'Large Player', checked: self.options.videoSize == 'large'} - ]}, - {}, - {group: 'resolution', min: 1, max: 1, items: self.resolutions}, - {}, - {id: 'largeTimeline', title: 'Hide Large Timeline', disabled: true}, - {id: 'subtitlesTimeline', title: 'Hide Subtitles on Large Timeline', disabled: true}, - {}, - {id: 'downloadVideo', title: 'Download Video...', disabled: !self.options.enableDownload }, - {id: 'downloadSelection', title: 'Download Selection...', disabled: !self.options.enableDownload}, - {id: 'embedSelection', title: 'Embed Selection...'}, + items: Ox.merge( + [ + {group: 'size', min: 1, max: 1, items: [ + {id: 'small', title: 'Small Player', checked: self.options.videoSize == 'small'}, + {id: 'large', title: 'Large Player', checked: self.options.videoSize == 'large'} + ]}, + {}, + {group: 'resolution', min: 1, max: 1, items: self.resolutions} + ], + self.options.subtitles.length ? [ + {}, + {id: 'subtitles', title: 'Show Subtitles', checked: self.options.enableSubtitles} + ] : [], + [ + {}, + {id: 'downloadVideo', title: 'Download Video...', disabled: !self.options.enableDownload }, + {id: 'downloadSelection', title: 'Download Selection...', disabled: !self.options.enableDownload}, + {id: 'embedSelection', title: 'Embed Selection...'} + ], self.options.enableImport ? [ {}, - {id: 'importAnnotations', title: 'Import Annotations...'}, + {id: 'importAnnotations', title: 'Import Annotations...'} ] : [], - ], - self.options.posterFrameControls ? [ - {}, - {id: 'gotoPosterFrame', title: 'Go to Poster Frame'}, - {id: 'setPosterFrame', title: 'Set Poster Frame'}, - ] : [], - [ - {}, - {id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'} - ]), + self.options.posterFrameControls ? [ + {}, + {id: 'gotoPosterFrame', title: 'Go to Poster Frame'}, + {id: 'setPosterFrame', title: 'Set Poster Frame'} + ] : [], + [ + {}, + {id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'} + ] + ), style: 'square', title: 'set', tooltip: 'Actions and Settings', @@ -503,6 +507,8 @@ Ox.VideoEditor = function(options, self) { self.$player[0].options({resolution: self.options.resolution}); } else if (id == 'size') { toggleSize(); + } else if (id == 'subtitles') { + toggleSubtitles(); } }, hide: function() { @@ -1285,6 +1291,23 @@ Ox.VideoEditor = function(options, self) { }); } + function toggleSubtitles() { + self.options.enableSubtitles = !self.options.enableSubtitles; + self.$player.forEach(function($player) { + $player.options({ + enableSubtitles: self.options.enableSubtitles + }); + }); + self.$timeline.forEach(function($timeline) { + $timeline.options({ + subtitles: self.options.enableSubtitles ? self.options.subtitles : [] + }); + }); + that.triggerEvent('subtitles', { + subtitles: self.options.enableSubtitles + }); + } + function updateWords(action) { // action can be 'add' or 'remove' var words = []; diff --git a/source/Ox.UI/js/Video/Ox.VideoPanel.js b/source/Ox.UI/js/Video/Ox.VideoPanel.js index 890bde88..e23f972d 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPanel.js +++ b/source/Ox.UI/js/Video/Ox.VideoPanel.js @@ -136,6 +136,9 @@ Ox.VideoPanel = function(options, self) { }, select: selectAnnotation, subtitles: function(data) { + self.$timeline.options({ + subtitles: data.subtitles ? self.options.subtitles : [] + }); that.triggerEvent('subtitles', data); }, volume: function(data) { @@ -154,7 +157,7 @@ Ox.VideoPanel = function(options, self) { find: self.options.find, getImageURL: self.options.getTimelineImageURL, position: self.options.position, - subtitles: self.options.subtitles, + subtitles: self.options.enableSubtitles ? self.options.subtitles : [], videoId: self.options.videoId, width: getTimelineWidth() }) diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index f1a07fb8..6d7296cc 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -1399,7 +1399,7 @@ Ox.VideoPlayer = function(options, self) { position: self.options.position, results: self.results, showMilliseconds: self.options.showMilliseconds, - subtitles: self.options.subtitles, + subtitles: self.options.enableSubtitles ? self.options.subtitles : [], timeline: self.options.timeline, type: 'player', width: getTimelineWidth() @@ -1768,11 +1768,7 @@ Ox.VideoPlayer = function(options, self) { if (title == 'Download') { that.triggerEvent('download'); } else if (title == 'Subtitles') { - self.options.enableSubtitles = !self.options.enableSubtitles; - setSubtitle(); - that.triggerEvent('subtitles', { - subtitles: self.options.enableSubtitles - }); + toggleSubtitles(); } else { resolution = parseInt(title); if (resolution != self.options.resolution) { @@ -2342,12 +2338,26 @@ Ox.VideoPlayer = function(options, self) { }); } + function toggleSubtitles() { + self.options.enableSubtitles = !self.options.enableSubtitles; + setSubtitle(); + self.$timeline && self.$timeline.options({ + subtitles: self.options.enableSubtitles ? self.options.subtitles : [] + }); + that.triggerEvent('subtitles', { + subtitles: self.options.enableSubtitles + }); + } + function toggleVolume() { self.$volume.toggle(); } self.setOption = function(key, value) { - if (key == 'find') { + if (key == 'enableSubtitles') { + self.options.enableSubtitles = !self.options.enableSubtitles; + toggleSubtitles(); + } if (key == 'find') { setSubtitleText(); } else if (key == 'fullscreen') { self.options.fullscreen = !self.options.fullscreen;