info view/clips annotations
This commit is contained in:
j
parent
16cc495fb5
commit
9adae80d3d
8 changed files with 334 additions and 198 deletions
|
|
@ -7,7 +7,6 @@ pandora.ui.clipList = function(videoRatio) {
|
|||
var ui = pandora.user.ui,
|
||||
fixedRatio = !ui.item ? 16/9 : videoRatio,
|
||||
isClipView = !ui.item ? ui.listView == 'clip' : ui.itemView == 'clips',
|
||||
textKey = pandora.getClipTextKey(),
|
||||
that = Ox.IconList({
|
||||
fixedRatio: fixedRatio,
|
||||
item: function(data, sort, size) {
|
||||
|
|
@ -22,7 +21,9 @@ pandora.ui.clipList = function(videoRatio) {
|
|||
width = fixedRatio > 1 ? size : Math.round(size * fixedRatio);
|
||||
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';
|
||||
sortKey = sort[0].key;
|
||||
if (['text', 'position', 'duration'].indexOf(sortKey) > -1) {
|
||||
|
|
@ -80,7 +81,7 @@ pandora.ui.clipList = function(videoRatio) {
|
|||
}, data), callback);
|
||||
},
|
||||
keys: Ox.merge(
|
||||
['id', 'in', 'out', textKey],
|
||||
['annotations', 'id', 'in', 'out'],
|
||||
!ui.item ? ['videoRatio'] : []
|
||||
),
|
||||
max: 1,
|
||||
|
|
@ -102,7 +103,8 @@ pandora.ui.clipList = function(videoRatio) {
|
|||
points = {
|
||||
annotation: that.value(id, 'annotations')[0].id.split('/')[1],
|
||||
'in': that.value(id, 'in'),
|
||||
out: that.value(id, 'out')
|
||||
out: that.value(id, 'out'),
|
||||
position: that.value(id, 'in')
|
||||
},
|
||||
set = {
|
||||
item: item,
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
|
||||
pandora.ui.clipsView = function(videoRatio) {
|
||||
|
||||
var textKey = pandora.getClipTextKey(),
|
||||
that = Ox.SplitPanel({
|
||||
var that = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: Ox.Bar({size: 24})
|
||||
|
|
@ -27,7 +26,7 @@ pandora.ui.clipsView = function(videoRatio) {
|
|||
.bindEvent({
|
||||
submit: function(data) {
|
||||
pandora.UI.set('itemFind', data.value ? {
|
||||
conditions: [{key: textKey, value: data.value, operator: '='}],
|
||||
conditions: [{key: 'annotations', value: data.value, operator: '='}],
|
||||
operator: '&'
|
||||
} : pandora.site.user.ui.itemFind);
|
||||
// since this is the only way itemFind can change,
|
||||
|
|
|
|||
|
|
@ -88,7 +88,8 @@ pandora.ui.infoView = function(data) {
|
|||
$reflectionIcon = $('<img>')
|
||||
.attr({
|
||||
src: '/' + data.id + '/' + (
|
||||
ui.icons == 'posters' ? 'poster' : 'icon'
|
||||
ui.icons == 'posters'
|
||||
? (ui.showSitePoster ? 'siteposter' : 'poster') : 'icon'
|
||||
) + '512.jpg?' + uid
|
||||
})
|
||||
.css({
|
||||
|
|
@ -116,7 +117,6 @@ pandora.ui.infoView = function(data) {
|
|||
left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px',
|
||||
top: margin + 'px',
|
||||
right: margin + statisticsWidth + margin + 'px',
|
||||
//background: 'green'
|
||||
})
|
||||
.bindEvent(canEdit && !isEditable ? {
|
||||
doubleclick: reloadMetadata
|
||||
|
|
@ -136,7 +136,7 @@ pandora.ui.infoView = function(data) {
|
|||
|
||||
$browserImages = [];
|
||||
|
||||
pandora.createLinks($text);
|
||||
pandora.createLinks($text); // FIXME: this is wrong for editables that already have clickLink
|
||||
|
||||
// Title -------------------------------------------------------------------
|
||||
|
||||
|
|
@ -211,7 +211,8 @@ pandora.ui.infoView = function(data) {
|
|||
var $div = $('<div>')
|
||||
.css(css)
|
||||
.appendTo($text);
|
||||
['country', 'year'].forEach(function(key) {
|
||||
['country', 'year'].forEach(function(key, i) {
|
||||
i && $('<div>').css({float: 'left'}).html('; ').appendTo($div);
|
||||
$('<div>')
|
||||
.css({float: 'left'})
|
||||
.html(formatKey(key).replace('</span>', ' </span>'))
|
||||
|
|
@ -234,7 +235,6 @@ pandora.ui.infoView = function(data) {
|
|||
}
|
||||
})
|
||||
.appendTo($div);
|
||||
key == 'country' && $('<div>').css({float: 'left'}).html('; ').appendTo($div);
|
||||
});
|
||||
} else if (data.country || data.year || data.language || data.runtime) {
|
||||
var html = [];
|
||||
|
|
|
|||
|
|
@ -14,15 +14,12 @@ pandora.ui.infoView = function(data) {
|
|||
MozUserSelect: 'text',
|
||||
WebkitUserSelect: 'text'
|
||||
},
|
||||
iconRatio = ui.icons == 'posters'
|
||||
? (ui.showSitePoster ? 5/8 : data.posterRatio) : 1,
|
||||
iconRatio = ui.icons == 'posters' ? data.posterRatio : 1,
|
||||
iconSize = ui.infoIconSize,
|
||||
iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio),
|
||||
iconHeight = iconRatio < 1 ? iconSize : Math.round(iconSize / iconRatio),
|
||||
iconLeft = iconSize == 256 ? Math.floor((iconSize - iconWidth) / 2) : 0,
|
||||
borderRadius = ui.icons == 'posters' ? 0 : iconSize / 8,
|
||||
isEditable = canEdit,
|
||||
listWidth = 144 + Ox.UI.SCROLLBAR_SIZE,
|
||||
margin = 16,
|
||||
statisticsWidth = 128,
|
||||
uid = Ox.uid(),
|
||||
|
|
@ -31,23 +28,18 @@ pandora.ui.infoView = function(data) {
|
|||
|
||||
$list,
|
||||
|
||||
$info = $('<div>')
|
||||
$info = Ox.Element()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: canEdit && !ui.showIconBrowser ? -listWidth + 'px' : 0,
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
overflowY: 'auto'
|
||||
})
|
||||
.appendTo(that.$element),
|
||||
.appendTo(that),
|
||||
|
||||
$data = Ox.Container()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: (canEdit ? listWidth : 0) + 'px',
|
||||
top: 0,
|
||||
right: 0,
|
||||
height: pandora.$ui.contentPanel.size(1) + 'px'
|
||||
})
|
||||
$left = Ox.Element()
|
||||
.appendTo($info),
|
||||
|
||||
$icon = Ox.Element({
|
||||
|
|
@ -55,8 +47,7 @@ pandora.ui.infoView = function(data) {
|
|||
})
|
||||
.attr({
|
||||
src: '/' + data.id + '/' + (
|
||||
ui.icons == 'posters'
|
||||
? (ui.showSitePoster ? 'siteposter' : 'poster') : 'icon'
|
||||
ui.icons == 'posters' ? 'poster' : 'icon'
|
||||
) + '512.jpg?' + uid
|
||||
})
|
||||
.css({
|
||||
|
|
@ -71,7 +62,7 @@ pandora.ui.infoView = function(data) {
|
|||
.bindEvent({
|
||||
singleclick: toggleIconSize
|
||||
})
|
||||
.appendTo($data.$element),
|
||||
.appendTo($left),
|
||||
|
||||
$reflection = $('<div>')
|
||||
.addClass('OxReflection')
|
||||
|
|
@ -83,7 +74,7 @@ pandora.ui.infoView = function(data) {
|
|||
height: iconSize / 2 + 'px',
|
||||
overflow: 'hidden'
|
||||
})
|
||||
.appendTo($data.$element),
|
||||
.appendTo($left),
|
||||
|
||||
$reflectionIcon = $('<img>')
|
||||
.attr({
|
||||
|
|
@ -108,42 +99,120 @@ pandora.ui.infoView = function(data) {
|
|||
})
|
||||
.appendTo($reflection),
|
||||
|
||||
$text = Ox.Element({
|
||||
$data = $('<div>')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: margin + 'px',
|
||||
top: margin + iconHeight + margin + 'px'
|
||||
})
|
||||
.appendTo($left),
|
||||
|
||||
$center = Ox.Element({
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px',
|
||||
top: margin + 'px',
|
||||
right: margin + statisticsWidth + margin + 'px',
|
||||
//background: 'green'
|
||||
})
|
||||
.appendTo($data.$element),
|
||||
.appendTo($info),
|
||||
|
||||
$statistics = $('<div>')
|
||||
$right = $('<div>')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
width: statisticsWidth + 'px',
|
||||
top: 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>', ' </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 -------------------------------------------------------------------
|
||||
|
||||
$('<div>')
|
||||
.css({
|
||||
marginTop: '-2px'
|
||||
marginTop: '-2px',
|
||||
})
|
||||
.append(
|
||||
Ox.Editable({
|
||||
editable: isEditable,
|
||||
tooltip: isEditable ? 'Doubleclick to edit' : '',
|
||||
editable: canEdit,
|
||||
tooltip: canEdit ? 'Doubleclick to edit' : '',
|
||||
value: data.title
|
||||
})
|
||||
.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('; ').appendTo($div);
|
||||
$('<div>')
|
||||
.css({float: 'left'})
|
||||
.html(formatKey(key).replace('</span>', ' </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('; ').appendTo($div);
|
||||
$('<div>')
|
||||
.css({float: 'left'})
|
||||
.html(formatKey(key).replace('</span>', ' </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>')
|
||||
.css({float: 'left'})
|
||||
.html(formatKey('Topics').replace('</span>', ' </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(
|
||||
Ox.Editable({
|
||||
clickLink: pandora.clickLink,
|
||||
editable: isEditable,
|
||||
editable: canEdit,
|
||||
maxHeight: Infinity,
|
||||
placeholder: formatLight('No description'),
|
||||
tooltip: isEditable ? 'Doubleclick to edit' : '',
|
||||
tooltip: canEdit ? 'Doubleclick to edit' : '',
|
||||
type: 'textarea',
|
||||
value: data.description || '',
|
||||
//width: 300
|
||||
|
|
@ -182,109 +374,49 @@ pandora.ui.infoView = function(data) {
|
|||
})
|
||||
.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'];
|
||||
$('<div>').html('<br>').appendTo($text);
|
||||
[
|
||||
'source',
|
||||
'project',
|
||||
'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>', ' </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)
|
||||
// License ---------------------------------------------------------------
|
||||
$div = $('<div>').css(css).css({marginTop: '16px'}).appendTo($center);
|
||||
if (canEdit) {
|
||||
$('<div>')
|
||||
.css({float: 'left'})
|
||||
.html(formatKey('license').replace('</span>', ' </span>'))
|
||||
.appendTo($div);
|
||||
if(pandora.site.itemKeys.filter(function(item) {
|
||||
if (item.id == key)
|
||||
return item.description
|
||||
}).length > 0
|
||||
&& (isEditable || data[key + 'description'])) {
|
||||
$('<div>')
|
||||
.append(
|
||||
descriptions[key] = Ox.Editable({
|
||||
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);
|
||||
Ox.Editable({
|
||||
placeholder: formatLight('No License'),
|
||||
tooltip: 'Doubleclick to edit',
|
||||
value: data.license.join(', '),
|
||||
})
|
||||
.bindEvent({
|
||||
submit: function(event) {
|
||||
editMetadata('license', event.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
.appendTo($div);
|
||||
} else if(data.license) {
|
||||
$div.html(
|
||||
formatKey('License')
|
||||
+ data.license.join(', ')
|
||||
);
|
||||
}
|
||||
|
||||
$('<div>').css({height: '16px'}).appendTo($text);
|
||||
[
|
||||
'created',
|
||||
'accessed',
|
||||
'modified',
|
||||
].forEach(function(key) {
|
||||
$('<span>')
|
||||
.css({padding: '4px'})
|
||||
.html(
|
||||
formatKey(key) + data[key]
|
||||
)
|
||||
.appendTo($text);
|
||||
});
|
||||
// User, Created & Modified ------------------------------------------------
|
||||
|
||||
$('<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 --------------------------------------
|
||||
|
||||
|
|
@ -297,18 +429,20 @@ pandora.ui.infoView = function(data) {
|
|||
data[key] || 0, key == 'volume' ? 'lightness' : key
|
||||
).css({textAlign: 'right'})
|
||||
)
|
||||
.appendTo($statistics);
|
||||
.appendTo($right);
|
||||
});
|
||||
|
||||
// Rights Level ------------------------------------------------------------
|
||||
|
||||
var $rightsLevel = $('<div>');
|
||||
$('<div>')
|
||||
.css({marginBottom: '4px'})
|
||||
.append(formatKey('Rights Level', true))
|
||||
.append($rightsLevel)
|
||||
.appendTo($statistics);
|
||||
renderRightsLevel();
|
||||
if (canEdit) {
|
||||
var $rightsLevel = $('<div>');
|
||||
$('<div>')
|
||||
.css({marginBottom: '4px'})
|
||||
.append(formatKey('Rights Level', true))
|
||||
.append($rightsLevel)
|
||||
.appendTo($right);
|
||||
renderRightsLevel();
|
||||
}
|
||||
|
||||
// Groups, Notes ---------------------------------------------------------
|
||||
|
||||
|
|
@ -329,7 +463,7 @@ pandora.ui.infoView = function(data) {
|
|||
}
|
||||
})
|
||||
)
|
||||
.appendTo($statistics);
|
||||
.appendTo($right);
|
||||
|
||||
$('<div>')
|
||||
.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) {
|
||||
if (value != data[key]) {
|
||||
var edit = {id: data.id};
|
||||
if (key == 'title') {
|
||||
edit[key] = value;
|
||||
} else if(listKeys.indexOf(key) > -1) {
|
||||
} else if (listKeys.indexOf(key) > -1) {
|
||||
edit[key] = value ? value.split(', ') : [];
|
||||
} else {
|
||||
edit[key] = value;
|
||||
|
|
@ -368,7 +502,7 @@ pandora.ui.infoView = function(data) {
|
|||
pandora.api.edit(edit, function(result) {
|
||||
data[key] = value;
|
||||
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
|
||||
|
|
@ -565,7 +699,10 @@ pandora.ui.infoView = function(data) {
|
|||
width: iconSize + 'px',
|
||||
height: iconSize / 2 + 'px'
|
||||
}, 250);
|
||||
$text.animate({
|
||||
$data.animate({
|
||||
top: margin + iconHeight + margin + 'px'
|
||||
}, 250);
|
||||
$center.animate({
|
||||
left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px',
|
||||
}, 250);
|
||||
pandora.UI.set({infoIconSize: iconSize});
|
||||
|
|
@ -573,9 +710,8 @@ pandora.ui.infoView = function(data) {
|
|||
|
||||
that.reload = function() {
|
||||
var src = src = '/' + data.id + '/' + (
|
||||
ui.icons == 'posters'
|
||||
? (ui.showSitePoster ? 'siteposter' : 'poster') : 'icon'
|
||||
) + '512.jpg?' + Ox.uid()
|
||||
ui.icons == 'posters' ? 'poster' : 'icon'
|
||||
) + '512.jpg?' + Ox.uid();
|
||||
$icon.attr({src: src});
|
||||
$reflectionIcon.attr({src: src});
|
||||
iconSize = iconSize == 256 ? 512 : 256;
|
||||
|
|
@ -586,9 +722,7 @@ pandora.ui.infoView = function(data) {
|
|||
};
|
||||
|
||||
that.resize = function() {
|
||||
var height = pandora.$ui.contentPanel.size(1);
|
||||
$list && $list.css({height: height + 'px'});
|
||||
$data.css({height: height + 'px'});
|
||||
|
||||
};
|
||||
|
||||
that.bindEvent({
|
||||
|
|
|
|||
|
|
@ -167,11 +167,8 @@ pandora.ui.item = function() {
|
|||
pandora.UI.set({annotationsSort: data.sort});
|
||||
},
|
||||
find: function(data) {
|
||||
var textKey = Ox.getObjectById(pandora.site.layers, 'subtitles')
|
||||
? 'subtitles'
|
||||
: 'annotations';
|
||||
pandora.UI.set('itemFind', data.find ? {
|
||||
conditions: [{key: textKey, value: data.find, operator: '='}],
|
||||
conditions: [{key: 'annotations', value: data.find, operator: '='}],
|
||||
operator: '&'
|
||||
} : pandora.site.user.ui.itemFind);
|
||||
},
|
||||
|
|
@ -319,11 +316,8 @@ pandora.ui.item = function() {
|
|||
});
|
||||
},
|
||||
find: function(data) {
|
||||
var textKey = Ox.getObjectById(pandora.site.layers, 'subtitles')
|
||||
? 'subtitles'
|
||||
: 'annotations';
|
||||
pandora.UI.set('itemFind', data.find ? {
|
||||
conditions: [{key: textKey, value: data.find, operator: '='}],
|
||||
conditions: [{key: 'annotations', value: data.find, operator: '='}],
|
||||
operator: '&'
|
||||
} : pandora.site.user.ui.itemFind);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
pandora.ui.itemClips = function(options) {
|
||||
|
||||
var self = {},
|
||||
textKey = pandora.getClipTextKey(),
|
||||
that = Ox.Element()
|
||||
.css({
|
||||
height: '192px',
|
||||
|
|
@ -27,20 +26,24 @@ pandora.ui.itemClips = function(options) {
|
|||
|
||||
self.options.clips.forEach(function(clip, i) {
|
||||
Ox.Log('', 'CLIP', clip)
|
||||
var id = self.options.id + '/' + clip['in'],
|
||||
title = Ox.map(clip.annotations, function(annotation) {
|
||||
if(textKey == 'subtitles') {
|
||||
return annotation.layer == 'subtitles' ? annotation.value : 0;
|
||||
}
|
||||
return annotation.value;
|
||||
var annotations = clip.annotations.sort(function(a, b) {
|
||||
var layerA = pandora.site.clipLayers.indexOf(a.layer),
|
||||
layerB = pandora.site.clipLayers.indexOf(b.layer);
|
||||
return layerA < layerB ? -1
|
||||
: layerA > layerB ? 1
|
||||
: a.value < b.value ? -1
|
||||
: a.value > b.value ? 1
|
||||
: 0;
|
||||
}),
|
||||
url = '/' + self.options.id + '/' + self.height + 'p' + clip['in'] + '.jpg',
|
||||
$item = Ox.IconItem({
|
||||
imageHeight: self.height,
|
||||
imageWidth: self.width,
|
||||
id: id,
|
||||
id: clip.id,
|
||||
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,
|
||||
})
|
||||
.addClass('OxInfoIcon')
|
||||
|
|
@ -50,13 +53,15 @@ pandora.ui.itemClips = function(options) {
|
|||
: i == self.options.clips.length - 1 ? '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');
|
||||
that.append($item);
|
||||
});
|
||||
|
||||
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')) {
|
||||
// for videos, the click registers deeper inside
|
||||
$target = $target.parent().parent();
|
||||
|
|
@ -64,13 +69,16 @@ pandora.ui.itemClips = function(options) {
|
|||
if ($target.is('.OxSpecialTarget')) {
|
||||
$item = $target.parent().parent();
|
||||
item = self.options.id;
|
||||
annotation = $item.data('annotation');
|
||||
points = [$item.data('in'), $item.data('out')];
|
||||
set = {};
|
||||
set['videoPoints.' + item] = {
|
||||
set['videoPoints.' + item] = Ox.extend(annotation ? {
|
||||
annotation: annotation
|
||||
} : {}, {
|
||||
'in': points[0],
|
||||
out: points[1],
|
||||
position: points[0]
|
||||
};
|
||||
});
|
||||
pandora.UI.set(set);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -226,10 +226,13 @@ pandora.ui.mainMenu = function() {
|
|||
}
|
||||
},
|
||||
click: function(data) {
|
||||
if ([
|
||||
'home', 'about', 'news', 'tour', 'faq', 'terms', 'rights', 'contact', 'software',
|
||||
'signup', 'signin', 'signout', 'preferences', 'tv', 'help'
|
||||
].indexOf(data.id) > -1) {
|
||||
if (Ox.merge(
|
||||
['home', 'software'],
|
||||
pandora.site.sitePages.map(function(page) {
|
||||
return page.id;
|
||||
}),
|
||||
['signup', 'signin', 'signout', 'preferences', 'tv', 'help']
|
||||
).indexOf(data.id) > 1) {
|
||||
pandora.UI.set({page: data.id});
|
||||
} else if ([
|
||||
'newlist', 'newlistfromselection', 'newsmartlist', 'newsmartlistfromresults'
|
||||
|
|
|
|||
|
|
@ -247,7 +247,7 @@ pandora.enableDragAndDrop = function($list, canMove) {
|
|||
},
|
||||
draganddroppause: function(data) {
|
||||
var event = data._event, scroll,
|
||||
$parent, $grandparent, $panel, $bar, title;
|
||||
$parent, $grandparent, $panel, title;
|
||||
// fixme: should be named showLists in the user ui prefs!
|
||||
if (!pandora.user.ui.showSidebar) {
|
||||
if (event.clientX < 16 && event.clientY >= 44
|
||||
|
|
@ -261,10 +261,12 @@ pandora.enableDragAndDrop = function($list, canMove) {
|
|||
$panel = $parent.is('.OxCollapsePanel') ? $parent
|
||||
: $grandparent.is('.OxCollapsePanel') ? $grandparent : null;
|
||||
if ($panel) {
|
||||
$bar = $panel.children('.OxBar');
|
||||
title = $bar.children('.OxTitle')
|
||||
title = $panel.children('.OxBar').children('.OxTitle')
|
||||
.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) {
|
||||
//Ox.Log('', 'AT TOP', isAtListsTop(event), 'AT BOTTOM', isAtListsBottom(event))
|
||||
|
|
@ -496,12 +498,6 @@ pandora.getClipsQuery = function() {
|
|||
return clipsQuery;
|
||||
};
|
||||
|
||||
pandora.getClipTextKey = function() {
|
||||
return Ox.getObjectById(pandora.site.layers, 'subtitles')
|
||||
? 'subtitles'
|
||||
: 'annotations';
|
||||
};
|
||||
|
||||
(function() {
|
||||
var itemTitles = {};
|
||||
pandora.getDocumentTitle = function(itemTitle) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue