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,137 +20,138 @@ 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()
-
-    window.pandora = new Ox.App({url: '/api/'}).bindEvent({
-
-        load: function(data) {
-
-            if (!browserSupported) {
-                return;
-                /*
-                $('.OxLoadingScreen')
-                    .css({opacity: 0.9})
-                    .click($(this).remove);
-                */
-            }
-
-            Ox.extend(pandora, {
-                requests: {},
-                ui: {}
-            });
-
-            loadResources(function() {
-
-                Ox.print('Ox.App load', data);
-
-                Ox.extend(pandora, {
-                    $ui: {
-                        body: $('body'),
-                        document: $(document),
-                        window: $(window)
-                            .bind({
-                                resize: function() {
-                                    pandora.resizeWindow();
-                                },
-                                unload: function() {
-                                    pandora.unloadWindow();
-                                }
-                            })
-                    },
-                    site: data.site,
-                    user: data.user.level == 'guest' ? Ox.clone(data.site.user) : data.user
-                });
-
-                Ox.extend(pandora.site, {
-                    clipKeys: Ox.map(data.site.clipKeys, function(key) {
-                        return Ox.extend(key, {
-                            operator: pandora.getSortOperator(key.id)
-                        });
-                    }),
-                    findKeys: Ox.map(data.site.itemKeys, function(key) {
-                        return key.find ? key : null;
-                    }),
-                    itemsSection: pandora.site.itemName.plural.toLowerCase(),
-                    sectionFolders: {
-                        items: [
-                            {id: 'personal', title: 'Personal Lists'},
-                            {id: 'favorite', title: 'Favorite Lists', showBrowser: false},
-                            {id: 'featured', title: 'Featured Lists', showBrowser: false},
-                            {id: 'volumes', title: 'Local Volumes'}
-                        ],
-                        edits: [
-                            {id: 'personal', title: 'Personal Edits'},
-                            {id: 'favorite', title: 'Favorite Edits', showBrowser: false},
-                            {id: 'featured', title: 'Featured Edits', showBrowser: false}                        
-                        ],
-                        texts: [
-                            {id: 'personal', title: 'Personal Texts'},
-                            {id: 'favorite', title: 'Favorite Texts', showBrowser: false},
-                            {id: 'featured', title: 'Featured Texts', showBrowser: false}                        
-                        ] 
-                    },
-                    sortKeys: Ox.map(pandora.site.itemKeys, function(key) {
-                        return key.columnWidth ? Ox.extend(key, {
-                            operator: pandora.getSortOperator(key.id)
-                        }) : null;
-                    })
-                });
-
-                pandora.site.listSettings = {};
-                Ox.map(pandora.site.user.ui, function(val, key) {
-                    if (/^list[A-Z]/.test(key)) {
-                        pandora.site.listSettings[key] = key[4].toLowerCase() + key.substr(5);
-                    }
-                });
-
-                Ox.extend(pandora.user, {
-                    sectionElement: 'buttons',
-                    selectedMovies: [], // fixme: used for what?
-                    videoFormat: Ox.UI.getVideoFormat(pandora.site.video.formats)
-                });
-
-                if (data.user.level == 'guest' && $.browser.mozilla) {
-                    pandora.user.ui.theme = 'classic';
-                }
-
-                // set up url controller
-
-                pandora.URL.init().parse(function() {
-
-                    Ox.UI.hideLoadingScreen();
-
-                    Ox.Theme(pandora.user.ui.theme);
-                    pandora.$ui.appPanel = pandora.ui.appPanel().display();        
-                    Ox.Request.requests() && pandora.$ui.loadingIcon.start();
-                    pandora.$ui.body.ajaxStart(pandora.$ui.loadingIcon.start);
-                    pandora.$ui.body.ajaxStop(pandora.$ui.loadingIcon.stop);
-
-                    pandora.site.sectionButtonsWidth = pandora.$ui.sectionButtons.width() + 8;
-                    
-                });
 
+    loadImages(function(images) {
+        loadScreen(images);
+        if (debug) {
+            loadOxJS(function() {
+                loadOxUI(loadPandora);
             });
+        } else {
+            loadOxUI(loadPandora);
         }
     });
 
-    function loadResources(callback) {
+    function loadImages(callback) {
+        // Opera doesn't fire onload for SVGs,
+        // so we only wait for the PNG to load.
+        var images = {};
+        images.logo = document.createElement('img');
+        images.logo.onload = function() {
+            callback(images);
+        };
+        images.logo.style.position = 'absolute';
+        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);
+                });
+            }
+        });
+    }
+
+    function loadPandoraFiles(callback) {
         var prefix = '/static/';
-        if(localStorage && localStorage.debug) {
+        if (localStorage && localStorage.debug) {
             Ox.getJSON(prefix + 'json/pandora.json', function(files) {
                 var promises = [];
                 files.forEach(function(file) {
@@ -173,4 +174,194 @@ Ox.load({
         }
     }
 
-});
+    function initPandora(data) {
+
+        Ox.print('Ox.App load', data);
+
+        Ox.extend(pandora, {
+            $ui: {
+                body: $('body'),
+                document: $(document),
+                window: $(window)
+                    .bind({
+                        resize: function() {
+                            pandora.resizeWindow();
+                        },
+                        unload: function() {
+                            pandora.unloadWindow();
+                        }
+                    })
+            },
+            site: data.site,
+            user: data.user.level == 'guest' ? Ox.clone(data.site.user) : data.user
+        });
+
+        Ox.extend(pandora.site, {
+            clipKeys: Ox.map(data.site.clipKeys, function(key) {
+                return Ox.extend(key, {
+                    operator: pandora.getSortOperator(key.id)
+                });
+            }),
+            findKeys: Ox.map(data.site.itemKeys, function(key) {
+                return key.find ? key : null;
+            }),
+            itemsSection: pandora.site.itemName.plural.toLowerCase(),
+            sectionFolders: {
+                items: [
+                    {id: 'personal', title: 'Personal Lists'},
+                    {id: 'favorite', title: 'Favorite Lists', showBrowser: false},
+                    {id: 'featured', title: 'Featured Lists', showBrowser: false},
+                    {id: 'volumes', title: 'Local Volumes'}
+                ],
+                edits: [
+                    {id: 'personal', title: 'Personal Edits'},
+                    {id: 'favorite', title: 'Favorite Edits', showBrowser: false},
+                    {id: 'featured', title: 'Featured Edits', showBrowser: false}                        
+                ],
+                texts: [
+                    {id: 'personal', title: 'Personal Texts'},
+                    {id: 'favorite', title: 'Favorite Texts', showBrowser: false},
+                    {id: 'featured', title: 'Featured Texts', showBrowser: false}                        
+                ] 
+            },
+            sortKeys: Ox.map(pandora.site.itemKeys, function(key) {
+                return key.columnWidth ? Ox.extend(key, {
+                    operator: pandora.getSortOperator(key.id)
+                }) : null;
+            })
+        });
+
+        pandora.site.listSettings = {};
+        Ox.map(pandora.site.user.ui, function(val, key) {
+            if (/^list[A-Z]/.test(key)) {
+                pandora.site.listSettings[key] = key[4].toLowerCase() + key.substr(5);
+            }
+        });
+
+        Ox.extend(pandora.user, {
+            sectionElement: 'buttons',
+            selectedMovies: [], // fixme: used for what?
+            videoFormat: Ox.UI.getVideoFormat(pandora.site.video.formats)
+        });
+
+        if (data.user.level == 'guest' && $.browser.mozilla) {
+            pandora.user.ui.theme = 'classic';
+        }
+
+        // set up url controller
+
+        pandora.URL.init().parse(function() {
+
+            if (data.browserSupported) {
+                $('#loadingScreen').remove();
+            } else {
+                loadBrowserMessage();
+            }
+
+            Ox.Theme(pandora.user.ui.theme);
+            pandora.$ui.appPanel = pandora.ui.appPanel().display();        
+            Ox.Request.requests() && pandora.$ui.loadingIcon.start();
+            pandora.$ui.body.ajaxStart(pandora.$ui.loadingIcon.start);
+            pandora.$ui.body.ajaxStop(pandora.$ui.loadingIcon.stop);
+
+            pandora.site.sectionButtonsWidth = pandora.$ui.sectionButtons.width() + 8;
+
+        });
+        
+    }
+
+    function loadBrowserMessage() {
+
+        var isMSIE = $.browser.msie,
+            browsers = Ox.merge(
+                isMSIE ? [{name: 'Chrome Frame', url: 'http://google.com/chromeframe/'}] : [],
+                [
+                    {name: 'Chrome', url: 'http://google.com/chrome/'},
+                    {name: 'Firefox', url: 'http://mozilla.org/firefox/'},
+                    {name: 'Safari', url: 'http://apple.com/safari/'}
+                ]
+            ),
+            images = browsers.map(function(browser) {
+                return Ox.PATH + 'Ox.UI/png/browser' + browser.name.replace(' ', '') + '128.png';
+            }),
+            $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'
+                    })
+                    .appendTo($message);
+            $('#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 {
+                    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,