https://www.whiteboard.chat/static/js/58.bc4de629.chunk.js

1(this.webpackJsonpcollaborate=this.webpackJsonpcollaborate||[]).push([[58],{2283:function(e,t,n){"use strict";var r;Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=((r=n(2284))&&r.__esModule?r:{default:r}).default;t.default=o},2284:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){var r=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(e,n):{};r.get||r.set?Object.defineProperty(t,n,r):t[n]=e[n]}return t.default=e,t}(n(0)),o=a(n(2285)),i=a(n(2291));function a(e){return e&&e.__esModule?e:{default:e}}function l(e){return(l="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function c(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function u(e,t){return!t||"object"!==l(t)&&"function"!==typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function f(e,t){return(f=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}n(2293);var p=function(e){function t(e){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),u(this,s(t).call(this,e))}var n,a,l;return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&f(e,t)}(t,e),n=t,(a=[{key:"render",value:function(){return r.createElement("div",{className:"KeysContainer"},this.renderKeys())}},{key:"renderKeys",value:function(){for(var e=this.props,t=e.numberOfKeys,n=void 0===t?8:t,i=e.colors,a=e.shape,l=e.height,c=e.width,u=c?void 0:{flexGrow:1},s=[],f=1;f<n+1&&(i||!(f>=13));f++)s.push(r.createElement("div",{className:"Key",style:u,onMouseDown:this.pressedKey.bind(this,f),key:"Key-".concat(f)},r.createElement(o.default,{identifier:f,colors:i,shape:a,height:l,width:c,numberOfKeys:n})));return s}},{key:"pressedKey",value:function(e){var t=this.props,n=t.pressedKey,r=t.startingOctave,o=void 0===r?2:r,i=o>0?o:1;this.determinePressedNote(e,i),n&&n(e)}},{key:"determinePressedNote",value:function(e,t){var n=["C","D","E","F","G","A","B"],r=n.length;e<=r?(0,i.default)(n[e-1],t):this.determinePressedNote(e-r,t+1)}}])&&c(n.prototype,a),l&&c(n,l),t}(r.Component);t.default=p},2285:function(e,t,n){"use strict";var r;Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=((r=n(2286))&&r.__esModule?r:{default:r}).default;t.default=o},2286:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r,o=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){var r=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(e,n):{};r.get||r.set?Object.defineProperty(t,n,r):t[n]=e[n]}return t.default=e,t}(n(0)),i=(r=n(2287))&&r.__esModule?r:{default:r};function a(e){return(a="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function l(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function c(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function u(e,t){return!t||"object"!==a(t)&&"function"!==typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}

1function s(e){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function f(e,t){return(f=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}n(2290);var p=function(e){function t(e){var n;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(n=u(this,s(t).call(this,e))).state={pressed:!1},n}var n,r,a;return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&f(e,t)}(t,e),n=t,(r=[{key:"render",value:function(){var e=this.props,t=e.identifier,n=void 0===t?1:t,r=e.colors,a=e.shape,l=e.height,c=e.width;return o.createElement("div",{className:"Key-".concat(n),style:(r||a||l||c)&&this.createStyles(),onMouseDown:this.pressKey.bind(this),onMouseUp:this.releaseKey.bind(this),onMouseLeave:this.leaveKey.bind(this)},o.createElement(i.default,null),o.createElement(i.default,null))}},{key:"createStyles",value:function(){var e=this.props.colors,t={display:"flex",padding:"".concat(8,"px 0"),flexDirection:"column",alignItems:"center",justifyContent:"space-between",borderRadius:"8px"};return function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"===typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){l(e,t,n[t])}))}return e}({backgroundColor:e&&this.setColor(),boxShadow:"3px 3px ".concat(e&&this.determineElementToUse("background")),height:"".concat(this.setHeight()-16,"px"),width:"".concat(this.setWidth())},t)}},{key:"setColor",value:function(){return this.state.pressed?this.determineElementToUse("colorPressed"):this.determineElementToUse("color")}},{key:"setHeight",value:function(){var e=this.props,t=e.shape,n=e.height;return"flat"==t?void 0===n?200:n:this.calculateHeightBasedOnVaryingShape()}},{key:"setWidth",value:function(){var e=this.props.width;return e?"".concat(e,"px"):"100%"}},{key:"calculateHeightBasedOnVaryingShape",value:function(){var e=this.props.shape,t=void 0===e?"shrinking":e;return"shrinking"==t?this.calculateShrinkingHeight():"growing"==t?this.calculateGrowingHeight():void 0}},{key:"calculateGrowingHeight",value:function(){var e=this.props,t=e.height;return(void 0===t?200:t)+10*(e.identifier-1)}},{key:"calculateShrinkingHeight",value:function(){var e=this.props,t=e.height,n=void 0===t?200:t,r=e.identifier;return n+10*e.numberOfKeys-10*r}},{key:"determineElementToUse",value:function(e){var t=this.props.colors;return this.currentIdentifierElement()&&this.currentIdentifierElement().hasOwnProperty(e)?this.currentIdentifierElement()[e]:this.mostRecentProperty(t.length-1,e)}},{key:"currentIdentifierElement",value:function(){var e=this.props,t=e.identifier;return e.colors[t-1]}},{key:"mostRecentProperty",value:function(e,t){var n=this.props.colors;return n[e].hasOwnProperty(t)?n[e][t]:this.mostRecentProperty(e-1,t)}},{key:"pressKey",value:function(){this.setState({pressed:!0})}},{key:"releaseKey",value:function(){this.setState({pressed:!1})}},{key:"leaveKey",value:function(){this.state.pressed&&this.setState({pressed:!1})}}])&&c(n.prototype,r),a&&c(n,a),t}(o.Component);t.default=p},2287:function(e,t,n){"use strict";var r;Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=((r=n(2288))&&r.__esModule?r:{default:r}).default;t.default=o},2288:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){var r=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(e,n):{};r.get||r.set?Object.defineProperty(t,n,r):t[n]=e[n]}return t.default=e,t}(n(0));function o(e){return(o="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function l(e,t){return!t||"object"!==o(t)&&"function"!==typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}

1function c(e){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function u(e,t){return(u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}n(2289);var s=function(e){function t(){return i(this,t),l(this,c(t).apply(this,arguments))}var n,o,s;return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&u(e,t)}(t,e),n=t,(o=[{key:"render",value:function(){return r.createElement("div",{className:"Screw"})}}])&&a(n.prototype,o),s&&a(n,s),t}(r.Component);t.default=s},2289:function(e,t,n){},2290:function(e,t,n){},2291:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){var n=new l(a),r=Math.pow(2,t),i=o.default[e]*r;n.play(i),n.stop()};var r,o=(r=n(2292))&&r.__esModule?r:{default:r};function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var a=new(window.AudioContext||window.webkitAudioContext),l=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.context=t}var t,n,r;return t=e,(n=[{key:"setup",value:function(){this.oscillator=this.context.createOscillator(),this.gainNode=this.context.createGain(),this.oscillator.connect(this.gainNode),this.gainNode.connect(this.context.destination),this.oscillator.type="sine"}},{key:"play",value:function(e){this.setup(),this.oscillator.frequency.value=e,this.gainNode.gain.setValueAtTime(0,this.context.currentTime),this.gainNode.gain.linearRampToValueAtTime(.2,this.context.currentTime+.01),this.oscillator.start(this.context.currentTime),this.stop(this.context.currentTime)}},{key:"stop",value:function(){this.gainNode.gain.exponentialRampToValueAtTime(.001,this.context.currentTime+1),this.oscillator.stop(this.context.currentTime+1)}}])&&i(t.prototype,n),r&&i(t,r),e}()},2292:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r={C:130.75,D:146.75,E:164.75,F:174.5,G:196,A:220,B:247};t.default=r},2293:function(e,t,n){},2528:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return v}));var r=n(11),o=n(0),i=n.n(o),a=n(89),l=n(298),c=n(280),u=n.n(c),s=n(112),f=n(231),p=n(2283),d=n.n(p),h=n(22),y=n(350),b=Object(l.a)((function(e){return{draggableParent:{position:"absolute",top:"0",left:"0",width:"calc(100%)",height:"calc(100%)",padding:"50px 5px 5px 50px"},draggableWindow:{position:"absolute",zIndex:"99",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",resize:"both",overflow:"auto",background:"#FAFAFA55",borderRadius:"5px"},draggableTop:{display:"flex",flexDirection:"row",width:"100%",height:"25px",justifyContent:"flex-end",cursor:"grab",color:"white"},draggableTopHandle:{display:"flex",flexGrow:"1"},draggableTopCloseButton:{display:"flex"},windowHeader:{display:"flex",flexDirection:"row",width:"100%",padding:"10px 5px 5px"},windowURLInput:{display:"flex",flexGrow:"1"},windowButton:{display:"flex",width:"30px",padding:"0",color:"white","&:hover":{color:"white"}},windowIframeOutput:{position:"absolute",display:"flex",backgroundColor:"#DCDCDC",padding:"0px",width:"100%",height:"100%"},windowIframeOverlay:{position:"absolute",display:"flex",backgroundColor:"transparent",width:"100%",height:"calc(100% - 20px)",marginBottom:"-20px"},verticalEdge:{display:"flex",width:"2px",height:"100%",cursor:"n-resize"},horizontalEdge:{display:"flex",width:"100%",height:"2px"}}}));function v(e){var t=i.a.useState({width:"500px",height:"300px"}),n=Object(r.a)(t,1)[0],o=i.a.useState({x:0,y:300}),l=Object(r.a)(o,2),c=l[0],p=l[1],v=i.a.useState(null),g=Object(r.a)(v,2),w=g[0],m=g[1],O=i.a.createRef(null),x=Object(a.d)((function(e){return e.teacher})),j=b();i.a.useEffect((function(){e.obj&&m(e.obj)}),[e]);return i.a.createElement("div",{className:j.draggableParent},i.a.createElement(u.a,{handle:"strong",bounds:"parent",onDrag:function(e,t){t.y<60||t.y>window.innerHeight-160||t.x<0||t.x>window.innerWidth-460||p((function(e){return{x:e.x+t.deltaX,y:e.y+t.deltaY}}))},onStart:function(){},onStop:function(e,t){t.y<60||t.y>window.innerHeight-160||t.x<0||t.x>window.innerWidth-460||p((function(e){return{x:t.lastX,y:t.lastY}}))},position:c},i.a.createElement("div",{id:"window-pioano",className:j.draggableWindow,ref:O,style:{width:n.width,height:n.height,resize:1===x?"both":"none",overflow:1===x?"auto":"none"}},i.a.createElement("div",{className:j.draggableTop,style:{width:"100%",height:"14px",backgroundColor:"#E2E6E9"}},i.a.createElement("strong",{className:Object(h.a)(j.draggableTopHandle,"justify-center")},i.a.createElement("svg",{width:"30",height:"10",viewBox:"0 0 15 3",xmlns:"http://www.w3.org/2000/svg",style:{position:"absolute",top:"0px"},className:"m2px"},y.a.dots)),i.a.createElement(s.a,{className:j.windowButton,style:{display:"flex",color:e.inkColor},onClick:function(){w&&w.id&&1===x&&f.Fb(w),e.cb&&e.cb(null)}},i.a.createElement("img",{src:"/closeIcon.svg",alt:"Close Icon",className:"cIcon m2px"}))),i.a.createElement("div",{style:{width:"400px",height:"100%"}},i.a.createElement(d.a,{colors:[{color:"red",colorPressed:"grey",background:"salmon"},{color:"orange"},{color:"yellow"},{color:"green"},{color:"teal"},{color:"indigo"},{color:"violet"},{color:"red"}]})))))}}}]);