1 line
No EOL
10 KiB
JavaScript
1 line
No EOL
10 KiB
JavaScript
import connectionManager from"./../emby-apiclient/connectionmanager.js";import dom from"./../dom.js";import playbackManager from"./../common/playback/playbackmanager.js";import MethodTimer from"./../common/methodtimer.js";let uiDependencies=["css!modules/backdrop/style.css"],supportsAsyncDecodedImages=dom.supportsAsyncDecodedImages(),supportsObjectFit=CSS.supports("object-fit","contain"),supportsImgSrcSet="srcset"in HTMLImageElement.prototype,RotationIntervalMs=24e3;function loadDependencies(){var deps=uiDependencies;deps.length&&require(deps)}loadDependencies();let supportsCssAnimations=CSS.supports("animation-name","a");function enableAnimation(){return supportsCssAnimations&&dom.supportsEventListenerOnce()}function enableRotation(){return!!enableAnimation()}function Backdrop(){}function mapImageSourceToUrl(source){return source.url}function getImageInfoId(imageInfo){var id=imageInfo.id;return id=id||(imageInfo.id=imageInfo.sources.map(mapImageSourceToUrl).join("|"))}function getFallbackImageSource(imageInfo){return imageInfo.sources[imageInfo.sources.length-1]}function mapSourceToString(source){return source.url+" "+source.width+"w"}function setSrcSetIntoImg(img,sources){(sources=sources.slice(0)).pop(),img.sizes="100vw",img.srcset=sources.map(mapSourceToString).join(",")}Backdrop.prototype.load=function(imageInfo,animate,parent,existingBackdropImage){let img=new Image,self=(img.setAttribute("data-id",getImageInfoId(imageInfo)),img.setAttribute("draggable","false"),img.setAttribute("fetchpriority","low"),supportsObjectFit&&(supportsAsyncDecodedImages&&img.setAttribute("decoding","async"),img.setAttribute("loading","lazy")),img.classList.add("backdropImage"),!1===imageInfo.coverImage&&img.classList.add("backdropImage-contain"),this);this.previousBackdropImage=existingBackdropImage;img.onload=function(){if(self.isDestroyed)self.removePreviousBackdropImage();else{let backdropImage=supportsObjectFit?img:document.createElement("div");if(supportsObjectFit||(backdropImage.style.backgroundImage="url('"+getFallbackImageSource(imageInfo).url+"')"),backdropImage.classList.add("backdropImage","displayingBackdropImage"),!1===imageInfo.coverImage&&backdropImage.classList.add("backdropImage-contain"),self.elem=backdropImage,internalBackdrop(!0),animate&&enableAnimation()&&backdropImage.classList.add("backdropImageFadeIn"),supportsObjectFit||parent.appendChild(backdropImage),img.style.visibility=null,enableAnimation()){let onAnimationComplete=function(){dom.removeEventListener(backdropImage,dom.whichAnimationEvent(),onAnimationComplete,{once:!0}),dom.removeEventListener(backdropImage,dom.whichAnimationCancelEvent(),onAnimationComplete,{once:!0}),self.removePreviousBackdropImage()};dom.addEventListener(backdropImage,dom.whichAnimationEvent(),onAnimationComplete,{once:!0}),dom.addEventListener(backdropImage,dom.whichAnimationCancelEvent(),onAnimationComplete,{once:!0})}else self.removePreviousBackdropImage()}},supportsObjectFit&&(img.style.visibility="hidden"),img.src=getFallbackImageSource(imageInfo).url,supportsImgSrcSet&&supportsObjectFit&&1<imageInfo.sources.length&&setSrcSetIntoImg(img,imageInfo.sources),supportsObjectFit&&parent.appendChild(img),this.imageInfo=imageInfo},Backdrop.prototype.removePreviousBackdropImage=function(){var existingBackdropImage=this.previousBackdropImage;existingBackdropImage&&(this.previousBackdropImage=null,existingBackdropImage.remove())},Backdrop.prototype.cancelAnimation=function(){var elem=this.elem;elem&&(elem.classList.remove("backdropImageFadeIn"),this.elem=null)},Backdrop.prototype.destroy=function(){this.isDestroyed=!0,this.cancelAnimation(),this.removePreviousBackdropImage()};let backdropContainer,backgroundContainer=document.querySelector(".backgroundContainer");function getBackdropContainer(){return(backdropContainer=backdropContainer||document.querySelector(".backdropContainer"))||((backdropContainer=document.createElement("div")).classList.add("backdropContainer"),document.body.insertBefore(backdropContainer,document.body.firstChild)),backdropContainer}let hasExternalBackdrop,currentLoadingBackdrop;function clearBackdrop(clearAll){clearRotation(),currentLoadingBackdrop&&(currentLoadingBackdrop.destroy(),currentLoadingBackdrop=null),getBackdropContainer().innerHTML="",clearAll&&(hasExternalBackdrop=!1),internalBackdrop(!1)}let hasInternalBackdrop;function setBackgroundContainerBackgroundEnabled(){hasInternalBackdrop||hasExternalBackdrop?(backgroundContainer.classList.add("withBackdrop"),getBackdropContainer().classList.add("withBackdrop")):(backgroundContainer.classList.remove("withBackdrop"),getBackdropContainer().classList.remove("withBackdrop"))}function internalBackdrop(enabled){hasInternalBackdrop=enabled,setBackgroundContainerBackgroundEnabled()}function externalBackdrop(enabled){hasExternalBackdrop=enabled,setBackgroundContainerBackgroundEnabled()}function setBackdropImage(imageInfo,animate){var elem=getBackdropContainer(),existingBackdropImage=elem.querySelector(".displayingBackdropImage");if(!currentLoadingBackdrop||getImageInfoId(currentLoadingBackdrop.imageInfo)!==getImageInfoId(imageInfo)){if(existingBackdropImage){if(existingBackdropImage.getAttribute("data-id")===getImageInfoId(imageInfo))return;existingBackdropImage.classList.remove("displayingBackdropImage")}currentLoadingBackdrop&&(currentLoadingBackdrop.destroy(),currentLoadingBackdrop=null);var instance=new Backdrop;instance.load(imageInfo,animate,elem,existingBackdropImage),currentLoadingBackdrop=instance}}function getBackdropMaxWidth(widths){var width=dom.getWindowSize().innerWidth;return widths.includes(width)?width:(width=100*Math.floor(width/100),Math.min(width,1920))}function getImageSources(apiClient,itemId,imageOptions){var widths=apiClient.getDefaultImageSizes();return widths.push(getBackdropMaxWidth(widths)),apiClient.getImageUrls(itemId,imageOptions,{widths:widths})}function getPrimaryImageInfos(item,imageOptions,apiClient){return item.ImageTags?.Primary||item.PrimaryImageTag?[{sources:getImageSources(apiClient,item.PrimaryImageItemId||item.Id||item.ItemId,Object.assign(imageOptions,{type:"Primary",tag:item.ImageTags?.Primary||item.PrimaryImageTag,EnableImageEnhancers:!1})),coverImage:item.PrimaryImageAspectRatio&&1.4<=item.PrimaryImageAspectRatio}]:[]}function getItemImageInfos(item,imageOptions,enablePrimaryImageBeforeInherited,allowPrimaryImage){item=item.ProgramInfo||item,imageOptions=imageOptions||{};let apiClient=connectionManager.getApiClient(item);if(item.BackdropImageTags&&0<item.BackdropImageTags.length)return item.BackdropImageTags.map(function(imgTag,index){return{sources:getImageSources(apiClient,item.BackdropItemId||item.Id,Object.assign(imageOptions,{type:"Backdrop",tag:imgTag,index:index})),coverImage:!0}});if(enablePrimaryImageBeforeInherited){enablePrimaryImageBeforeInherited=getPrimaryImageInfos(item,imageOptions,apiClient);if(enablePrimaryImageBeforeInherited.length)return enablePrimaryImageBeforeInherited}if(item.ParentBackdropItemId&&item.ParentBackdropImageTags&&item.ParentBackdropImageTags.length)return item.ParentBackdropImageTags.map(function(imgTag,index){return{sources:getImageSources(apiClient,item.ParentBackdropItemId,Object.assign(imageOptions,{type:"Backdrop",tag:imgTag,index:index})),coverImage:!0}});if(allowPrimaryImage){let primaryImageUrls=getPrimaryImageInfos(item,imageOptions,apiClient);if(primaryImageUrls.length)return primaryImageUrls;if(item.ParentPrimaryImageTag)return[{sources:getImageSources(apiClient,item.ParentPrimaryImageItemId,Object.assign(imageOptions,{type:"Primary",tag:item.ParentPrimaryImageTag,EnableImageEnhancers:!1})),coverImage:!1}]}return[]}function getImageInfos(items,imageOptions,enablePrimaryImageBeforeInherited,allowPrimaryImage){var list=[];for(let i=0,length=items.length;i<length;i++){var itemImages=getItemImageInfos(items[i],imageOptions,enablePrimaryImageBeforeInherited,allowPrimaryImage);list.push(...itemImages)}return list}function arraysEqual(a,b){if(a!==b){if(null==a||null==b)return!1;if(a.length!==b.length)return!1;for(let i=0;i<a.length;++i)if(a[i]!==b[i])return!1}return!0}let rotationInterval,currentRotatingImages=[],currentRotationIndex=-1,animationEnabledByCaller;function getBackdropsFromOptions(items,options){return getImageInfos(items,(options=options||{}).imageOptions,options.enablePrimaryImageBeforeInherited,options.allowPrimaryImage)}function setBackdrops(items,options){items=getImageInfos(items,(options=options||{}).imageOptions,options.enablePrimaryImageBeforeInherited,options.allowPrimaryImage);items.length?startRotation(items,options.enableImageRotation,options.enableAnimation):clearBackdrop()}function startRotation(images,enableImageRotation,enableAnimation){arraysEqual(images,currentRotatingImages)||(clearRotation(),currentRotatingImages=images,currentRotationIndex=-1,animationEnabledByCaller=!1!==enableAnimation,1<images.length&&!1!==enableImageRotation&&enableRotation()&&(rotationInterval=new MethodTimer({onInterval:onRotationInterval,timeoutMs:RotationIntervalMs,type:"interval"})),onRotationInterval(!0))}function onRotationInterval(force){if(!0===force||!playbackManager.isPlayingLocally(["Video","Game","Book"])){let newIndex=currentRotationIndex+1;newIndex>=currentRotatingImages.length&&(newIndex=0),currentRotationIndex=newIndex,setBackdropImage(currentRotatingImages[newIndex],animationEnabledByCaller),animationEnabledByCaller=!0}}function clearRotation(){var interval=rotationInterval;interval&&interval.destroy(),rotationInterval=null,currentRotatingImages=[],currentRotationIndex=-1}function setBackdrop(item,imageOptions){let imageInfo;(imageInfo=item?"string"==typeof item?{sources:[{url:item}],coverImage:!0}:getImageInfos([item],imageOptions)[0]:imageInfo)?(clearRotation(),setBackdropImage(imageInfo,!0)):clearBackdrop()}function hasBackdrop(){return null!=currentLoadingBackdrop}function getCurrentImageInfo(){var backdrop=currentLoadingBackdrop;return backdrop?backdrop.imageInfo:null}export default{getBackdropsFromOptions:getBackdropsFromOptions,setBackdrops:setBackdrops,setBackdrop:setBackdrop,clear:clearBackdrop,externalBackdrop:externalBackdrop,hasBackdrop:hasBackdrop,getCurrentImageInfo:getCurrentImageInfo}; |