make video editor handle internal links (fixes #494)

This commit is contained in:
rolux 2012-02-17 16:13:48 +00:00
parent 09c1b29905
commit 62c82fceb9
4 changed files with 88 additions and 37 deletions

View file

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

View file

@ -46,7 +46,7 @@ pandora.UI = (function() {
triggerEvents = Ox.isUndefined(arguments[2]) ? true : arguments[1]; 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 = Ox.clone(pandora.user.ui, true);
self.previousUI._list = pandora.getListState(self.previousUI.find); self.previousUI._list = pandora.getListState(self.previousUI.find);

View file

@ -117,11 +117,13 @@ pandora.ui.item = function() {
} }
} else if (pandora.user.ui.itemView == 'clips') { } else if (pandora.user.ui.itemView == 'clips') {
pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.contentPanel.replaceElement(1,
pandora.ui.clipsView(result.data.videoRatio) pandora.ui.clipsView(result.data.videoRatio)
); );
} else if (pandora.user.ui.itemView == 'video') { } else if (pandora.user.ui.itemView == 'video') {
pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.player = Ox.VideoPanel({ pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.player = Ox.VideoPanel({
annotationsCalendarSize: pandora.user.ui.annotationsCalendarSize, annotationsCalendarSize: pandora.user.ui.annotationsCalendarSize,
annotationsFont: pandora.user.ui.annotationsFont, annotationsFont: pandora.user.ui.annotationsFont,
@ -146,6 +148,9 @@ pandora.ui.item = function() {
position: pandora.user.ui.videoPoints[pandora.user.ui.item].position, position: pandora.user.ui.videoPoints[pandora.user.ui.item].position,
resolution: pandora.user.ui.videoResolution, resolution: pandora.user.ui.videoResolution,
scaleToFill: pandora.user.ui.videoScale == 'fill', 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, showAnnotations: pandora.user.ui.showAnnotations,
showAnnotationsCalendar: pandora.user.ui.showAnnotationsCalendar, showAnnotationsCalendar: pandora.user.ui.showAnnotationsCalendar,
showAnnotationsMap: pandora.user.ui.showAnnotationsMap, showAnnotationsMap: pandora.user.ui.showAnnotationsMap,
@ -228,6 +233,7 @@ pandora.ui.item = function() {
})); }));
} else if (pandora.user.ui.itemView == 'timeline') { } else if (pandora.user.ui.itemView == 'timeline') {
pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.contentPanel.replaceElement(1,
pandora.$ui.editor = Ox.VideoEditor({ pandora.$ui.editor = Ox.VideoEditor({
annotationsCalendarSize: pandora.user.ui.annotationsCalendarSize, annotationsCalendarSize: pandora.user.ui.annotationsCalendarSize,
@ -290,25 +296,26 @@ pandora.ui.item = function() {
setTimeout(function() { setTimeout(function() {
var d = new Date(), var d = new Date(),
created = Ox.formatDate(d, '%Y-%m-%dT%H:%M:%SZ'), 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') { } else if (pandora.user.ui.itemView == 'map') {
pandora.$ui.contentPanel.replaceElement(1, pandora.ui.navigationView('map', result.data.videoRatio)); pandora.$ui.contentPanel.replaceElement(1, pandora.ui.navigationView('map', result.data.videoRatio));
} else if (pandora.user.ui.itemView == 'calendar') { } else if (pandora.user.ui.itemView == 'calendar') {
pandora.$ui.contentPanel.replaceElement(1, pandora.ui.navigationView('calendar', result.data.videoRatio)); pandora.$ui.contentPanel.replaceElement(1, pandora.ui.navigationView('calendar', result.data.videoRatio));
} else if (pandora.user.ui.itemView == 'data') { } else if (pandora.user.ui.itemView == 'data') {
var stats = Ox.Container(); var stats = Ox.Container();
Ox.TreeList({ Ox.TreeList({
data: result.data, data: result.data,
@ -490,6 +487,7 @@ pandora.ui.item = function() {
pandora.$ui.contentPanel.replaceElement(1, stats); pandora.$ui.contentPanel.replaceElement(1, stats);
} else if (pandora.user.ui.itemView == 'files') { } else if (pandora.user.ui.itemView == 'files') {
pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.contentPanel.replaceElement(1,
pandora.$ui.item = pandora.ui.filesView({ pandora.$ui.item = pandora.ui.filesView({
id: result.data.id id: result.data.id
@ -497,6 +495,7 @@ pandora.ui.item = function() {
); );
} else if (pandora.user.ui.itemView == 'frames' || pandora.user.ui.itemView == 'posters') { } else if (pandora.user.ui.itemView == 'frames' || pandora.user.ui.itemView == 'posters') {
pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.contentPanel.replaceElement(1,
pandora.$ui.item = pandora.ui.mediaView().bindEvent({ pandora.$ui.item = pandora.ui.mediaView().bindEvent({
resize: function() { 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; return that;

View file

@ -175,8 +175,10 @@ pandora.changeListStatus = function(id, status, callback) {
}; };
pandora.clickLink = function(e) { 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); pandora.URL.push(e.target.pathname);
} else { } else {
window.open('/url=' + encodeURIComponent(e.target.href), '_blank'); window.open('/url=' + encodeURIComponent(e.target.href), '_blank');
@ -687,6 +689,25 @@ pandora.getMetadataByIdOrName = function(item, view, str, callback) {
}); });
function getId(type, callback) { function getId(type, callback) {
if (type) { 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({ pandora.api['find' + Ox.toTitleCase(type + 's')](Ox.extend({
query: { query: {
conditions: [{ conditions: [{
@ -704,10 +725,17 @@ pandora.getMetadataByIdOrName = function(item, view, str, callback) {
operator: '&' operator: '&'
} }
} : {}), function(result) { } : {}), function(result) {
Ox.print('RESULT::::::', result)
var annotation, span; var annotation, span;
if (result.data.items.length) { if (result.data.items.length) {
span = result.data.items[0]; span = result.data.items[0];
annotation = span.id.split('/')[1]; 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, { type == 'annotation' && pandora.UI.set('videoPoints.' + item, {
annotation: annotation, annotation: annotation,
'in': span['in'], 'in': span['in'],