forked from 0x2620/pandora
replace Flipbook with VideoPreview
This commit is contained in:
parent
b2070dcbdd
commit
a54d18049e
7 changed files with 67 additions and 92 deletions
|
@ -104,11 +104,11 @@ pandora.URL = (function() {
|
|||
} else if (pandora.user.ui.sitePage != oldUserUI.sitePage) {
|
||||
pandora.$ui.mainPanel.replaceElement(1, pandora.$ui.rightPanel = pandora.ui.rightPanel());
|
||||
} else if (!pandora.user.ui.item || !oldUserUI.item) {
|
||||
pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info());
|
||||
pandora.$ui.mainPanel.replaceElement(1, pandora.$ui.rightPanel = pandora.ui.rightPanel());
|
||||
pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info());
|
||||
} else {
|
||||
pandora.$ui.contentPanel.replaceElement(1, pandora.ui.item());
|
||||
pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info());
|
||||
pandora.$ui.contentPanel.replaceElement(1, pandora.ui.item());
|
||||
}
|
||||
// fixme: should be 'editor', not 'timeline'
|
||||
if (
|
||||
|
|
|
@ -1,26 +0,0 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
pandora.ui.flipbook = function(item) {
|
||||
var that = Ox.Flipbook({
|
||||
}).bindEvent('click', function(event, data) {
|
||||
pandora.UI.set('videoPosition|' + item, data.position);
|
||||
pandora.URL.set(item + '/timeline');
|
||||
});
|
||||
pandora.api.get({id: item, keys: ['duration', 'posterFrame']}, function(result) {
|
||||
var duration = result.data.duration,
|
||||
posterFrame = result.data.posterFrame || parseInt(duration/2),
|
||||
steps = 24,
|
||||
framePrefix = '/' + item + '/' + that.height() + 'p',
|
||||
frames = {};
|
||||
Ox.range(0, duration, duration/steps).forEach(function(position) {
|
||||
position = parseInt(position);
|
||||
frames[position] = framePrefix + position + '.jpg';
|
||||
});
|
||||
that.options({
|
||||
frames: frames,
|
||||
icon: framePrefix + posterFrame + '.jpg',
|
||||
duration: duration
|
||||
});
|
||||
});
|
||||
return that;
|
||||
};
|
||||
|
|
@ -1,53 +1,36 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
pandora.ui.info = function() {
|
||||
pandora.ui.info = function(id) {
|
||||
id = id || pandora.user.ui.item;
|
||||
Ox.print('ID', id)
|
||||
var that = Ox.Element()
|
||||
.append(
|
||||
pandora.$ui.infoStill = Ox.Element()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
height: '96px'
|
||||
})
|
||||
)
|
||||
.append(
|
||||
pandora.$ui.infoTimeline = Ox.Element('<img>')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
height: '16px'
|
||||
})
|
||||
)
|
||||
.bindEvent({
|
||||
toggle: function(event, data) {
|
||||
pandora.UI.set({showInfo: !data.collapsed});
|
||||
pandora.resizeFolders();
|
||||
}
|
||||
});
|
||||
if (pandora.user.ui.item) {
|
||||
pandora.api.get({
|
||||
id: pandora.user.ui.item,
|
||||
keys: ['stream']
|
||||
}, function(result) {
|
||||
pandora.user.infoRatio = result.data.stream.aspectRatio;
|
||||
var width = that.width() || 256,
|
||||
height = width / pandora.user.infoRatio + 16;
|
||||
pandora.$ui.infoStill.removeElement();
|
||||
pandora.$ui.infoStill = pandora.ui.flipbook(pandora.user.ui.item)
|
||||
.appendTo(that.$element);
|
||||
pandora.$ui.infoStill.css({
|
||||
'height': (height-16) + 'px'
|
||||
});
|
||||
that.css({
|
||||
height: height + 'px'
|
||||
});
|
||||
pandora.resizeFolders();
|
||||
!pandora.user.ui.showInfo && pandora.$ui.leftPanel.css({bottom: -height});
|
||||
pandora.$ui.leftPanel.size(2, height);
|
||||
if (id) {
|
||||
pandora.api.get({id: id, keys:['stream']}, function(result) {
|
||||
var video = result.data.stream;
|
||||
height = Math.round(pandora.user.ui.sidebarSize / video.aspectRatio) + 16;
|
||||
pandora.$ui.videoPreview && pandora.$ui.videoPreview.removeElement();
|
||||
pandora.$ui.videoPreview = pandora.ui.videoPreview({
|
||||
id: id,
|
||||
video: video
|
||||
}).appendTo(pandora.$ui.info);
|
||||
pandora.user.infoRatio = video.aspectRatio;
|
||||
resize(height);
|
||||
});
|
||||
pandora.$ui.infoTimeline.attr({
|
||||
src: '/' + pandora.user.ui.item + '/timeline16p.png'
|
||||
} else if (pandora.$ui.leftPanel) {
|
||||
resize(32);
|
||||
}
|
||||
function resize(height) {
|
||||
!pandora.user.ui.showInfo && pandora.$ui.leftPanel.css({bottom: -height});
|
||||
pandora.$ui.leftPanel.size(2, height);
|
||||
that.animate({
|
||||
height: height + 'px'
|
||||
}, 250, function() {
|
||||
pandora.resizeFolders();
|
||||
});
|
||||
}
|
||||
return that;
|
||||
|
|
|
@ -21,6 +21,7 @@ pandora.ui.leftPanel = function() {
|
|||
})
|
||||
.bindEvent({
|
||||
resize: function(event, data) {
|
||||
Ox.print('LEFT PANEL RESIZE')
|
||||
var infoSize = Math.round(data / pandora.user.infoRatio) + 16;
|
||||
pandora.user.ui.sidebarSize = data;
|
||||
if (data < pandora.site.sectionButtonsWidth && pandora.$ui.sectionButtons) {
|
||||
|
@ -34,6 +35,10 @@ pandora.ui.leftPanel = function() {
|
|||
}
|
||||
!pandora.user.ui.showInfo && pandora.$ui.leftPanel.css({bottom: -infoSize});
|
||||
pandora.$ui.leftPanel.size(2, infoSize);
|
||||
pandora.$ui.videoPreview && pandora.$ui.videoPreview.options({
|
||||
frameHeight: infoSize - 16,
|
||||
frameWidth: data
|
||||
});
|
||||
pandora.resizeFolders();
|
||||
},
|
||||
resizeend: function(event, data) {
|
||||
|
|
|
@ -343,7 +343,6 @@ pandora.ui.list = function(view) { // fixme: remove view argument
|
|||
operator: '|'
|
||||
}
|
||||
}, function(result) {
|
||||
Ox.print('-- preview item', result.data.items[0])
|
||||
var item = result.data.items[0],
|
||||
title = item.title + ' (' + item.director + ')'
|
||||
ratio = item.poster.width / item.poster.height,
|
||||
|
@ -419,27 +418,7 @@ pandora.ui.list = function(view) { // fixme: remove view argument
|
|||
pandora.$ui.mainMenu.disableItem('copy');
|
||||
pandora.$ui.mainMenu.disableItem('openmovie');
|
||||
}
|
||||
if (data.ids.length == 1) {
|
||||
pandora.user.ui.listItem = data.ids[0];
|
||||
pandora.api.get({id: data.ids[0], keys:['stream']}, function(result) {
|
||||
pandora.user.infoRatio = result.data.stream.aspectRatio;
|
||||
var height = pandora.$ui.info.width() / pandora.user.infoRatio + 16;
|
||||
if(pandora.$ui.infoStill) pandora.$ui.infoStill.removeElement();
|
||||
pandora.$ui.infoStill = pandora.ui.flipbook(data.ids[0])
|
||||
.appendTo(pandora.$ui.info.$element);
|
||||
pandora.$ui.infoStill.css({
|
||||
'height': (height - 16) + 'px'
|
||||
});
|
||||
!pandora.user.ui.showInfo && pandora.$ui.leftPanel.css({bottom: -height});
|
||||
pandora.$ui.leftPanel.size(2, height);
|
||||
pandora.$ui.info.animate({
|
||||
height: height + 'px'
|
||||
}, 250, function() {
|
||||
pandora.resizeFolders();
|
||||
});
|
||||
});
|
||||
pandora.$ui.infoTimeline.attr('src', '/' + data.ids[0] + '/timeline16p.png')
|
||||
}
|
||||
pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info(data.ids[0]));
|
||||
pandora.api.find({
|
||||
query: {
|
||||
conditions: $.map(data.ids, function(id, i) {
|
||||
|
|
34
static/js/pandora/ui/videoPreview.js
Normal file
34
static/js/pandora/ui/videoPreview.js
Normal file
|
@ -0,0 +1,34 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
|
||||
pandora.ui.videoPreview = function(data) {
|
||||
var frameWidth = pandora.user.ui.sidebarSize,
|
||||
frameHeight = Math.round(frameWidth / data.video.aspectRatio),
|
||||
that = Ox.VideoPreview({
|
||||
duration: data.video.duration,
|
||||
getFrame: function(position) {
|
||||
var width = pandora.user.ui.sidebarSize,
|
||||
height = Math.round(width / pandora.user.infoRatio),
|
||||
resolution = Ox.filter(data.video.resolutions, function(resolution, i) {
|
||||
return resolution >= height || i == data.video.resolutions.length - 1;
|
||||
})[0];
|
||||
return '/' + data.id + '/' + resolution + 'p' + (
|
||||
Ox.isUndefined(position) ? '' : position
|
||||
) + '.jpg';
|
||||
},
|
||||
frameHeight: frameHeight,
|
||||
frameWidth: frameWidth,
|
||||
timeline: '/' + data.id + '/timeline16p.png',
|
||||
})
|
||||
.bindEvent({
|
||||
click: function(event) {
|
||||
pandora.URL.set(
|
||||
'/' + data.id + '/timeline/' + Ox.formatDuration(event.position, 2)
|
||||
);
|
||||
}
|
||||
});
|
||||
function getResolution() {
|
||||
return
|
||||
}
|
||||
return that;
|
||||
};
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
"js/pandora/ui/backButton.js",
|
||||
"js/pandora/ui/leftPanel.js",
|
||||
"js/pandora/ui/appPanel.js",
|
||||
"js/pandora/ui/flipbook.js",
|
||||
"js/pandora/ui/videoPreview.js",
|
||||
"js/pandora/ui/editor.js",
|
||||
"js/pandora/ui/infoView.js",
|
||||
"js/pandora/ui/mediaView.js"
|
||||
|
|
Loading…
Reference in a new issue