sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests 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

46
source/Ox.UI/js/Video/VideoPlayerPanel.js
View file

@ -8,6 +8,7 @@ Ox.VideoPlayerPanel <f> VideoPlayerPanel Object
annotationsrange <!> annotationsrange
annotationssize <!> annotationssize
annotationssort <!> annotationssort
audioTrack <s|''> Two-letter ISO 639-1 language code or track name
censored <!> censored
downloadvideo <!> downloadvideo
find <!> find
@ -40,6 +41,7 @@ Ox.VideoPlayerPanel = function(options, self) {
annotationsSize: 256,
annotationsSort: 'position',
annotationsTooltip: 'annotations',
audioTrack: '',
censored: [],
censoredIcon: '',
censoredTooltip: '',
@ -74,7 +76,9 @@ Ox.VideoPlayerPanel = function(options, self) {
showUsers: false,
smallTimelineURL: '',
subtitles: [],
subtitlesDefaultTrack: 'en',
subtitlesDefaultTrack: 'English',
subtitlesLayer: null,
subtitlesTrack: 'English',
timeline: '',
timelineTooltip: 'timeline',
video: '',
@ -194,6 +198,9 @@ Ox.VideoPlayerPanel = function(options, self) {
key_space: togglePaused
});
self.options.subtitles = options.subtitles !== void 0
? self.options.subtitles : parseSubtitles();
self.fullscreen = false;
self.results = [];
@ -201,6 +208,7 @@ Ox.VideoPlayerPanel = function(options, self) {
self.$video = Ox.VideoPlayer({
annotations: getAnnotations(),
audioTrack: self.options.audioTrack,
censored: self.options.censored,
censoredIcon: self.options.censoredIcon,
censoredTooltip: self.options.censoredTooltip,
@ -227,8 +235,9 @@ Ox.VideoPlayerPanel = function(options, self) {
position: self.options.position,
resolution: self.options.resolution,
scaleToFill: self.options.scaleToFill,
subtitles: self.options.subtitles,
subtitles: Ox.clone(self.options.subtitles, true),
subtitlesDefaultTrack: self.options.subtitlesDefaultTrack,
subtitlesTrack: self.options.subtitlesTrack,
timeline: self.options.smallTimelineURL,
video: self.options.video,
volume: self.options.volume,
@ -276,11 +285,14 @@ Ox.VideoPlayerPanel = function(options, self) {
},
select: selectAnnotation,
subtitles: function(data) {
self.$timeline.options({
subtitles: data.subtitles ? self.options.subtitles : []
});
self.options.enableSubtitles = data.subtitles;
self.$timeline.options({subtitles: getSubtitles()});
that.triggerEvent('subtitles', data);
},
subtitlestrack: function(data) {
self.options.subtitlesTrack = data.track;
self.$timeline.options({subtitles: getSubtitles()});
},
volume: function(data) {
that.triggerEvent('volume', data);
}
@ -301,7 +313,7 @@ Ox.VideoPlayerPanel = function(options, self) {
'in': self.options['in'],
out: self.options.out,
position: self.options.position,
subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
subtitles: getSubtitles(),
videoId: self.options.videoId, // fixme: not in defaults
type: self.options.timeline,
width: getTimelineWidth()
@ -463,6 +475,14 @@ Ox.VideoPlayerPanel = function(options, self) {
* self.options.annotationsSize - 1;
}
function getSubtitles() {
return self.options.enableSubtitles
? self.options.subtitles.filter(function(v) {
return Ox.contains(v.tracks, self.options.subtitlesTrack);
})
: [];
}
function getTimelineWidth() {
return self.options.width
- (self.options.showAnnotations && !self.fullscreen)
@ -485,6 +505,20 @@ Ox.VideoPlayerPanel = 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 resizeAnnotations(data) {
// called on annotations resize
self.options.annotationsSize = data.size;