use flipbook in info panel
This commit is contained in:
j
parent
f3f6d5a47b
commit
66302e0ded
1 changed files with 64 additions and 66 deletions
|
|
@ -912,6 +912,29 @@
|
||||||
}
|
}
|
||||||
return that;
|
return that;
|
||||||
},
|
},
|
||||||
|
flipbook: function(item) {
|
||||||
|
var that = new Ox.Flipbook({
|
||||||
|
}).bindEvent('click', function(event, data) {
|
||||||
|
alert(data.position);
|
||||||
|
});
|
||||||
|
pandora.api.getItem(item, function(result) {
|
||||||
|
var duration = result.data.item.duration,
|
||||||
|
posterFrame = result.data.item.posterFrame || parseInt(duration/2),
|
||||||
|
steps = 24,
|
||||||
|
framePrefix = '/' + item + '/frame/' + that.width() + '/',
|
||||||
|
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;
|
||||||
|
},
|
||||||
folderBrowser: function(id) {
|
folderBrowser: function(id) {
|
||||||
var that = new Ox.SplitPanel({
|
var that = new Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
|
|
@ -1738,7 +1761,7 @@
|
||||||
info: function() {
|
info: function() {
|
||||||
var that = new Ox.Element()
|
var that = new Ox.Element()
|
||||||
.append(
|
.append(
|
||||||
app.$ui.infoStill = new Ox.Element('img')
|
app.$ui.infoStill = new Ox.Element('div')
|
||||||
.css({
|
.css({
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
left: 0,
|
left: 0,
|
||||||
|
|
@ -1761,6 +1784,26 @@
|
||||||
resizeFolders();
|
resizeFolders();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
if(app.user.ui.item) {
|
||||||
|
pandora.api.getItem(app.user.ui.item, function(result) {
|
||||||
|
app.ui.infoRatio = result.data.item.stream.aspectRatio;
|
||||||
|
var width = that.width() || 256,
|
||||||
|
height = width / app.ui.infoRatio + 16;
|
||||||
|
app.$ui.infoStill.remove();
|
||||||
|
app.$ui.infoStill = ui.flipbook(app.user.ui.item)
|
||||||
|
.appendTo(that.$element);
|
||||||
|
app.$ui.infoStill.css({
|
||||||
|
'height': (height-16) + 'px'
|
||||||
|
});
|
||||||
|
that.css({
|
||||||
|
height: height + 'px'
|
||||||
|
});
|
||||||
|
resizeFolders();
|
||||||
|
!app.user.ui.showInfo && app.$ui.leftPanel.css({bottom: -height});
|
||||||
|
app.$ui.leftPanel.size(2, height );
|
||||||
|
});
|
||||||
|
app.$ui.infoTimeline.attr('src', '/'+app.user.ui.item+'/timeline.16.png')
|
||||||
|
}
|
||||||
return that;
|
return that;
|
||||||
},
|
},
|
||||||
item: function() {
|
item: function() {
|
||||||
|
|
@ -2336,71 +2379,24 @@
|
||||||
app.$ui.mainMenu.disableItem('openmovie');
|
app.$ui.mainMenu.disableItem('openmovie');
|
||||||
}
|
}
|
||||||
if (data.ids.length == 1) {
|
if (data.ids.length == 1) {
|
||||||
$still = $('<img>')
|
pandora.api.getItem(data.ids[0], function(result) {
|
||||||
.attr({
|
app.ui.infoRatio = result.data.item.stream.aspectRatio;
|
||||||
src: '/' + data.ids[0] + '/icon.jpg'
|
var height = app.$ui.info.width() / app.ui.infoRatio + 16;
|
||||||
})
|
|
||||||
.one('load', function() {
|
|
||||||
if (data.ids[0] != app.ui.selectedMovies[0]) {
|
|
||||||
//Ox.print('cancel after load...')
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var image = $still[0],
|
|
||||||
imageWidth = image.width,
|
|
||||||
imageHeight = image.height,
|
|
||||||
width = app.$ui.info.width(),
|
|
||||||
height = imageHeight * width / imageWidth;
|
|
||||||
app.ui.infoRatio = width / height;
|
|
||||||
!app.user.ui.showInfo && app.$ui.leftPanel.css({bottom: -height - 16});
|
|
||||||
app.$ui.leftPanel.size(2, height + 16);
|
|
||||||
$still.css({
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
//width: width + 'px',
|
|
||||||
//height: height + 'px',
|
|
||||||
width: '100%',
|
|
||||||
opacity: 0
|
|
||||||
})
|
|
||||||
.appendTo(app.$ui.info.$element)
|
|
||||||
.animate({
|
|
||||||
opacity: 1
|
|
||||||
});
|
|
||||||
app.$ui.infoStill.animate({
|
|
||||||
opacity: 0
|
|
||||||
}, 250);
|
|
||||||
app.$ui.info.animate({
|
|
||||||
height: (height + 16) + 'px'
|
|
||||||
}, 250, function() {
|
|
||||||
app.$ui.infoStill.remove();
|
app.$ui.infoStill.remove();
|
||||||
app.$ui.infoStill = $still;
|
app.$ui.infoStill = ui.flipbook(data.ids[0])
|
||||||
|
.appendTo(app.$ui.info.$element);
|
||||||
|
app.$ui.infoStill.css({
|
||||||
|
'height': (height - 16) + 'px'
|
||||||
|
});
|
||||||
|
!app.user.ui.showInfo && app.$ui.leftPanel.css({bottom: -height});
|
||||||
|
app.$ui.leftPanel.size(2, height);
|
||||||
|
app.$ui.info.animate({
|
||||||
|
height: height + 'px'
|
||||||
|
}, 250, function() {
|
||||||
resizeFolders();
|
resizeFolders();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
/*
|
app.$ui.infoTimeline.attr('src', '/'+data.ids[0]+'/timeline.16.png')
|
||||||
$timeline = $('<img>')
|
|
||||||
.attr({
|
|
||||||
src: 'http://0xdb.org/' + data.ids[0] + '/timeline/timeline.png'
|
|
||||||
})
|
|
||||||
.one('load', function() {
|
|
||||||
$timeline.css({
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
bottom: '16px',
|
|
||||||
opacity: 0
|
|
||||||
})
|
|
||||||
.appendTo($ui.info.$element)
|
|
||||||
.animate({
|
|
||||||
opacity: 1
|
|
||||||
});
|
|
||||||
$ui.infoTimeline.animate({
|
|
||||||
opacity: 0
|
|
||||||
}, 250, function() {
|
|
||||||
$ui.infoTimeline.remove();
|
|
||||||
$ui.infoTimeline = $timeline;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
*/
|
|
||||||
}
|
}
|
||||||
pandora.api.find({
|
pandora.api.find({
|
||||||
query: {
|
query: {
|
||||||
|
|
@ -3872,8 +3868,10 @@
|
||||||
app.$ui.mainPanel.replace(1, app.$ui.rightPanel = ui.rightPanel());
|
app.$ui.mainPanel.replace(1, app.$ui.rightPanel = ui.rightPanel());
|
||||||
} else if (!app.user.ui.item || !old.user.ui.item) {
|
} else if (!app.user.ui.item || !old.user.ui.item) {
|
||||||
app.$ui.mainPanel.replace(1, app.$ui.rightPanel = ui.rightPanel());
|
app.$ui.mainPanel.replace(1, app.$ui.rightPanel = ui.rightPanel());
|
||||||
|
app.$ui.leftPanel.replace(2, app.$ui.info = ui.info());
|
||||||
} else {
|
} else {
|
||||||
app.$ui.contentPanel.replace(1, ui.item());
|
app.$ui.contentPanel.replace(1, ui.item());
|
||||||
|
app.$ui.leftPanel.replace(2, app.$ui.info = ui.info());
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
old.user.ui.item &&
|
old.user.ui.item &&
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue