update pad.ma home screen (fixes #448 and #489)

This commit is contained in:
rolux 2012-02-17 09:12:48 +00:00
parent 6e193cb681
commit 5b144d6cf1
3 changed files with 94 additions and 27 deletions

View file

@ -15,18 +15,15 @@ Ox.load('UI', {
user: data.user.level == 'guest' ? Ox.clone(data.site.user) : data.user,
ui: {},
clip: function(options) {
var that = Ox.Element();
pandora.api.get({id: options.item, keys: []}, function(result) {
var video = {};
pandora.site.video.resolutions.forEach(function(resolution) {
video[resolution] = Ox.range(result.data.parts).map(function(i) {
var part = (i + 1),
prefix = pandora.site.site.videoprefix.replace('PART', part);
return prefix + '/' + options.item + '/'
+ resolution + 'p' + part + '.' + pandora.user.videoFormat;
});
});
var that = Ox.Element(),
keys = [ 'cuts', 'director', 'duration', 'layers', 'parts', 'posterFrame', 'rendered', 'rightslevel', 'size', 'title', 'videoRatio', 'year'];
pandora.api.get({id: options.item, keys: keys}, function(result) {
var video = {},
videoOptions = getVideoOptions(result.data);
Ox.print(videoOptions);
Ox.print('/' + options.item + '/' + 'timeline16p.png');
that.append(pandora.player = Ox.VideoPlayer({
censored: videoOptions.censored,
controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'settings'],
enableFind: false,
enableFullscreen: true,
@ -40,13 +37,14 @@ Ox.load('UI', {
out: options.out,
paused: options.paused,
position: options['in'],
poster: '/' + options.item + '/' + '128p' + options['in'] +'.jpg',
poster: '/' + options.item + '/' + '96p' + options['in'] +'.jpg',
resolution: pandora.user.ui.videoResolution,
showMarkers: false,
showMilliseconds: 0,
subtitles: videoOptions.subtitles,
timeline: '/' + options.item + '/' + 'timeline16p.png',
title: result.data.title,
video: video,
video: videoOptions.video,
width: document.width
})
.bindEvent({
@ -107,4 +105,56 @@ Ox.load('UI', {
}
}
});
function getVideoOptions(data) {
var canPlayClips = data.editable || pandora.site.capabilities.canPlayClips[pandora.user.level] >= data.rightslevel,
canPlayVideo = data.editable || pandora.site.capabilities.canPlayVideo[pandora.user.level] >= data.rightslevel,
options = {};
options.subtitles = data.layers.subtitles
? data.layers.subtitles.map(function(subtitle) {
return {'in': subtitle['in'], out: subtitle.out, text: subtitle.value};
})
: [];
options.censored = canPlayVideo ? []
: canPlayClips ? (
options.subtitles.length
? Ox.merge(
options.subtitles.map(function(subtitle, i) {
return {
'in': i == 0 ? 0 : options.subtitles[i - 1].out,
out: subtitle['in']
};
}),
[{'in': Ox.last(options.subtitles).out, out: data.duration}]
)
: Ox.range(0, data.duration - 5, 60).map(function(position) {
return {
'in': position + 5,
out: Math.min(position + 60, data.duration)
};
})
)
: [{'in': 0, out: data.duration}];
options.video = {};
pandora.site.video.resolutions.forEach(function(resolution) {
options.video[resolution] = Ox.range(data.parts).map(function(i) {
var part = (i + 1),
prefix = pandora.site.site.videoprefix.replace('{part}', part);
return prefix + '/' + (data.item || pandora.user.ui.item) + '/'
+ resolution + 'p' + part + '.' + pandora.user.videoFormat;
});
});
options.layers = [];
pandora.site.layers.forEach(function(layer, i) {
options.layers[i] = Ox.extend({}, layer, {
items: data.layers[layer.id].map(function(annotation) {
annotation.duration = Math.abs(annotation.out - annotation['in']);
annotation.editable = annotation.editable
|| annotation.user == pandora.user.username
|| pandora.site.capabilities['canEditAnnotations'][pandora.user.level];
return annotation;
})
});
});
return options;
}
});

View file

@ -262,12 +262,14 @@ pandora.ui.home = function() {
sort: [{key: 'position', operator: '+'}]
}, function(result) {
var lists = result.data.items,
items = 8, mouse = false, position = 0, selected = 0,
counter = 0, items = 8, mouse = false, position = 0, selected = 0,
color = Ox.Theme() == 'classic'
? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)',
? 'rgb(32, 32, 32)' : 'rgb(224, 224, 224)',
$label, $icon, $text,
$listsBox, $listsContainer, $listsContent, $list = [],
$listsBox, $listsContainer, $listsContent,
$listBox = [], $listIcon = [],
$previousButton, $nextButton;
$lists.empty();
if (lists.length) {
$label = Ox.Label({
textAlign: 'center',
@ -396,11 +398,14 @@ pandora.ui.home = function() {
.hide()
.bindEvent({
mousedown: function() {
counter = 0;
scrollToPosition(position + 1, true);
},
mouserepeat: function() {
if (counter++ % 10 == 0) {
scrollToPosition(position + 1, false);
}
}
})
.appendTo($listsBox);
$listsBox.bind({
@ -417,6 +422,10 @@ pandora.ui.home = function() {
}, 250, function() {
$(this).hide();
});
},
mousewheel: function(e, delta, deltaX, deltaY) {
Ox.print('mwd', deltaX)
scrollToPosition(position + Math.round(deltaX), true);
}
});
self.keydown = function(e) {
@ -440,7 +449,19 @@ pandora.ui.home = function() {
Ox.$document.bind({keydown: self.keydown});
}
lists.forEach(function(list, i) {
$list[i] = Ox.Element({
$listBox[i] = $('<div>')
.css({
float: 'left',
width: '57px',
height: '57px',
padding: '2px',
margin: '2px',
borderRadius: '16px',
//background: i == selected ? color : 'transparent',
boxShadow: '0 0 2px ' + (i == selected ? color : 'transparent')
})
.appendTo($listsContent);
$listIcon[i] = Ox.Element({
element: '<img>',
tooltip: list.name
})
@ -449,13 +470,9 @@ pandora.ui.home = function() {
+ list.name + '/icon256.jpg'
})
.css({
float: 'left',
width: '57px',
height: '57px',
borderRadius: '16px',
margin: '4px',
boxShadow: i == selected
? '0 0 2px ' + color : '',
cursor: 'pointer'
})
.bindEvent({
@ -466,7 +483,7 @@ pandora.ui.home = function() {
selectList(i);
}
})
.appendTo($listsContent);
.appendTo($listBox[i]);
});
}
$lists.animate({opacity: 1}, 250);
@ -506,7 +523,7 @@ pandora.ui.home = function() {
opacity: 0
}, 250, function() {
$nextButton.hide();
});;
});
} else {
$nextButton.addClass('visible');
}
@ -518,11 +535,11 @@ pandora.ui.home = function() {
}
function selectList(i) {
if (i >= 0 && i <= lists.length - 1 && i != selected) {
$list[selected].css({
$listBox[selected].css({
boxShadow: 'none'
});
selected = i;
$list[selected].css({
$listBox[selected].css({
boxShadow: '0 0 2px ' + color
});
if (selected < position) {

View file

@ -246,7 +246,7 @@ pandora.ui.infoView = function(data) {
clickLink: pandora.clickLink,
editable: key != 'duration',
format: function(value) {
return key != 'duration' ? formatValue(value.split(', '), key)
return key != 'duration' ? formatValue(value, key)
: value < 60 ? Math.round(value) + ' sec'
: Math.round(value / 60) + ' min';
},