refactoring editor to include annotations
This commit is contained in:
rlx
parent
08fd5b5870
commit
873951163c
3 changed files with 83 additions and 10 deletions
|
|
@ -291,7 +291,6 @@ input::-moz-focus-inner {
|
|||
textarea {
|
||||
//padding: 2px 4px 2px 4px;
|
||||
padding: 0 4px 0 4px;
|
||||
margin: -1px 0 0 0;
|
||||
resize: none;
|
||||
-moz-border-radius: 8px;
|
||||
-webkit-border-radius: 8px;
|
||||
|
|
@ -1285,11 +1284,11 @@ Video
|
|||
================================================================================
|
||||
*/
|
||||
|
||||
.OxEditor {
|
||||
.OxVideoEditor {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.OxEditor .OxVideoPlayer {
|
||||
.OxVideoEditor .OxVideoPlayer {
|
||||
position: absolute;
|
||||
margin: 4px;
|
||||
//background: red;
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@ Ox.uid = function() {
|
|||
}();
|
||||
|
||||
Ox.user = function() {
|
||||
// fixme: move to ox.ui
|
||||
$.get("http://www.maxmind.com/app/locate_my_ip", function(data) {
|
||||
var arr = data.split("tblProduct1"),
|
||||
re = />(.+?)<\/td>\n<td class=output align="center">\n(.*?)\n/,
|
||||
|
|
|
|||
|
|
@ -3002,6 +3002,7 @@ requires
|
|||
.appendTo(that.$element);
|
||||
|
||||
// fixme: is there a better way than this one?
|
||||
// should at least go into ox.ui.theme.foo.js
|
||||
if (self.options.type == 'textarea') {
|
||||
$.extend(self, {
|
||||
colors: Ox.theme() == 'classic' ?
|
||||
|
|
@ -10420,6 +10421,34 @@ requires
|
|||
============================================================================
|
||||
*/
|
||||
|
||||
Ox.AnnotationPanel = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
that = new Ox.Element('div', self)
|
||||
.defaults({
|
||||
id: '',
|
||||
title: '',
|
||||
type: 'text'
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
that.$element = new Ox.CollapsePanel({
|
||||
collapsed: false,
|
||||
size: 16,
|
||||
title: self.options.title
|
||||
})
|
||||
.bindEvent({
|
||||
toggle: togglePanel
|
||||
});
|
||||
|
||||
function togglePanel() {
|
||||
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
||||
Ox.BlockTimeline = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
|
|
@ -11217,16 +11246,19 @@ requires
|
|||
var self = self || {},
|
||||
that = new Ox.Element('div', self)
|
||||
.defaults({
|
||||
annotationsSize: 0,
|
||||
cuts: [],
|
||||
duration: 0,
|
||||
find: '',
|
||||
frameURL: function() {},
|
||||
height: 0,
|
||||
largeTimeline: true,
|
||||
layers: [],
|
||||
matches: [],
|
||||
points: [0, 0],
|
||||
position: 0,
|
||||
posterFrame: 0,
|
||||
showAnnotations: false,
|
||||
subtitles: [],
|
||||
videoHeight: 0,
|
||||
videoId: '',
|
||||
|
|
@ -11236,7 +11268,6 @@ requires
|
|||
width: 0
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass('OxEditor')
|
||||
.mousedown(function() {
|
||||
that.gainFocus();
|
||||
})
|
||||
|
|
@ -11326,6 +11357,9 @@ requires
|
|||
margin: 8,
|
||||
videoRatio: self.options.videoWidth / self.options.videoHeight
|
||||
});
|
||||
|
||||
self.$video = new Ox.Element().addClass('OxVideoEditor');
|
||||
|
||||
self.sizes = getSizes();
|
||||
|
||||
$.each(['play', 'in', 'out'], function(i, type) {
|
||||
|
|
@ -11357,7 +11391,7 @@ requires
|
|||
setPoint(type);
|
||||
}
|
||||
})
|
||||
.appendTo(that);
|
||||
.appendTo(self.$video);
|
||||
});
|
||||
|
||||
self.$timeline[0] = new Ox.LargeTimeline({
|
||||
|
|
@ -11378,7 +11412,7 @@ requires
|
|||
})
|
||||
.bindEvent('change', changeTimelineLarge)
|
||||
.bindEvent('changeEnd', changeTimelineLarge)
|
||||
.appendTo(that);
|
||||
.appendTo(self.$video);
|
||||
|
||||
self.$timeline[1] = new Ox.BlockTimeline({
|
||||
cuts: self.options.cuts,
|
||||
|
|
@ -11397,9 +11431,36 @@ requires
|
|||
top: self.sizes.timeline[1].top + 'px'
|
||||
})
|
||||
.bindEvent('change', changeTimelineSmall)
|
||||
.appendTo(that);
|
||||
.appendTo(self.$video);
|
||||
|
||||
// that.gainFocus();
|
||||
self.$annotations = new Ox.Element()
|
||||
.bindEvent({
|
||||
resize: resizeAnnotations,
|
||||
toggle: toggleAnnotations
|
||||
});
|
||||
self.$annotationPanel = [];
|
||||
|
||||
self.options.layers.forEach(function(layer, i) {
|
||||
self.$annotationPanel[i] = new Ox.AnnotationPanel(layer)
|
||||
.appendTo(self.$annotations);
|
||||
});
|
||||
|
||||
that.$element = new Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$video
|
||||
},
|
||||
{
|
||||
collapsed: !self.options.showAnnotations,
|
||||
collapsible: true,
|
||||
element: self.$annotations,
|
||||
resizable: true,
|
||||
resize: [192, 256, 320, 384],
|
||||
size: self.options.annotationsSize
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
});
|
||||
|
||||
function changePlayer(event, data) {
|
||||
self.options.position = data.position;
|
||||
|
|
@ -11464,7 +11525,9 @@ requires
|
|||
function getSizes(scrollbarIsVisible) {
|
||||
//Ox.print('getSizes', scrollbarIsVisible)
|
||||
var scrollbarWidth = oxui.scrollbarSize,
|
||||
contentWidth = self.options.width - (scrollbarIsVisible ? scrollbarWidth : 0),
|
||||
contentWidth = self.options.width -
|
||||
(self.options.showAnnotations * self.options.annotationsSize) - 1 -
|
||||
(scrollbarIsVisible ? scrollbarWidth : 0),
|
||||
height,
|
||||
lines,
|
||||
size = {
|
||||
|
|
@ -11518,7 +11581,7 @@ requires
|
|||
lines = Math.ceil(self.options.duration / size.timeline[1].width);
|
||||
height = getHeight();
|
||||
//Ox.print('lines', lines, getHeight(), self.options.height, (scrollbarIsVisible && getHeight() <= self.options.height) ? 'scroll' : 'auto')
|
||||
that.css({
|
||||
self.$video.css({
|
||||
overflowY: (scrollbarIsVisible && height <= self.options.height) ? 'scroll' : 'auto'
|
||||
});
|
||||
return (!scrollbarIsVisible && height > self.options.height) ? getSizes(true) : size;
|
||||
|
|
@ -11557,6 +11620,11 @@ requires
|
|||
self.$player[0].playInToOut();
|
||||
}
|
||||
|
||||
function resizeAnnotations(event, data) {
|
||||
self.options.annotationsSize = data;
|
||||
setSizes();
|
||||
}
|
||||
|
||||
function resizeEditor(event, data) {
|
||||
var width = data - 2 * margin + 100;
|
||||
resizeVideoPlayers(width);
|
||||
|
|
@ -11639,6 +11707,11 @@ requires
|
|||
});
|
||||
}
|
||||
|
||||
function toggleAnnotations(event, data) {
|
||||
self.options.showAnnotations = !data.collapsed;
|
||||
setSizes();
|
||||
}
|
||||
|
||||
function toggleMute() {
|
||||
self.$player[0].toggleMute();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue