make video editor handle internal links (fixes #494)

pandora/padma.jsonc

@@ -563,7 +563,7 @@
             "icons": "frames",
             "infoIconSize": 256,
             "item": "",
-            "itemFind": {"conditions": [], "operator": "&"},
+            "itemFind": "",
             "itemSort": [{"key": "position", "operator": "+"}],
             "itemView": "info",
             "listColumns": ["title", "source", "project", "topic", "language", "duration"],

static/js/pandora/UI.js

@@ -46,7 +46,7 @@ pandora.UI = (function() {
             triggerEvents = Ox.isUndefined(arguments[2]) ? true : arguments[1];
         }
 
-        Ox.Log('UI', 'SET', args)
+        Ox.Log('UI', 'SET', JSON.stringify(args));
 
         self.previousUI = Ox.clone(pandora.user.ui, true);
         self.previousUI._list = pandora.getListState(self.previousUI.find);

static/js/pandora/item.js

@@ -117,11 +117,13 @@ pandora.ui.item = function() {
             }
 
         } else if (pandora.user.ui.itemView == 'clips') {
+
             pandora.$ui.contentPanel.replaceElement(1,
                 pandora.ui.clipsView(result.data.videoRatio)
             );
 
         } else if (pandora.user.ui.itemView == 'video') {
+
             pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.player = Ox.VideoPanel({
                 annotationsCalendarSize: pandora.user.ui.annotationsCalendarSize,
                 annotationsFont: pandora.user.ui.annotationsFont,
@@ -146,6 +148,9 @@ pandora.ui.item = function() {
                 position: pandora.user.ui.videoPoints[pandora.user.ui.item].position,
                 resolution: pandora.user.ui.videoResolution,
                 scaleToFill: pandora.user.ui.videoScale == 'fill',
+                selected: pandora.user.ui.videoPoints[pandora.user.ui.item].annotation
+                    ? pandora.user.ui.item + '/' + pandora.user.ui.videoPoints[pandora.user.ui.item].annotation
+                    : '',
                 showAnnotations: pandora.user.ui.showAnnotations,
                 showAnnotationsCalendar: pandora.user.ui.showAnnotationsCalendar,
                 showAnnotationsMap: pandora.user.ui.showAnnotationsMap,
@@ -228,6 +233,7 @@ pandora.ui.item = function() {
             }));
 
         } else if (pandora.user.ui.itemView == 'timeline') {
+
             pandora.$ui.contentPanel.replaceElement(1,
                 pandora.$ui.editor = Ox.VideoEditor({
                     annotationsCalendarSize: pandora.user.ui.annotationsCalendarSize,
@@ -290,25 +296,26 @@ pandora.ui.item = function() {
                         setTimeout(function() {
                             var d = new Date(),
                                 created = Ox.formatDate(d, '%Y-%m-%dT%H:%M:%SZ'),
-                                date = Ox.formatDate(d, '%B %e, %Y');
+                                date = Ox.formatDate(d, '%B %e, %Y'),
-                            pandora.$ui.editor.addAnnotation(data.layer, Ox.extend({
+                                type = Ox.getObjectById(pandora.site.layers, data.layer).type;
-                                created: created,
+                            pandora.$ui.editor.addAnnotation(data.layer, Ox.extend(
-                                date: date,
+                                {
-                                duration: data.out - data['in'],
+                                    created: created,
-                                editable: true,
+                                    date: date,
-                                id: '_' + Ox.uid(),
+                                    duration: data.out - data['in'],
-                                'in': data['in'],
+                                    editable: true,
-                                modified: created,
+                                    id: '_' + Ox.uid(),
-                                out: data.out,
+                                    'in': data['in'],
-                                user: pandora.user.username,
+                                    modified: created,
-                                value: '',
+                                    out: data.out,
-                            },
+                                    user: pandora.user.username,
-                            Ox.getObjectById(pandora.site.layers, data.layer).type == 'place' ? {
+                                    value: '',
-                                place: {lat: null, lng: null}
+                                },
-                            } : {},
+                                type == 'place' ? {
-                            Ox.getObjectById(pandora.site.layers, data.layer).type == 'event' ? {
+                                    place: {lat: null, lng: null}
-                                event: {start: '', end: ''}
+                                } : type == 'event' ? {
-                            } : {}
+                                    event: {start: '', end: ''}
+                                } : {}
                             ));
                         });
                     },
@@ -461,27 +468,17 @@ pandora.ui.item = function() {
                     }
                 })
             );
-            pandora.$ui.editor.bindEvent('resize', function(data) {
+
-                //Ox.Log('', 'resize item', data)
-                pandora.$ui.editor.options({
-                    height: data.size
-                });
-            });
-            /*
-            pandora.$ui.rightPanel.bindEvent('resize', function(data) {
-                Ox.Log('', '... rightPanel resize', data, pandora.$ui.timelinePanel.size(1))
-                pandora.$ui.editor.options({
-                    width: data - pandora.$ui.timelinePanel.size(1) - 1
-                });
-            });
-            */
         } else if (pandora.user.ui.itemView == 'map') {
+
             pandora.$ui.contentPanel.replaceElement(1, pandora.ui.navigationView('map', result.data.videoRatio));
 
         } else if (pandora.user.ui.itemView == 'calendar') {
+
             pandora.$ui.contentPanel.replaceElement(1, pandora.ui.navigationView('calendar', result.data.videoRatio));
 
         } else if (pandora.user.ui.itemView == 'data') {
+
             var stats = Ox.Container();
             Ox.TreeList({
                 data: result.data,
@@ -490,6 +487,7 @@ pandora.ui.item = function() {
             pandora.$ui.contentPanel.replaceElement(1, stats);
 
         } else if (pandora.user.ui.itemView == 'files') {
+
             pandora.$ui.contentPanel.replaceElement(1,
                 pandora.$ui.item = pandora.ui.filesView({
                     id: result.data.id
@@ -497,6 +495,7 @@ pandora.ui.item = function() {
             );
 
         } else if (pandora.user.ui.itemView == 'frames' || pandora.user.ui.itemView == 'posters') {
+
             pandora.$ui.contentPanel.replaceElement(1,
                 pandora.$ui.item = pandora.ui.mediaView().bindEvent({
                     resize: function() {
@@ -504,7 +503,31 @@ pandora.ui.item = function() {
                     }
                 })
             );
+
         }
+
+        if (['video', 'timeline'].indexOf(pandora.user.ui.itemView) > -1) {
+            // handle links in annotations
+            var widget = pandora.user.ui.itemView == 'video' ? 'player' : 'editor';
+            pandora.$ui[widget].bindEvent('pandora_videopoints.' + pandora.user.ui.item.toLowerCase(), function(data) {
+                Ox.print('DATA.VALUE', JSON.stringify(data.value));
+                var options = {};
+                if (data.value.annotation) {
+                    options.selected = pandora.user.ui.item + '/' + data.value.annotation;
+                } else {
+                    // if annotation got set to something other than '',
+                    // points and position will be set in consequence,
+                    // so lets try to keep events from looping
+                    ['annotation', 'in', 'out', 'position'].forEach(function(key) {
+                        if (!Ox.isUndefined(data.value[key])) {
+                            options[key == 'annotation' ? 'selected' : key] = data.value[key];
+                        }
+                    });
+                }
+                pandora.$ui[widget].options(options);
+            });
+        }
+
     });
 
     return that;

static/js/pandora/utils.js

@@ -175,8 +175,10 @@ pandora.changeListStatus = function(id, status, callback) {
 };
 
 pandora.clickLink = function(e) {
-    if (e.target.hostname == document.location.hostname
+    if (
-        && !Ox.starts(e.target.pathname, '/static')) {
+        e.target.hostname == document.location.hostname
+        && !Ox.starts(e.target.pathname, '/static')
+    ) {
         pandora.URL.push(e.target.pathname);
     } else {
         window.open('/url=' + encodeURIComponent(e.target.href), '_blank');
@@ -687,6 +689,25 @@ pandora.getMetadataByIdOrName = function(item, view, str, callback) {
     });
     function getId(type, callback) {
         if (type) {
+            Ox.print('getId',
+                Ox.extend({
+                    query: {
+                        conditions: [{
+                            key: isName ? 'name' : 'id',
+                            value: type != 'annotation' ? str : item + '/' + str,
+                            operator: '=='
+                        }],
+                        operator: '&'
+                    },
+                    keys: type != 'annotation' ? ['id'] : ['id', 'in', 'out'],
+                    range: [0, 1]
+                }, item && type != 'annotation' ? {
+                    itemQuery: {
+                        conditions: [{key: 'id', value: item, operator: '=='}],
+                        operator: '&'
+                    }
+                } : {})
+            );
             pandora.api['find' + Ox.toTitleCase(type + 's')](Ox.extend({
                 query: {
                     conditions: [{
@@ -704,10 +725,17 @@ pandora.getMetadataByIdOrName = function(item, view, str, callback) {
                     operator: '&'
                 }
             } : {}), function(result) {
+                Ox.print('RESULT::::::', result)
                 var annotation, span;
                 if (result.data.items.length) {
                     span = result.data.items[0];
                     annotation = span.id.split('/')[1];
+                    Ox.print("SETTING::::", {
+                        annotation: annotation,
+                        'in': span['in'],
+                        out: span.out,
+                        position: span['in']
+                    });
                     type == 'annotation' && pandora.UI.set('videoPoints.' + item, {
                         annotation: annotation,
                         'in': span['in'],