add annotations view to edits

source/Ox.UI/js/Video/ClipPanel.js

@@ -5,16 +5,28 @@ Ox.ClipPanel = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
         .defaults({
+            annotationsCalendarSize: 256,
+            annotationsFont: 'small',
+            annotationsMapSize: 256,
+            annotationsRange: 'all',
+            annotationsSize: 256,
+            annotationsSort: 'position',
             clips: [],
+            clickLink: null,
             duration: 0,
             editable: false,
             getClipImageURL: null,
             'in': 0,
+            layers: [],
             out: 0,
             position: 0,
             selected: [],
             sort: [],
             sortOptions: [],
+            showAnnotationsCalendar: false,
+            showAnnotationsMap: false,
+            showLayers: {},
+            showUsers: false,
             view: 'list',
             width: 0
         })
@@ -32,6 +44,13 @@ Ox.ClipPanel = function(options, self) {
             height: function() {
                 self.$list.size();
             },
+            position: function() {
+                if (self.options.view == 'annotations') {
+                    self.$list.options({
+                        position: self.options.position
+                    });
+                }
+            },
             selected: selectClips,
             sort: function() {
                 updateSortElement();
@@ -63,6 +82,7 @@ Ox.ClipPanel = function(options, self) {
                 {group: 'view', min: 1, max: 1, items: [
                     {id: 'list', title: Ox._('View as List'), checked: self.options.view == 'list'},
                     {id: 'grid', title: Ox._('View as Grid'), checked: self.options.view == 'grid'},
+                    {id: 'annotations', title: Ox._('View Annotations'), checked: self.options.view == 'annotations'},
                 ]},
                 {},
                 {id: 'split', title: Ox._('Split Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length},
@@ -200,7 +220,31 @@ Ox.ClipPanel = function(options, self) {
 
     function getList() {
         var $list;
-        if (self.options.view == 'list') {
+        if (self.options.view == 'annotations') {
+            console.log('getList Annotations', self.options.layers);
+            $list = Ox.AnnotationPanel({
+                    calendarSize: self.options.annotationsCalendarSize,
+                    clickLink: self.options.clickLink,
+                    editable: false,
+                    font: self.options.annotationsFont,
+                    //highlight: self.options.find,
+                    //'in': self.options['in'],
+                    //itemName: self.options.itemName,
+                    layers: self.options.layers,
+                    mapSize: self.options.annotationsMapSize,
+                    //out: self.options.out,
+                    position: self.options.position,
+                    range: self.options.annotationsRange,
+                    showCalendar: self.options.showAnnotationsCalendar,
+                    showLayers: Ox.clone(self.options.showLayers),
+                    showMap: self.options.showAnnotationsMap,
+                    showUsers: self.options.showUsers,
+                    sort: self.options.annotationsSort,
+                    width: self.options.annotationsSize
+                });
+
+            return $list;
+        } else if (self.options.view == 'list') {
             $list = Ox.TableList({
                 columns: [
                     {

source/Ox.UI/js/Video/VideoEditPanel.js

@@ -5,6 +5,12 @@ Ox.VideoEditPanel = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
         .defaults({
+            annotationsCalendarSize: 256,
+            annotationsFont: 'small',
+            annotationsMapSize: 256,
+            annotationsRange: 'all',
+            annotationsSize: 256,
+            annotationsSort: 'position',
             clips: [],
             clipSize: 256,
             clipSort: [],
@@ -22,6 +28,7 @@ Ox.VideoEditPanel = function(options, self) {
             height: 0,
             'in': 0,
             loop: false,
+            layers: [],
             muted: false,
             out: 0,
             paused: true,
@@ -30,8 +37,12 @@ Ox.VideoEditPanel = function(options, self) {
             resolution: 0,
             scaleToFill: false,
             selected: [],
+            showAnnotationsCalendar: false,
+            showAnnotationsMap: false,
             showClips: false,
+            showLayers: {},
             showTimeline: false,
+            showUsers: false,
             smallTimelineURL: '',
             subtitles: [],
             timeline: '',
@@ -283,14 +294,26 @@ Ox.VideoEditPanel = function(options, self) {
         });
 
     self.$clipPanel = Ox.ClipPanel({
+            annotationsCalendarSize: self.options.annotationsCalendarSize,
+            annotationsFont: self.options.annotationsFont,
+            annotationsMapSize: self.options.annotationsMapSize,
+            annotationsRange: self.options.annotationsRange,
+            annotationsSize: self.options.annotationsSize,
+            annotationsSort: self.options.annotationsSort,
             clips: Ox.clone(self.options.clips),
+            clickLink: self.options.clickLink,
             duration: self.options.duration,
             editable: self.options.editable,
             getClipImageURL: self.options.getClipImageURL,
             'in': self.options['in'],
+            layers: Ox.clone(self.options.layers),
             out: self.options.out,
             position: self.options.position,
             selected: self.options.selected,
+            showAnnotationsCalendar: self.options.showAnnotationsCalendar,
+            showAnnotationsMap: self.options.showAnnotationsMap,
+            showLayers: self.options.showLayers,
+            showUsers: self.options.showUsers,
             sort: self.options.clipSort,
             sortOptions: self.options.sortOptions,
             view: self.options.clipView,