import dom from"./../../dom.js";import layoutManager from"./../../layoutmanager.js";import inputManager from"./../../common/inputmanager.js";import"./../../customelementupgrade.js";require(["css!modules/emby-elements/emby-slider/emby-slider.css"]);let insetInlineStartProp=CSS.supports("inset-inline-start","0")?"insetInlineStart":"left",insetBlockStartProp="bottom",supportsCalc=CSS.supports("width","min(45.2%,calc(100% - .65em))"),supportsMin=CSS.supports("width","min(10em, 5vw)"),supportsCalcMin=supportsCalc&&supportsMin;function onInputCommand(e){let stepUpCommand,stepDownCommand;switch(stepDownCommand="vertical"===this.getAttribute("orient")?(stepUpCommand="up","down"):"rtl"===document.dir?(stepUpCommand="left","right"):(stepUpCommand="right","left"),e.detail.command){case stepUpCommand:e.preventDefault(),this.stepUp();var value=parseFloat(this.value);this.beginEditing(value);break;case stepDownCommand:{e.preventDefault(),this.stepDown();let value=parseFloat(this.value);this.beginEditing(value);break}}}function getValueAsPercent(range,value){var min=parseFloat(range.min),value=(value-min)/(parseFloat(range.max)-min);return value*=100}function getValueFromPercent(range,pct){pct/=100;var min=parseFloat(range.min);return(parseFloat(range.max)-min)*pct+min}function updateValues(range,value){requestAnimationFrame(function(){var backgroundLower=range.backgroundLower,originalPct=getValueAsPercent(range,value),pct=originalPct+"%",backgroundLower=(backgroundLower&&(prop="vertical"===range.getAttribute("orient")?"height":"width",backgroundLower.style[prop]=pct),range.sliderThumb);if(backgroundLower){var prop="vertical"===range.getAttribute("orient")?insetBlockStartProp:insetInlineStartProp;if(supportsMin){if(originalPct<10)return void(backgroundLower.style[prop]="max("+originalPct+"%,.65em)");if(90<originalPct&&supportsCalcMin)return void(backgroundLower.style[prop]="min("+originalPct+"%,calc(100% - .65em))")}backgroundLower.style[prop]=originalPct+"%"}})}function onBubbleResized(){this.bubbleOffsetSize=null}function getBubbleOffsetSize(range){let size=range.bubbleOffsetSize;var prop;return size||(prop="vertical"===range.getAttribute("orient")?"offsetHeight":"offsetWidth",range.bubbleOffsetSize=size=range.getBubbleElement()[prop]),size}function onContainerResized(){this.containerOffsetSize=null}function getRangeContainerOffsetSize(range){let size=range.containerOffsetSize;var prop;return size||(prop="vertical"===range.getAttribute("orient")?"offsetHeight":"offsetWidth",range.containerOffsetSize=size=range.containerElement[prop]),size}let baseSliderBubbleClass="sliderBubble dialog";function updateBubble(range,value,pct,bubble){range.dragging&&range.dispatchEvent(new CustomEvent("displayvaluechange",{bubbles:!0,cancelable:!1,detail:{value:value}}));let html=value;html=range.getBubbleHtml?range.getBubbleHtml(html):'<h2 class="sliderBubbleText">'+(html=range.getBubbleText?range.getBubbleText(html):Math.round(html))+"</h2>",bubble.innerHTML=html;value="vertical"===range.getAttribute("orient")?insetBlockStartProp:insetInlineStartProp;if(supportsCalcMin){var size=getBubbleOffsetSize(range),size=Math.round(size/2);if(pct<30)return void(bubble.style[value]="max("+pct+"%,"+size+"px)");if(70<pct)return void(bubble.style[value]="min("+pct+"%,calc(100% - "+size+"px))");bubble.style[value]=pct+"%"}size=getBubbleOffsetSize(range),range=getRangeContainerOffsetSize(range);pct=range*(pct/100),pct=Math.max(pct,size/2),pct=Math.min(pct,range-size/2),bubble.style[value]=pct+"px"}function setRange(elem,range,startPercent,endPercent){elem=elem.style,elem["vertical"===range.getAttribute("orient")?insetBlockStartProp:insetInlineStartProp]=Math.max(startPercent,0)+"%",endPercent-=startPercent;elem["vertical"===range.getAttribute("orient")?"height":"width"]=Math.max(Math.min(endPercent,100),0)+"%"}function mapRangesFromRuntimeToPercent(ranges,runtime){return runtime?ranges.map(function(r){return{start:r.start/runtime*100,end:r.end/runtime*100}}):[]}let supportsTouchEvent="ontouchstart"in document.documentElement;function onPointerMove(e){if(!this.disabled){var pointerType=e.pointerType;if("touch"!==pointerType&&(pointerType||!supportsTouchEvent)&&(this.classList.add("emby-slider-hovering"),!this.dragging)){pointerType=this.sliderBubble;if(pointerType){var rect=this.getBoundingClientRect(),dir=document.dir;let bubblePct;if("vertical"===this.getAttribute("orient")){var offset=rect.bottom-e.clientY;bubblePct=offset/rect.height}else{e=e.clientX;let offset="rtl"===dir?rect.right-e:e-rect.left;bubblePct=offset/rect.width}bubblePct*=100,updateBubble(this,getValueFromPercent(this,bubblePct=Math.min(Math.max(0,bubblePct),100)),bubblePct,pointerType)}}}}function onPointerLeave(e){e.target===e.currentTarget&&this.classList.remove("emby-slider-hovering")}function onInput(e){this.beginEditing(parseFloat(this.value))}function onChange(e){updateValues(this,parseFloat(this.value));e=e.detail;e&&e.isStep||this.endEditing()}function onBlur(e){this.endEditing()}function onPointerUp(e){this.endEditing()}function onMouseWheel(e){e.deltaY<0?this.stepUp():this.stepDown(),e.preventDefault(),e.stopPropagation()}function onContextMenu(e){e.preventDefault()}class EmbySlider extends HTMLInputElement{constructor(){return super()}setForceDisplayThumb(forceDisplayThumb){forceDisplayThumb||layoutManager.tv?this.classList.remove("emby-slider-nothumb"):this.classList.add("emby-slider-nothumb"),forceDisplayThumb?this.sliderThumb.classList.remove("emby-slider-thumb-hoveronly"):this.sliderThumb.classList.add("emby-slider-thumb-hoveronly")}connectedCallback(){if("true"!==this.getAttribute("data-embyslider")){this.setAttribute("data-embyslider","true"),this.classList.add("emby-slider"),layoutManager.tv?this.classList.add("emby-slider-tv"):this.classList.add("emby-slider-scalebg"),dom.allowBackdropFilter()&&this.classList.add("emby-slider-backdropfilter");var containerElement=this.parentNode;containerElement.classList.add("emby-slider-container"),layoutManager.tv&&containerElement.classList.add("emby-slider-container-tv");let htmlToInsert="",backgroundClass=((this.getAttribute("data-sliderbackgroundclass")||"")+" emby-slider-background").trim(),thumbClass=((this.getAttribute("data-thumbclass")||"")+" emby-slider-thumb").trim();if(dom.allowBackdropFilter()&&(backgroundClass+=" emby-slider-background-backdropfilter",thumbClass+=" emby-slider-thumb-backdropfilter"),htmlToInsert=(htmlToInsert=(htmlToInsert=(htmlToInsert=htmlToInsert+('<div class="'+backgroundClass+'">')+'<div class="emby-slider-background-inner">')+'<div class="emby-slider-background-upper"></div>'+'<div class="emby-slider-background-lower"></div>')+"</div>"+"</div>")+('<div class="'+thumbClass+'"></div>'),"false"!==this.getAttribute("data-bubble")){let sliderBubbleClass=baseSliderBubbleClass;var customBubbleClass=this.getAttribute("data-bubbleclass"),customBubbleClass=(customBubbleClass&&(sliderBubbleClass+=" "+customBubbleClass),"rtl"===document.dir);customBubbleClass&&(sliderBubbleClass+=" sliderBubble-rtl"),layoutManager.tv&&(sliderBubbleClass+=" sliderBubble-tv",customBubbleClass)&&(sliderBubbleClass+=" sliderBubble-tv-rtl"),htmlToInsert+='<div class="'+sliderBubbleClass+'"></div>'}containerElement.insertAdjacentHTML("beforeend",htmlToInsert),this.backgroundElement=containerElement.querySelector(".emby-slider-background"),this.backgroundLower=containerElement.querySelector(".emby-slider-background-lower"),this.backgroundUpper=containerElement.querySelector(".emby-slider-background-upper"),this.sliderThumb=containerElement.querySelector(".emby-slider-thumb"),this.sliderBubble=containerElement.querySelector(".sliderBubble"),this.containerElement=containerElement,this.containerResizeObserver=new ResizeObserver(onContainerResized.bind(this),{}),this.containerResizeObserver.observe(containerElement),this.sliderBubble&&(this.bubbleResizeObserver=new ResizeObserver(onBubbleResized.bind(this),{}),this.bubbleResizeObserver.observe(this.sliderBubble));customBubbleClass="true"!==this.getAttribute("data-hoverthumb");this.setForceDisplayThumb(customBubbleClass),dom.addEventListener(this,"input",onInput,{passive:!0}),dom.addEventListener(this,"change",onChange,{passive:!0}),dom.addEventListener(this,"contextmenu",onContextMenu,{}),dom.addEventListener(this,"blur",onBlur,{}),dom.addEventListener(this,window.PointerEvent?"pointermove":"mousemove",onPointerMove,{passive:!0}),dom.addEventListener(this,window.PointerEvent?"pointerleave":"mouseleave",onPointerLeave,{passive:!0}),dom.addEventListener(this,window.PointerEvent?"pointerup":"mouseup",onPointerUp,{passive:!0}),dom.addEventListener(this,"wheel",onMouseWheel,{}),"false"!==this.getAttribute("data-defaultinputhandling")&&inputManager.on(this,onInputCommand),this.__upgraded=!0,this.dispatchEvent(new CustomEvent("upgraded",{cancelable:!1}))}}setValue(val,triggerChange){this.value=val,updateValues(this,val),triggerChange&&this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!1,detail:{isStep:!0}}))}disconnectedCallback(){this.backgroundUpper=null,this.backgroundLower=null,this.sliderThumb=null,this.sliderBubble=null,this.backgroundElement=null,this.containerElement=null;let observer=this.containerResizeObserver;observer&&observer.disconnect(),this.containerResizeObserver=null,(observer=this.bubbleResizeObserver)&&observer.disconnect(),this.bubbleResizeObserver=null,this.bubbleOffsetSize=null,this.containerOffsetSize=null}setSeekRanges(ranges,runtime,position){var elem=this.backgroundUpper;if(elem){null!=runtime&&(ranges=mapRangesFromRuntimeToPercent(ranges,runtime),position=position/runtime*100);for(let i=0,length=ranges.length;i<length;i++){var range=ranges[i];if(!(null!=position&&position>=range.end))return void setRange(elem,this,range.start,range.end)}setRange(elem,this,0,0)}}setIsClear(isClear){var backgroundLower=this.backgroundLower;backgroundLower&&(isClear?backgroundLower.classList.add("emby-slider-background-lower-clear"):backgroundLower.classList.remove("emby-slider-background-lower-clear"))}beginEditing(value){this.dragging=!0,this.classList.add("emby-slider-editing");var sliderBubble=this.sliderBubble;sliderBubble&&updateBubble(this,value,getValueAsPercent(this,value),sliderBubble),updateValues(this,value),this.dispatchEvent(new CustomEvent("beginediting",{bubbles:!0,cancelable:!1}))}cancelEditing(){this.endEditing(!1)}endEditing(triggerChange,value){this.dragging=!1,this.classList.remove("emby-slider-editing"),triggerChange&&(this.value=value,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!1}))),this.dispatchEvent(new CustomEvent("endediting",{bubbles:!0,cancelable:!1}))}stepUp(){HTMLInputElement.prototype.stepUp.call(this),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!1,detail:{isStep:!0}}))}stepDown(){HTMLInputElement.prototype.stepDown.call(this),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,cancelable:!1,detail:{isStep:!0}}))}getBubbleElement(){return this.sliderBubble}getTrackBackgroundUpper(){return this.backgroundUpper}}customElements.define("emby-slider",EmbySlider,{extends:"input"});export default EmbySlider;