forked from 0x2620/oxjs
implement 'show subtitles' functionality for players and timelines
This commit is contained in:
parent
b5a7b9b28d
commit
02b5b56be8
6 changed files with 83 additions and 40 deletions
|
|
@ -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 = [];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue