info view/clips annotations
This commit is contained in:
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,
|
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,
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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('; ').appendTo($div);
|
||||||
$('<div>')
|
$('<div>')
|
||||||
.css({float: 'left'})
|
.css({float: 'left'})
|
||||||
.html(formatKey(key).replace('</span>', ' </span>'))
|
.html(formatKey(key).replace('</span>', ' </span>'))
|
||||||
|
@ -234,7 +235,6 @@ pandora.ui.infoView = function(data) {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo($div);
|
.appendTo($div);
|
||||||
key == 'country' && $('<div>').css({float: 'left'}).html('; ').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 = [];
|
||||||
|
|
|
@ -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>', ' </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('; ').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>')
|
$('<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(
|
.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>', ' </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>', ' </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({
|
||||||
|
|
|
@ -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);
|
||||||
},
|
},
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue