spotclip
Version:
Instagram-Style Video Widget for websites
416 lines • 574 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports (outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports (outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}.spotvid-widget-container{position:fixed;z-index:999;transition:transform .2s ease;touch-action:none}.spotvid-widget{position:relative;border-radius:50%;overflow:hidden;cursor:pointer;box-shadow:0 2px 10px #0003;transition:transform .3s ease;background:#fff;z-index:99999}.spotvid-widget:hover{transform:scale(1.05)}.spotvid-widget.dragging{transform:scale(1.1);transition:transform .2s ease;cursor:grabbing!important}.spotvid-widget__thumbnail{width:100%;height:100%;position:relative}.spotvid-widget__thumbnail img{width:100%;height:100%;object-fit:cover}.spotvid-widget__play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#00000080;border-radius:50%;padding:10px;color:#fff;display:flex;align-items:center;justify-content:center}@keyframes slidePillInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slidePillInLeft{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes slidePillOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-20px)}}@keyframes slidePillOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(20px)}}.spotvid-widget__pill{position:absolute;padding:8px 16px;border-radius:20px;font-family:sans-serif;font-weight:700;font-size:14px;white-space:nowrap;z-index:1000;background:var(--theme-color, #000000);color:var(--pill-color, #ffffff);top:calc(50% - 16px);height:32px;line-height:1;opacity:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box}.spotvid-widget__pill.pill-right{left:calc(100% - 16px);padding-left:26px;animation:slidePillInRight .5s ease forwards}.spotvid-widget__pill.pill-left{right:calc(100% - 16px);padding-right:26px;animation:slidePillInLeft .5s ease forwards}.spotvid-widget__pill.pill-right.hide{animation:slidePillOutRight .5s ease forwards}.spotvid-widget__pill.pill-left.hide{animation:slidePillOutLeft .5s ease forwards}#spotvid-prev-area,#spotvid-next-area{display:block!important}.splide{height:100%;width:100%;display:flex;align-items:flex-start;justify-content:center}.splide__track{height:100%;width:100%}.splide__list{height:100%}.splide__slide{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%!important}.splide__slide video{width:100%;height:100%;object-fit:cover}@media (min-width: 768px){.splide{width:100%;height:100%}.splide__slide{height:100%!important}}[data-demo-mobile=true] .splide{width:100%;height:100%}[data-demo-mobile=true] .splide__slide{height:100%!important}[data-demo-mobile=true] .spotvid-banner-title{font-size:12px!important}[data-demo-mobile=true] .spotvid-banner-cta{font-size:12px!important;padding:10px!important;margin:10px -12px 0!important;width:calc(100% + 24px)!important;border-radius:0 0 12px 12px!important;bottom:-0px!important;height:30px!important}[data-demo-mobile=true] .spotvid-action-button{width:32px!important;height:32px!important}[data-demo-mobile=true] .spotvid-action-button svg{width:16px!important;height:16px!important}[data-demo-mobile=true] .spotvid-close,[data-demo-mobile=true] .spotvid-sound{width:32px!important;height:32px!important;font-size:24px!important}[data-demo-mobile=true] .spotvid-banner{padding:12px 12px 0!important;bottom:20px!important;left:16px!important;right:16px!important;border-radius:12px!important;margin:0!important}[data-demo-mobile=true] .spotvid-banner-product-image{width:32px!important;height:32px!important}[data-demo-mobile=true] .spotvid-banner-title-box{gap:8px!important}[data-demo-mobile=true] .spotvid-action-buttons{right:12px!important;gap:12px!important}[data-demo-mobile=true] .spotvid-watermark{font-size:10px!important;left:10px!important;top:60px!important}[data-demo-mobile=true] .spotvid-close{top:20px!important;right:12px!important}[data-demo-mobile=true] .spotvid-sound{top:20px!important;left:12px!important}.spotvid-sound{transition:background-color .3s ease}.spotvid-sound:hover{background:#000000b3}.spotvid-sound .sound-on,.spotvid-sound .sound-off{width:24px;height:24px}.spotvid-sound[data-muted=true] .sound-on,.spotvid-sound[data-muted=false] .sound-off{display:none}.spotvid-comment-form{position:absolute;bottom:0;left:0;right:0;border-top-left-radius:16px;border-top-right-radius:16px;max-height:80vh;min-height:60vh;background:#000000d9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);width:100%;z-index:9999999;display:none;flex-direction:column;gap:12px;box-shadow:0 4px 20px #0000004d}.spotvid-comment-form.active{display:flex}.spotvid-comment-form-title{color:#fff;font-size:16px;text-align:center}.spotvid-comment-form input,.spotvid-comment-form textarea{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:10px;color:#fff;font-size:16px;width:100%;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size-adjust:none}.spotvid-comment-form textarea{min-height:80px;resize:none}.spotvid-comment-form input::placeholder,.spotvid-comment-form textarea::placeholder{color:#ffffff80}.spotvid-star-rating{display:flex;justify-content:center;gap:8px}.spotvid-star{color:#ffffff4d;font-size:24px;cursor:pointer;transition:color .2s ease}.spotvid-star.active{color:gold}.spotvid-comment-form-buttons{display:flex;gap:10px;margin-top:8px}.spotvid-comment-form-buttons button{flex:1;padding:10px;border-radius:6px;border:none;font-weight:700;cursor:pointer;transition:background-color .2s ease}.spotvid-comment-submit{background:#4caf50;color:#fff}.spotvid-comment-submit:hover{background:#3e8e41}.spotvid-comment-cancel{background:#ffffff1a;color:#fff}.spotvid-comment-cancel:hover{background:#fff3}.spotvid-comment-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:9999998;display:none}.spotvid-comment-overlay.active{display:block}.spotvid-comments-display{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000d9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;width:80%;max-width:320px;max-height:70vh;z-index:9999999;display:none;flex-direction:column;gap:12px;box-shadow:0 4px 20px #0000004d;overflow:hidden}.spotvid-comments-display.active{display:flex}.spotvid-comments-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.spotvid-comments-title{color:#fff;font-size:16px;margin:0}.spotvid-comments-close{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:0;line-height:1}.spotvid-comments-list{overflow-y:auto;max-height:calc(70vh - 120px);padding-right:10px}.spotvid-comment-item{background:#ffffff1a;border-radius:8px;padding:12px;margin-bottom:10px}.spotvid-comment-header{display:flex;justify-content:space-between;margin-bottom:8px}.spotvid-comment-author{color:#fff;font-weight:700;font-size:14px}.spotvid-comment-date{color:#fff9;font-size:12px}.spotvid-comment-rating{color:gold;margin-bottom:8px}.spotvid-comment-text{color:#fff;font-size:14px;line-height:1.4}.spotvid-comments-empty{color:#ffffffb3;text-align:center;padding:20px 0;font-style:italic}.spotvid-add-comment-btn{background:#4caf50;color:#fff;border:none;padding:10px 16px;border-radius:6px;font-weight:700;cursor:pointer;transition:background-color .2s ease;margin-top:15px;width:100%}.spotvid-add-comment-btn:hover{background:#3e8e41}.spotvid-comments-list::-webkit-scrollbar{width:6px}.spotvid-comments-list::-webkit-scrollbar-track{background:#ffffff1a;border-radius:3px}.spotvid-comments-list::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.spotvid-comments-list::-webkit-scrollbar-thumb:hover{background:#ffffff80}.spotvid-success-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000d9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;width:80%;max-width:320px;z-index:9999999;display:none;flex-direction:column;align-items:center;gap:15px;box-shadow:0 4px 20px #0000004d;text-align:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.spotvid-success-message.active{display:flex;opacity:1;visibility:visible}.spotvid-success-icon{width:60px;height:60px;background:#4caf50;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:10px}.spotvid-success-title{color:#fff;font-size:18px;font-weight:700;margin:0}.spotvid-success-text{color:#fffc;font-size:14px;margin:0}.spotvid-success-button{background:#4caf50;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-weight:700;cursor:pointer;transition:background-color .2s ease;margin-top:10px}.spotvid-success-button:hover{background:#3e8e41}.spotvid-swipe-indicator{left:50%;transform:translate(-50%,-50%);z-index:999999;text-align:center;pointer-events:none;animation:swipeIndicator 2.2s ease-in-out;opacity:.7;animation-fill-mode:forwards;width:70px;height:70px}@keyframes swipeIndicator{0%{opacity:0}20%{opacity:.7}80%{opacity:.7}to{opacity:0}}.spotvid-ico{margin:0 auto;text-align:center;width:70px;height:70px;position:relative;filter:url(#goo)}.spotvid-circle{background:#fff;border-radius:50%;display:inline-block;height:70px;width:70px;position:absolute;top:50%;left:50%;transform:translate(-50%) translateY(-50%);transform-origin:0%}.spotvid-circle-top{height:23.33px;width:29.17px;animation:blob-1-anim 3s cubic-bezier(.77,0,.175,1) infinite;z-index:0;top:0}.spotvid-circle-bottom{height:23.33px;width:29.17px;animation:blob-2-anim 3s cubic-bezier(.77,0,.175,1) infinite;z-index:9;bottom:0}.spotvid-svg{z-index:9;position:relative;transform:scale(.7)}@keyframes blob-1-anim{0%{transform:translate(-50%) translateY(0)}14%{transform:translate(-50%) translateY(-8px)}24%{transform:translate(-50%) translateY(0)}to{transform:translate(-50%) translateY(0)}}@keyframes blob-2-anim{0%{transform:scale(1) translate(-50%,10px)}30%{transform:scale(1) translate(-50%,10px)}70%{transform:scale(1) translate(-50%,10px)}95%{transform:scale(1) translate(-50%,26px)}to{transform:scale(1) translate(-50%,10px)}}.spotvid-progress-bar-top{position:absolute;top:0;left:0;width:100%;height:4px;background:#fff3;z-index:999999}.spotvid-progress-bar-top-fill{height:100%;width:0;background:#fff;transition:width .2s cubic-bezier(.4,0,.2,1)}.spotvid-scrubber{position:absolute;bottom:0;left:0;width:100%;height:32px;background:linear-gradient(to top,rgba(0,0,0,.5),transparent);z-index:999999;cursor:pointer;display:flex;align-items:center;padding:0 12px;opacity:0;transition:opacity .2s ease}.spotvid-scrubber.active{opacity:1}.spotvid-scrubber-track{width:100%;height:4px;background:#fff3;position:relative;border-radius:2px}.spotvid-scrubber-fill{height:100%;width:0;background:#fff;border-radius:2px;position:relative}.spotvid-scrubber-handle{width:12px;height:12px;background:#fff;border-radius:50%;position:absolute;right:-6px;top:50%;transform:translateY(-50%);box-shadow:0 0 4px #0003}.spotvid-time-display{position:absolute;bottom:45px;left:50%;transform:translate(-50%);background:#00000080;color:#fff;padding:4px 12px;font-size:12px;opacity:0;transition:opacity .2s ease;z-index:9999999;text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:4px;pointer-events:none;white-space:nowrap;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif}.spotvid-time-display.active{opacity:1}.spotvid-action-buttons{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:20px;z-index:999999}.spotvid-action-button{background:radial-gradient(231% 135.8% at .9% 2.98%,#00000029,#00000029);border:none;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .3s ease}.spotvid-action-button:hover{background:#000000b3}.spotvid-action-button svg{width:20px;height:20px}.spotvid-banner-carousel{position:absolute;bottom:70px;left:0;right:0;margin:20px 0;z-index:2;box-sizing:border-box;overflow:visible}.spotvid-banner{padding:16px 16px 0;display:flex;flex-direction:column;background:radial-gradient(231% 135.8% at .9% 2.98%,#0000006b,#0000006b);border-radius:16px;box-sizing:border-box;overflow:hidden;width:calc(100% - 40px);margin:0 auto}.spotvid-banner-wrapper{cursor:grab}.spotvid-banner-wrapper:active{cursor:grabbing}.spotvid-banner-title-box{width:100%;display:flex;align-items:center;gap:12px}.spotvid-banner-product-image{width:40px;height:40px;border-radius:4px;object-fit:cover;flex-shrink:0}.spotvid-banner-title{font-size:12px;text-align:left;margin:0;color:#fff;flex:1}.spotvid-banner-cta{text-decoration:none;padding:12px 0;border-radius:0 0 16px 16px;border:none;font-weight:600;font-size:14px;text-align:center;transition:background-color .2s ease;width:calc(100% + 32px);box-sizing:border-box;display:flex;align-items:center;justify-content:center;margin:12px -16px 0;position:relative;height:44px;line-height:1}.spotvid-banner-cta:hover{background:#1a1a1a}@media (min-width: 700px){.spotvid-banner{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}")),document.head.appendChild(t)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
(function(e2,S2){typeof exports=="object"&&typeof module<"u"?module.exports=S2():typeof define=="function"&&define.amd?define(S2):(e2=typeof globalThis<"u"?globalThis:e2||self,e2.SpotClip=S2())})(this,function(){"use strict";class e2{constructor(t,e={}){this.container=t,this.options={currentIndex:0,onLike:()=>{},onShare:()=>{},onComment:()=>{},onClose:()=>{},onSoundToggle:()=>{},productImage:"",title:"",price:"",discountPrice:"",ctaLink:"",ctaText:"Saiba mais",pillText:"",pillBackground:"",pillTextColor:"",ctaBgColor:"",cardTextColor:"",cardBgColor:"",variants:[],comments:[],...e},this.storiesMode=e.storiesMode||!1,this.currentVariantIndex=0,this.rafId=null,this.currentVideo=null,this.controlsContainer=document.createElement("div"),this.controlsContainer.className="spotvid-controls-container",this.container.appendChild(this.controlsContainer),this.init()}hexToRgba(t,e=1){if(!t)return`rgba(0, 0, 0, ${e})`;t=t.replace("#","");let i,s,c;return t.length===3?(i=parseInt(t.charAt(0)+t.charAt(0),16),s=parseInt(t.charAt(1)+t.charAt(1),16),c=parseInt(t.charAt(2)+t.charAt(2),16)):(i=parseInt(t.substring(0,2),16),s=parseInt(t.substring(2,4),16),c=parseInt(t.substring(4,6),16)),`rgba(${i}, ${s}, ${c}, ${e})`}updateVideoReference(t){if(this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=null),this.currentVideo&&this.cleanupEventListeners(),this.currentVideo=t,this.updateBannerContent(),!this.elements){console.error("Required elements not found. This is expected for stories");return}const{topProgressBarFill:e,scrubberFill:i,timeDisplay:s,scrubberTrack:c,scrubber:u}=this.elements;let h=!1,p;const g=T=>{const P=Math.floor(T/60),F=Math.floor(T%60);return`${P}:${F.toString().padStart(2,"0")}`};t.addEventListener("timeupdate",()=>{if(t.duration){const T=t.currentTime/t.duration*100;e.style.width=`${T}%`,i.style.width=`${T}%`,s.textContent=`${g(t.currentTime)} / ${g(t.duration)}`}});const a=this.container.querySelector(".spotvid-banner"),y=()=>{u.classList.add("active"),s.style.opacity="1",a&&(a.style.opacity="0"),i.style.height="8px",c.querySelector(".spotvid-visual-track").style.height="8px",i.querySelector(".spotvid-scrubber-circle").style.opacity="1",clearTimeout(p)},_=()=>{h||(u.classList.remove("active"),s.style.opacity="0",a&&(a.style.opacity="1"),i.style.height="4px",c.querySelector(".spotvid-visual-track").style.height="4px",i.querySelector(".spotvid-scrubber-circle").style.opacity="0")},m=T=>{const P=c.getBoundingClientRect(),F=T.touches?T.touches[0].clientX:T.clientX,M=Math.max(0,Math.min(1,(F-P.left)/P.width));t.currentTime=M*t.duration;const A=M*t.duration;s.textContent=`${g(A)} / ${g(t.duration)}`},f=T=>{T.preventDefault(),h=!0,y(),m(T)},w=T=>{h&&(T.preventDefault(),m(T))},b=T=>{h&&(T.preventDefault(),h=!1,p=setTimeout(_,200))},I=T=>{T.preventDefault(),h=!0,y(),m(T)},L=T=>{h&&(T.preventDefault(),m(T))},E=T=>{h&&(T.preventDefault(),h=!1,p=setTimeout(_,200))};this.eventListeners={mousedown:{el:c,fn:f},mousemove:{el:document,fn:w},mouseup:{el:document,fn:b},touchstart:{el:c,fn:I},touchmove:{el:document,fn:L},touchend:{el:document,fn:E},mouseenter:{el:u,fn:y},mouseleave:{el:u,fn:()=>{h||(p=setTimeout(_,200))}},play:{el:t,fn:()=>{}},pause:{el:t,fn:()=>{}},ended:{el:t,fn:()=>{}}},Object.entries(this.eventListeners).forEach(([T,{el:P,fn:F}])=>{P.addEventListener(T,F)}),t.addEventListener("timeupdate",()=>{if(t.duration){const T=t.currentTime/t.duration*100;e.style.width=`${T}%`,i.style.width=`${T}%`,s.textContent=`${g(t.currentTime)} / ${g(t.duration)}`}})}init(){this.storiesMode||this.createProgressBar(),this.storiesMode&&(console.log("removing elements"),[".spotvid-progress-bar",".spotvid-progress-track",".spotvid-action-buttons",".spotvid-banner",".spotvid-close",".spotvid-sound",".spotvid-scrubber",".spotvid-time-display",".spotvid-banner-carousel"].forEach(e=>{this.container.querySelectorAll(e).forEach(s=>{s&&s.parentNode&&s.parentNode.removeChild(s)})})),this.createActionButtons(),this.createCloseButton(),this.createSoundButton()}createActionButtons(){const t=document.createElement("div");t.className="spotvid-action-buttons";const e=this.container.closest('[data-demo-mobile="true"]'),i=e?"12px":"20px",s=e?"12px":"20px";t.style.cssText=`
position: absolute;
right: ${i};
display: flex;
flex-direction: column;
gap: ${s};
z-index: 999999;
`,this.isLiked=!1;let c=Number(this.options.ctaNumberLikes)||0,u=Number(this.options.ctaNumberReviews)||0;const h=document.createElement("div");h.className="spotvid-like-container",h.style.cssText=`
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
`;const p=document.createElement("button");p.className="spotvid-action-button spotvid-like-button",p.style.cssText=`
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
padding: 4px;
color: white;
`;const g=document.createElement("div");g.className="spotvid-like-icon",g.innerHTML=`
<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5
2 5.42 4.42 3 7.5 3c1.74 0 3.41.81
4.5 2.09C13.09 3.81 14.76 3 16.5 3
19.58 3 22 5.42 22 8.5c0 3.78-3.4
6.86-8.55 11.54L12 21.35z" fill="white"/>
</svg>
`,g.style.cssText=`
display: flex;
justify-content: center;
align-items: center;
`;const a=document.createElement("span");a.textContent=c.toString(),a.style.cssText=`
font-size: 11px;
color: white;
text-align: center;
display: ${this.options.ctaShowNumberLikes?"block":"none"};
`,p.appendChild(g),h.appendChild(p),h.appendChild(a),p.addEventListener("click",A=>{var z,k,D,$;A.stopPropagation();const G=g.querySelector("path");this.isLiked=!this.isLiked,this.isLiked?(G.style.fill="#ff4545",c+=1,(k=(z=this.options).onLike)==null||k.call(z)):(G.style.fill="#ffffff",c-=1,($=(D=this.options).onUnlike)==null||$.call(D)),this.options.ctaShowNumberLikes&&(a.textContent=c.toString())});const y=document.createElement("button");y.className="spotvid-action-button spotvid-share-button",y.style.cssText+=`
display: flex;
align-items: center;
justify-content: center;
color: white;
padding: 0 !important;
`,y.innerHTML=`
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 24px; height: 24px;">
<path d="M21 12l-7-7v4C7 10 4 15 3 20c2.5-3.5 6-5.1 11-5.1V19l7-7z" fill="white"/>
</svg>
`,y.addEventListener("click",A=>{A.stopPropagation(),this.handleShare()});const _=document.createElement("button");_.className="spotvid-action-button spotvid-comment-button",_.style.cssText+=`
display: flex;
align-items: center;
justify-content: center;
color: white;
padding: 0 !important;
`,this.options.ctaShowReviews==!1&&(_.style.cssText+=`
display: none;
`),_.innerHTML=`
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 24px; height: 24px;">
<path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z" fill="white"/>
</svg>
`;const m=document.createElement("span");m.textContent=u.toString(),m.style.cssText=`
font-size: 11px;
color: white;
text-align: center;
display: ${this.options.ctaShowNumberReviews?"block":"none"};
`;const f=document.createElement("div");f.className="spotvid-comment-container",f.style.cssText=`
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
`,_.addEventListener("click",A=>{A.stopPropagation(),console.log("💬 Comment button clicked for video index:",this.options.currentIndex),console.log("📝 Available comments:",JSON.parse(JSON.stringify(this.options.comments))),this.showCommentsDisplay()});const w=document.createElement("div");console.log("📝 Creating banner carousel"),w.className="spotvid-banner-carousel",w.style.cssText=`
position: absolute;
left: 0;
right: 0;
bottom: 0px;
z-index: 999999;
overflow: visible;
padding: 0 20px;
`;const b=document.createElement("div");b.style.willChange="transform",b.className="spotvid-banner-wrapper",b.style.cssText=`
display: flex;
will-change: transform;
transition: transform 0.3s ease;
width: 100%;
gap: 10px;
`;const I={title:this.options.title||"Product Title",thumbnail:this.options.productImage||"",price:this.options.price||"",discountPrice:this.options.discountPrice||""},L=this.options.variants&&this.options.variants.length>0?[I,...this.options.variants]:[I];L.forEach((A,G)=>{const z=document.createElement("div");z.className="spotvid-banner",z.style.cssText=`
flex: 0 0 calc(100% - 40px);
display: flex;
flex-direction: column;
background: ${this.options.cardBgColor?this.hexToRgba(this.options.cardBgColor,.6):"rgba(0, 0, 0, 0.6)"};
transition: opacity 0.2s ease;
border-radius: 16px;
`;const k=document.createElement("div");k.className="spotvid-banner-title-box",k.style.cssText=`
display: flex;
align-items: center;
gap: 10px;
`;const D=document.createElement("img");D.className="spotvid-banner-product-image",D.src=A.thumbnail||"",D.alt=A.title||"Product",D.loading="lazy",D.style.cssText=`
width: 80px;
height: 80px;
border-radius: 8px;
object-fit: cover;
`;const $=document.createElement("div");$.className="spotvid-banner-title-container",$.style.cssText=`
display: flex;
flex-direction: column;
gap: 4px;
color: ${this.options.cardTextColor||"white"};
`;const X=document.createElement("div");X.className="spotvid-banner-title",X.textContent=A.title||"Product Title",X.style.cssText=`
color: ${this.options.cardTextColor||"white"};
`;const H=document.createElement("div");H.className="spotvid-banner-price-container",H.style.cssText=`
display: flex;
align-items: center;
gap: 8px;
`;const i1=document.createElement("div");i1.className="spotvid-banner-price",i1.textContent=A.price||"",i1.style.cssText=`
font-size: 14px;
color: ${this.options.cardTextColor||"white"};
font-weight: bold;
`;const e1=document.createElement("div");e1.className="spotvid-banner-discount-price",e1.textContent=A.discountPrice||"",e1.style.cssText=`
color: ${this.options.cardTextColor?this.hexToRgba(this.options.cardTextColor,.7):"rgba(255, 255, 255, 0.7)"};
text-decoration: line-through;
font-size: 0.7em;
`,A.price&&H.appendChild(i1),A.discountPrice&&H.appendChild(e1),$.appendChild(X),(A.price||A.discountPrice)&&$.appendChild(H);let j;this.storiesMode?(j=document.createElement("button"),j.addEventListener("click",W=>{W.preventDefault(),this.options.onClose(),this.options.onCTAClick()})):(j=document.createElement("a"),j.addEventListener("click",W=>{this.options.onCTAClick()}),j.href=this.options.ctaLink||"#",j.target="_blank"),j.className="spotvid-banner-cta",j.textContent=this.options.ctaText||"Saiba mais",j.style.cssText=`
background: ${this.options.ctaBgColor};
color: ${this.options.cardTextColor};
padding: 12px 0;
text-decoration: none;
font-weight: bold;
text-align: center;
margin: 0 -16px;
border-radius: 0 0 16px 16px;
margin-top: 12px;
width: calc(100% + 32px);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 44px;
line-height: 1;
`,k.appendChild(D),k.appendChild($),z.appendChild(k),z.appendChild(j),b.appendChild(z)});let E,T,P=0,F=!1;b.addEventListener("touchstart",A=>{E=A.touches[0].clientX,F=!0,b.style.transition="none"},{passive:!0}),b.addEventListener("touchmove",A=>{if(!F)return;T=A.touches[0].clientX-E;const G=w.querySelector(".spotvid-banner").offsetWidth+10,z=P+T;(z>0||z<-G*(L.length-1))&&(T=T*.2);const k=P+T;b.style.transform=`translate3d(${k}px,0,0)`,A.preventDefault()},{passive:!1}),b.addEventListener("touchend",()=>{M()},{passive:!0}),b.addEventListener("mousedown",A=>{E=A.clientX,F=!0,b.style.transition="none",b.style.cursor="grabbing"},{passive:!0}),b.addEventListener("mousemove",A=>{if(!F)return;T=A.clientX-E;const G=w.querySelector(".spotvid-banner").offsetWidth+10,z=P+T;(z>0||z<-G*(L.length-1))&&(T=T*.2);const k=P+T;b.style.transform=`translate3d(${k}px,0,0)`},{passive:!1}),document.addEventListener("mouseup",()=>{F&&(M(),b.style.cursor="grab")},{passive:!0});const M=()=>{if(!F)return;b.style.transition="transform 0.3s ease",Math.abs(T)>50&&(T>0&&this.currentVariantIndex>0?this.currentVariantIndex--:T<0&&this.currentVariantIndex<L.length-1&&this.currentVariantIndex++);const A=w.querySelector(".spotvid-banner").offsetWidth+10;P=-this.currentVariantIndex*A,b.style.transform=`translate3d(${P}px, 0, 0)`,E=null,T=0,F=!1};window.addEventListener("resize",()=>{const A=w.querySelector(".spotvid-banner").offsetWidth+10;P=-this.currentVariantIndex*A,b.style.transition="none",b.style.transform=`translateX(${P}px)`,setTimeout(()=>{b.style.transition="transform 0.3s ease"},50)}),_.appendChild(m),f.appendChild(_),f.appendChild(m),w.appendChild(b),t.appendChild(h),t.appendChild(f),t.appendChild(y),this.container.appendChild(t),this.container.appendChild(w),this.createCommentForm()}createCloseButton(){const t=document.createElement("button");t.className="spotvid-close",t.innerHTML="×";const e=this.container.closest('[data-demo-mobile="true"]'),i=e?"12px":"20px",s=e?"12px":"20px",c=e?"32px":"40px",u=e?"24px":"32px";t.style.cssText=`
position: absolute;
top: ${i};
right: ${s};
background: radial-gradient(231% 135.8% at 0.9% 2.98%, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.16) 100%);
border: none;
color: white;
font-size: ${u};
font-family: Arial !important;
cursor: pointer;
padding: 10px;
z-index: 9999999;
width: ${c};
height: ${c};
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
`,e==null&&t.addEventListener("click",h=>{h.stopPropagation(),this.options.onClose(),document.querySelector(".spotvid-sound").click()}),this.container.appendChild(t)}createSoundButton(){const t=document.createElement("button");t.className="spotvid-sound";const e=document.createElement("style");e.textContent=`
.spotvid-sound .sound-on { display: none; }
.spotvid-sound.unmuted .sound-on { display: block; }
.spotvid-sound.unmuted .sound-off { display: none; }
`,document.head.appendChild(e),t.innerHTML=`
<svg class="sound-off" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" fill="currentColor"/>
</svg>
<svg class="sound-on" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" fill="currentColor"/>
</svg>
`;const i=this.container.closest('[data-demo-mobile="true"]'),s=i?"12px":"20px",c=i?"12px":"20px",u=i?"32px":"40px",h=i?"20px":"24px";t.style.cssText=`
position: absolute;
top: ${s};
left: ${c};
background: radial-gradient(231% 135.8% at 0.9% 2.98%, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.16) 100%);
border: none;
color: white;
font-size: ${h};
cursor: pointer;
padding: 10px;
z-index: 9999999;
width: ${u};
height: ${u};
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
`,t.addEventListener("click",p=>{p.stopPropagation(),t.classList.toggle("unmuted"),this.options.onSoundToggle()}),this.container.appendChild(t)}handleShare(){const t=this.options.videoReelId!=null?this.options.videoReelId:this.options.storyVideoId,e=new URL(window.location.href);t!=null&&e.searchParams.set("video_id",t);const i=e.toString();navigator.share?navigator.share({title:this.options.title||document.title,url:i}).catch(console.error):navigator.clipboard.writeText(i).then(()=>console.log("Deep-link copied:",i)).catch(console.error),this.options.onShare()}createCommentsDisplay(){if(console.group("🆕 Creating comments display"),(!this.commentForm||!this.formContentContainer)&&(console.log("⚠️ Comment form or form content container not found, creating them first"),this.createCommentForm(),!this.commentForm||!this.formContentContainer))return;this.formContentContainer.innerHTML="";const t=document.createElement("div");t.className="spotvid-comments-header",t.style.cssText=`
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
`;const e=document.createElement("h3");e.className="spotvid-comments-title",e.textContent="Avaliações de Clientes",e.style.cssText=`
margin: 0;
color: white;
`;const i=document.createElement("button");i.className="spotvid-comments-close",i.innerHTML="×",i.style.cssText=`
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
padding: 0;
line-height: 1;
`,i.addEventListener("click",()=>{this.hideCommentForm()}),t.appendChild(e),t.appendChild(i);const s=document.createElement("div");s.className="spotvid-comments-list",s.style.cssText=`
padding: 16px;
max-height: 300px;
overflow-y: auto;
`,this.options.comments&&this.options.comments.length>0&&this.options.comments.forEach(u=>{const h=document.createElement("div");h.className="spotvid-comment-item",h.style.cssText=`
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
`;const p=document.createElement("div");p.className="spotvid-comment-header",p.style.cssText=`
display: flex;
justify-content: space-between;
margin-bottom: 8px;
`;const g=document.createElement("div");g.className="spotvid-comment-author",g.textContent=`${u.firstName} ${u.lastName}`,g.style.cssText=`
font-weight: bold;
color: white;
`;const a=document.createElement("div");a.className="spotvid-comment-date";const y=new Date(u.created_at||u.timestamp);a.textContent=y.toLocaleString("pt-BR",{day:"2-digit",month:"2-digit",year:"numeric",hour:"2-digit",minute:"2-digit"}),a.style.cssText=`
color: rgba(255, 255, 255, 0.6);
font-size: 0.8em;
`,p.appendChild(g),this.options.ctaShowDateReviews==!0&&p.appendChild(a);const _=document.createElement("div");_.className="spotvid-comment-rating",_.style.cssText=`
color: #FFD700;
margin-bottom: 8px;
`;let m="";for(let w=0;w<5;w++)m+=w<u.rating?"★":"☆";_.textContent=m;const f=document.createElement("div");f.className="spotvid-comment-text",f.textContent=u.comment,f.style.cssText=`
color: white;
`,h.appendChild(p),h.appendChild(_),h.appendChild(f),s.appendChild(h)});const c=document.createElement("button");c.className="spotvid-add-comment-btn",c.textContent="Escrever uma Avaliação",c.style.cssText=`
background: ${this.options.ctaBgColor};
color: ${this.options.cardTextColor};
padding: 16px;
border: none;
font-weight: bold;
width: calc(100% - 24px);
min-width: 150px;
margin: auto auto calc(48px + env(safe-area-inset-bottom, 0px)) auto;
cursor: pointer;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
`,c.addEventListener("click",()=>{this.showCommentFormContent()}),this.formContentContainer.appendChild(t),this.formContentContainer.appendChild(s),this.formContentContainer.appendChild(c),console.groupEnd()}showCommentsDisplay(){typeof window.splide<"u"&&(window.splide.options={drag:!1});const t=this.options.comments||[];this.controls&&(this.controls.options.comments=t),t.length===0?this.createCommentForm():this.createCommentsDisplay(),this.showCommentForm();const e=this.formContentContainer.querySelector(".spotvid-comments-list");e&&(e.addEventListener("touchstart",i=>{i.stopPropagation()},{passive:!1}),e.addEventListener("touchmove",i=>{i.stopPropagation()},{passive:!1}))}hideCommentsDisplay(){this.hideCommentForm(),typeof window.splide<"u"&&(window.splide.options={drag:!0})}updateCommentsDisplay(){this.createCommentsDisplay()}createCommentForm(){const t=document.createElement("div");t.className="spotvid-comment-overlay",t.addEventListener("click",m=>{m.stopPropagation(),this.hideCommentForm()});const e=document.createElement("div");e.className="spotvid-comment-form",e.style.cssText=`
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: hidden;
transform: translateY(100%);
transition: transform 0.3s ease;
display: flex;
`,e.addEventListener("click",m=>{m.stopPropagation()});const i=document.createElement("div");i.className="spotvid-comment-form-header",i.style.cssText=`
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
`;const s=document.createElement("div");s.className="spotvid-comment-form-title",s.textContent="Deixe um Comentário",s.style.cssText=`
color: white;
`;const c=document.createElement("button");c.className="spotvid-comment-form-close",c.innerHTML="×",c.style.cssText=`
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
padding: 0;
line-height: 1;
`,c.addEventListener("click",()=>{this.hideCommentForm()}),i.appendChild(s),i.appendChild(c);const u=document.createElement("div");u.className="spotvid-comment-form-content-container",u.style.cssText=`
width: 100%;
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
`,this.formContentContainer=u;const h=document.createElement("div");h.className="spotvid-comment-form-content",h.style.cssText=`
display: flex;
flex-direction: column;
padding: 0 16px 0px 16px;
`;const p=document.createElement("input");p.type="text",p.placeholder="Nome",p.className="spotvid-first-name",p.style.cssText=`
width: 100%;
padding: 12px;
margin-bottom: 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
color: white;
box-sizing: border-box;
font-size: 16px;
-webkit-appearance: none;
appearance: none;
`,p.addEventListener("focus",m=>{m.preventDefault(),m.stopPropagation()});const g=document.createElement("input");g.type="text",g.placeholder="Sobrenome",g.className="spotvid-last-name",g.style.cssText=`
width: 100%;
padding: 12px;
margin-bottom: 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
color: white;
box-sizing: border-box;
font-size: 16px;
-webkit-appearance: none;
appearance: none;
`,g.addEventListener("focus",m=>{m.preventDefault(),m.stopPropagation()});const a=document.createElement("div");a.className="spotvid-star-rating",a.style.cssText=`
display: flex;
justify-content: center;
margin-bottom: 12px;
gap: 8px;
`,this.currentRating=0;for(let m=1;m<=5;m++){const f=document.createElement("span");f.className="spotvid-star",f.textContent="★",f.dataset.value=m,f.style.cssText=`
font-size: 32px;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: color 0.2s ease;
`,f.addEventListener("mouseover",()=>{a.querySelectorAll(".spotvid-star").forEach(b=>{parseInt(b.dataset.value)<=m?b.style.color="#FFD700":b.style.color="rgba(255, 255, 255, 0.5)"})}),f.addEventListener("mouseout",()=>{a.querySelectorAll(".spotvid-star").forEach(b=>{parseInt(b.dataset.value)<=this.currentRating?b.style.color="#FFD700":b.style.color="rgba(255, 255, 255, 0.5)"})}),f.addEventListener("click",()=>{this.currentRating=m,a.querySelectorAll(".spotvid-star").forEach(b=>{parseInt(b.dataset.value)<=this.currentRating?b.style.color="#FFD700":b.style.color="rgba(255, 255, 255, 0.5)"})}),a.appendChild(f)}const y=document.createElement("textarea");y.placeholder="Seu comentário...",y.className="spotvid-comment-text",y.style.cssText=`
width: 100%;
padding: 12px;
margin-bottom: 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
color: white;
min-height: 150px;
resize: none;
box-sizing: border-box;
font-size: 16px;
-webkit-appearance: none;
appearance: none;
`,y.addEventListener("focus",m=>{m.preventDefault(),m.stopPropagation()});const _=document.createElement("button");_.className="spotvid-comment-submit",_.textContent="Enviar",_.style.cssText=`
background: ${this.options.ctaBgColor};
color: ${this.options.cardTextColor};
padding: 16px;
border: none;
font-weight: bold;
width: calc(100% - 24px);
min-width: 150px;
margin: auto auto calc(48px + env(safe-area-inset-bottom, 0px)) auto;
cursor: pointer;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
`,_.addEventListener("click",()=>{const m={firstName:p.value.trim(),lastName:g.value.trim(),rating:this.currentRating,comment:y.value.trim(),timestamp:new Date().toISOString(),videoTitle:this.options.title||"",productId:this.options.productId||""};if(!m.firstName){alert("Por favor, digite seu nome");return}if(!m.lastName){alert("Por favor, digite seu sobrenome");return}if(m.rating===0){alert("Por favor, selecione uma avaliação");return}if(!m.comment){alert("Por favor, digite um comentário");return}console.log("Comment submitted:",m),typeof this.options.onComment=="function"&&this.options.onComment(m),p.value="",g.value="",y.value="",this.currentRating=0,a.querySelectorAll(".spotvid-star").forEach(L=>L.style.color="rgba(255, 255, 255, 0.5)");let w=Number(this.options.ctaNumberReviews)||0;w+=1;const I=document.querySelector(".spotvid-comment-container").querySelector("span");I.textContent=w,this.showSuccessMessageInForm()}),h.appendChild(p),h.appendChild(g),h.appendChild(a),h.appendChild(y),u.appendChild(i),u.appendChild(h),u.appendChild(_),e.appendChild(u),this.container.appendChild(t),this.container.appendChild(e),this.commentForm=e,this.commentOverlay=t}showCommentForm(){this.commentForm&&this.commentOverlay&&(this.commentOverlay.classList.add("active"),typeof window.splide<"u"&&(window.splide.options={drag:!1}),setTimeout(()=>{this.commentForm.style.transform="translateY(0)"},10))}hideCommentForm(){this.commentForm&&this.commentOverlay&&(this.commentForm.style.transform="translateY(100%)",typeof window.splide<"u"&&(window.splide.options={drag:!0}),this.commentOverlay.classList.remove("active"))}createProgressBar(){const t=document.createElement("div");t.className="spotvid-progress-bar",t.style.cssText=`
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 34px;
background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
z-index: 999999;
display: flex;
align-items: flex-end;
padding: 0;
`;const e=document.createElement("div");e.className="spotvid-progress-track",e.style.cssText=`
width: 100%;
height: 34px;
background: transparent;
position: relative;
cursor: pointer;
display: flex;
align-items: flex-end;
padding: 0 20px;
`;const i=document.createElement("div");i.className="spotvid-progress-fill",i.style.cssText=`
position: absolute;
left: 0;
bottom: 0;
height: 4px;
background: white;
border-radius: 0;
width: 0%;
transition: height 0.2s ease;
`;const s=document.createElement("div");s.className="spotvid-scrubber-circle",s.style.cssText=`
position: absolute;
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
right: -6px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.2s ease;
`,i.appendChild(s);const c=document.createElement("div");c.className="spotvid-time-display",c.style.cssText=`
position: absolute;
bottom: 45px;
left: 50%;
transform: translateX(-50%);
opacity: 0;
`;const u=document.createElement("div");u.className="spotvid-visual-track",u.style.cssText=`
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background: rgba(255,255,255,0.3);
border-radius: 0;
transition: height 0.2s ease;
`,e.appendChild(u),e.appendChild(i),t.appendChild(e),t.appendChild(c),this.container.appendChild(t),this.elements={topProgressBarFill:i,scrubberFill:i,scrubberTrack:e,timeDisplay:c,scrubber:t}}updateBannerContent(){const t={title:this.options.title||"Product Title",thumbnail:this.options.productImage||"",price:this.options.price||"",discountPrice:this.options.discountPrice||""},e=this.options.variants&&this.options.variants.length>0?[t,...this.options.variants]:[t],i=this.container.querySelector(".spotvid-banner-wrapper");if(!i)return;i.innerHTML="",e.forEach((h,p)=>{const g=document.createElement("div");g.className="spotvid-banner",g.style.cssText=`
flex: 0 0 100%;
display: flex;
flex-direction: column;
background: ${this.options.cardBgColor?this.hexToRgba(this.options.cardBgColor,.6):"rgba(0, 0, 0, 0.6)"};
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: opacity 0.2s ease;
`;const a=document.createElement("div");a.className="spotvid-banner-title-box",a.style.cssText=`
display: flex;
align-items: center;
gap: 10px;
`;const y=document.createElement("img");y.className="spotvid-banner-product-image",y.src=h.thumbnail||"",y.alt=h.title||"Product",y.loading="lazy",y.style.cssText=`
width: 80px;
height: 80px;
border-radius: 8px;
object-fit: cover;
`;const _=document.createElement("div");_.className="spotvid-banner-title-container",_.style.cssText=`
display: flex;
flex-direction: column;
gap: 4px;
color: ${this.options.cardTextColor||"white"};
`;const m=document.createElement("div");m.className="spotvid-banner-title",m.textContent=h.title||"Product Title",m.style.cssText=`
color: ${this.options.cardTextColor||"white"};
`;const f=document.createElement("div");f.className="spotvid-banner-price-container",f.style.cssText=`
display: flex;
align-item