react-image-video-viewer
Version:
A React lightbox that supports videos, images and pinch zooming on images. Optimized for mobile UI with swiping, but can be used on desktop as well.
6 lines • 10.3 kB
JavaScript
/*!
* react-image-video-viewer v4.0.1 - https://marcell93.github.io/react-image-video-lightbox
* MIT Licensed
*/
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports["react-image-video-lightbox"]=e(require("react")):t["react-image-video-lightbox"]=e(t.React)}(window,(function(t){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(e,n){e.exports=t},function(t,e,n){t.exports=n(2)},function(t,e,n){"use strict";n.r(e);var i=n(0),o=function(t,e,n){return t>e-n&&t<e||t<e+n&&t>e?e:t},a=function(t){return{x:t.clientX,y:t.clientY}},s=function(t,e){return Math.sqrt(Math.pow(t.y-e.y,2)+Math.pow(t.x-e.x,2))};function r(t,e){return(r=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t})(t,e)}var l=function(t){function e(e){var n;return(n=t.call(this,e)||this).state={x:0,y:0,scale:1,width:window.innerWidth,height:window.innerHeight,index:n.props.startIndex,swiping:!1,loading:!0,iconSize:window.innerWidth<=500?35:50,overflow:void 0},n.width=window.innerWidth,n.height=window.innerHeight,n.handleTouchStart=n.handleTouchStart.bind(n),n.handleTouchMove=n.handleTouchMove.bind(n),n.handleTouchEnd=n.handleTouchEnd.bind(n),n.onResize=n.onResize.bind(n),n.handleKeyDown=n.handleKeyDown.bind(n),n.onNavigationCallback=n.props.onNavigationCallback&&"function"==typeof n.props.onNavigationCallback?n.props.onNavigationCallback:function(){},n}var n,l;l=t,(n=e).prototype=Object.create(l.prototype),n.prototype.constructor=n,r(n,l);var h=e.prototype;return h.zoomTo=function(t){var e=this,n=function(){if(e.state.scale!==t){var i=t-e.state.scale,a=e.state.scale+.01*i;e.zoom(o(a,t,.001)),e.animation=requestAnimationFrame(n)}};this.animation=requestAnimationFrame(n)},h.reset=function(){var t=this,e=function(){if(1!==t.state.scale||0!==t.state.x||0!==t.state.y){var n=1-t.state.scale,i=o(t.state.scale+.01*n,1,.001),a=t.width*i,s=t.height*i;t.setState({scale:i,width:a,height:s,x:0,y:0},(function(){t.animation=requestAnimationFrame(e)}))}};this.animation=requestAnimationFrame(e)},h.handleTouchStart=function(t){this.animation&&cancelAnimationFrame(this.animation),2===t.touches.length&&this.handlePinchStart(t),1===t.touches.length&&this.handleTapStart(t)},h.handleTouchMove=function(t){2===t.touches.length&&this.handlePinchMove(t),1===t.touches.length&&this.handlePanMove(t)},h.handleTouchEnd=function(t){return t&&t.touches&&t.touches.length>0?null:this.state.scale>4?this.zoomTo(4):this.state.scale<1?this.zoomTo(1):(t&&this.lastTouchEnd&&this.lastTouchEnd+300>t.timeStamp&&this.reset(),this.state.swiping&&1===this.state.scale&&this.handleSwipe(t),void(this.lastTouchEnd=t?t.timeStamp:void 0))},h.handleSwipe=function(t){var e=t?t.changedTouches[0].clientX-this.swipeStartX:0;e<-this.width/3?this.swipeRight():e>this.width/3?this.swipeLeft():this.reset()},h.swipeLeft=function(){var t=this,e=this.state.index;e>0?setTimeout((function(){t.setState({index:e-1,swiping:!1,x:0,loading:!0},(function(){return t.onNavigationCallback(e-1)}))}),0):this.reset()},h.swipeRight=function(){var t=this,e=this.state.index;e<this.props.data.length-1?setTimeout((function(){t.setState({index:e+1,swiping:!1,x:0,loading:!0},(function(){return t.onNavigationCallback(e+1)}))}),0):this.reset()},h.handleTapStart=function(t){this.swipeStartX=t.touches[0].clientX,this.swipeStartY=t.touches[0].clientY,1===this.state.scale&&this.setState({swiping:!0})},h.handlePanMove=function(t){1===this.state.scale?this.setState({x:t.touches[0].clientX-this.swipeStartX}):(t.preventDefault(),this.setState({x:t.touches[0].clientX-this.swipeStartX,y:t.touches[0].clientY-this.swipeStartY}))},h.handlePinchStart=function(t){var e=a(t.touches[0]),n=a(t.touches[1]);this.lastDistance=s(e,n)},h.handlePinchMove=function(t){t.preventDefault();var e,n,i,o=a(t.touches[0]),r=a(t.touches[1]),l=s(o,r),h=(e=.8,n=4.2,i=this.state.scale*(l/this.lastDistance),Math.min(n,Math.max(e,i)));this.zoom(h),this.lastDistance=l},h.zoom=function(t){var e=this.width*t,n=this.height*t;this.setState({width:e,height:n,scale:t})},h.getResources=function(){for(var t=this,e=[],n=this.props.data,o=0;o<n.length;o++){var a=n[o];"photo"===a.type&&e.push(i.createElement("img",{key:o,className:"img-viewer",alt:a.altTag,src:a.url,style:{pointerEvents:1===this.state.scale?"auto":"none",maxWidth:"100%",maxHeight:"100%",transform:"translate("+this.state.x+"px, "+this.state.y+"px) scale("+this.state.scale+")",transition:"transform 0.5s ease-out"},onLoad:function(){t.setState({loading:!1})}})),"video"===a.type&&(a.url&&(a.url.includes(".mp4")||a.url.includes(".mov"))?e.push(i.createElement("video",{onLoadStart:function(){t.setState({loading:!1})},onLoadedData:function(){t.setState({loading:!1})},key:o,className:"video-viewer",preload:"metadata",poster:a.poster?a.poster:null,playsInline:!0,controls:!0,autoPlay:!!a.autoPlay,src:a.url},i.createElement("source",{src:a.url+"#t=0.1",type:"video/webm"}),i.createElement("source",{src:a.url+"#t=0.1",type:"video/ogg"}),i.createElement("source",{src:a.url+"#t=0.1",type:"video/mp4"}),i.createElement("source",{src:a.url+"#t=0.1",type:"video/3gp"}))):e.push(i.createElement("iframe",{key:o,width:"560",height:"315",src:a.url,frameBorder:"0",allow:"autoplay; encrypted-media",title:a.title,allowFullScreen:!0,style:{pointerEvents:1===this.state.scale?"auto":"none",maxWidth:"100%",maxHeight:"100%",transform:"translate("+this.state.x+"px, "+this.state.y+"px)",transition:"transform 0.5s ease-out"},onLoad:function(){t.setState({loading:!1})}})))}return e},h.handleKeyDown=function(t){switch(t.keyCode){case 27:document.body.style.overflow=this.state.overflow?this.state.overflow:null,this.props.onCloseCallback();break;case 39:this.swipeRight();break;case 37:this.swipeLeft()}},h.onResize=function(){window.innerWidth<=500?this.setState({iconSize:35}):this.setState({iconSize:50})},h.componentDidMount=function(){this.setState({overflow:document.body.style.overflow}),document.body.style.overflow="hidden",window.addEventListener("resize",this.onResize),document.addEventListener("keydown",this.handleKeyDown)},h.componentWillUnmount=function(){document.body.style.overflow=this.state.overflow?this.state.overflow:null,window.removeEventListener("resize",this.onResize),document.removeEventListener("keydown",this.handleKeyDown)},h.render=function(){var t=this,e=this.getResources();return i.createElement("div",{onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEnd,style:{top:"0px",left:"0px",overflow:"hidden",position:"fixed",display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"row",height:"100%",width:"100%",background:"rgba(0, 0, 0, 0.5019607843)",backdropFilter:"blur(2.1428571429em)",zIndex:100}},this.props.showResourceCount&&i.createElement("div",{style:{position:"absolute",top:"0px",left:"0px",padding:"15px",color:"white",fontWeight:"bold"}},i.createElement("span",null,this.state.index+1)," / ",i.createElement("span",null,this.props.data.length)),i.createElement("div",{style:{position:"absolute",top:"0px",right:"0px",padding:"10px",color:"#FFFFFF",cursor:"pointer",fontSize:.8*this.state.iconSize+"px"},onClick:function(){document.body.style.overflow=t.state.overflow?t.state.overflow:null,t.props.onCloseCallback()}},i.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"36px",viewBox:"0 0 24 24",width:"36px",fill:"#FFFFFF"},i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}))),this.state.index+1!=1?i.createElement("div",{style:{position:"absolute",left:"0px",zIndex:1,color:"#FFFFFF",cursor:"pointer",fontSize:this.state.iconSize+"px"},onClick:function(){t.swipeLeft()}},i.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"48px",viewBox:"0 0 24 24",width:"48px",fill:"#FFFFFF"},i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"}))):i.createElement(i.Fragment,null),this.state.index+1!=this.props.data.length?i.createElement("div",{style:{position:"absolute",right:"0px",zIndex:1,color:"#FFFFFF",cursor:"pointer",fontSize:this.state.iconSize+"px"},onClick:function(){t.swipeRight()}},i.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"48px",viewBox:"0 0 24 24",width:"48px",fill:"#FFFFFF"},i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}))):i.createElement(i.Fragment,null),this.state.loading&&i.createElement("div",{style:{margin:"auto",position:"fixed"}},i.createElement("style",null,"@keyframes react_image_video_spinner {\n 0% {\n transform: translate3d(-50 %, -50 %, 0) rotate(0deg);\n }\n 100% {\n transform: translate3d(-50%, -50%, 0) rotate(360deg);\n }\n }"),i.createElement("div",{style:{animation:"1.0s linear infinite react_image_video_spinner",border:"solid 5px #ffffff",borderBottomColor:"#cfd0d1",borderRadius:"50%",height:30,width:30,position:"fixed",transform:"translate3d(-50%, -50%, 0)"}})),e[this.state.index])},e}(i.Component);e.default=l}]).default}));
//# sourceMappingURL=react-image-video-viewer.min.js.map