sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests 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
commit 02b5b56be8
6 changed files with 83 additions and 40 deletions
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, position: 0,
results: [], results: [],
showPointMarkers: false, showPointMarkers: false,
showSubtitles: false,
state: 'default', state: 'default',
subtitles: [], subtitles: [],
width: 0 width: 0
@ -58,7 +57,7 @@ Ox.BlockVideoTimeline = function(options, self) {
out: self.options.out, out: self.options.out,
results: self.options.results, results: self.options.results,
state: self.options.state, state: self.options.state,
subtitles: self.options.showSubtitles ? self.options.subtitles : [], subtitles: self.options.subtitles,
timeline: self.options.getImageURL, timeline: self.options.getImageURL,
width: Math.round(self.options.duration), width: Math.round(self.options.duration),
type: 'editor' type: 'editor'
@ -245,6 +244,11 @@ Ox.BlockVideoTimeline = function(options, self) {
updateTimelines(); updateTimelines();
} }
function setSubtitles() {
self.$image.options({subtitles: self.options.subtitles});
updateTimelines();
}
function setWidth() { function setWidth() {
self.lines = getLines(); self.lines = getLines();
setCSS(); setCSS();
@ -294,6 +298,8 @@ Ox.BlockVideoTimeline = function(options, self) {
setPositionMarker(); setPositionMarker();
} else if (key == 'results') { } else if (key == 'results') {
setResults(); setResults();
} else if (key == 'subtitles') {
setSubtitles();
} else if (key == 'state') { } else if (key == 'state') {
setState(); setState();
} else if (key == 'width') { } 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() { function setSubtitles() {
that.find('.OxSubtitle').remove();
self.$subtitles = []; self.$subtitles = [];
self.options.subtitles.forEach(function(subtitle, i) { self.options.subtitles.forEach(function(subtitle, i) {
var found = self.options.find var found = self.options.find
@ -220,14 +221,13 @@ Ox.LargeVideoTimeline = function(options, self) {
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (key == 'find') { if (key == 'find') {
that.find('.OxSubtitle').remove();
setSubtitles(); setSubtitles();
} else if (key == 'in' || key == 'out') { } else if (key == 'in' || key == 'out') {
setPointMarker(key); setPointMarker(key);
} else if (key == 'position') { } else if (key == 'position') {
setPosition(); setPosition();
} else if (key == 'subtitles') { } else if (key == 'subtitles') {
// ... setSubtitles();
} else if (key == 'width') { } else if (key == 'width') {
setWidth(); setWidth();
} }

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

@ -22,6 +22,7 @@ Ox.SmallVideoTimeline = function(options, self) {
results: [], results: [],
showMilliseconds: 0, showMilliseconds: 0,
state: 'default', state: 'default',
subtitles: [],
timeline: '', timeline: '',
type: 'player', type: 'player',
width: 256 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, //matches: self.options.matches,
out: self.options.out, out: self.options.out,
position: self.options.position, position: self.options.position,
subtitles: self.options.subtitles, subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
type: 'editor', type: 'editor',
width: self.sizes.timeline[0].width width: self.sizes.timeline[0].width
}) })
@ -332,9 +332,8 @@ Ox.VideoEditor = function(options, self) {
position: self.options.position, position: self.options.position,
results: find(self.options.find), results: find(self.options.find),
showPointMarkers: true, showPointMarkers: true,
showSubtitles: true,
state: self.options.selected ? 'selected' : 'default', state: self.options.selected ? 'selected' : 'default',
subtitles: self.options.subtitles, subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
videoId: self.options.videoId, videoId: self.options.videoId,
width: self.sizes.timeline[1].width width: self.sizes.timeline[1].width
}) })
@ -431,34 +430,39 @@ Ox.VideoEditor = function(options, self) {
}); });
self.$videoMenuButton = Ox.MenuButton({ self.$videoMenuButton = Ox.MenuButton({
items: Ox.merge([ items: Ox.merge(
[
{group: 'size', min: 1, max: 1, items: [ {group: 'size', min: 1, max: 1, items: [
{id: 'small', title: 'Small Player', checked: self.options.videoSize == 'small'}, {id: 'small', title: 'Small Player', checked: self.options.videoSize == 'small'},
{id: 'large', title: 'Large Player', checked: self.options.videoSize == 'large'} {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: 'subtitles', title: 'Show Subtitles', checked: self.options.enableSubtitles}
{id: 'subtitlesTimeline', title: 'Hide Subtitles on Large Timeline', disabled: true}, ] : [],
[
{}, {},
{id: 'downloadVideo', title: 'Download Video...', disabled: !self.options.enableDownload }, {id: 'downloadVideo', title: 'Download Video...', disabled: !self.options.enableDownload },
{id: 'downloadSelection', title: 'Download Selection...', 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 ? [ self.options.enableImport ? [
{}, {},
{id: 'importAnnotations', title: 'Import Annotations...'}, {id: 'importAnnotations', title: 'Import Annotations...'}
] : [], ] : [],
],
self.options.posterFrameControls ? [ self.options.posterFrameControls ? [
{}, {},
{id: 'gotoPosterFrame', title: 'Go to Poster Frame'}, {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'} {id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'}
]), ]
),
style: 'square', style: 'square',
title: 'set', title: 'set',
tooltip: 'Actions and Settings', tooltip: 'Actions and Settings',
@ -503,6 +507,8 @@ Ox.VideoEditor = function(options, self) {
self.$player[0].options({resolution: self.options.resolution}); self.$player[0].options({resolution: self.options.resolution});
} else if (id == 'size') { } else if (id == 'size') {
toggleSize(); toggleSize();
} else if (id == 'subtitles') {
toggleSubtitles();
} }
}, },
hide: function() { 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) { function updateWords(action) {
// action can be 'add' or 'remove' // action can be 'add' or 'remove'
var words = []; var words = [];

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

@ -136,6 +136,9 @@ Ox.VideoPanel = function(options, self) {
}, },
select: selectAnnotation, select: selectAnnotation,
subtitles: function(data) { subtitles: function(data) {
self.$timeline.options({
subtitles: data.subtitles ? self.options.subtitles : []
});
that.triggerEvent('subtitles', data); that.triggerEvent('subtitles', data);
}, },
volume: function(data) { volume: function(data) {
@ -154,7 +157,7 @@ Ox.VideoPanel = function(options, self) {
find: self.options.find, find: self.options.find,
getImageURL: self.options.getTimelineImageURL, getImageURL: self.options.getTimelineImageURL,
position: self.options.position, position: self.options.position,
subtitles: self.options.subtitles, subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
videoId: self.options.videoId, videoId: self.options.videoId,
width: getTimelineWidth() 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, position: self.options.position,
results: self.results, results: self.results,
showMilliseconds: self.options.showMilliseconds, showMilliseconds: self.options.showMilliseconds,
subtitles: self.options.subtitles, subtitles: self.options.enableSubtitles ? self.options.subtitles : [],
timeline: self.options.timeline, timeline: self.options.timeline,
type: 'player', type: 'player',
width: getTimelineWidth() width: getTimelineWidth()
@ -1768,11 +1768,7 @@ Ox.VideoPlayer = function(options, self) {
if (title == 'Download') { if (title == 'Download') {
that.triggerEvent('download'); that.triggerEvent('download');
} else if (title == 'Subtitles') { } else if (title == 'Subtitles') {
self.options.enableSubtitles = !self.options.enableSubtitles; toggleSubtitles();
setSubtitle();
that.triggerEvent('subtitles', {
subtitles: self.options.enableSubtitles
});
} else { } else {
resolution = parseInt(title); resolution = parseInt(title);
if (resolution != self.options.resolution) { 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() { function toggleVolume() {
self.$volume.toggle(); self.$volume.toggle();
} }
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (key == 'find') { if (key == 'enableSubtitles') {
self.options.enableSubtitles = !self.options.enableSubtitles;
toggleSubtitles();
} if (key == 'find') {
setSubtitleText(); setSubtitleText();
} else if (key == 'fullscreen') { } else if (key == 'fullscreen') {
self.options.fullscreen = !self.options.fullscreen; self.options.fullscreen = !self.options.fullscreen;