add loading screen

pandora/app/models.py

@@ -71,7 +71,7 @@ def update_static():
 
     print 'write', pandora_js
     with open(pandora_js, 'w') as f:
-        #data = ox.js.minify(data)
+        data = ox.js.minify(data)
         f.write(data)
 
     print 'write', pandora_json

static/js/init.js

@@ -20,41 +20,161 @@ appPanel
             statusbar
 */
 
-// fixme: never set pandora.ui.videoPosition to 0 ... set to null a.k.a. delete
+(function() {
-// fixme: sort=-director doesn't work
-// fixme: clear items cache after login/logout
 
-Ox.load({
+    var debug = localStorage && localStorage.debug,
-    UI: {
+        theme = localStorage && localStorage.theme || 'modern';
-        hideScreen: false,
-        loadImages: true,
-        showScreen: true,
-        theme: localStorage && localStorage.theme ? localStorage.theme : 'modern'
-    },
-    Geo: {}
-}, function(browserSupported) {
 
-// fixme: use Ox.extend()
+    loadImages(function(images) {
+        loadScreen(images);
+        if (debug) {
+            loadOxJS(function() {
+                loadOxUI(loadPandora);
+            });
+        } else {
+            loadOxUI(loadPandora);
+        }
+    });
 
-    window.pandora = new Ox.App({url: '/api/'}).bindEvent({
+    function loadImages(callback) {
-
+        // Opera doesn't fire onload for SVGs,
-        load: function(data) {
+        // so we only wait for the PNG to load.
-
+        var images = {};
-            if (!browserSupported) {
+        images.logo = document.createElement('img');
-                return;
+        images.logo.onload = function() {
-                /*
+            callback(images);
-                $('.OxLoadingScreen')
+        };
-                    .css({opacity: 0.9})
+        images.logo.style.position = 'absolute';
-                    .click($(this).remove);
+        images.logo.style.left = 0;
-                */
+        images.logo.style.top = 0;
+        images.logo.style.right = 0;
+        images.logo.style.bottom = '160px';
+        images.logo.style.width = '320px';
+        images.logo.style.height = '160px';
+        images.logo.style.margin = 'auto';
+        images.logo.src = '/static/png/logo256.png';
+        images.reflection = document.createElement('img');
+        images.reflection.style.position = 'absolute';
+        images.reflection.style.left = 0;
+        images.reflection.style.top = '160px';
+        images.reflection.style.right = 0;
+        images.reflection.style.bottom = 0;
+        images.reflection.style.width = '320px';
+        images.reflection.style.height = '160px';
+        images.reflection.style.margin = 'auto';
+        images.reflection.style.MozTransform = 'scaleY(-1)';
+        images.reflection.style.OTransform = 'scaleY(-1)';
+        images.reflection.style.WebkitTransform = 'scaleY(-1)';
+        images.reflection.src = '/static/png/logo256.png';
+        images.loadingIcon = document.createElement('img');
+        images.loadingIcon.setAttribute('id', 'loadingIcon');
+        images.loadingIcon.style.position = 'absolute';
+        images.loadingIcon.style.left = 0;
+        images.loadingIcon.style.top = '80px';
+        images.loadingIcon.style.right = 0;
+        images.loadingIcon.style.bottom = 0;
+        images.loadingIcon.style.width = '32px';
+        images.loadingIcon.style.height = '32px';
+        images.loadingIcon.style.margin = 'auto';
+        images.loadingIcon.src = '/static/oxjs/' + (debug ? 'dev' : 'build')
+            + '/Ox.UI/themes/' + theme + '/svg/symbolLoadingAnimated.svg';
     }
 
+    function loadScreen(images) {
+        var gradient = document.createElement('div');
+        gradient.style.position = 'absolute';
+        gradient.style.left = 0;
+        gradient.style.top = '160px';
+        gradient.style.right = 0;
+        gradient.style.bottom = 0;
+        gradient.style.width = '320px';
+        gradient.style.height = '160px';
+        gradient.style.margin = 'auto';
+        gradient.style.background = theme == 'classic'
+            ? '-moz-linear-gradient(top, rgba(224, 224, 224, 0.75), rgba(224, 224, 224, 1), rgba(224, 224, 224, 1))'
+            : '-moz-linear-gradient(top, rgba(32, 32, 32, 0.75), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))';
+        gradient.style.background = theme == 'classic'
+            ? '-o-linear-gradient(top, rgba(224, 224, 224, 0.75), rgba(224, 224, 224, 1), rgba(224, 224, 224, 1))'
+            : '-o-linear-gradient(top, rgba(32, 32, 32, 0.75), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))';
+        gradient.style.background = theme == 'classic'
+            ? '-webkit-linear-gradient(top, rgba(224, 224, 224, 0.75), rgba(224, 224, 224, 1), rgba(224, 224, 224, 1))'
+            : '-webkit-linear-gradient(top, rgba(32, 32, 32, 0.75), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1))';
+        loadingScreen = document.createElement('div');
+        loadingScreen.setAttribute('id', 'loadingScreen');
+        loadingScreen.className = 'OxScreen';
+        loadingScreen.style.position = 'absolute';
+        loadingScreen.style.width = '100%';
+        loadingScreen.style.height = '100%';
+        loadingScreen.style.backgroundColor = theme == 'classic'
+            ? 'rgb(224, 224, 224)' : 'rgb(32, 32, 32)';
+        loadingScreen.style.zIndex = '1001';
+        Ox.print(images)
+        loadingScreen.appendChild(images.logo);
+        loadingScreen.appendChild(images.reflection);
+        loadingScreen.appendChild(gradient);
+        loadingScreen.appendChild(images.loadingIcon);
+        document.body.style.margin = 0;
+        document.body.appendChild(loadingScreen);
+    }
+
+    function loadOxJS(callback) {
+        var script = document.createElement('script');
+        script.onload = callback;
+        script.src = '/static/oxjs/dev/Ox.js';
+        script.type = 'text/javascript';
+        document.head.appendChild(script);            
+    }
+
+    function loadOxUI(callback) {
+        Ox.load({
+            UI: {
+                theme: theme
+            },
+            Geo: {}
+        }, callback)
+    }
+
+    function loadPandora(browserSupported) {
+        window.pandora = Ox.App({url: '/api/'}).bindEvent({
+            load: function(data) {
+                data.browserSupported = browserSupported;
                 Ox.extend(pandora, {
                     requests: {},
                     ui: {}
                 });
+                loadPandoraFiles(function() {
+                    initPandora(data);
+                });
+            }
+        });
+    }
 
-            loadResources(function() {
+    function loadPandoraFiles(callback) {
+        var prefix = '/static/';
+        if (localStorage && localStorage.debug) {
+            Ox.getJSON(prefix + 'json/pandora.json', function(files) {
+                var promises = [];
+                files.forEach(function(file) {
+                    var dfd = new $.Deferred();
+                    promises.push(dfd.promise());
+                    Ox.loadFile(prefix + file, function() {
+                        dfd.resolve();
+                    });
+                });
+                $.when.apply(null, promises)
+                    .done(function() {
+                        callback();
+                    })
+                    .fail(function() {
+                        throw new Error('File not found.');
+                    });
+            });
+        } else {
+            Ox.loadFile(prefix + 'js/pandora.js', callback);
+        }
+    }
+
+    function initPandora(data) {
 
         Ox.print('Ox.App load', data);
 
@@ -132,7 +252,11 @@ Ox.load({
 
         pandora.URL.init().parse(function() {
 
-                    Ox.UI.hideLoadingScreen();
+            if (data.browserSupported) {
+                $('#loadingScreen').remove();
+            } else {
+                loadBrowserMessage();
+            }
 
             Ox.Theme(pandora.user.ui.theme);
             pandora.$ui.appPanel = pandora.ui.appPanel().display();        
@@ -144,33 +268,100 @@ Ox.load({
 
         });
         
-            });
     }
-    });
 
-    function loadResources(callback) {
+    function loadBrowserMessage() {
-        var prefix = '/static/';
+
-        if(localStorage && localStorage.debug) {
+        var isMSIE = $.browser.msie,
-            Ox.getJSON(prefix + 'json/pandora.json', function(files) {
+            browsers = Ox.merge(
-                var promises = [];
+                isMSIE ? [{name: 'Chrome Frame', url: 'http://google.com/chromeframe/'}] : [],
-                files.forEach(function(file) {
+                [
-                    var dfd = new $.Deferred();
+                    {name: 'Chrome', url: 'http://google.com/chrome/'},
-                    promises.push(dfd.promise());
+                    {name: 'Firefox', url: 'http://mozilla.org/firefox/'},
-                    Ox.loadFile(prefix + file, function() {
+                    {name: 'Safari', url: 'http://apple.com/safari/'}
-                        dfd.resolve();
+                ]
-                    });
+            ),
-                });
+            images = browsers.map(function(browser) {
-                $.when.apply(null, promises)
+                return Ox.PATH + 'Ox.UI/png/browser' + browser.name.replace(' ', '') + '128.png';
-                    .done(function() {
+            }),
-                        callback();
+            $loadingScreen = $('#loadingScreen');
+
+        loadImages(images, function() {
+            var html = pandora.site.site.name
+                    + ' requires an up-to-date web browser. Please take a moment to '
+                    + (
+                        isMSIE
+                        ? 'install <a href="' + browsers[0].url + '">' + browsers[0].name + '</a> or '
+                        : ''
+                    )
+                    + 'download ' + browsers.filter(function(browser) {
+                        return browser.name != 'Chrome Frame';
+                    }).map(function(browser, i) {
+                        return '<a href="' + browser.url + '">' + browser.name + '</a>'
+                            + (i == 0 ? ', ' : i == 1 ? ' or ' : '');
+                    }).join('')
+                    + '. Otherwise, <a href="javascript:pandora.proceed()">proceed</a> at your own risk.',
+                $message = $('<div>')
+                    .css({
+                        position: 'absolute',
+                        left: 0,
+                        top: '160px',
+                        right: 0,
+                        bottom: 0,
+                        width: '320px',
+                        height: '160px',
+                        margin: 'auto'
+                    }),
+                $images = $('<div>')
+                    .css({
+                        margin: '12px',
+                        textAlign: 'center'
                     })
-                    .fail(function() {
+                    .appendTo($message);
-                        throw new Error('File not found.');
+            $('#loadingIcon').remove();
+            $message.appendTo($loadingScreen);
+            browsers.forEach(function(browser) {
+                $('<a>')
+                    .attr({
+                        href: browser.url,
+                        title: browser.name
+                    })
+                    .append(
+                        $('<img>')
+                            .attr({
+                                src: Ox.PATH + 'Ox.UI/png/browser' + browser.name.replace(' ', '') + '128.png'
+                            })
+                            .css({width: '32px', height: '32px', margin: '4px'})
+                    )
+                    .appendTo($images);
             });        
+            $('<div>')
+                .css({
+                    textAlign: 'center'
+                })
+                .html(html)
+                .appendTo($message);
+            
         });
+
+        function loadImages(images, callback) {
+            Ox.loadFile(images.shift(), function() {
+                if (images.length) {
+                    loadImages(images, callback);
                 } else {
-            Ox.loadFile(prefix + 'js/pandora.js', callback);
+                    callback();
                 }
+            });
         }
 
-});
+        pandora.proceed = function() {
+            $loadingScreen.animate({
+                opacity: 0
+            }, 1000, function() {
+                $loadingScreen.remove();
+            });
+        }
+
+    }
+
+}());

static/js/pandora/UI.js

@@ -79,6 +79,9 @@ pandora.UI = (function() {
         var item = args['item'] || pandora.user.ui.item,
             list = pandora.user.ui._list || '';
         Ox.print('item/list', item, list, '...', args['videoPoints.' + item])
+        if (!pandora.user.ui.lists[list]) {
+            add['lists.' + that.encode(list)] = {};
+        }
         Ox.forEach(args, function(val, key) {
             if (Object.keys(listSettings).indexOf(key) > -1) {
                 // if applicable, copy setting to list setting

static/js/pandora/appPanel.js

@@ -14,7 +14,7 @@ pandora.ui.appPanel = function() {
         });
     that.display = function() {
         // fixme: move animation into Ox.App
-        var animate = $('#home').length == 0;
+        var animate = $('.OxScreen').length == 0;
         Ox.print('ANIMATE?', animate)
         animate && pandora.$ui.body.css({opacity: 0});
         that.appendTo(pandora.$ui.body);

static/js/pandora/home.js

@@ -6,7 +6,6 @@ pandora.ui.home = function() {
 
     var that = $('<div>')
             .addClass('OxScreen')
-            .attr({id: 'home'})
             .css({
                 position: 'absolute',
                 width: '100%',
@@ -26,6 +25,7 @@ pandora.ui.home = function() {
                 margin: 'auto',
                 opacity: 0,
                 MozTransform: 'scaleY(-1)',
+                OTransform: 'scaleY(-1)',
                 WebkitTransform: 'scaleY(-1)'
             })
             .appendTo(that),

static/js/pandora/item.js

@@ -149,7 +149,7 @@ pandora.ui.item = function() {
             // fixme: duplicated
             var clipsQuery = pandora.getClipsQuery(),
                 isClipsQuery = !!clipsQuery.conditions.length;
-            //
+            // ...
             pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.player = Ox.VideoPanelPlayer({
                 annotationsSize: pandora.user.ui.annotationsSize,
                 censored: censored,