1var __defProp = Object.defineProperty; 2var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 }); 3import { u as uuidv4 } from "../chunks/chunk.dcf-utility.js?v=6.1.6"; 4class DCFAutoplayVideoToggle { 5 static { 6 __name(this, "DCFAutoplayVideoToggle"); 7 } 8 uuid = uuidv4(); 9 autoplayVideoContainer = null; 10 video = null; 11 toggleButton = null; 12 autoplayVideos = []; 13 videoContainerClassList = [ 14 "dcf-relative" 15 ]; 16 toggleBtnClassList = [ 17 "dcf-btn-autoplay-video-toggle", 18 "dcf-btn", 19 "dcf-btn-primary", 20 "dcf-z-1", 21 "dcf-absolute", 22 "dcf-bottom-0", 23 "dcf-right-0", 24 "dcf-d-flex", 25 "dcf-ai-center", 26 "dcf-jc-center", 27 "dcf-mb-3", 28 "dcf-mr-3", 29 "dcf-h-7", 30 "dcf-w-7", 31 "dcf-circle" 32 ]; 33 togglePlayBtnInnerHTML = `<svg class="dcf-h-4 dcf-w-4 dcf-fill-current" width="24" height="24" viewBox="0 0 24 24" focusable="false" aria-hidden="true"> 34 <path d="M21.759 11.577L2.786.077a.499.499 0 0 0-.759.428v23a.498.498 0 0 0 .5.5c.09 0 .18-.024.259-.072l18.973-11.5a.5.5 0 0 0 0-.856z"></path> 35</svg>`; 36 togglePauseBtnInnerHTML = `<svg class="dcf-h-4 dcf-w-4 dcf-fill-current" width="24" height="24" viewBox="0 0 24 24" focusable="false" aria-hidden="true"> 37 <path d="M10.5 0h-5C5.224 0 5 .224 5 .5v23C5 23.776 5.224 24 5.5 24h5c.276 0 .5-.224.5-.5v-23C11 .224 10.776 0 10.5 0zM18.5 0h-5C13.224 0 13 .224 13 .5v23c0 .276.224.5.5.5h5c.276 0 .5-.224.5-.5v-23C19 .224 18.776 0 18.5 0z"></path> 38</svg>`; 39 toggleEvent = new Event("dcfAutoplayVideoToggle"); 40 constructor(autoPlayVideoContainer, options = {}) { 41 "videoContainerClassList" in options && Array.isArray(options.videoContainerClassList) && (this.videoContainerClassList = options.videoContainerClassList), "toggleBtnClassList" in options && Array.isArray(options.toggleBtnClassList) && (this.toggleBtnClassList = options.toggleBtnClassList), "togglePlayBtnInnerHTML" in options && typeof options.togglePlayBtnInnerHTML == "string" && (this.togglePlayBtnInnerHTML = options.togglePlayBtnInnerHTML), "togglePauseBtnInnerHTML" in options && typeof options.togglePauseBtnInnerHTML == "string" && (this.togglePauseBtnInnerHTML = options.togglePauseBtnInnerHTML), this.autoplayVideoContainer = autoPlayVideoContainer, (this.autoplayVideoContainer.getAttribute("id") === "" || this.autoplayVideoContainer.getAttribute("id") === null) && this.autoplayVideoContainer.setAttribute("id", this.uuid.concat("-autoplay-video")), this.videoContainerClassList && this.autoplayVideoContainer.classList.add(...this.videoContainerClassList), this.toggleButton = document.createElement("button"), this.toggleBtnClassList && this.toggleButton.classList.add(...this.toggleBtnClassList), this.toggleButton.classList.add("dcf-btn-autoplay-video-toggle"), this.isPlaying() ? (this.toggleButton.setAttribute("aria-label", "pause autoplay video"), this.toggleButton.innerHTML = this.togglePauseBtnInnerHTML) : (this.toggleButton.setAttribute("aria-label", "play autoplay video"), this.toggleButton.innerHTML = this.togglePlayBtnInnerHTML), this.toggleButton.addEventListener("click", () => { 42 this.isPlaying() ? this.pauseAll() : this.playAll(), window.dispatchEvent(this.toggleEvent); 43 }), this.autoplayVideoContainer.append(this.toggleButton), window.addEventListener(DCFAutoplayVideoToggle.events("dcfAutoplayVideoToggle"), () => { 44 this.isPlaying() ? (this.toggleButton.setAttribute("aria-label", "pause autoplay video"), this.toggleButton.innerHTML = this.togglePauseBtnInnerHTML) : (this.toggleButton.setAttribute("aria-label", "play autoplay video"), this.toggleButton.innerHTML = this.togglePlayBtnInnerHTML); 45 }), Array.from(document.getElementsByTagName("video")).forEach((video) => { 46 this.#isAutoplayVideo(video) && this.autoplayVideos.push(video); 47 }), this.isPlaying() ? (this.playAll(), window.localStorage.setItem("dcfAutoplayVideoToggleStatus", this.#playStatus())) : this.pauseAll(), this.autoplayVideoContainer.classList.add("dcf-autoplay-video-initialized"), this.autoplayVideoContainer.removeAttribute("hidden"), this.autoplayVideoContainer.dis
47patchEvent(new CustomEvent(DCFAutoplayVideoToggle.events("autoplayVideoReady"), { 48 detail: { 49 classInstance: this 50 } 51 })); 52 } 53 // The names of the events to be used easily 54 static events(name) { 55 const events = { 56 autoplayVideoReady: "autoplayVideoReady", 57 dcfAutoplayVideoToggle: "dcfAutoplayVideoToggle" 58 }; 59 return Object.freeze(events), name in events ? events[name] : void 0; 60 } 61 #playStatus() { 62 return "play"; 63 } 64 #pausedStatus() { 65 return "paused"; 66 } 67 isPlaying() { 68 return window.localStorage.getItem("dcfAutoplayVideoToggleStatus") !== this.#pausedStatus(); 69 } 70 playAll() { 71 this.autoplayVideos.forEach((video) => { 72 video.play(); 73 }), window.localStorage.setItem("dcfAutoplayVideoToggleStatus", this.#playStatus()), window.dispatchEvent(this.toggleEvent); 74 } 75 pauseAll() { 76 this.autoplayVideos.forEach((video) => { 77 video.pause(); 78 }), window.localStorage.setItem("dcfAutoplayVideoToggleStatus", this.#pausedStatus()), window.dispatchEvent(this.toggleEvent); 79 } 80 #isAutoplayVideo(video) { 81 return video.hasAttribute("autoplay") && video.hasAttribute("muted") && video.hasAttribute("playsinline"); 82 } 83} 84class UNLAutoplayVideoToggle extends DCFAutoplayVideoToggle { 85 static { 86 __name(this, "UNLAutoplayVideoToggle"); 87 } 88 constructor(autoplayVideoContainer, options = {}) { 89 "toggleBtnClassList" in options || (options.toggleBtnClassList = [ 90 "dcf-btn-autoplay-video-toggle", 91 "dcf-btn", 92 "dcf-btn-primary", 93 "dcf-z-1", 94 "dcf-absolute", 95 "dcf-pin-bottom", 96 "dcf-pin-right", 97 "dcf-d-flex", 98 "dcf-ai-center", 99 "dcf-jc-center", 100 "dcf-mb-3", 101 "dcf-mr-3", 102 "dcf-h-7", 103 "dcf-w-7", 104 "dcf-p-0", 105 "dcf-circle" 106 ]), "togglePlayBtnInnerHTML" in options || (options.togglePlayBtnInnerHTML = `<svg class='dcf-h-4 dcf-w-4 dcf-fill-current' width='24' height='24' viewBox='0 0 24 24' focusable='false' aria-hidden='true'> 107 <path d='M21.759 11.577L2.786.077a.499.499 0 0 0-.759.428v23a.498.498 0 0 0 .5.5c.09 0 .18-.024.259-.072l18.973-11.5a.5.5 0 0 0 0-.856z'></path> 108</svg>`), "togglePauseBtnInnerHTML" in options || (options.togglePauseBtnInnerHTML = `<svg class='dcf-h-4 dcf-w-4 dcf-fill-current' width='24' height='24' viewBox='0 0 24 24' focusable='false' aria-hidden='true'> 109 <path d='M10.5 0h-5C5.224 0 5 .224 5 .5v23C5 23.776 5.224 24 5.5 24h5c.276 0 .5-.224.5-.5v-23C11 .224 10.776 0 10.5 0zM18.5 0h-5C13.224 0 13 .224 13 .5v23c0 .276.224.5.5.5h5c.276 0 .5-.224.5-.5v-23C19 .224 18.776 0 18.5 0z'></path> 110</svg>`), super(autoplayVideoContainer, options), window.UNL = window.UNL || {}, window.UNL.classes = window.UNL.classes || {}, window.UNL.classes[this.autoplayVideoContainer.getAttribute("id")] = this, this.autoplayVideoContainer.dispatchEvent(new Event("UNLClassReady")); 111 } 112} 113export { 114 UNLAutoplayVideoToggle as default 115};
116//# sourceMappingURL=component.autoplay-video.js.map
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.