new player view

This commit is contained in:
rolux 2011-01-17 21:12:52 +00:00
parent b43ea828d9
commit 3885b3967a
3 changed files with 149 additions and 64 deletions

View file

@ -36,6 +36,13 @@ def parseCondition(condition, user):
exclude = True exclude = True
else: else:
exclude = False exclude = False
if k == 'id':
v = v.split('/')
if len(v) == 2:
q = Q(user__username=v[0], name=v[1])
else:
q = Q(id__in=[])
return q
if k == 'subscribed': if k == 'subscribed':
key = 'subscribed_users__username' key = 'subscribed_users__username'
v = user.username v = user.username

View file

@ -39,13 +39,14 @@
{"id": "info", "title": "Info"}, {"id": "info", "title": "Info"},
{"id": "statistics", "title": "Statistics"}, {"id": "statistics", "title": "Statistics"},
{"id": "clips", "title": "Clips"}, {"id": "clips", "title": "Clips"},
{"id": "player", "title": "Player"},
{"id": "timeline", "title": "Timeline"}, {"id": "timeline", "title": "Timeline"},
{"id": "map", "title": "Map"}, {"id": "map", "title": "Map"},
{"id": "calendar", "title": "Calendar"}, {"id": "calendar", "title": "Calendar"},
{"id": "files", "title": "Files", "admin": true} {"id": "files", "title": "Files", "admin": true}
], ],
"layers": [ "layers": [
{"id": "privatenotes", "title": "Private Notes", "type": "text"}, {"id": "privatenotes", "title": "Private Notes", "type": "text", "private": true},
{"id": "publicnotes", "title": "Public Notes", "type": "text"} {"id": "publicnotes", "title": "Public Notes", "type": "text"}
], ],
"listViews": [ "listViews": [
@ -171,6 +172,7 @@
"section": "items", "section": "items",
"sections": ["my", "public", "featured"], "sections": ["my", "public", "featured"],
"showAnnotations": true, "showAnnotations": true,
"showControls": true,
"showGroups": true, "showGroups": true,
"showInfo": true, "showInfo": true,
"showMovies": true, "showMovies": true,
@ -182,7 +184,8 @@
"showSidebar": true, "showSidebar": true,
"sidebarSize": 256, "sidebarSize": 256,
"sitePage": "home", "sitePage": "home",
"theme": "modern" "theme": "modern",
"videoSize": "fit"
}, },
"username": "" "username": ""
} }

View file

@ -14,7 +14,7 @@ var pandora = new Ox.App({
$ui: { $ui: {
body: $('body'), body: $('body'),
document: $(document), document: $(document),
window: $(window) window: $(window).resize(resizeWindow)
}, },
config: data.config, config: data.config,
requests: {}, requests: {},
@ -38,50 +38,23 @@ var pandora = new Ox.App({
function load() { function load() {
$(function() {
// fixme: use jquery ajaxStart?
var $body = $('body');
Ox.Request.requests() && app.$ui.loadingIcon.start();
$body.bind('requestStart', function() {
//Ox.print('requestStart')
app.$ui.loadingIcon && app.$ui.loadingIcon.start();
});
$body.bind('requestStop', function() {
//Ox.print('requestStop')
app.$ui.loadingIcon && app.$ui.loadingIcon.stop();
});
});
//Query.fromString(location.hash.substr(1));
URL.parse(); URL.parse();
window.onpopstate = function() { window.onpopstate = function() {
URL.update(); URL.update();
}; };
app.$ui.appPanel = ui.appPanel(); app.$ui.appPanel = ui.appPanel();
$(function() {
app.$ui.appPanel.display(); app.$ui.appPanel.display();
Ox.Request.requests() && app.$ui.loadingIcon.start();
app.$ui.body.ajaxStart(app.$ui.loadingIcon.start);
app.$ui.body.ajaxStop(app.$ui.loadingIcon.stop);
app.ui.sectionButtonsWidth = app.$ui.sectionButtons.width() + 8; app.ui.sectionButtonsWidth = app.$ui.sectionButtons.width() + 8;
app.$ui.window.resize(function() {
resizeSections();
if (app.user.ui.item == '') {
app.$ui.list.size();
resizeGroups(app.$ui.rightPanel.width());
if (app.user.ui.listView == 'map') {
app.$ui.map.triggerResize();
}
} else {
//Ox.print('app.$ui.window.resize');
app.$ui.browser.scrollToSelection();
app.user.ui.itemView == 'timeline' && app.$ui.editor.options({
height: app.$ui.document.height() -
20 - 24 - app.$ui.contentPanel.size(0) - 1 - 16,
width: app.$ui.document.width() -
app.$ui.mainPanel.size(0) - app.$ui.item.size(1) - 2
});
}
}); });
} }
@ -963,6 +936,8 @@ var pandora = new Ox.App({
var that; var that;
if (app.user.ui.itemView == 'info') { if (app.user.ui.itemView == 'info') {
that = new Ox.Element('div'); that = new Ox.Element('div');
} else if (app.user.ui.itemView == 'player') {
that = new Ox.Element('div');
} else if (app.user.ui.itemView == 'timeline') { } else if (app.user.ui.itemView == 'timeline') {
that = new Ox.SplitPanel({ that = new Ox.SplitPanel({
elements: [ elements: [
@ -992,6 +967,36 @@ var pandora = new Ox.App({
.append($.tmpl(template, result.data.item)) .append($.tmpl(template, result.data.item))
); );
}); });
} else if (app.user.ui.itemView == 'player') {
var video = result.data.item.stream,
subtitles = result.data.item.layers.subtitles;
video.height = 96;
video.width = parseInt(video.height * video.aspectRatio / 2) * 2;
video.url = video.baseUrl + '/' + video.height + 'p.' + ($.support.video.webm ? 'webm' : 'mp4');
app.$ui.contentPanel.replace(1, app.$ui.player = new Ox.VideoPanelPlayer({
annotationsSize: app.user.ui.annotationsSize,
duration: video.duration,
height: app.$ui.contentPanel.size(1),
showAnnotations: app.user.ui.showAnnotations,
showControls: app.user.ui.showControls,
videoHeight: video.height,
videoId: app.user.ui.item,
videoWidth: video.width,
videoSize: app.user.ui.videoSize,
videoURL: video.url,
width: app.$ui.document.width() - app.$ui.mainPanel.size(0) - 1
}).bindEvent({
change: function(event, data) {
// showAnnotations, showControls, videoSize
UI.set(data);
}
}))/*.bindEvent({
resize: function(event, data) {
app.$ui.player.options({
height: data
});
}
})*/;
} else if (app.user.ui.itemView == 'timeline') { } else if (app.user.ui.itemView == 'timeline') {
var video = result.data.item.stream, var video = result.data.item.stream,
cuts = result.data.item.layers.cuts || {}, cuts = result.data.item.layers.cuts || {},
@ -1318,7 +1323,18 @@ var pandora = new Ox.App({
}); });
} }
['list', 'icons'].indexOf(view) > -1 && that.bindEvent({ ['list', 'icons'].indexOf(view) > -1 && that.bind({
dragstart: function(e) {
app.$ui.sectionList.forEach(function($list, i) {
$list.addClass('OxDrop');
});
},
dragend: function(e) {
app.$ui.sectionList.forEach(function($list, i) {
$list.removeClass('OxDrop');
});
},
}).bindEvent({
closepreview: function(event, data) { closepreview: function(event, data) {
app.$ui.previewDialog.close(); app.$ui.previewDialog.close();
delete app.$ui.previewDialog; delete app.$ui.previewDialog;
@ -1346,8 +1362,9 @@ var pandora = new Ox.App({
app.$ui.selected.html(ui.status('selected', data)); app.$ui.selected.html(ui.status('selected', data));
}, },
open: function(event, data) { open: function(event, data) {
var id = data.ids[0]; var id = data.ids[0],
URL.set(id); title = that.value(id, 'title');
URL.set(title, id);
}, },
openpreview: function(event, data) { openpreview: function(event, data) {
app.requests.preview && pandora.api.cancel(app.requests.preview); app.requests.preview && pandora.api.cancel(app.requests.preview);
@ -1770,7 +1787,7 @@ var pandora = new Ox.App({
var isGuest = app.user.group == 'guest', var isGuest = app.user.group == 'guest',
that = new Ox.MainMenu({ that = new Ox.MainMenu({
extras: [ extras: [
$('<div>').html('beta').css({marginRight: '4px'}), $('<div>').html('beta').css({marginRight: '8px', color: 'rgb(128, 128, 128)'}),
app.$ui.loadingIcon = new Ox.LoadingIcon({ app.$ui.loadingIcon = new Ox.LoadingIcon({
size: 'medium' size: 'medium'
}) })
@ -2372,6 +2389,9 @@ var pandora = new Ox.App({
} }
} else { } else {
app.$ui.browser.scrollToSelection(); app.$ui.browser.scrollToSelection();
app.user.ui.itemView == 'player' && app.$ui.player.options({
width: data
});
app.user.ui.itemView == 'timeline' && app.$ui.editor.options({ app.user.ui.itemView == 'timeline' && app.$ui.editor.options({
width: data - (app.user.ui.showAnnotations * app.user.ui.annotationsSize) - 1 width: data - (app.user.ui.showAnnotations * app.user.ui.annotationsSize) - 1
}); });
@ -2455,8 +2475,6 @@ var pandora = new Ox.App({
}, },
{ {
clickable: function(data) { clickable: function(data) {
//alert(JSON.stringify([data.user, data.type]))
//Ox.print('$$$$$$$$', data.user, data.type)
return data.type == 'smart'; return data.type == 'smart';
}, },
format: function(value) { format: function(value) {
@ -2628,14 +2646,11 @@ var pandora = new Ox.App({
select: function(event, data) { select: function(event, data) {
var $list = app.$ui.sectionList[i]; var $list = app.$ui.sectionList[i];
if (data.ids.length) { if (data.ids.length) {
var listId = data.ids[0];
app.$ui.sectionList.forEach(function($list, i_) { app.$ui.sectionList.forEach(function($list, i_) {
i != i_ && $list.options('selected', []); i != i_ && $list.options('selected', []);
}); });
//UI.set({list: listId}); URL.set('?find=list:' + data.ids[0]);
URL.set('?find=list:' + listId);
} else { } else {
//UI.set({list: ''});
URL.set(''); URL.set('');
} }
}, },
@ -2798,10 +2813,10 @@ var pandora = new Ox.App({
that.append($section); that.append($section);
}); });
resizeSections(); resizeSections();
//selectList(); fixme: doesn't work
} }
app.$ui.sectionList[i].unbindEvent({init: init}); // fixme: need bindEventOnce app.$ui.sectionList[i].unbindEvent({init: init}); // fixme: need bindEventOnce
} }
app.$ui.sectionList[i]
}); });
that.toggle = function() { that.toggle = function() {
@ -3084,18 +3099,6 @@ var pandora = new Ox.App({
history.pushState({}, '', Query.toString(query)); history.pushState({}, '', Query.toString(query));
} }
function resizeGroups(width) {
var widths = $.map(app.ui.groups, function(v, i) {
return getGroupWidth(i, width);
});
//Ox.print('widths', widths);
app.$ui.browser.size(0, widths[0].list).size(2, widths[4].list);
app.$ui.groupsInnerPanel.size(0, widths[1].list).size(2, widths[3].list);
$.each(app.$ui.groups, function(i, list) {
list.resizeColumn('name', widths[i].column);
});
}
function reloadList() { function reloadList() {
Ox.print('reloadList') Ox.print('reloadList')
var listData = getListData(); var listData = getListData();
@ -3117,6 +3120,43 @@ var pandora = new Ox.App({
} }
} }
function resizeGroups(width) {
var widths = $.map(app.ui.groups, function(v, i) {
return getGroupWidth(i, width);
});
//Ox.print('widths', widths);
app.$ui.browser.size(0, widths[0].list).size(2, widths[4].list);
app.$ui.groupsInnerPanel.size(0, widths[1].list).size(2, widths[3].list);
$.each(app.$ui.groups, function(i, list) {
list.resizeColumn('name', widths[i].column);
});
}
function resizeWindow() {
resizeSections();
if (app.user.ui.item == '') {
app.$ui.list.size();
resizeGroups(app.$ui.rightPanel.width());
if (app.user.ui.listView == 'map') {
app.$ui.map.triggerResize();
}
} else {
//Ox.print('app.$ui.window.resize');
app.$ui.browser.scrollToSelection();
app.user.ui.itemView == 'player' && app.$ui.player.options({
// fixme: duplicated
height: app.$ui.contentPanel.size(1),
width: app.$ui.document.width() - app.$ui.mainPanel.size(0) - 1
});
app.user.ui.itemView == 'timeline' && app.$ui.editor.options({
// fixme: duplicated
height: app.$ui.contentPanel.size(1),
width: app.$ui.document.width() - app.$ui.mainPanel.size(0) - 1 -
(app.user.ui.showAnnotations * app.user.ui.annotationsSize) - 1
});
}
}
function resizeSections() { function resizeSections() {
var width = getSectionsWidth(), var width = getSectionsWidth(),
columnWidth = {user: parseInt((width - 88) * 0.4)}; columnWidth = {user: parseInt((width - 88) * 0.4)};
@ -3142,6 +3182,38 @@ var pandora = new Ox.App({
}); });
} }
function selectList() {
if (app.user.ui.list) {
pandora.api.findLists({
keys: ['status', 'user'],
query: {
conditions: [{key: 'id', value: app.user.ui.list, operator: '='}],
operator: ''
},
range: [0, 1]
}, function(result) {
var list, section = -1;
if (result.data.items.length) {
list = result.data.items[0]
if (list.user == app.user.username) {
section = list.status == 'featured' ? 2 : 0
} else {
section = 1;
}
}
if (section > -1) {
app.$ui.sectionList[section]
.options('selected', [app.user.ui.list])
.gainFocus();
} else {
app.user.ui.list = '';
//app.user.ui.listQuery.conditions = []; // fixme: Query should read from ui.list, and not need ui.listQuery to be reset
//URL.set(Query.toString());
}
})
}
}
function validateUser(key, existing) { function validateUser(key, existing) {
existing = existing || false; existing = existing || false;
var string = key == 'username' ? 'username' : 'e-mail address'; var string = key == 'username' ? 'username' : 'e-mail address';
@ -3415,8 +3487,11 @@ var pandora = new Ox.App({
return { return {
set: function(url) { set: function(title, url) {
history.pushState({}, '', '/' + url); if (arguments.length == 1) { // fixme: remove later
url = title;
}
history.pushState({}, app.config.site.name + (title ? ' - ' + title : ''), '/' + url);
old.user.ui = $.extend({}, app.user.ui); // make a clone old.user.ui = $.extend({}, app.user.ui); // make a clone
URL.update(); URL.update();
}, },