From 62c82fceb95c4f84b8b968c6da0f8ca3b4e06177 Mon Sep 17 00:00:00 2001 From: rolux Date: Fri, 17 Feb 2012 16:13:48 +0000 Subject: [PATCH] make video editor handle internal links (fixes #494) --- pandora/padma.jsonc | 2 +- static/js/pandora/UI.js | 2 +- static/js/pandora/item.js | 89 ++++++++++++++++++++++++-------------- static/js/pandora/utils.js | 32 +++++++++++++- 4 files changed, 88 insertions(+), 37 deletions(-) diff --git a/pandora/padma.jsonc b/pandora/padma.jsonc index da7dceaf..36cb07d9 100644 --- a/pandora/padma.jsonc +++ b/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"], diff --git a/static/js/pandora/UI.js b/static/js/pandora/UI.js index 8f309a8f..3c1004b3 100644 --- a/static/js/pandora/UI.js +++ b/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); diff --git a/static/js/pandora/item.js b/static/js/pandora/item.js index 3facf4b0..2a7bdfb4 100644 --- a/static/js/pandora/item.js +++ b/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'); - pandora.$ui.editor.addAnnotation(data.layer, Ox.extend({ - created: created, - date: date, - duration: data.out - data['in'], - editable: true, - id: '_' + Ox.uid(), - 'in': data['in'], - modified: created, - out: data.out, - user: pandora.user.username, - value: '', - }, - Ox.getObjectById(pandora.site.layers, data.layer).type == 'place' ? { - place: {lat: null, lng: null} - } : {}, - Ox.getObjectById(pandora.site.layers, data.layer).type == 'event' ? { - event: {start: '', end: ''} - } : {} + date = Ox.formatDate(d, '%B %e, %Y'), + type = Ox.getObjectById(pandora.site.layers, data.layer).type; + pandora.$ui.editor.addAnnotation(data.layer, Ox.extend( + { + created: created, + date: date, + duration: data.out - data['in'], + editable: true, + id: '_' + Ox.uid(), + 'in': data['in'], + modified: created, + out: data.out, + user: pandora.user.username, + value: '', + }, + type == 'place' ? { + place: {lat: null, lng: null} + } : 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; diff --git a/static/js/pandora/utils.js b/static/js/pandora/utils.js index 2a5a120a..2114c670 100644 --- a/static/js/pandora/utils.js +++ b/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 - && !Ox.starts(e.target.pathname, '/static')) { + if ( + 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'],