Files
JiboSDK/lib/animation-editor/views/video/video.js
2026-03-22 03:21:45 +02:00

1 line
4.7 KiB
JavaScript

"use strict";var e=function(e){return e&&e.__esModule?e["default"]:e},t=function(){function e(e,t){for(var i in t){var o=t[i];o.configurable=!0,o.value&&(o.writable=!0)}Object.defineProperties(e,t)}return function(t,i,o){return i&&e(t.prototype,i),o&&e(t,o),t}}(),i=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)},o=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},n=e(require("react")),a=e(require("../../../ffmpeg/ffmpeg")),r=e(require("path")),s=e(require("fs")),h=e(require("async")),l=require("events").EventEmitter,d="win32"===process.platform?process.env.HOMEPATH:process.env.HOME,f=r.resolve(d,".jibo","temp"),u=void 0,c=void 0,p={},m=function(e){function n(e){o(this,n),this.uri=e,this.fileName=r.parse(this.uri).base,this.folderPath=r.resolve(f,this.fileName),this.imageCache={},this.isLoaded=!1,s.existsSync(f)||s.mkdirSync(f)}return i(n,e),t(n,{_getImageKey:{value:function(e){return this.folderPath+e}},_loadImage:{value:function(e,t,i){var o=new Image;p[this._getImageKey(t)]=o,o.onload=function(){i()};var n=r.resolve(this.folderPath,"image"+e+".png");o.src=n+"?"+t}},_loadImages:{value:function(e,t,i){var o=this;try{a(this.uri).on("filenames",function(){}).on("end",function(){for(var e=[],n=0;n<t.length;n++)e.push(o._loadImage.bind(o,n+1,t[n]));h.parallel(e,function(){i()})}).on("error",function(e){console.log(e)}).screenshots({timestamps:e,folder:this.folderPath,filename:"image%i.png",size:this.imageWidth+"x"+this.imageHeight})}catch(n){console.log(n)}}},load:{value:function(e){var t=this;if(this.isLoaded)return void(e&&e());try{!function(){var i=(new Date).getTime();a.ffprobe(t.uri,function(o,n){if(n){t.ratio=n.streams[0].coded_height/n.streams[0].coded_width,t.imageWidth=Math.min(n.streams[0].coded_width,500),t.imageHeight=Math.round(t.imageWidth*t.ratio),t.duration=n.streams[0].duration,t.frameRate=parseInt(n.streams[0].avg_frame_rate.split("/")[0],10),t.count=t.duration*t.frameRate;for(var a=[],r=[],s=[],l=1,d=0;d<Math.min(t.duration,15);d+=1/t.frameRate)r.push(d),s.push(l),r.length===t.frameRate&&(a.push(t._loadImages.bind(t,r,s)),r=[],s=[]),l++;r.length>0&&a.push(t._loadImages.bind(t,r,s)),h.series(a,function(){var o=(new Date).getTime()-i;console.log("Video of "+t.duration+" seconds toolk "+o),e()})}})}()}catch(i){console.log(i)}}},getImage:{value:function(e){return p[this._getImageKey(e)]}}}),n}(l);module.exports=n.createClass({displayName:"layout-child",getInitialState:function(){return this.onDataChangedBind=this.onDataChanged.bind(this),this.dataMap={},{}},render:function(){return u&&c&&this.setStyle(),n.createElement("div",{className:"video-container",ref:"content",style:{width:"100%",height:"100%",display:"inline-block"},src:this.props.videoSource,preload:"auto"})},setStyle:function(){var e=u.getImage(c);if(e){var t=1/u.ratio;if(e.style.position="relative",t<this.props.width/this.props.height){var i=this.props.height,o=t*this.props.height,n=.5*(this.props.width-o);e.style.height=i+"px",e.style.width=o+"px",e.style.left=n+"px",e.style.top=""}else{var i=this.props.width/t,o=this.props.width,n=.5*(this.props.height-i);e.style.height=i+"px",e.style.width=o+"px",e.style.top=n+"px",e.style.left=""}}},componentWillUnmount:function(){this.props.animationModel.removeListener("ondatachanged",this.onDataChangedBind)},loadVideos:function(e){for(var t=this,i=this.props.animationModel,o=i.getLayersOfType("Video")[0].keyframes,n=[],a=o.length-1;a>=0;a--){var s=o[a].value.Video;if(""!==s){var l=r.resolve(this.props.projectRoot,s);this.dataMap[l]||!function(){var e=new m(l);t.dataMap[l]=e,n.push(function(t){e.load(t)})}()}}n.length>0&&h.parallel(n,e)},componentDidMount:function(){var e=this;this.content=n.findDOMNode(this.refs.content),this.loadVideos(function(){e.onDataChanged()}),this.props.animationModel.on("ondatachanged",this.onDataChangedBind)},setChild:function(){var e=u.getImage(c);if(e){for(;this.content.firstChild;)this.content.removeChild(this.content.firstChild);this.content.appendChild(e),this.setStyle(u)}},onDataChanged:function(){var e=this.props.animationModel,t=e.getLayersOfType("Video");if(0!==t.length){this.loadVideos();for(var i=e.uiState.currentKeyframe,o=t[0].keyframes,n=void 0,a=o.length-1;a>=0;a--)if(i>=o[a].time){n=o[a];break}if(n){u=void 0;var s=n.value.Video;if(""!==s){var h=r.resolve(this.props.projectRoot,s);u=this.dataMap[h];var l=(i-n.time)/this.props.animationModel.state.keyframes.framerate;c=Math.round(u.count*l/u.duration),this.setChild()}}else for(;this.content.firstChild;)this.content.removeChild(this.content.firstChild)}}});