1import{LitElement,classMap,createRef,css,html,nothing,ref,when}from"@lit";import*as paths from"@nova/paths";import styles from"@nova/styles";import{viewportObserver}from"@nova/utils";import"@vendor/media-chrome";import"@vendor/media-chrome-vimeo";import"@vendor/media-chrome-youtube";class NovaAdaptiveVideo extends LitElement{static properties={sectionId:{type:String,attribute:"section-id"},srcDesktop:{type:String,attribute:"src-desktop"},aspectRatioDesktop:{type:String,attribute:"aspect-ratio-desktop"},srcMobile:{type:String,attribute:"src-mobile"},aspectRatioMobile:{type:String,attribute:"aspect-ratio-mobile"},srcType:{type:String,attribute:"src-type"},posterDesktop:{type:String,attribute:"poster-desktop"},posterMobile:{type:String,attribute:"poster-mobile"},descriptionDesktop:{type:String,attribute:"description-desktop"},descriptionMobile:{type:String,attribute:"description-mobile"},loadingType:{type:String,attribute:"loading"},viewport:{type:String,state:!0},autoplay:{type:Boolean},loop:{type:Boolean},sound:{type:Boolean},controls:{type:Boolean},captions:{type:String,attribute:"captions"},trackProgress:{type:Boolean,attribute:"track-progress"},background:{type:Boolean,attribute:"background"},adaptContainerHeight:{type:Boolean,attribute:"adapt-container-height"}};get activeSrc(){return this.srcMobile?["mobile","tablet"].includes(this.viewport)?this.srcMobile:this.srcDesktop:this.srcDesktop}get activeAspectRatio(){return this.aspectRatioMobile?["mobile","tablet"].includes(this.viewport)?this.aspectRatioMobile:this.aspectRatioDesktop:this.aspectRatioDesktop}get activeDesc(){return this.activeSrc===this.srcMobile&&this.descriptionMobile!=="false"?this.descriptionMobile:this.activeSrc===this.srcDesktop&&this.descriptionDesktop!=="false"?this.descriptionDesktop:""}get activePoster(){return this.activeSrc===this.srcMobile&&this.posterMobile!=="false"?this.posterMobile:this.activeSrc===this.srcDesktop&&this.posterDesktop!=="false"?this.posterDesktop:!1}constructor(){super(),this.viewport=viewportObserver.currentViewport,viewportObserver.addListener(this._handleViewportChange),this.srcMobile=!1,this.srcDesktop=!1,this.aspectRatioMobile=!1,this.aspectRatioDesktop="16/9",this.videoRef=createRef(),this.loadingType="lazy",this.background=!1,this.adaptContainerHeight=!1}connectedCallback(){super.connectedCallback(),this.autoplay&&(this.autoplaying=!0),this.percentageCompleted=0,this.videoTwentyFive=!1,this.videoFifty=!1,this.videoSeventyFive=!1,this.videoComplete=!1,this.videoInView=!1}firstUpdated(){this.$video=this.videoRef.value}_handleViewportChange=newViewport=>{this.viewport=newViewport};_handlePlay=()=>{this.autoplaying||(this.parentElement.removeAttribute("paused"),this.parentElement.setAttribute("playing",!0)),typeof this.sound>"u"&&(this.$video.muted=!0)};_handlePause=()=>{this.autoplaying=!1,this.parentElement.removeAttribute("playing"),this.parentElement.setAttribute("paused",!0)};_handleProgress=()=>{if(this.$video?.readyState>=2&&this.trackProgress){const progressUpdate=()=>{this.percentageCompleted=this.$video.currentTime/this.$video.duration*100,!this.videoTwentyFive&&this.percentageCompleted>25&&(this.videoTwentyFive=!0,this._handleTrackProgress("25%")),!this.videoFifty&&this.percentageCompleted>50&&(this.videoFifty=!0,this._handleTrackProgress("50%")),!this.videoSeventyFive&&this.percentageCompleted>75&&(this.videoSeventyFive=!0,this._handleTrackProgress("75%")),!this.videoComplete&&this.percentageCompleted>99&&(this.videoComplete=!0,this._handleTrackProgress("100%"),this.$video.removeEventListener("timeupdate",progressUpdate))};this.$video.addEventListener("timeupdate",progressUpdate)}};_handleTrackProgress=progress=>{};renderYoutubeVideo=()=>html` 2 <youtube-video 3 ${ref(this.videoRef)} 4 part="video-element" 5 id="video-element" 6 slot="media" 7 src=${this.activeSrc} 8 loading=${this.loadingType} 9 muted 10 playsinline 11 aria-label=${this.activeDesc} 12 ?autoplay=${this.autoplay} 13 ?loop=${this.loop} 14 @loadeddata=${this._handleProgress} 15 @pause=${this._handlePause} 16 @play=${this._handlePlay} 17 > 18 ${this.renderCaptions} 19 </youtube-video> 20 `;renderVimeoVideo=()=>html` 21 <vimeo-video 22 ${ref(this.videoRef)} 23 part="video-element" 24 id="video-element" 25 slot="media" 26 src=${this.activeSrc} 27 loading=${this.loadingType} 28 muted 29 playsinline 30 aria-label=${this.activeDesc} 31 ?autoplay=${this.autoplay} 32 ?loop=${this.loop} 33 @loadeddata=${this._handleProgress} 34 @pause=${this._handlePause} 35 @play=${this._handlePlay} 36 > 37 ${this.renderCaptions} 38 </vimeo-video> 39 `;renderUploadedVideo=()=>html` 40 <video 41 ${ref(this.videoRef)} 42 part="video-element" 43 id="video-element" 44 slot="media" 45 src=${this.activeSrc} 46 loading=${this.loadingType} 47 playsinline 48 aria-label=${this.activeDesc} 49 ?autoplay=${this.autoplay} 50 ?loop=${this.loop} 51 @loadeddata=${this._handleProgress} 52 @pause=${this._handlePause} 53 @play=${this._handlePlay} 54 > 55 ${this.renderCaptions} 56 </video> 57 `;renderCaptions=()=>
57{if(this.captions)return html` 58 <track 59 label="English" 60 kind="subtitles" 61 srclang="en" 62 src="${window.__DNA_GLOBAL__?.domain}/cdn/shop/files/${this.captions.split("files/")[2]}" 63 />`};renderControls=()=>html` 64 <media-control-bar part="controls"> 65 <media-play-button> 66 <span slot="play"> 67 <div class="media-button-container media-button--play">${paths.play}</div> 68 </span> 69 <span slot="pause"><div class="media-button-container">${paths.pause}</div></span> 70 </media-play-button> 71 ${when(this.sound,()=>html` 72 <media-mute-button mediavolumelevel="high"> 73 <span slot="high"><div class="media-button-container">${paths.audioOn}</div></span> 74 <span slot="off"><div class="media-button-container">${paths.audioOff}</div></span> 75 </media-mute-button> 76 `,()=>nothing)} 77 ${when(this.captions,()=>html` 78 <media-captions-button> 79 <span slot="on"><div class="media-button-container">${paths.captionsOn}</div></span> 80 <span slot="off"><div class="media-button-container">${paths.captionsOff}</div></span> 81 </media-captions-button> 82 `,()=>nothing)} 83 </media-control-bar> 84 `;play(){this.$video.play()}render(){const stateClasses={"background-video":this.background,"adapter-height":this.adaptContainerHeight};return html` 85 <media-controller class="${classMap(stateClasses)}" part="media-controller" style="--active-aspect-ratio: ${this.activeAspectRatio}"> 86 ${when(this.srcType==="youtube",this.renderYoutubeVideo,()=>nothing)} 87 ${when(this.srcType==="vimeo",this.renderVimeoVideo,()=>nothing)} 88 ${when(this.srcType==="upload",this.renderUploadedVideo,()=>nothing)} 89 ${when(this.activePoster,()=>html` 90 <media-poster-image 91 slot="poster" 92 src=${this.activePoster}> 93 </media-poster-image>`,()=>nothing)} 94 ${when(this.controls,this.renderControls,()=>nothing)} 95 </media-controller> 96 `}static styles=[styles.a11y,styles.variables,css` 97 :host { 98 display: block; 99 height: 100%; 100 width: 100%; 101 } 102 #video-element { 103 height: 100%; 104 object-fit: contain; 105 width: 100%; 106 } 107 media-controller { 108 width: 100%; 109 height: auto; 110 aspect-ratio: var(--active-aspect-ratio); 111 display: block; 112 } 113 .adapter-height { 114 width: auto; 115 height: 100%; 116 left: 50%; 117 transform: translateX(-50%); 118 } 119 media-control-bar { 120 display: flex; 121 justify-content: flex-end; 122 position: absolute; 123 bottom: var(--nova-space-md); 124 right: var(--nova-space-page-margin); 125 gap: var(--nova-space-xs); 126 } 127 @media screen and (min-width: 1024px) { 128 media-control-bar { 129 bottom: var(--nova-space-sm); 130 right: var(--nova-space-sm); 131 } 132 .media-button--play { 133 opacity: 0; 134 } 135 } 136 media-control-bar > * { 137 cursor: pointer; 138 --media-control-background: transparent; 139 --media-control-hover-background: transparent; 140 line-height: 0; 141 padding: 0; 142 } 143 media-control-bar > *:last-child { 144 margin: 0; 145 } 146 @media screen and (max-width: 768px) { 147 .background-video { 148 height: 100%; 149 width: auto; 150 left: 50%; 151 transform: translateX(-50%); 152 } 153 } 154 155 .media-button-container { 156 border-radius: 4px; 157 background: rgba(0, 0, 0, 0.30); 158 width: 30px; 159 height: 30px; 160 display: flex; 161 justify-content: center; 162 align-items: center; 163 } 164 165 .media-button-container svg { 166 width: 10px; 167 height: 10px; 168 } 169 170 .hidden { 171 display: none; 172 } 173 `]}customElements.define("nova-adaptive-video",NovaAdaptiveVideo); 174//# sourceMappingURL=/cdn/shop/t/335/assets/component-adaptive-video.js.map?v=75765132423133105181790628814
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.