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

implement 'show subtitles' functionality for players and timelines

Browse source
This commit is contained in:
rlx 2012-02-19 18:26:57 +00:00
parent b5a7b9b28d
commit 02b5b56be8
6 changed files with 83 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
View file

@ -15,7 +15,6 @@ Ox.BlockVideoTimeline = function(options, self) {
position: 0,
results: [],
showPointMarkers: false,
showSubtitles: false,
state: 'default',
subtitles: [],
width: 0
@ -58,7 +57,7 @@ Ox.BlockVideoTimeline = function(options, self) {
out: self.options.out,
results: self.options.results,
state: self.options.state,
subtitles: self.options.showSubtitles ? self.options.subtitles : [],
subtitles: self.options.subtitles,
timeline: self.options.getImageURL,
width: Math.round(self.options.duration),
type: 'editor'
@ -245,6 +244,11 @@ Ox.BlockVideoTimeline = function(options, self) {
updateTimelines();
}
function setSubtitles() {
self.$image.options({subtitles: self.options.subtitles});
updateTimelines();
}
function setWidth() {
self.lines = getLines();
setCSS();
@ -294,6 +298,8 @@ Ox.BlockVideoTimeline = function(options, self) {
setPositionMarker();
} else if (key == 'results') {
setResults();
} else if (key == 'subtitles') {
setSubtitles();
} else if (key == 'state') {
setState();
} else if (key == 'width') {

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

@ -173,6 +173,7 @@ Ox.LargeVideoTimeline = function(options, self) {
}
function setSubtitles() {
that.find('.OxSubtitle').remove();
self.$subtitles = [];
self.options.subtitles.forEach(function(subtitle, i) {
var found = self.options.find
@ -220,14 +221,13 @@ Ox.LargeVideoTimeline = function(options, self) {
self.setOption = function(key, value) {
if (key == 'find') {
that.find('.OxSubtitle').remove();
setSubtitles();
} else if (key == 'in' || key == 'out') {
setPointMarker(key);
} else if (key == 'position') {
setPosition();
} else if (key == 'subtitles') {
// ...
setSubtitles();
} else if (key == 'width') {
setWidth();
}

1
source/Ox.UI/js/Video/Ox.SmallVideoTimeline.js
View file

@ -22,6 +22,7 @@ Ox.SmallVideoTimeline = function(options, self) {
results: [],
showMilliseconds: 0,
state: 'default',
subtitles: [],
timeline: '',
type: 'player',
width: 256

47
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -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([
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},
{group: 'resolution', min: 1, max: 1, items: self.resolutions}
],
self.options.subtitles.length ? [
{},
{id: 'largeTimeline', title: 'Hide Large Timeline', disabled: true},
{id: 'subtitlesTimeline', title: 'Hide Subtitles on Large Timeline', disabled: true},
{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...'},
{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: '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 = [];

5
source/Ox.UI/js/Video/Ox.VideoPanel.js
View file

@ -136,6 +136,9 @@ Ox.VideoPanel = function(options, self) {
},
select: selectAnnotation,
subtitles: function(data) {
self.$timeline.options({
subtitles: data.subtitles ? self.options.subtitles : []
});
that.triggerEvent('subtitles', data);
},
volume: function(data) {
@ -154,7 +157,7 @@ Ox.VideoPanel = function(options, self) {
find: self.options.find,
getImageURL: self.options.getTimelineImageURL,
position: self.options.position,
subtitles: self.options.subtitles,
subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
videoId: self.options.videoId,
width: getTimelineWidth()
})

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

@ -1399,7 +1399,7 @@ Ox.VideoPlayer = function(options, self) {
position: self.options.position,
results: self.results,
showMilliseconds: self.options.showMilliseconds,
subtitles: self.options.subtitles,
subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
timeline: self.options.timeline,
type: 'player',
width: getTimelineWidth()
@ -1768,11 +1768,7 @@ Ox.VideoPlayer = function(options, self) {
if (title == 'Download') {
that.triggerEvent('download');
} else if (title == 'Subtitles') {
self.options.enableSubtitles = !self.options.enableSubtitles;
setSubtitle();
that.triggerEvent('subtitles', {
subtitles: self.options.enableSubtitles
});
toggleSubtitles();
} else {
resolution = parseInt(title);
if (resolution != self.options.resolution) {
@ -2342,12 +2338,26 @@ 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();
}
self.setOption = function(key, value) {
if (key == 'find') {
if (key == 'enableSubtitles') {
self.options.enableSubtitles = !self.options.enableSubtitles;
toggleSubtitles();
} if (key == 'find') {
setSubtitleText();
} else if (key == 'fullscreen') {
self.options.fullscreen = !self.options.fullscreen;