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

self.setOption ~> that.update

Browse source
This commit is contained in:
j 2012-05-28 19:35:41 +00:00
commit 005d50c389
56 changed files with 919 additions and 933 deletions
Download patch file Download diff file Expand all files Collapse all files

101
source/Ox.UI/js/Video/Ox.AnnotationFolder.js
View file

@ -39,7 +39,56 @@ Ox.AnnotationFolder = function(options, self) {
widgetSize: 256,
width: 0
})
.options(options || {});
.options(options || {})
.update(function(key, value) {
if (key == 'highlight') {
self.$annotations.options({highlight: value});
}
if (['in', 'out'].indexOf(key) > -1 && self.editing) {
var item = Ox.getObjectById(self.options.items, self.options.selected);
item[key] = value;
item.duration = self.options.out - self.options['in'];
self.points = getPoints();
}
if (key == 'in') {
//fixme: array editable should support item updates while editing
self.options.range == 'selection' && updateAnnotations();
} else if (key == 'out') {
self.options.range == 'selection' && updateAnnotations();
} else if (key == 'position') {
if (self.options.range == 'position') {
crossesPoint() && updateAnnotations();
self.position = self.options.position;
}
} else if (key == 'range') {
updateAnnotations();
} else if (key == 'selected') {
if (value === '') {
self.editing = false;
}
if (value && self.options.collapsed) {
self.$panel.options({animate: false});
self.$panel.options({collapsed: false});
self.$panel.options({animate: true});
}
self.$annotations.options({selected: value});
} else if (key == 'sort') {
self.sort = getSort();
self.$annotations.options({sort: self.sort});
showWarnings();
} else if (key == 'users') {
updateAnnotations();
} else if (key == 'width') {
if (self.widget) {
self.$outer.options({width: self.options.width});
self.$inner.options({width: self.options.width});
self.$widget.options({width: self.options.width});
}
self.$annotations.options({
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width
});
}
});
if (self.options.selected) {
self.options.collapsed = false;
@ -511,56 +560,6 @@ Ox.AnnotationFolder = function(options, self) {
}
}
self.setOption = function(key, value) {
if (key == 'highlight') {
self.$annotations.options({highlight: value});
}
if (['in', 'out'].indexOf(key) > -1 && self.editing) {
var item = Ox.getObjectById(self.options.items, self.options.selected);
item[key] = value;
item.duration = self.options.out - self.options['in'];
self.points = getPoints();
}
if (key == 'in') {
//fixme: array editable should support item updates while editing
self.options.range == 'selection' && updateAnnotations();
} else if (key == 'out') {
self.options.range == 'selection' && updateAnnotations();
} else if (key == 'position') {
if (self.options.range == 'position') {
crossesPoint() && updateAnnotations();
self.position = self.options.position;
}
} else if (key == 'range') {
updateAnnotations();
} else if (key == 'selected') {
if (value === '') {
self.editing = false;
}
if (value && self.options.collapsed) {
self.$panel.options({animate: false});
self.$panel.options({collapsed: false});
self.$panel.options({animate: true});
}
self.$annotations.options({selected: value});
} else if (key == 'sort') {
self.sort = getSort();
self.$annotations.options({sort: self.sort});
showWarnings();
} else if (key == 'users') {
updateAnnotations();
} else if (key == 'width') {
if (self.widget) {
self.$outer.options({width: self.options.width});
self.$inner.options({width: self.options.width});
self.$widget.options({width: self.options.width});
}
self.$annotations.options({
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width
});
}
};
/*@
addItem <f> addItem
@*/

49
source/Ox.UI/js/Video/Ox.AnnotationPanel.js
View file

@ -46,6 +46,30 @@ Ox.AnnotationPanel = function(options, self) {
width: 256
})
.options(options || {})
.update(function(key, value) {
if (key == 'highlight') {
self.$folder.forEach(function($folder) {
$folder.options({highlight: value});
});
} else if (['in', 'out', 'position'].indexOf(key) > -1) {
self.$folder.forEach(function($folder) {
$folder.options(key, value);
});
} else if (key == 'selected') {
self.options.editable && updateEditMenu();
if (value) {
getFolder(value).options({selected: value});
} else {
self.$folder.forEach(function($folder) {
$folder.options({selected: ''});
});
}
} else if (key == 'width') {
self.$folder.forEach(function($folder) {
$folder.options({width: self.options.width - Ox.UI.SCROLLBAR_SIZE});
});
}
})
.addClass('OxAnnotationPanel');
self.editing = false;
@ -458,31 +482,6 @@ Ox.AnnotationPanel = function(options, self) {
self.$editMenuButton[action]('delete');
}
self.setOption = function(key, value) {
if (key == 'highlight') {
self.$folder.forEach(function($folder) {
$folder.options({highlight: value});
});
} else if (['in', 'out', 'position'].indexOf(key) > -1) {
self.$folder.forEach(function($folder) {
$folder.options(key, value);
});
} else if (key == 'selected') {
self.options.editable && updateEditMenu();
if (value) {
getFolder(value).options({selected: value});
} else {
self.$folder.forEach(function($folder) {
$folder.options({selected: ''});
});
}
} else if (key == 'width') {
self.$folder.forEach(function($folder) {
$folder.options({width: self.options.width - Ox.UI.SCROLLBAR_SIZE});
});
}
};
/*@
addItem <f> add item
(layer, item) -> <o> add item to layer

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

@ -25,6 +25,19 @@ Ox.BlockVideoTimeline = function(options, self) {
width: 0
})
.options(options || {})
.update({
'in': function() {
self.options.showPointMarkers && setPoint('in');
},
out: function() {
self.options.showPointMarkers && setPoint('out');
},
position: setPositionMarker,
results: setResults,
subtitles: setSubtitles,
state: setState,
width: setWidth
})
.addClass('OxBlockVideoTimeline')
.css({
position: 'absolute'
@ -299,22 +312,6 @@ Ox.BlockVideoTimeline = function(options, self) {
});
}
self.setOption = function(key, value) {
if (key == 'in' || key == 'out') {
self.options.showPointMarkers && setPoint(key);
} else if (key == 'position') {
setPositionMarker();
} else if (key == 'results') {
setResults();
} else if (key == 'subtitles') {
setSubtitles();
} else if (key == 'state') {
setState();
} else if (key == 'width') {
setWidth();
}
};
return that;
};

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

@ -27,6 +27,18 @@ Ox.LargeVideoTimeline = function(options, self) {
width: 0
})
.options(options || {})
.update({
find: setSubtitles,
'in': function() {
setPointMarker('in');
},
out: function() {
setPointMarker('out');
},
position: setPosition,
subtitles: setSubtitles,
width: setWidth
})
.addClass('OxLargeVideoTimeline')
.mouseleave(mouseleave)
.mousemove(mousemove)
@ -216,20 +228,6 @@ Ox.LargeVideoTimeline = function(options, self) {
}
}
self.setOption = function(key, value) {
if (key == 'find') {
setSubtitles();
} else if (key == 'in' || key == 'out') {
setPointMarker(key);
} else if (key == 'position') {
setPosition();
} else if (key == 'subtitles') {
setSubtitles();
} else if (key == 'width') {
setWidth();
}
};
return that;
};

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

@ -27,6 +27,39 @@ Ox.SmallVideoTimeline = function(options, self) {
width: 256
})
.options(options || {})
.update({
duration: function() {
self.$image.options({duration: self.options.duration});
},
'in': function() {
self.$image.options({'in': self.options['in']});
self.options.mode == 'editor' && setPointMarker('in');
},
out: function() {
self.$image.options({out: self.options.out});
self.options.mode == 'editor' && setPointMarker('out');
},
paused: function() {
self.$positionMarker[
self.options.paused ? 'addClass' : 'removeClass'
]('OxPaused');
},
position: function() {
setPositionMarker();
},
results: function() {
self.$image.options({results: self.options.results});
},
state: function() {
self.$image.options({state: self.options.state});
},
subtitles: function() {
self.$image.options({subtitles: self.options.subtitles});
},
width: function() {
setWidth();
}
})
.addClass('OxSmallVideoTimeline')
.css(Ox.extend({
width: self.options.width + 'px'
@ -214,32 +247,6 @@ Ox.SmallVideoTimeline = function(options, self) {
}
}
self.setOption = function(key, value) {
if (key == 'duration') {
self.$image.options({duration: value});
} else if (key == 'in') {
self.$image.options({'in': value});
self.options.mode == 'editor' && setPointMarker('in');
} else if (key == 'out') {
self.$image.options({out: value});
self.options.mode == 'editor' && setPointMarker('out');
} else if (key == 'paused') {
self.$positionMarker[
self.options.paused ? 'addClass' : 'removeClass'
]('OxPaused');
} else if (key == 'position') {
setPositionMarker();
} else if (key == 'results') {
self.$image.options({results: value});
} else if (key == 'state') {
self.$image.options({state: value});
} else if (key == 'subtitles') {
self.$image.options({subtitles: value});
} else if (key == 'width') {
setWidth();
}
};
return that;
};

78
source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js
View file

@ -23,6 +23,50 @@ Ox.SmallVideoTimelineImage = function(options, self) {
width: 256
})
.options(options || {})
.update({
'in': function() {
self.$selection.attr({
src: getImageURL('selection')
});
},
out: function() {
self.$selection.attr({
src: getImageURL('selection')
});
},
results: function() {
self.$results.attr({
src: getImageURL('results')
});
},
selection: function() {
self.$selection.attr({
src: getImageURL('selection')
});
},
subtitles: function() {
self.$subtitles.attr({
src: getImageURL('subtitles')
});
},
state: function() {
self.$selection.attr({
src: getImageURL('selection')
});
},
width: function() {
var width = self.options.width;
that.css({width: width + 'px'});
self.$results
.attr({src: getImageURL('results')})
.css({width: width + 'px'});
self.$selection
.attr({src: getImageURL('selection')})
.css({width: width + 'px'});
self.$subtitles.css({width: width + 'px'});
self.$timeline.css({width: width + 'px'});
}
})
.css({
position: 'absolute',
width: self.options.width + 'px'
@ -199,40 +243,6 @@ Ox.SmallVideoTimelineImage = function(options, self) {
}
self.setOption = function(key, value) {
if (key == 'in' || key == 'out') {
self.$selection.attr({
src: getImageURL('selection')
});
} else if (key == 'results') {
self.$results.attr({
src: getImageURL('results')
});
} else if (key == 'selection') {
self.$selection.attr({
src: getImageURL('selection')
});
} else if (key == 'subtitles') {
self.$subtitles.attr({
src: getImageURL('subtitles')
});
} else if (key == 'state') {
self.$selection.attr({
src: getImageURL('selection')
});
} else if (key == 'width') {
that.css({width: value + 'px'});
self.$results
.attr({src: getImageURL('results')})
.css({width: value + 'px'});
self.$selection
.attr({src: getImageURL('selection')})
.css({width: value + 'px'});
self.$subtitles.css({width: value + 'px'});
self.$timeline.css({width: value + 'px'});
}
};
return that;
};

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

@ -65,6 +65,34 @@ Ox.VideoEditor = function(options, self) {
width: 0
})
.options(options || {})
.update({
height: setSizes,
'in': function() {
setPoint('in', self.options['in']);
},
out: function() {
setPoint('out', self.options.out);
},
paused: function() {
self.$player[0].options({
paused: self.options.paused
});
},
position: function() {
setPosition(self.options.position);
},
selected: function() {
selectAnnotation(
self.options.selected
? Ox.getObjectById(self.annotations, self.options.selected)
: {id: ''}
);
},
showAnnotations: function() {
that.$element.toggle(1);
},
width: setSizes
})
.bindEvent({
key_0: toggleMuted,
key_alt_left: function() {
@ -1389,26 +1417,6 @@ Ox.VideoEditor = function(options, self) {
});
}
self.setOption = function(key, value) {
if (key == 'height' || key == 'width') {
setSizes();
} else if (key == 'in' || key == 'out') {
setPoint(key, value);
} else if (key == 'paused') {
self.$player[0].options({
paused: value
});
} else if (key == 'position') {
setPosition(value);
} else if (key == 'selected') {
selectAnnotation(
value ? Ox.getObjectById(self.annotations, value) : {id: ''}
);
} else if (key == 'showAnnotations') {
that.$element.toggle(1);
}
};
/*@
addAnnotation <f> add annotation
(layer, item) -> <o> add annotation to layer

21
source/Ox.UI/js/Video/Ox.VideoEditorPlayer.js
View file

@ -27,6 +27,13 @@ Ox.VideoEditorPlayer = function(options, self) {
width: 0
})
.options(options || {})
.update({
height: setHeight,
points: setMarkers,
position: setPosition,
posterFrame: setMarkers,
width: setWidth
})
.addClass('OxVideoPlayer')
.css({
height: (self.options.height + 16) + 'px',
@ -359,20 +366,6 @@ Ox.VideoEditorPlayer = function(options, self) {
});
}
self.setOption = function(key, value) {
if (key == 'height') {
setHeight();
} else if (key == 'points') {
setMarkers();
} else if (key == 'position') {
setPosition();
} else if (key == 'posterFrame') {
setMarkers();
} else if (key == 'width') {
setWidth();
}
}
/*@
mute <f> mute
@*/

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

@ -59,6 +59,41 @@ Ox.VideoPanel = function(options, self) {
width: 0
})
.options(options || {})
.update({
fullscreen: function() {
self.$video.options({fullscreen: self.options.value});
},
height: function() {
self.$video.options({height: getPlayerHeight()});
},
'in': function() {
setPoint('in', self.options['in']);
},
out: function() {
setPoint('out', self.options.out);
},
paused: function() {
self.$video.options({paused: self.options.paused});
},
position: function() {
self.$video.options({position: self.options.position});
self.$timeline.options({position: self.options.position});
self.$annotationPanel.options({position: self.options.position});
},
selected: function() {
self.$annotationPanel.options({selected: self.options.selected});
},
showAnnotations: function() {
that.$element.toggle(1);
},
showTimeline: function() {
self.$videoPanel.toggle(1);
},
width: function() {
self.$video.options({width: getPlayerWidth()});
self.$timeline.options({width: getTimelineWidth()});
}
})
.css({
height: self.options.height + 'px',
width: self.options.width + 'px'
@ -448,31 +483,6 @@ Ox.VideoPanel = function(options, self) {
});
}
self.setOption = function(key, value) {
if (key == 'fullscreen') {
self.$video.options({fullscreen: value});
} else if (key == 'height') {
self.$video.options({height: getPlayerHeight()});
} else if (key == 'in' || key == 'out') {
setPoint(key, value);
} else if (key == 'paused') {
self.$video.options({paused: value});
} else if (key == 'position') {
self.$video.options({position: value});
self.$timeline.options({position: value});
self.$annotationPanel.options({position: value});
} else if (key == 'selected') {
self.$annotationPanel.options({selected: value});
} else if (key == 'showAnnotations') {
that.$element.toggle(1);
} else if (key == 'showTimeline') {
self.$videoPanel.toggle(1);
} else if (key == 'width') {
self.$video.options({width: getPlayerWidth()});
self.$timeline.options({width: getTimelineWidth()});
}
}
// fixme: can these be removed?
/*@

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

@ -142,6 +142,52 @@ Ox.VideoPlayer = function(options, self) {
width: 256
})
.options(options || {})
.update({
enableSubtitles: function() {
self.options.enableSubtitles = !self.options.enableSubtitles;
toggleSubtitles();
},
find: setSubtitleText,
fullscreen: function() {
self.options.fullscreen = !self.options.fullscreen;
toggleFullscreen();
},
height: setSizes,
'in': function() {
self.options.paused && setMarkers();
self.$timeline && self.$timeline.options('in', self.options['in']);
},
out: function() {
self.options.paused && setMarkers();
self.$timeline && self.$timeline.options('out', self.options.out);
},
muted: function() {
self.options.muted = !self.options.muted;
toggleMuted();
},
paused: function() {
self.options.paused = !self.options.paused;
togglePaused();
},
position: function() {
setPosition(self.options.position);
},
posterFrame: function() {
self.options.paused && setMarkers();
},
resolution: setResolution,
scaleToFill: function() {
self.options.scaleToFill = !self.options.scaleToFill;
toggleScale();
},
sizeIsLarge: function() {
self.$sizeButton.toggle();
},
volume: function() {
setVolume(self.options.volume);
},
width: setSizes
})
.addClass('OxVideoPlayer');
Ox.Log('VIDEO', 'VIDEO PLAYER OPTIONS', self.options)
@ -2356,42 +2402,6 @@ Ox.VideoPlayer = function(options, self) {
self.$volume.toggle();
}
self.setOption = function(key, value) {
if (key == 'enableSubtitles') {
self.options.enableSubtitles = !self.options.enableSubtitles;
toggleSubtitles();
} if (key == 'find') {
setSubtitleText();
} else if (key == 'fullscreen') {
self.options.fullscreen = !self.options.fullscreen;
toggleFullscreen();
} else if (key == 'height' || key == 'width') {
setSizes();
} else if (key == 'in' || key == 'out') {
self.options.paused && setMarkers();
self.$timeline && self.$timeline.options(key, value);
} else if (key == 'muted') {
self.options.muted = !self.options.muted;
toggleMuted();
} else if (key == 'paused') {
self.options.paused = !self.options.paused;
togglePaused();
} else if (key == 'position') {
setPosition(value);
} else if (key == 'posterFrame') {
self.options.paused && setMarkers();
} else if (key == 'resolution') {
setResolution();
} else if (key == 'scaleToFill') {
self.options.scaleToFill = !self.options.scaleToFill;
toggleScale();
} else if (key == 'sizeIsLarge') {
self.$sizeButton.toggle();
} else if (key == 'volume') {
setVolume(value);
}
};
/*@
changeVolume <f> change volume
(num) -> <o> change volume

31
source/Ox.UI/js/Video/Ox.VideoPreview.js
View file

@ -22,6 +22,22 @@ Ox.VideoPreview = function(options, self) {
width: 256
})
.options(options || {})
.update({
height: function() {
that.css({height: self.options.height + 'px'});
self.$frame.css(getFrameCSS());
},
position: function() {
self.$frame.attr({src: self.options.getFrame(self.options.position)});
},
width: function() {
that.css({width: self.options.width + 'px'});
stopLoading();
self.$frame.attr({src: self.options.getFrame()})
.css(getFrameCSS());
self.$timeline.css({width: self.options.width + 'px'});
}
})
.addClass('OxVideoPreview')
.css({
width: self.options.width + 'px',
@ -149,21 +165,6 @@ Ox.VideoPreview = function(options, self) {
self.timeout && clearTimeout(self.timeout);
}
self.setOption = function(key, value) {
if (key == 'height') {
that.css({height: value + 'px'});
self.$frame.css(getFrameCSS());
} else if (key == 'position') {
self.$frame.attr({src: self.options.getFrame(value)});
} else if (key == 'width') {
that.css({width: value + 'px'});
stopLoading();
self.$frame.attr({src: self.options.getFrame()})
.css(getFrameCSS());
self.$timeline.css({width: value + 'px'});
}
}
return that;
};

35
source/Ox.UI/js/Video/Ox.VideoTimelinePanel.js
View file

@ -47,6 +47,25 @@ Ox.VideoTimelinePanel = function(options, self) {
width: 0
})
.options(options || {})
.update({
height: function() {
self.$player.options({height: self.options.height});
},
paused: function() {
self.$player.options({
paused: self.options.paused
});
},
position: function() {
setPosition(self.options.position);
},
showAnnotations: function() {
that.$element.toggle(1);
},
width: function() {
self.$player.options({width: getPlayerWidth()});
}
})
.css({
height: self.options.height + 'px',
width: self.options.width + 'px'
@ -268,22 +287,6 @@ Ox.VideoTimelinePanel = function(options, self) {
});
}
self.setOption = function(key, value) {
if (key == 'height') {
self.$player.options({height: value});
} else if (key == 'paused') {
self.$player.options({
paused: value
});
} else if (key == 'position') {
setPosition(value);
} else if (key == 'showAnnotations') {
that.$element.toggle(1);
} else if (key == 'width') {
self.$player.options({width: getPlayerWidth()});
}
};
/*@
toggleAnnotations <f> toggle annotations
() -> <o> toggle annotations

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

@ -37,7 +37,16 @@ Ox.VideoTimelinePlayer = function(options, self) {
volume: 1,
width: 0
})
.options(options || {});
.options(options || {})
.update({
height: setHeight,
paused: function() {
self.options.paused = !self.options.paused;
togglePaused();
},
position: setPosition,
width: setWidth
});
self.fps = 25;
self.frame = self.options.position * self.fps;
@ -796,19 +805,6 @@ Ox.VideoTimelinePlayer = function(options, self) {
}
}
self.setOption = function(key, value) {
if (key == 'height') {
setHeight();
} else if (key == 'paused') {
self.options.paused = !self.options.paused;
togglePaused();
} else if (key == 'position') {
setPosition();
} else if (key == 'width') {
setWidth();
}
};
/*@
togglePaused <f> toggle paused
() -> <o> toggle paused