diff --git a/dashboard-ui/bower_components/eventie/.bower.json b/dashboard-ui/bower_components/eventie/.bower.json index 6b5b662fdc..917d217ea8 100644 --- a/dashboard-ui/bower_components/eventie/.bower.json +++ b/dashboard-ui/bower_components/eventie/.bower.json @@ -30,6 +30,6 @@ "commit": "14d2ca3df97da64c820829a8310f9198fbafbcfa" }, "_source": "git://github.com/desandro/eventie.git", - "_target": "~1.0.3", + "_target": "^1", "_originalSource": "eventie" } \ No newline at end of file diff --git a/dashboard-ui/bower_components/paper-ripple/.bower.json b/dashboard-ui/bower_components/paper-ripple/.bower.json index 2f654d71c6..157225ee71 100644 --- a/dashboard-ui/bower_components/paper-ripple/.bower.json +++ b/dashboard-ui/bower_components/paper-ripple/.bower.json @@ -32,14 +32,14 @@ "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0" }, "ignore": [], - "homepage": "https://github.com/polymerelements/paper-ripple", + "homepage": "https://github.com/PolymerElements/paper-ripple", "_release": "1.0.5", "_resolution": { "type": "version", "tag": "v1.0.5", "commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5" }, - "_source": "git://github.com/polymerelements/paper-ripple.git", + "_source": "git://github.com/PolymerElements/paper-ripple.git", "_target": "^1.0.0", - "_originalSource": "polymerelements/paper-ripple" + "_originalSource": "PolymerElements/paper-ripple" } \ No newline at end of file diff --git a/dashboard-ui/components/requirecss.js b/dashboard-ui/components/requirecss.js new file mode 100644 index 0000000000..e50ca986c9 --- /dev/null +++ b/dashboard-ui/components/requirecss.js @@ -0,0 +1,80 @@ +define(function () { + var requireCss = {}; + + requireCss.normalize = function (name, normalize) { + if (name.substr(name.length - 4, 4) == '.css') + name = name.substr(0, name.length - 4); + + return normalize(name); + } + + var importedCss = []; + + function isLoaded(url) { + return importedCss.indexOf(url) != -1; + } + + function removeFromLoadHistory(url) { + + url = url.toLowerCase(); + + importedCss = importedCss.filter(function (c) { + return url.indexOf(c.toLowerCase()) == -1; + }); + } + + requireCss.load = function (cssId, req, load, config) { + + // Somehow if the url starts with /css, require will get all screwed up since this extension is also called css + cssId = cssId.replace('js/requirecss', 'css'); + var url = cssId + '.css'; + + var packageName = ''; + + // TODO: handle any value before the # + if (url.indexOf('theme#') != -1) { + url = url.replace('theme#', ''); + packageName = 'theme'; + } + + if (url.indexOf('http') != 0 && url.indexOf('file:') != 0) { + url = config.baseUrl + url; + } + + if (!isLoaded(url)) { + importedCss.push(url); + + var link = document.createElement('link'); + + if (packageName) { + link.setAttribute('data-package', packageName); + } + + link.setAttribute('rel', 'stylesheet'); + link.setAttribute('type', 'text/css'); + link.onload = load; + link.setAttribute('href', url + "?" + config.urlArgs); + document.head.appendChild(link); + } else { + load(); + } + } + + window.requireCss = { + unloadPackage: function (packageName) { + + // Todo: unload css here + var stylesheets = document.head.querySelectorAll("link[data-package='" + packageName + "']"); + for (var i = 0, length = stylesheets.length; i < length; i++) { + + var stylesheet = stylesheets[i]; + + Logger.log('Unloading stylesheet: ' + stylesheet.href); + stylesheet.parentNode.removeChild(stylesheet); + removeFromLoadHistory(stylesheet.href); + } + } + }; + + return requireCss; +}); diff --git a/dashboard-ui/css/nowplayingbar.css b/dashboard-ui/css/nowplayingbar.css index 1786918536..46bb9b01ca 100644 --- a/dashboard-ui/css/nowplayingbar.css +++ b/dashboard-ui/css/nowplayingbar.css @@ -64,7 +64,9 @@ background-color: rgba(26,26,26,.94); border-top: 1px solid #444; text-align: center; - /*box-shadow: 0 0 8px rgba(255,255,255,.4);*/ + display: flex; + flex-direction: row; + align-items: center; } .hiddenNowPlayingBar .nowPlayingBar { @@ -91,10 +93,6 @@ } .nowPlayingBarInfoContainer { - vertical-align: middle; - position: absolute; - left: 0; - bottom: 0; } .nowPlayingImage { @@ -166,9 +164,11 @@ vertical-align: middle; text-align: center; margin-top: 12px; - position: relative; /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */ z-index: 2; + position: absolute; + left: 0; + right: 0; } .nowPlayingBarPositionContainer { @@ -210,10 +210,8 @@ } .nowPlayingBarRight { - position: absolute; - bottom: 12px; - right: 10px; - vertical-align: middle; + position: relative; + margin: 0 1em 0 auto; /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */ z-index: 2; } @@ -255,18 +253,14 @@ .nowPlayingBar .playlistButton { display: none !important; } - - .nowPlayingBarRight { - bottom: 18px; - } } @media all and (max-width: 800px) { .nowPlayingBarCurrentTime { padding-left: 0; - top: 12px; - right: 130px; + top: 22px; + right: 140px; position: absolute; } @@ -274,10 +268,6 @@ display: none !important; } - .nowPlayingBarRight { - bottom: 10px; - } - .nowPlayingBar, .nowPlayingImage img { height: 70px; } diff --git a/dashboard-ui/scripts/actionsheet.js b/dashboard-ui/scripts/actionsheet.js index 2b3f3affe2..79a78e4082 100644 --- a/dashboard-ui/scripts/actionsheet.js +++ b/dashboard-ui/scripts/actionsheet.js @@ -6,18 +6,16 @@ // positionTo // showCancel // title - var id = 'dlg' + new Date().getTime(); var html = ''; - var style = ""; - var windowHeight = $(window).height(); + var pos; // If the window height is under a certain amount, don't bother trying to position // based on an element. if (options.positionTo && windowHeight >= 540) { - var pos = $(options.positionTo).offset(); + pos = $(options.positionTo).offset(); pos.top += $(options.positionTo).innerHeight() / 2; pos.left += $(options.positionTo).innerWidth() / 2; @@ -41,12 +39,8 @@ // Do some boundary checking pos.top = Math.max(pos.top, 0); pos.left = Math.max(pos.left, 0); - - style += 'position:fixed;top:' + pos.top + 'px;left:' + pos.left + 'px'; } - html += ''; - if (options.title) { html += '

'; html += options.title; @@ -93,57 +87,62 @@ html += ''; } - html += ''; + var dlg = document.createElement('paper-dialog'); + dlg.setAttribute('with-backdrop', 'with-backdrop'); + dlg.innerHTML = html; - $(document.body).append(html); + if (pos) { + dlg.style.position = 'fixed'; + dlg.style.left = pos.left + 'px'; + dlg.style.top = pos.top + 'px'; + } + document.body.appendChild(dlg); + + // The animations flicker in IE and Firefox (probably wherever the polyfill is used) + if (browserInfo.chrome) { + dlg.animationConfig = { + // scale up + 'entry': { + name: 'scale-up-animation', + node: dlg, + timing: { duration: 160, easing: 'ease-out' } + }, + // fade out + 'exit': { + name: 'fade-out-animation', + node: dlg, + timing: { duration: 200, easing: 'ease-in' } + } + }; + } setTimeout(function () { - var dlg = document.getElementById(id); - - // The animations flicker in IE and Firefox (probably wherever the polyfill is used) - if (browserInfo.chrome) { - dlg.animationConfig = { - // scale up - 'entry': { - name: 'scale-up-animation', - node: dlg, - timing: { duration: 160, easing: 'ease-out' } - }, - // fade out - 'exit': { - name: 'fade-out-animation', - node: dlg, - timing: { duration: 200, easing: 'ease-in' } - } - }; - } - dlg.open(); + }, 10); - // Has to be assigned a z-index after the call to .open() - $(dlg).on('iron-overlay-closed', function () { - $(this).remove(); - }); + // Has to be assigned a z-index after the call to .open() + dlg.addEventListener('iron-overlay-closed', function () { + dlg.parentNode.removeChild(dlg); + }); - // Seeing an issue in some non-chrome browsers where this is requiring a double click - var eventName = browserInfo.chrome || browserInfo.safari ? 'click' : 'mousedown'; + // Seeing an issue in some non-chrome browsers where this is requiring a double click + var eventName = browserInfo.chrome || browserInfo.safari ? 'click' : 'mousedown'; - $('.actionSheetMenuItem', dlg).on(eventName, function () { + $('.actionSheetMenuItem', dlg).on(eventName, function () { - var selectedId = this.getAttribute('data-id'); + var selectedId = this.getAttribute('data-id'); - // Add a delay here to allow the click animation to finish, for nice effect - setTimeout(function () { + // Add a delay here to allow the click animation to finish, for nice effect + setTimeout(function () { - dlg.close(); + dlg.close(); - if (options.callback) { - options.callback(selectedId); - } + if (options.callback) { + options.callback(selectedId); + } - }, 100); - }); - }, 100); + }, 100); + }); } window.ActionSheetElement = { diff --git a/dashboard-ui/scripts/chromecast.js b/dashboard-ui/scripts/chromecast.js index 5169d36ba2..7fc46ff7c9 100644 --- a/dashboard-ui/scripts/chromecast.js +++ b/dashboard-ui/scripts/chromecast.js @@ -849,9 +849,6 @@ }); } - requirejs(["thirdparty/cast_sender"], function () { - - initializeChromecast(); - }); + requirejs(["https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"], initializeChromecast); })(window, window.chrome, console); \ No newline at end of file diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 9d862d1b6c..ee889b85f7 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -2793,6 +2793,24 @@ dlg.entryAnimation = 'fade-in-animation'; dlg.exitAnimation = 'fade-out-animation'; + // The animations flicker in IE and Firefox (probably wherever the polyfill is used) + if (browserInfo.chrome) { + dlg.animationConfig = { + // scale up + 'entry': { + name: 'scale-up-animation', + node: dlg, + timing: { duration: 160, easing: 'ease-out' } + }, + // fade out + 'exit': { + name: 'fade-out-animation', + node: dlg, + timing: { duration: 200, easing: 'ease-in' } + } + }; + } + var html = ''; // There seems to be a bug with this in safari causing it to immediately roll up to 0 height diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js index c28430af2d..b05adc10ab 100644 --- a/dashboard-ui/scripts/librarylist.js +++ b/dashboard-ui/scripts/librarylist.js @@ -24,24 +24,28 @@ function slideDown(elem, iterations) { - var keyframes = [ - { height: '100%', offset: 0 }, - { height: '0', display: 'none', offset: 1 }]; - var timing = { duration: 300, iterations: iterations, fill: 'forwards', easing: 'ease-out' }; - elem.animate(keyframes, timing).onfinish = function() { - elem.style.display = 'none'; - }; + requestAnimationFrame(function () { + var keyframes = [ + { height: '100%', offset: 0 }, + { height: '0', display: 'none', offset: 1 }]; + var timing = { duration: 300, iterations: iterations, fill: 'forwards', easing: 'ease-out' }; + elem.animate(keyframes, timing).onfinish = function () { + elem.style.display = 'none'; + }; + }); } function slideUp(elem, iterations) { - elem.style.display = 'block'; + requestAnimationFrame(function () { + elem.style.display = 'block'; - var keyframes = [ - { height: '0', offset: 0 }, - { height: '100%', offset: 1 }]; - var timing = { duration: 300, iterations: iterations, fill: 'forwards', easing: 'ease-out' }; - return elem.animate(keyframes, timing); + var keyframes = [ + { height: '0', offset: 0 }, + { height: '100%', offset: 1 }]; + var timing = { duration: 300, iterations: iterations, fill: 'forwards', easing: 'ease-out' }; + elem.animate(keyframes, timing); + }); } function getOverlayHtml(item, currentUser, card, commands) { diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index 7b3cddb152..c4b73e2a2e 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -690,10 +690,8 @@ function ensureVideoPlayerElements() { - Dashboard.importCss('css/mediaplayer-video.css'); - - // TODO: remove dependency on this file - Dashboard.importCss('css/nowplayingbar.css'); + // TODO: remove dependency on nowplayingbar + require(['css!/css/nowplayingbar.css', 'css!/css/mediaplayer-video.css']); var html = '