0x2620/oxjs
2
0
Fork 2
Code Issues 172 Pull requests Releases Wiki Activity

support audio and subtitle tracks (multiple languages etc), first round

Browse source
This commit is contained in:
rolux 2014-07-23 15:55:09 +02:00
commit 07fdb094dd
5 changed files with 328 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

81
source/Ox.UI/js/Video/VideoAnnotationPanel.js
View file

@ -86,6 +86,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
showLayers: {},
showUsers: false,
subtitles: [],
subtitlesDefaultTrack: 'en',
subtitlesLayer: null,
timeline: '',
timelines: [],
@ -282,6 +283,31 @@ Ox.VideoAnnotationPanel = function(options, self) {
self.options.subtitles = self.options.subtitles || getSubtitles();
if (Ox.isObject(self.options.video[0])) {
self.resolutions = Ox.sort(Ox.unique(
self.options.video.map(function(video) {
return video.resolution;
})
)).map(function(resolution) {
return {
id: resolution + '',
title: resolution + 'p',
checked: self.options.resolution == resolution
};
});
self.audioTracks = Ox.sort(Ox.unique(
self.options.video.map(function(video) {
return video.track;
})
)).map(function(track) {
return {
id: track,
title: Ox._(Ox.getLanguageNameByCode(video.track)),
checked: self.options.audioTrack == track
};
});
}
self.options.layers.forEach(function(layer, i) {
that.bindEvent('key_' + (i + 1), function() {
layer.editable
@ -350,6 +376,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
showMilliseconds: 3,
sizeIsLarge: self.options.videoSize == 'large',
subtitles: Ox.clone(self.options.subtitles, true),
subtitlesDefaultTrack: self.options.subtitlesDefaultTrack,
type: type,
video: type == 'play' ? self.options.video : self.options.getFrameURL,
volume: self.options.volume,
@ -487,16 +514,6 @@ Ox.VideoAnnotationPanel = function(options, self) {
}
});
self.resolutions = [];
Ox.forEach(self.options.video, function(url, resolution) {
Ox.Log('Video', url, resolution);
self.resolutions.push({
id: resolution + '',
title: resolution + 'p',
checked: self.options.resolution == resolution
});
});
self.$keyboardShortcuts = $('<div>').css({margin: '16px'});
[
{key: Ox.UI.symbols.space, action: Ox._('Play/Pause')},
@ -564,24 +581,30 @@ Ox.VideoAnnotationPanel = function(options, self) {
{id: 'size', title: Ox._('Large Player'), checked: self.options.videoSize == 'large'},
{id: 'loop', title: Ox._('Loop'), checked: self.options.loop, keyboard: 'l'},
{},
{id: 'resolutions', title: Ox._('Resolution'), disabled: true},
{group: 'resolution', min: 1, max: 1, items: self.resolutions}
{id: 'resolutions', title: Ox._('Resolution'), items: [
{group: 'resolution', min: 1, max: 1, items: self.resolutions}
]}
],
self.audioTracks.length > 1 ? [
{id: 'audioTracks', title: Ox._('Audio'), items: [
{group: 'audioTrack', min: 1, max: 1, items: self.audioTracks}
]}
] : [],
self.options.subtitles.length ? [
{},
// TODO...
{id: 'subtitles', title: Ox._('Show Subtitles'), checked: self.options.enableSubtitles}
] : [],
[
{},
{id: 'timelines', title: Ox._('Timeline'), disabled: true},
{group: 'timeline', min: 1, max: 1, items: Ox.map(
self.options.timelines,
function(timeline) {
return Ox.extend({
checked: timeline.id == self.options.timeline
}, timeline);
}
)},
{id: 'timelines', title: Ox._('Timeline'), items: [
{group: 'timeline', min: 1, max: 1, items: Ox.map(
self.options.timelines,
function(timeline) {
return Ox.extend({
checked: timeline.id == self.options.timeline
}, timeline);
}
)}
]},
{},
{id: 'gotoPosterFrame', title: Ox._('Go to Poster Frame'), keyboard: 'shift p'},
{id: 'setPosterFrame', title: Ox._('Set Poster Frame'), disabled: !self.options.enableSetPosterFrame},
@ -650,7 +673,10 @@ Ox.VideoAnnotationPanel = function(options, self) {
} else if (id == 'resolution') {
self.options.resolution = parseInt(data.checked[0].id, 10);
self.$player[0].options({resolution: self.options.resolution});
} else if (id == 'audioTrack') {
// ...
} else if (id == 'subtitles') {
// TODO...
toggleSubtitles();
} else if (id == 'timeline') {
self.options.timeline = data.checked[0].id;
@ -1132,7 +1158,14 @@ Ox.VideoAnnotationPanel = function(options, self) {
id: subtitle.id,
'in': subtitle['in'],
out: subtitle.out,
text: subtitle.value.replace(/\n/g, ' ').replace(/<br\/?>/g, '\n')
text: subtitle.value.replace(/\n/g, ' ').replace(/<br\/?>/g, '\n'),
tracks: (
subtitle.languages
? subtitle.languages
: [self.options.subtitleDefaultTrack]
).map(function(language) {
return Ox.getLanguageNameByCode(language);
})
};
}) : [];
}