diff --git a/404.html b/404.html index 3926b5d..3ebf2ec 100644 --- a/404.html +++ b/404.html @@ -5,13 +5,13 @@ Page Not Found | React Video Modal - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/assets/js/3021cf83.a009de27.js b/assets/js/3021cf83.a009de27.js deleted file mode 100644 index 91d7043..0000000 --- a/assets/js/3021cf83.a009de27.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 3021cf83.a009de27.js.LICENSE.txt */ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[538],{4393:(e,t,n)=>{var r=n(6298),o=Symbol.for("react.element"),a=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,u=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var r,a={},l=null,c=null;for(r in void 0!==n&&(l=""+n),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(c=t.ref),t)i.call(t,r)&&!s.hasOwnProperty(r)&&(a[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===a[r]&&(a[r]=t[r]);return{$$typeof:o,type:e,key:l,ref:c,props:a,_owner:u.current}}t.Fragment=a,t.jsx=l,t.jsxs=l},8501:(e,t)=>{var n=Symbol.for("react.element"),r=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),u=Symbol.for("react.provider"),s=Symbol.for("react.context"),l=Symbol.for("react.forward_ref"),c=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),f=Symbol.for("react.lazy"),p=Symbol.iterator;var m={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},y=Object.assign,h={};function v(e,t,n){this.props=e,this.context=t,this.refs=h,this.updater=n||m}function g(){}function b(e,t,n){this.props=e,this.context=t,this.refs=h,this.updater=n||m}v.prototype.isReactComponent={},v.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},v.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},g.prototype=v.prototype;var k=b.prototype=new g;k.constructor=b,y(k,v.prototype),k.isPureReactComponent=!0;var _=Array.isArray,w=Object.prototype.hasOwnProperty,x={current:null},C={key:!0,ref:!0,__self:!0,__source:!0};function S(e,t,r){var o,a={},i=null,u=null;if(null!=t)for(o in void 0!==t.ref&&(u=t.ref),void 0!==t.key&&(i=""+t.key),t)w.call(t,o)&&!C.hasOwnProperty(o)&&(a[o]=t[o]);var s=arguments.length-2;if(1===s)a.children=r;else if(1{e.exports=n(8501)},8530:(e,t,n)=>{e.exports=n(4393)},5253:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>y,contentTitle:()=>p,default:()=>b,frontMatter:()=>f,metadata:()=>m,toc:()=>h});var r=n(7462),o=n(911),a=n(3905);const i='import React from \'react\';\nimport {ModalVideo, useToggle} from \'@baskvava/react-video-modal\';\n\nfunction Basic() {\n const {isOpen, toggle, close} = useToggle();\n\n return (\n
\n

Video Modal with Header

\n \n\n \n
\n );\n}\n\nexport default Basic;\n',u='import React from \'react\';\nimport {ModalVideo, useToggle} from \'@baskvava/react-video-modal\';\n\nfunction BasicNoHeader() {\n const {isOpen, toggle, close} = useToggle();\n\n return (\n
\n

Basic Video Modal

\n \n {/* highlight-start */}\n \n {/* highlight-end */}\n
\n );\n}\n\nexport default BasicNoHeader;\n';var s=n(5961);const l=function(){const{isOpen:e,toggle:t,close:n}=(0,s.O)();return o.createElement("div",null,o.createElement("h2",null,"Video Modal with Header"),o.createElement("button",{onClick:t,className:"v-btn"},"Click Me to Open Video Modal"),o.createElement(s.W,{title:"video",header:"This is my first video",width:800,isOpen:e,onClosed:n,url:"https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"}))};const c=function(){const{isOpen:e,toggle:t,close:n}=(0,s.O)();return o.createElement("div",null,o.createElement("h2",null,"Basic Video Modal"),o.createElement("button",{onClick:t,className:"v-btn"},"Click Me to Open Video Modal"),o.createElement(s.W,{title:"video",width:800,isOpen:e,onClosed:n,url:"https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"}))};var d=n(9586);const f={},p="Getting Started",m={unversionedId:"getting-started",id:"getting-started",title:"Getting Started",description:"Install",source:"@site/docs/getting-started.mdx",sourceDirName:".",slug:"/getting-started",permalink:"/react-video-modal/docs/getting-started",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/getting-started.mdx",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Hooks",permalink:"/react-video-modal/docs/apis"},next:{title:"Hooks",permalink:"/react-video-modal/docs/hooks"}},y={},h=[{value:"Install",id:"install",level:2},{value:"Usage",id:"usage",level:2}],v={toc:h},g="wrapper";function b(e){let{components:t,...n}=e;return(0,a.kt)(g,(0,r.Z)({},v,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"getting-started"},"Getting Started"),(0,a.kt)("h2",{id:"install"},"Install"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"npm install @baskvava/react-video-modal\n")),(0,a.kt)("p",null,"or"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"yarn add @baskvava/react-video-modal\n")),(0,a.kt)("h2",{id:"usage"},"Usage"),(0,a.kt)(c,{mdxType:"BasicNoHeader"}),(0,a.kt)(d.Z,{language:"jsx",title:"/src/components/GettingStarter/BasicNoHeader.jsx",mdxType:"CodeBlock"},u),(0,a.kt)(l,{mdxType:"Basic"}),(0,a.kt)(d.Z,{language:"jsx",title:"/src/components/GettingStarter/Basic.jsx",mdxType:"CodeBlock"},i))}b.isMDXComponent=!0},5961:(e,t,n)=>{n.d(t,{O:()=>u,W:()=>i});var r=n(8530),o=n(911),a=n(7234);function i(e){var t,n,i,u=e.isOpen,s=void 0!==u&&u,l=e.onClosed,c=e.url,d=e.title,f=e.header,p=e.width,m=e.widthRatio,y=void 0===m?.8:m,h=e.ratio,v=void 0===h?[9,16]:h,g=e.autoPlay,b=void 0===g||g,k=(0,o.useRef)(null),_=(t=(0,o.useState)(0),n=t[0],i=t[1],(0,o.useLayoutEffect)((function(){var e=new ResizeObserver((function(e){i(e[0].contentRect.width)}));return e.observe(document.body),function(){e.disconnect()}}),[]),{observerWidth:n}).observerWidth,w=v[0],x=v[1],C=_*y,S=null!=p?p:Math.min(C*y,1200),E=S*w/x;return(0,o.useLayoutEffect)((function(){document.body.style.overflow=s?"hidden":"unset"}),[s]),(0,o.useEffect)((function(){var e=function(e){27===e.keyCode&&l()},t=function(e){var t;(null===(t=null==k?void 0:k.current)||void 0===t?void 0:t.contains(e.target))||l()};return document.addEventListener("mousedown",t),document.addEventListener("keydown",e),function(){document.removeEventListener("mousedown",t),document.removeEventListener("keydown",e)}}),[l]),s?(0,r.jsx)(r.Fragment,{children:(0,a.createPortal)((0,r.jsx)("div",{className:"modal-overlay",children:(0,r.jsxs)("div",{className:"modal-container",ref:k,children:[f&&(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)("div",{className:"modal-header-container",children:[(0,r.jsx)("div",{className:"modal-header",children:f}),(0,r.jsx)("button",{onClick:l,children:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",width:"20",height:"20",viewBox:"0 0 30 30",children:(0,r.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"})})})]})}),(0,r.jsx)("div",{className:"modal-body",style:{height:Math.floor(E),width:S},children:(0,r.jsx)("iframe",{title:d,width:S,height:E,src:c,allow:"".concat(b&&"autoplay")})})]})}),document.body)}):null}function u(){var e=(0,o.useState)(!1),t=e[0],n=e[1],r=(0,o.useCallback)((function(){n(!t)}),[n]),a=(0,o.useCallback)((function(){n(!1)}),[n]);return{isOpen:t,toggle:r,close:a}}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".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\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.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-header-container button:hover {\n cursor: pointer;\n}\n\n.modal-body {\n width: 100%;\n}\n\niframe {\n border: none;\n}\n")}}]); \ No newline at end of file diff --git a/assets/js/3021cf83.ce7b54c8.js b/assets/js/3021cf83.ce7b54c8.js new file mode 100644 index 0000000..2a62363 --- /dev/null +++ b/assets/js/3021cf83.ce7b54c8.js @@ -0,0 +1,2 @@ +/*! For license information please see 3021cf83.ce7b54c8.js.LICENSE.txt */ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[538],{4393:(e,t,n)=>{var r=n(6298),o=Symbol.for("react.element"),a=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,s=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,u={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var r,a={},l=null,c=null;for(r in void 0!==n&&(l=""+n),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(c=t.ref),t)i.call(t,r)&&!u.hasOwnProperty(r)&&(a[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===a[r]&&(a[r]=t[r]);return{$$typeof:o,type:e,key:l,ref:c,props:a,_owner:s.current}}t.Fragment=a,t.jsx=l,t.jsxs=l},8501:(e,t)=>{var n=Symbol.for("react.element"),r=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),s=Symbol.for("react.provider"),u=Symbol.for("react.context"),l=Symbol.for("react.forward_ref"),c=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),f=Symbol.for("react.lazy"),p=Symbol.iterator;var m={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},h=Object.assign,y={};function v(e,t,n){this.props=e,this.context=t,this.refs=y,this.updater=n||m}function g(){}function b(e,t,n){this.props=e,this.context=t,this.refs=y,this.updater=n||m}v.prototype.isReactComponent={},v.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},v.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},g.prototype=v.prototype;var k=b.prototype=new g;k.constructor=b,h(k,v.prototype),k.isPureReactComponent=!0;var _=Array.isArray,x=Object.prototype.hasOwnProperty,C={current:null},w={key:!0,ref:!0,__self:!0,__source:!0};function S(e,t,r){var o,a={},i=null,s=null;if(null!=t)for(o in void 0!==t.ref&&(s=t.ref),void 0!==t.key&&(i=""+t.key),t)x.call(t,o)&&!w.hasOwnProperty(o)&&(a[o]=t[o]);var u=arguments.length-2;if(1===u)a.children=r;else if(1{e.exports=n(8501)},8530:(e,t,n)=>{e.exports=n(4393)},5253:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>h,contentTitle:()=>p,default:()=>b,frontMatter:()=>f,metadata:()=>m,toc:()=>y});var r=n(7462),o=n(911),a=n(3905);const i='import React from \'react\';\nimport {ModalVideo, useToggle} from \'@baskvava/react-video-modal\';\n\nfunction Basic() {\n const {isOpen, toggle, close} = useToggle();\n\n return (\n
\n

Video Modal with Header

\n \n\n \n
\n );\n}\n\nexport default Basic;\n',s='import React from \'react\';\nimport {ModalVideo, useToggle} from \'@baskvava/react-video-modal\';\n\nfunction BasicNoHeader() {\n const {isOpen, toggle, close} = useToggle();\n\n return (\n
\n

Basic Video Modal

\n \n {/* highlight-start */}\n \n {/* highlight-end */}\n
\n );\n}\n\nexport default BasicNoHeader;\n';var u=n(5961);const l=function(){const{isOpen:e,toggle:t,close:n}=(0,u.O)();return o.createElement("div",null,o.createElement("h2",null,"Video Modal with Header"),o.createElement("button",{onClick:t,className:"v-btn"},"Click Me to Open Video Modal"),o.createElement(u.W,{title:"video",header:"This is my first video",width:800,isOpen:e,onClosed:n,url:"https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"}))};const c=function(){const{isOpen:e,toggle:t,close:n}=(0,u.O)();return o.createElement("div",null,o.createElement("h2",null,"Basic Video Modal"),o.createElement("button",{onClick:t,className:"v-btn"},"Click Me to Open Video Modal"),o.createElement(u.W,{title:"video",width:800,isOpen:e,onClosed:n,url:"https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"}))};var d=n(9586);const f={},p="Getting Started",m={unversionedId:"getting-started",id:"getting-started",title:"Getting Started",description:"Install",source:"@site/docs/getting-started.mdx",sourceDirName:".",slug:"/getting-started",permalink:"/react-video-modal/docs/getting-started",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/getting-started.mdx",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Hooks",permalink:"/react-video-modal/docs/apis"},next:{title:"Hooks",permalink:"/react-video-modal/docs/hooks"}},h={},y=[{value:"Install",id:"install",level:2},{value:"Usage",id:"usage",level:2}],v={toc:y},g="wrapper";function b(e){let{components:t,...n}=e;return(0,a.kt)(g,(0,r.Z)({},v,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h1",{id:"getting-started"},"Getting Started"),(0,a.kt)("h2",{id:"install"},"Install"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"npm install @baskvava/react-video-modal\n")),(0,a.kt)("p",null,"or"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"yarn add @baskvava/react-video-modal\n")),(0,a.kt)("h2",{id:"usage"},"Usage"),(0,a.kt)(c,{mdxType:"BasicNoHeader"}),(0,a.kt)(d.Z,{language:"jsx",title:"/src/components/GettingStarter/BasicNoHeader.jsx",mdxType:"CodeBlock"},s),(0,a.kt)(l,{mdxType:"Basic"}),(0,a.kt)(d.Z,{language:"jsx",title:"/src/components/GettingStarter/Basic.jsx",mdxType:"CodeBlock"},i))}b.isMDXComponent=!0},5961:(e,t,n)=>{n.d(t,{O:()=>u,W:()=>s});var r=n(8530),o=n(911),a=n(7234);function i(e){var t=e.onClosed,n=e.primary;return(0,r.jsx)("button",{onClick:t,children:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",width:"20",height:"20",viewBox:"0 0 30 30",fill:"".concat(void 0!==n&&n?"#000000":"#ffffff"),children:(0,r.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 s(e){var t,n,s,u=e.isOpen,l=void 0!==u&&u,c=e.onClosed,d=e.url,f=e.title,p=e.header,m=e.width,h=e.widthRatio,y=void 0===h?.8:h,v=e.ratio,g=void 0===v?[9,16]:v,b=e.autoPlay,k=void 0===b||b,_=(0,o.useRef)(null),x=(t=(0,o.useState)(0),n=t[0],s=t[1],(0,o.useLayoutEffect)((function(){var e=new ResizeObserver((function(e){s(e[0].contentRect.width)}));return e.observe(document.body),function(){e.disconnect()}}),[]),{observerWidth:n}).observerWidth,C=g[0],w=g[1],S=x*y,E=null!=m?m:Math.min(S*y,1200),O=E*C/w;return(0,o.useLayoutEffect)((function(){document.body.style.overflow=l?"hidden":"unset"}),[l]),(0,o.useEffect)((function(){var e=function(e){27===e.keyCode&&c()},t=function(e){var t;(null===(t=null==_?void 0:_.current)||void 0===t?void 0:t.contains(e.target))||c()};return document.addEventListener("mousedown",t),document.addEventListener("keydown",e),function(){document.removeEventListener("mousedown",t),document.removeEventListener("keydown",e)}}),[c]),l?(0,r.jsx)(r.Fragment,{children:(0,a.createPortal)((0,r.jsx)("div",{className:"modal-overlay",children:(0,r.jsxs)("div",{className:"".concat(p?"modal-container":"no-header"),ref:_,children:[p?(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)("div",{className:"modal-header-container",children:[(0,r.jsx)("div",{className:"modal-header",children:p}),(0,r.jsx)(i,{primary:!0,onClosed:c})]})}):(0,r.jsx)("div",{className:"no-header-btn",children:(0,r.jsx)(i,{onClosed:c})}),(0,r.jsx)("div",{className:"modal-body",style:{height:Math.floor(O),width:E},children:(0,r.jsx)("iframe",{title:f,width:E,height:O,src:d,allow:"".concat(k&&"autoplay")})})]})}),document.body)}):null}function u(){var e=(0,o.useState)(!1),t=e[0],n=e[1],r=(0,o.useCallback)((function(){n(!t)}),[n]),a=(0,o.useCallback)((function(){n(!1)}),[n]);return{isOpen:t,toggle:r,close:a}}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".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\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")}}]); \ No newline at end of file diff --git a/assets/js/3021cf83.a009de27.js.LICENSE.txt b/assets/js/3021cf83.ce7b54c8.js.LICENSE.txt similarity index 100% rename from assets/js/3021cf83.a009de27.js.LICENSE.txt rename to assets/js/3021cf83.ce7b54c8.js.LICENSE.txt diff --git a/assets/js/8109b53a.0d161250.js b/assets/js/8109b53a.0d161250.js new file mode 100644 index 0000000..4dc0dd8 --- /dev/null +++ b/assets/js/8109b53a.0d161250.js @@ -0,0 +1,2 @@ +/*! For license information please see 8109b53a.0d161250.js.LICENSE.txt */ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[180],{4393:(e,t,n)=>{var o=n(6298),r=Symbol.for("react.element"),a=Symbol.for("react.fragment"),u=Object.prototype.hasOwnProperty,i=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var o,a={},l=null,c=null;for(o in void 0!==n&&(l=""+n),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(c=t.ref),t)u.call(t,o)&&!s.hasOwnProperty(o)&&(a[o]=t[o]);if(e&&e.defaultProps)for(o in t=e.defaultProps)void 0===a[o]&&(a[o]=t[o]);return{$$typeof:r,type:e,key:l,ref:c,props:a,_owner:i.current}}t.Fragment=a,t.jsx=l,t.jsxs=l},8501:(e,t)=>{var n=Symbol.for("react.element"),o=Symbol.for("react.portal"),r=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),u=Symbol.for("react.profiler"),i=Symbol.for("react.provider"),s=Symbol.for("react.context"),l=Symbol.for("react.forward_ref"),c=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),f=Symbol.for("react.lazy"),p=Symbol.iterator;var h={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},m=Object.assign,y={};function g(e,t,n){this.props=e,this.context=t,this.refs=y,this.updater=n||h}function v(){}function b(e,t,n){this.props=e,this.context=t,this.refs=y,this.updater=n||h}g.prototype.isReactComponent={},g.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},g.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},v.prototype=g.prototype;var k=b.prototype=new v;k.constructor=b,m(k,g.prototype),k.isPureReactComponent=!0;var _=Array.isArray,x=Object.prototype.hasOwnProperty,w={current:null},C={key:!0,ref:!0,__self:!0,__source:!0};function E(e,t,o){var r,a={},u=null,i=null;if(null!=t)for(r in void 0!==t.ref&&(i=t.ref),void 0!==t.key&&(u=""+t.key),t)x.call(t,r)&&!C.hasOwnProperty(r)&&(a[r]=t[r]);var s=arguments.length-2;if(1===s)a.children=o;else if(1{e.exports=n(8501)},8530:(e,t,n)=>{e.exports=n(4393)},3709:(e,t,n)=>{n.d(t,{Z:()=>a});var o=n(911),r=n(5961);const a=function(){const{isOpen:e,toggle:t,close:n}=(0,r.O)();return o.createElement("div",null,o.createElement("h2",null,"UseToogle Example"),o.createElement("button",{onClick:t,className:"v-btn"},"Click Me to Open Video Modal"),o.createElement(r.W,{title:"video",header:"useToggle",width:800,isOpen:e,onClosed:n,url:"https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"}))}},9260:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>m,frontMatter:()=>s,metadata:()=>c,toc:()=>f});var o=n(7462),r=(n(911),n(3905)),a=n(6203),u=n(3709),i=n(9586);const s={},l="Hooks",c={unversionedId:"apis",id:"apis",title:"Hooks",description:"We provide the following custom hooks for easily use toggle and manage its state",source:"@site/docs/apis.mdx",sourceDirName:".",slug:"/apis",permalink:"/react-video-modal/docs/apis",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/apis.mdx",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",next:{title:"Getting Started",permalink:"/react-video-modal/docs/getting-started"}},d={},f=[{value:"UseToogle",id:"usetoogle",level:2},{value:"Usage",id:"usage",level:2}],p={toc:f},h="wrapper";function m(e){let{components:t,...n}=e;return(0,r.kt)(h,(0,o.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"hooks"},"Hooks"),(0,r.kt)("p",null,"We provide the following custom hooks for easily use toggle and manage its state"),(0,r.kt)("h2",{id:"usetoogle"},"UseToogle"),(0,r.kt)("p",null,"We provide the powerful custom hook to control the modal close/open state"),(0,r.kt)("p",null,"Here is the inerface of useToggle return type"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-jsx"},"interface UseToggleReturnType {\n isOpen: boolean; // default is false\n toggle: () => void; // toggle isOpen\n close: () => void; // close the modal, always set isOpen as false\n}\n")),(0,r.kt)("h2",{id:"usage"},"Usage"),(0,r.kt)(u.Z,{mdxType:"UseToggle"}),(0,r.kt)(i.Z,{language:"jsx",title:"/src/components/hooks/UseToggle.jsx",mdxType:"CodeBlock"},a.Z))}m.isMDXComponent=!0},6203:(e,t,n)=>{n.d(t,{Z:()=>o});const o='import React from \'react\';\nimport {ModalVideo, useToggle} from \'@baskvava/react-video-modal\';\n\nfunction UseToogle() {\n // highlight-start\n const {isOpen, toggle, close} = useToggle();\n // highlight-end\n\n return (\n
\n

UseToogle Example

\n \n Click Me to Open Video Modal\n \n \n
\n );\n}\n\nexport default UseToogle;\n'},5961:(e,t,n)=>{n.d(t,{O:()=>s,W:()=>i});var o=n(8530),r=n(911),a=n(7234);function u(e){var t=e.onClosed,n=e.primary;return(0,o.jsx)("button",{onClick:t,children:(0,o.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",width:"20",height:"20",viewBox:"0 0 30 30",fill:"".concat(void 0!==n&&n?"#000000":"#ffffff"),children:(0,o.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 i(e){var t,n,i,s=e.isOpen,l=void 0!==s&&s,c=e.onClosed,d=e.url,f=e.title,p=e.header,h=e.width,m=e.widthRatio,y=void 0===m?.8:m,g=e.ratio,v=void 0===g?[9,16]:g,b=e.autoPlay,k=void 0===b||b,_=(0,r.useRef)(null),x=(t=(0,r.useState)(0),n=t[0],i=t[1],(0,r.useLayoutEffect)((function(){var e=new ResizeObserver((function(e){i(e[0].contentRect.width)}));return e.observe(document.body),function(){e.disconnect()}}),[]),{observerWidth:n}).observerWidth,w=v[0],C=v[1],E=x*y,S=null!=h?h:Math.min(E*y,1200),j=S*w/C;return(0,r.useLayoutEffect)((function(){document.body.style.overflow=l?"hidden":"unset"}),[l]),(0,r.useEffect)((function(){var e=function(e){27===e.keyCode&&c()},t=function(e){var t;(null===(t=null==_?void 0:_.current)||void 0===t?void 0:t.contains(e.target))||c()};return document.addEventListener("mousedown",t),document.addEventListener("keydown",e),function(){document.removeEventListener("mousedown",t),document.removeEventListener("keydown",e)}}),[c]),l?(0,o.jsx)(o.Fragment,{children:(0,a.createPortal)((0,o.jsx)("div",{className:"modal-overlay",children:(0,o.jsxs)("div",{className:"".concat(p?"modal-container":"no-header"),ref:_,children:[p?(0,o.jsx)(o.Fragment,{children:(0,o.jsxs)("div",{className:"modal-header-container",children:[(0,o.jsx)("div",{className:"modal-header",children:p}),(0,o.jsx)(u,{primary:!0,onClosed:c})]})}):(0,o.jsx)("div",{className:"no-header-btn",children:(0,o.jsx)(u,{onClosed:c})}),(0,o.jsx)("div",{className:"modal-body",style:{height:Math.floor(j),width:S},children:(0,o.jsx)("iframe",{title:f,width:S,height:j,src:d,allow:"".concat(k&&"autoplay")})})]})}),document.body)}):null}function s(){var e=(0,r.useState)(!1),t=e[0],n=e[1],o=(0,r.useCallback)((function(){n(!t)}),[n]),a=(0,r.useCallback)((function(){n(!1)}),[n]);return{isOpen:t,toggle:o,close:a}}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".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\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")}}]); \ No newline at end of file diff --git a/assets/js/8109b53a.5ac76f78.js.LICENSE.txt b/assets/js/8109b53a.0d161250.js.LICENSE.txt similarity index 100% rename from assets/js/8109b53a.5ac76f78.js.LICENSE.txt rename to assets/js/8109b53a.0d161250.js.LICENSE.txt diff --git a/assets/js/8109b53a.5ac76f78.js b/assets/js/8109b53a.5ac76f78.js deleted file mode 100644 index 57b83f8..0000000 --- a/assets/js/8109b53a.5ac76f78.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! For license information please see 8109b53a.5ac76f78.js.LICENSE.txt */ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[180],{4393:(e,t,n)=>{var r=n(6298),o=Symbol.for("react.element"),a=Symbol.for("react.fragment"),u=Object.prototype.hasOwnProperty,i=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var r,a={},l=null,c=null;for(r in void 0!==n&&(l=""+n),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(c=t.ref),t)u.call(t,r)&&!s.hasOwnProperty(r)&&(a[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps)void 0===a[r]&&(a[r]=t[r]);return{$$typeof:o,type:e,key:l,ref:c,props:a,_owner:i.current}}t.Fragment=a,t.jsx=l,t.jsxs=l},8501:(e,t)=>{var n=Symbol.for("react.element"),r=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),u=Symbol.for("react.profiler"),i=Symbol.for("react.provider"),s=Symbol.for("react.context"),l=Symbol.for("react.forward_ref"),c=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),f=Symbol.for("react.lazy"),p=Symbol.iterator;var m={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},h=Object.assign,y={};function g(e,t,n){this.props=e,this.context=t,this.refs=y,this.updater=n||m}function v(){}function b(e,t,n){this.props=e,this.context=t,this.refs=y,this.updater=n||m}g.prototype.isReactComponent={},g.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},g.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},v.prototype=g.prototype;var k=b.prototype=new v;k.constructor=b,h(k,g.prototype),k.isPureReactComponent=!0;var _=Array.isArray,x=Object.prototype.hasOwnProperty,w={current:null},C={key:!0,ref:!0,__self:!0,__source:!0};function E(e,t,r){var o,a={},u=null,i=null;if(null!=t)for(o in void 0!==t.ref&&(i=t.ref),void 0!==t.key&&(u=""+t.key),t)x.call(t,o)&&!C.hasOwnProperty(o)&&(a[o]=t[o]);var s=arguments.length-2;if(1===s)a.children=r;else if(1{e.exports=n(8501)},8530:(e,t,n)=>{e.exports=n(4393)},3709:(e,t,n)=>{n.d(t,{Z:()=>a});var r=n(911),o=n(5961);const a=function(){const{isOpen:e,toggle:t,close:n}=(0,o.O)();return r.createElement("div",null,r.createElement("h2",null,"UseToogle Example"),r.createElement("button",{onClick:t,className:"v-btn"},"Click Me to Open Video Modal"),r.createElement(o.W,{title:"video",header:"useToggle",width:800,isOpen:e,onClosed:n,url:"https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"}))}},9260:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>h,frontMatter:()=>s,metadata:()=>c,toc:()=>f});var r=n(7462),o=(n(911),n(3905)),a=n(6203),u=n(3709),i=n(9586);const s={},l="Hooks",c={unversionedId:"apis",id:"apis",title:"Hooks",description:"We provide the following custom hooks for easily use toggle and manage its state",source:"@site/docs/apis.mdx",sourceDirName:".",slug:"/apis",permalink:"/react-video-modal/docs/apis",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/apis.mdx",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",next:{title:"Getting Started",permalink:"/react-video-modal/docs/getting-started"}},d={},f=[{value:"UseToogle",id:"usetoogle",level:2},{value:"Usage",id:"usage",level:2}],p={toc:f},m="wrapper";function h(e){let{components:t,...n}=e;return(0,o.kt)(m,(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"hooks"},"Hooks"),(0,o.kt)("p",null,"We provide the following custom hooks for easily use toggle and manage its state"),(0,o.kt)("h2",{id:"usetoogle"},"UseToogle"),(0,o.kt)("p",null,"We provide the powerful custom hook to control the modal close/open state"),(0,o.kt)("p",null,"Here is the inerface of useToggle return type"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx"},"interface UseToggleReturnType {\n isOpen: boolean; // default is false\n toggle: () => void; // toggle isOpen\n close: () => void; // close the modal, always set isOpen as false\n}\n")),(0,o.kt)("h2",{id:"usage"},"Usage"),(0,o.kt)(u.Z,{mdxType:"UseToggle"}),(0,o.kt)(i.Z,{language:"jsx",title:"/src/components/hooks/UseToggle.jsx",mdxType:"CodeBlock"},a.Z))}h.isMDXComponent=!0},6203:(e,t,n)=>{n.d(t,{Z:()=>r});const r='import React from \'react\';\nimport {ModalVideo, useToggle} from \'@baskvava/react-video-modal\';\n\nfunction UseToogle() {\n // highlight-start\n const {isOpen, toggle, close} = useToggle();\n // highlight-end\n\n return (\n
\n

UseToogle Example

\n \n Click Me to Open Video Modal\n \n \n
\n );\n}\n\nexport default UseToogle;\n'},5961:(e,t,n)=>{n.d(t,{O:()=>i,W:()=>u});var r=n(8530),o=n(911),a=n(7234);function u(e){var t,n,u,i=e.isOpen,s=void 0!==i&&i,l=e.onClosed,c=e.url,d=e.title,f=e.header,p=e.width,m=e.widthRatio,h=void 0===m?.8:m,y=e.ratio,g=void 0===y?[9,16]:y,v=e.autoPlay,b=void 0===v||v,k=(0,o.useRef)(null),_=(t=(0,o.useState)(0),n=t[0],u=t[1],(0,o.useLayoutEffect)((function(){var e=new ResizeObserver((function(e){u(e[0].contentRect.width)}));return e.observe(document.body),function(){e.disconnect()}}),[]),{observerWidth:n}).observerWidth,x=g[0],w=g[1],C=_*h,E=null!=p?p:Math.min(C*h,1200),S=E*x/w;return(0,o.useLayoutEffect)((function(){document.body.style.overflow=s?"hidden":"unset"}),[s]),(0,o.useEffect)((function(){var e=function(e){27===e.keyCode&&l()},t=function(e){var t;(null===(t=null==k?void 0:k.current)||void 0===t?void 0:t.contains(e.target))||l()};return document.addEventListener("mousedown",t),document.addEventListener("keydown",e),function(){document.removeEventListener("mousedown",t),document.removeEventListener("keydown",e)}}),[l]),s?(0,r.jsx)(r.Fragment,{children:(0,a.createPortal)((0,r.jsx)("div",{className:"modal-overlay",children:(0,r.jsxs)("div",{className:"modal-container",ref:k,children:[f&&(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)("div",{className:"modal-header-container",children:[(0,r.jsx)("div",{className:"modal-header",children:f}),(0,r.jsx)("button",{onClick:l,children:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",width:"20",height:"20",viewBox:"0 0 30 30",children:(0,r.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"})})})]})}),(0,r.jsx)("div",{className:"modal-body",style:{height:Math.floor(S),width:E},children:(0,r.jsx)("iframe",{title:d,width:E,height:S,src:c,allow:"".concat(b&&"autoplay")})})]})}),document.body)}):null}function i(){var e=(0,o.useState)(!1),t=e[0],n=e[1],r=(0,o.useCallback)((function(){n(!t)}),[n]),a=(0,o.useCallback)((function(){n(!1)}),[n]);return{isOpen:t,toggle:r,close:a}}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".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\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.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-header-container button:hover {\n cursor: pointer;\n}\n\n.modal-body {\n width: 100%;\n}\n\niframe {\n border: none;\n}\n")}}]); \ No newline at end of file diff --git a/assets/js/9967cc6c.59fbb227.js b/assets/js/9967cc6c.2490bd4c.js similarity index 51% rename from assets/js/9967cc6c.59fbb227.js rename to assets/js/9967cc6c.2490bd4c.js index 1bcda08..980f550 100644 --- a/assets/js/9967cc6c.59fbb227.js +++ b/assets/js/9967cc6c.2490bd4c.js @@ -1,2 +1,2 @@ -/*! For license information please see 9967cc6c.59fbb227.js.LICENSE.txt */ -"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[73],{4393:(e,t,n)=>{var o=n(6298),r=Symbol.for("react.element"),u=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,i=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var o,u={},l=null,c=null;for(o in void 0!==n&&(l=""+n),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(c=t.ref),t)a.call(t,o)&&!s.hasOwnProperty(o)&&(u[o]=t[o]);if(e&&e.defaultProps)for(o in t=e.defaultProps)void 0===u[o]&&(u[o]=t[o]);return{$$typeof:r,type:e,key:l,ref:c,props:u,_owner:i.current}}t.Fragment=u,t.jsx=l,t.jsxs=l},8501:(e,t)=>{var n=Symbol.for("react.element"),o=Symbol.for("react.portal"),r=Symbol.for("react.fragment"),u=Symbol.for("react.strict_mode"),a=Symbol.for("react.profiler"),i=Symbol.for("react.provider"),s=Symbol.for("react.context"),l=Symbol.for("react.forward_ref"),c=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),f=Symbol.for("react.lazy"),p=Symbol.iterator;var h={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},m=Object.assign,y={};function g(e,t,n){this.props=e,this.context=t,this.refs=y,this.updater=n||h}function v(){}function b(e,t,n){this.props=e,this.context=t,this.refs=y,this.updater=n||h}g.prototype.isReactComponent={},g.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},g.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},v.prototype=g.prototype;var k=b.prototype=new v;k.constructor=b,m(k,g.prototype),k.isPureReactComponent=!0;var _=Array.isArray,w=Object.prototype.hasOwnProperty,x={current:null},C={key:!0,ref:!0,__self:!0,__source:!0};function E(e,t,o){var r,u={},a=null,i=null;if(null!=t)for(r in void 0!==t.ref&&(i=t.ref),void 0!==t.key&&(a=""+t.key),t)w.call(t,r)&&!C.hasOwnProperty(r)&&(u[r]=t[r]);var s=arguments.length-2;if(1===s)u.children=o;else if(1{e.exports=n(8501)},8530:(e,t,n)=>{e.exports=n(4393)},3709:(e,t,n)=>{n.d(t,{Z:()=>u});var o=n(911),r=n(5961);const u=function(){const{isOpen:e,toggle:t,close:n}=(0,r.O)();return o.createElement("div",null,o.createElement("h2",null,"UseToogle Example"),o.createElement("button",{onClick:t,className:"v-btn"},"Click Me to Open Video Modal"),o.createElement(r.W,{title:"video",header:"useToggle",width:800,isOpen:e,onClosed:n,url:"https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"}))}},4069:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>m,frontMatter:()=>s,metadata:()=>c,toc:()=>f});var o=n(7462),r=(n(911),n(3905)),u=n(6203),a=n(3709),i=n(9586);const s={},l="Hooks",c={unversionedId:"hooks",id:"hooks",title:"Hooks",description:"We provide the following custom hooks for easily use toggle and manage its state",source:"@site/docs/hooks.mdx",sourceDirName:".",slug:"/hooks",permalink:"/react-video-modal/docs/hooks",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/hooks.mdx",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Getting Started",permalink:"/react-video-modal/docs/getting-started"}},d={},f=[{value:"UseToogle",id:"usetoogle",level:2},{value:"Usage",id:"usage",level:2}],p={toc:f},h="wrapper";function m(e){let{components:t,...n}=e;return(0,r.kt)(h,(0,o.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"hooks"},"Hooks"),(0,r.kt)("p",null,"We provide the following custom hooks for easily use toggle and manage its state"),(0,r.kt)("h2",{id:"usetoogle"},"UseToogle"),(0,r.kt)("p",null,"We provide the powerful custom hook to control the modal close/open state"),(0,r.kt)("p",null,"Here is the inerface of useToggle return type"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-jsx"},"interface UseToggleReturnType {\n isOpen: boolean; // default is false\n toggle: () => void; // toggle isOpen\n close: () => void; // close the modal, always set isOpen as false\n}\n")),(0,r.kt)("h2",{id:"usage"},"Usage"),(0,r.kt)(a.Z,{mdxType:"UseToggle"}),(0,r.kt)(i.Z,{language:"jsx",title:"/src/components/hooks/UseToggle.jsx",mdxType:"CodeBlock"},u.Z))}m.isMDXComponent=!0},6203:(e,t,n)=>{n.d(t,{Z:()=>o});const o='import React from \'react\';\nimport {ModalVideo, useToggle} from \'@baskvava/react-video-modal\';\n\nfunction UseToogle() {\n // highlight-start\n const {isOpen, toggle, close} = useToggle();\n // highlight-end\n\n return (\n
\n

UseToogle Example

\n \n Click Me to Open Video Modal\n \n \n
\n );\n}\n\nexport default UseToogle;\n'},5961:(e,t,n)=>{n.d(t,{O:()=>i,W:()=>a});var o=n(8530),r=n(911),u=n(7234);function a(e){var t,n,a,i=e.isOpen,s=void 0!==i&&i,l=e.onClosed,c=e.url,d=e.title,f=e.header,p=e.width,h=e.widthRatio,m=void 0===h?.8:h,y=e.ratio,g=void 0===y?[9,16]:y,v=e.autoPlay,b=void 0===v||v,k=(0,r.useRef)(null),_=(t=(0,r.useState)(0),n=t[0],a=t[1],(0,r.useLayoutEffect)((function(){var e=new ResizeObserver((function(e){a(e[0].contentRect.width)}));return e.observe(document.body),function(){e.disconnect()}}),[]),{observerWidth:n}).observerWidth,w=g[0],x=g[1],C=_*m,E=null!=p?p:Math.min(C*m,1200),S=E*w/x;return(0,r.useLayoutEffect)((function(){document.body.style.overflow=s?"hidden":"unset"}),[s]),(0,r.useEffect)((function(){var e=function(e){27===e.keyCode&&l()},t=function(e){var t;(null===(t=null==k?void 0:k.current)||void 0===t?void 0:t.contains(e.target))||l()};return document.addEventListener("mousedown",t),document.addEventListener("keydown",e),function(){document.removeEventListener("mousedown",t),document.removeEventListener("keydown",e)}}),[l]),s?(0,o.jsx)(o.Fragment,{children:(0,u.createPortal)((0,o.jsx)("div",{className:"modal-overlay",children:(0,o.jsxs)("div",{className:"modal-container",ref:k,children:[f&&(0,o.jsx)(o.Fragment,{children:(0,o.jsxs)("div",{className:"modal-header-container",children:[(0,o.jsx)("div",{className:"modal-header",children:f}),(0,o.jsx)("button",{onClick:l,children:(0,o.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",width:"20",height:"20",viewBox:"0 0 30 30",children:(0,o.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"})})})]})}),(0,o.jsx)("div",{className:"modal-body",style:{height:Math.floor(S),width:E},children:(0,o.jsx)("iframe",{title:d,width:E,height:S,src:c,allow:"".concat(b&&"autoplay")})})]})}),document.body)}):null}function i(){var e=(0,r.useState)(!1),t=e[0],n=e[1],o=(0,r.useCallback)((function(){n(!t)}),[n]),u=(0,r.useCallback)((function(){n(!1)}),[n]);return{isOpen:t,toggle:o,close:u}}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".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\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.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-header-container button:hover {\n cursor: pointer;\n}\n\n.modal-body {\n width: 100%;\n}\n\niframe {\n border: none;\n}\n")}}]); \ No newline at end of file +/*! For license information please see 9967cc6c.2490bd4c.js.LICENSE.txt */ +"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[73],{4393:(e,t,n)=>{var o=n(6298),r=Symbol.for("react.element"),a=Symbol.for("react.fragment"),u=Object.prototype.hasOwnProperty,i=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var o,a={},l=null,c=null;for(o in void 0!==n&&(l=""+n),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(c=t.ref),t)u.call(t,o)&&!s.hasOwnProperty(o)&&(a[o]=t[o]);if(e&&e.defaultProps)for(o in t=e.defaultProps)void 0===a[o]&&(a[o]=t[o]);return{$$typeof:r,type:e,key:l,ref:c,props:a,_owner:i.current}}t.Fragment=a,t.jsx=l,t.jsxs=l},8501:(e,t)=>{var n=Symbol.for("react.element"),o=Symbol.for("react.portal"),r=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),u=Symbol.for("react.profiler"),i=Symbol.for("react.provider"),s=Symbol.for("react.context"),l=Symbol.for("react.forward_ref"),c=Symbol.for("react.suspense"),d=Symbol.for("react.memo"),f=Symbol.for("react.lazy"),p=Symbol.iterator;var h={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},m=Object.assign,y={};function g(e,t,n){this.props=e,this.context=t,this.refs=y,this.updater=n||h}function v(){}function b(e,t,n){this.props=e,this.context=t,this.refs=y,this.updater=n||h}g.prototype.isReactComponent={},g.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},g.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},v.prototype=g.prototype;var k=b.prototype=new v;k.constructor=b,m(k,g.prototype),k.isPureReactComponent=!0;var _=Array.isArray,x=Object.prototype.hasOwnProperty,w={current:null},C={key:!0,ref:!0,__self:!0,__source:!0};function E(e,t,o){var r,a={},u=null,i=null;if(null!=t)for(r in void 0!==t.ref&&(i=t.ref),void 0!==t.key&&(u=""+t.key),t)x.call(t,r)&&!C.hasOwnProperty(r)&&(a[r]=t[r]);var s=arguments.length-2;if(1===s)a.children=o;else if(1{e.exports=n(8501)},8530:(e,t,n)=>{e.exports=n(4393)},3709:(e,t,n)=>{n.d(t,{Z:()=>a});var o=n(911),r=n(5961);const a=function(){const{isOpen:e,toggle:t,close:n}=(0,r.O)();return o.createElement("div",null,o.createElement("h2",null,"UseToogle Example"),o.createElement("button",{onClick:t,className:"v-btn"},"Click Me to Open Video Modal"),o.createElement(r.W,{title:"video",header:"useToggle",width:800,isOpen:e,onClosed:n,url:"https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"}))}},4069:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>m,frontMatter:()=>s,metadata:()=>c,toc:()=>f});var o=n(7462),r=(n(911),n(3905)),a=n(6203),u=n(3709),i=n(9586);const s={},l="Hooks",c={unversionedId:"hooks",id:"hooks",title:"Hooks",description:"We provide the following custom hooks for easily use toggle and manage its state",source:"@site/docs/hooks.mdx",sourceDirName:".",slug:"/hooks",permalink:"/react-video-modal/docs/hooks",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/hooks.mdx",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Getting Started",permalink:"/react-video-modal/docs/getting-started"}},d={},f=[{value:"UseToogle",id:"usetoogle",level:2},{value:"Usage",id:"usage",level:2}],p={toc:f},h="wrapper";function m(e){let{components:t,...n}=e;return(0,r.kt)(h,(0,o.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"hooks"},"Hooks"),(0,r.kt)("p",null,"We provide the following custom hooks for easily use toggle and manage its state"),(0,r.kt)("h2",{id:"usetoogle"},"UseToogle"),(0,r.kt)("p",null,"We provide the powerful custom hook to control the modal close/open state"),(0,r.kt)("p",null,"Here is the inerface of useToggle return type"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-jsx"},"interface UseToggleReturnType {\n isOpen: boolean; // default is false\n toggle: () => void; // toggle isOpen\n close: () => void; // close the modal, always set isOpen as false\n}\n")),(0,r.kt)("h2",{id:"usage"},"Usage"),(0,r.kt)(u.Z,{mdxType:"UseToggle"}),(0,r.kt)(i.Z,{language:"jsx",title:"/src/components/hooks/UseToggle.jsx",mdxType:"CodeBlock"},a.Z))}m.isMDXComponent=!0},6203:(e,t,n)=>{n.d(t,{Z:()=>o});const o='import React from \'react\';\nimport {ModalVideo, useToggle} from \'@baskvava/react-video-modal\';\n\nfunction UseToogle() {\n // highlight-start\n const {isOpen, toggle, close} = useToggle();\n // highlight-end\n\n return (\n
\n

UseToogle Example

\n \n Click Me to Open Video Modal\n \n \n
\n );\n}\n\nexport default UseToogle;\n'},5961:(e,t,n)=>{n.d(t,{O:()=>s,W:()=>i});var o=n(8530),r=n(911),a=n(7234);function u(e){var t=e.onClosed,n=e.primary;return(0,o.jsx)("button",{onClick:t,children:(0,o.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",width:"20",height:"20",viewBox:"0 0 30 30",fill:"".concat(void 0!==n&&n?"#000000":"#ffffff"),children:(0,o.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 i(e){var t,n,i,s=e.isOpen,l=void 0!==s&&s,c=e.onClosed,d=e.url,f=e.title,p=e.header,h=e.width,m=e.widthRatio,y=void 0===m?.8:m,g=e.ratio,v=void 0===g?[9,16]:g,b=e.autoPlay,k=void 0===b||b,_=(0,r.useRef)(null),x=(t=(0,r.useState)(0),n=t[0],i=t[1],(0,r.useLayoutEffect)((function(){var e=new ResizeObserver((function(e){i(e[0].contentRect.width)}));return e.observe(document.body),function(){e.disconnect()}}),[]),{observerWidth:n}).observerWidth,w=v[0],C=v[1],E=x*y,S=null!=h?h:Math.min(E*y,1200),j=S*w/C;return(0,r.useLayoutEffect)((function(){document.body.style.overflow=l?"hidden":"unset"}),[l]),(0,r.useEffect)((function(){var e=function(e){27===e.keyCode&&c()},t=function(e){var t;(null===(t=null==_?void 0:_.current)||void 0===t?void 0:t.contains(e.target))||c()};return document.addEventListener("mousedown",t),document.addEventListener("keydown",e),function(){document.removeEventListener("mousedown",t),document.removeEventListener("keydown",e)}}),[c]),l?(0,o.jsx)(o.Fragment,{children:(0,a.createPortal)((0,o.jsx)("div",{className:"modal-overlay",children:(0,o.jsxs)("div",{className:"".concat(p?"modal-container":"no-header"),ref:_,children:[p?(0,o.jsx)(o.Fragment,{children:(0,o.jsxs)("div",{className:"modal-header-container",children:[(0,o.jsx)("div",{className:"modal-header",children:p}),(0,o.jsx)(u,{primary:!0,onClosed:c})]})}):(0,o.jsx)("div",{className:"no-header-btn",children:(0,o.jsx)(u,{onClosed:c})}),(0,o.jsx)("div",{className:"modal-body",style:{height:Math.floor(j),width:S},children:(0,o.jsx)("iframe",{title:f,width:S,height:j,src:d,allow:"".concat(k&&"autoplay")})})]})}),document.body)}):null}function s(){var e=(0,r.useState)(!1),t=e[0],n=e[1],o=(0,r.useCallback)((function(){n(!t)}),[n]),a=(0,r.useCallback)((function(){n(!1)}),[n]);return{isOpen:t,toggle:o,close:a}}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".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\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")}}]); \ No newline at end of file diff --git a/assets/js/9967cc6c.59fbb227.js.LICENSE.txt b/assets/js/9967cc6c.2490bd4c.js.LICENSE.txt similarity index 100% rename from assets/js/9967cc6c.59fbb227.js.LICENSE.txt rename to assets/js/9967cc6c.2490bd4c.js.LICENSE.txt diff --git a/assets/js/runtime~main.11e39501.js b/assets/js/runtime~main.7b0bcb3a.js similarity index 94% rename from assets/js/runtime~main.11e39501.js rename to assets/js/runtime~main.7b0bcb3a.js index 4981b55..d6f47eb 100644 --- a/assets/js/runtime~main.11e39501.js +++ b/assets/js/runtime~main.7b0bcb3a.js @@ -1 +1 @@ -(()=>{"use strict";var e,t,r,a,f,c={},o={};function d(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={id:e,loaded:!1,exports:{}};return c[e].call(r.exports,r,r.exports,d),r.loaded=!0,r.exports}d.m=c,d.c=o,e=[],d.O=(t,r,a,f)=>{if(!r){var c=1/0;for(i=0;i=f)&&Object.keys(d.O).every((e=>d.O[e](r[n])))?r.splice(n--,1):(o=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[r,a,f]},d.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return d.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,d.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var f=Object.create(null);d.r(f);var c={};t=t||[null,r({}),r([]),r(r)];for(var o=2&a&&e;"object"==typeof o&&!~t.indexOf(o);o=r(o))Object.getOwnPropertyNames(o).forEach((t=>c[t]=()=>e[t]));return c.default=()=>e,d.d(f,c),f},d.d=(e,t)=>{for(var r in t)d.o(t,r)&&!d.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},d.f={},d.e=e=>Promise.all(Object.keys(d.f).reduce(((t,r)=>(d.f[r](e,t),t)),[])),d.u=e=>"assets/js/"+({3:"925b3f96",13:"01a85c17",36:"73664a40",53:"935f2afb",60:"7ab2edf4",73:"9967cc6c",85:"1f391b9e",89:"a6aa9e1f",103:"ccc49370",123:"bfe3e1be",169:"d94cf613",180:"8109b53a",194:"e2a49a6d",195:"c4f5d8e4",261:"f9c37311",267:"59362658",275:"2d384d15",278:"fe959ac0",362:"e273c56f",414:"393be207",514:"1be78505",516:"b9d25f73",535:"814f3328",538:"3021cf83",545:"b2fa1cc3",580:"6dbc3070",592:"common",608:"9e4087bc",610:"6875c492",636:"f4f34a3a",642:"7661071f",732:"410fe919",803:"0f87c2cb",839:"18d5ac96",841:"eb6814f0",914:"d9f32620",918:"17896441",948:"8717b14a"}[e]||e)+"."+{3:"ca9ede36",13:"eeb7be6d",36:"f2c13b8d",53:"1ae27378",60:"1bb3fe53",73:"59fbb227",85:"80863aaf",89:"37133c6e",103:"59490f33",123:"d784cb06",161:"bbd572a1",169:"94ffc5af",180:"5ac76f78",194:"c3f3d763",195:"d1410046",261:"7959e50a",267:"69c3a02a",275:"872f2f6a",278:"c1c2335a",362:"049be4d3",414:"92ead30b",423:"4394f7fc",487:"2f75126d",514:"5f636cd6",516:"8fb9cafc",535:"64325743",538:"a009de27",545:"fd07c058",580:"abf3086a",592:"2a30f5e9",608:"5b93f1cb",610:"33b472c3",636:"a6fa4370",642:"1406c824",732:"2f83ae6c",803:"192d8220",839:"2c0dc663",841:"f0f03a54",914:"275a80dc",918:"52ba884a",948:"04764840"}[e]+".js",d.miniCssF=e=>{},d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a={},f="website:",d.l=(e,t,r,c)=>{if(a[e])a[e].push(t);else{var o,n;if(void 0!==r)for(var b=document.getElementsByTagName("script"),i=0;i{o.onerror=o.onload=null,clearTimeout(s);var f=a[e];if(delete a[e],o.parentNode&&o.parentNode.removeChild(o),f&&f.forEach((e=>e(r))),t)return t(r)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=l.bind(null,o.onerror),o.onload=l.bind(null,o.onload),n&&document.head.appendChild(o)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.p="/react-video-modal/",d.gca=function(e){return e={17896441:"918",59362658:"267","925b3f96":"3","01a85c17":"13","73664a40":"36","935f2afb":"53","7ab2edf4":"60","9967cc6c":"73","1f391b9e":"85",a6aa9e1f:"89",ccc49370:"103",bfe3e1be:"123",d94cf613:"169","8109b53a":"180",e2a49a6d:"194",c4f5d8e4:"195",f9c37311:"261","2d384d15":"275",fe959ac0:"278",e273c56f:"362","393be207":"414","1be78505":"514",b9d25f73:"516","814f3328":"535","3021cf83":"538",b2fa1cc3:"545","6dbc3070":"580",common:"592","9e4087bc":"608","6875c492":"610",f4f34a3a:"636","7661071f":"642","410fe919":"732","0f87c2cb":"803","18d5ac96":"839",eb6814f0:"841",d9f32620:"914","8717b14a":"948"}[e]||e,d.p+d.u(e)},(()=>{var e={303:0,532:0};d.f.j=(t,r)=>{var a=d.o(e,t)?e[t]:void 0;if(0!==a)if(a)r.push(a[2]);else if(/^(303|532)$/.test(t))e[t]=0;else{var f=new Promise(((r,f)=>a=e[t]=[r,f]));r.push(a[2]=f);var c=d.p+d.u(t),o=new Error;d.l(c,(r=>{if(d.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var f=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;o.message="Loading chunk "+t+" failed.\n("+f+": "+c+")",o.name="ChunkLoadError",o.type=f,o.request=c,a[1](o)}}),"chunk-"+t,t)}},d.O.j=t=>0===e[t];var t=(t,r)=>{var a,f,c=r[0],o=r[1],n=r[2],b=0;if(c.some((t=>0!==e[t]))){for(a in o)d.o(o,a)&&(d.m[a]=o[a]);if(n)var i=n(d)}for(t&&t(r);b{"use strict";var e,t,r,a,f,c={},o={};function d(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={id:e,loaded:!1,exports:{}};return c[e].call(r.exports,r,r.exports,d),r.loaded=!0,r.exports}d.m=c,d.c=o,e=[],d.O=(t,r,a,f)=>{if(!r){var c=1/0;for(i=0;i=f)&&Object.keys(d.O).every((e=>d.O[e](r[n])))?r.splice(n--,1):(o=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[r,a,f]},d.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return d.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,d.t=function(e,a){if(1&a&&(e=this(e)),8&a)return e;if("object"==typeof e&&e){if(4&a&&e.__esModule)return e;if(16&a&&"function"==typeof e.then)return e}var f=Object.create(null);d.r(f);var c={};t=t||[null,r({}),r([]),r(r)];for(var o=2&a&&e;"object"==typeof o&&!~t.indexOf(o);o=r(o))Object.getOwnPropertyNames(o).forEach((t=>c[t]=()=>e[t]));return c.default=()=>e,d.d(f,c),f},d.d=(e,t)=>{for(var r in t)d.o(t,r)&&!d.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},d.f={},d.e=e=>Promise.all(Object.keys(d.f).reduce(((t,r)=>(d.f[r](e,t),t)),[])),d.u=e=>"assets/js/"+({3:"925b3f96",13:"01a85c17",36:"73664a40",53:"935f2afb",60:"7ab2edf4",73:"9967cc6c",85:"1f391b9e",89:"a6aa9e1f",103:"ccc49370",123:"bfe3e1be",169:"d94cf613",180:"8109b53a",194:"e2a49a6d",195:"c4f5d8e4",261:"f9c37311",267:"59362658",275:"2d384d15",278:"fe959ac0",362:"e273c56f",414:"393be207",514:"1be78505",516:"b9d25f73",535:"814f3328",538:"3021cf83",545:"b2fa1cc3",580:"6dbc3070",592:"common",608:"9e4087bc",610:"6875c492",636:"f4f34a3a",642:"7661071f",732:"410fe919",803:"0f87c2cb",839:"18d5ac96",841:"eb6814f0",914:"d9f32620",918:"17896441",948:"8717b14a"}[e]||e)+"."+{3:"ca9ede36",13:"eeb7be6d",36:"f2c13b8d",53:"1ae27378",60:"1bb3fe53",73:"2490bd4c",85:"80863aaf",89:"37133c6e",103:"59490f33",123:"d784cb06",161:"bbd572a1",169:"94ffc5af",180:"0d161250",194:"c3f3d763",195:"d1410046",261:"7959e50a",267:"69c3a02a",275:"872f2f6a",278:"c1c2335a",362:"049be4d3",414:"92ead30b",423:"4394f7fc",487:"2f75126d",514:"5f636cd6",516:"8fb9cafc",535:"64325743",538:"ce7b54c8",545:"fd07c058",580:"abf3086a",592:"2a30f5e9",608:"5b93f1cb",610:"33b472c3",636:"a6fa4370",642:"1406c824",732:"2f83ae6c",803:"192d8220",839:"2c0dc663",841:"f0f03a54",914:"275a80dc",918:"52ba884a",948:"04764840"}[e]+".js",d.miniCssF=e=>{},d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a={},f="website:",d.l=(e,t,r,c)=>{if(a[e])a[e].push(t);else{var o,n;if(void 0!==r)for(var b=document.getElementsByTagName("script"),i=0;i{o.onerror=o.onload=null,clearTimeout(s);var f=a[e];if(delete a[e],o.parentNode&&o.parentNode.removeChild(o),f&&f.forEach((e=>e(r))),t)return t(r)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=l.bind(null,o.onerror),o.onload=l.bind(null,o.onload),n&&document.head.appendChild(o)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.p="/react-video-modal/",d.gca=function(e){return e={17896441:"918",59362658:"267","925b3f96":"3","01a85c17":"13","73664a40":"36","935f2afb":"53","7ab2edf4":"60","9967cc6c":"73","1f391b9e":"85",a6aa9e1f:"89",ccc49370:"103",bfe3e1be:"123",d94cf613:"169","8109b53a":"180",e2a49a6d:"194",c4f5d8e4:"195",f9c37311:"261","2d384d15":"275",fe959ac0:"278",e273c56f:"362","393be207":"414","1be78505":"514",b9d25f73:"516","814f3328":"535","3021cf83":"538",b2fa1cc3:"545","6dbc3070":"580",common:"592","9e4087bc":"608","6875c492":"610",f4f34a3a:"636","7661071f":"642","410fe919":"732","0f87c2cb":"803","18d5ac96":"839",eb6814f0:"841",d9f32620:"914","8717b14a":"948"}[e]||e,d.p+d.u(e)},(()=>{var e={303:0,532:0};d.f.j=(t,r)=>{var a=d.o(e,t)?e[t]:void 0;if(0!==a)if(a)r.push(a[2]);else if(/^(303|532)$/.test(t))e[t]=0;else{var f=new Promise(((r,f)=>a=e[t]=[r,f]));r.push(a[2]=f);var c=d.p+d.u(t),o=new Error;d.l(c,(r=>{if(d.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var f=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;o.message="Loading chunk "+t+" failed.\n("+f+": "+c+")",o.name="ChunkLoadError",o.type=f,o.request=c,a[1](o)}}),"chunk-"+t,t)}},d.O.j=t=>0===e[t];var t=(t,r)=>{var a,f,c=r[0],o=r[1],n=r[2],b=0;if(c.some((t=>0!==e[t]))){for(a in o)d.o(o,a)&&(d.m[a]=o[a]);if(n)var i=n(d)}for(t&&t(r);b Archive | React Video Modal - +

Archive

Archive

2019

2021

- + \ No newline at end of file diff --git a/blog/first-blog-post/index.html b/blog/first-blog-post/index.html index 04604fc..cbc0892 100644 --- a/blog/first-blog-post/index.html +++ b/blog/first-blog-post/index.html @@ -5,13 +5,13 @@ First Blog Post | React Video Modal - +

First Blog Post

· One min read
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

- + \ No newline at end of file diff --git a/blog/index.html b/blog/index.html index 3ab20ce..be62709 100644 --- a/blog/index.html +++ b/blog/index.html @@ -5,13 +5,13 @@ Blog | React Video Modal - +

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

· One min read
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

- + \ No newline at end of file diff --git a/blog/long-blog-post/index.html b/blog/long-blog-post/index.html index 39cd5d4..0aa0968 100644 --- a/blog/long-blog-post/index.html +++ b/blog/long-blog-post/index.html @@ -5,13 +5,13 @@ Long Blog Post | React Video Modal - +

Long Blog Post

· 3 min read
Endilie Yacop Sucipto

This is the summary of a very long blog post,

Use a <!-- truncate --> comment to limit blog post size in the list view.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

- + \ No newline at end of file diff --git a/blog/mdx-blog-post/index.html b/blog/mdx-blog-post/index.html index 1aa1f46..b31ecc6 100644 --- a/blog/mdx-blog-post/index.html +++ b/blog/mdx-blog-post/index.html @@ -5,13 +5,13 @@ MDX Blog Post | React Video Modal - +
- + \ No newline at end of file diff --git a/blog/tags/docusaurus/index.html b/blog/tags/docusaurus/index.html index 25910b0..ca05416 100644 --- a/blog/tags/docusaurus/index.html +++ b/blog/tags/docusaurus/index.html @@ -5,13 +5,13 @@ 4 posts tagged with "docusaurus" | React Video Modal - +

4 posts tagged with "docusaurus"

View All Tags

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

· One min read
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

- + \ No newline at end of file diff --git a/blog/tags/facebook/index.html b/blog/tags/facebook/index.html index f953cca..c4d2fb2 100644 --- a/blog/tags/facebook/index.html +++ b/blog/tags/facebook/index.html @@ -5,13 +5,13 @@ One post tagged with "facebook" | React Video Modal - +

One post tagged with "facebook"

View All Tags

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

- + \ No newline at end of file diff --git a/blog/tags/hello/index.html b/blog/tags/hello/index.html index 7c034f5..6dffea9 100644 --- a/blog/tags/hello/index.html +++ b/blog/tags/hello/index.html @@ -5,13 +5,13 @@ 2 posts tagged with "hello" | React Video Modal - +

2 posts tagged with "hello"

View All Tags

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

- + \ No newline at end of file diff --git a/blog/tags/hola/index.html b/blog/tags/hola/index.html index d74103c..9f7cb84 100644 --- a/blog/tags/hola/index.html +++ b/blog/tags/hola/index.html @@ -5,13 +5,13 @@ One post tagged with "hola" | React Video Modal - +

One post tagged with "hola"

View All Tags

· One min read
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

- + \ No newline at end of file diff --git a/blog/tags/index.html b/blog/tags/index.html index f7ead42..dde152d 100644 --- a/blog/tags/index.html +++ b/blog/tags/index.html @@ -5,13 +5,13 @@ Tags | React Video Modal - +

Tags

- + \ No newline at end of file diff --git a/blog/welcome/index.html b/blog/welcome/index.html index 0cc603b..6e5a4dc 100644 --- a/blog/welcome/index.html +++ b/blog/welcome/index.html @@ -5,13 +5,13 @@ Welcome | React Video Modal - +

Welcome

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

- + \ No newline at end of file diff --git a/docs/apis/index.html b/docs/apis/index.html index 4d7e7a2..c06efc8 100644 --- a/docs/apis/index.html +++ b/docs/apis/index.html @@ -5,13 +5,13 @@ Hooks | React Video Modal - +

Hooks

We provide the following custom hooks for easily use toggle and manage its state

UseToogle​

We provide the powerful custom hook to control the modal close/open state

Here is the inerface of useToggle return type

interface UseToggleReturnType {
  isOpen: boolean; // default is false
  toggle: () => void; // toggle isOpen
  close: () => void; // close the modal, always set isOpen as false
}

Usage​

UseToogle Example

/src/components/hooks/UseToggle.jsx
import React from 'react';
import {ModalVideo, useToggle} from '@baskvava/react-video-modal';

function UseToogle() {
  const {isOpen, toggle, close} = useToggle();

  return (
    <div>
      <h2>UseToogle Example</h2>
      <button
        onClick={toggle}
        className="v-btn">
        Click Me to Open Video Modal
      </button>
      <ModalVideo
        title="video"
        header="useToggle"
        width={800}
        isOpen={isOpen}
        onClosed={close}
        url="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      />
    </div>
  );
}

export default UseToogle;
- + \ No newline at end of file diff --git a/docs/getting-started/index.html b/docs/getting-started/index.html index 0c74995..bf86925 100644 --- a/docs/getting-started/index.html +++ b/docs/getting-started/index.html @@ -5,13 +5,13 @@ Getting Started | React Video Modal - +

Getting Started

Install​

npm install @baskvava/react-video-modal

or

yarn add @baskvava/react-video-modal

Usage​

Basic Video Modal

/src/components/GettingStarter/BasicNoHeader.jsx
import React from 'react';
import {ModalVideo, useToggle} from '@baskvava/react-video-modal';

function BasicNoHeader() {
  const {isOpen, toggle, close} = useToggle();

  return (
    <div>
      <h2>Basic Video Modal</h2>
      <button onClick={toggle} className="v-btn">
        Click Me to Open Video Modal
      </button>
      <ModalVideo
        title="video"
        width={800}
        isOpen={isOpen}
        onClosed={close}
        url="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      />
    </div>
  );
}

export default BasicNoHeader;

Video Modal with Header

/src/components/GettingStarter/Basic.jsx
import React from 'react';
import {ModalVideo, useToggle} from '@baskvava/react-video-modal';

function Basic() {
  const {isOpen, toggle, close} = useToggle();

  return (
    <div>
      <h2>Video Modal with Header</h2>
      <button onClick={toggle} className="v-btn">
        Click Me to Open Video Modal
      </button>

      <ModalVideo
        title="video"
        header="This is my first video"
        width={800}
        isOpen={isOpen}
        onClosed={close}
        url="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      />
    </div>
  );
}

export default Basic;
- + \ No newline at end of file diff --git a/docs/hooks/index.html b/docs/hooks/index.html index 6b4e3af..bd24c73 100644 --- a/docs/hooks/index.html +++ b/docs/hooks/index.html @@ -5,13 +5,13 @@ Hooks | React Video Modal - +

Hooks

We provide the following custom hooks for easily use toggle and manage its state

UseToogle​

We provide the powerful custom hook to control the modal close/open state

Here is the inerface of useToggle return type

interface UseToggleReturnType {
  isOpen: boolean; // default is false
  toggle: () => void; // toggle isOpen
  close: () => void; // close the modal, always set isOpen as false
}

Usage​

UseToogle Example

/src/components/hooks/UseToggle.jsx
import React from 'react';
import {ModalVideo, useToggle} from '@baskvava/react-video-modal';

function UseToogle() {
  const {isOpen, toggle, close} = useToggle();

  return (
    <div>
      <h2>UseToogle Example</h2>
      <button
        onClick={toggle}
        className="v-btn">
        Click Me to Open Video Modal
      </button>
      <ModalVideo
        title="video"
        header="useToggle"
        width={800}
        isOpen={isOpen}
        onClosed={close}
        url="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      />
    </div>
  );
}

export default UseToogle;
- + \ No newline at end of file diff --git a/index.html b/index.html index 81457b4..f610e6f 100644 --- a/index.html +++ b/index.html @@ -5,13 +5,13 @@ React Video Modal | React Video Modal - +

React Video Modal

The simple react copmenet of video modal

npm install @baskvava/react-video-modal
Easy to Use

Easy to Use

React Video Modal was designed from the ground up to be easily installed, lightweight, and used to get your video modal up and running steadly.

Focus on What Matters

Focus on What Matters

React Video Modal lets you focus video. Without wasting time to optimize the modal events.

Powered by React Video Modal

Powered by React Video Modal

Extend or customize your Video Modal layout by reusing React Video Modal. React Video Modal can be extended while reusing the same video content.

- + \ No newline at end of file diff --git a/markdown-page/index.html b/markdown-page/index.html index cedd8d9..e061dfd 100644 --- a/markdown-page/index.html +++ b/markdown-page/index.html @@ -5,13 +5,13 @@ Markdown page example | React Video Modal - +

Markdown page example

You don't need React to write simple standalone pages.

- + \ No newline at end of file