update theme

dashboard-ui/scripts/actionsheet.js

@@ -49,9 +49,9 @@
         }
 
         if (options.title) {
-            html += '<h2>';
+            html += '<h3>';
             html += options.title;
-            html += '</h2>';
+            html += '</h3>';
         }
 
         // There seems to be a bug with this in safari causing it to immediately roll up to 0 height
@@ -61,12 +61,15 @@
             html += '<paper-dialog-scrollable>';
         }
 
-        // If any items have an icon, give them all an icon just to make sure they're all lined up evenly
+        var itemsWithIcons = options.items.filter(function(o) {
-        var renderIcon = options.items.filter(function (o) {
             return o.ironIcon;
-        }).length;
+        });
 
-        if (options.title && !renderIcon) {
+        // If any items have an icon, give them all an icon just to make sure they're all lined up evenly
+        var renderIcon = itemsWithIcons.length;
+        var center = options.title && (!itemsWithIcons.length || itemsWithIcons.length != options.items.length);
+
+        if (center) {
             html += '<paper-menu style="text-align:center;">';
         } else {
             html += '<paper-menu>';
@@ -78,9 +81,13 @@
             html += '<paper-menu-item class="actionSheetMenuItem" data-id="' + option.id + '" style="display:block;">';
 
             if (option.ironIcon) {
+                if (center) {
+                    html += '<iron-icon style="margin-right:.5em;" icon="' + option.ironIcon + '"></iron-icon>';
+                } else {
                     html += '<iron-icon icon="' + option.ironIcon + '"></iron-icon>';
                 }
-            else if (renderIcon) {
+            }
+            else if (renderIcon && !center) {
                 html += '<iron-icon></iron-icon>';
             }
             html += '<span>' + option.name + '</span>';

dashboard-ui/themes/holiday/style.css

@@ -0,0 +1,64 @@
+.ui-body-b h1, .ui-body-b h2 {
+    color: #E53A35;
+}
+
+.holidayInfoButton {
+    color: #E53A35 !important;
+}
+
+.libraryViewNav .ui-btn-active {
+    border-bottom-color: #AC3326 !important;
+    color: #AC3326 !important;
+}
+
+paper-button[raised].more {
+    background: #AC3326;
+}
+
+.channelTimeslotHeader, .timeslotHeader {
+    background: #cc3333 !important;
+}
+
+.channelTimeslotHeader {
+    border-right-color: #cc3333 !important;
+}
+
+paper-tabs #selectionBar, .playedIndicator {
+    background-color: #cc3333 !important;
+}
+
+.darkDrawer .sidebarLink:hover {
+    background: #AC3326;
+}
+
+.darkDrawer .sidebarLink.selectedSidebarLink, .darkDrawer .selectedMediaFolder {
+    background: #AC3326 !important;
+}
+
+#snowflakeContainer {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+}
+
+.snowflake {
+    padding-left: 15px;
+    font-family: Cambria, Georgia, serif;
+    font-size: 14px;
+    line-height: 24px;
+    position: fixed;
+    color: #FFFFFF;
+    user-select: none;
+    z-index: 1000;
+}
+
+    .snowflake:hover {
+        cursor: default;
+    }
+
+.christmas .mainDrawer {
+    background-image: url(https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/themes/holiday/drawer.jpg);
+    background-size: cover;
+    background-position: 60% center;
+    background-repeat: no-repeat;
+}

dashboard-ui/themes/holiday/theme.js

@@ -0,0 +1,394 @@
+(function () {
+
+    var lastSound = 0;
+    var iconCreated;
+    var destroyed;
+    var currentSound;
+
+    function onPageShow() {
+
+        if (!browserInfo.mobile) {
+
+            if (getHolidayTheme() == 'off') {
+                return;
+            }
+
+            var page = this;
+
+            Dashboard.importCss('themes/holiday/style.css');
+
+            if (!page.classList.contains('itemDetailPage')) {
+                setBackdrop(page);
+            }
+
+            if (lastSound == 0) {
+                //playSound('http://github.com/MediaBrowser/Emby.Resources/raw/master/themes/halloween/monsterparadefade.mp3', .1);
+            } else if ((new Date().getTime() - lastSound) > 30000) {
+                playSound('http://github.com/MediaBrowser/Emby.Resources/raw/master/themes/holiday/sleighbells.wav');
+            }
+
+            addSnowflakes();
+
+            addIcon();
+
+            setBodyClass();
+        }
+    }
+
+    function destroyTheme() {
+
+        document.documentElement.classList.remove('christmas');
+        stopSnowflakes();
+
+        if (currentSound) {
+            currentSound.stop();
+        }
+
+        var holidayInfoButton = document.querySelector('.holidayInfoButton');
+        if (holidayInfoButton) {
+            holidayInfoButton.parentNode.removeChild(holidayInfoButton);
+        }
+
+        Dashboard.removeStylesheet('themes/holiday/style.css');
+        Backdrops.clear();
+    }
+
+    var snowFlakesInitialized;
+    function addSnowflakes() {
+
+        if (!snowFlakesInitialized) {
+            snowFlakesInitialized = true;
+            $(document.body).append('<div id="snowflakeContainer"><p class="snowflake">*</p></div>');
+            generateSnowflakes();
+            Events.on(MediaController, 'beforeplaybackstart', onPlaybackStart);
+        }
+    }
+
+    function onPlaybackStart() {
+
+        if (currentSound) {
+            currentSound.stop();
+        }
+
+        stopSnowflakes();
+    }
+
+    function setBackdrop(page) {
+
+        if (!page.classList.contains('itemDetailPage')) {
+
+            if (getHolidayTheme() == 'christmas') {
+                Backdrops.setBackdropUrl(page, 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/themes/holiday/bgc.jpg');
+            } else {
+                Backdrops.setBackdropUrl(page, 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/themes/holiday/bg.jpg');
+            }
+        }
+    }
+
+    var holidayThemeKey = 'holidaytheme4';
+    function getHolidayTheme() {
+        return appStorage.getItem(holidayThemeKey);
+    }
+
+    function setHolidayTheme(value) {
+        appStorage.setItem(holidayThemeKey, value);
+        setBodyClass();
+    }
+
+    function setBodyClass() {
+        if (getHolidayTheme() == 'christmas') {
+            document.documentElement.classList.add('christmas');
+        } else {
+            document.documentElement.classList.remove('christmas');
+        }
+    }
+
+    function onIconClick(e) {
+
+        // todo: switch this to action sheet
+
+        var items = [];
+
+        var current = getHolidayTheme();
+
+        items.push({
+            name: 'None',
+            id: 'none',
+            ironIcon: current == 'off' ? 'check' : null
+        });
+        items.push({
+            name: 'Joy!',
+            id: 'joy',
+            ironIcon: current != 'off' && current != 'christmas' ? 'check' : null
+        });
+
+        items.push({
+            name: 'Christmas',
+            id: 'christmas',
+            ironIcon: current == 'christmas' ? 'check' : null
+        });
+
+        require(['actionsheet'], function () {
+
+            ActionSheetElement.show({
+                title: 'Happy holidays from the Emby team! Select your holiday theme:',
+                items: items,
+                callback: function (id) {
+
+                    switch (id) {
+
+                        case 'none':
+                            setHolidayTheme('off');
+                            destroyTheme();
+                            break;
+                        case 'joy':
+                            setHolidayTheme('');
+                            setBackdrop($($.mobile.activePage)[0]);
+                            break;
+                        case 'christmas':
+                            setHolidayTheme('christmas');
+                            setBackdrop($($.mobile.activePage)[0]);
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            });
+
+        });
+    }
+
+    function addIcon() {
+
+        if (iconCreated) {
+            return;
+        }
+
+        iconCreated = true;
+
+        var elem = document.createElement('paper-icon-button');
+        elem.icon = 'info';
+        elem.classList.add('holidayInfoButton');
+        elem.addEventListener('click', onIconClick);
+
+        var viewMenuSecondary = document.querySelector('.viewMenuSecondary');
+
+        if (viewMenuSecondary) {
+            viewMenuSecondary.insertBefore(elem, viewMenuSecondary.childNodes[0]);
+        }
+    }
+
+    pageClassOn('pageshow', "libraryPage", onPageShow);
+
+    function playSound(path, volume) {
+
+        require(['howler'], function (howler) {
+
+            var sound = new Howl({
+                urls: [path],
+                volume: volume || .3
+            });
+
+            sound.play();
+            currentSound = sound;
+            lastSound = new Date().getTime();
+        });
+    }
+
+})();
+
+(function () {
+
+    // The star of every good animation
+    var requestAnimationFrame = window.requestAnimationFrame ||
+                                window.mozRequestAnimationFrame ||
+                                window.webkitRequestAnimationFrame ||
+                                window.msRequestAnimationFrame;
+
+    var transforms = ["transform",
+                      "msTransform",
+                      "webkitTransform",
+                      "mozTransform",
+                      "oTransform"];
+
+    var transformProperty = getSupportedPropertyName(transforms);
+
+    // Array to store our Snowflake objects
+    var snowflakes = [];
+
+    // Global variables to store our browser's window size
+    var browserWidth;
+    var browserHeight;
+
+    // Specify the number of snowflakes you want visible
+    var numberOfSnowflakes = 50;
+
+    // Flag to reset the position of the snowflakes
+    var resetPosition = false;
+
+    //
+    // It all starts here...
+    //
+    function setup() {
+        window.addEventListener("resize", setResetFlag, false);
+    }
+    setup();
+
+    //
+    // Vendor prefix management
+    //
+    function getSupportedPropertyName(properties) {
+        for (var i = 0; i < properties.length; i++) {
+            if (typeof document.body.style[properties[i]] != "undefined") {
+                return properties[i];
+            }
+        }
+        return null;
+    }
+
+    //
+    // Constructor for our Snowflake object
+    //
+    function Snowflake(element, radius, speed, xPos, yPos) {
+
+        // set initial snowflake properties
+        this.element = element;
+        this.radius = radius;
+        this.speed = speed;
+        this.xPos = xPos;
+        this.yPos = yPos;
+
+        // declare variables used for snowflake's motion
+        this.counter = 0;
+        this.sign = Math.random() < 0.5 ? 1 : -1;
+
+        // setting an initial opacity and size for our snowflake
+        this.element.style.opacity = .1 + Math.random();
+        this.element.style.fontSize = 12 + Math.random() * 50 + "px";
+    }
+
+    //
+    // The function responsible for actually moving our snowflake
+    //
+    Snowflake.prototype.update = function () {
+
+        // using some trigonometry to determine our x and y position
+        this.counter += this.speed / 5000;
+        this.xPos += this.sign * this.speed * Math.cos(this.counter) / 40;
+        this.yPos += Math.sin(this.counter) / 40 + this.speed / 30;
+
+        // setting our snowflake's position
+        setTranslate3DTransform(this.element, Math.round(this.xPos), Math.round(this.yPos));
+
+        // if snowflake goes below the browser window, move it back to the top
+        if (this.yPos > browserHeight) {
+            this.yPos = -50;
+        }
+    }
+
+    //
+    // A performant way to set your snowflake's position
+    //
+    function setTranslate3DTransform(element, xPosition, yPosition) {
+        var val = "translate3d(" + xPosition + "px, " + yPosition + "px" + ", 0)";
+        element.style[transformProperty] = val;
+    }
+
+    //
+    // The function responsible for creating the snowflake
+    //
+    function generateSnowflakes() {
+
+        // get our snowflake element from the DOM and store it
+        var originalSnowflake = document.querySelector(".snowflake");
+
+        // access our snowflake element's parent container
+        var snowflakeContainer = originalSnowflake.parentNode;
+
+        // get our browser's size
+        browserWidth = document.documentElement.clientWidth;
+        browserHeight = document.documentElement.clientHeight;
+
+        // create each individual snowflake
+        for (var i = 0; i < numberOfSnowflakes; i++) {
+
+            // clone our original snowflake and add it to snowflakeContainer
+            var snowflakeCopy = originalSnowflake.cloneNode(true);
+            snowflakeContainer.appendChild(snowflakeCopy);
+
+            // set our snowflake's initial position and related properties
+            var initialXPos = getPosition(50, browserWidth);
+            var initialYPos = getPosition(50, browserHeight);
+            var speed = 5 + Math.random() * 40;
+            var radius = 4 + Math.random() * 10;
+
+            // create our Snowflake object
+            var snowflakeObject = new Snowflake(snowflakeCopy,
+                                                radius,
+                                                speed,
+                                                initialXPos,
+                                                initialYPos);
+            snowflakes.push(snowflakeObject);
+        }
+
+        // remove the original snowflake because we no longer need it visible
+        snowflakeContainer.removeChild(originalSnowflake);
+
+        // call the moveSnowflakes function every 30 milliseconds
+        moveSnowflakes();
+    }
+
+    var stopped = false;
+
+    window.generateSnowflakes = generateSnowflakes;
+    window.stopSnowflakes = function () {
+        stopped = true;
+        $('.snowflake').remove();
+    };
+
+    //
+    // Responsible for moving each snowflake by calling its update function
+    //
+    function moveSnowflakes() {
+
+        if (stopped) {
+            return;
+        }
+
+        for (var i = 0; i < snowflakes.length; i++) {
+            var snowflake = snowflakes[i];
+            snowflake.update();
+        }
+
+        // Reset the position of all the snowflakes to a new value
+        if (resetPosition) {
+            browserWidth = document.documentElement.clientWidth;
+            browserHeight = document.documentElement.clientHeight;
+
+            for (var i = 0; i < snowflakes.length; i++) {
+                var snowflake = snowflakes[i];
+
+                snowflake.xPos = getPosition(50, browserWidth);
+                snowflake.yPos = getPosition(50, browserHeight);
+            }
+
+            resetPosition = false;
+        }
+
+        requestAnimationFrame(moveSnowflakes);
+    }
+
+    //
+    // This function returns a number between (maximum - offset) and (maximum + offset)
+    //
+    function getPosition(offset, size) {
+        return Math.round(-1 * offset + Math.random() * (size + 2 * offset));
+    }
+
+    //
+    // Trigger a reset of all the snowflakes' positions
+    //
+    function setResetFlag(e) {
+        resetPosition = true;
+    }
+})();