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

video editor panel: handle loop, update menu

Browse source
This commit is contained in:
rlx 2013-08-06 09:56:50 +00:00
parent cbd2143714
commit fcaa9ab755
1 changed files with 47 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -62,6 +62,7 @@ Ox.VideoEditor = function(options, self) {
duration: 0, duration: 0,
enableDownload: false, enableDownload: false,
enableImport: false, enableImport: false,
enableExport: false,
enableSetPosterFrame: false, enableSetPosterFrame: false,
enableSubtitles: false, enableSubtitles: false,
find: '', find: '',
@ -72,6 +73,7 @@ Ox.VideoEditor = function(options, self) {
'in': 0, 'in': 0,
height: 0, height: 0,
layers: [], layers: [],
loop: false,
muted: false, muted: false,
out: 0, out: 0,
paused: true, paused: true,
@ -100,6 +102,9 @@ Ox.VideoEditor = function(options, self) {
'in': function() { 'in': function() {
setPoint('in', self.options['in']); setPoint('in', self.options['in']);
}, },
loop: function() {
self.$video.options({loop: self.options.loop});
},
out: function() { out: function() {
setPoint('out', self.options.out); setPoint('out', self.options.out);
}, },
@ -206,6 +211,7 @@ Ox.VideoEditor = function(options, self) {
key_i: function() { key_i: function() {
setPoint('in', self.options.position); setPoint('in', self.options.position);
}, },
key_l: toggleLoop,
key_left: function() { key_left: function() {
movePositionBy(-1 / self.options.fps); movePositionBy(-1 / self.options.fps);
}, },
@ -324,6 +330,7 @@ Ox.VideoEditor = function(options, self) {
height: self.sizes.player[i].height, height: self.sizes.player[i].height,
id: 'player' + Ox.toTitleCase(type), id: 'player' + Ox.toTitleCase(type),
'in': self.options['in'], 'in': self.options['in'],
loop: self.options.loop,
muted: self.options.muted, muted: self.options.muted,
out: self.options.out, out: self.options.out,
paused: self.options.paused, paused: self.options.paused,
@ -349,6 +356,9 @@ Ox.VideoEditor = function(options, self) {
that.triggerEvent('censored'); that.triggerEvent('censored');
} }
}, type == 'play' ? { }, type == 'play' ? {
loop: function(data) {
that.triggerEvent('loop', data);
},
muted: function(data) { muted: function(data) {
that.triggerEvent('muted', data); that.triggerEvent('muted', data);
}, },
@ -476,6 +486,7 @@ Ox.VideoEditor = function(options, self) {
[ [
{key: Ox.UI.symbols.space, action: Ox._('Play/Pause')}, {key: Ox.UI.symbols.space, action: Ox._('Play/Pause')},
{key: 'P', action: Ox._('Play In to Out')}, {key: 'P', action: Ox._('Play In to Out')},
{key: 'L', action: Ox._('Loop')},
{key: '0', action: Ox._('Mute/Unmute')}, {key: '0', action: Ox._('Mute/Unmute')},
{key: '-', action: Ox._('Turn Volume Down')}, {key: '-', action: Ox._('Turn Volume Down')},
{key: '+', action: Ox._('Turn Volume Up')}, {key: '+', action: Ox._('Turn Volume Up')},
@ -536,7 +547,9 @@ Ox.VideoEditor = function(options, self) {
items: [].concat( items: [].concat(
[ [
{id: 'size', title: Ox._('Large Player'), checked: self.options.videoSize == 'large'}, {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} {group: 'resolution', min: 1, max: 1, items: self.resolutions}
], ],
self.options.subtitles.length ? [ self.options.subtitles.length ? [
@ -554,20 +567,17 @@ Ox.VideoEditor = function(options, self) {
}, timeline); }, timeline);
} }
)}, )},
{},
{id: 'downloadVideo', title: Ox._('Download Video...'), disabled: !self.options.enableDownload },
{id: 'downloadSelection', title: Ox._('Download Selection...'), disabled: !self.options.enableDownload},
{id: 'embedSelection', title: Ox._('Embed Selection...')}
],
self.options.enableImport ? [
{},
{id: 'importAnnotations', title: Ox._('Import Annotations...')}
] : [],
[
{}, {},
{id: 'gotoPosterFrame', title: Ox._('Go to Poster Frame'), keyboard: 'shift p'}, {id: 'gotoPosterFrame', title: Ox._('Go to Poster Frame'), keyboard: 'shift p'},
{id: 'setPosterFrame', title: Ox._('Set Poster Frame'), disabled: !self.options.enableSetPosterFrame}, {id: 'setPosterFrame', title: Ox._('Set Poster Frame'), disabled: !self.options.enableSetPosterFrame},
{}, {},
{id: 'downloadVideo', title: Ox._('Download Video...'), disabled: !self.options.enableDownload },
{id: 'downloadSelection', title: Ox._('Download Selection...'), disabled: !self.options.enableDownload},
{id: 'embedSelection', title: Ox._('Embed Selection...')},
{},
{id: 'importAnnotations', title: Ox._('Import Annotations...'), disabled: !self.options.enableImport},
{id: 'exportAnnotations', title: Ox._('Export Annotations...'), disabled: !self.options.enableExport},
{},
{id: 'keyboard', title: Ox._('Keyboard Shortcuts...'), keyboard: 'h'} {id: 'keyboard', title: Ox._('Keyboard Shortcuts...'), keyboard: 'h'}
] ]
), ),
@ -580,8 +590,16 @@ Ox.VideoEditor = function(options, self) {
.bindEvent({ .bindEvent({
click: function(data) { click: function(data) {
var id = data.id; var id = data.id;
if (id == 'keyboard') { if (id == 'gotoPosterFrame') {
showKeyboardShortcuts(); setPosition(self.options.posterFrame);
} else if (id == 'setPosterFrame') {
self.options.posterFrame = self.options.position;
self.$player.forEach(function($player) {
$player.options('posterFrame', self.options.posterFrame);
});
that.triggerEvent('posterframe', {
position: self.options.posterFrame
});
} else if (id == 'downloadVideo') { } else if (id == 'downloadVideo') {
that.triggerEvent('downloadvideo'); that.triggerEvent('downloadvideo');
} else if (id == 'downloadSelection') { } else if (id == 'downloadSelection') {
@ -596,25 +614,21 @@ Ox.VideoEditor = function(options, self) {
}); });
} else if (id == 'importAnnotations') { } else if (id == 'importAnnotations') {
that.triggerEvent('importannotations'); that.triggerEvent('importannotations');
} else if (id == 'gotoPosterFrame') { } else if (id == 'exportAnnotations') {
setPosition(self.options.posterFrame); // ...
} else if (id == 'setPosterFrame') { } else if (id == 'keyboard') {
self.options.posterFrame = self.options.position; showKeyboardShortcuts();
self.$player.forEach(function($player) {
$player.options('posterFrame', self.options.posterFrame);
});
that.triggerEvent('posterframe', {
position: self.options.posterFrame
});
} }
}, },
change: function(data) { change: function(data) {
var id = data.id; var id = data.id;
if (id == 'resolution') { if (id == 'size') {
toggleSize();
} else if (id == 'loop') {
toggleLoop();
} else if (id == 'resolution') {
self.options.resolution = parseInt(data.checked[0].id, 10); self.options.resolution = parseInt(data.checked[0].id, 10);
self.$player[0].options({resolution: self.options.resolution}); self.$player[0].options({resolution: self.options.resolution});
} else if (id == 'size') {
toggleSize();
} else if (id == 'subtitles') { } else if (id == 'subtitles') {
toggleSubtitles(); toggleSubtitles();
} else if (id == 'timeline') { } else if (id == 'timeline') {
@ -1360,6 +1374,14 @@ Ox.VideoEditor = function(options, self) {
}); });
} }
function toggleLoop() {
self.options.loop = !self.options.loop;
self.$menuButton[
self.options.loop ? 'checkItem' : 'uncheckItem'
]('loop');
self.$player[0].toggleLoop();
}
function toggleMuted() { function toggleMuted() {
self.$player[0].toggleMuted(); self.$player[0].toggleMuted();
} }