0x2620/oxjs
2
0
Fork 1
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
parent 0f6d70766f
commit 07fdb094dd
5 changed files with 328 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
source/Ox.UI/js/Video/AnnotationFolder.js
View file

@ -43,6 +43,7 @@ Ox.AnnotationFolder = function(options, self) {
item: '',
items: [],
keyboard: '',
languages: 'all',
out: 0,
position: 0,
range: 'all',
@ -413,6 +414,9 @@ Ox.AnnotationFolder = function(options, self) {
&& item['in'] <= self.options.position
&& item.out >= self.options.position
)
) && (
self.options.languages == 'all'
|| self.options.languages.indexOf(item.language) > -1
) && (
self.options.users == 'all'
|| self.options.users.indexOf(item.user) > -1

40
source/Ox.UI/js/Video/AnnotationPanel.js
View file

@ -91,6 +91,11 @@ Ox.AnnotationPanel = function(options, self) {
self.editing = false;
self.languages = getLanguages();
self.enabledLanguages = self.languages.map(function(language) {
return language.code;
});
if (self.options.showUsers) {
self.users = getUsers();
self.enabledUsers = self.users;
@ -170,6 +175,21 @@ Ox.AnnotationPanel = function(options, self) {
return folder;
}
function getLanguages() {
return Ox.sortBy(Ox.map(Ox.unique(Ox.flatten(
self.options.layers.map(function(layer) {
return layer.items.map(function(item) {
return item.languages;
});
})
)), function(language) {
return {
code: language,
name: Ox.getLanguageNameByCode(language)
};
}), 'name');
}
function getUsers() {
return Ox.sort(Ox.unique(Ox.flatten(
self.options.layers.map(function(layer) {
@ -419,6 +439,15 @@ Ox.AnnotationPanel = function(options, self) {
{id: 'text', title: Ox._('By Text'), checked: self.options.sort == 'text'}
]}
],
self.languages.length > 1 ? [
{},
{id: 'languages', title: Ox._('Show Languages'), disabled: true},
{group: 'languages', min: 1, max: -1, items: self.languages.map(function(language) {
return {id: language.code, title: Ox._(language.name), checked:
self.enabledLanguages.indexOf(language.code) > -1
};
})}
] : [],
self.options.showUsers && self.users.length ? [
{},
{id: 'users', title: Ox._('Show Users'), disabled: true},
@ -438,7 +467,14 @@ Ox.AnnotationPanel = function(options, self) {
.bindEvent({
change: function(data) {
var set = {};
if (data.id == 'users') {
if (data.id == 'languages') {
self.enabledLanguages = data.checked.map(function(checked) {
return checked.id;
});
self.$folder.forEach(function($folder) {
$folder.options({languages: self.enabledLanguages});
});
} else if (data.id == 'users') {
self.enabledUsers = data.checked.map(function(checked) {
return checked.id;
});
@ -529,6 +565,7 @@ Ox.AnnotationPanel = function(options, self) {
// called from addannotation callback
var i = Ox.getIndexById(self.options.layers, layer);
self.$folder[i].addItem(item);
self.languages = getLanguages();
self.users = getUsers();
if (self.enabledUsers != 'all' && self.enabledUsers.indexOf(item.user) == -1) {
self.enabledUsers.push(item.user);
@ -584,6 +621,7 @@ Ox.AnnotationPanel = function(options, self) {
} else {
// called from removeannotation callback
self.options.selected = '';
self.languages = getLanguages();
self.users = getUsers();
renderOptionsMenu();
renderEditMenu();

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);
})
};
}) : [];
}

325
source/Ox.UI/js/Video/VideoPlayer.js
View file

@ -8,6 +8,8 @@ Ox.VideoPlayer <f> Generic Video Player
in <n> In point (sec)
out <n> Out point (sec)
text <s> Text
tracks <[s]> Track names, like "English" or "Director's Commentary"
audioTrack <s|''> Two-letter ISO 639-1 language code or track name
censored <a|[]> Array of censored ranges
censoredIcon <s|''> 'Censored' icon
censoredTooltip <s|''> Tooltip for 'censored' icon
@ -68,14 +70,17 @@ Ox.VideoPlayer <f> Generic Video Player
in <n> In point (sec)
out <n> Out point (sec)
text <s> Text
tracks <[s]> Track names, like "English" or "Director's Commentary"
subtitlesDefaultTrack <s|'en'> Default subtitle language (ISO 639-1) or track name
subtitlesTrack <s|'en'> Subtitle language (ISO 639-1) or track name
timeline <s> Timeline image URL
timelineType <s|''> Current timeline type id
timelineTypes <[o]|[]> Array of timeline type objects (id and title)
title <s|''> Video title
type <s|'play'> 'play', 'in' or 'out'
video <s|[s]|o|''> Video URL
String or array of strings ([part1, part2, ...]) or object
({resolution: url, ...} or {resolution: [part1, part2, ...], ...})
video <s|[s]|[o]|''> Video URL
String or array of strings ([part1, part2, ...]) or array of objects
({duration, index, resolution, src, track})
volume <n|1> Volume (0-1)
width <n|256> Width in px
self <o> shared private variable
@ -111,6 +116,7 @@ Ox.VideoPlayer = function(options, self) {
var that = Ox.Element({}, self)
.defaults({
annotations: [],
audioTrack: '',
brightness: 1,
censored: [],
censoredIcon: '',
@ -160,6 +166,8 @@ Ox.VideoPlayer = function(options, self) {
showProgress: false,
sizeIsLarge: false,
subtitles: [],
subtitlesDefaultTrack: 'en',
subtitlesTrack: 'en',
timeline: '',
timelineType: '',
timelineTypes: [],
@ -171,10 +179,8 @@ Ox.VideoPlayer = function(options, self) {
})
.options(options || {})
.update({
enableSubtitles: function() {
self.options.enableSubtitles = !self.options.enableSubtitles;
toggleSubtitles();
},
audioTrack: setAudioTrack,
enableSubtitles: setSubtitleTrack,
find: setSubtitleText,
fullscreen: function() {
self.options.fullscreen = !self.options.fullscreen;
@ -215,6 +221,7 @@ Ox.VideoPlayer = function(options, self) {
loadSubtitles();
self.$settings && self.$settings.replaceWith(self.$settings = renderSettings());
},
subtitlesTrack: setSubtitlesTrack,
timeline: function() {
self.$timeline.options({imageURL: self.options.timeline});
},
@ -231,8 +238,6 @@ Ox.VideoPlayer = function(options, self) {
})
.addClass('OxVideoPlayer');
Ox.Log('Video', 'VIDEO PLAYER OPTIONS', self.options)
Ox.UI.$window.on({
resize: function() {
self.options.fullscreen && setSizes();
@ -250,6 +255,10 @@ Ox.VideoPlayer = function(options, self) {
self.options.annotations = self.options.subtitles;
}
if (Ox.isObject(self.options.video[0]) && 'index' in self.options.video[0]) {
self.options.video = Ox.sortBy(self.options.video, 'index');
}
setVideo();
if (self.options.playInToOut) {
@ -369,20 +378,20 @@ Ox.VideoPlayer = function(options, self) {
----------------------------------------------------------------------------
*/
if (
(!self.options.externalControls &&
(self.options.controlsTop.length || self.options.controlsBottom.length))
) {
if ((
!self.options.externalControls && (
self.options.controlsTop.length
|| self.options.controlsBottom.length
)
)) {
that.on({
mouseenter: function() {
showControls();
self.mouseHasLeft = false;
//Ox.Log('Video', 'MOUSE HAS ENTERED')
},
mouseleave: function() {
hideControls();
self.mouseHasLeft = true;
//Ox.Log('Video', 'MOUSE HAS LEFT')
}
});
}
@ -396,7 +405,9 @@ Ox.VideoPlayer = function(options, self) {
self.$videoContainer = Ox.Element()
.addClass('OxVideoContainer')
.css({
top: self.options.externalControls && self.options.controlsTop.length ? '16px' : 0
top: self.options.externalControls
&& self.options.controlsTop.length
? '16px' : 0
})
.appendTo(that)
@ -528,8 +539,8 @@ Ox.VideoPlayer = function(options, self) {
.hide()
.appendTo(self.$videoContainer);
if (!Ox.isEmpty(
Ox.isObject(self.options.video)
? self.options.video[self.options.resolution]
Ox.isObject(self.options.video[0])
? getVideo()
: self.options.video
)) {
showLoadingIcon();
@ -631,7 +642,9 @@ Ox.VideoPlayer = function(options, self) {
self['$controls' + titleCase] = Ox.Bar({
size: self.barHeight
})
.addClass('OxControls' + (self.options.externalControls ? '' : ' OxOnScreen'))
.addClass('OxControls' + (
self.options.externalControls ? '' : ' OxOnScreen'
))
.css({
opacity: self.options.externalControls ? 1 : 0
})
@ -679,7 +692,9 @@ Ox.VideoPlayer = function(options, self) {
self.$fullscreenButton = Ox.Button({
style: 'video',
tooltip: [Ox._('Enter Fullscreen'), Ox._('Exit Fullscreen')],
tooltip: [
Ox._('Enter Fullscreen'), Ox._('Exit Fullscreen')
],
type: 'image',
value: self.options.fullscreen ? 'shrink' : 'grow',
values: ['grow', 'shrink']
@ -696,7 +711,10 @@ Ox.VideoPlayer = function(options, self) {
self.$setButton = Ox.Button({
style: 'video',
title: 'goTo' + Ox.toTitleCase(self.options.type),
tooltip: Ox._('Go to ' + Ox.toTitleCase(self.options.type) + ' Point'),
tooltip: Ox._(
'Go to ' + Ox.toTitleCase(self.options.type)
+ ' Point'
),
type: 'image'
})
.bindEvent({
@ -801,9 +819,11 @@ Ox.VideoPlayer = function(options, self) {
self.positionWidth = getPositionWidth();
self.$position = Ox.Element({
tooltip: Ox._(self.options.type == 'play' ? 'Position'
tooltip: Ox._(
self.options.type == 'play' ? 'Position'
: self.options.type == 'in' ? 'In Point'
: 'Out Point')
: 'Out Point'
)
})
.addClass('OxPosition')
.css({
@ -893,7 +913,10 @@ Ox.VideoPlayer = function(options, self) {
self.$setButton = Ox.Button({
style: 'video',
title: 'set' + Ox.toTitleCase(self.options.type),
tooltip: Ox._('Set ' + Ox.toTitleCase(self.options.type) + ' Point'),
tooltip: Ox._(
'Set ' + Ox.toTitleCase(self.options.type)
+ ' Point'
),
type: 'image'
})
.bindEvent({
@ -1276,9 +1299,12 @@ Ox.VideoPlayer = function(options, self) {
self.posterMarkerCSS = getPosterMarkerCSS();
self.$video.css(self.videoCSS);
self.$poster && self.$poster.css(self.videoCSS);
self.$posterMarker && Ox.forEach(self.$posterMarker, function(marker, position) {
marker.css(self.posterMarkerCSS[position]);
});
self.$posterMarker && Ox.forEach(
self.$posterMarker,
function(marker, position) {
marker.css(self.posterMarkerCSS[position]);
}
);
self.out = self.options.playInToOut && self.out < self.$video.duration()
? self.out : self.$video.duration();
self.options.duration = self.out - self['in'];
@ -1482,7 +1508,8 @@ Ox.VideoPlayer = function(options, self) {
};
} else if (element == 'subtitle') {
css = {
bottom: (Math.floor(self.height / 16) + !!self.controlsBottomAreVisible * 16) + 'px',
bottom: (Math.floor(self.height / 16)
+ !!self.controlsBottomAreVisible * 16) + 'px',
width: self.width + 'px',
fontSize: Math.floor(self.height / 20) + 'px',
WebkitTextStroke: (self.height / 1000) + 'px rgb(0, 0, 0)'
@ -1508,19 +1535,19 @@ Ox.VideoPlayer = function(options, self) {
return css;
}
function getMenuSection(str) {
var match = str.match(/<span class="(.+?)">/);
return match ? match[1] : null;
}
function getPosition(e) {
// fixme: no offsetX in firefox???
if ($.browser.mozilla) {
//Ox.Log('Video', e, e.layerX - 56)
return Ox.limit(
(e.layerX - 48 - self.barHeight / 2) / self.timelineImageWidth * self.$video.duration(),
0, self.$video.duration()
);
} else {
/*Ox.Log('Video', e.offsetX, Ox.limit(
(e.offsetX - self.barHeight / 2) / self.timelineImageWidth * self.video.duration,
0, self.video.duration
))*/
return Ox.limit(
(e.offsetX - self.barHeight / 2) / self.timelineImageWidth * self.$video.duration(),
0, self.$video.duration()
@ -1560,7 +1587,6 @@ Ox.VideoPlayer = function(options, self) {
}
function getProgressImageURL() {
//Ox.Log('Video', '---', self.timelineImageWidth)
if (!self.timelineImageWidth) return;
var width = self.timelineImageWidth,
height = self.barHeight,
@ -1595,6 +1621,7 @@ Ox.VideoPlayer = function(options, self) {
if (
v['in'] <= self.options.position
&& v.out >= self.options.position
&& v.track == self.options.subtitlesTrack
) {
subtitle = v.text;
return false; // break
@ -1603,6 +1630,14 @@ Ox.VideoPlayer = function(options, self) {
return subtitle;
}
function getSubtitles() {
return self.options.enableSubtitles
? self.options.subtitles.map(function(v) {
return v.track == self.options.subtitlesTrack;
})
: [];
}
function getTimeline() {
var $timeline = Ox.SmallVideoTimeline({
//_offset: getTimelineLeft(),
@ -1634,7 +1669,6 @@ Ox.VideoPlayer = function(options, self) {
});
}
});
//Ox.Log('Video', '??', $timeline.find('.OxInterface'))
$timeline.children().css({
marginLeft: getTimelineLeft() + 'px'
});
@ -1668,8 +1702,8 @@ Ox.VideoPlayer = function(options, self) {
}
function getTitleWidth() {
return (self.options.fullscreen ? window.innerWidth : self.options.width) -
self.options.controlsTop.reduce(function(prev, curr) {
return (self.options.fullscreen ? window.innerWidth : self.options.width)
- self.options.controlsTop.reduce(function(prev, curr) {
return prev + (
curr == 'title' || curr == 'chapterTitle' || curr == 'space' ? 0
: Ox.startsWith(curr, 'space') ? parseInt(curr.substr(5))
@ -1678,6 +1712,13 @@ Ox.VideoPlayer = function(options, self) {
}, 0);
}
function getVideo() {
return self.options.video.filter(function(video) {
return video.audioTrack == self.options.audioTrack
&& video.resolution == self.options.resolution;
});
}
function getVideoCSS(videoWidth, videoHeight) {
// optional arguments allow for this function to be used for poster CSS
var playerWidth = self.width,
@ -1758,7 +1799,11 @@ Ox.VideoPlayer = function(options, self) {
//Ox.Log('Video', 'hideControls');
clearTimeout(self.interfaceTimeout);
self.interfaceTimeout = setTimeout(function() {
if (!self.exitFullscreen && !self.inputHasFocus && !self.mouseIsInControls) {
if (
!self.exitFullscreen
&& !self.inputHasFocus
&& !self.mouseIsInControls
) {
self.interfaceIsVisible = false;
self.controlsTopAreVisible = false;
self.controlsBottomAreVisible = false;
@ -1812,10 +1857,6 @@ Ox.VideoPlayer = function(options, self) {
return Math.abs(a - b) < 0.001;
}
function isResolution(str) {
return str.slice(0, -1).match(/^\d+$/) && str.slice(-1) == 'p';
}
function itemchange(data) {
var item = self.$video.options('items')[data.item];
Ox.Log('Video', 'ITEMCHANGE', item);
@ -1856,9 +1897,12 @@ Ox.VideoPlayer = function(options, self) {
self.posterMarkerCSS = getPosterMarkerCSS();
self.$video.css(self.videoCSS);
self.$poster && self.$poster.css(self.videoCSS);
self.$posterMarker && Ox.forEach(self.$posterMarker, function(marker, position) {
marker.css(self.posterMarkerCSS[position]);
});
self.$posterMarker && Ox.forEach(
self.$posterMarker,
function(marker, position) {
marker.css(self.posterMarkerCSS[position]);
}
);
self.out = self.options.playInToOut && self.out < self.$video.duration()
? self.out : self.$video.duration();
@ -1899,6 +1943,15 @@ Ox.VideoPlayer = function(options, self) {
}
function loadedsubtitles() {
if (!self.subtitlesTracks || Ox.isEmpty(self.subtitlesTracks)) {
self.subtitlesTracks = [{
code: self.options.subtitlesDefaultTrack,
name: Ox.getLanguageNameByCode(
self.options.subtitlesDefaultTrack
)
}];
}
self.subtitlesTracks.push({code: '', name: 'None'});
if (self.options.find) {
submitFindInput(self.options.find);
if (self.options.duration) {
@ -1917,6 +1970,21 @@ Ox.VideoPlayer = function(options, self) {
function loadSubtitles() {
if (self.options.subtitles) {
if (Ox.isArray(self.options.subtitles)) {
self.subtitlesTracks = Ox.sortBy(
Ox.unique(
self.options.subtitles.map(function(subtitle) {
return subtitle.track;
}).filter(function(track) {
return !!track;
})
).map(function(track) {
return {
code: track,
name: Ox.getLanguageNameByCode(track)
};
}),
'name'
);
loadedsubtitles();
} else {
if (self.options.subtitles.indexOf('\n') > -1) {
@ -1982,24 +2050,32 @@ Ox.VideoPlayer = function(options, self) {
}
function renderSettings() {
// fixme: use proper ids (as class of span)
var $settings = $('<div>')
.addClass('OxControls OxSettings')
.on({
click: function(e) {
var $target = $(e.target), resolution, title, type;
var $target = $(e.target), resolution, title, track, type;
self.$settings.hide();
if (!$target.is('.OxLine') && !$target.is('.OxSpace')) {
title = $(e.target).parent().children()[0].innerHTML;
if (title == Ox._('Download')) {
that.triggerEvent('download');
} else if (title == Ox._('Subtitles')) {
toggleSubtitles();
} else if (isResolution(title)) {
resolution = parseInt(title, 10);
} else if (getMenuSection(title) == 'resolution') {
resolution = parseInt(Ox.stripTags(title), 10);
if (resolution != self.options.resolution) {
self.options.resolution = resolution;
setResolution();
}
} else if (getMenuSection(title) == 'audioTrack') {
track = Ox.stripTags(title);
self.options.audioTrack = Ox.getLanguageCodeByName(track);
setAudioTrack();
} else if (getMenuSection(title) == 'subtitlesTrack') {
track = Ox.stripTags(title);
self.options.subtitlesTrack = track == 'None'
? '' : Ox.getLanguageCodeByName(track);
setSubtitleTrack();
} else {
type = self.options.timelineTypes[
Ox.indexOf(self.options.timelineTypes, function(type) {
@ -2037,33 +2113,49 @@ Ox.VideoPlayer = function(options, self) {
}
}),
items = [{
disabled: true,
title: Ox._('Resolution')
}].concat(
disabled: true,
title: Ox._('Resolution')
}].concat(
self.resolutions.map(function(resolution) {
return {
checked: resolution == self.options.resolution,
title: resolution + 'p'
title: '<span class="resolution">'
+ resolution + 'p</span>'
};
}),
self.audioTracks.length > 1
? [{}, {disabled: true, title: Ox._('Audio')}].concat(
self.audioTracks.map(function(track) {
return {
checked: track.code == self.options.audioTrack,
title: '<span class="audioTrack">'
+ Ox._(track.name) + '</span>'
};
})
)
: [],
self.options.subtitles.length
? [{}, {
checked: self.options.enableSubtitles,
title: Ox._('Subtitles')
}]
? [{}, {disabled: true, title: Ox._('Subtitles')}].concat(
self.subtitlesTracks.map(function(track) {
return {
checked: track.code == self.options.enableSubtitles
? self.options.subtitlesTrack : '',
title: '<span class="subtitlesTrack">'
+ Ox._(track.name) + '</span>'
};
})
)
: [],
self.options.timelineTypes.length
? [{}, {
disabled: true,
title: Ox._('Timeline')
}] : [],
self.options.timelineTypes.length
? self.options.timelineTypes.map(function(type) {
return {
checked: type.id == self.options.timelineType,
title: type.title
};
})
? [{}, {disabled: true, title: Ox._('Timeline')}].concat(
self.options.timelineTypes.map(function(type) {
return {
checked: type.id == self.options.timelineType,
title: '<span class="timeline">'
+ type.title + '</span>'
};
})
)
: [],
self.options.enableDownload
? [{}, {title: Ox._('Download')}]
@ -2130,6 +2222,10 @@ Ox.VideoPlayer = function(options, self) {
}
}
function setAudioTrack() {
// ...
}
function setCensored() {
var censored = getCensored();
if (censored != self.censored) {
@ -2152,15 +2248,17 @@ Ox.VideoPlayer = function(options, self) {
isEqual(self.options.position, self.options.posterFrame)
? marker.show() : marker.hide();
});
self.$pointMarker && Ox.forEach(self.$pointMarker, function(markers, point) {
Ox.forEach(markers, function(marker) {
//Ox.Log('Video', self.options.position, self.options[point], isEqual(self.options.position, self.options[point]))
// fixme: there's a bug in jquery and/or webkit
// on load, show() doesn't work
isEqual(self.options.position, self.options[point])
? marker.css({display: 'block'}) : marker.hide();
});
});
self.$pointMarker && Ox.forEach(
self.$pointMarker,
function(markers, point) {
Ox.forEach(markers, function(marker) {
// fixme: there's a bug in jquery and/or webkit
// on load, show() doesn't work
isEqual(self.options.position, self.options[point])
? marker.css({display: 'block'}) : marker.hide();
});
}
);
}
function setPoint() {
@ -2206,7 +2304,7 @@ Ox.VideoPlayer = function(options, self) {
}
self.loadedMetadata = false;
showLoadingIcon();
self.video = self.options.video[self.options.resolution];
self.video = getVideo();
self.$video.options({
items: self.video
});
@ -2230,8 +2328,10 @@ Ox.VideoPlayer = function(options, self) {
}
function setSizes(animate, callback) {
self.width = self.options.fullscreen ? window.innerWidth : self.options.width;
self.height = self.options.fullscreen ? window.innerHeight : self.options.height;
self.width = self.options.fullscreen
? window.innerWidth : self.options.width;
self.height = self.options.fullscreen
? window.innerHeight : self.options.height;
self.videoCSS = getVideoCSS();
self.iconSize = Ox.limit(Math.round(self.height / 10), 16, 32);
if (self.$timeline || self.$spaceBottom) {
@ -2293,24 +2393,59 @@ Ox.VideoPlayer = function(options, self) {
function setSubtitleText() {
self.$subtitle.html(
self.subtitle
? Ox.highlight(self.subtitle, self.options.find, 'OxHighlight', true)
.replace(/\n/g, '<br/>')
? Ox.highlight(
self.subtitle, self.options.find, 'OxHighlight', true
).replace(/\n/g, '<br/>')
: '&nbsp;<br/>&nbsp;'
// FIXME: weird bug, only in fullscreen, only in chrome
);
}
function setSubtitlesTrack() {
var enableSubtitles = !!self.options.subtitlesTrack;
setSubtitle();
self.$timeline && self.$timeline.options({
subtitles: getSubtitles()
});
if (enableSubtitles != self.options.enableSubtitles) {
self.options.enableSubtitles = enableSubtitles;
that.triggerEvent('subtitles', {
subtitles: self.options.enableSubtitles
});
}
}
function setTimelineType() {
that.triggerEvent('timeline', {timeline: self.options.timelineType});
}
function setVideo() {
if (Ox.isObject(self.options.video)) {
self.resolutions = Ox.sort(Object.keys(self.options.video));
if (!(self.options.resolution in self.options.video)) {
if (Ox.isObject(self.options.video[0])) {
self.audioTracks = Ox.sortBy(Ox.unique(
self.options.video.map(function(video) {
return {
code: video.track,
name: Ox.getLanguageNameByCode(video.track)
};
})
), 'name');
if (!Ox.contains(
self.audioTracks.map(function(track) {
return track.code;
}),
self.options.audioTrack
)) {
self.options.audioTrack = self.audioTracks[0].code;
}
self.resolutions = Ox.sort(Ox.unique(
self.options.video.map(function(video) {
return video.resolution;
})
));
if (!Ox.contains(self.resolutions, self.options.resolution)) {
self.options.resolution = self.resolutions[0];
}
self.video = self.options.video[self.options.resolution];
self.video = getVideo();
} else {
self.video = self.options.video;
}
@ -2578,7 +2713,10 @@ Ox.VideoPlayer = function(options, self) {
self.playInToOut = false;
} else {
hidePoster();
if (self.options.playInToOut && self.options.position > self.options.out - self.secondsPerFrame) {
if (
self.options.playInToOut
&& self.options.position > self.options.out - self.secondsPerFrame
) {
setPosition(self.options['in']);
}
self.$video.play();
@ -2639,17 +2777,6 @@ 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();
}

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

@ -74,6 +74,7 @@ Ox.VideoPlayerPanel = function(options, self) {
showUsers: false,
smallTimelineURL: '',
subtitles: [],
subtitlesDefaultTrack: 'en',
timeline: '',
timelineTooltip: 'timeline',
video: '',
@ -227,6 +228,7 @@ Ox.VideoPlayerPanel = function(options, self) {
resolution: self.options.resolution,
scaleToFill: self.options.scaleToFill,
subtitles: self.options.subtitles,
subtitlesDefaultTrack: self.options.subtitlesDefaultTrack,
timeline: self.options.smallTimelineURL,
video: self.options.video,
volume: self.options.volume,