pandora/static/js/clipList.js

274 lines
13 KiB
JavaScript
Raw Normal View History

2011-09-30 10:33:45 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-11-05 17:04:10 +00:00
'use strict';
2011-09-30 10:33:45 +00:00
pandora.ui.clipList = function(videoRatio) {
var ui = pandora.user.ui,
2013-07-15 14:45:54 +00:00
fixedRatio = !ui.item ? pandora.site.video.previewRatio : videoRatio,
2011-09-30 10:33:45 +00:00
isClipView = !ui.item ? ui.listView == 'clip' : ui.itemView == 'clips',
isEmbed = pandora.isEmbedURL(),
2011-09-30 10:33:45 +00:00
that = Ox.IconList({
2013-07-15 11:39:23 +00:00
draggable: true,
2012-02-01 12:01:39 +00:00
find: !ui.item ? pandora.getItemFind(ui.find) : ui.itemFind,
2011-09-30 10:33:45 +00:00
fixedRatio: fixedRatio,
item: function(data, sort, size) {
size = size || 128; // fixme: is this needed?
var ratio, width, height,
2011-10-31 14:15:40 +00:00
format, info, sortKey, title, url;
2011-09-30 10:33:45 +00:00
if (!ui.item) {
ratio = data.videoRatio;
width = ratio > fixedRatio ? size : Math.round(size * ratio / fixedRatio);
height = Math.round(width / ratio);
} else {
width = fixedRatio > 1 ? size : Math.round(size * fixedRatio);
height = fixedRatio > 1 ? Math.round(size / fixedRatio) : size;
}
2012-02-01 12:01:39 +00:00
title = data.annotations ? data.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;
}).map(function(annotation) {
2012-03-09 22:28:52 +00:00
return Ox.stripTags(annotation.value.replace(/\n/g, ' '));
2012-02-01 12:01:39 +00:00
}).join('; ') : '';
url = pandora.getMediaURL(
'/' + data.id.split('/')[0] + '/' + height + 'p' + data['in'] + '.jpg'
);
sortKey = sort[0].key;
if (['text', 'position', 'duration', 'random'].indexOf(sortKey) > -1) {
2011-10-10 07:32:50 +00:00
info = Ox.formatDuration(data['in']) + ' - '
+ Ox.formatDuration(data.out);
} else {
format = pandora.getSortKeyData(sortKey).format;
2011-10-26 14:52:23 +00:00
if (format) {
info = (
/^color/.test(format.type.toLowerCase()) ? Ox.Theme : Ox
)['format' + Ox.toTitleCase(format.type)].apply(
2012-05-24 08:22:56 +00:00
this, [data[sortKey]].concat(format.args || [])
2011-10-26 14:52:23 +00:00
);
2013-03-03 12:38:41 +00:00
if (sortKey == 'rightslevel') {
info.css({width: size * 0.75 + 'px'});
2013-03-03 12:38:41 +00:00
}
2011-10-26 14:52:23 +00:00
} else {
info = data[sortKey];
}
}
2011-09-30 10:33:45 +00:00
return {
height: height,
id: data.id,
info: info,
2011-10-02 18:16:28 +00:00
title: title,
2011-09-30 10:33:45 +00:00
url: url,
width: width
};
},
2011-10-01 13:51:18 +00:00
items: function(data, callback) {
if (!isClipView) {
// fixme: this will have to be updated
2013-08-05 22:45:25 +00:00
callback({data: {items: data.keys ? [] : 0}});
2011-10-01 13:51:18 +00:00
return;
}
2011-10-19 16:20:12 +00:00
var itemsQuery, query;
2011-09-30 10:33:45 +00:00
if (!ui.item) {
2011-10-19 16:20:12 +00:00
itemsQuery = ui.find;
2011-09-30 10:33:45 +00:00
query = {conditions: [], operator: '&'};
// if the item query contains a layer condition,
// then this condition is added to the clip query
2011-10-19 16:20:12 +00:00
itemsQuery.conditions.forEach(function(condition) {
2012-06-20 17:41:17 +00:00
if (
condition.key == 'annotations'
|| Ox.getIndexById(pandora.site.layers, condition.key) > -1
) {
query.conditions.push(condition);
2011-09-30 10:33:45 +00:00
}
});
} else {
2011-10-19 16:20:12 +00:00
itemsQuery = {
2011-09-30 10:33:45 +00:00
conditions:[{key: 'id', value: ui.item, operator: '=='}],
operator: '&'
};
2012-02-01 12:01:39 +00:00
query = {
conditions: ui.itemFind === '' ? [] : [{
key: 'annotations',
value: ui.itemFind,
operator: '='
}],
operator: '&'
};
2011-09-30 10:33:45 +00:00
}
2012-06-20 17:40:52 +00:00
pandora.api.findClips(Ox.extend(data, {
2011-10-19 16:20:12 +00:00
itemsQuery: itemsQuery,
2011-09-30 10:33:45 +00:00
query: query
2012-06-20 17:40:52 +00:00
}), callback);
2011-10-01 13:51:18 +00:00
},
2012-05-24 08:24:40 +00:00
keys: ['annotations', 'id', 'in', 'out'].concat(
2011-09-30 10:33:45 +00:00
!ui.item ? ['videoRatio'] : []
),
orientation: isEmbed && !isClipView ? 'horizontal' : 'both',
2011-09-30 10:33:45 +00:00
size: 128,
sort: !ui.item ? ui.listSort : ui.itemSort,
unique: 'id'
})
.addClass('OxMedia')
2011-09-30 10:33:45 +00:00
.bindEvent({
2013-07-13 22:59:51 +00:00
copy: function(data) {
var items = data.ids.map(function(id) {
var item = !ui.item ? id.split('/')[0] : ui.item,
annotation = that.value(id, 'annotations')[0].id;
2013-08-02 19:38:18 +00:00
return annotation || item + '/' + that.value(id, 'in') + '-' + that.value(id, 'out');
2013-07-13 22:59:51 +00:00
})
pandora.clipboard.copy(items, 'clip');
2013-07-13 22:59:51 +00:00
},
2013-07-14 17:44:01 +00:00
copyadd: function(data) {
var items = data.ids.map(function(id) {
var item = !ui.item ? id.split('/')[0] : ui.item,
annotation = that.value(id, 'annotations')[0].id;
2013-08-02 19:38:18 +00:00
return annotation || item + '/' + that.value(id, 'in') + '-' + that.value(id, 'out');
2013-07-14 17:44:01 +00:00
})
pandora.clipboard.add(items, 'clip');
2013-07-14 17:44:01 +00:00
},
gainfocus: function() {
pandora.$ui.mainMenu.replaceItemMenu();
},
2011-09-30 10:33:45 +00:00
init: function(data) {
if (!ui.item && ui.listView == 'clip'/* && pandora.$ui.statusbar*/) {
pandora.$ui.statusbar.set('total', data);
2011-09-30 10:33:45 +00:00
}
},
open: function(data) {
var id = data.ids[0],
item = !ui.item ? id.split('/')[0] : ui.item,
annotation = that.value(id, 'annotations')[0].id,
2011-09-30 10:33:45 +00:00
points = {
annotation: annotation ? annotation.split('/')[1] : '',
2011-09-30 10:33:45 +00:00
'in': that.value(id, 'in'),
2012-01-20 18:10:25 +00:00
out: that.value(id, 'out'),
position: that.value(id, 'in')
2011-09-30 10:33:45 +00:00
},
2013-03-01 12:02:51 +00:00
set;
if (isEmbed) {
window.open( '/' + item + '/'
+ (annotation ? points.annotation : points['in'] + ',' + points.out),
'_blank');
2013-03-01 12:02:51 +00:00
} else {
2011-09-30 10:33:45 +00:00
set = {
item: item,
itemView: pandora.user.ui.videoView
};
2013-03-01 12:02:51 +00:00
set['videoPoints.' + item] = Ox.extend(points, {
position: points['in']
});
if (['accessed', 'timesaccessed'].indexOf(ui.listSort[0].key) > -1) {
Ox.Request.clearCache('find');
}
pandora.UI.set(set);
}
2011-09-30 10:33:45 +00:00
},
openpreview: function(data) {
// on press space key
2013-07-15 09:58:20 +00:00
if (data.ids.length == 1) {
var $video = that.find('.OxItem.OxSelected > .OxIcon > .OxVideoPlayer');
if ($video) {
// trigger singleclick
$video.trigger('mousedown');
Ox.UI.$window.trigger('mouseup');
}
2011-09-30 10:33:45 +00:00
}
that.closePreview();
},
select: function(data) {
2013-07-15 09:58:20 +00:00
if (data.ids.length == 1) {
2011-09-30 10:33:45 +00:00
var id = data.ids[0],
item = id.split('/')[0], width, height,
$img = that.find('.OxItem.OxSelected > .OxIcon > img'),
$video = that.find('.OxItem.OxSelected > .OxIcon > .OxVideoPlayer'),
size = 128, ratio, width, height;
if ($img.length) {
if (!ui.item) {
ratio = that.value(id, 'videoRatio');
width = ratio > fixedRatio ? size : Math.round(size * ratio / fixedRatio);
height = Math.round(width / ratio);
} else {
width = fixedRatio > 1 ? size : Math.round(size * fixedRatio);
height = fixedRatio > 1 ? Math.round(size / fixedRatio) : size;
}
2011-10-25 13:59:27 +00:00
pandora.api.get({id: item, keys: ['durations', 'rightslevel']}, function(result) {
2011-09-30 10:33:45 +00:00
var points = [that.value(id, 'in'), that.value(id, 'out')],
$player = Ox.VideoPlayer({
2011-10-25 13:59:27 +00:00
censored: pandora.site.capabilities.canPlayClips[pandora.user.level] < result.data.rightslevel
? [{'in': 0, out: points[1] - points[0]}]
2011-10-22 21:03:28 +00:00
: [],
2012-04-22 10:11:30 +00:00
censoredIcon: pandora.site.cantPlay.icon,
censoredTooltip: pandora.site.cantPlay.text,
2011-09-30 10:33:45 +00:00
height: height,
paused: true,
poster: pandora.getMediaURL(
'/' + item + '/' + height + 'p' + points[0] + '.jpg'
),
2011-10-03 10:58:47 +00:00
rewind: true,
video: pandora.getClipVideos({
item: item,
parts: result.data.durations.length,
durations: result.data.durations,
'in': points[0],
out: points[1]
}, Ox.min(pandora.site.video.resolutions)),
2011-10-19 10:47:33 +00:00
width: width
2011-09-30 10:33:45 +00:00
})
.addClass('OxTarget')
.bindEvent({
2012-04-22 10:11:30 +00:00
censored: function() {
pandora.URL.push(pandora.site.cantPlay.link);
},
2011-09-30 10:33:45 +00:00
// doubleclick opens item
2012-04-22 10:11:30 +00:00
singleclick: function(e) {
if (
$player.$element.is('.OxSelectedVideo')
&& !$(e.target).is('.OxCensoredIcon')
) {
$player.togglePaused();
}
2011-09-30 10:33:45 +00:00
}
});
$img.replaceWith($player.$element);
$('.OxSelectedVideo').removeClass('OxSelectedVideo');
$player.$element.addClass('OxSelectedVideo');
});
} else if ($video.length) {
// item select fires before video click
// so we have to make sure that selecting
// an item that already has a video
// doesn't click through to play
///*
2011-09-30 10:33:45 +00:00
setTimeout(function() {
$('.OxSelectedVideo').removeClass('OxSelectedVideo');
$video.addClass('OxSelectedVideo');
}, 300);
//*/
2011-09-30 10:33:45 +00:00
}
2013-07-14 15:36:49 +00:00
!ui.item && pandora.UI.set({listSelection: [item]});
!isEmbed && pandora.$ui.mainMenu.enableItem('findsimilar');
2011-09-30 10:33:45 +00:00
} else {
$('.OxSelectedVideo').removeClass('OxSelectedVideo');
2013-07-14 15:36:49 +00:00
!ui.item && pandora.UI.set({listSelection: []});
!isEmbed && pandora.$ui.mainMenu.disableItem('findsimilar');
2011-09-30 10:33:45 +00:00
}
pandora.$ui.mainMenu.replaceItemMenu();
},
pandora_itemsort: function(data) {
2011-10-29 17:46:46 +00:00
that.options({sort: data.value});
},
pandora_listsort: function(data) {
that.options({sort: data.value});
2011-09-30 10:33:45 +00:00
}
});
2013-07-14 17:44:01 +00:00
pandora.enableDragAndDrop(that, true, 'edits');
2011-09-30 10:33:45 +00:00
return that;
2011-10-02 18:16:28 +00:00
}