forked from 0x2620/pandora
minimal embed player
This commit is contained in:
parent
e1c62e831e
commit
e6b3bd3e55
6 changed files with 79 additions and 144 deletions
|
|
@ -1,132 +0,0 @@
|
|||
/***
|
||||
Pandora embed
|
||||
***/
|
||||
Ox.load('UI', {
|
||||
debug: true,
|
||||
hideScreen: false,
|
||||
loadImages: true,
|
||||
showScreen: true,
|
||||
theme: 'modern'
|
||||
}, function() {
|
||||
window.pandora = new Ox.App({url: '/api/'}).bindEvent({
|
||||
apiURL: '/api/',
|
||||
}).bindEvent('load', function(data) {
|
||||
Ox.extend(pandora, {
|
||||
ui: {},
|
||||
info: function(item) {
|
||||
var that = Ox.Element()
|
||||
.append(
|
||||
ui.infoTimeline = Ox.Element('<img>')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
height: '16px',
|
||||
})
|
||||
.attr('src', '/' + item + '/timeline16p.png')
|
||||
)
|
||||
.append(
|
||||
ui.infoStill = new app.flipbook(item)
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: $(document).height()-16 + 'px',
|
||||
})
|
||||
)
|
||||
return that;
|
||||
},
|
||||
clip: function(item, inPoint, outPoint) {
|
||||
Ox.print('!@#!@#!@#', inPoint, outPoint);
|
||||
var that = Ox.Element();
|
||||
pandora.api.getItem(item, function(result) {
|
||||
var video = result.data.stream,
|
||||
format = $.support.video.supportedFormat(video.formats);
|
||||
video.height = video.profiles[0];
|
||||
video.width = parseInt(video.height * video.aspectRatio / 2) * 2;
|
||||
video.url = video.baseUrl + '/' + video.height + 'p.' + format;
|
||||
that.append(pandora.player = Ox.VideoPlayer({
|
||||
controlsBottom: ['playInToOut', 'space', 'position'],
|
||||
enableFind: false,
|
||||
enableFullscreen: true,
|
||||
enableVolume: true,
|
||||
externalControls: false,
|
||||
height: 192,
|
||||
paused: true,
|
||||
showMarkers: true,
|
||||
showMilliseconds: 2,
|
||||
width: 360,
|
||||
'in': inPoint,
|
||||
out: outPoint,
|
||||
position: inPoint,
|
||||
poster: '/' + item + '/' + '128p' + inPoint +'.jpg',
|
||||
title: result.data.title,
|
||||
video: video.url
|
||||
})
|
||||
.bindEvent({
|
||||
position: function(data) {
|
||||
if(data.position<inPoint || data.position>outPoint) {
|
||||
if(!pandora.player.options('paused'))
|
||||
pandora.player.togglePaused();
|
||||
pandora.player.options({
|
||||
position: inPoint,
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
);
|
||||
Ox.UI.hideLoadingScreen();
|
||||
});
|
||||
return that;
|
||||
},
|
||||
flipbook: function(item) {
|
||||
var that = Ox.Flipbook({
|
||||
}).bindEvent('click', function(data) {
|
||||
var item_url = document.location.origin + '/' + item;
|
||||
window.top.location.href = item_url + '/timeline#t=' + 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 + '/' + 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;
|
||||
}
|
||||
});
|
||||
var item = document.location.pathname.split('/')[1];
|
||||
function getArgument(key, result) {
|
||||
var args = Ox.map(document.location.hash.substr(1).split('&'), function(a) {
|
||||
a = a.split('=');
|
||||
var key = a[0],
|
||||
value = a[1];
|
||||
return {
|
||||
'key': key,
|
||||
'value': value
|
||||
}
|
||||
});
|
||||
args.forEach(function(a, i) {
|
||||
Ox.print(i, a);
|
||||
if (a.key == key) {
|
||||
result = a.value;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
var t = getArgument('t', '0,10').split(',')
|
||||
pandora.ui.info = pandora.clip(item, parseInt(t[0]), parseInt(t[1]))
|
||||
.appendTo(document.body);
|
||||
});
|
||||
});
|
||||
74
static/js/pandoraEmbed.js
Executable file
74
static/js/pandoraEmbed.js
Executable file
|
|
@ -0,0 +1,74 @@
|
|||
/***
|
||||
Pandora embed
|
||||
***/
|
||||
Ox.load('UI', {
|
||||
debug: false,
|
||||
hideScreen: false,
|
||||
loadImages: true,
|
||||
showScreen: true,
|
||||
theme: 'modern'
|
||||
}, function() {
|
||||
window.pandora = new Ox.App({url: '/api/'}).bindEvent({
|
||||
load: function(data) {
|
||||
Ox.extend(pandora, {
|
||||
site: data.site,
|
||||
user: data.user.level == 'guest' ? Ox.clone(data.site.user) : data.user,
|
||||
ui: {},
|
||||
clip: function(item, inPoint, outPoint) {
|
||||
Ox.print('!@#!@#!@#', inPoint, outPoint);
|
||||
var that = Ox.Element();
|
||||
pandora.api.get({id: item, keys: []}, function(result) {
|
||||
var video = {};
|
||||
pandora.site.video.resolutions.forEach(function(resolution) {
|
||||
video[resolution] = Ox.range(result.data.parts).map(function(i) {
|
||||
return '/' + pandora.user.ui.item + '/'
|
||||
+ resolution + 'p' + (i + 1) + '.' + pandora.user.videoFormat;
|
||||
});
|
||||
});
|
||||
that.append(pandora.player = Ox.VideoPlayer({
|
||||
controlsBottom: ['play', 'playInToOut', 'space', 'position'],
|
||||
enableFind: false,
|
||||
enableFullscreen: true,
|
||||
enableVolume: true,
|
||||
externalControls: false,
|
||||
height: document.height,
|
||||
'in': inPoint,
|
||||
out: outPoint,
|
||||
paused: true,
|
||||
position: inPoint,
|
||||
poster: '/' + item + '/' + '128p' + inPoint +'.jpg',
|
||||
showMarkers: true,
|
||||
showMilliseconds: 2,
|
||||
title: result.data.title,
|
||||
video: video,
|
||||
width: document.width,
|
||||
})
|
||||
.bindEvent({
|
||||
position: function(data) {
|
||||
if(data.position<inPoint || data.position>outPoint) {
|
||||
if(!pandora.player.options('paused'))
|
||||
pandora.player.togglePaused();
|
||||
pandora.player.options({
|
||||
position: inPoint,
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
Ox.UI.hideLoadingScreen();
|
||||
});
|
||||
return that;
|
||||
},
|
||||
});
|
||||
Ox.extend(pandora.user, {
|
||||
videoFormat: Ox.UI.getVideoFormat(pandora.site.video.formats)
|
||||
});
|
||||
var item = document.location.pathname.split('/')[1],
|
||||
inPoint = 10,
|
||||
outPoint = 15;
|
||||
pandora.ui.info = pandora.clip(item, inPoint, outPoint)
|
||||
.css({width: '100%', height: '100%'})
|
||||
.appendTo(document.body);
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue