@baskvava/react-video-modal
Version:
This is a react library for video embbeded in modal
2 lines (1 loc) • 13.5 kB
JavaScript
"use strict";var n=require("react/jsx-runtime"),e=require("react"),t=require("react-dom");function r(e){var t=e.onClosed,r=e.primary,o=void 0!==r&&r;return n.jsx("button",{onClick:t,children:n.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",width:"20",height:"20",viewBox:"0 0 30 30",fill:"".concat(o?"#000000":"#ffffff"),children:n.jsx("path",{d:"M 7 4 C 6.744125 4 6.4879687 4.0974687 6.2929688 4.2929688 L 4.2929688 6.2929688 C 3.9019687 6.6839688 3.9019687 7.3170313 4.2929688 7.7070312 L 11.585938 15 L 4.2929688 22.292969 C 3.9019687 22.683969 3.9019687 23.317031 4.2929688 23.707031 L 6.2929688 25.707031 C 6.6839688 26.098031 7.3170313 26.098031 7.7070312 25.707031 L 15 18.414062 L 22.292969 25.707031 C 22.682969 26.098031 23.317031 26.098031 23.707031 25.707031 L 25.707031 23.707031 C 26.098031 23.316031 26.098031 22.682969 25.707031 22.292969 L 18.414062 15 L 25.707031 7.7070312 C 26.098031 7.3170312 26.098031 6.6829688 25.707031 6.2929688 L 23.707031 4.2929688 C 23.316031 3.9019687 22.682969 3.9019687 22.292969 4.2929688 L 15 11.585938 L 7.7070312 4.2929688 C 7.5115312 4.0974687 7.255875 4 7 4 z"})})})}function o(){return n.jsx("svg",{fill:"rgb(209 213 219)",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",style:{width:"32px"},children:n.jsx("path",{d:"M12,1A11,11,0,1,0,23,12,11.013,11.013,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9.011,9.011,0,0,1,12,21ZM10,8l6,4-6,4Z"})})}function i(){return n.jsx("svg",{fill:"rgb(209 213 219)",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",style:{width:"32px"},children:n.jsx("path",{d:"M12,1A11,11,0,1,0,23,12,11.013,11.013,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9.011,9.011,0,0,1,12,21ZM9,9h6v6H9Z"})})}function a(){return n.jsxs("svg",{viewBox:"0 -1 24 24",id:"meteor-icon-kit__regular-volume-mute",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"32px"},children:[n.jsx("path",{d:"M1.29292 20.2929C0.902398 20.6834 0.902398 21.3166 1.29292 21.7071C1.68345 22.0976 2.31661 22.0976 2.70714 21.7071L3.69957 20.7147C3.70209 20.7122 3.7046 20.7097 3.70711 20.7072L21.7071 2.70721C21.7096 2.70472 21.7121 2.70221 21.7145 2.69969L22.7071 1.70711C23.0977 1.31658 23.0977 0.68342 22.7071 0.29289C22.3166 -0.097631 21.6834 -0.097631 21.2929 0.29289L1.29292 20.2929z",fill:"rgb(209 213 219)"}),n.jsx("path",{d:"M13.5 2.30132V5.25746L11.5 7.25747L11.5 2.30132L5.68232 7.73117C5.49715 7.90399 5.25329 8.00011 5 8.00011H2V14.0001H4.75735L2.75735 16.0001H1C0.447715 16.0001 0 15.5524 0 15.0001V7.00011C0 6.44783 0.447715 6.00011 1 6.00011H4.60584L10.1354 0.83921C11.4138 -0.353996 13.5 0.55256 13.5 2.30132z",fill:"rgb(209 213 219)"}),n.jsx("path",{d:"M9.45372 17.789L11.5 19.6989V15.7427L13.5 13.7427V19.6989C13.5 21.4477 11.4138 22.3542 10.1354 21.161L8.03867 19.2041L9.45372 17.789z",fill:"rgb(209 213 219)"}),n.jsx("path",{d:"M17.7632 9.4796C17.9202 9.9716 18.0008 10.487 18 11.0078C17.9986 11.8868 17.7656 12.7499 17.3243 13.5101C16.8831 14.2703 16.2492 14.9008 15.4866 15.3379C15.0075 15.6126 14.8417 16.2237 15.1164 16.7028C15.391 17.182 16.0021 17.3477 16.4813 17.0731C17.5489 16.4611 18.4363 15.5784 19.0541 14.5141C19.6718 13.4498 19.9981 12.2415 20 11.0109C20.0016 9.9467 19.7606 8.89836 19.298 7.94475L17.7632 9.4796z",fill:"rgb(209 213 219)"}),n.jsx("path",{d:"M20.7753 6.46747L20.7977 6.50613C21.5877 7.87695 22.0024 9.4318 22 11.014C21.9975 12.5962 21.578 14.1498 20.7838 15.5181C19.9895 16.8865 18.8485 18.0213 17.4759 18.8082C16.9968 19.0829 16.831 19.6939 17.1057 20.1731C17.3803 20.6522 17.9914 20.818 18.4705 20.5433C20.1482 19.5816 21.5427 18.1946 22.5135 16.5222C23.4843 14.8497 23.997 12.9509 24 11.0171C24.003 9.0833 23.4961 7.18292 22.5305 5.50747C22.4341 5.34013 22.3334 5.17564 22.2286 5.01411L20.7753 6.46747z",fill:"rgb(209 213 219)"})]})}function d(){return n.jsxs("svg",{viewBox:"0 0 24 24",id:"meteor-icon-kit__regular-volume-up",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"32px"},children:[n.jsxs("g",{"clip-path":"url(#clip0_525_161)",children:[n.jsx("path",{d:"M10.1354 1.83922C11.4138 0.646005 13.5 1.55256 13.5 3.30132V20.6989C13.5 22.4477 11.4138 23.3542 10.1354 22.161L4.60584 17.0001H1C0.447715 17.0001 0 16.5524 0 16.0001V8.00011C0 7.44783 0.447715 7.00011 1 7.00011H4.60584L10.1354 1.83922ZM11.5 3.30133L5.68232 8.73117C5.49715 8.904 5.25329 9.00011 5 9.00011H2V15.0001H5C5.25329 15.0001 5.49715 15.0962 5.68232 15.2691L11.5 20.6989L11.5 3.30133Z",fill:"rgb(209 213 219)"}),n.jsx("path",{d:"M15.1164 17.7028C14.8417 17.2237 15.0075 16.6126 15.4866 16.3379C16.2492 15.9008 16.8831 15.2703 17.3243 14.5101C17.7656 13.7499 17.9986 12.8868 18 12.0078C18.0013 11.1288 17.771 10.265 17.3321 9.50346C16.8931 8.74189 16.2612 8.10948 15.5 7.66998C15.0217 7.39384 14.8578 6.78225 15.134 6.30396C15.4101 5.82567 16.0217 5.66179 16.5 5.93793C17.5657 6.55323 18.4504 7.4386 19.0649 8.50479C19.6793 9.57099 20.0019 10.7803 20 12.0109C19.9981 13.2415 19.6718 14.4498 19.0541 15.5141C18.4363 16.5784 17.5489 17.4611 16.4813 18.0731C16.0021 18.3477 15.391 18.182 15.1164 17.7028Z",fill:"rgb(209 213 219)"}),n.jsx("path",{d:"M17.4759 19.8082C16.9968 20.0829 16.831 20.6939 17.1057 21.1731C17.3803 21.6522 17.9914 21.818 18.4706 21.5433C20.1482 20.5816 21.5428 19.1946 22.5135 17.5222C23.4843 15.8497 23.997 13.9509 24 12.0171C24.003 10.0833 23.4961 8.18292 22.5305 6.50747C21.5649 4.83202 20.1747 3.44072 18.5 2.47383C18.0217 2.19769 17.4101 2.36156 17.134 2.83986C16.8578 3.31815 17.0217 3.92974 17.5 4.20588C18.8702 4.99697 20.0077 6.13531 20.7977 7.50613C21.5877 8.87695 22.0024 10.4318 22 12.014C21.9976 13.5962 21.5781 15.1498 20.7838 16.5182C19.9895 17.8865 18.8486 19.0213 17.4759 19.8082Z",fill:"rgb(209 213 219)"})]}),n.jsx("defs",{children:n.jsx("clipPath",{id:"clip0_525_161",children:n.jsx("rect",{width:"24",height:"24",fill:"white"})})})]})}!function(n,e){void 0===e&&(e={});var t=e.insertAt;if(n&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=n:o.appendChild(document.createTextNode(n))}}('.modal-overlay {\n position: fixed;\n top: 0px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n\n background-color: rgb(0, 0, 0, 0.7);\n color: black;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.modal-container {\n border-radius: 4px;\n background-color: rgb(255, 255, 255);\n overflow: hidden;\n}\n\n.no-header {\n position: relative;\n}\n\n.no-header .no-header-btn {\n position: absolute;\n right: -28px;\n top: 0px;\n}\n\n.no-header .no-header-btn button {\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n}\n\n.modal-header-container {\n display: flex;\n justify-content: space-between;\n padding: 16px;\n}\n\n.modal-header-container button {\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n}\n\n.modal-body {\n width: 100%;\n}\n\niframe {\n border: none;\n}\n\nbutton:hover {\n cursor: pointer;\n}\n\n.video-frame {\n position: relative;\n}\n\n.video-frame .controls {\n width: 100%;\n position: absolute;\n bottom: 0;\n background-color: rgb(75 85 99);\n opacity: 1;\n /* padding: 0 6px; */\n display: flex;\n align-items: center;\n color: rgb(209 213 219);\n}\n\n.video-frame .controls:hover {\n opacity: 0.9;\n}\n\n.video-frame .controls .time {\n white-space: nowrap;\n}\n\n.video-frame .controls .progress {\n width: 60%;\n height: 8px;\n padding: 0 10px 0 20px;\n}\n\n.video-frame .controls .progress .progress-line {\n width: 100%;\n height: 100%;\n background-color: black;\n border-radius: 6px;\n}\n\n.video-frame .controls .progress .progress-line .progress-bar {\n height: 100%;\n background-color: rgb(156 163 175);\n border-radius: 6px;\n position: relative;\n}\n\n.video-frame .controls .progress .progress-line .progress-bar:after {\n display: block;\n content: "";\n height: 16px;\n width: 16px;\n border-radius: 100%;\n background-color: white;\n\n position: absolute;\n right: 0;\n bottom: -4px;\n}\n\n.video-frame .controls button {\n width: 32px;\n height: 32px;\n border: none;\n background-color: rgb(75 85 99);\n display: flex;\n justify-content: center;\n align-items: center;\n color: white;\n}\n\n.controls .volumn {\n padding-right: 12px;\n}\ninput[type="range"] {\n -webkit-appearance: none;\n width: 98%;\n height: 7px;\n background: black;\n border-radius: 20px;\n background-image: linear-gradient(rgb(156 163 175), rgb(156 163 175));\n background-size: 100% 100%;\n background-repeat: no-repeat;\n}\n\ninput[type="range"]:hover {\n accent-color: white;\n}\n\ninput[type="range"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background: white;\n cursor: pointer;\n}\n\ninput[type="range"]:disabled {\n cursor: not-allowed;\n}\n\ninput[type="range"]:disabled::-webkit-slider-thumb {\n cursor: not-allowed;\n}\n');var s=[9,16];exports.ModalVideo=function(c){var l=c.isOpen,u=void 0!==l&&l,h=c.onClosed,p=c.url,g=c.title,m=c.header,x=c.maxWidth,f=void 0===x?1200:x,v=c.width,b=c.responsive,C=void 0!==b&&b,w=c.widthRatio,y=void 0===w?.8:w,j=c.ratio,L=void 0===j?s:j,k=c.autoPlay,M=void 0===k||k,N=c.type,S=void 0===N?"video":N,z=c.controls,E=void 0===z?"custom":z,Z=e.useRef(null),H=e.useRef(null),V=e.useRef(null),_=e.useRef(null),B=e.useState(M),R=B[0],T=B[1],A=e.useState(null),q=A[0],O=A[1],P=e.useState(0),W=P[0],F=P[1],I=e.useState(!1),D=I[0],G=I[1],J=function(){var n=e.useState(0),t=n[0],r=n[1];return e.useLayoutEffect((function(){var n=new ResizeObserver((function(n){r(n[0].contentRect.width)}));return n.observe(document.body),function(){n.disconnect()}}),[]),{observerWidth:t}}().observerWidth,K=L[0],Q=L[1],U=J*y,X=Math.min(1200,f),Y=v?C?Math.min(U,v):v:Math.min(U,X),$=Y*K/Q;return e.useEffect((function(){u?(document.body.style.overflow="hidden",H.current&&"video"===S&&(M&&H.current.play(),H.current.addEventListener("loadeddata",(function(n){O(n.target.duration)})),H.current.addEventListener("timeupdate",(function(n){var e=n.target.currentTime;F(e)})))):document.body.style.overflow="unset"}),[u]),e.useEffect((function(){_.current&&q&&(_.current.style.backgroundSize="".concat(100*W/q,"% ").concat(100,"%"),_.current.value=W.toString())}),[W]),e.useEffect((function(){var n=function(n){27===n.keyCode&&h()},e=function(n){var e;(null===(e=null==Z?void 0:Z.current)||void 0===e?void 0:e.contains(n.target))||h()};return document.addEventListener("mousedown",e),document.addEventListener("keydown",n),function(){document.removeEventListener("mousedown",e),document.removeEventListener("keydown",n)}}),[h]),u?n.jsx(n.Fragment,{children:t.createPortal(n.jsx("div",{className:"modal-overlay",children:n.jsxs("div",{className:"".concat(m?"modal-container":"no-header"),ref:Z,children:[m?n.jsx(n.Fragment,{children:n.jsxs("div",{className:"modal-header-container",children:[n.jsx("div",{className:"modal-header",children:m}),n.jsx(r,{primary:!0,onClosed:h})]})}):n.jsx("div",{className:"no-header-btn",children:n.jsx(r,{onClosed:h})}),n.jsx("div",{className:"modal-body",style:{height:Math.floor($),width:Y},children:"video"===S?n.jsxs("div",{className:"video-frame",style:{height:Math.floor($)},children:[n.jsx("video",{controls:"default"===E||"custom"!==E&&"hidden"!==E,ref:H,width:Y,children:n.jsx("source",{src:p,type:"video/mp4"})}),"custom"===E&&n.jsxs("div",{className:"controls",children:[n.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"6px",paddingLeft:"6px"},children:[R?n.jsx("button",{className:"start","aria-label":"play pause toggle",onClick:function(){H.current&&H.current.pause(),T(!1)},children:n.jsx(i,{})}):n.jsx("button",{className:"start","aria-label":"play pause toggle",onClick:function(){H.current&&H.current.play(),T(!0)},children:n.jsx(o,{})}),n.jsxs("span",{className:"time",children:["".concat(Math.floor(W/60)," : ").concat(Math.floor(W%60))," ","/"," ",q&&!isNaN(q)?"".concat(Math.floor(q/60)," : ").concat(Math.floor(q%60)):""]})]}),n.jsx("div",{style:{paddingLeft:"10px",flex:"1 1 auto",width:"100%",height:"100%"},children:q&&n.jsx("input",{ref:_,type:"range",min:0,max:q,step:.1,onChange:function(n){if(H.current&&_.current){var e=Number(n.target.value);H.current.currentTime=e,_.current.style.backgroundSize="".concat(100*e/q,"% ").concat(100,"%")}}})}),D?n.jsx("button",{className:"start","aria-label":"muted not muted toggle",onClick:function(){H.current&&V.current&&(H.current.muted=!1,G(!1),V.current.value="0.5",V.current.style.backgroundSize="".concat(50,"% ").concat(100,"%"))},children:n.jsx(a,{})}):n.jsx("button",{className:"start","aria-label":"muted not muted toggle",onClick:function(){H.current&&V.current&&(H.current.muted=!0,G(!0),V.current.value="0",V.current.style.backgroundSize="".concat(0,"% ").concat(100,"%"))},children:n.jsx(d,{})}),n.jsx("div",{className:"volumn",children:n.jsx("input",{ref:V,type:"range",min:0,max:1,step:.1,disabled:D,onChange:function(n){if(H.current&&V.current){var e=Number(n.target.value);H.current.volume=e,V.current.style.backgroundSize="".concat(100*e,"% ").concat(100,"%")}}})})]})]}):n.jsx("iframe",{title:g,width:Y,height:$,src:p,allow:"".concat(M&&"autoplay")})})]})}),document.body)}):null},exports.useToggle=function(){var n=e.useState(!1),t=n[0],r=n[1],o=e.useCallback((function(){r(!t)}),[r]),i=e.useCallback((function(){r(!1)}),[r]);return{isOpen:t,toggle:o,close:i}};