@santigp258/react-simple-lightbox-video-image/dist/react-simple-lightbox-video-image.cjs.production.min.js

A simple and customizable react lightbox component that support video and image. Also enables swipe and doble tap gesture. This component can be compatible with Next js

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}var a=function(){return n.createElement("style",null,"\n        @keyframes react_simple_image_video_spinner {\n            0% {\n                  transform: translate3d(-50%, -50%, 0) rotate(0deg);\n                }\n            100% {\n                  transform: translate3d(-50%, -50%, 0) rotate(360deg);\n                }\n              }\n              \n              .react-lightbox-component-icon-hover {\n                background-color: rgba(119, 119, 119, .1);\n                border-radius: 100%;\n              }\n              .react-lightbox-component-icon-hover:hover {\n                background-color: rgba(119, 119, 119, .6);\n               \n              }\n              \n              .react-lightbox-component-icon-right {\n                right: 0px;\n              }\n              .react-lightbox-component-icon-left {\n                left: 10px;\n              }\n              @media (min-width: 768px) {\n                .react-lightbox-component-icon-right {\n                  right: 10px;\n                }\n                .react-lightbox-component-icon-left {\n                  left: 10px;\n                }\n              }\n              \n                ")},r=function(e,t,n){return e>t-n&&e<t||e<t+n&&e>t?t:e},i=function(e){return{x:e.clientX,y:e.clientY}},l=function(e,t){return Math.sqrt(Math.pow(e.y-t.y,2)+Math.pow(e.x-t.x,2))},c=function(){return n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"48px",className:"react-lightbox-component-icon-hover",viewBox:"0 0 24 24",width:"48px",fill:"#FFFFFF"},n.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),n.createElement("path",{d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"}))},s=function(){return n.createElement("svg",{className:"react-lightbox-component-icon-hover ",xmlns:"http://www.w3.org/2000/svg",height:"48px",viewBox:"0 0 24 24",width:"48px",fill:"#FFFFFF"},n.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),n.createElement("path",{d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}))},u=function(){return n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"36px",viewBox:"0 0 24 24",width:"36px",fill:"#FFFFFF"},n.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),n.createElement("path",{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}))},m=["variant"],h=function(e){var t=e.variant,o=function(e,t){if(null==e)return{};var n,o,a={},r=Object.keys(e);for(o=0;o<r.length;o++)t.indexOf(n=r[o])>=0||(a[n]=e[n]);return a}(e,m);return n.createElement("div",Object.assign({},o),"right"===t?n.createElement(s,null):null,"left"===t?n.createElement(c,null):null,"close"===t?n.createElement(u,null):null)},d=function(e){var t=e.resource,a=e.CustomImage,r=e.CustomVideo,i=e.onLoad,l=e.x,c=e.y,s=e.scale,u=e.imageClassname,m=e.imageContainerClassName,h=e.imageStyle,d=e.frameClassname,f=e.frameStyle;return"photo"===t.type?n.createElement("div",{style:o({pointerEvents:1===s?"auto":"none",transform:"translate("+l+"px, "+c+"px) scale("+s+")",transition:"transform 0.5s ease-out"},e.imageContainerStyle),className:m},n.createElement(a||"img",{title:t.title,className:u,style:h,alt:t.altTag,src:t.url,onLoad:i})):"video"===t.type?n.createElement(n.Fragment,null,r?n.createElement(r,{onLoad:i,style:o({pointerEvents:1===s?"auto":"none",maxWidth:"100%",maxHeight:"100%",width:"100%",height:"100%",transform:"translate("+l+"px, "+c+"px)",transition:"transform 0.5s ease-out"},f),className:d,alt:t.altTag,src:t.url,title:t.title}):n.createElement("iframe",{width:"560",height:"315",src:t.url,frameBorder:"0",allow:"autoplay; encrypted-media",title:t.title,allowFullScreen:!0,className:d,style:o({pointerEvents:1===s?"auto":"none",maxWidth:"100%",maxHeight:"100%",width:"100%",height:"100%",transform:"translate("+l+"px, "+c+"px)",transition:"transform 0.5s ease-out"},f),onLoad:i})):null};exports.default=function(e){var c=e.data,s=e.startIndex,u=void 0===s?0:s,m=e.showResourceCount,f=void 0===m||m,g=e.backdropBg,p=void 0===g?"rgba(0,0,0,.5)":g,v=e.preventHidden,x=e.onCloseCallback,w=e.onNavigationCallback,y=e.CustomImage,C=e.CustomVideo,F=e.CustomLoader,E=e.CustomResourceCount,b=e.CustomChevronRight,S=e.CustomChevronLeft,N=e.CustomCloseIcon,k=e.imageContainerStyle,L=e.containerStyle,M=e.containerClassName,z=e.imageContainerClassName,H=e.resourceContainerStyle,I=e.resourceContainerClassName,_=e.imageClassname,A=e.imageStyle,W=e.resourceCountClassname,T=e.resourceCountStyle,j=e.frameClassname,q=e.frameStyle,O=t.useState({x:0,y:0,width:window.innerWidth,height:window.innerHeight,scale:1}),B=O[0],R=O[1],X=t.useRef(0),D=t.useState(0),V=D[0],Y=D[1],P=t.useState(u),Q=P[0],G=P[1],J=t.useState(0),K=J[0],U=J[1],Z=t.useState(0),$=Z[0],ee=Z[1],te=t.useState(0),ne=te[0],oe=te[1],ae=t.useState(!0),re=ae[0],ie=ae[1],le=t.useState(!1),ce=le[0],se=le[1],ue=t.useState(!1),me=ue[0],he=ue[1];!function(e){void 0===e&&(e=!1),t.useEffect((function(){var t=document.querySelector("body");return t&&!e&&(t.style.touchAction="none",t.style.overflow="hidden"),function(){t&&(t.style.touchAction="",t.style.overflow="")}}),[])}(v);var de=function(e){X.current=requestAnimationFrame((function t(){B.scale!==e&&(ve(r(B.scale+.04*(e-B.scale),B.scale,.001)),X.current=requestAnimationFrame(t))}))},fe=t.useCallback((function(){var e=B.scale,t=B.x,n=B.y;X.current=requestAnimationFrame((function o(){if(1!==e||0!==t||0!==n){var a=r(.08*(1-B.scale)+B.scale,1,.001),i=window.innerWidth*a,l=window.innerHeight*a;R({width:i,height:l,x:0,y:0,scale:a}),t=0,n=0,e=a,X.current=requestAnimationFrame(o)}}))}),[B]),ge=t.useCallback((function(){var e=Q;e>0?setTimeout((function(){R((function(e){return o({},e,{x:0})})),G(e-1),se(!1),ie(!0),w&&w(e-1)}),500):fe()}),[Q,fe,w]),pe=t.useCallback((function(){var e=Q;e<c.length-1?setTimeout((function(){R((function(e){return o({},e,{x:0})})),G(e+1),se(!1),ie(!0),w&&w(e-1)}),500):fe()}),[Q,fe,w,c]);t.useEffect((function(){var e=function(e){"ArrowLeft"===e.code&&ge(),"ArrowRight"===e.code&&pe()};return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[ge,pe]);var ve=function(e){var t=window.innerWidth*e,n=window.innerHeight*e;R((function(a){return o({},a,{width:t,height:n,scale:e})}))};return n.createElement(n.Fragment,null,n.createElement(a,null),n.createElement("div",{onTouchStart:function(e){X.current&&cancelAnimationFrame(X.current),1===e.touches.length&&(me&&he(!1),function(e){U(e.touches[0].clientX),ee(e.touches[0].clientY),1===B.scale&&se(!0)}(e)),2===e.touches.length&&(he(!0),function(e){var t=i(e.touches[0]),n=i(e.touches[1]);oe(l(t,n))}(e))},onTouchMove:function(e){1===e.touches.length&&function(e){1===B.scale?R((function(t){return o({},t,{x:e.touches[0].clientX-K})})):(e.preventDefault(),R((function(t){return o({},t,{x:e.touches[0].clientX-K,y:e.touches[0].clientY-$})})))}(e),2===e.touches.length&&function(e){e.preventDefault();var t=i(e.touches[0]),n=i(e.touches[1]),o=l(t,n),a=Math.min(4.2,Math.max(.8,B.scale*(o/ne)));ve(a),oe(o)}(e)},onTouchEnd:function(e){return e.touches.length>0?null:B.scale>4?de(4):B.scale<1?de(1):(V&&V+300>e.timeStamp&&fe(),me?R({x:0,y:0,width:window.innerWidth,height:window.innerHeight,scale:1}):(ce&&1===B.scale&&function(e){var t=e.changedTouches[0].clientX-K;t<-window.innerWidth/3?pe():t>window.innerWidth/3?ge():fe()}(e),void Y(e.timeStamp)))},className:M,style:L||{top:"0px",left:"0px",zIndex:999,overflow:"hidden",position:"fixed",display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"row",height:"100%",width:"100%",backgroundColor:p}},f?n.createElement(n.Fragment,null,E?n.createElement(E,{index:Q,dataQuantity:c.length}):n.createElement("div",{className:W,style:T||{position:"absolute",top:"10px",left:"10px",padding:"15px",color:"white",fontWeight:"bold"}},n.createElement("span",null,Q+1)," / ",n.createElement("span",null,c.length))):null,n.createElement(N||h,{variant:"close",style:{position:"absolute",top:"10px",zIndex:50,right:"10px",padding:"5px",color:"#FFFFFF",cursor:"pointer"},className:"react-lightbox-component-icon-hover",onClick:x}),Q+1!==1?n.createElement(n.Fragment,null,n.createElement(S||h,{variant:"left",style:{position:"absolute",zIndex:1,color:"#FFFFFF",cursor:"pointer"},onClick:ge,className:"react-lightbox-component-icon-left"})):null,Q+1!==c.length?n.createElement(n.Fragment,null,n.createElement(b||h,{variant:"right",style:{position:"absolute",zIndex:1,color:"#FFFFFF",cursor:"pointer"},onClick:pe,className:"react-lightbox-component-icon-right"})):null,re?n.createElement(n.Fragment,null,F?n.createElement(F,null):n.createElement("div",{style:{margin:"auto",position:"fixed"}},n.createElement("div",{style:{animation:"1.0s linear infinite react_simple_image_video_spinner",border:"solid 5px #ffffff",borderBottomColor:"#cfd0d1",borderRadius:"50%",height:30,width:30,position:"fixed",transform:"translate3d(-50%, -50%, 0)"}}))):null,n.createElement("div",{style:H,className:I},c.map((function(e,t){return Q===t?n.createElement(d,{key:t,resource:e,x:B.x,y:B.y,scale:B.scale,imageClassname:_,imageContainerStyle:k,imageContainerClassName:z,imageStyle:A,onLoad:function(){ie(!1)},CustomImage:y,CustomVideo:C,frameClassname:j,frameStyle:q}):null})))))};
//# sourceMappingURL=react-simple-lightbox-video-image.cjs.production.min.js.map