merging changes (api, app, video)

source/Ox.UI/js/Core/Ox.Api.js

@@ -0,0 +1,75 @@
+// vim: et:ts=4:sw=4:sts=4:ft=javascript
+'use strict';
+/*@
+Ox.Api <o> bin remote api to object
+options <o> Options object
+    timeout  <n|60000>   request timeout
+    url      <s>         request url
+callback <f> called once api discover is done
+@*/
+
+Ox.Api = function(options, callback) {
+
+    var self = {
+            options: Ox.extend({
+                timeout: 60000,
+                type: 'POST',
+                url: '/api/'
+            }, options || {}),
+            time: new Date()
+        },
+        that = {
+            api: function(callback) {
+                Ox.Request.send({
+                    url: self.options.url,
+                    data: {
+                        action: 'api'
+                    },
+                    callback: callback
+                });
+            },
+            cancel: function(id) {
+                Ox.Request.cancel(id);
+            }
+        };
+
+    $.ajaxSetup({
+        timeout: self.options.timeout,
+        type: self.options.type,
+        url: self.options.url
+    });
+
+    /*@
+    api <o> bakcend API
+        [action] <f> all api requests available on backend
+        cancel   <f> cancel a request
+        options  <f> get or set options
+    @*/
+    that.api(function(result) {
+        Ox.forEach(result.data.actions, function(val, key) {
+            that[key] = function(/*data, age, callback*/) {
+                var data = {}, age = -1, callback = null;
+                Ox.forEach(arguments, function(argument) {
+                    if (Ox.isObject(argument)) {
+                        data = argument;
+                    } else if (Ox.isNumber(argument)) {
+                        age = argument;
+                    } else if (Ox.isFunction(argument)) {
+                        callback = argument;
+                    }
+                });
+                return Ox.Request.send(Ox.extend({
+                    age: age,
+                    callback: callback,
+                    data: {
+                        action: key,
+                        data: JSON.stringify(data)
+                    },
+                    url: self.options.url
+                }, !val.cache ? {age: 0}: {}));
+            };
+        });
+        callback && callback();
+    });
+    return that;
+};

source/Ox.UI/js/Core/Ox.App.js

@@ -20,63 +20,17 @@ Ox.App = function(options) {
             options: Ox.extend({
                 timeout: 60000,
                 type: 'POST',
-                url: '/api/',
+                url: '/api/'
             }, options || {}),
             time: new Date()
         },
         that = Ox.Element({}, Ox.extend({}, self));
 
-    that.api = {
+    that.api = Ox.Api({
-        api: function(callback) {
-            Ox.Request.send({
-                url: self.options.url,
-                data: {
-                    action: 'api'
-                },
-                callback: callback
-            });
-        },
-        cancel: function(id) {
-            Ox.Request.cancel(id);
-        }
-    };
-
-    $.ajaxSetup({
-        timeout: self.options.timeout,
         type: self.options.type,
+        timeout: self.options.timeout,
         url: self.options.url
-    });
+    }, function() {
-
-    /*@
-    api <o> bakcend API
-        [action] <f> all api requests available on backend
-        cancel   <f> cancel a request
-        options  <f> get or set options
-    @*/
-    that.api.api(function(result) {
-        Ox.forEach(result.data.actions, function(val, key) {
-            that.api[key] = function(/*data, age, callback*/) {
-                var data = {}, age = -1, callback = null;
-                Ox.forEach(arguments, function(argument) {
-                    if (Ox.isObject(argument)) {
-                        data = argument;
-                    } else if (Ox.isNumber(argument)) {
-                        age = argument;
-                    } else if (Ox.isFunction(argument)) {
-                        callback = argument;
-                    }
-                });
-                return Ox.Request.send(Ox.extend({
-                    age: age,
-                    callback: callback,
-                    data: {
-                        action: key,
-                        data: JSON.stringify(data)
-                    },
-                    url: self.options.url
-                }, !val.cache ? {age: 0}: {}));
-            };
-        });
         that.api.init(getUserData(), function(result) {
             //Ox.UI.hideLoadingScreen();
             that.triggerEvent({

source/Ox.UI/js/Menu/Ox.MenuButton.js

@@ -113,18 +113,30 @@ Ox.MenuButton = function(options, self) {
         }
     }
 
+    /*@
+    checkItem <f>
+    @*/
     that.checkItem = function(id) {
         self.$menu.checkItem(id);
     };
 
+    /*@
+    disableItem <f>
+    @*/
     that.disableItem = function(id) {
         self.$menu.getItem(id).options({disabled: true});
     };
 
+    /*@
+    enableItem <f>
+    @*/
     that.enableItem = function(id) {
         self.$menu.getItem(id).options({disabled: false});
     };
 
+    /*@
+    remove <f>
+    @*/
     self.superRemove = that.remove;
     that.remove = function() {
         self.$menu.remove();

source/Ox.UI/js/Video/Ox.AnnotationPanel.js

@@ -78,12 +78,7 @@ Ox.AnnotationPanel = function(options, self) {
                     .addClass('OxAnnotation OxTarget');
                 return $item;
             },
-            items: self.options.items.map(function(v, i) {
+            items: self.options.items,
-                return {
-                    id: v.id || i + '',
-                    value: v.value
-                };
-            }),
             max: 1,
             unique: 'id'
         })

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -35,6 +35,7 @@ Ox.VideoEditor = function(options, self) {
                 position: 0,
                 posterFrame: 0,
                 posterFrameControls: false,
+                resolution: 0,
                 showAnnotations: false,
                 showLargeTimeline: true,
                 subtitles: [],
@@ -190,6 +191,7 @@ Ox.VideoEditor = function(options, self) {
                 paused: true,
                 position: type == 'play' ? self.options.position : self.options[type],
                 posterFrame: self.options.posterFrame,
+                resolution: self.options.resolution,
                 showMarkers: true,
                 showMilliseconds: 3,
                 sizeIsLarge: self.options.videoSize == 'large',
@@ -215,6 +217,9 @@ Ox.VideoEditor = function(options, self) {
                     changePlayer(data);
                     that.triggerEvent('position', data);
                 },
+                resolution: function(data) {
+                    that.triggerEvent('resolution', data);
+                },
                 size: toggleSize,
                 volume: function(data) {
                     that.triggerEvent('volume', data);
@@ -326,9 +331,10 @@ Ox.VideoEditor = function(options, self) {
 
     self.resolutions = [];
     Ox.forEach(self.options.video, function(url, resolution) {
-        Ox.Log('Video', url, resolution)
+        Ox.Log('Video', url, resolution);
         self.resolutions.push(
-            {id: resolution + '', title: resolution + 'p'}
+            {id: resolution + '', title: resolution + 'p',
+             checked: self.options.resolution == resolution}
         );
     });
 
@@ -390,7 +396,10 @@ Ox.VideoEditor = function(options, self) {
                     {id: 'toggleSize', title: 'Large Player', selected: self.options.playerSize == 'large', keyboard: 'shift +'},
                     {}
                 ],
-                self.resolutions,
+                {
+                    'id': 'resolution', title:'Resolution',
+                    items: [ { group: 'resolution', min: 1, max: 1, items: self.resolutions } ]
+                },
                 [
                     {},
                     {id: 'largeTimeline', title: 'Hide Large Timeline', disabled: true},
@@ -425,6 +434,9 @@ Ox.VideoEditor = function(options, self) {
                         title: 'Keyboard Shortcuts',
                         width: 256
                     }).open();
+                } else if (id == 'resolution') {
+                    self.options.resolution = parseInt(data.checked[0].id);
+                    self.$player[0].options({resolution: self.options.resolution});
                 }
             }
         })
@@ -445,13 +457,12 @@ Ox.VideoEditor = function(options, self) {
 
 
     self.$resolutionSelect = Ox.Select({
-            items: [{id: '96', title: '96p'},{id: '240', title: '240p'}],//self.resolutions,
+            items: self.resolutions,
-            width: 48
+            width: 48,
         })
         .css({float: 'left'})
         .bindEvent({
-            change: function() {
+            change: function(data) {
-
             }
         });
         //.appendTo(self.$videobar);

source/Ox.UI/js/Video/Ox.VideoElement.js

@@ -418,12 +418,12 @@ Ox.VideoElement = function(options, self) {
             ret = self.video.src;
         } else {
             self.options.src = Ox.isArray(arguments[0]) ? arguments[0] : [arguments[0]];
-            self.videos[currentPart].src = self.options.src[currentPart];
+            self.$video[self.currentPart].src = self.options.src[self.currentPart];
-            self.videos.forEach(function(video, i) {
+            self.$video.each(function(video, i) {
-                if (i != currentPart) {
+                if (i != self.currentPart) {
                     video.src = self.options.src[i];
                 }
-            })
+            });
             ret = that;
         }
         return ret;

source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js

@@ -30,6 +30,7 @@ Ox.VideoPanelPlayer = function(options, self) {
                 playInToOut: false,
                 position: 0,
                 poster: '',
+                resolution: 0,
                 scaleToFill: false,
                 showAnnotations: true,
                 showTimeline: true,
@@ -77,6 +78,7 @@ Ox.VideoPanelPlayer = function(options, self) {
             out: self.options.out,
             paused: true,
             position: self.options.position,
+            resolution: self.options.resolution,
             scaleToFill: self.options.scaleToFill,
             subtitles: self.options.subtitles,
             timeline: self.options.timeline,
@@ -103,6 +105,9 @@ Ox.VideoPanelPlayer = function(options, self) {
                 setPosition(data);
                 that.triggerEvent('position', data);
             },
+            resolution: function(data) {
+                that.triggerEvent('resolution', data);
+            },
             scale: function(data) {
                 that.triggerEvent('scale', data);
             },

source/Ox.UI/js/Video/Ox.VideoPlayer.js

@@ -1112,6 +1112,7 @@ Ox.VideoPlayer = function(options, self) {
             self.iconIsVisible = true;
         }
         self.options.rewind && rewind();
+        that.triggerEvent('ended');
     }
 
     function find(query) {
@@ -1806,6 +1807,9 @@ Ox.VideoPlayer = function(options, self) {
         self.$playButton && self.$playButton.options({
             disabled: true
         });
+        that.triggerEvent('resolution', {
+            resolution: self.options.resolution
+        });
     }
 
     function setSize($element, css, animate, callback) {
@@ -2244,6 +2248,8 @@ Ox.VideoPlayer = function(options, self) {
             setPosition(value);
         } else if (key == 'posterFrame') {
             self.options.paused && setMarkers();
+        } else if (key == 'resolution') {
+            setResolution();
         } else if (key == 'scaleToFill') {
             toggleScale();
         }