pandora/static/js/itemClips.js

131 lines
5.1 KiB
JavaScript
Raw Permalink Normal View History

2011-11-05 17:04:10 +00:00
'use strict';
2011-10-19 10:47:33 +00:00
pandora.ui.itemClips = function(options) {
var self = {},
that = Ox.Element()
.css({
height: '192px',
margin: '4px'
})
.bindEvent({
doubleclick: doubleclick,
singleclick: singleclick
2011-10-19 10:47:33 +00:00
});
self.options = Ox.extend({
2011-10-19 16:40:52 +00:00
clips: [],
2011-10-19 10:47:33 +00:00
duration: 0,
id: '',
ratio: 8/5
}, options);
self.size = 128;
self.width = self.options.ratio > 1 ? self.size : Math.round(self.size * self.options.ratio);
self.height = self.options.ratio > 1 ? Math.round(self.size / self.options.ratio) : self.size;
2011-10-19 16:40:52 +00:00
self.options.clips.forEach(function(clip, i) {
2012-01-20 18:10:25 +00:00
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;
2011-10-19 16:40:52 +00:00
}),
url = pandora.getMediaURL(
'/' + self.options.id + '/' + self.height + 'p' + clip['in'] + '.jpg'
),
2011-10-19 10:47:33 +00:00
$item = Ox.IconItem({
2012-02-01 12:01:39 +00:00
find: pandora.user.ui.itemFind,
2011-10-19 10:47:33 +00:00
imageHeight: self.height,
imageWidth: self.width,
2012-01-20 18:10:25 +00:00
id: clip.id,
2011-10-19 10:47:33 +00:00
info: Ox.formatDuration(clip['in']) + ' - ' + Ox.formatDuration(clip.out),
2012-01-20 18:10:25 +00:00
title: annotations.map(function(annotation) {
2012-03-09 22:28:52 +00:00
return Ox.stripTags(annotation.value.replace(/\n/g, ' '));
2012-01-20 18:10:25 +00:00
}).join('; '),
2012-05-26 15:46:24 +00:00
url: url
2011-10-19 10:47:33 +00:00
})
.addClass('OxInfoIcon')
.css({
float: 'left',
margin: i == 0 ? '2px 2px 2px -2px'
: i == self.options.clips.length - 1 ? '2px -2px 2px 2px'
: '2px'
2011-10-19 10:47:33 +00:00
})
2013-03-04 15:23:23 +00:00
.data(
// default 5 second clips are annotations without id
Ox.extend(annotations.length && annotations[0].id ? {
annotation: annotations[0].id.split('/')[1]
} : {}, {'in': clip['in'], out: clip.out})
);
2012-05-22 13:15:16 +00:00
$item.find('.OxTarget').addClass('OxSpecialTarget');
2011-10-19 10:47:33 +00:00
that.append($item);
});
function doubleclick(data) {
2012-01-20 18:10:25 +00:00
var $item, $target = $(data.target), annotation, item, points, set;
2011-10-19 13:00:10 +00:00
if ($target.parent().parent().is('.OxSpecialTarget')) {
// for videos, the click registers deeper inside
$target = $target.parent().parent();
}
if ($target.is('.OxSpecialTarget')) {
$item = $target.parent().parent();
item = self.options.id;
2012-01-20 18:10:25 +00:00
annotation = $item.data('annotation');
points = [$item.data('in'), $item.data('out')];
set = {};
2012-01-20 18:10:25 +00:00
set['videoPoints.' + item] = Ox.extend(annotation ? {
annotation: annotation
} : {}, {
'in': points[0],
out: points[1],
position: points[0]
2012-01-20 18:10:25 +00:00
});
pandora.UI.set(set);
}
}
function singleclick(data) {
2011-10-19 13:00:10 +00:00
var $img, $item, $target = $(data.target), points;
2011-10-19 10:47:33 +00:00
if ($target.is('.OxSpecialTarget')) {
$item = $target.parent().parent();
$img = $item.find('.OxIcon > img');
points = [$item.data('in'), $item.data('out')];
if ($img.length) {
pandora.api.get({id: self.options.id, keys: ['durations', 'rightslevel', 'streams']}, function(result) {
2011-10-19 10:47:33 +00:00
var partsAndPoints = pandora.getVideoPartsAndPoints(
result.data.durations, points
),
$player = Ox.VideoPlayer({
2017-11-04 09:53:27 +00:00
censored: pandora.hasCapability('canPlayClips') < result.data.rightslevel
2011-10-22 21:03:28 +00:00
? [{'in': partsAndPoints.points[0], out: partsAndPoints.points[1]}]
: [],
enableMouse: true,
2011-10-19 10:47:33 +00:00
height: self.height,
'in': partsAndPoints.points[0],
out: partsAndPoints.points[1],
playInToOut: true,
poster: pandora.getMediaURL(
'/' + self.options.id + '/' + self.height + 'p' + points[0] + '.jpg'
),
2011-10-19 10:47:33 +00:00
rewind: true,
video: partsAndPoints.parts.map(function(i) {
return pandora.getVideoURL(self.options.id, Ox.min(pandora.site.video.resolutions), i + 1,
null, result.data.streams[i]);
2011-10-19 10:47:33 +00:00
}),
width: self.width
})
.addClass('OxTarget OxSpecialTarget');
2011-10-19 10:47:33 +00:00
$img.replaceWith($player.$element);
});
}
}
}
return that;
2011-10-29 15:24:54 +00:00
};