From 80d94e7da823ac3aa0a9e2b7d0a7e47ba2434274 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Mon, 17 Jan 2011 21:12:52 +0000 Subject: [PATCH 1/2] new player view --- pandora/itemlist/managers.py | 7 ++ pandora/templates/site.json | 7 +- static/js/pandora.js | 199 ++++++++++++++++++++++++----------- 3 files changed, 149 insertions(+), 64 deletions(-) diff --git a/pandora/itemlist/managers.py b/pandora/itemlist/managers.py index 4d912fc..6f0a7b8 100644 --- a/pandora/itemlist/managers.py +++ b/pandora/itemlist/managers.py @@ -36,6 +36,13 @@ def parseCondition(condition, user): exclude = True else: 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': key = 'subscribed_users__username' v = user.username diff --git a/pandora/templates/site.json b/pandora/templates/site.json index d13b310..3990548 100644 --- a/pandora/templates/site.json +++ b/pandora/templates/site.json @@ -39,13 +39,14 @@ {"id": "info", "title": "Info"}, {"id": "statistics", "title": "Statistics"}, {"id": "clips", "title": "Clips"}, + {"id": "player", "title": "Player"}, {"id": "timeline", "title": "Timeline"}, {"id": "map", "title": "Map"}, {"id": "calendar", "title": "Calendar"}, {"id": "files", "title": "Files", "admin": true} ], "layers": [ - {"id": "privatenotes", "title": "Private Notes", "type": "text"}, + {"id": "privatenotes", "title": "Private Notes", "type": "text", "private": true}, {"id": "publicnotes", "title": "Public Notes", "type": "text"} ], "listViews": [ @@ -171,6 +172,7 @@ "section": "items", "sections": ["my", "public", "featured"], "showAnnotations": true, + "showControls": true, "showGroups": true, "showInfo": true, "showMovies": true, @@ -182,7 +184,8 @@ "showSidebar": true, "sidebarSize": 256, "sitePage": "home", - "theme": "modern" + "theme": "modern", + "videoSize": "fit" }, "username": "" } diff --git a/static/js/pandora.js b/static/js/pandora.js index 66b6f76..6762af6 100755 --- a/static/js/pandora.js +++ b/static/js/pandora.js @@ -14,7 +14,7 @@ var pandora = new Ox.App({ $ui: { body: $('body'), document: $(document), - window: $(window) + window: $(window).resize(resizeWindow) }, config: data.config, requests: {}, @@ -38,50 +38,23 @@ var pandora = new Ox.App({ 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(); window.onpopstate = function() { URL.update(); }; app.$ui.appPanel = ui.appPanel(); - app.$ui.appPanel.display(); - app.ui.sectionButtonsWidth = app.$ui.sectionButtons.width() + 8; + $(function() { + + 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.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; if (app.user.ui.itemView == 'info') { that = new Ox.Element('div'); + } else if (app.user.ui.itemView == 'player') { + that = new Ox.Element('div'); } else if (app.user.ui.itemView == 'timeline') { that = new Ox.SplitPanel({ elements: [ @@ -992,6 +967,36 @@ var pandora = new Ox.App({ .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') { var video = result.data.item.stream, 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) { app.$ui.previewDialog.close(); delete app.$ui.previewDialog; @@ -1346,8 +1362,9 @@ var pandora = new Ox.App({ app.$ui.selected.html(ui.status('selected', data)); }, open: function(event, data) { - var id = data.ids[0]; - URL.set(id); + var id = data.ids[0], + title = that.value(id, 'title'); + URL.set(title, id); }, openpreview: function(event, data) { app.requests.preview && pandora.api.cancel(app.requests.preview); @@ -1770,7 +1787,7 @@ var pandora = new Ox.App({ var isGuest = app.user.group == 'guest', that = new Ox.MainMenu({ extras: [ - $('
').html('beta').css({marginRight: '4px'}), + $('
').html('beta').css({marginRight: '8px', color: 'rgb(128, 128, 128)'}), app.$ui.loadingIcon = new Ox.LoadingIcon({ size: 'medium' }) @@ -2372,6 +2389,9 @@ var pandora = new Ox.App({ } } else { app.$ui.browser.scrollToSelection(); + app.user.ui.itemView == 'player' && app.$ui.player.options({ + width: data + }); app.user.ui.itemView == 'timeline' && app.$ui.editor.options({ width: data - (app.user.ui.showAnnotations * app.user.ui.annotationsSize) - 1 }); @@ -2455,8 +2475,6 @@ var pandora = new Ox.App({ }, { clickable: function(data) { - //alert(JSON.stringify([data.user, data.type])) - //Ox.print('$$$$$$$$', data.user, data.type) return data.type == 'smart'; }, format: function(value) { @@ -2628,14 +2646,11 @@ var pandora = new Ox.App({ select: function(event, data) { var $list = app.$ui.sectionList[i]; if (data.ids.length) { - var listId = data.ids[0]; app.$ui.sectionList.forEach(function($list, i_) { i != i_ && $list.options('selected', []); }); - //UI.set({list: listId}); - URL.set('?find=list:' + listId); + URL.set('?find=list:' + data.ids[0]); } else { - //UI.set({list: ''}); URL.set(''); } }, @@ -2798,10 +2813,10 @@ var pandora = new Ox.App({ that.append($section); }); resizeSections(); + //selectList(); fixme: doesn't work } app.$ui.sectionList[i].unbindEvent({init: init}); // fixme: need bindEventOnce } - app.$ui.sectionList[i] }); that.toggle = function() { @@ -3084,18 +3099,6 @@ var pandora = new Ox.App({ 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() { Ox.print('reloadList') 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() { var width = getSectionsWidth(), 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) { existing = existing || false; var string = key == 'username' ? 'username' : 'e-mail address'; @@ -3415,8 +3487,11 @@ var pandora = new Ox.App({ return { - set: function(url) { - history.pushState({}, '', '/' + url); + set: function(title, 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 URL.update(); }, From cf0f445440cc9c9e151006e9bbd46d36a739624d Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Tue, 18 Jan 2011 04:07:40 +0000 Subject: [PATCH 2/2] make small timeline work in player view --- static/js/pandora.js | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/static/js/pandora.js b/static/js/pandora.js index 6762af6..e907002 100755 --- a/static/js/pandora.js +++ b/static/js/pandora.js @@ -979,6 +979,7 @@ var pandora = new Ox.App({ height: app.$ui.contentPanel.size(1), showAnnotations: app.user.ui.showAnnotations, showControls: app.user.ui.showControls, + subtitles: subtitles, videoHeight: video.height, videoId: app.user.ui.item, videoWidth: video.width, @@ -989,7 +990,9 @@ var pandora = new Ox.App({ change: function(event, data) { // showAnnotations, showControls, videoSize UI.set(data); - } + }, + enterfullscreen: enterFullscreen, + exitfullscreen: exitFullscreen }))/*.bindEvent({ resize: function(event, data) { app.$ui.player.options({ @@ -1053,6 +1056,7 @@ var pandora = new Ox.App({ }); */ } + app.$ui.total.html(result.data.item.title + ' (' + result.data.item.director.join(', ') + ')') }); } that.display = function() { @@ -3019,6 +3023,30 @@ var pandora = new Ox.App({ callback(value); } + function enterFullscreen() { + app.$ui.appPanel.size(0, 0); + app.user.ui.showSidebar && app.$ui.mainPanel.size(0, 0); + app.$ui.rightPanel.size(0, 0).size(2, 0); + !app.user.ui.showMovies && app.$ui.contentPanel.css({ + top: (-112 - app.ui.scrollbarSize) + 'px' // fixme: rightPanel.size(0, 0) doesn't preserve negative top of browser + }); + app.user.ui.showMovies && app.$ui.contentPanel.size(0, 0); + app.$ui.player.options({ + height: app.$document.height() - 2, + width: app.$document.width() - 2 + }) + } + + function exitFullscreen() { + app.$ui.appPanel.size(0, 20); + app.user.ui.showSidebar && app.$ui.mainPanel.size(0, app.user.ui.sidebarSize); + app.$ui.rightPanel.size(0, 24).size(2, 16); + !app.user.ui.showMovies && app.$ui.contentPanel.css({ + top: 24 + (-112 - app.ui.scrollbarSize) + 'px' // fixme: rightPanel.size(0, 0) doesn't preserve negative top of browser + }); + app.user.ui.showMovies && app.$ui.contentPanel.size(0, 112 + app.ui.scrollbarSize); + } + function getAlignment(key) { // fixme: make static return ['person', 'string', 'text', 'title'].indexOf( Ox.getObjectById(app.config.sortKeys, key).type