quad-tap
Version:
A pure JavaScript implementation of the Quad-Tap overlay interaction for videos with advanced video player API integration
1 lines • 104 kB
JavaScript
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("QuadTap",[],e):"object"==typeof exports?exports.QuadTap=e():t.QuadTap=e()}(this,(()=>(()=>{var t={642:(t,e,n)=>{var i,o,a,r;function s(t){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},s(t)}t=n.nmd(t),r=function(){return function(){var t={d:function(e,n){for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:function(t,e){return Object.prototype.hasOwnProperty.call(t,e)}};function e(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=document.createElement(t);if(e.className&&(n.className=e.className),e.id&&(n.id=e.id),e.text&&(n.textContent=e.text),e.html&&(n.innerHTML=e.html),e.attributes)for(var i in e.attributes)n.setAttribute(i,e.attributes[i]);if(e.styles)for(var o in e.styles)n.style[o]=e.styles[o];if(e.events)for(var a in e.events)n.addEventListener(a,e.events[a]);return e.children&&e.children.forEach((function(t){n.appendChild(t)})),n}function n(t,e,n){if(arguments.length>3&&void 0!==arguments[3]&&arguments[3]){var i=t.parentElement;if(i){var o=i.getBoundingClientRect();e=o.width*e,n=o.height*n}}t.style.left=e+"px",t.style.top=n+"px",t.style.transform="translate(-50%, -50%)"}function i(t){return i="function"==typeof Symbol&&"symbol"==s(Symbol.iterator)?function(t){return s(t)}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":s(t)},i(t)}t.d({},{default:function(){return D}});var o="quadTap_";function a(t,e){try{var n=o+t;return"object"===i(e)?localStorage.setItem(n,JSON.stringify(e)):localStorage.setItem(n,e),!0}catch(t){return console.error("[QuadTap] Error saving to localStorage:",t),!1}}function r(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;try{var n=o+t,i=localStorage.getItem(n);if(null===i)return e;try{return JSON.parse(i)}catch(t){return i}}catch(t){return console.error("[QuadTap] Error retrieving from localStorage:",t),e}}function l(t){return l="function"==typeof Symbol&&"symbol"==s(Symbol.iterator)?function(t){return s(t)}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":s(t)},l(t)}function d(){d=function(){return e};var t,e={},n=Object.prototype,i=n.hasOwnProperty,o="function"==typeof Symbol?Symbol:{},a=o.iterator||"@@iterator",r=o.asyncIterator||"@@asyncIterator",s=o.toStringTag||"@@toStringTag";function c(t,e,n,i){return Object.defineProperty(t,e,{value:n,enumerable:!i,configurable:!i,writable:!i})}try{c({},"")}catch(t){c=function(t,e,n){return t[e]=n}}function u(e,n,i,o){var a=n&&n.prototype instanceof g?n:g,r=Object.create(a.prototype);return c(r,"_invoke",function(e,n,i){var o=1;return function(a,r){if(3===o)throw Error("Generator is already running");if(4===o){if("throw"===a)throw r;return{value:t,done:!0}}for(i.method=a,i.arg=r;;){var s=i.delegate;if(s){var l=S(s);if(l){if(l===p)continue;return l}}if("next"===i.method)i.sent=i._sent=i.arg;else if("throw"===i.method){if(1===o)throw o=4,i.arg;i.dispatchException(i.arg)}else"return"===i.method&&i.abrupt("return",i.arg);o=3;var d=h(e,n,i);if("normal"===d.type){if(o=i.done?4:2,d.arg===p)continue;return{value:d.arg,done:i.done}}"throw"===d.type&&(o=4,i.method="throw",i.arg=d.arg)}}}(e,i,new T(o||[])),!0),r}function h(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}e.wrap=u;var p={};function g(){}function m(){}function f(){}var y={};c(y,a,(function(){return this}));var v=Object.getPrototypeOf,b=v&&v(v(B([])));b&&b!==n&&i.call(b,a)&&(y=b);var w=f.prototype=g.prototype=Object.create(y);function x(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function C(t,e,n){var i=document.createElement("button");w(i,y);var o=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent),a=window.innerWidth<768;return(o||a)&&(i.style.width="26px",i.style.height="26px",i.style.margin="0 2px",i.style.fontSize="13px"),i.style.display="flex",i.style.alignItems="center",i.style.justifyContent="center",i.style.lineHeight="1",i.style.padding="0",i.style.verticalAlign="middle",i.textContent=t,i.setAttribute("aria-label",e),i.addEventListener("mouseenter",(function(){w(i,v)})),i.addEventListener("mouseleave",(function(){i.style.backgroundColor=""})),i.addEventListener("click",(function(t){t.preventDefault(),n(t)})),i.addEventListener("touchstart",(function(t){t.preventDefault(),w(i,v)})),i.addEventListener("touchend",(function(t){t.preventDefault(),i.style.backgroundColor="",n(t)})),i.addEventListener("touchcancel",(function(t){i.style.backgroundColor=""})),i}function S(t){var i=n.method,o=e.i[i];if(o===t)return n.delegate=null,"throw"===i&&e.i.return&&(n.method="return",n.arg=t,S(e),"throw"===n.method)||"return"!==i&&(n.method="throw",n.arg=new TypeError("The iterator does not provide a '"+i+"' method")),p;var a=h(o,e.i,n.arg);if("throw"===a.type)return n.method="throw",n.arg=a.arg,n.delegate=null,p;var r=a.arg;return r?r.done?(n[e.r]=r.value,n.next=e.n,"return"!==n.method&&(n.method="next",n.arg=t),n.delegate=null,p):r:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,p)}function j(t){this.tryEntries.push(t)}function k(e){var n=e[4]||{};n.type="normal",n.arg=t,e[4]=n}function T(t){this.tryEntries=[[-1]],t.forEach(j,this),this.reset(!0)}function B(e){if(null!=e){var n=e[a];if(n)return n.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,r=function n(){for(;++o<e.length;)if(i.call(e,o))return n.value=e[o],n.done=!1,n;return n.value=t,n.done=!0,n};return r.next=r}}throw new TypeError(l(e)+" is not iterable")}return m.prototype=f,c(w,"constructor",f),c(f,"constructor",m),m.displayName=c(f,s,"GeneratorFunction"),e.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===m||"GeneratorFunction"===(e.displayName||e.name))},e.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,f):(t.__proto__=f,c(t,s,"GeneratorFunction")),t.prototype=Object.create(w),t},e.awrap=function(t){return{__await:t}},x(C.prototype),c(C.prototype,r,(function(){return this})),e.AsyncIterator=C,e.async=function(t,n,i,o,a){void 0===a&&(a=Promise);var r=new C(u(t,n,i,o),a);return e.isGeneratorFunction(n)?r:r.next().then((function(t){return t.done?t.value:r.next()}))},x(w),c(w,s,"Generator"),c(w,a,(function(){return this})),c(w,"toString",(function(){return"[object Generator]"})),e.keys=function(t){var e=Object(t),n=[];for(var i in e)n.unshift(i);return function t(){for(;n.length;)if((i=n.pop())in e)return t.value=i,t.done=!1,t;return t.done=!0,t}},e.values=B,T.prototype={constructor:T,reset:function(e){if(this.prev=this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(k),!e)for(var n in this)"t"===n.charAt(0)&&i.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=t)},stop:function(){this.done=!0;var t=this.tryEntries[0][4];if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var n=this;function i(t){r.type="throw",r.arg=e,n.next=t}for(var o=n.tryEntries.length-1;o>=0;--o){var a=this.tryEntries[o],r=a[4],s=this.prev,l=a[1],d=a[2];if(-1===a[0])return i("end"),!1;if(!l&&!d)throw Error("try statement without catch or finally");if(null!=a[0]&&a[0]<=s){if(s<l)return this.method="next",this.arg=t,i(l),!0;if(s<d)return i(d),!1}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var i=this.tryEntries[n];if(i[0]>-1&&i[0]<=this.prev&&this.prev<i[2]){var o=i;break}}o&&("break"===t||"continue"===t)&&o[0]<=e&&e<=o[2]&&(o=null);var a=o?o[4]:{};return a.type=t,a.arg=e,o?(this.method="next",this.next=o[2],p):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),p},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n[2]===t)return this.complete(n[4],n[3]),k(n),p}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n[0]===t){var i=n[4];if("throw"===i.type){var o=i.arg;k(n)}return o}}throw Error("illegal catch attempt")},delegateYield:function(e,n,i){return this.delegate={i:B(e),r:n,n:i},"next"===this.method&&(this.arg=t),p}},e}function c(t,e,n,i,o,a,r){try{var s=t[a](r),l=s.value}catch(t){return void n(t)}s.done?e(l):Promise.resolve(l).then(i,o)}function u(t){return function(){var e=this,n=arguments;return new Promise((function(i,o){var a=t.apply(e,n);function r(t){c(a,i,o,r,s,"next",t)}function s(t){c(a,i,o,r,s,"throw",t)}r(void 0)}))}}function h(){return(h=u(d().mark((function t(e){var n,i,o;return d().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(i=e.elements.video,!(o=(null===(n=e.config.videoPlayerApi)||void 0===n?void 0:n.enabled)&&e.config.videoPlayerApi.adapter)){t.next=7;break}return t.next=5,o.play();case 5:t.next=16;break;case 7:if(!i){t.next=16;break}return t.prev=8,t.next=11,i.play();case 11:t.next=16;break;case 13:t.prev=13,t.t0=t.catch(8),console.error("Error resuming video playback:",t.t0);case 16:case"end":return t.stop()}}),t,null,[[8,13]])})))).apply(this,arguments)}function p(){return(p=u(d().mark((function t(e){var n,i,o;return d().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(i=e.elements.video,!(o=(null===(n=e.config.videoPlayerApi)||void 0===n?void 0:n.enabled)&&e.config.videoPlayerApi.adapter)){t.next=11;break}return t.next=5,o.pause();case 5:t.next=12;break;case 11:i&&i.pause();case 12:case"end":return t.stop()}}),t)})))).apply(this,arguments)}var g={width:"60%",maxWidth:"350px",height:"auto",padding:"6px 10px",borderRadius:"24px",backgroundColor:"rgba(0, 0, 0, 0.7)",display:"flex",justifyContent:"space-around",alignItems:"center",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.3)",transition:"opacity 0.3s ease, width 0.3s ease, padding 0.3s ease"},m={position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},f={position:"static",top:"",left:"",transform:"",margin:"20px auto"},y={width:"30px",height:"30px",margin:"0 3px",borderRadius:"50%",border:"none",backgroundColor:"rgba(255, 255, 255, 0.2)",color:"white",fontSize:"14px",cursor:"pointer",outline:"none",display:"flex",justifyContent:"center",alignItems:"center",transition:"background-color 0.2s ease"},v={backgroundColor:"rgba(255, 255, 255, 0.2)"},b={position:"absolute",backgroundColor:"rgba(0, 0, 0, 0.8)",color:"white",padding:"5px 10px",borderRadius:"4px",fontSize:"14px",zIndex:"2000",pointerEvents:"none",opacity:"0",transition:"opacity 0.3s ease"};function w(t,e){Object.assign(t.style,e)}function x(t){var e=t.overlay,n=t.onPlay,i=t.onPause,o=t.onRewind,a=t.onForward,r=t.onShare,s=t.onCopyUrl,l=t.rewindTime,d=void 0===l?30:l,c=t.forwardTime,u=void 0===c?30:c,h=t.debug,p=void 0!==h&&h,y=t.showAllButtons,v=void 0!==y&&y,b=t.isLightbox,x=void 0!==b&&b,S=document.createElement("div");w(S,g),w(S,x?f:m);var T=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent),B=window.innerWidth<768;if((T||B)&&(S.style.width="65%",S.style.maxWidth="280px",S.style.padding="5px 8px"),!x){var E=parseInt(getComputedStyle(e).zIndex)||1e3;S.style.zIndex=(E+10).toString()}var q=C("⟲"+d,"Rewind "+d+" seconds",o),P=C("▶","Play/Pause",(function(t){var e="▶"===P.textContent;P.textContent=e?"❚❚":"▶",e?n(t):i(t)})),L=C("⟳"+u,"Forward "+u+" seconds",a),I=C("⤴","Share",(function(t){if(t.stopPropagation(),r)r(t);else{var e=window.location.href;navigator.share?navigator.share({title:"Check out this video moment",url:e}).catch((function(t){console.error("Error sharing:",t)})):(j(e),k(I,"Link copied!"))}})),O=C("⧉","Copy URL",(function(t){t.stopPropagation(),s?s(t):(j(window.location.href),k(O,"Link copied!"))}));if(S.appendChild(q),S.appendChild(P),S.appendChild(L),(v||x)&&(S.appendChild(I),S.appendChild(O)),S.addEventListener("click",(function(t){t.stopPropagation(),p&&console.log("[QuadTap] Control strip clicked, propagation stopped")})),S.addEventListener("touchstart",(function(t){t.stopPropagation(),S.style.opacity="1",p&&console.log("[QuadTap] Control strip touch started, propagation stopped")})),S.addEventListener("touchend",(function(t){t.stopPropagation(),p&&console.log("[QuadTap] Control strip touch ended, propagation stopped")})),S.addEventListener("touchmove",(function(t){t.stopPropagation()})),e.appendChild(S),!x){var z,A=function(){S.style.opacity="0.5"};S.addEventListener("mouseenter",(function(){clearTimeout(z),S.style.opacity="1"})),S.addEventListener("mouseleave",(function(){clearTimeout(z),z=setTimeout(A,2e3)})),S.style.opacity="1",z=setTimeout(A,2e3)}return p&&(console.log("[QuadTap] Control strip created with positioning:",{isLightbox:x,className:S.className,zIndex:S.style.zIndex}),x||new ResizeObserver((function(){var t=S.getBoundingClientRect(),n=e.getBoundingClientRect(),i=(t.top-n.top+t.height/2)/n.height*100,o=(t.left-n.left+t.width/2)/n.width*100;console.log("[QuadTap] Control strip position after resize:",{topPercent:i.toFixed(2)+"%",leftPercent:o.toFixed(2)+"%",width:t.width,height:t.height})})).observe(e)),S}function C(t,e,n){var i=document.createElement("button");w(i,y);var o=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent),a=window.innerWidth<768;return(o||a)&&(i.style.width="26px",i.style.height="26px",i.style.margin="0 2px",i.style.fontSize="13px"),i.style.display="flex",i.style.alignItems="center",i.style.justifyContent="center",i.style.lineHeight="1",i.style.padding="0",i.style.verticalAlign="middle",i.textContent=t,i.setAttribute("aria-label",e),i.addEventListener("mouseenter",(function(){w(i,v)})),i.addEventListener("mouseleave",(function(){i.style.backgroundColor=""})),i.addEventListener("click",(function(t){t.preventDefault(),n(t)})),i.addEventListener("touchstart",(function(t){t.preventDefault(),w(i,v)})),i.addEventListener("touchend",(function(t){t.preventDefault(),i.style.backgroundColor="",n(t)})),i.addEventListener("touchcancel",(function(t){i.style.backgroundColor=""})),i}function S(t,e){var n=t.querySelector("button:nth-child(2)");n&&(n.textContent=e?"❚❚":"▶")}function j(t){if(navigator.clipboard&&navigator.clipboard.writeText)navigator.clipboard.writeText(t).catch((function(t){console.error("Failed to copy text: ",t)}));else{var e=document.createElement("textarea");e.value=t,e.style.position="fixed",document.body.appendChild(e),e.select();try{document.execCommand("copy")}catch(t){console.error("Failed to copy text: ",t)}document.body.removeChild(e)}}function k(t,e){var n=document.createElement("div");w(n,b),n.textContent=e;var i=t.getBoundingClientRect();n.style.top="".concat(i.top-30,"px"),n.style.left="".concat(i.left+i.width/2,"px"),n.style.transform="translateX(-50%)",document.body.appendChild(n),setTimeout((function(){n.style.opacity="1"}),10),setTimeout((function(){n.style.opacity="0",setTimeout((function(){document.body.removeChild(n)}),300)}),1500)}function T(t){return T="function"==typeof Symbol&&"symbol"==s(Symbol.iterator)?function(t){return s(t)}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":s(t)},T(t)}function B(t){var e=function(t){if("object"!=T(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=T(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==T(e)?e:e+""}var E={containerId:"main-video-droppable",videoSelector:"#main-video",autoCancelTimeout:5e3,debug:!0,emojis:{quadrants:{topLeft:"🕊️",topRight:"🌟",bottomLeft:"🌧️",bottomRight:"💥"},directional:{up:"🚀",right:"👑",down:"⬇️",left:"🤫"},thoughts:{topLeft:["🌸","🎈","🌦️","🛤️"],topRight:["🌈","✨","🌤️","🎆"],bottomLeft:["🍂","🌙","☔","🗿"],bottomRight:["⚖️","🏆","⛈️","💣"]}},videoControls:{enabled:!0,rewindTime:30,forwardTime:30},callbacks:{onOverlayActivate:null,onThrowDownInitiate:null,onThrowDownConfirm:null,onThrowDownCancel:null,onVideoControl:null}},q=function(){return t=function t(){var e,n,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.config=Object.assign({},E,i),i.emojis&&(this.config.emojis=Object.assign({},E.emojis,i.emojis),i.emojis.quadrants&&(this.config.emojis.quadrants=Object.assign({},E.emojis.quadrants,i.emojis.quadrants)),i.emojis.directional&&(this.config.emojis.directional=Object.assign({},E.emojis.directional,i.emojis.directional)),i.emojis.thoughts&&(this.config.emojis.thoughts=Object.assign({},E.emojis.thoughts,i.emojis.thoughts))),i.videoControls&&(this.config.videoControls=Object.assign({},E.videoControls,i.videoControls)),i.profileBubble?this.config.profileBubble=Object.assign({},{imageUrl:null,fallbackEmoji:"👤",size:"60px",borderColor:"white",borderWidth:"2px",backgroundColor:"rgba(0, 0, 0, 0.7)"},i.profileBubble):this.config.profileBubble={imageUrl:null,fallbackEmoji:"👤",size:"60px",borderColor:"white",borderWidth:"2px",backgroundColor:"rgba(0, 0, 0, 0.7)"},i.colors?(this.config.colors={overlay:{background:"rgba(240, 240, 245, 0.5)",quadrantGradients:{topLeft:"rgba(0, 255, 255, 0.8)",topRight:"rgba(255, 255, 0, 0.8)",bottomLeft:"rgba(0, 255, 0, 0.8)",bottomRight:"rgba(255, 0, 255, 0.8)"}},lightbox:{background:"rgba(20, 30, 40, 0.95)",text:"white",headerBackground:"rgba(30, 40, 60, 0.8)",buttonPrimary:"#4CAF50",buttonSecondary:"#f44336"}},i.colors.overlay&&(this.config.colors.overlay=Object.assign({},this.config.colors.overlay,i.colors.overlay),i.colors.overlay.quadrantGradients&&(this.config.colors.overlay.quadrantGradients=Object.assign({},this.config.colors.overlay.quadrantGradients,i.colors.overlay.quadrantGradients))),i.colors.lightbox&&(this.config.colors.lightbox=Object.assign({},this.config.colors.lightbox,i.colors.lightbox))):this.config.colors={overlay:{background:"rgba(240, 240, 245, 0.5)",quadrantGradients:{topLeft:"rgba(0, 255, 255, 0.8)",topRight:"rgba(255, 255, 0, 0.8)",bottomLeft:"rgba(0, 255, 0, 0.8)",bottomRight:"rgba(255, 0, 255, 0.8)"}},lightbox:{background:"rgba(20, 30, 40, 0.95)",text:"white",headerBackground:"rgba(30, 40, 60, 0.8)",buttonPrimary:"#4CAF50",buttonSecondary:"#f44336"}},this.state={active:!1,profileBubblePosition:{x:0,y:0},currentQuadrant:null,autoCancelTimer:null,containerDimensions:{width:0,height:0},videoPlaying:!1,wasPlayingBefore:!1,recording:!1,mediaStream:null,mediaRecorder:null,recordingStartTime:0,recordingIndicator:null,swipeDebounceTimer:null,swipeProcessing:!1},this.elements={container:null,video:null,overlay:null,profileBubble:null,directionalEmojis:{},quadrantEmojis:{},videoControls:null,tooltip:null,lightBox:null,lightBoxContent:null,emojiGrid:null,commentBox:null},this.throttledResize=(e=this.handleResize.bind(this),function(){n||(e.apply(void 0,arguments),n=!0,setTimeout((function(){n=!1}),100))}),this.init()},i=[{key:"log",value:function(t,e){this.config.debug&&console.log("[QuadTap] ".concat(t),e||"")}},{key:"init",value:function(){this.log("Initializing QuadTap");var t=document.getElementById(this.config.containerId);t?(this.elements.container=t,function(){if(!document.getElementById("quad-tap-styles")){var t=document.createElement("style");t.id="quad-tap-styles",t.textContent="\n /* Overlay Container */\n .overlay-container {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n z-index: 1000;\n background-color: rgba(240, 240, 245, 0.5);\n }\n \n .overlay-container.active {\n opacity: 1;\n pointer-events: auto;\n }\n \n /* Block pointer events on video when overlay is active */\n .overlay-container.active + video,\n .quad-tap-overlay.active + video {\n pointer-events: none;\n }\n \n /* Quadrants */\n .quadrant {\n position: absolute;\n width: 50%;\n height: 50%;\n opacity: 0.8;\n transition: opacity 0.3s ease;\n }\n \n .quadrant.top-left {\n top: 0;\n left: 0;\n background: linear-gradient(135deg, rgba(0, 255, 255, 0.8), rgba(0, 255, 255, 0));\n }\n \n .quadrant.top-right {\n top: 0;\n right: 0;\n background: linear-gradient(225deg, rgba(255, 255, 0, 0.8), rgba(255, 255, 0, 0));\n }\n \n .quadrant.bottom-left {\n bottom: 0;\n left: 0;\n background: linear-gradient(45deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0));\n }\n \n .quadrant.bottom-right {\n bottom: 0;\n right: 0;\n background: linear-gradient(315deg, rgba(255, 0, 255, 0.8), rgba(255, 0, 255, 0));\n }\n \n /* Profile Bubble */\n .profile-bubble {\n position: absolute;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n background-color: rgba(128, 128, 128, 0.8);\n border: 2px solid white;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n z-index: 1001;\n transform: translate(-50%, -50%);\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n }\n \n .profile-bubble:hover {\n transform: translate(-50%, -50%) scale(1.1);\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);\n }\n \n /* Light-Box Modal */\n .td-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(23, 32, 42, 0.7);\n z-index: 2000;\n justify-content: center;\n align-items: center;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n \n .td-modal.active {\n display: flex;\n opacity: 1;\n }\n \n .td-modal-content {\n background-color: white;\n padding: 20px;\n border-radius: 10px;\n width: 95%;\n max-width: 800px;\n max-height: 80vh;\n overflow-y: auto;\n position: relative;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);\n }\n \n .td-modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 10px;\n border-bottom: 1px solid #eee;\n }\n \n .td-modal-header h4 {\n margin: 0;\n font-size: 1.5rem;\n color: #333;\n }\n \n .td-close-btn, .td-pause-play-btn {\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n color: #999;\n transition: color 0.2s ease;\n }\n \n .td-close-btn {\n margin-left: 10px;\n }\n \n .td-pause-play-btn {\n margin-left: auto;\n }\n \n .td-close-btn:hover, .td-pause-play-btn:hover {\n color: #333;\n }\n \n /* Emoji Grid */\n .emoji-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n gap: 10px;\n width: 100%;\n }\n \n .emoji-quadrant {\n padding: 10px;\n border-radius: 8px;\n }\n \n .emoji-quadrant.top-left {\n background-color: rgba(0, 255, 255, 0.2);\n }\n \n .emoji-quadrant.top-right {\n background-color: rgba(255, 255, 0, 0.2);\n }\n \n .emoji-quadrant.bottom-left {\n background-color: rgba(0, 255, 0, 0.2);\n }\n \n .emoji-quadrant.bottom-right {\n background-color: rgba(255, 0, 255, 0.2);\n }\n \n .emoji-row {\n display: flex;\n justify-content: space-around;\n margin-bottom: 10px;\n background-color: transparent;\n }\n \n .emoji-cell {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: transparent;\n }\n \n .thought-emoji {\n font-size: 2rem;\n cursor: pointer;\n padding: 5px;\n border-radius: 5px;\n transition: transform 0.2s ease, background-color 0.2s ease;\n }\n \n .thought-emoji:hover {\n transform: scale(1.2);\n background-color: rgba(255, 255, 255, 0.5);\n }\n \n .thought-emoji.selected {\n background-color: rgba(255, 255, 255, 0.8);\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n }\n \n /* Tooltip */\n .tooltip {\n position: absolute;\n background-color: rgba(0, 0, 0, 0.7);\n color: white;\n padding: 5px 10px;\n border-radius: 5px;\n font-size: 0.8rem;\n pointer-events: none;\n z-index: 1002;\n transition: opacity 0.3s ease;\n }\n \n /* Comment Box */\n .comment-box {\n margin-top: 20px;\n width: 100%;\n }\n \n .comment-box textarea {\n width: 100%;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 5px;\n resize: vertical;\n min-height: 80px;\n font-family: inherit;\n }\n \n /* Media Buttons */\n .media-buttons {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 10px;\n margin-bottom: 10px;\n }\n \n .media-button {\n padding: 8px 12px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-weight: bold;\n transition: background-color 0.2s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .upload-button {\n background-color: #3498db;\n color: white;\n }\n \n .upload-button:hover {\n background-color: #2980b9;\n }\n \n .capture-button {\n background-color: #e74c3c;\n color: white;\n }\n \n .capture-button:hover {\n background-color: #c0392b;\n }\n \n .uploaded-file-name {\n margin-top: 5px;\n padding: 5px;\n background-color: #f1f1f1;\n border-radius: 3px;\n font-size: 0.9rem;\n width: 100%;\n }\n \n .recording-message {\n margin-top: 5px;\n padding: 5px;\n background-color: #f8d7da;\n color: #721c24;\n border-radius: 3px;\n font-size: 0.9rem;\n width: 100%;\n }\n \n .recording-indicator {\n animation: pulse 1.5s infinite;\n }\n \n @keyframes pulse {\n 0% { opacity: 1; }\n 50% { opacity: 0.5; }\n 100% { opacity: 1; }\n }\n \n /* Action Buttons */\n .action-buttons {\n display: flex;\n justify-content: flex-end;\n margin-top: 20px;\n gap: 10px;\n }\n \n .action-button {\n padding: 8px 16px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-weight: bold;\n transition: background-color 0.2s ease;\n }\n \n .save-button {\n background-color: #4CAF50;\n color: white;\n }\n \n .save-button:hover {\n background-color: #45a049;\n }\n \n .cancel-button {\n background-color: #f44336;\n color: white;\n }\n \n .cancel-button:hover {\n background-color: #d32f2f;\n }\n ",document.head.appendChild(t)}}(),this.createOverlayElements(),this.createLightBoxElements(),this.bindEventHandlers(),this.log("QuadTap initialized successfully")):this.log("Container not found",this.config.containerId)}},{key:"createOverlayElements",value:function(){var t=this,n=e("div",{className:"quad-tap-overlay",styles:{display:"none",backgroundColor:this.config.colors.overlay.background}}),i=e("div",{className:"overlay-close-btn",html:"×",styles:{position:"absolute",top:"10px",right:"10px",width:"30px",height:"30px",borderRadius:"50%",backgroundColor:"rgba(0, 0, 0, 0.5)",color:"white",display:"flex",justifyContent:"center",alignItems:"center",fontSize:"20px",cursor:"pointer",zIndex:"1002"},events:{click:function(e){t.deactivateOverlay(),e.stopPropagation()}}}),o=e("div",{className:"quadrant top-left",styles:{background:"radial-gradient(circle at 0% 0%, ".concat(this.config.colors.overlay.quadrantGradients.topLeft,", transparent 70%)")}}),a=e("div",{className:"quadrant top-right",styles:{background:"radial-gradient(circle at 100% 0%, ".concat(this.config.colors.overlay.quadrantGradients.topRight,", transparent 70%)")}}),r=e("div",{className:"quadrant bottom-left",styles:{background:"radial-gradient(circle at 0% 100%, ".concat(this.config.colors.overlay.quadrantGradients.bottomLeft,", transparent 70%)")}}),s=e("div",{className:"quadrant bottom-right",styles:{background:"radial-gradient(circle at 100% 100%, ".concat(this.config.colors.overlay.quadrantGradients.bottomRight,", transparent 70%)")}}),l={display:"none",width:this.config.profileBubble.size,height:this.config.profileBubble.size,borderColor:this.config.profileBubble.borderColor,borderWidth:this.config.profileBubble.borderWidth,backgroundColor:this.config.profileBubble.backgroundColor,borderStyle:"solid",borderRadius:"50%",justifyContent:"center",alignItems:"center",fontSize:"24px",boxShadow:"0 0 10px rgba(0, 0, 0, 0.5)",cursor:"pointer",zIndex:"1000"};this.config.profileBubble.imageUrl&&(l.backgroundImage="url(".concat(this.config.profileBubble.imageUrl,")"),l.backgroundSize="cover",l.backgroundPosition="center",l.fontSize="0");var d=e("div",{className:"profile-bubble",text:this.config.profileBubble.imageUrl?"":this.config.profileBubble.fallbackEmoji,styles:l}),c=e("div",{className:"directional-emoji up",text:this.config.emojis.directional.up,styles:{display:"none"}}),u=e("div",{className:"directional-emoji right",text:this.config.emojis.directional.right,styles:{display:"none"}}),h=e("div",{className:"directional-emoji down",text:this.config.emojis.directional.down,styles:{display:"none"}}),p=e("div",{className:"directional-emoji left",text:this.config.emojis.directional.left,styles:{display:"none"}}),g=e("div",{className:"quadrant-emoji top-left",text:this.config.emojis.quadrants.topLeft,styles:{display:"none"}}),m=e("div",{className:"quadrant-emoji top-right",text:this.config.emojis.quadrants.topRight,styles:{display:"none"}}),f=e("div",{className:"quadrant-emoji bottom-left",text:this.config.emojis.quadrants.bottomLeft,styles:{display:"none"}}),y=e("div",{className:"quadrant-emoji bottom-right",text:this.config.emojis.quadrants.bottomRight,styles:{display:"none"}}),v=this.createVideoControls(),b=e("div",{className:"tooltip",text:"Tap elsewhere to cancel",styles:{display:"none"}});n.appendChild(i),n.appendChild(o),n.appendChild(a),n.appendChild(r),n.appendChild(s),n.appendChild(c),n.appendChild(u),n.appendChild(h),n.appendChild(p),n.appendChild(g),n.appendChild(m),n.appendChild(f),n.appendChild(y),n.appendChild(d),n.appendChild(v),n.appendChild(b),this.elements.container.appendChild(n),this.elements.overlay=n,this.elements.profileBubble=d,this.elements.directionalEmojis={up:c,right:u,down:h,left:p},this.elements.quadrantEmojis={topLeft:g,topRight:m,bottomLeft:f,bottomRight:y},this.elements.videoControls=v,this.elements.tooltip=b}},{key:"createVideoControls",value:function(){var t=this,n=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(!this.config.videoControls.enabled)return e("div",{styles:{display:"none"}});var i=document.querySelector(this.config.videoSelector),o=x({overlay:n?this.elements.lightBoxContent||document.createElement("div"):this.elements.overlay||document.createElement("div"),onPlay:function(){i&&i.play()},onPause:function(){i&&i.pause()},onRewind:function(){i&&(i.currentTime=Math.max(0,i.currentTime-t.config.videoControls.rewindTime))},onForward:function(){i&&(i.currentTime=Math.min(i.duration,i.currentTime+t.config.videoControls.forwardTime))},rewindTime:this.config.videoControls.rewindTime,forwardTime:this.config.videoControls.forwardTime,debug:this.config.debug,showAllButtons:!0,isLightbox:n});return n||(o.style.display="none"),this.elements.videoControlsObj={element:o,setMode:function(e,n){!function(t,e,n){if(t.classList.remove("qt-control-strip--overlay"),t.classList.remove("qt-control-strip--lightbox"),"overlay"===e){t.classList.add("qt-control-strip--overlay"),t.style.position="absolute",t.style.bottom="20px",t.style.left="50%",t.style.transform="translateX(-50%)",t.style.zIndex="1000";var i=n.offsetWidth;t.style.width="".concat(Math.min(.8*i,400),"px"),t.style.boxShadow="0 2px 10px rgba(0, 0, 0, 0.3)"}else"lightbox"===e&&(t.classList.add("qt-control-strip--lightbox"),t.style.position="static",t.style.bottom="",t.style.left="",t.style.transform="",t.style.zIndex="",t.style.width="100%",t.style.boxShadow="none")}(o,"lightbox"===e,n||t.elements.container)},updateTimeDisplay:function(){},updatePlayPauseButton:function(t){S(o,t)}},o}},{key:"createLightboxControlStrip",value:function(){var t=this;if(!this.config.videoControls.enabled)return e("div",{styles:{display:"none"}});var n=e("div",{className:"td-lightbox-controls",styles:{width:"100%",padding:"10px 0",marginTop:"10px",marginBottom:"10px",borderTop:"1px solid rgba(255, 255, 255, 0.1)",borderBottom:"1px solid rgba(255, 255, 255, 0.1)",display:"flex",flexDirection:"column"}}),i=document.querySelector(this.config.videoSelector),o=x({overlay:this.elements.lightBoxContent||document.createElement("div"),onPlay:function(){i&&i.play()},onPause:function(){i&&i.pause()},onRewind:function(){i&&(i.currentTime=Math.max(0,i.currentTime-t.config.videoControls.rewindTime))},onForward:function(){i&&(i.currentTime=Math.min(i.duration,i.currentTime+t.config.videoControls.forwardTime))},rewindTime:this.config.videoControls.rewindTime,forwardTime:this.config.videoControls.forwardTime,debug:this.config.debug,showAllButtons:!0,isLightbox:!0});return this.elements.lightboxControlStripObj={element:o,updateTimeDisplay:function(){},updatePlayPauseButton:function(t){S(o,t)}},this.elements.lightboxControlStrip=o,n.appendChild(o),n}},{key:"createLightBoxElements",value:function(){var t=this,e=document.createElement("div");e.id="qt-overlay",e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.width="100%",e.style.height="100%",e.style.background="rgba(23, 32, 42, 0.7)",e.style.zIndex="9999",e.style.display="none",e.style.justifyContent="center",e.style.alignItems="center",e.style.pointerEvents="auto",e.style.transition="opacity 0.3s ease",e.style.opacity="1";var n=document.createElement("div");n.id="qt-modal",n.style.position="absolute",n.style.top="50%",n.style.left="50%",n.style.transform="translate(-50%, -50%)",n.style.background="#ffffff",n.style.padding="32px",n.style.borderRadius="14px",n.style.boxShadow="0 2px 16px rgba(0,0,0,0.2)",n.style.zIndex="10000",n.style.maxWidth="95vw",n.style.maxHeight="80vh",n.style.overflowY="auto",n.style.display="flex",n.style.flexDirection="column",n.style.alignItems="center",n.style.pointerEvents="auto",n.style.minWidth="600px",n.addEventListener("click",(function(t){t.stopPropagation()}));var i=document.createElement("h2");i.textContent="QuadTap Input",i.style.marginBottom="20px",i.style.color="#333",i.style.textAlign="center",n.appendChild(i);var o=document.createElement("div");o.style.display="flex",o.style.gap="20px",o.style.marginBottom="20px",o.style.alignItems="center";var r=document.createElement("label");r.textContent="X%: ",r.style.fontWeight="bold";var s=document.createElement("input");s.type="number",s.min="0",s.max="100",s.value="50",s.style.width="80px",s.style.padding="8px",s.style.border="2px solid #ddd",s.style.borderRadius="4px",s.style.fontSize="16px",this.elements.positionInputX=s;var l=document.createElement("label");l.textContent="Y%: ",l.style.fontWeight="bold";var d=document.createElement("input");d.type="number",d.min="0",d.max="100",d.value="50",d.style.width="80px",d.style.padding="8px",d.style.border="2px solid #ddd",d.style.borderRadius="4px",d.style.fontSize="16px",this.elements.positionInputY=d,o.appendChild(r),o.appendChild(s),o.appendChild(l),o.appendChild(d),n.appendChild(o);var c=this.createEmojiGrid();c.style.marginBottom="20px",n.appendChild(c),this.elements.emojiGrid=c;var u=document.createElement("div");u.style.width="100%",u.style.marginBottom="20px";var h=document.createElement("label");h.textContent="Comment:",h.style.display="block",h.style.marginBottom="8px",h.style.fontWeight="bold";var p=document.createElement("textarea");p.rows=4,p.style.width="100%",p.style.padding="10px",p.style.border="2px solid #ddd",p.style.borderRadius="4px",p.style.fontSize="14px",p.style.resize="vertical",p.placeholder="Add your comment here...",u.appendChild(h),u.appendChild(p),n.appendChild(u),this.elements.commentBox=u;var g=document.createElement("div");g.style.width="100%",g.style.marginBottom="20px";var m=document.createElement("label");m.textContent="Media:",m.style.display="block",m.style.marginBottom="8px",m.style.fontWeight="bold";var f=document.createElement("div");f.className="media-buttons",f.style.display="flex",f.style.gap="10px",f.style.marginBottom="10px";var y=document.createElement("button");y.textContent="📁 Upload File",y.className="upload-button",y.style.padding="8px 12px",y.style.backgroundColor="#3498db",y.style.color="white",y.style.border="none",y.style.borderRadius="4px",y.style.cursor="pointer",y.addEventListener("click",(function(e){e.preventDefault();var n=document.createElement("input");n.type="file",n.accept="image/*,video/*",n.style.display="none",n.addEventListener("change",(function(e){if(e.target.files&&e.target.files[0]){var n=e.target.files[0];t.log("File uploaded",{name:n.name,size:n.size,type:n.type}),a("uploadedFile",n.name),a("uploadedFileType",n.type);var i=document.createElement("div");i.className="uploaded-file-name",i.textContent="📎 "+n.name,i.style.marginTop="5px",i.style.padding="5px",i.style.backgroundColor="#f1f1f1",i.style.borderRadius="3px",i.style.fontSize="0.9rem",g.appendChild(i)}})),document.body.appendChild(n),n.click(),document.body.removeChild(n)}));var v=document.createElement("button");v.textContent="🎥 Record Video",v.className="capture-button",v.style.padding="8px 12px",v.style.backgroundColor="#e74c3c",v.style.color="white",v.style.border="none",v.style.borderRadius="4px",v.style.cursor="pointer",v.addEventListener("click",(function(e){e.preventDefault(),t.state.recording?(t.stopRecording(),v.textContent="🎥 Record Video"):(t.startRecording(),v.textContent="⏹️ Stop Recording")})),f.appendChild(y),f.appendChild(v),g.appendChild(m),g.appendChild(f),n.appendChild(g),this.elements.mediaSection=g;var b=document.createElement("div");b.style.display="flex",b.style.gap="10px",b.style.justifyContent="center";var w=document.createElement("button");w.textContent="Save",w.style.padding="10px 20px",w.style.backgroundColor="#4CAF50",w.style.color="white",w.style.border="none",w.style.borderRadius="4px",w.style.cursor="pointer",w.style.fontSize="16px",w.addEventListener("click",(function(){t.saveThrowDown()}));var x=document.createElement("button");x.textContent="Cancel",x.style.padding="10px 20px",x.style.backgroundColor="#f44336",x.style.color="white",x.style.border="none",x.style.borderRadius="4px",x.style.cursor="pointer",x.style.fontSize="16px",x.addEventListener("click",(function(){t.closeLightBox()})),b.appendChild(w),b.appendChild(x),n.appendChild(b),e.style.display="flex",e.style.visibility="hidden",new MutationObserver((function(t){t.forEach((function(t){"attributes"===t.type&&"class"===t.attributeName&&(e.classList.contains("active")?(e.style.visibility="visible",e.style.display="flex"):(e.style.visibility="hidden",setTimeout((function(){e.classList.contains("active")||(e.style.display="none")}),300)))}))})).observe(e,{attributes:!0}),e.appendChild(n),document.body.appendChild(e),e.style.position="fixed",this.elements.lightBox=e,this.elements.lightBoxContent=n}},{key:"createEmojiGrid",value:function(){var t=e("div",{className:"emoji-grid",styles:{display:"grid",gridTemplateColumns:"1fr 1fr",gridTemplateRows:"1fr 1fr",gap:"10px",width:"100%"}}),n=e("div",{className:"emoji-quadrant top-left",styles:{gridRow:"1",gridColumn:"1"}}),i=e("div",{className:"emoji-quadrant top-right",styles:{gridRow:"1",gridColumn:"2"}}),o=e("div",{className:"emoji-quadrant bottom-left",styles:{gridRow:"2",gridColumn:"1"}}),a=e("div",{className:"emoji-quadrant bottom-right",styles:{gridRow:"2",gridColumn:"2"}});return this.createEmojiTable(n,this.config.emojis.thoughts.topLeft,"top-left"),this.createEmojiTable(i,this.config.emojis.thoughts.topRight,"top-right"),this.createEmojiTable(o,this.config.emojis.thoughts.bottomLeft,"bottom-left"),this.createEmojiTable(a,this.config.emojis.thoughts.bottomRight,"bottom-right"),t.appendChild(n),t.appendChild(i),t.appendChild(o),t.appendChild(a),t}},{key:"createEmojiTable",value:function(t,n,i){var o=this,a=e("div",{className:"emoji-row"}),r=e("div",{className:"emoji-cell"});if(n[0]){var s=e("div",{className:"thought-emoji",text:n[0],attributes:{"data-emoji":n[0],"data-quadrant":i,"data-index":0},events:{click:function(t){o.selectEmoji(s,n[0],i,0)}}});r.appendChild(s)}var l=e("div",{className:"emoji-cell"});if(n[1]){var d=e("div",{className:"thought-emoji",text:n[1],attributes:{"data-emoji":n[1],"data-quadrant":i,"data-index":1},events:{click:function(t){o.selectEmoji(d,n[1],i,1)}}});l.appendChild(d)}a.appendChild(r),a.appendChild(l);var c=e("div",{className:"emoji-row"}),u=e("div",{className:"emoji-cell"});if(n[2]){var h=e("div",{className:"thought-emoji",text:n[2],attributes:{"data-emoji":n[2],"data-quadrant":i,"data-index":2},events:{click:function(t){o.selectEmoji(h,n[2],i,2)}}});u.appendChild(h)}var p=e("div",{className:"emoji-cell"});if(n[3]){var g=e("div",{className:"thought-emoji",text:n[3],attributes:{"data-emoji":n[3],"data-quadrant":i,"data-index":3},events:{click:function(t){o.selectEmoji(g,n[3],i,3)}}});p.appendChild(g)}c.appendChild(u),c.appendChild(p),t.appendChild(a),t.appendChild(c)}},{key:"extractUrlFromText",value:function(t){if(!t)return null;var e=t.match(/(https?:\/\/[^\s]+)/g);return e&&e.length>0?e[0]:null}},{key:"saveEventToHistory",value:function(t){t.timestamp=(new Date).toISOString(),t.context={profileBubblePosition:this.state.profileBubblePosition,currentQuadrant:this.state.currentQuadrant,containerDimensions:this.state.containerDimensions};var e=[];try{var n=localStorage.getItem("quadTapEvents");n&&(e=JSON.parse(n))}catch(t){this.log("Error parsing stored events",t)}e.push(t),localStorage.setItem("quadTapEvents",JSON.stringify(e)),localStorage.setItem("quadTapCurrentEvent",JSON.stringify(t)),this.log("Event saved to history",t)}},{key:"selectEmoji",value:function(t,e,n,i){this.log("Emoji selected",{emoji:e,quadrant:n,index:i}),this.elements.emojiGrid.querySelectorAll(".thought-emoji").forEach((function(t){return t.classList.remove("selected")})),t.classList.add("selected"),a("selectedEmoji",e),a("selectedQuadrant",n),a("selectedIndex",i),this.saveEventToHistory({type:"emoji_selected",emoji:e,quadrant:n,index:i});var o=this.elements.commentBox&&this.elements.commentBox.querySelector("textarea");if(o){var r=o.value||"";o.value=e+" "+r;var s=new Event("input",{bubbles:!0});o.dispatchEvent(s)}var l=document.querySelector(this.config.videoSelector);if(l&&(a("videoTime",l.currentTime),a("videoId",l.getAttribute("data-video-id")||"unknown")),a("positionX",this.state.profileBubblePosition.x),a("positionY",this.state.profileBubblePosition.y),this.config.callbacks.onThrowDownConfirm){var d=l?{currentTime:l.currentTime,videoId:l.getAttribute("data-video-id")||"unknown",duration:l.duration}:null;this.config.callbacks.onThrowDownConfirm(n,this.state.profileBubblePosition.x,this.state.profileBubblePosition.y,d)}}},{key:"saveThrowDown",value:function(){this.log("Saving throw-down");var t=this.elements.commentBox.querySelector("textarea"),e=t?t.value:"",n=this.extractUrlFromText(e);a("comment",e),n&&a("extractedUrl",n),a("timestamp",Date.now());var i=document.querySelector(this.config.videoSelector),o={};i&&(Array.from(i.attributes).filter((function(t){return t.name.startsWith("data-")})).forEach((function(t){var e=t.name.replace("data-","");o[e]=t.value})),o.duration=i.duration||0,o.currentTime=i.currentTime||0,o.paused=i.paused,o.muted=i.muted,o.volume=i.volume,o.playbackRate=i.playbackRate,o.videoWidth=i.videoWidth,o.videoHeight=i.videoHeight,o.src=i.currentSrc||i.src);var s={selectedEmoji:r("selectedEmoji",""),selectedQuadrant:r("selectedQuadrant",""),selectedIndex:r("selectedIndex",-1),comment:e,extractedUrl:n||r("extractedUrl",""),positionX:this.state.profileBubblePosition.x,positionY:this.state.profileBubblePosition.y,quadrant:this.state.currentQuadrant,videoId:r("videoId",i&&i.getAttribute("data-video-id")||"unknown"),videoTime:r("videoTime",i?i.currentTime:0),videoMetadata:o,containerId:this.config.containerId,containerWidth:this.state.containerDimensions.width,containerHeight:this.state.containerDimensions.height,timestamp:Date.now(),timezoneOffset:(new Date).getTimezoneOffset(),locale:navigator.language||"en-US",userAgent:navigator.userAgent,platform:navigator.platform,url:window.location.href,referrer:document.referrer,title:document.title};!function(t){try{for(var e in t)a(e,t[e]);return a("timestamp",Date.now()),!0}catch(t){return console.error("[QuadTap] Error saving throw-down context:",t),!1}}(s),this.closeLightBox(),this.log("Throw-down saved",s)}},{key:"bindEventHandlers",value:function(){var t=this;this.elements.video=document.querySelector(this.config.videoSelector),(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)||window.innerWidth<768)&&this.elements.video&&(this.elements.video.addEventListener("webkitbeginfullscreen",(function(t){return t.preventDefault&&t.preventDefault(),!1})),this.elements.video.setAttribute("playsinline",""),this.elements.video.setAttribute("webkit-playsinline",""),this.elements.video.removeAttribute("controls"),this.elements.video.controls=!1,setTimeout((function(){try{document.querySelectorAll(".vjs-fullscreen-control, .fullscreen-button, [data-fullscreen], .ytp-fullscreen-button").forEach((function(t){t.style&&(t.style.display="none"),t.addEventListener("click",(function(t){return t.preventDefault&&t.preventDefault(),t.stopPropagation(),!1}))}))}catch(e){t.log("Error disabling fullscreen buttons",e)}}),500));var e=null,n={x:0,y:0};this.getQuadrantFromPosition=function(t,e){var n=this.state.containerDimensions.width,i="";return(i+=e<this.state.containerDimensions.height/2?"top-":"bottom-")+(t<n/2?"left":"right")};var i=function(){e&&(clearTimeout(e),e=null)};this.elements.container.addEventListener("touchstart",(function(i){if(i.touches&&1===i.touches.length){var o=i.touches[0],r=t.elements.container.getBoundingClientRect(),s=o.clientX-r.left,l=o.clientY-r.top;n={x:s,y:l},e&&clearTimeout(e),e=setTimeout((function(){!function(e){t.log("Long press detected",e);var n=e.x/t.state.containerDimensions.width,i=e.y/t.state.containerDimensions.height;t.state.profileBubblePosition={x:n,y:i},t.state.currentQuadrant=t.getQuadrantFromPosition(e.x,e.y),a("positionX",n),a("positionY",i);var o={type:"long_press",positionX:e.x,positionY:e.y,quadrant:t.state.currentQuadrant,containerWidth:t.state.containerDimensions.width,containerHeight:t.state.containerDimensions.height};t.saveEventToHistory(o),t.openLightBox()}(n)}),300)}}),{passive:!1}),this.elements.container.addEventListener("touchmove",(function(i){if(e&&i.touches&&1===i.touches.length){var o=i.touches[0],a=t.elements.container.getBoundingClientRect(),r=o.clientX-a.left,s=o.clientY-a.top,l=r-n.x,d=s-n.y;Math.sqrt(l*l+d*d)>10&&(clearTimeout(e),e=null)}}),{passive:!1}),this.elements.container.addEventListener("touchend",i,{passive:!1}),this.elements.container.addEventListener("touchcancel",i,{passive:!1});var o=function(e){if(e.preventDefault(),e.stopPropagation(),!e.target.closest(".video-control-button"))if(t.state.active)e.target===t.elements.profileBubble||t.elements.profileBubble.contains(e.target)?t.openLightBox():t.deactivateOverlay();else{var n,i,o=t.elements.container.getBoundingClientRect();if("touchstart"===e.type||"touchend"===e.type){var a=e.changedTouches[0];n=a.clientX-o.left,i=a.clientY-o.top}else n=e.clientX-o.left,i=e.clientY-o.top;t.activateOverlay(n,i)}};this.elements.container.addEventListener("click",o),this.elements.container.addEventListener("touchend",o);var r=function(e){t.state.active&&(t.openLightBox(),e.stopPropagation())};this.elements.profileBubble.addEventListener("click",r),this.elements.profileBubble.addEventListener("touchend",(function(t){t.preventDefault(),r(t)}));var s=function(e){e.target===t.elements.lightBox&&t.closeLightBox()};this.elements.lightBox.addEventListener("click",s),this.elements.lightBox.addEventListener("touchend",s),document.addEventListener("keydown",(function(e){"Escape"===e.key&&(t.elements.lightBox.classList.contains("active")?t.closeLightBox():t.state.active&&t.deactivateOverlay())})),this.elements.video&&(this.elements.video.addEventListener("play",(function(){t.state.videoPlaying=!0})),this.elements.video.addEventListener("pause",(function(){t.state.videoPlaying=!1}))),window.addEventListener("resize",this.throttledResize),this.updateContainerDimensions(),this.addSwipeHandlers()}},{key:"addSwipeHandlers",value:function(){var t=this;this.state.swipe={startX:0,startY:0,endX:0,endY:0,startTime:0,onVideo:!1,overlayActive:!1,threshold:50,maxTime:500};var e=function(e){var n,i,o;e.type.includes("touch")?(n=e.touches[0].clientX,i=e.touches[0].clientY,o=document.elementFromPoint(n,i)):(n=e.clientX,i=e.clientY,o=e.target),t.state.swipe.startX=n,t.state.swipe.startY=i,t.state.swipe.startTime=Date.now(),t.state.swipe.onVideo=o===t.elements.video,t.state.swipe.overlayActive=t.state.active,t.log("Swipe start",{x:n,y:i,onVideo:t.state.swipe.onVideo,overlayActive:t.state.swipe.overlayActive})},n=function(e){var n,i;if(t.state.swipeProcessing)t.log("Ignoring swipe end during active processing");else if(0!==t.state.swipe.startX||0!==t.stat