spotclip
Version:
Instagram-Style Video Widget for websites
782 lines • 736 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)}})();
class s3 {
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();
}
// Helper function to convert hex color to rgba
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, 0.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, 0.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 * 0.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 * 0.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: (/* @__PURE__ */ 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