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

video widgets: add support for multiple audio and subtitles tracks (first pass)

Browse source
This commit is contained in:
rlx 2014-07-24 19:14:34 +02:00 • committed by j
commit 00e6367ca9
5 changed files with 248 additions and 236 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -41,6 +41,7 @@ Ox.VideoAnnotationPanel <f> VideoAnnotationPanel Object
@*/
Ox.VideoAnnotationPanel = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
@ -88,6 +89,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
subtitles: [],
subtitlesDefaultTrack: 'en',
subtitlesLayer: null,
subtitlesTrack: 'en',
timeline: '',
timelines: [],
videoRatio: 16/9,
@ -281,7 +283,24 @@ Ox.VideoAnnotationPanel = function(options, self) {
}
});
self.options.subtitles = self.options.subtitles || getSubtitles();
self.options.subtitles = options.subtitles !== void 0
? self.options.subtitles : parseSubtitles();
self.subtitlesTracks = Ox.sort(Ox.unique(Ox.flatten(
self.options.subtitles.map(function(subtitle) {
return subtitle.tracks;
})
))).map(function(track) {
return {
id: track,
title: Ox._(track),
checked: self.options.enableSubtitles
&& track == self.options.subtitlesTrack
};
}).concat([{
id: '',
title: Ox._('None'),
checked: !self.options.enableSubtitles
}]);
if (Ox.isObject(self.options.video[0])) {
self.resolutions = Ox.sort(Ox.unique(
@ -302,7 +321,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
)).map(function(track) {
return {
id: track,
title: Ox._(Ox.getLanguageNameByCode(video.track)),
title: Ox._(track),
checked: self.options.audioTrack == track
};
});
@ -377,6 +396,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
sizeIsLarge: self.options.videoSize == 'large',
subtitles: Ox.clone(self.options.subtitles, true),
subtitlesDefaultTrack: self.options.subtitlesDefaultTrack,
subtitlesTrack: self.options.subtitlesTrack,
type: type,
video: type == 'play' ? self.options.video : self.options.getFrameURL,
volume: self.options.volume,
@ -591,8 +611,9 @@ Ox.VideoAnnotationPanel = function(options, self) {
]}
] : [],
self.options.subtitles.length ? [
// TODO...
{id: 'subtitles', title: Ox._('Show Subtitles'), checked: self.options.enableSubtitles}
{id: 'subtitlesTracks', title: Ox._('Subtitles'), items: [
{group: 'subtitlesTrack', min: 1, max: 1, items: self.subtitlesTracks}
]}
] : [],
[
{id: 'timelines', title: Ox._('Timeline'), items: [
@ -665,7 +686,8 @@ Ox.VideoAnnotationPanel = function(options, self) {
}
},
change: function(data) {
var id = data.id;
var enableSubtitles,
id = data.id;
if (id == 'size') {
toggleSize();
} else if (id == 'loop') {
@ -674,10 +696,16 @@ Ox.VideoAnnotationPanel = function(options, self) {
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();
self.options.audioTrack = data.checked[0].id;
self.$player[0].options({audioTrack: self.options.audioTrack});
} else if (id == 'subtitlesTrack') {
enableSubtitles = !!data.checked[0].id;
if (enableSubtitles != self.options.enableSubtitles) {
self.options.enableSubtitles = enableSubtitles;
that.triggerEvent('subtitles', {subtitles: enableSubtitles});
}
self.options.subtitlesTrack = data.checked[0].id;
setSubtitlesTrack();
} else if (id == 'timeline') {
self.options.timeline = data.checked[0].id;
updateTimelines();
@ -1151,23 +1179,11 @@ Ox.VideoAnnotationPanel = function(options, self) {
}
function getSubtitles() {
return self.options.subtitlesLayer ? self.options.layers.filter(function(layer) {
return layer.id == self.options.subtitlesLayer;
})[0].items.map(function(subtitle) {
return {
id: subtitle.id,
'in': subtitle['in'],
out: subtitle.out,
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);
})
};
}) : [];
return self.options.enableSubtitles
? self.options.subtitles.filter(function(v) {
return Ox.contains(v.tracks, self.options.subtitlesTrack);
})
: [];
}
function getWords() {
@ -1203,6 +1219,20 @@ Ox.VideoAnnotationPanel = function(options, self) {
setPosition(getNextPosition(type, direction));
}
function parseSubtitles() {
return self.options.subtitlesLayer ? self.options.layers.filter(function(layer) {
return layer.id == self.options.subtitlesLayer;
})[0].items.map(function(subtitle) {
return {
id: subtitle.id,
'in': subtitle['in'],
out: subtitle.out,
text: subtitle.value.replace(/\n/g, ' ').replace(/<br\/?>/g, '\n'),
tracks: subtitle.languages || [self.options.subtitlesDefaultTrack]
};
}) : [];
}
function playInToOut() {
self.$player[0].playInToOut();
}
@ -1364,6 +1394,35 @@ Ox.VideoAnnotationPanel = function(options, self) {
});
}
function setSubtitlesTrack() {
var enableSubtitles = self.options.subtitlesTrack != '',
subtitles,
toggleSubtitles = enableSubtitles != self.options.enableSubtitles;
self.options.enableSubtitles = enableSubtitles;
subtitles = getSubtitles();
if (toggleSubtitles) {
self.$player.forEach(function($player) {
$player.options({
enableSubtitles: self.options.enableSubtitles
});
});
that.triggerEvent('subtitles', {
subtitles: self.options.enableSubtitles
});
} else {
self.$player.forEach(function($player) {
$player.options({
subtitles: subtitles
});
});
}
self.$timeline.forEach(function($timeline) {
$timeline.options({
subtitles: subtitles
});
});
}
function showKeyboardShortcuts() {
var dialog = Ox.Dialog({
buttons: [
@ -1505,25 +1564,8 @@ Ox.VideoAnnotationPanel = 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 ? Ox.clone(self.options.subtitles, true) : []
});
});
that.triggerEvent('subtitles', {
subtitles: self.options.enableSubtitles
});
}
function updateSubtitles() {
self.options.subtitles = getSubtitles();
self.options.subtitles = parseSubtitles();
self.$player.forEach(function($player) {
$player.options({subtitles: Ox.clone(self.options.subtitles, true)});
});