{"__symbolic":"module","version":3,"metadata":{"TpAudioEditorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"TpAudioEditorModule"}}}}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"tp-audio-editor","template":"\n    <canvas \n        DragAndDrop (fileDropEmitter)=\"onFileDropped($event)\"\n        #visualizer height=\"125px\" width=\"100px\"\n        (mousedown)=\"mousedown($event)\" \n        (mouseup)=\"mouseup($event)\" \n        (mousemove)=\"mousemove($event)\">\n    </canvas>\n    <div class=\"btn-container\">\n      <label id=\"durationLabel\">{{durationLabel}}</label>\n      <button \n        [disabled]=\"state === PluginState.DECODING || state === PluginState.DOWNLOADING\" \n        (click)=\"record()\">\n        {{recordLabel}}\n      </button>\n      <button [disabled]=\"!track || state === PluginState.DECODING || state === PluginState.RECORDING\" (click)=\"play()\">Play</button>\n      <button [disabled]=\"!track || state === PluginState.DECODING || state === PluginState.RECORDING\" (click)=\"pause()\">Pause</button>\n      <button [disabled]=\"!track || state === PluginState.DECODING || state === PluginState.RECORDING\" (click)=\"stop()\">Stop</button>\n    </div>\n    <div class=\"file-container\">\n          <input \n            [disabled]=\"state === PluginState.DECODING || state === PluginState.DOWNLOADING\" \n            type=\"file\" id=\"file\" name=\"file\" accept=\".mp3, .opus, .wav\" (change)=\"fileUploaded($event)\"/>\n        <label\n          [ngClass]=\"{'upload-disabled': state === PluginState.DECODING || state === PluginState.DOWNLOADING}\" \n          for=\"file\">\n          Upload\n        </label>\n        <label id=\"file-label\">{{fileLabel}}</label>\n        <div class=\"download-container\">\n            <select \n              [(ngModel)]=\"selectedFormat\" \n              [disabled]=\"state === PluginState.DOWNLOADING || state === PluginState.DECODING || !track\">\n                <option *ngFor=\"let f of formats\" [value]=\"f\">{{f}}</option>\n            </select>\n            <button \n              (click)=\"download()\" \n              [disabled]=\"state === PluginState.DOWNLOADING || state === PluginState.DECODING || !track\">\n              Download\n            </button>\n        </div>\n    </div>\n    <progress #progressBar value=\"0\" max=\"1\"></progress>\n  ","styles":["\n    :host {\n      width: 100%;\n      height: 100%;\n      display: block;\n      font-family: Arial, Helvetica, sans-serif;\n      -webkit-box-sizing: border-box;\n              box-sizing: border-box;\n    }\n\n    button, #file + label {\n        font-size: 0.8em;\n        padding: 10px;\n        margin: 10px;\n        background-color: white;\n        border: 1px solid cornflowerblue;\n        color: #505050;\n        -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;\n        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;\n        cursor: pointer;\n    }\n\n    #visualizer {\n        display: block;\n    }\n\n    button:hover:enabled, #file + label:hover {\n        background-color: cornflowerblue;\n        color: white;\n    }\n\n    button:disabled, #file + label:disabled {\n        color: #C6C6C6;\n        border-color: #C6C6C6;\n        cursor: default;\n    }\n\n    .btn-container {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n            -ms-flex-flow: row wrap;\n                flex-flow: row wrap;\n        -ms-flex-line-pack: start;\n            align-content: flex-start;\n    }\n\n    .btn-container > button {\n        -webkit-box-flex: 1;\n            -ms-flex-positive: 1;\n                flex-grow: 1;\n        -ms-flex-preferred-size: 0;\n            flex-basis: 0;\n    }\n\n    #durationLabel {\n        -webkit-box-flex: 0;\n            -ms-flex: 0 1 100%;\n                flex: 0 1 100%;\n        margin-left: 10px;\n        font-size: 0.8em;\n        color: #505050;\n    }\n\n    #file {\n        width: 0.1px;\n        height: 0.1px;\n        opacity: 0;\n        overflow: hidden;\n        position: absolute;\n        z-index: -1;\n    }\n\n    #file:focus + label {\n        outline: 1px dotted #000;\n        outline: -webkit-focus-ring-color auto 5px;\n    }\n\n    #file + label {\n        text-align: center;\n    }\n    #file-label {\n        font-size: 0.8em;\n        color: #505050;\n        margin-left: 10px;\n    }\n\n    .file-container {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n            -ms-flex-direction: row;\n                flex-direction: row;\n        -ms-flex-wrap: wrap;\n            flex-wrap: wrap;\n    }\n\n    .download-container {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        margin-left: auto;\n    }\n\n    .download-container > select {\n        margin: 10px;\n        border-color: cornflowerblue;\n    }\n\n    .download-container > select:disabled {\n        border-color: #C6C6C6;    \n    }\n\n    .upload-disabled {\n        border-color: #C6C6C6 !important;\n        color: #C6C6C6 !important;\n    }\n\n    .upload-disabled:hover {\n        background-color: white !important;\n        cursor: default !important;\n    }\n\n    progress {\n        margin-left: 10px;\n        width: calc(100% - 20px);\n    }\n  "]}]}],"members":{"inputBlob":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"canvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["visualizer"]}]}],"progressBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["progressBar"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getBlob":[{"__symbolic":"method"}],"handleKeyup":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:keyup",["$event"]]}]}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize",["$event"]]}]}],"onCopy":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:copy",["$event"]]}]}],"onCut":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:cut",["$event"]]}]}],"onPaste":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:paste",["$event"]]}]}],"mousedown":[{"__symbolic":"method"}],"mousemove":[{"__symbolic":"method"}],"mouseup":[{"__symbolic":"method"}],"onFileDropped":[{"__symbolic":"method"}],"fileUploaded":[{"__symbolic":"method"}],"record":[{"__symbolic":"method"}],"play":[{"__symbolic":"method"}],"pause":[{"__symbolic":"method"}],"stop":[{"__symbolic":"method"}],"download":[{"__symbolic":"method"}],"getXCoordinate":[{"__symbolic":"method"}],"setIndeterminate":[{"__symbolic":"method"}],"setProgress":[{"__symbolic":"method"}],"isValidFile":[{"__symbolic":"method"}],"decodeBlob":[{"__symbolic":"method"}],"downloadBlob":[{"__symbolic":"method"}],"trim":[{"__symbolic":"method"}],"formatDuration":[{"__symbolic":"method"}],"drawPlayhead":[{"__symbolic":"method"}],"drawInterval":[{"__symbolic":"method"}],"repaint":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[DragAndDrop]"}]}],"members":{"fileDropEmitter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["drop",["$event"]]}]}],"onDragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragover",["$event"]]}]}]}}},"origins":{"TpAudioEditorModule":"./src/app/tp-audio-editor/tp-audio-editor.module","ɵa":"./src/app/tp-audio-editor/tp-audio-editor.component","ɵb":"./src/app/tp-audio-editor/drag-and-drop.directive"},"importAs":"tp-audio-editor2"}