info view/clips annotations

This commit is contained in:
j 2012-01-20 23:40:25 +05:30
parent 16cc495fb5
commit 9adae80d3d
8 changed files with 334 additions and 198 deletions

View file

@ -7,7 +7,6 @@ pandora.ui.clipList = function(videoRatio) {
var ui = pandora.user.ui, var ui = pandora.user.ui,
fixedRatio = !ui.item ? 16/9 : videoRatio, fixedRatio = !ui.item ? 16/9 : videoRatio,
isClipView = !ui.item ? ui.listView == 'clip' : ui.itemView == 'clips', isClipView = !ui.item ? ui.listView == 'clip' : ui.itemView == 'clips',
textKey = pandora.getClipTextKey(),
that = Ox.IconList({ that = Ox.IconList({
fixedRatio: fixedRatio, fixedRatio: fixedRatio,
item: function(data, sort, size) { item: function(data, sort, size) {
@ -22,7 +21,9 @@ pandora.ui.clipList = function(videoRatio) {
width = fixedRatio > 1 ? size : Math.round(size * fixedRatio); width = fixedRatio > 1 ? size : Math.round(size * fixedRatio);
height = fixedRatio > 1 ? Math.round(size / fixedRatio) : size; height = fixedRatio > 1 ? Math.round(size / fixedRatio) : size;
} }
title = data[textKey] ? data[textKey][0].value : ''; title = data.annotations ? data.annotations.map(function(annotation) {
return Ox.stripTags(annotation.value);
}).join('; ') : '',
url = '/' + data.id.split('/')[0] + '/' + height + 'p' + data['in'] + '.jpg'; url = '/' + data.id.split('/')[0] + '/' + height + 'p' + data['in'] + '.jpg';
sortKey = sort[0].key; sortKey = sort[0].key;
if (['text', 'position', 'duration'].indexOf(sortKey) > -1) { if (['text', 'position', 'duration'].indexOf(sortKey) > -1) {
@ -80,7 +81,7 @@ pandora.ui.clipList = function(videoRatio) {
}, data), callback); }, data), callback);
}, },
keys: Ox.merge( keys: Ox.merge(
['id', 'in', 'out', textKey], ['annotations', 'id', 'in', 'out'],
!ui.item ? ['videoRatio'] : [] !ui.item ? ['videoRatio'] : []
), ),
max: 1, max: 1,
@ -102,7 +103,8 @@ pandora.ui.clipList = function(videoRatio) {
points = { points = {
annotation: that.value(id, 'annotations')[0].id.split('/')[1], annotation: that.value(id, 'annotations')[0].id.split('/')[1],
'in': that.value(id, 'in'), 'in': that.value(id, 'in'),
out: that.value(id, 'out') out: that.value(id, 'out'),
position: that.value(id, 'in')
}, },
set = { set = {
item: item, item: item,

View file

@ -4,8 +4,7 @@
pandora.ui.clipsView = function(videoRatio) { pandora.ui.clipsView = function(videoRatio) {
var textKey = pandora.getClipTextKey(), var that = Ox.SplitPanel({
that = Ox.SplitPanel({
elements: [ elements: [
{ {
element: Ox.Bar({size: 24}) element: Ox.Bar({size: 24})
@ -27,7 +26,7 @@ pandora.ui.clipsView = function(videoRatio) {
.bindEvent({ .bindEvent({
submit: function(data) { submit: function(data) {
pandora.UI.set('itemFind', data.value ? { pandora.UI.set('itemFind', data.value ? {
conditions: [{key: textKey, value: data.value, operator: '='}], conditions: [{key: 'annotations', value: data.value, operator: '='}],
operator: '&' operator: '&'
} : pandora.site.user.ui.itemFind); } : pandora.site.user.ui.itemFind);
// since this is the only way itemFind can change, // since this is the only way itemFind can change,

View file

@ -88,7 +88,8 @@ pandora.ui.infoView = function(data) {
$reflectionIcon = $('<img>') $reflectionIcon = $('<img>')
.attr({ .attr({
src: '/' + data.id + '/' + ( src: '/' + data.id + '/' + (
ui.icons == 'posters' ? 'poster' : 'icon' ui.icons == 'posters'
? (ui.showSitePoster ? 'siteposter' : 'poster') : 'icon'
) + '512.jpg?' + uid ) + '512.jpg?' + uid
}) })
.css({ .css({
@ -116,7 +117,6 @@ pandora.ui.infoView = function(data) {
left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px', left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px',
top: margin + 'px', top: margin + 'px',
right: margin + statisticsWidth + margin + 'px', right: margin + statisticsWidth + margin + 'px',
//background: 'green'
}) })
.bindEvent(canEdit && !isEditable ? { .bindEvent(canEdit && !isEditable ? {
doubleclick: reloadMetadata doubleclick: reloadMetadata
@ -136,7 +136,7 @@ pandora.ui.infoView = function(data) {
$browserImages = []; $browserImages = [];
pandora.createLinks($text); pandora.createLinks($text); // FIXME: this is wrong for editables that already have clickLink
// Title ------------------------------------------------------------------- // Title -------------------------------------------------------------------
@ -211,7 +211,8 @@ pandora.ui.infoView = function(data) {
var $div = $('<div>') var $div = $('<div>')
.css(css) .css(css)
.appendTo($text); .appendTo($text);
['country', 'year'].forEach(function(key) { ['country', 'year'].forEach(function(key, i) {
i && $('<div>').css({float: 'left'}).html(';&nbsp;').appendTo($div);
$('<div>') $('<div>')
.css({float: 'left'}) .css({float: 'left'})
.html(formatKey(key).replace('</span>', '&nbsp;</span>')) .html(formatKey(key).replace('</span>', '&nbsp;</span>'))
@ -234,7 +235,6 @@ pandora.ui.infoView = function(data) {
} }
}) })
.appendTo($div); .appendTo($div);
key == 'country' && $('<div>').css({float: 'left'}).html(';&nbsp;').appendTo($div);
}); });
} else if (data.country || data.year || data.language || data.runtime) { } else if (data.country || data.year || data.language || data.runtime) {
var html = []; var html = [];

View file

@ -14,15 +14,12 @@ pandora.ui.infoView = function(data) {
MozUserSelect: 'text', MozUserSelect: 'text',
WebkitUserSelect: 'text' WebkitUserSelect: 'text'
}, },
iconRatio = ui.icons == 'posters' iconRatio = ui.icons == 'posters' ? data.posterRatio : 1,
? (ui.showSitePoster ? 5/8 : data.posterRatio) : 1,
iconSize = ui.infoIconSize, iconSize = ui.infoIconSize,
iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio), iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio),
iconHeight = iconRatio < 1 ? iconSize : Math.round(iconSize / iconRatio), iconHeight = iconRatio < 1 ? iconSize : Math.round(iconSize / iconRatio),
iconLeft = iconSize == 256 ? Math.floor((iconSize - iconWidth) / 2) : 0, iconLeft = iconSize == 256 ? Math.floor((iconSize - iconWidth) / 2) : 0,
borderRadius = ui.icons == 'posters' ? 0 : iconSize / 8, borderRadius = ui.icons == 'posters' ? 0 : iconSize / 8,
isEditable = canEdit,
listWidth = 144 + Ox.UI.SCROLLBAR_SIZE,
margin = 16, margin = 16,
statisticsWidth = 128, statisticsWidth = 128,
uid = Ox.uid(), uid = Ox.uid(),
@ -31,23 +28,18 @@ pandora.ui.infoView = function(data) {
$list, $list,
$info = $('<div>') $info = Ox.Element()
.css({ .css({
position: 'absolute', position: 'absolute',
left: canEdit && !ui.showIconBrowser ? -listWidth + 'px' : 0, left: 0,
top: 0, top: 0,
right: 0, right: 0,
bottom: 0,
overflowY: 'auto'
}) })
.appendTo(that.$element), .appendTo(that),
$data = Ox.Container() $left = Ox.Element()
.css({
position: 'absolute',
left: (canEdit ? listWidth : 0) + 'px',
top: 0,
right: 0,
height: pandora.$ui.contentPanel.size(1) + 'px'
})
.appendTo($info), .appendTo($info),
$icon = Ox.Element({ $icon = Ox.Element({
@ -55,8 +47,7 @@ pandora.ui.infoView = function(data) {
}) })
.attr({ .attr({
src: '/' + data.id + '/' + ( src: '/' + data.id + '/' + (
ui.icons == 'posters' ui.icons == 'posters' ? 'poster' : 'icon'
? (ui.showSitePoster ? 'siteposter' : 'poster') : 'icon'
) + '512.jpg?' + uid ) + '512.jpg?' + uid
}) })
.css({ .css({
@ -71,7 +62,7 @@ pandora.ui.infoView = function(data) {
.bindEvent({ .bindEvent({
singleclick: toggleIconSize singleclick: toggleIconSize
}) })
.appendTo($data.$element), .appendTo($left),
$reflection = $('<div>') $reflection = $('<div>')
.addClass('OxReflection') .addClass('OxReflection')
@ -83,7 +74,7 @@ pandora.ui.infoView = function(data) {
height: iconSize / 2 + 'px', height: iconSize / 2 + 'px',
overflow: 'hidden' overflow: 'hidden'
}) })
.appendTo($data.$element), .appendTo($left),
$reflectionIcon = $('<img>') $reflectionIcon = $('<img>')
.attr({ .attr({
@ -108,42 +99,120 @@ pandora.ui.infoView = function(data) {
}) })
.appendTo($reflection), .appendTo($reflection),
$text = Ox.Element({ $data = $('<div>')
.css({
position: 'absolute',
left: margin + 'px',
top: margin + iconHeight + margin + 'px'
})
.appendTo($left),
$center = Ox.Element({
}) })
.css({ .css({
position: 'absolute', position: 'absolute',
left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px', left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px',
top: margin + 'px', top: margin + 'px',
right: margin + statisticsWidth + margin + 'px', right: margin + statisticsWidth + margin + 'px',
//background: 'green'
}) })
.appendTo($data.$element), .appendTo($info),
$statistics = $('<div>') $right = $('<div>')
.css({ .css({
position: 'absolute', position: 'absolute',
width: statisticsWidth + 'px', width: statisticsWidth + 'px',
top: margin + 'px', top: margin + 'px',
right: margin + 'px' right: margin + 'px'
}) })
.appendTo($data.$element), .appendTo($info),
$capabilities, $capabilities;
$browserImages = []; if (!canEdit) {
pandora.createLinks($info);
}
//pandora.createLinks($text); var listKeys = [
'language', 'topic', 'director', 'cinematographer', 'featuring',
'groups', 'license'
];
// Source & Project --------------------------------------------------------
['source', 'project'].forEach(function(key) {
var $div = $('<div>').appendTo($data),
value = data[key] || '';
if (canEdit || value) {
$('<div>')
.css({float: 'left'})
.html(
formatKey({
category: 'categories',
}[key] || key).replace('</span>', '&nbsp;</span>')
)
.appendTo($div);
Ox.Editable({
clickLink: pandora.clickLink,
format: function(value) {
return listKeys.indexOf(key) >= 0
? formatValue(value.split(', '), {
'director': 'name',
'cinematographer': 'name',
'features': 'name',
}[key] || key)
: value;
},
placeholder: formatLight('unknown'),
editable: canEdit,
tooltip: canEdit ? 'Doubleclick to edit' : '',
value: listKeys.indexOf(key) >= 0
? (data[key] || []).join(', ')
: data[key] || ''
})
.css({float: 'left'})
.bindEvent({
submit: function(event) {
editMetadata(key, event.value);
}
})
.appendTo($div);
if (canEdit || data[key + 'description']) {
$('<br>').appendTo($div);
$('<div>')
.append(
descriptions[key] = Ox.Editable({
clickLink: pandora.clickLink,
placeholder: formatLight('No ' + Ox.toTitleCase(key) + ' Description'),
editable: canEdit,
tooltip: canEdit ? 'Doubleclick to edit' : '',
type: 'textarea',
value: data[key + 'description'] || ''
})
.bindEvent({
submit: function(event) {
editMetadata(key + 'description', event.value);
}
})
.css(css)
).css({
'margin-top': '8px',
})
.appendTo($div);
}
}
});
// Title ------------------------------------------------------------------- // Title -------------------------------------------------------------------
$('<div>') $('<div>')
.css({ .css({
marginTop: '-2px' marginTop: '-2px',
}) })
.append( .append(
Ox.Editable({ Ox.Editable({
editable: isEditable, editable: canEdit,
tooltip: isEditable ? 'Doubleclick to edit' : '', tooltip: canEdit ? 'Doubleclick to edit' : '',
value: data.title value: data.title
}) })
.css({ .css({
@ -160,17 +229,140 @@ pandora.ui.infoView = function(data) {
} }
}) })
) )
.appendTo($text); .appendTo($center);
if(data.description || isEditable) { // Location, Date & Language -----------------------------------------------
if (canEdit) {
var $div = $('<div>').css(css).css({marginTop: '12px'}).appendTo($center);
['location', 'date', 'language'].forEach(function(key, i) {
i && $('<div>').css({float: 'left'}).html(';&nbsp;').appendTo($div);
$('<div>')
.css({float: 'left'})
.html(formatKey(key).replace('</span>', '&nbsp;</span>'))
.appendTo($div);
Ox.Editable({
clickLink: pandora.clickLink,
format: function(value) {
return formatValue(value.split(', '), key)
},
placeholder: formatLight('unknown'),
tooltip: 'Doubleclick to edit',
value: listKeys.indexOf(key) >= 0
? (data[key] || []).join(', ')
: data[key] || ''
})
.css({float: 'left'})
.bindEvent({
submit: function(event) {
editMetadata(key, event.value);
}
})
.appendTo($div);
});
$('<br>').appendTo($center);
} else if (data.location || data.date || data.language) {
var html = [];
['location', 'date', 'language'].forEach(function(key) {
if (data[key]) {
html.push(
formatKey(key)
+ formatValue(data[key], key)
)
}
});
$('<div>').css(css).html(html.join('; ')).appendTo($center);
}
// Director, Cinematographer and Featuring ---------------------------------
if (canEdit) {
var $div = $('<div>').css(css).appendTo($center);
['director', 'cinematographer', 'featuring'].forEach(function(key, i) {
i && $('<div>').css({float: 'left'}).html(';&nbsp;').appendTo($div);
$('<div>')
.css({float: 'left'})
.html(formatKey(key).replace('</span>', '&nbsp;</span>'))
.appendTo($div);
Ox.Editable({
clickLink: pandora.clickLink,
format: function(value) {
return formatValue(value.split(', '), 'name')
},
placeholder: formatLight('unknown'),
tooltip: 'Doubleclick to edit',
value: listKeys.indexOf(key) >= 0
? (data[key] || []).join(', ')
: data[key] || ''
})
.css({float: 'left'})
.bindEvent({
submit: function(event) {
editMetadata(key, event.value);
}
})
.appendTo($div);
});
$('<br>').appendTo($center);
} else if (data.director || data.cinematographer || data.featuring) {
var html = [];
['director', 'cinematographer', 'featuring'].forEach(function(key) {
if (data[key].length) {
html.push(
formatKey(key)
+ formatValue(data[key], key)
)
}
});
$('<div>').css(css).html(html.join('; ')).appendTo($center);
}
// Topic -------------------------------------------------------------------
if (canEdit) {
var $div = $('<div>').css(css).appendTo($center),
key = 'topic';
$('<div>') $('<div>')
.css({float: 'left'})
.html(formatKey('Topics').replace('</span>', '&nbsp;</span>'))
.appendTo($div);
Ox.Editable({
clickLink: pandora.clickLink,
format: function(value) {
return formatValue(value.split(', '), key)
},
placeholder: formatLight('unknown'),
tooltip: 'Doubleclick to edit',
value: listKeys.indexOf(key) >= 0
? (data[key] || []).join(', ')
: data[key] || ''
})
.css({float: 'left'})
.bindEvent({
submit: function(event) {
editMetadata(key, event.value);
}
})
.appendTo($div);
$('<br>').appendTo($center);
} else if (data.topic) {
var html = formatKey('topics') + formatValue(data.topic, 'topic');
$('<div>').css(css).html(html).appendTo($center);
}
// Description -------------------------------------------------------------
if (canEdit) {
$('<div>')
.css({marginTop: '16px'})
.append( .append(
Ox.Editable({ Ox.Editable({
clickLink: pandora.clickLink, clickLink: pandora.clickLink,
editable: isEditable, editable: canEdit,
maxHeight: Infinity, maxHeight: Infinity,
placeholder: formatLight('No description'), placeholder: formatLight('No description'),
tooltip: isEditable ? 'Doubleclick to edit' : '', tooltip: canEdit ? 'Doubleclick to edit' : '',
type: 'textarea', type: 'textarea',
value: data.description || '', value: data.description || '',
//width: 300 //width: 300
@ -182,109 +374,49 @@ pandora.ui.infoView = function(data) {
}) })
.css(css) .css(css)
) )
.appendTo($text); .appendTo($center);
} else if(data.description) {
$('<div>').css(css).html(data.description).appendTo($center);
} }
var listKeys = ['language', 'topic', 'director', 'cinematographer', 'features', 'groups', // License ---------------------------------------------------------------
'license']; $div = $('<div>').css(css).css({marginTop: '16px'}).appendTo($center);
$('<div>').html('<br>').appendTo($text); if (canEdit) {
[ $('<div>')
'source', .css({float: 'left'})
'project', .html(formatKey('license').replace('</span>', '&nbsp;</span>'))
'year',
'date',
'location',
'director',
'cinematographer',
'features',
'language',
'topic',
'license',
'user',
].forEach(function(key) {
var $div = $('<div>').appendTo($text),
value = listKeys.indexOf(key) >= 0
? (data[key] || []).join(', ')
: data[key] || '';
if (isEditable || value) {
$('<div>')
.html(
formatKey({
categorty: 'categories',
}[key] || key).replace('</span>', '&nbsp;</span>')
)
.appendTo($div);
Ox.Editable({
clickLink: pandora.clickLink,
format: function(value) {
return listKeys.indexOf(key) >= 0
? formatValue(value.split(', '), {
'director': 'name',
'cinematographer': 'name',
'features': 'name',
}[key] || key)
: value;
},
placeholder: formatLight('unknown'),
editable: isEditable,
tooltip: isEditable ? 'Doubleclick to edit' : '',
value: listKeys.indexOf(key) >= 0
? (data[key] || []).join(', ')
: data[key] || ''
})
.bindEvent({
submit: function(event) {
editMetadata(key, event.value);
}
})
.css(css)
.appendTo($div); .appendTo($div);
if(pandora.site.itemKeys.filter(function(item) { Ox.Editable({
if (item.id == key) placeholder: formatLight('No License'),
return item.description tooltip: 'Doubleclick to edit',
}).length > 0 value: data.license.join(', '),
&& (isEditable || data[key + 'description'])) { })
$('<div>') .bindEvent({
.append( submit: function(event) {
descriptions[key] = Ox.Editable({ editMetadata('license', event.value);
clickLink: pandora.clickLink,
placeholder: formatLight('No ' + Ox.toTitleCase(key) + ' Description'),
editable: isEditable,
tooltip: isEditable ? 'Doubleclick to edit' : '',
type: 'textarea',
value: data[key + 'description']|| ''
})
.bindEvent({
submit: function(event) {
editMetadata(key + 'description', event.value);
}
})
.css(css)
).css({
'padding-top': '4px',
'padding-bottom': '4px'
})
.appendTo($div);
} }
} })
}); .appendTo($div);
} else if(data.license) {
$div.html(
formatKey('License')
+ data.license.join(', ')
);
}
$('<div>').css({height: '16px'}).appendTo($text); // User, Created & Modified ------------------------------------------------
[
'created',
'accessed',
'modified',
].forEach(function(key) {
$('<span>')
.css({padding: '4px'})
.html(
formatKey(key) + data[key]
)
.appendTo($text);
});
$('<div>').css({height: '16px'}).appendTo($text); $div = $('<div>').css(css).css({marginTop: '16px'}).appendTo($center);
html = [];
['user', 'created', 'modified'].forEach(function(key) {
data[key] && html.push(
formatKey(key == 'modified' ? 'Last Modified' : key)
+ (key == 'user' ? data.user : Ox.formatDate(data[key], '%F %T'))
);
});
$div.html(html.join('; '));
$('<div>').css({height: '16px'}).appendTo($center);
// Hue, Saturation, Lightness, Volume -------------------------------------- // Hue, Saturation, Lightness, Volume --------------------------------------
@ -297,18 +429,20 @@ pandora.ui.infoView = function(data) {
data[key] || 0, key == 'volume' ? 'lightness' : key data[key] || 0, key == 'volume' ? 'lightness' : key
).css({textAlign: 'right'}) ).css({textAlign: 'right'})
) )
.appendTo($statistics); .appendTo($right);
}); });
// Rights Level ------------------------------------------------------------ // Rights Level ------------------------------------------------------------
var $rightsLevel = $('<div>'); if (canEdit) {
$('<div>') var $rightsLevel = $('<div>');
.css({marginBottom: '4px'}) $('<div>')
.append(formatKey('Rights Level', true)) .css({marginBottom: '4px'})
.append($rightsLevel) .append(formatKey('Rights Level', true))
.appendTo($statistics); .append($rightsLevel)
renderRightsLevel(); .appendTo($right);
renderRightsLevel();
}
// Groups, Notes --------------------------------------------------------- // Groups, Notes ---------------------------------------------------------
@ -329,7 +463,7 @@ pandora.ui.infoView = function(data) {
} }
}) })
) )
.appendTo($statistics); .appendTo($right);
$('<div>') $('<div>')
.css({marginBottom: '4px'}) .css({marginBottom: '4px'})
@ -349,18 +483,18 @@ pandora.ui.infoView = function(data) {
} }
}) })
) )
.appendTo($statistics); .appendTo($right);
} }
$('<div>').css({height: '16px'}).appendTo($statistics); $('<div>').css({height: '16px'}).appendTo($right);
function editMetadata(key, value) { function editMetadata(key, value) {
if (value != data[key]) { if (value != data[key]) {
var edit = {id: data.id}; var edit = {id: data.id};
if (key == 'title') { if (key == 'title') {
edit[key] = value; edit[key] = value;
} else if(listKeys.indexOf(key) > -1) { } else if (listKeys.indexOf(key) > -1) {
edit[key] = value ? value.split(', ') : []; edit[key] = value ? value.split(', ') : [];
} else { } else {
edit[key] = value; edit[key] = value;
@ -368,7 +502,7 @@ pandora.ui.infoView = function(data) {
pandora.api.edit(edit, function(result) { pandora.api.edit(edit, function(result) {
data[key] = value; data[key] = value;
descriptions[key] && descriptions[key].options({ descriptions[key] && descriptions[key].options({
value: result.data[key+'description'] value: result.data[key + 'description']
}); });
Ox.Request.clearCache(); // fixme: too much? can change filter/list etc Ox.Request.clearCache(); // fixme: too much? can change filter/list etc
@ -565,7 +699,10 @@ pandora.ui.infoView = function(data) {
width: iconSize + 'px', width: iconSize + 'px',
height: iconSize / 2 + 'px' height: iconSize / 2 + 'px'
}, 250); }, 250);
$text.animate({ $data.animate({
top: margin + iconHeight + margin + 'px'
}, 250);
$center.animate({
left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px', left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px',
}, 250); }, 250);
pandora.UI.set({infoIconSize: iconSize}); pandora.UI.set({infoIconSize: iconSize});
@ -573,9 +710,8 @@ pandora.ui.infoView = function(data) {
that.reload = function() { that.reload = function() {
var src = src = '/' + data.id + '/' + ( var src = src = '/' + data.id + '/' + (
ui.icons == 'posters' ui.icons == 'posters' ? 'poster' : 'icon'
? (ui.showSitePoster ? 'siteposter' : 'poster') : 'icon' ) + '512.jpg?' + Ox.uid();
) + '512.jpg?' + Ox.uid()
$icon.attr({src: src}); $icon.attr({src: src});
$reflectionIcon.attr({src: src}); $reflectionIcon.attr({src: src});
iconSize = iconSize == 256 ? 512 : 256; iconSize = iconSize == 256 ? 512 : 256;
@ -586,9 +722,7 @@ pandora.ui.infoView = function(data) {
}; };
that.resize = function() { that.resize = function() {
var height = pandora.$ui.contentPanel.size(1);
$list && $list.css({height: height + 'px'});
$data.css({height: height + 'px'});
}; };
that.bindEvent({ that.bindEvent({

View file

@ -167,11 +167,8 @@ pandora.ui.item = function() {
pandora.UI.set({annotationsSort: data.sort}); pandora.UI.set({annotationsSort: data.sort});
}, },
find: function(data) { find: function(data) {
var textKey = Ox.getObjectById(pandora.site.layers, 'subtitles')
? 'subtitles'
: 'annotations';
pandora.UI.set('itemFind', data.find ? { pandora.UI.set('itemFind', data.find ? {
conditions: [{key: textKey, value: data.find, operator: '='}], conditions: [{key: 'annotations', value: data.find, operator: '='}],
operator: '&' operator: '&'
} : pandora.site.user.ui.itemFind); } : pandora.site.user.ui.itemFind);
}, },
@ -319,11 +316,8 @@ pandora.ui.item = function() {
}); });
}, },
find: function(data) { find: function(data) {
var textKey = Ox.getObjectById(pandora.site.layers, 'subtitles')
? 'subtitles'
: 'annotations';
pandora.UI.set('itemFind', data.find ? { pandora.UI.set('itemFind', data.find ? {
conditions: [{key: textKey, value: data.find, operator: '='}], conditions: [{key: 'annotations', value: data.find, operator: '='}],
operator: '&' operator: '&'
} : pandora.site.user.ui.itemFind); } : pandora.site.user.ui.itemFind);
}, },

View file

@ -3,7 +3,6 @@
pandora.ui.itemClips = function(options) { pandora.ui.itemClips = function(options) {
var self = {}, var self = {},
textKey = pandora.getClipTextKey(),
that = Ox.Element() that = Ox.Element()
.css({ .css({
height: '192px', height: '192px',
@ -27,20 +26,24 @@ pandora.ui.itemClips = function(options) {
self.options.clips.forEach(function(clip, i) { self.options.clips.forEach(function(clip, i) {
Ox.Log('', 'CLIP', clip) Ox.Log('', 'CLIP', clip)
var id = self.options.id + '/' + clip['in'], var annotations = clip.annotations.sort(function(a, b) {
title = Ox.map(clip.annotations, function(annotation) { var layerA = pandora.site.clipLayers.indexOf(a.layer),
if(textKey == 'subtitles') { layerB = pandora.site.clipLayers.indexOf(b.layer);
return annotation.layer == 'subtitles' ? annotation.value : 0; return layerA < layerB ? -1
} : layerA > layerB ? 1
return annotation.value; : a.value < b.value ? -1
: a.value > b.value ? 1
: 0;
}), }),
url = '/' + self.options.id + '/' + self.height + 'p' + clip['in'] + '.jpg', url = '/' + self.options.id + '/' + self.height + 'p' + clip['in'] + '.jpg',
$item = Ox.IconItem({ $item = Ox.IconItem({
imageHeight: self.height, imageHeight: self.height,
imageWidth: self.width, imageWidth: self.width,
id: id, id: clip.id,
info: Ox.formatDuration(clip['in']) + ' - ' + Ox.formatDuration(clip.out), info: Ox.formatDuration(clip['in']) + ' - ' + Ox.formatDuration(clip.out),
title: title[0] || '', title: annotations.map(function(annotation) {
return Ox.stripTags(annotation.value);
}).join('; '),
url: url, url: url,
}) })
.addClass('OxInfoIcon') .addClass('OxInfoIcon')
@ -50,13 +53,15 @@ pandora.ui.itemClips = function(options) {
: i == self.options.clips.length - 1 ? '2px -2px 2px 2px' : i == self.options.clips.length - 1 ? '2px -2px 2px 2px'
: '2px' : '2px'
}) })
.data({'in': clip['in'], out: clip.out}); .data(Ox.extend(annotations.length ? {
annotation: annotations[0].id.split('/')[1],
} : {}, {'in': clip['in'], out: clip.out}));
$item.$element.find('.OxTarget').addClass('OxSpecialTarget'); $item.$element.find('.OxTarget').addClass('OxSpecialTarget');
that.append($item); that.append($item);
}); });
function doubleclick(data) { function doubleclick(data) {
var $item, $target = $(data.target), item, points, set; var $item, $target = $(data.target), annotation, item, points, set;
if ($target.parent().parent().is('.OxSpecialTarget')) { if ($target.parent().parent().is('.OxSpecialTarget')) {
// for videos, the click registers deeper inside // for videos, the click registers deeper inside
$target = $target.parent().parent(); $target = $target.parent().parent();
@ -64,13 +69,16 @@ pandora.ui.itemClips = function(options) {
if ($target.is('.OxSpecialTarget')) { if ($target.is('.OxSpecialTarget')) {
$item = $target.parent().parent(); $item = $target.parent().parent();
item = self.options.id; item = self.options.id;
annotation = $item.data('annotation');
points = [$item.data('in'), $item.data('out')]; points = [$item.data('in'), $item.data('out')];
set = {}; set = {};
set['videoPoints.' + item] = { set['videoPoints.' + item] = Ox.extend(annotation ? {
annotation: annotation
} : {}, {
'in': points[0], 'in': points[0],
out: points[1], out: points[1],
position: points[0] position: points[0]
}; });
pandora.UI.set(set); pandora.UI.set(set);
} }
} }

View file

@ -226,10 +226,13 @@ pandora.ui.mainMenu = function() {
} }
}, },
click: function(data) { click: function(data) {
if ([ if (Ox.merge(
'home', 'about', 'news', 'tour', 'faq', 'terms', 'rights', 'contact', 'software', ['home', 'software'],
'signup', 'signin', 'signout', 'preferences', 'tv', 'help' pandora.site.sitePages.map(function(page) {
].indexOf(data.id) > -1) { return page.id;
}),
['signup', 'signin', 'signout', 'preferences', 'tv', 'help']
).indexOf(data.id) > 1) {
pandora.UI.set({page: data.id}); pandora.UI.set({page: data.id});
} else if ([ } else if ([
'newlist', 'newlistfromselection', 'newsmartlist', 'newsmartlistfromresults' 'newlist', 'newlistfromselection', 'newsmartlist', 'newsmartlistfromresults'

View file

@ -247,7 +247,7 @@ pandora.enableDragAndDrop = function($list, canMove) {
}, },
draganddroppause: function(data) { draganddroppause: function(data) {
var event = data._event, scroll, var event = data._event, scroll,
$parent, $grandparent, $panel, $bar, title; $parent, $grandparent, $panel, title;
// fixme: should be named showLists in the user ui prefs! // fixme: should be named showLists in the user ui prefs!
if (!pandora.user.ui.showSidebar) { if (!pandora.user.ui.showSidebar) {
if (event.clientX < 16 && event.clientY >= 44 if (event.clientX < 16 && event.clientY >= 44
@ -261,10 +261,12 @@ pandora.enableDragAndDrop = function($list, canMove) {
$panel = $parent.is('.OxCollapsePanel') ? $parent $panel = $parent.is('.OxCollapsePanel') ? $parent
: $grandparent.is('.OxCollapsePanel') ? $grandparent : null; : $grandparent.is('.OxCollapsePanel') ? $grandparent : null;
if ($panel) { if ($panel) {
$bar = $panel.children('.OxBar'); title = $panel.children('.OxBar').children('.OxTitle')
title = $bar.children('.OxTitle')
.html().split(' ')[0].toLowerCase(); .html().split(' ')[0].toLowerCase();
!pandora.user.ui.showFolder.items[title] && $bar.trigger('dblclick'); // !pandora.user.ui.showFolder.items[title] && $bar.trigger('dblclick');
if (!pandora.user.ui.showFolder.items[title]) {
Ox.UI.elements[$panel.data('oxid')].options({collapsed: false});
}
} }
if (!scrollInterval) { if (!scrollInterval) {
//Ox.Log('', 'AT TOP', isAtListsTop(event), 'AT BOTTOM', isAtListsBottom(event)) //Ox.Log('', 'AT TOP', isAtListsTop(event), 'AT BOTTOM', isAtListsBottom(event))
@ -496,12 +498,6 @@ pandora.getClipsQuery = function() {
return clipsQuery; return clipsQuery;
}; };
pandora.getClipTextKey = function() {
return Ox.getObjectById(pandora.site.layers, 'subtitles')
? 'subtitles'
: 'annotations';
};
(function() { (function() {
var itemTitles = {}; var itemTitles = {};
pandora.getDocumentTitle = function(itemTitle) { pandora.getDocumentTitle = function(itemTitle) {