diff --git a/dashboard-ui/bower_components/emby-webcomponents/.bower.json b/dashboard-ui/bower_components/emby-webcomponents/.bower.json index 8801172df9..5cfc7b056b 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json +++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json @@ -15,12 +15,12 @@ }, "devDependencies": {}, "ignore": [], - "version": "1.4.46", - "_release": "1.4.46", + "version": "1.4.47", + "_release": "1.4.47", "_resolution": { "type": "version", - "tag": "1.4.46", - "commit": "3dcd07a1386cef6bbb6267851b90f950ca18f5ad" + "tag": "1.4.47", + "commit": "b57164cb8d8222bd7fc039bed2cfa01132ee2862" }, "_source": "https://github.com/MediaBrowser/emby-webcomponents.git", "_target": "^1.2.0", diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.css b/dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.css index 834f39ea43..7de1e78129 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.css +++ b/dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.css @@ -26,6 +26,7 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider { align-self: center; z-index: 1; cursor: pointer; + margin: 0; /**************************** Tracks ****************************/ /**************************** Thumbs ****************************/ /**************************** 0-value ****************************/ @@ -321,3 +322,14 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider { padding: 0; transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1); } + +.sliderBubble { + position: absolute; + top: -3.7em; + left: 0; + padding: .75em; + background: #3367d6; + color: #fff; + border-radius: 1000px; + font-size: 90%; +} diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.js b/dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.js index 056cd208a8..90f0a67f5f 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.js +++ b/dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.js @@ -32,6 +32,17 @@ } } + function updateBubble(range, bubble) { + + var value = range.value; + bubble.style.left = (value - 1) + '%'; + + if (range.getBubbleText) { + value = range.getBubbleText(value); + } + bubble.innerHTML = value; + } + EmbySliderPrototype.attachedCallback = function () { if (this.getAttribute('data-embycheckbox') == 'true') { @@ -46,19 +57,30 @@ var containerElement = this.parentNode; containerElement.classList.add('mdl-slider__container'); + var htmlToInsert = ''; + if (!supportsNativeProgressStyle) { - containerElement.insertAdjacentHTML('beforeend', '
'); + htmlToInsert += '
'; } + htmlToInsert += '
'; + + containerElement.insertAdjacentHTML('beforeend', htmlToInsert); + var backgroundLower = containerElement.querySelector('.mdl-slider__background-lower'); var backgroundUpper = containerElement.querySelector('.mdl-slider__background-upper'); + var sliderBubble = containerElement.querySelector('.sliderBubble'); - this.addEventListener('input', function () { + this.addEventListener('input', function (e) { this.dragging = true; + updateBubble(this, sliderBubble); + sliderBubble.classList.remove('hide'); }); this.addEventListener('change', function () { this.dragging = false; updateValues(this, backgroundLower, backgroundUpper); + updateBubble(this, sliderBubble); + sliderBubble.classList.add('hide'); }); if (!supportsNativeProgressStyle) { diff --git a/dashboard-ui/components/remotecontrol.js b/dashboard-ui/components/remotecontrol.js index f2d3383e23..3f93cd4952 100644 --- a/dashboard-ui/components/remotecontrol.js +++ b/dashboard-ui/components/remotecontrol.js @@ -696,20 +696,19 @@ } }); - context.querySelector('.nowPlayingPositionSlider', context)._setPinValue = function (value) { + context.querySelector('.nowPlayingPositionSlider', context).getBubbleText = function (value) { var state = lastPlayerState; if (!state || !state.NowPlayingItem || !state.NowPlayingItem.RunTimeTicks) { - this.pinValue = '--:--'; - return; + return '--:--'; } var ticks = state.NowPlayingItem.RunTimeTicks; ticks /= 100; ticks *= value; - this.pinValue = datetime.getDisplayRunningTime(ticks); + return datetime.getDisplayRunningTime(ticks); }; context.addEventListener('click', onContextClick); diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 05b06aad12..61bd7b0fbc 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -2284,10 +2284,10 @@ html += ''; if (options.overlayPlayButton && !item.IsPlaceHolder && (item.LocationType != 'Virtual' || !item.MediaType || item.Type == 'Program') && item.Type != 'Person') { - html += '
'; + html += '
'; } if (options.overlayMoreButton) { - html += '
'; + html += '
'; } // cardScalable @@ -2312,7 +2312,7 @@ if (options.cardLayout) { html += '
'; - html += ''; + html += ''; html += "
"; } diff --git a/dashboard-ui/scripts/mediacontroller.js b/dashboard-ui/scripts/mediacontroller.js index e923e73f75..e85683bdd2 100644 --- a/dashboard-ui/scripts/mediacontroller.js +++ b/dashboard-ui/scripts/mediacontroller.js @@ -88,7 +88,7 @@ return { name: name, id: t.id, - ironIcon: playerInfo.id == t.id ? 'check' : null + selected: playerInfo.id == t.id }; }); diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index 9238f42176..2fc6972549 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -805,19 +805,18 @@ positionSlider = parent.querySelector(".videoPositionSlider", parent); positionSlider.addEventListener('change', onPositionSliderChange); - positionSlider._setPinValue = function (value) { + positionSlider.getBubbleText = function (value) { var seekableDuration = getSeekableDuration(); if (!self.currentMediaSource || !seekableDuration) { - this.pinValue = '--:--'; - return; + return '--:--'; } var ticks = seekableDuration; ticks /= 100; ticks *= value; - this.pinValue = datetime.getDisplayRunningTime(ticks); + return datetime.getDisplayRunningTime(ticks); }; volumeSlider = parent.querySelector('.videoVolumeSlider');