1import{LitElement,html,css,ref,createRef}from"@hh/global.js";class ImageVideo extends LitElement{static properties={playing:{reflect:!0,type:Boolean},firstPlay:{attribute:"first-play",reflect:!0,type:Boolean},autoplay:{reflect:!0,type:Boolean},volumeEnabled:{mute:!1,type:Boolean},controls:{reflect:!0,type:Boolean},duration:{reflect:0,type:Number}};$play=createRef();$pause=createRef();$volume=createRef();$volume_x=createRef();$volume_2=createRef();constructor(){super()}connectedCallback(){if(super.connectedCallback(),this.desktopVideo=this.querySelector('[slot="mp4-video"]'),this.mobileVideo=this.querySelector('[slot="mobile-mp4-video"]'),this.desktopVideoAlt=this.querySelector('[slot="mp4-video-alt"]'),this.mobileVideoAlt=this.querySelector('[slot="mobile-mp4-video-alt"]'),this.youtubeVideo=this.querySelector('[slot="youtube-video"]'),this.reducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)"),this.mobileScreen=window.matchMedia("(max-width: 749px)"),this.insideModal=this.dataset.modal,this.autoplay&&(this.desktopVideo||this.desktopVideoAlt||this.youtubeVideo)){const intersectionOptions={rootMargin:"-100px"};this.intersectionObserver=new IntersectionObserver(this.autoplayIntersection.bind(this),intersectionOptions),this.intersectionObserver.observe(this)}this.addEventListener("first-play",this.handleFirstPlay.bind(this))}disconnectedCallback(){this.autoplay&&(this.desktopVideo||this.desktopVideoAlt||this.youtubeVideo)&&this.intersectionObserver.disconnect(),this.removeEventListener("first-play",this.handleFirstPlay),super.disconnectedCallback()}updated(changedProperties){changedProperties.has("playing")&&this.handlePlayingChange(this.playing),changedProperties.has("volumeEnabled")&&this.handleVolumeEnabledChange(this.volumeEnabled)}toggleTemplate(){return this.playing?html` 2 <!-- @ts-ignore no-incompatible-type-binding --> 3 <slot name="pause" @click="${this.toggle}" ${ref(this.$pause)}></slot> 4 `:html` 5 <!-- @ts-ignore no-incompatible-type-binding --> 6 <slot name="play" @click="${this.toggle}" ${ref(this.$play)}></slot> 7 `}toggleHeadingTemplate(){return this.playing?html` 8 `:html` 9 <slot name="heading"></slot> 10 `}toggleVolumeTemplate(){return this.volumeEnabled?html` 11 <!-- @ts-ignore no-incompatible-type-binding --> 12 <button class="volume-container"> 13 <slot name="volume-2" class="volume-2" @click="${this.toggleVolume}" ${ref(this.$volume_2)}></slot> 14 <div class="volume-input-container"> 15 <br><br> 16 <input class="range vertical-heighest-first round" type="range" min="0" max="100" step="1" value="50" @change="${this.adjustVolume}"> 17 <br><br><br> 18 </div> 19 </button> 20 `:html` 21 <!-- @ts-ignore no-incompatible-type-binding --> 22 <button class="volume-container"> 23 <slot name="volume-x" @click="${this.toggleVolume}" ${ref(this.$volume_x)}></slot> 24 </button> 25 `}videoTemplate(){if(this.youtubeVideo)return html` 26 <div class="youtube-wrapper"> 27 <slot name="youtube-video"></slot> 28 </div> 29 `;if(this.desktopVideo)return this.mobileVideo&&this.mobileScreen.matches?(this.vdsMedia=this.querySelector('[slot="mobile-mp4-video"]'),html`<slot name="mobile-mp4-video"></slot>`):(this.vdsMedia=this.querySelector('[slot="mp4-video"]'),html`<slot name="mp4-video"></slot>`);if(this.desktopVideoAlt)return this.mobileVideoAlt&&this.mobileScreen.matches?(this.videoAlt=this.querySelector('[slot="mobile-mp4-video-alt"]'),html`<slot name="mobile-mp4-video-alt"></slot>`):(this.videoAlt=this.querySelector('[slot="mp4-video-alt"]'),html`<slot name="mp4-video-alt"></slot>`)}async toggle(){this.playing?(this.playing=!1,await this.updateComplete):(this.playing=!0,await this.updateComplete)}async toggleVolume(){this.volumeEnabled?(this.volumeEnabled=!1,await this.updateComplete):(this.volumeEnabled=!0,await this.updateComplete)}async adjustVolume(event){if(this.youtubeVideo)YT.get(this.youtubeVideo.id).setVolume(event.target.value);else if(this.desktopVideo){var event=new CustomEvent("vds-volume-change-request",{detail:event.target.value/100});this.vdsMedia.dispatchEvent(event)}else this.desktopVideoAlt&&(this.desktopVideoAlt.querySelector("video").volume=event.target.value/100)}async startVideo(){this.youtubeVideo?YT.get(this.youtubeVideo.id).seekTo(0,!0):this.desktopVideo||this.desktopVideoAlt,this.playing=!0}handlePlayingChange(playing){playing?this.youtubeVideo?this.dispatchVideoEvent("playVideo"):this.desktopVideo?this.dispatchVideoEvent("vds-play-request"):this.desktopVideoAlt&&(this.firstPlay||this.dispatchEvent(new CustomEvent("first-play")),this.desktopVideoAlt.querySelector("video").play()):this.youtubeVideo?this.dispatchVideoEvent("pauseVideo"):this.desktopVideo?this.dispatchVideoEvent("vds-pause-request"):this.desktopVideoAlt&&(this.firstPlay||this.dispatchEvent(new CustomEvent("first-play")),this.desktopVideoAlt.querySelector("video").pause())}handleVolumeEnabledChange(volumeEnabled){volumeEnabled?this.youtubeVideo?YT.get(this.youtubeVideo.id).unMute():this.desktopVideo?this.dispatchVideoEvent("vds-unmute-request"):this.desktopVideoAlt&&(this.firstPlay||this.dispatchEvent(new CustomEvent("first-play")),this.desktopVideoAlt.querySelector("video").muted=!1):this.youtubeVideo?YT.get(this.youtubeVideo.id).mute():this.desktopVideo?this.dispatchVideoEvent("vds-mute-request"):this.desktopVideoAlt&&(this.firstPlay||this.dispatchEvent(new CustomEvent("first-play")),this.desktopVideoAlt.querySelector("video").muted=!0)}handleFirstPlay(){this.firstPlay=!0,this.mobileScreen.matches&&setTimeout(()=>this.scrollIntoView({behavior:"smooth",block:"center"}),0)}autoplayIntersection(entries){if(this.insideModal)entries[0].isIntersecting==!1?this.playing=!1:this.startVideo();else{if(this.reducedMotion.matches||this.mobileScreen.matches||entries[0].isIntersecting==!1)return;this.intersectionObserver.disconnect(),this.playing=!0}}dispatchVideoEvent(eventName){this.firstPlay||this.dispatchEvent(new CustomEvent("first-play")),this.youtubeVideo?this.youtubeVideo.contentWindow.postMessage(JSON.stringify({event:"command",func:`${eventName}`}),"https://www.youtube.com"):this.desktopVideo&&this.vdsMedia.dispatchEvent(new CustomEvent(eventName))}render(){return this.youtubeVideo?this.hasAttribute("controls")?html` 30 <div class="container testing"> 31 <slot name="media"></slot> 32 ${this.videoTemplate()} 33 <div class="content content--mp4"> 34 <div class="content-wrapper"> 35 ${this.toggleTemplate()} 36 ${this.toggleHeadingTemplate()} 37 </div> 38 </div> 39 </div> 40 `:html` 41 <div class="container"> 42 <slot name="media"></slot> 43 ${this.videoTemplate()} 44 <div class="content"> 45 <div class="content-wrapper"> 46 <slot name="heading"></slot> 47 </div> 48 </div> 49 </div> 50 `:this.desktopVideo?this.hasAttribute("controls")?html` 51 <div class="container"> 52 <slot name="media"></slot> 53 ${this.videoTemplate()} 54 <div class="content"> 55 <div class="content-wrapper"> 56 ${this.toggleTemplate()} 57 <slot name="heading"></slot> 58 </div> 59 </div> 60 </div> 61 `:html` 62 <div class="container"> 63 <slot name="media"></slot> 64 ${this.videoTemplate()} 65 <div class="content"> 66 <div class="content-wrapper"> 67 <slot name="heading"></slot> 68 </div> 69 </div> 70 </div> 71 `:this.desktopVideoAlt?this.hasAttribute("controls")?html` 72 <div class="container"> 73 <slot name="media"></slot> 74 ${this.videoTemplate()} 75 <div class="content content--mp4"> 76 <div class="content-wrapper"> 77 ${this.toggleTemplate()} 78 ${this.toggleHeadingTemplate()} 79 </div> 80 </div> 81 </div> 82 `:html` 83 <div class="container"> 84 <slot name="media"></slot> 85 ${this.videoTemplate()} 86 <div class="content"> 87 <div class="content-wrapper"> 88 ${this.toggleHeadingTemplate()} 89 </div> 90 </div> 91 </div> 92 `:html` 93 <div class="container"> 94 <slot name="media"></slot> 95 ${this.videoTemplate()} 96 <div class="content"> 97 <div class="content-wrapper"> 98 <slot name="heading"></slot> 99 </div> 100 </div> 101 </div> 102 `}static styles=css` 103 :host([first-play]) .content { 104 background: none; 105 } 106 107 :host ::slotted([slot='mp4-video']), 108 :host ::slotted([slot='mobile-mp4-video']), 109 :host ::slotted([slot='mp4-video-alt']), 110 :host ::slotted([slot='mobile-mp4-video-alt']), 111 :host .youtube-wrapper { 112 display: none; 113 width: 100%; 114 } 115 116 :host([first-play]) ::slotted([slot='mp4-video']), 117 :host([first-play]) ::slotted([slot='mobile-mp4-video']), 118 :host([first-play]) ::slotted([slot='mp4-video-alt']), 119 :host([first-play]) ::slotted([slot='mobile-mp4-video-alt']), 120 :host([first-play]) .youtube-wrapper, 121 :host([playing]) ::slotted([slot='mp4-video']), 122 :host([playing]) ::slotted([slot='mobile-mp4-video']), 123 :host([playing]) ::slotted([slot='mp4-video-alt']), 124 :host([playing]) ::slotted([slot='mobile-mp4-video-alt']), 125 :host([playing]) .youtube-wrapper { 126 display: block; 127 } 128 129 :host([first-play]) ::slotted([slot='media']) { 130 display: none; 131 position: absolute; 132 top: 0; 133 left: 0; 134 width: 100%; 135 height: 100%; 136 } 137 138 :host([first-play]) .content--mp4 { 139 display: none; 140 } 141 142 .container { 143 position: relative; 144 } 145 146 .content { 147 position: absolute; 148 inset: 0; 149 display: flex; 150 align-items: flex-end; 151 justify-content: flex-start; 152 padding: 1rem; 153 background: var(--hh-overlay-gradient); 154 } 155 156 @media screen and (min-width: 750px) { 157 .content { 158 padding: 0.8rem 1.35rem; 159 } 160 } 161 162 .content-wrapper { 163 width: 100%; 164 display: flex; 165 align-items: center; 166 gap: 1.2rem; 167 } 168 169 @media screen and (min-width: 750px) { 170 .content-wrapper { 171 min-height: 81px; 172 } 173 } 174 175 ::slotted([slot='play']) { 176 width: 100%; 177 height: 100%; 178 position: absolute; 179 top: 0; 180 left: 0; 181 } 182 183 ::slotted([slot='play']), 184 ::slotted([slot='pause']), 185 ::slotted([slot='volume']), 186 ::slotted([slot='volume-x']), 187 ::slotted([slot='volume-2']) { 188 border: 0; 189 padding: 0; 190 color: var(--hh-color-background); 191 background-color: transparent; 192 cursor: pointer; 193 } 194 195 ::slotted([slot='heading']) { 196 color: var(--hh-color-background); 197 margin: 0; 198 } 199 200 :host([first-play]) ::slotted([slot='heading']) { 201 display: none; 202 } 203 204 .volume-container { 205 display: none; 206 } 207 208 @media screen and (max-width: 749px) { 209 :host([first-play]) .volume-container { 210 display: block; 211 } 212 } 213 214 @media screen and (min-width: 750px) { 215 :host([first-play]) .volume-container { 216 display: block; 217 } 218 } 219 220 .volume-container:focus .volume-input-container { 221 display: block; 222 } 223 224 @media screen and (min-width: 750px) { 225 .volume-container:hover .volume-input-container { 226 display: block; 227 } 228 } 229 230 .youtube-wrapper { 231 position: relative; 232 padding-bottom: 56.25%; 233 } 234 235 .youtube-wrapper ::slotted([slot='youtube-video']) { 236 position: absolute; 237 width: 100%; 238 height: 100%; 239 border: 0; 240 background-color: transparent; 241 } 242 243 .volume-container { 244 position: relative; 245 background: transparent; 246 border: 0; 247 outline: 0; 248 } 249 250 .volume-input-container { 251 display: none; 252 position: absolute; 253 left: 50%; 254 transform: translate(-50%, -50%); 255 bottom: 22px; 256 padding: 10px; 257 max-width: 20%; 258 } 259 260 input[type=range].range { 261 cursor: pointer; 262 -webkit-appearance: none; 263 width: 80px !important; 264 height: 4px; 265 z-index: 200; 266 } 267 268 input[type=range].range::-webkit-slider-thumb { 269 -webkit-appearance: none; 270 width: 12px; 271 height: 12px; 272 border-radius: 100%; 273 background-color: var(--hh-color-background); 274 } 275 276 input[type=range].round { 277 -webkit-border-radius: 20px; 278 -moz-border-radius: 20px; 279 border-radius: 20px 280 } 281 282 input[type=range].round::-webkit-slider-thumb { 283 -webkit-border-radius: 5px; 284 -moz-border-radius: 5px; 285 -o-border-radius: 5px 286 } 287 288 .vertical-heighest-first { 289 -webkit-transform: rotate(270deg) translateY(-34px); 290 -moz-transform: rotate(270deg) translateY(-34px); 291 -o-transform: rotate(270deg) translateY(-34px); 292 -ms-transform: rotate(270deg) translateY(-34px); 293 transform: rotate(270deg) translateY(-34px) 294 } 295 `}customElements.define("hh-image-video",ImageVideo); 296//# sourceMappingURL=/cdn/shop/t/725/assets/component-image-video.js.map?v=121370636457063373051776706983
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.