0x2620/cablegates
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

replace Flipbook with VideoPreview

Browse source
This commit is contained in:
rlx 2011-08-08 13:58:28 +00:00
parent 25860c20f8
commit 4ab8bb41f6
7 changed files with 67 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/js/pandora/URL.js
View file

@ -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 (

26
static/js/pandora/ui/flipbook.js
View file

@ -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;
};

65
static/js/pandora/ui/info.js
View file

@ -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;

5
static/js/pandora/ui/leftPanel.js
View file

@ -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) {

23
static/js/pandora/ui/list.js
View file

@ -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
View 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;
};

2
static/json/pandora.json
View file

@ -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"