forked from 0x2620/pandora
minimal embed player
This commit is contained in:
j
parent
e1c62e831e
commit
e6b3bd3e55
6 changed files with 79 additions and 144 deletions
|
|
@ -25,7 +25,7 @@ def index(request):
|
||||||
return render_to_response('index.html', context)
|
return render_to_response('index.html', context)
|
||||||
|
|
||||||
|
|
||||||
def embed(request):
|
def embed(request, id):
|
||||||
context = RequestContext(request, {'settings': settings})
|
context = RequestContext(request, {'settings': settings})
|
||||||
return render_to_response('embed.html', context)
|
return render_to_response('embed.html', context)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -27,5 +27,4 @@ urlpatterns = patterns("item.views",
|
||||||
(r'^(?P<id>[A-Z0-9].+)/poster\.jpg$', 'siteposter'),
|
(r'^(?P<id>[A-Z0-9].+)/poster\.jpg$', 'siteposter'),
|
||||||
(r'^(?P<id>[A-Z0-9].+)/frameposter(?P<position>\d+).jpg$', 'poster_frame'),
|
(r'^(?P<id>[A-Z0-9].+)/frameposter(?P<position>\d+).jpg$', 'poster_frame'),
|
||||||
|
|
||||||
|
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -3,15 +3,9 @@
|
||||||
<head>
|
<head>
|
||||||
<title>{{settings.SITENAME}}</title>
|
<title>{{settings.SITENAME}}</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||||
<link rel="shortcut icon" type="image/png" href="/static/png/icon16.png"/>
|
|
||||||
<script type='text/javascript'>
|
|
||||||
if(typeof(console)=='undefined') {
|
|
||||||
console = {};
|
|
||||||
console.log = function() {};
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<script type="text/javascript" src="/static/oxjs/build/Ox.js"></script>
|
<script type="text/javascript" src="/static/oxjs/build/Ox.js"></script>
|
||||||
<script type="text/javascript" src="/static/js/pandora.embed.js"></script>
|
<script type="text/javascript" src="/static/js/pandoraEmbed.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body></body>
|
<body>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@ urlpatterns += patterns('',
|
||||||
(r'^(V[a-z0-9]*/.*)$', 'urlalias.views.padma_video'),
|
(r'^(V[a-z0-9]*/.*)$', 'urlalias.views.padma_video'),
|
||||||
)
|
)
|
||||||
urlpatterns += patterns('',
|
urlpatterns += patterns('',
|
||||||
(r'^.*?embed$', 'app.views.embed'),
|
(r'^(?P<id>[A-Z0-9].+)/embed', 'app.views.embed'),
|
||||||
(r'^[A-Z0-9].*$', 'app.views.index'),
|
(r'^[A-Z0-9].*$', 'app.views.index'),
|
||||||
(r'^[a-z0-9].+$', 'app.views.index'),
|
(r'^[a-z0-9].+$', 'app.views.index'),
|
||||||
(r'^$', 'app.views.index'),
|
(r'^$', 'app.views.index'),
|
||||||
|
|
|
||||||
|
|
@ -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…
Reference in a new issue