0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

minimal embed player

Browse source
This commit is contained in:
j 2011-10-22 13:24:26 +02:00
parent e1c62e831e
commit e6b3bd3e55
6 changed files with 79 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
pandora/app/views.py
View file

@ -25,7 +25,7 @@ def index(request):
return render_to_response('index.html', context)
def embed(request):
def embed(request, id):
context = RequestContext(request, {'settings': settings})
return render_to_response('embed.html', context)

1
pandora/item/urls.py
View file

@ -27,5 +27,4 @@ urlpatterns = patterns("item.views",
(r'^(?P<id>[A-Z0-9].+)/poster\.jpg$', 'siteposter'),
(r'^(?P<id>[A-Z0-9].+)/frameposter(?P<position>\d+).jpg$', 'poster_frame'),
)

12
pandora/templates/embed.html
View file

@ -3,15 +3,9 @@
<head>
<title>{{settings.SITENAME}}</title>
<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/js/pandora.embed.js"></script>
<script type="text/javascript" src="/static/js/pandoraEmbed.js"></script>
</head>
<body></body>
<body>
</body>
</html>

2
pandora/urls.py
View file

@ -48,7 +48,7 @@ urlpatterns += patterns('',
(r'^(V[a-z0-9]*/.*)$', 'urlalias.views.padma_video'),
)
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'^$', 'app.views.index'),

132
static/js/pandora.embed.js
View file

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