{"version":3,"names":["window","templates","_$_","sf","dom","$","__tmplt","_sf_internal","body_map","_replace","path","html","h","this","remove","reinitViews","append","document","body","apply","arguments","prepend","imports","task","Blackprint","loadScope","url","Context","getContext","fakeDestination","objLength","Sketch","registerInterface","IFace","Video","init","el","videoElement","$el","super","initClone","hotReloadedHTML","Microphone","constructor","node","v2m$selected","now","select","hotReloaded","hotReload"],"sources":["src/_init.sf","src/Display/Video.sf","src/Audio/Input/Microphone.sf"],"sourcesContent":[".js will run first before .sf\n\n## js-global\n// This script will run first, and then the other .sf files\n// depends on blackprint.config.js configuration\n\n// Wait until everything ready\nawait imports.task();\n\n// Because .js and .sf is separated\n// we also need to call loadScope just like _init.js\nlet Blackprint = window.Blackprint.loadScope({\n\t// You can find the URL on Blackprint menu -> Modules\n\t// This will also be exported to JSON if this module's nodes is being used\n\turl: import.meta.url,\n});\n\n// Use sQuery\nlet $ = sf.$;\n\n// Global shared context (wait it to avoid race condition)\nlet Context = await Blackprint.getContext('Multimedia');\nlet { fakeDestination, objLength } = Context;","## html\n<div class=\"node\" style=\"transform: translate({{ x }}px, {{ y }}px)\">\n  <sf-template path=\"Blackprint/nodes/template/routes.sf\"></sf-template>\n  <sf-template path=\"Blackprint/nodes/template/header.sf\"></sf-template>\n\n  <div class=\"content\">\n    <video crossorigin=\"anonymous\"></video>\n\n    <div class=\"left-port\">\n      <sf-template path=\"Blackprint/nodes/template/input-port.sf\"></sf-template>\n    </div>\n\n    <div class=\"right-port\">\n      <sf-template path=\"Blackprint/nodes/template/output-port.sf\"></sf-template>\n    </div>\n  </div>\n\n  <sf-template path=\"Blackprint/nodes/template/other.sf\"></sf-template>\n</div>\n\n## scss-global\nbpic-multimedia-display-video {\n  .content{\n    margin-top: 0 !important;\n  }\n  video{\n    width: 280px;\n    display: block;\n    border-bottom: 1px dashed white;\n    margin-bottom: 2px;\n  }\n}\n\n## js-global\nBlackprint.Sketch.registerInterface('BPIC/Multimedia/Display/Video',\nclass VideoSketch extends Context.IFace.Video {\n  init(el){\n    this.videoElement = this.$el('video');\n    super.init(el);\n  }\n\n  initClone(el){\n    // This will refresh and retrigger play for each element\n    this.videoElement = this.$el('video');\n  }\n\n\thotReloadedHTML(){ this.initClone() }\n});\n","## html\n<div class=\"node input\" style=\"transform: translate({{ x }}px, {{ y }}px)\">\n  <sf-template path=\"Blackprint/nodes/template/routes.sf\"></sf-template>\n  <sf-template path=\"Blackprint/nodes/template/header.sf\"></sf-template>\n  \n  <div class=\"content\">\n    <select sf-bind=\"selected\">\n      <option value=\"{{val.i}}\" sf-each=\"val in devices\">\n        {{val.label}}\n      </option>\n    </select>\n    \n    <div class=\"right-port\">\n      <sf-template path=\"Blackprint/nodes/template/output-port.sf\"></sf-template>\n    </div>\n  </div>\n  \n  <sf-template path=\"Blackprint/nodes/template/other.sf\"></sf-template>\n</div>\n\n## scss-global\nbpic-multimedia-audio-input-microphone {\n  select{\n    max-width: 100px;\n    margin: 1px 0 5px 5px;\n  }\n}\n\n## js-global\n// Sketch Interface-> BPIC/Multimedia/Audio/Input/Microphone\n// This will extend the original interface, and redesigned for sketch interface\nBlackprint.Sketch.registerInterface('BPIC/Multimedia/Audio/Input/Microphone',\nclass MicrophoneIFace extends Context.IFace.Microphone {\n\tconstructor(node){\n\t\tsuper(node);\n\t}\n\n\t// When the HTML was attached on DOM tree\n\tinit(){\n\t\tsuper.init();\n\t}\n\n\t// When the element was cloned\n\tinitClone(){\n\t\tthis.init();\n\t}\n\n\t// Event listener for 'selected'\n\t// View data to model only (user interact with the HTML)\n\tv2m$selected(now){\n\t\tthis.select(now);\n\t}\n\n\t// After HTML have reloaded\n\t// hotReloadedHTML(){}\n\n\t// When reloading have been completed\n\thotReloaded(){\n\t\tthis.init();\n\t}\n\n\thotReload(){\n\t\t// When reloading process\n\t}\n});"],"mappings":"qVAEAA,EAAAC,YAAAD,EAAAC,UAAA,QAAAC,EAAAC,GAAAC,KAAAD,GAAAE,EAAAC,EAAAN,EAAAC,UAAAD,EAAAO,aAAAP,EAAAO,cAAA,CAAAC,SAAA,GAAAC,SAAAC,EAAAC,GAAA,IAAAC,EAAAV,EAAAS,GAAA,OAAAE,KAAAL,SAAAE,IAAAG,KAAAL,SAAAE,GAAAI,SAAAD,KAAAE,aAAAF,KAAAE,YAAAH,GAAAC,KAAAL,SAAAE,GAAAE,CAAA,EAAAI,OAAAN,EAAAC,GAAAT,EAAAe,SAAAC,MAAAF,OAAAH,KAAAJ,SAAAU,MAAAN,KAAAO,WAAA,EAAAC,QAAAX,EAAAC,GAAAT,EAAAe,SAAAC,MAAAG,QAAAR,KAAAJ,SAAAU,MAAAN,KAAAO,WAAA,SAIAE,EAAAC,OAIA,IAAAC,EAAAxB,EAAAwB,WAAAC,UAAA,CAGAC,sBAOAC,GAHAxB,GAAAE,QAGAmB,EAAAI,WAAA,gBACAC,kBAAAC,aAAAH,E,mlBCaAH,EAAAO,OAAAC,kBAAA,gCACA,cAAAL,EAAAM,MAAAC,MACAC,KAAAC,GACAvB,KAAAwB,aAAAxB,KAAAyB,IAAA,SACAC,MAAAJ,KAAAC,EACA,CAEAI,UAAAJ,GAEAvB,KAAAwB,aAAAxB,KAAAyB,IAAA,QACA,CAEAG,kBAAA5B,KAAA2B,WAAA,I,ikBCfAhB,EAAAO,OAAAC,kBAAA,yCACA,cAAAL,EAAAM,MAAAS,WACAC,YAAAC,GACAL,MAAAK,EACA,CAGAT,OACAI,MAAAJ,MACA,CAGAK,YACA3B,KAAAsB,MACA,CAIAU,aAAAC,GACAjC,KAAAkC,OAAAD,EACA,CAMAE,cACAnC,KAAAsB,MACA,CAEAc,YACA,G"}