├── .gitignore ├── .npmrc ├── README.md ├── build-package ├── element │ ├── Basic-Audio.js │ ├── Basic-Iframe.js │ ├── Basic-Image.js │ ├── Basic-Input.js │ ├── Basic-Label.js │ ├── Basic-Link.js │ ├── Basic-Svg.js │ ├── Basic-Text.js │ ├── Basic-Video.js │ ├── Box-Array.js │ ├── Box-Basic.js │ ├── Box-Drag.js │ ├── Box-HashRouter.js │ ├── Box-SPA.js │ ├── Extra-VideoHls.js │ ├── Material-Accordion.js │ ├── Material-Autocomplete.js │ ├── Material-Badge.js │ ├── Material-BottomNavigation.js │ ├── Material-Button.js │ ├── Material-Checkbox.js │ ├── Material-CheckboxGroup.js │ ├── Material-CircularProgress.js │ ├── Material-Dialog.js │ ├── Material-List.js │ ├── Material-Menu.js │ ├── Material-MenuBox.js │ ├── Material-Pagination.js │ ├── Material-Paper.js │ ├── Material-Radio.js │ ├── Material-RadioGroup.js │ ├── Material-Select.js │ ├── Material-Slider.js │ ├── Material-Switch.js │ ├── Material-Table.js │ ├── Material-Tabs.js │ ├── Material-TextField.js │ ├── Material-ToggleButtonGroup.js │ ├── Material-Tooltip.js │ ├── Tool-DataInterface.js │ ├── Tool-DataStore.js │ ├── Tool-EventStore.js │ ├── Tool-HttpRequest.js │ ├── _Echarts-Custom.js │ └── index.js ├── html │ └── index.html └── render │ ├── hydrate.js │ └── index.js ├── build ├── 247.a296bf5936c40aafc9ad.js ├── 383.22e193ab6cd8aa3fb101.js ├── 595.1eb04e05a11e5402302e.js ├── index.html ├── main.1b2433308b23c6c997c9.js ├── main.1b2433308b23c6c997c9.js.LICENSE.txt └── static │ └── icon.png ├── package.json ├── src-element ├── Basic-Audio │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Basic-Iframe │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Basic-Image │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Basic-Input │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Basic-Label │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Basic-Link │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Basic-Svg │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Basic-Text │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Basic-Video │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Box-Array │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Box-Basic │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Box-Drag │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Box-HashRouter │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Box-SPA │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Extra-VideoHls │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Accordion │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Autocomplete │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Badge │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-BottomNavigation │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Button │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Checkbox │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-CheckboxGroup │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-CircularProgress │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Dialog │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-List │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Menu │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-MenuBox │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Pagination │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Paper │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Radio │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-RadioGroup │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Select │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Slider │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Switch │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Table │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Tabs │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-TextField │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-ToggleButtonGroup │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Material-Tooltip │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Tool-DataInterface │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Tool-DataStore │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Tool-EventStore │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── Tool-HttpRequest │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js ├── _Echarts-Custom │ ├── Edit.jsx │ ├── Render.jsx │ ├── View.jsx │ ├── information.js │ └── license.js └── index.js ├── src-example ├── example-Typical Page of Form.json ├── example-form.json ├── example-guide.json └── index.js ├── src ├── App.jsx ├── View.Component.Ace.jsx ├── View.Component.Animation.jsx ├── View.Component.ElementConfig.jsx ├── View.Component.EventDialog.jsx ├── View.Entry.Dev.jsx ├── View.Entry.Prod.jsx ├── View.Event.Dev.jsx ├── View.Global.Drag.jsx ├── View.Global.Loading.jsx ├── View.Global.Message.jsx ├── View.Graph.Dev.jsx ├── View.Graph.Prod.jsx ├── View.NavigationBar.jsx ├── View.NavigationContent.jsx ├── View.NavigationTabs.ElementConfig.jsx ├── View.NavigationTabs.ElementEvent.jsx ├── View.NavigationTabs.ElementOverview.jsx ├── View.NavigationTabs.ElementShop.jsx ├── View.NavigationTabs.GraphConfig.jsx ├── View.NavigationTabs.jsx ├── index.css ├── index.js ├── utils.common.js ├── utils.common.scrollListener.js ├── utils.const.js ├── utils.graph.common.js ├── utils.graph.event.js ├── utils.graph.style.js ├── utils.imitation.js └── utils.mui.sx.js ├── static └── icon.png └── webpack ├── package.js ├── run.js ├── webpack.common.js ├── webpack.dev.html ├── webpack.dev.js ├── webpack.prod.html └── webpack.prod.js /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules/ 2 | **/package-lock.json 3 | **/.vscode 4 | **/.git 5 | **/.DS_Store 6 | **/npm-debug.log -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=http://registry.npm.taobao.org -------------------------------------------------------------------------------- /build-package/element/Material-Checkbox.js: -------------------------------------------------------------------------------- 1 | !function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("React"),require("MaterialUI"));else if("function"==typeof define&&define.amd)define(["React","MaterialUI"],r);else{var t="object"==typeof exports?r(require("React"),require("MaterialUI")):r(e.React,e.MaterialUI);for(var n in t)("object"==typeof exports?exports:e)[n]=t[n]}}(self,((e,r)=>(()=>{"use strict";var t={864:e=>{e.exports=r},24:r=>{r.exports=e}},n={};function o(e){var r=n[e];if(void 0!==r)return r.exports;var a=n[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return o.d(r,{a:r}),r},o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{o.r(a);var e=o(24),r=o.n(e),t=o(864);function n(){return n=Object.assign?Object.assign.bind():function(e){for(var r=1;re.length)&&(r=e.length);for(var t=0,n=new Array(r);t(()=>{"use strict";var t={864:e=>{e.exports=r},24:r=>{r.exports=e}},n={};function o(e){var r=n[e];if(void 0!==r)return r.exports;var a=n[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return o.d(r,{a:r}),r},o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{o.r(a);var e=o(24),r=o.n(e),t=o(864);function n(){return n=Object.assign?Object.assign.bind():function(e){for(var r=1;re.length)&&(r=e.length);for(var t=0,n=new Array(r);t(()=>{"use strict";var t={864:e=>{e.exports=r},24:r=>{r.exports=e}},n={};function a(e){var r=n[e];if(void 0!==r)return r.exports;var o=n[e]={exports:{}};return t[e](o,o.exports,a),o.exports}a.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return a.d(r,{a:r}),r},a.d=(e,r)=>{for(var t in r)a.o(r,t)&&!a.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},a.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{a.r(o);var e=a(24),r=a.n(e),t=a(864);function n(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t(()=>{"use strict";var r={864:e=>{e.exports=t},24:t=>{t.exports=e}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var a=n[e]={exports:{}};return r[e](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{o.r(a);var e=o(24),t=o.n(e),r=o(864);function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r(()=>{"use strict";var t={864:e=>{e.exports=r},24:r=>{r.exports=e}},n={};function o(e){var r=n[e];if(void 0!==r)return r.exports;var a=n[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return o.d(r,{a:r}),r},o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{o.r(a);var e=o(24),r=o.n(e),t=o(864);function n(){return n=Object.assign?Object.assign.bind():function(e){for(var r=1;re.length)&&(r=e.length);for(var t=0,n=new Array(r);t(()=>{"use strict";var t={864:e=>{e.exports=r},24:r=>{r.exports=e}},n={};function o(e){var r=n[e];if(void 0!==r)return r.exports;var a=n[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return o.d(r,{a:r}),r},o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{o.r(a);var e=o(24),r=o.n(e),t=o(864);function n(){return n=Object.assign?Object.assign.bind():function(e){for(var r=1;re.length)&&(r=e.length);for(var t=0,n=new Array(r);t(()=>{"use strict";var t={864:e=>{e.exports=r},24:r=>{r.exports=e}},n={};function o(e){var r=n[e];if(void 0!==r)return r.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,o),i.exports}o.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return o.d(r,{a:r}),r},o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{o.r(i);var e=o(24),r=o.n(e),t=o(864);function n(){return n=Object.assign?Object.assign.bind():function(e){for(var r=1;re.length)&&(r=e.length);for(var t=0,n=new Array(r);t(()=>{"use strict";var r={24:r=>{r.exports=e}},t={};function o(e){var n=t[e];if(void 0!==n)return n.exports;var a=t[e]={exports:{}};return r[e](a,a.exports,o),a.exports}o.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return o.d(r,{a:r}),r},o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{o.r(n);var e=o(24),r=o.n(e);function t(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,o=new Array(r);t(()=>{"use strict";var t={24:t=>{t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o);var e=n(24),t=n.n(e);function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r(()=>{"use strict";var t={24:t=>{t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o);var e=n(24),t=n.n(e);function r(){return r=Object.assign?Object.assign.bind():function(e){for(var t=1;te.length)&&(t=e.length);for(var r=0,n=new Array(t);r 3 | -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | Graphor
-------------------------------------------------------------------------------- /build/static/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wvOoOvw/GraphEditor/63e930108b47a020aa917eb750ab39fd8ed0d335/build/static/icon.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app", 3 | "version": "0.0.0", 4 | "dependencies": { 5 | "@emotion/react": "^11.6.0", 6 | "@emotion/styled": "^11.6.0", 7 | "@mui/icons-material": "^5.14.3", 8 | "@mui/material": "^5.14.3", 9 | "echarts": "^5.4.1", 10 | "hls.js": "^1.1.5", 11 | "html2canvas": "^1.4.1", 12 | "imitation-imm": "^2.6.7", 13 | "react": "^17.0.2", 14 | "react-ace": "^9.5.0", 15 | "react-dom": "^17.0.2", 16 | "react-router": "^5.1.2", 17 | "react-router-dom": "^5.1.2" 18 | }, 19 | "devDependencies": { 20 | "@babel/core": "^7.17.10", 21 | "@babel/plugin-transform-runtime": "^7.17.10", 22 | "@babel/preset-env": "^7.14.8", 23 | "@babel/preset-react": "^7.14.5", 24 | "babel-loader": "^8.2.2", 25 | "clean-webpack-plugin": "^4.0.0-alpha.0", 26 | "css-loader": "^6.2.0", 27 | "file-loader": "^6.2.0", 28 | "html-webpack-plugin": "^5.5.0", 29 | "open": "^8.4.0", 30 | "style-loader": "^3.2.1", 31 | "webpack": "^5.50.0", 32 | "webpack-bundle-analyzer": "^4.5.0", 33 | "webpack-dev-server": "^4.1.1" 34 | }, 35 | "scripts": { 36 | "start": "node webpack/run.js --dev", 37 | "build": "node webpack/run.js --prod", 38 | "package": "node webpack/run.js --package", 39 | "commit": "git add . && git commit -m 'x' && git push origin master" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src-element/Basic-Audio/Edit.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { TextField } from '@mui/material' 4 | import { Grid } from '@mui/material' 5 | import { Switch } from '@mui/material' 6 | 7 | function Edit(props) { 8 | const { element, property, style, update, component, sx, sendMessage } = props 9 | 10 | return 11 | 12 | { property.property.src = e.target.value; update(); update() }} /> 13 | 14 | 15 |
Controls
16 | { property.controls = e.target.checked; update() }} /> 17 | 18 | 19 |
Autoplay
20 | { property.autoplay = e.target.checked; update() }} /> 21 | 22 | 23 |
Loop
24 | { property.loop = e.target.checked; update() }} /> 25 | 26 | 27 | } 28 | 29 | export default Edit -------------------------------------------------------------------------------- /src-element/Basic-Audio/Render.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function Render(props) { 4 | const { env, update, devParams, property, style, monitor, trigger, children, element, prop } = props 5 | 6 | const ref = React.useRef() 7 | 8 | const onEnded = e => { 9 | if (trigger && trigger.onEnded) trigger.onEnded(undefined, e) 10 | } 11 | 12 | React.useEffect(() => { 13 | if (monitor && monitor.setSrc) { 14 | const remove = monitor.setSrc(data => { 15 | property.src = data 16 | update() 17 | }) 18 | return () => { remove() } 19 | } 20 | }, []) 21 | 22 | React.useEffect(() => { 23 | if (monitor && monitor.play) { 24 | const remove = monitor.play(data => { 25 | ref.current.play() 26 | update() 27 | }) 28 | return () => { remove() } 29 | } 30 | }, []) 31 | 32 | React.useEffect(() => { 33 | if (monitor && monitor.pause) { 34 | const remove = monitor.pause(data => { 35 | ref.current.pause() 36 | update() 37 | }) 38 | return () => { remove() } 39 | } 40 | }, []) 41 | 42 | if (env === 'dev') { 43 | return