diff --git a/dashboard-ui/bower_components/iron-behaviors/.bower.json b/dashboard-ui/bower_components/iron-behaviors/.bower.json index 17f68b335..db08f2170 100644 --- a/dashboard-ui/bower_components/iron-behaviors/.bower.json +++ b/dashboard-ui/bower_components/iron-behaviors/.bower.json @@ -29,14 +29,14 @@ "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" }, "ignore": [], - "homepage": "https://github.com/polymerelements/iron-behaviors", + "homepage": "https://github.com/PolymerElements/iron-behaviors", "_release": "1.0.12", "_resolution": { "type": "version", "tag": "v1.0.12", "commit": "657f526a2382a659cdf4e13be87ecc89261588a3" }, - "_source": "git://github.com/polymerelements/iron-behaviors.git", + "_source": "git://github.com/PolymerElements/iron-behaviors.git", "_target": "^1.0.0", - "_originalSource": "polymerelements/iron-behaviors" + "_originalSource": "PolymerElements/iron-behaviors" } \ No newline at end of file diff --git a/dashboard-ui/scripts/actionsheet.js b/dashboard-ui/scripts/actionsheet.js index 52c2bcdc4..3588e050c 100644 --- a/dashboard-ui/scripts/actionsheet.js +++ b/dashboard-ui/scripts/actionsheet.js @@ -49,9 +49,9 @@ } if (options.title) { - html += '

'; + html += '

'; html += options.title; - html += '

'; + html += ''; } // There seems to be a bug with this in safari causing it to immediately roll up to 0 height @@ -61,12 +61,15 @@ html += ''; } - // If any items have an icon, give them all an icon just to make sure they're all lined up evenly - var renderIcon = options.items.filter(function (o) { + var itemsWithIcons = 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 += ''; } else { html += ''; @@ -78,9 +81,13 @@ html += ''; if (option.ironIcon) { - html += ''; + if (center) { + html += ''; + } else { + html += ''; + } } - else if (renderIcon) { + else if (renderIcon && !center) { html += ''; } html += '' + option.name + ''; diff --git a/dashboard-ui/themes/holiday/bg.jpg b/dashboard-ui/themes/holiday/bg.jpg deleted file mode 100644 index 7e9c87e27..000000000 Binary files a/dashboard-ui/themes/holiday/bg.jpg and /dev/null differ diff --git a/dashboard-ui/themes/holiday/style.css b/dashboard-ui/themes/holiday/style.css index b90e099f0..0a3033ac7 100644 --- a/dashboard-ui/themes/holiday/style.css +++ b/dashboard-ui/themes/holiday/style.css @@ -1,22 +1,18 @@ .ui-body-b h1, .ui-body-b h2 { - color: #cc3333; + color: #E53A35; } -.viewMenuBar, .holidayInfoButton { - color: #cc3333 !important; -} - -.barsMenuButton { - color: #cc3333 !important; +.holidayInfoButton { + color: #E53A35 !important; } .libraryViewNav .ui-btn-active { - border-bottom-color: #cc3333 !important; - color: #cc3333 !important; + border-bottom-color: #AC3326 !important; + color: #AC3326 !important; } paper-button[raised].more { - background: #cc3333; + background: #AC3326; } .channelTimeslotHeader, .timeslotHeader { @@ -26,3 +22,43 @@ paper-button[raised].more { .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; +} diff --git a/dashboard-ui/themes/holiday/theme.js b/dashboard-ui/themes/holiday/theme.js index b3531af48..ee22b43da 100644 --- a/dashboard-ui/themes/holiday/theme.js +++ b/dashboard-ui/themes/holiday/theme.js @@ -7,48 +7,155 @@ function onPageShow() { - var page = this; + if (!browserInfo.mobile) { - if (!destroyed) { - - require(['css!themes/holiday/style.css']); - - if (!browserInfo.mobile) { - - if (!page.classList.contains('itemDetailPage')) { - Backdrops.setBackdropUrl(page, 'themes/holiday/bg.jpg'); - } - - 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/halloween/howl.wav'); - } + 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 onIconClick() { + 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('

*

'); + 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 - //require(['dialog'], function (dialog) { - // dialog({ + var items = []; - // title: "Happy Halloween", - // message: "Happy Halloween from the Emby Team. We hope your Halloween is spooktacular! Would you like to allow the Halloween theme to continue?", - // callback: function (result) { + var current = getHolidayTheme(); - // if (result == 1) { - // destroyTheme(); - // } - // }, + items.push({ + name: 'None', + id: 'none', + ironIcon: current == 'off' ? 'check' : null + }); + items.push({ + name: 'Joy!', + id: 'joy', + ironIcon: current != 'off' && current != 'christmas' ? 'check' : null + }); - // buttons: [Globalize.translate('ButtonYes'), Globalize.translate('ButtonNo')] - // }); - //}); + 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() { @@ -88,4 +195,200 @@ }); } +})(); + +(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; + } })(); \ No newline at end of file