react-video-scroll-ssr
Version:
A React component to seek or control the video frame rate on scroll.
2 lines (1 loc) • 3.21 kB
JavaScript
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["exports","react","prop-types"],r):r(e.VideoScroll={},e.React,e.PropTypes)}(this,function(e,r,t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var o=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},n=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},a=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},i="undefined"!=typeof window?window.requestAnimationFrame:function(){},p=function(e){function t(){var n,p;o(this,t);for(var c=arguments.length,l=Array(c),f=0;f<c;f++)l[f]=arguments[f];return n=p=a(this,e.call.apply(e,[this].concat(l))),p.videoRef=r.createRef(),p.divWrapperRef=r.createRef(),p.seek=function(){var e=0;"function"==typeof p.props.onLoad&&p.props.onLoad({wrapperEl:p.divWrapperRef.current,videoEl:p.videoRef.current,duration:p.videoRef.current.duration,playbackRate:p.props.playbackRate});i(function r(){if(p.props.setCurrentFrame&&"function"==typeof p.props.setCurrentFrame)e=p.props.setCurrentFrame({playbackRate:p.props.playbackRate,duration:p.videoRef.current.duration});else{var t=p.props.horizontalScroll?window.pageXOffset:window.pageYOffset;e=t/p.props.playbackRate}p.videoRef.current.currentTime=e,"function"==typeof p.props.onScroll&&p.props.onScroll({wrapperEl:p.divWrapperRef.current,videoEl:p.videoRef.current,currentFrame:e,duration:p.videoRef.current.duration,playbackRate:p.props.playbackRate}),i(r)})},p.attachRefToVideoEl=function(){var e=0;return r.Children.map(p.props.children,function(t,o){if("video"===t.type){if((e+=1)>1){throw new Error("<VideoScroll> component expected only one <video> element as its children.")}if(1===e)return r.cloneElement(t,{key:o,ref:p.videoRef})}return r.cloneElement(t,{key:o})})},a(p,n)}return function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)}(t,e),t.prototype.componentDidMount=function(){this.videoRef.current.addEventListener("loadedmetadata",this.seek)},t.prototype.componentWillUnmount=function(){this.videoRef.current.removeEventListener("loadedmetadata",this.seek)},t.prototype.render=function(){var e=this.props,t=(e.children,e.playbackRate,e.setCurrentFrame,e.horizontalScroll,e.onScroll,e.onLoad,function(e,r){var t={};for(var o in e)r.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}(e,["children","playbackRate","setCurrentFrame","horizontalScroll","onScroll","onLoad"]));return r.createElement("div",n({ref:this.divWrapperRef},t),this.attachRefToVideoEl())},t}(r.Component);p.defaultProps={playbackRate:10,horizontalScroll:!1},e.VideoScroll=p,Object.defineProperty(e,"__esModule",{value:!0})});