From fcaa9ab7550a0a814e8b0d847ededddd1311f563 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Tue, 6 Aug 2013 09:56:50 +0000 Subject: [PATCH] video editor panel: handle loop, update menu --- source/Ox.UI/js/Video/VideoEditor.js | 72 ++++++++++++++++++---------- 1 file changed, 47 insertions(+), 25 deletions(-) diff --git a/source/Ox.UI/js/Video/VideoEditor.js b/source/Ox.UI/js/Video/VideoEditor.js index a0576c48..eb964d19 100644 --- a/source/Ox.UI/js/Video/VideoEditor.js +++ b/source/Ox.UI/js/Video/VideoEditor.js @@ -62,6 +62,7 @@ Ox.VideoEditor = function(options, self) { duration: 0, enableDownload: false, enableImport: false, + enableExport: false, enableSetPosterFrame: false, enableSubtitles: false, find: '', @@ -72,6 +73,7 @@ Ox.VideoEditor = function(options, self) { 'in': 0, height: 0, layers: [], + loop: false, muted: false, out: 0, paused: true, @@ -100,6 +102,9 @@ Ox.VideoEditor = function(options, self) { 'in': function() { setPoint('in', self.options['in']); }, + loop: function() { + self.$video.options({loop: self.options.loop}); + }, out: function() { setPoint('out', self.options.out); }, @@ -206,6 +211,7 @@ Ox.VideoEditor = function(options, self) { key_i: function() { setPoint('in', self.options.position); }, + key_l: toggleLoop, key_left: function() { movePositionBy(-1 / self.options.fps); }, @@ -324,6 +330,7 @@ Ox.VideoEditor = function(options, self) { height: self.sizes.player[i].height, id: 'player' + Ox.toTitleCase(type), 'in': self.options['in'], + loop: self.options.loop, muted: self.options.muted, out: self.options.out, paused: self.options.paused, @@ -349,6 +356,9 @@ Ox.VideoEditor = function(options, self) { that.triggerEvent('censored'); } }, type == 'play' ? { + loop: function(data) { + that.triggerEvent('loop', data); + }, muted: function(data) { that.triggerEvent('muted', data); }, @@ -476,6 +486,7 @@ Ox.VideoEditor = function(options, self) { [ {key: Ox.UI.symbols.space, action: Ox._('Play/Pause')}, {key: 'P', action: Ox._('Play In to Out')}, + {key: 'L', action: Ox._('Loop')}, {key: '0', action: Ox._('Mute/Unmute')}, {key: '-', action: Ox._('Turn Volume Down')}, {key: '+', action: Ox._('Turn Volume Up')}, @@ -536,7 +547,9 @@ Ox.VideoEditor = function(options, self) { items: [].concat( [ {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} ], self.options.subtitles.length ? [ @@ -554,20 +567,17 @@ Ox.VideoEditor = function(options, self) { }, 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: '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'} ] ), @@ -580,8 +590,16 @@ Ox.VideoEditor = function(options, self) { .bindEvent({ click: function(data) { var id = data.id; - if (id == 'keyboard') { - showKeyboardShortcuts(); + if (id == 'gotoPosterFrame') { + 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') { that.triggerEvent('downloadvideo'); } else if (id == 'downloadSelection') { @@ -596,25 +614,21 @@ Ox.VideoEditor = function(options, self) { }); } else if (id == 'importAnnotations') { that.triggerEvent('importannotations'); - } else if (id == 'gotoPosterFrame') { - 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 == 'exportAnnotations') { + // ... + } else if (id == 'keyboard') { + showKeyboardShortcuts(); } }, change: function(data) { 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.$player[0].options({resolution: self.options.resolution}); - } else if (id == 'size') { - toggleSize(); } else if (id == 'subtitles') { toggleSubtitles(); } 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() { self.$player[0].toggleMuted(); }