{ "version": 3, "sources": ["../../../node_modules/@rails/actioncable/src/adapters.js", "../../../node_modules/@rails/actioncable/src/logger.js", "../../../node_modules/@rails/actioncable/src/connection_monitor.js", "../../../node_modules/@rails/actioncable/src/internal.js", "../../../node_modules/@rails/actioncable/src/connection.js", "../../../node_modules/@rails/actioncable/src/subscription.js", "../../../node_modules/@rails/actioncable/src/subscription_guarantor.js", "../../../node_modules/@rails/actioncable/src/subscriptions.js", "../../../node_modules/@rails/actioncable/src/consumer.js", "../../../node_modules/@rails/actioncable/src/index.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/webpack/universalModuleDefinition", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/drawer.canvasentry.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/drawer.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/drawer.multicanvas.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/mediaelement-webaudio.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/mediaelement.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/peakcache.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/util/absMax.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/util/clamp.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/util/fetch.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/util/frame.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/util/get-id.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/util/index.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/util/max.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/util/min.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/util/observer.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/util/orientation.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/util/prevent-click.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/util/request-animation-frame.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/util/silence-mode.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/util/style.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/wavesurfer.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/src/webaudio.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/node_modules/debounce/index.js", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/webpack/bootstrap", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/webpack/before-startup", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/webpack/startup", "../../../node_modules/wavesurfer.js/dist/webpack:/WaveSurfer/webpack/after-startup", "../../../node_modules/flatpickr/dist/l10n/de.js", "../../../node_modules/tom-select/src/contrib/microevent.ts", "../../../node_modules/tom-select/src/contrib/microplugin.ts", "../../../node_modules/tom-select/node_modules/@orchidjs/unicode-variants/dist/esm/regex.js", "../../../node_modules/tom-select/node_modules/@orchidjs/unicode-variants/dist/esm/strings.js", "../../../node_modules/tom-select/node_modules/@orchidjs/unicode-variants/dist/esm/index.js", "../../../node_modules/tom-select/node_modules/@orchidjs/sifter/dist/esm/utils.js", "../../../node_modules/tom-select/node_modules/@orchidjs/sifter/dist/esm/sifter.js", "../../../node_modules/tom-select/node_modules/@orchidjs/sifter/lib/utils.ts", "../../../node_modules/tom-select/src/vanilla.ts", "../../../node_modules/tom-select/src/contrib/highlight.ts", "../../../node_modules/tom-select/src/constants.ts", "../../../node_modules/tom-select/src/defaults.ts", "../../../node_modules/tom-select/src/utils.ts", "../../../node_modules/tom-select/src/getSettings.ts", "../../../node_modules/tom-select/src/tom-select.ts", "../../../node_modules/tom-select/src/plugins/change_listener/plugin.ts", "../../../node_modules/tom-select/src/plugins/checkbox_options/plugin.ts", "../../../node_modules/tom-select/src/plugins/clear_button/plugin.ts", "../../../node_modules/tom-select/src/plugins/drag_drop/plugin.ts", "../../../node_modules/tom-select/src/plugins/dropdown_header/plugin.ts", "../../../node_modules/tom-select/src/plugins/caret_position/plugin.ts", "../../../node_modules/tom-select/src/plugins/dropdown_input/plugin.ts", "../../../node_modules/tom-select/src/plugins/input_autogrow/plugin.ts", "../../../node_modules/tom-select/src/plugins/no_backspace_delete/plugin.ts", "../../../node_modules/tom-select/src/plugins/no_active_items/plugin.ts", "../../../node_modules/tom-select/src/plugins/optgroup_columns/plugin.ts", "../../../node_modules/tom-select/src/plugins/remove_button/plugin.ts", "../../../node_modules/tom-select/src/plugins/restore_on_backspace/plugin.ts", "../../../node_modules/tom-select/src/plugins/virtual_scroll/plugin.ts", "../../../node_modules/tom-select/src/tom-select.complete.ts", "../../../node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js", "../../../node_modules/@hotwired/turbo-rails/app/javascript/turbo/cable.js", "../../../node_modules/@hotwired/turbo-rails/app/javascript/turbo/snakeize.js", "../../../node_modules/@hotwired/turbo-rails/app/javascript/turbo/cable_stream_source_element.js", "../../../node_modules/@hotwired/turbo-rails/app/javascript/turbo/fetch_requests.js", "../../../node_modules/@hotwired/turbo-rails/app/javascript/turbo/index.js", "../../../node_modules/@hotwired/stimulus/dist/stimulus.js", "../javascripts/controllers/application.js", "../javascripts/controllers/audio_button_controller.js", "../javascripts/controllers/audio_player_controller.js", "../javascripts/controllers/casting_controller.js", "../../../node_modules/js-cookie/dist/js.cookie.mjs", "../javascripts/controllers/favorites_controller.js", "../../../node_modules/flatpickr/dist/esm/types/options.js", "../../../node_modules/flatpickr/dist/esm/l10n/default.js", "../../../node_modules/flatpickr/dist/esm/utils/index.js", "../../../node_modules/flatpickr/dist/esm/utils/dom.js", "../../../node_modules/flatpickr/dist/esm/utils/formatting.js", "../../../node_modules/flatpickr/dist/esm/utils/dates.js", "../../../node_modules/flatpickr/dist/esm/utils/polyfills.js", "../../../node_modules/flatpickr/dist/esm/index.js", "../../../node_modules/stimulus-flatpickr/node_modules/@hotwired/stimulus/dist/stimulus.js", "../../../node_modules/stimulus-flatpickr/src/utils.js", "../../../node_modules/stimulus-flatpickr/src/config_options.js", "../../../node_modules/stimulus-flatpickr/src/events.js", "../../../node_modules/stimulus-flatpickr/src/elements.js", "../../../node_modules/stimulus-flatpickr/src/strftime_mapping.js", "../../../node_modules/stimulus-flatpickr/src/index.js", "../javascripts/controllers/flatpickr_controller.js", "../javascripts/controllers/tom_select_controller.js", "../../../node_modules/@rails/request.js/src/fetch_response.js", "../../../node_modules/@rails/request.js/src/request_interceptor.js", "../../../node_modules/@rails/request.js/src/lib/utils.js", "../../../node_modules/@rails/request.js/src/fetch_request.js", "../../../node_modules/@rails/request.js/src/verbs.js", "../javascripts/controllers/inquiry_controller.js", "../../../node_modules/sortablejs/modular/sortable.esm.js", "../javascripts/controllers/sortable_controller.js", "../javascripts/controllers/index.js", "../../../node_modules/@popperjs/core/lib/index.js", "../../../node_modules/@popperjs/core/lib/enums.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getNodeName.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getWindow.js", "../../../node_modules/@popperjs/core/lib/dom-utils/instanceOf.js", "../../../node_modules/@popperjs/core/lib/modifiers/applyStyles.js", "../../../node_modules/@popperjs/core/lib/utils/getBasePlacement.js", "../../../node_modules/@popperjs/core/lib/utils/math.js", "../../../node_modules/@popperjs/core/lib/utils/userAgent.js", "../../../node_modules/@popperjs/core/lib/dom-utils/isLayoutViewport.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js", "../../../node_modules/@popperjs/core/lib/dom-utils/contains.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getComputedStyle.js", "../../../node_modules/@popperjs/core/lib/dom-utils/isTableElement.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getDocumentElement.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getParentNode.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getOffsetParent.js", "../../../node_modules/@popperjs/core/lib/utils/getMainAxisFromPlacement.js", "../../../node_modules/@popperjs/core/lib/utils/within.js", "../../../node_modules/@popperjs/core/lib/utils/getFreshSideObject.js", "../../../node_modules/@popperjs/core/lib/utils/mergePaddingObject.js", "../../../node_modules/@popperjs/core/lib/utils/expandToHashMap.js", "../../../node_modules/@popperjs/core/lib/modifiers/arrow.js", "../../../node_modules/@popperjs/core/lib/utils/getVariation.js", "../../../node_modules/@popperjs/core/lib/modifiers/computeStyles.js", "../../../node_modules/@popperjs/core/lib/modifiers/eventListeners.js", "../../../node_modules/@popperjs/core/lib/utils/getOppositePlacement.js", "../../../node_modules/@popperjs/core/lib/utils/getOppositeVariationPlacement.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getWindowScroll.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getViewportRect.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js", "../../../node_modules/@popperjs/core/lib/dom-utils/isScrollParent.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getScrollParent.js", "../../../node_modules/@popperjs/core/lib/dom-utils/listScrollParents.js", "../../../node_modules/@popperjs/core/lib/utils/rectToClientRect.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js", "../../../node_modules/@popperjs/core/lib/utils/computeOffsets.js", "../../../node_modules/@popperjs/core/lib/utils/detectOverflow.js", "../../../node_modules/@popperjs/core/lib/utils/computeAutoPlacement.js", "../../../node_modules/@popperjs/core/lib/modifiers/flip.js", "../../../node_modules/@popperjs/core/lib/modifiers/hide.js", "../../../node_modules/@popperjs/core/lib/modifiers/offset.js", "../../../node_modules/@popperjs/core/lib/modifiers/popperOffsets.js", "../../../node_modules/@popperjs/core/lib/utils/getAltAxis.js", "../../../node_modules/@popperjs/core/lib/modifiers/preventOverflow.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getHTMLElementScroll.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getNodeScroll.js", "../../../node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js", "../../../node_modules/@popperjs/core/lib/utils/orderModifiers.js", "../../../node_modules/@popperjs/core/lib/utils/debounce.js", "../../../node_modules/@popperjs/core/lib/utils/mergeByName.js", "../../../node_modules/@popperjs/core/lib/createPopper.js", "../../../node_modules/@popperjs/core/lib/popper-lite.js", "../../../node_modules/@popperjs/core/lib/popper.js", "../../../node_modules/bootstrap/js/src/util/index.js", "../../../node_modules/bootstrap/js/src/dom/event-handler.js", "../../../node_modules/bootstrap/js/src/dom/data.js", "../../../node_modules/bootstrap/js/src/dom/manipulator.js", "../../../node_modules/bootstrap/js/src/util/config.js", "../../../node_modules/bootstrap/js/src/base-component.js", "../../../node_modules/bootstrap/js/src/util/component-functions.js", "../../../node_modules/bootstrap/js/src/alert.js", "../../../node_modules/bootstrap/js/src/button.js", "../../../node_modules/bootstrap/js/src/dom/selector-engine.js", "../../../node_modules/bootstrap/js/src/util/swipe.js", "../../../node_modules/bootstrap/js/src/carousel.js", "../../../node_modules/bootstrap/js/src/collapse.js", "../../../node_modules/bootstrap/js/src/dropdown.js", "../../../node_modules/bootstrap/js/src/util/scrollbar.js", "../../../node_modules/bootstrap/js/src/util/backdrop.js", "../../../node_modules/bootstrap/js/src/util/focustrap.js", "../../../node_modules/bootstrap/js/src/modal.js", "../../../node_modules/bootstrap/js/src/offcanvas.js", "../../../node_modules/bootstrap/js/src/util/sanitizer.js", "../../../node_modules/bootstrap/js/src/util/template-factory.js", "../../../node_modules/bootstrap/js/src/tooltip.js", "../../../node_modules/bootstrap/js/src/popover.js", "../../../node_modules/bootstrap/js/src/scrollspy.js", "../../../node_modules/bootstrap/js/src/tab.js", "../../../node_modules/bootstrap/js/src/toast.js", "../../../node_modules/trix/dist/trix.esm.min.js", "../../../node_modules/@rails/actiontext/app/assets/javascripts/actiontext.js", "../../../node_modules/@fortawesome/fontawesome-svg-core/index.mjs", "../../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs", "../javascripts/fontawesome.js", "../javascripts/trix.js", "../javascripts/google-analytics.js", "../javascripts/application.js"], "sourcesContent": ["export default {\n logger: self.console,\n WebSocket: self.WebSocket\n}\n", "import adapters from \"./adapters\"\n\n// The logger is disabled by default. You can enable it with:\n//\n// ActionCable.logger.enabled = true\n//\n// Example:\n//\n// import * as ActionCable from '@rails/actioncable'\n//\n// ActionCable.logger.enabled = true\n// ActionCable.logger.log('Connection Established.')\n//\n\nexport default {\n log(...messages) {\n if (this.enabled) {\n messages.push(Date.now())\n adapters.logger.log(\"[ActionCable]\", ...messages)\n }\n },\n}\n", "import logger from \"./logger\"\n\n// Responsible for ensuring the cable connection is in good health by validating the heartbeat pings sent from the server, and attempting\n// revival reconnections if things go astray. Internal class, not intended for direct user manipulation.\n\nconst now = () => new Date().getTime()\n\nconst secondsSince = time => (now() - time) / 1000\n\nclass ConnectionMonitor {\n constructor(connection) {\n this.visibilityDidChange = this.visibilityDidChange.bind(this)\n this.connection = connection\n this.reconnectAttempts = 0\n }\n\n start() {\n if (!this.isRunning()) {\n this.startedAt = now()\n delete this.stoppedAt\n this.startPolling()\n addEventListener(\"visibilitychange\", this.visibilityDidChange)\n logger.log(`ConnectionMonitor started. stale threshold = ${this.constructor.staleThreshold} s`)\n }\n }\n\n stop() {\n if (this.isRunning()) {\n this.stoppedAt = now()\n this.stopPolling()\n removeEventListener(\"visibilitychange\", this.visibilityDidChange)\n logger.log(\"ConnectionMonitor stopped\")\n }\n }\n\n isRunning() {\n return this.startedAt && !this.stoppedAt\n }\n\n recordPing() {\n this.pingedAt = now()\n }\n\n recordConnect() {\n this.reconnectAttempts = 0\n this.recordPing()\n delete this.disconnectedAt\n logger.log(\"ConnectionMonitor recorded connect\")\n }\n\n recordDisconnect() {\n this.disconnectedAt = now()\n logger.log(\"ConnectionMonitor recorded disconnect\")\n }\n\n // Private\n\n startPolling() {\n this.stopPolling()\n this.poll()\n }\n\n stopPolling() {\n clearTimeout(this.pollTimeout)\n }\n\n poll() {\n this.pollTimeout = setTimeout(() => {\n this.reconnectIfStale()\n this.poll()\n }\n , this.getPollInterval())\n }\n\n getPollInterval() {\n const { staleThreshold, reconnectionBackoffRate } = this.constructor\n const backoff = Math.pow(1 + reconnectionBackoffRate, Math.min(this.reconnectAttempts, 10))\n const jitterMax = this.reconnectAttempts === 0 ? 1.0 : reconnectionBackoffRate\n const jitter = jitterMax * Math.random()\n return staleThreshold * 1000 * backoff * (1 + jitter)\n }\n\n reconnectIfStale() {\n if (this.connectionIsStale()) {\n logger.log(`ConnectionMonitor detected stale connection. reconnectAttempts = ${this.reconnectAttempts}, time stale = ${secondsSince(this.refreshedAt)} s, stale threshold = ${this.constructor.staleThreshold} s`)\n this.reconnectAttempts++\n if (this.disconnectedRecently()) {\n logger.log(`ConnectionMonitor skipping reopening recent disconnect. time disconnected = ${secondsSince(this.disconnectedAt)} s`)\n } else {\n logger.log(\"ConnectionMonitor reopening\")\n this.connection.reopen()\n }\n }\n }\n\n get refreshedAt() {\n return this.pingedAt ? this.pingedAt : this.startedAt\n }\n\n connectionIsStale() {\n return secondsSince(this.refreshedAt) > this.constructor.staleThreshold\n }\n\n disconnectedRecently() {\n return this.disconnectedAt && (secondsSince(this.disconnectedAt) < this.constructor.staleThreshold)\n }\n\n visibilityDidChange() {\n if (document.visibilityState === \"visible\") {\n setTimeout(() => {\n if (this.connectionIsStale() || !this.connection.isOpen()) {\n logger.log(`ConnectionMonitor reopening stale connection on visibilitychange. visibilityState = ${document.visibilityState}`)\n this.connection.reopen()\n }\n }\n , 200)\n }\n }\n\n}\n\nConnectionMonitor.staleThreshold = 6 // Server::Connections::BEAT_INTERVAL * 2 (missed two pings)\nConnectionMonitor.reconnectionBackoffRate = 0.15\n\nexport default ConnectionMonitor\n", "export default {\n \"message_types\": {\n \"welcome\": \"welcome\",\n \"disconnect\": \"disconnect\",\n \"ping\": \"ping\",\n \"confirmation\": \"confirm_subscription\",\n \"rejection\": \"reject_subscription\"\n },\n \"disconnect_reasons\": {\n \"unauthorized\": \"unauthorized\",\n \"invalid_request\": \"invalid_request\",\n \"server_restart\": \"server_restart\"\n },\n \"default_mount_path\": \"/cable\",\n \"protocols\": [\n \"actioncable-v1-json\",\n \"actioncable-unsupported\"\n ]\n}\n", "import adapters from \"./adapters\"\nimport ConnectionMonitor from \"./connection_monitor\"\nimport INTERNAL from \"./internal\"\nimport logger from \"./logger\"\n\n// Encapsulate the cable connection held by the consumer. This is an internal class not intended for direct user manipulation.\n\nconst {message_types, protocols} = INTERNAL\nconst supportedProtocols = protocols.slice(0, protocols.length - 1)\n\nconst indexOf = [].indexOf\n\nclass Connection {\n constructor(consumer) {\n this.open = this.open.bind(this)\n this.consumer = consumer\n this.subscriptions = this.consumer.subscriptions\n this.monitor = new ConnectionMonitor(this)\n this.disconnected = true\n }\n\n send(data) {\n if (this.isOpen()) {\n this.webSocket.send(JSON.stringify(data))\n return true\n } else {\n return false\n }\n }\n\n open() {\n if (this.isActive()) {\n logger.log(`Attempted to open WebSocket, but existing socket is ${this.getState()}`)\n return false\n } else {\n logger.log(`Opening WebSocket, current state is ${this.getState()}, subprotocols: ${protocols}`)\n if (this.webSocket) { this.uninstallEventHandlers() }\n this.webSocket = new adapters.WebSocket(this.consumer.url, protocols)\n this.installEventHandlers()\n this.monitor.start()\n return true\n }\n }\n\n close({allowReconnect} = {allowReconnect: true}) {\n if (!allowReconnect) { this.monitor.stop() }\n // Avoid closing websockets in a \"connecting\" state due to Safari 15.1+ bug. See: https://github.com/rails/rails/issues/43835#issuecomment-1002288478\n if (this.isOpen()) {\n return this.webSocket.close()\n }\n }\n\n reopen() {\n logger.log(`Reopening WebSocket, current state is ${this.getState()}`)\n if (this.isActive()) {\n try {\n return this.close()\n } catch (error) {\n logger.log(\"Failed to reopen WebSocket\", error)\n }\n finally {\n logger.log(`Reopening WebSocket in ${this.constructor.reopenDelay}ms`)\n setTimeout(this.open, this.constructor.reopenDelay)\n }\n } else {\n return this.open()\n }\n }\n\n getProtocol() {\n if (this.webSocket) {\n return this.webSocket.protocol\n }\n }\n\n isOpen() {\n return this.isState(\"open\")\n }\n\n isActive() {\n return this.isState(\"open\", \"connecting\")\n }\n\n // Private\n\n isProtocolSupported() {\n return indexOf.call(supportedProtocols, this.getProtocol()) >= 0\n }\n\n isState(...states) {\n return indexOf.call(states, this.getState()) >= 0\n }\n\n getState() {\n if (this.webSocket) {\n for (let state in adapters.WebSocket) {\n if (adapters.WebSocket[state] === this.webSocket.readyState) {\n return state.toLowerCase()\n }\n }\n }\n return null\n }\n\n installEventHandlers() {\n for (let eventName in this.events) {\n const handler = this.events[eventName].bind(this)\n this.webSocket[`on${eventName}`] = handler\n }\n }\n\n uninstallEventHandlers() {\n for (let eventName in this.events) {\n this.webSocket[`on${eventName}`] = function() {}\n }\n }\n\n}\n\nConnection.reopenDelay = 500\n\nConnection.prototype.events = {\n message(event) {\n if (!this.isProtocolSupported()) { return }\n const {identifier, message, reason, reconnect, type} = JSON.parse(event.data)\n switch (type) {\n case message_types.welcome:\n this.monitor.recordConnect()\n return this.subscriptions.reload()\n case message_types.disconnect:\n logger.log(`Disconnecting. Reason: ${reason}`)\n return this.close({allowReconnect: reconnect})\n case message_types.ping:\n return this.monitor.recordPing()\n case message_types.confirmation:\n this.subscriptions.confirmSubscription(identifier)\n return this.subscriptions.notify(identifier, \"connected\")\n case message_types.rejection:\n return this.subscriptions.reject(identifier)\n default:\n return this.subscriptions.notify(identifier, \"received\", message)\n }\n },\n\n open() {\n logger.log(`WebSocket onopen event, using '${this.getProtocol()}' subprotocol`)\n this.disconnected = false\n if (!this.isProtocolSupported()) {\n logger.log(\"Protocol is unsupported. Stopping monitor and disconnecting.\")\n return this.close({allowReconnect: false})\n }\n },\n\n close(event) {\n logger.log(\"WebSocket onclose event\")\n if (this.disconnected) { return }\n this.disconnected = true\n this.monitor.recordDisconnect()\n return this.subscriptions.notifyAll(\"disconnected\", {willAttemptReconnect: this.monitor.isRunning()})\n },\n\n error() {\n logger.log(\"WebSocket onerror event\")\n }\n}\n\nexport default Connection\n", "// A new subscription is created through the ActionCable.Subscriptions instance available on the consumer.\n// It provides a number of callbacks and a method for calling remote procedure calls on the corresponding\n// Channel instance on the server side.\n//\n// An example demonstrates the basic functionality:\n//\n// App.appearance = App.cable.subscriptions.create(\"AppearanceChannel\", {\n// connected() {\n// // Called once the subscription has been successfully completed\n// },\n//\n// disconnected({ willAttemptReconnect: boolean }) {\n// // Called when the client has disconnected with the server.\n// // The object will have an `willAttemptReconnect` property which\n// // says whether the client has the intention of attempting\n// // to reconnect.\n// },\n//\n// appear() {\n// this.perform('appear', {appearing_on: this.appearingOn()})\n// },\n//\n// away() {\n// this.perform('away')\n// },\n//\n// appearingOn() {\n// $('main').data('appearing-on')\n// }\n// })\n//\n// The methods #appear and #away forward their intent to the remote AppearanceChannel instance on the server\n// by calling the `perform` method with the first parameter being the action (which maps to AppearanceChannel#appear/away).\n// The second parameter is a hash that'll get JSON encoded and made available on the server in the data parameter.\n//\n// This is how the server component would look:\n//\n// class AppearanceChannel < ApplicationActionCable::Channel\n// def subscribed\n// current_user.appear\n// end\n//\n// def unsubscribed\n// current_user.disappear\n// end\n//\n// def appear(data)\n// current_user.appear on: data['appearing_on']\n// end\n//\n// def away\n// current_user.away\n// end\n// end\n//\n// The \"AppearanceChannel\" name is automatically mapped between the client-side subscription creation and the server-side Ruby class name.\n// The AppearanceChannel#appear/away public methods are exposed automatically to client-side invocation through the perform method.\n\nconst extend = function(object, properties) {\n if (properties != null) {\n for (let key in properties) {\n const value = properties[key]\n object[key] = value\n }\n }\n return object\n}\n\nexport default class Subscription {\n constructor(consumer, params = {}, mixin) {\n this.consumer = consumer\n this.identifier = JSON.stringify(params)\n extend(this, mixin)\n }\n\n // Perform a channel action with the optional data passed as an attribute\n perform(action, data = {}) {\n data.action = action\n return this.send(data)\n }\n\n send(data) {\n return this.consumer.send({command: \"message\", identifier: this.identifier, data: JSON.stringify(data)})\n }\n\n unsubscribe() {\n return this.consumer.subscriptions.remove(this)\n }\n}\n", "import logger from \"./logger\"\n\n// Responsible for ensuring channel subscribe command is confirmed, retrying until confirmation is received.\n// Internal class, not intended for direct user manipulation.\n\nclass SubscriptionGuarantor {\n constructor(subscriptions) {\n this.subscriptions = subscriptions\n this.pendingSubscriptions = []\n }\n\n guarantee(subscription) {\n if(this.pendingSubscriptions.indexOf(subscription) == -1){ \n logger.log(`SubscriptionGuarantor guaranteeing ${subscription.identifier}`)\n this.pendingSubscriptions.push(subscription) \n }\n else {\n logger.log(`SubscriptionGuarantor already guaranteeing ${subscription.identifier}`)\n }\n this.startGuaranteeing()\n }\n\n forget(subscription) {\n logger.log(`SubscriptionGuarantor forgetting ${subscription.identifier}`)\n this.pendingSubscriptions = (this.pendingSubscriptions.filter((s) => s !== subscription))\n }\n\n startGuaranteeing() {\n this.stopGuaranteeing()\n this.retrySubscribing()\n }\n \n stopGuaranteeing() {\n clearTimeout(this.retryTimeout)\n }\n\n retrySubscribing() {\n this.retryTimeout = setTimeout(() => {\n if (this.subscriptions && typeof(this.subscriptions.subscribe) === \"function\") {\n this.pendingSubscriptions.map((subscription) => {\n logger.log(`SubscriptionGuarantor resubscribing ${subscription.identifier}`)\n this.subscriptions.subscribe(subscription)\n })\n }\n }\n , 500)\n }\n}\n\nexport default SubscriptionGuarantor", "import Subscription from \"./subscription\"\nimport SubscriptionGuarantor from \"./subscription_guarantor\"\nimport logger from \"./logger\"\n\n// Collection class for creating (and internally managing) channel subscriptions.\n// The only method intended to be triggered by the user is ActionCable.Subscriptions#create,\n// and it should be called through the consumer like so:\n//\n// App = {}\n// App.cable = ActionCable.createConsumer(\"ws://example.com/accounts/1\")\n// App.appearance = App.cable.subscriptions.create(\"AppearanceChannel\")\n//\n// For more details on how you'd configure an actual channel subscription, see ActionCable.Subscription.\n\nexport default class Subscriptions {\n constructor(consumer) {\n this.consumer = consumer\n this.guarantor = new SubscriptionGuarantor(this)\n this.subscriptions = []\n }\n\n create(channelName, mixin) {\n const channel = channelName\n const params = typeof channel === \"object\" ? channel : {channel}\n const subscription = new Subscription(this.consumer, params, mixin)\n return this.add(subscription)\n }\n\n // Private\n\n add(subscription) {\n this.subscriptions.push(subscription)\n this.consumer.ensureActiveConnection()\n this.notify(subscription, \"initialized\")\n this.subscribe(subscription)\n return subscription\n }\n\n remove(subscription) {\n this.forget(subscription)\n if (!this.findAll(subscription.identifier).length) {\n this.sendCommand(subscription, \"unsubscribe\")\n }\n return subscription\n }\n\n reject(identifier) {\n return this.findAll(identifier).map((subscription) => {\n this.forget(subscription)\n this.notify(subscription, \"rejected\")\n return subscription\n })\n }\n\n forget(subscription) {\n this.guarantor.forget(subscription)\n this.subscriptions = (this.subscriptions.filter((s) => s !== subscription))\n return subscription\n }\n\n findAll(identifier) {\n return this.subscriptions.filter((s) => s.identifier === identifier)\n }\n\n reload() {\n return this.subscriptions.map((subscription) =>\n this.subscribe(subscription))\n }\n\n notifyAll(callbackName, ...args) {\n return this.subscriptions.map((subscription) =>\n this.notify(subscription, callbackName, ...args))\n }\n\n notify(subscription, callbackName, ...args) {\n let subscriptions\n if (typeof subscription === \"string\") {\n subscriptions = this.findAll(subscription)\n } else {\n subscriptions = [subscription]\n }\n\n return subscriptions.map((subscription) =>\n (typeof subscription[callbackName] === \"function\" ? subscription[callbackName](...args) : undefined))\n }\n\n subscribe(subscription) {\n if (this.sendCommand(subscription, \"subscribe\")) {\n this.guarantor.guarantee(subscription)\n }\n }\n\n confirmSubscription(identifier) {\n logger.log(`Subscription confirmed ${identifier}`)\n this.findAll(identifier).map((subscription) =>\n this.guarantor.forget(subscription))\n }\n\n sendCommand(subscription, command) {\n const {identifier} = subscription\n return this.consumer.send({command, identifier})\n }\n}\n", "import Connection from \"./connection\"\nimport Subscriptions from \"./subscriptions\"\n\n// The ActionCable.Consumer establishes the connection to a server-side Ruby Connection object. Once established,\n// the ActionCable.ConnectionMonitor will ensure that its properly maintained through heartbeats and checking for stale updates.\n// The Consumer instance is also the gateway to establishing subscriptions to desired channels through the #createSubscription\n// method.\n//\n// The following example shows how this can be set up:\n//\n// App = {}\n// App.cable = ActionCable.createConsumer(\"ws://example.com/accounts/1\")\n// App.appearance = App.cable.subscriptions.create(\"AppearanceChannel\")\n//\n// For more details on how you'd configure an actual channel subscription, see ActionCable.Subscription.\n//\n// When a consumer is created, it automatically connects with the server.\n//\n// To disconnect from the server, call\n//\n// App.cable.disconnect()\n//\n// and to restart the connection:\n//\n// App.cable.connect()\n//\n// Any channel subscriptions which existed prior to disconnecting will\n// automatically resubscribe.\n\nexport default class Consumer {\n constructor(url) {\n this._url = url\n this.subscriptions = new Subscriptions(this)\n this.connection = new Connection(this)\n }\n\n get url() {\n return createWebSocketURL(this._url)\n }\n\n send(data) {\n return this.connection.send(data)\n }\n\n connect() {\n return this.connection.open()\n }\n\n disconnect() {\n return this.connection.close({allowReconnect: false})\n }\n\n ensureActiveConnection() {\n if (!this.connection.isActive()) {\n return this.connection.open()\n }\n }\n}\n\nexport function createWebSocketURL(url) {\n if (typeof url === \"function\") {\n url = url()\n }\n\n if (url && !/^wss?:/i.test(url)) {\n const a = document.createElement(\"a\")\n a.href = url\n // Fix populating Location properties in IE. Otherwise, protocol will be blank.\n a.href = a.href\n a.protocol = a.protocol.replace(\"http\", \"ws\")\n return a.href\n } else {\n return url\n }\n}\n", "import Connection from \"./connection\"\nimport ConnectionMonitor from \"./connection_monitor\"\nimport Consumer, { createWebSocketURL } from \"./consumer\"\nimport INTERNAL from \"./internal\"\nimport Subscription from \"./subscription\"\nimport Subscriptions from \"./subscriptions\"\nimport SubscriptionGuarantor from \"./subscription_guarantor\"\nimport adapters from \"./adapters\"\nimport logger from \"./logger\"\n\nexport {\n Connection,\n ConnectionMonitor,\n Consumer,\n INTERNAL,\n Subscription,\n Subscriptions,\n SubscriptionGuarantor,\n adapters,\n createWebSocketURL,\n logger,\n}\n\nexport function createConsumer(url = getConfig(\"url\") || INTERNAL.default_mount_path) {\n return new Consumer(url)\n}\n\nexport function getConfig(name) {\n const element = document.head.querySelector(`meta[name='action-cable-${name}']`)\n if (element) {\n return element.getAttribute(\"content\")\n }\n}\n", "(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"WaveSurfer\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"WaveSurfer\"] = factory();\n\telse\n\t\troot[\"WaveSurfer\"] = factory();\n})(self, () => {\nreturn ", "/**\n * @since 3.0.0\n */\n\nimport style from './util/style';\nimport getId from './util/get-id';\n\n/**\n * The `CanvasEntry` class represents an element consisting of a wave `canvas`\n * and an (optional) progress wave `canvas`.\n *\n * The `MultiCanvas` renderer uses one or more `CanvasEntry` instances to\n * render a waveform, depending on the zoom level.\n */\nexport default class CanvasEntry {\n constructor() {\n /**\n * The wave node\n *\n * @type {HTMLCanvasElement}\n */\n this.wave = null;\n /**\n * The wave canvas rendering context\n *\n * @type {CanvasRenderingContext2D}\n */\n this.waveCtx = null;\n /**\n * The (optional) progress wave node\n *\n * @type {HTMLCanvasElement}\n */\n this.progress = null;\n /**\n * The (optional) progress wave canvas rendering context\n *\n * @type {CanvasRenderingContext2D}\n */\n this.progressCtx = null;\n /**\n * Start of the area the canvas should render, between 0 and 1\n *\n * @type {number}\n */\n this.start = 0;\n /**\n * End of the area the canvas should render, between 0 and 1\n *\n * @type {number}\n */\n this.end = 1;\n /**\n * Unique identifier for this entry\n *\n * @type {string}\n */\n this.id = getId(\n typeof this.constructor.name !== 'undefined'\n ? this.constructor.name.toLowerCase() + '_'\n : 'canvasentry_'\n );\n /**\n * Canvas 2d context attributes\n *\n * @type {object}\n */\n this.canvasContextAttributes = {};\n }\n\n /**\n * Store the wave canvas element and create the 2D rendering context\n *\n * @param {HTMLCanvasElement} element The wave `canvas` element.\n */\n initWave(element) {\n this.wave = element;\n this.waveCtx = this.wave.getContext('2d', this.canvasContextAttributes);\n }\n\n /**\n * Store the progress wave canvas element and create the 2D rendering\n * context\n *\n * @param {HTMLCanvasElement} element The progress wave `canvas` element.\n */\n initProgress(element) {\n this.progress = element;\n this.progressCtx = this.progress.getContext(\n '2d',\n this.canvasContextAttributes\n );\n }\n\n /**\n * Update the dimensions\n *\n * @param {number} elementWidth Width of the entry\n * @param {number} totalWidth Total width of the multi canvas renderer\n * @param {number} width The new width of the element\n * @param {number} height The new height of the element\n */\n updateDimensions(elementWidth, totalWidth, width, height) {\n // where the canvas starts and ends in the waveform, represented as a\n // decimal between 0 and 1\n this.start = this.wave.offsetLeft / totalWidth || 0;\n this.end = this.start + elementWidth / totalWidth;\n\n // set wave canvas dimensions\n this.wave.width = width;\n this.wave.height = height;\n let elementSize = { width: elementWidth + 'px' };\n style(this.wave, elementSize);\n\n if (this.hasProgressCanvas) {\n // set progress canvas dimensions\n this.progress.width = width;\n this.progress.height = height;\n style(this.progress, elementSize);\n }\n }\n\n /**\n * Clear the wave and progress rendering contexts\n */\n clearWave() {\n // wave\n this.waveCtx.clearRect(\n 0,\n 0,\n this.waveCtx.canvas.width,\n this.waveCtx.canvas.height\n );\n\n // progress\n if (this.hasProgressCanvas) {\n this.progressCtx.clearRect(\n 0,\n 0,\n this.progressCtx.canvas.width,\n this.progressCtx.canvas.height\n );\n }\n }\n\n /**\n * Set the fill styles for wave and progress\n * @param {string|string[]} waveColor Fill color for the wave canvas,\n * or an array of colors to apply as a gradient\n * @param {?string|string[]} progressColor Fill color for the progress canvas,\n * or an array of colors to apply as a gradient\n */\n setFillStyles(waveColor, progressColor) {\n this.waveCtx.fillStyle = this.getFillStyle(this.waveCtx, waveColor);\n\n if (this.hasProgressCanvas) {\n this.progressCtx.fillStyle = this.getFillStyle(this.progressCtx, progressColor);\n }\n }\n\n /**\n * Utility function to handle wave color arguments\n *\n * When the color argument type is a string or CanvasGradient instance,\n * it will be returned as is. Otherwise, it will be treated as an array,\n * and a new CanvasGradient will be returned\n *\n * @since 6.0.0\n * @param {CanvasRenderingContext2D} ctx Rendering context of target canvas\n * @param {string|string[]|CanvasGradient} color Either a single fill color\n * for the wave canvas, an existing CanvasGradient instance, or an array\n * of colors to apply as a gradient\n * @returns {string|CanvasGradient} Returns a string fillstyle value, or a\n * canvas gradient\n */\n getFillStyle(ctx, color) {\n if (typeof color == 'string' || color instanceof CanvasGradient) {\n return color;\n }\n\n const waveGradient = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);\n color.forEach((value, index) => waveGradient.addColorStop((index / color.length), value));\n\n return waveGradient;\n }\n\n /**\n * Set the canvas transforms for wave and progress\n *\n * @param {boolean} vertical Whether to render vertically\n */\n applyCanvasTransforms(vertical) {\n if (vertical) {\n // Reflect the waveform across the line y = -x\n this.waveCtx.setTransform(0, 1, 1, 0, 0, 0);\n\n if (this.hasProgressCanvas) {\n this.progressCtx.setTransform(0, 1, 1, 0, 0, 0);\n }\n }\n }\n\n /**\n * Draw a rectangle for wave and progress\n *\n * @param {number} x X start position\n * @param {number} y Y start position\n * @param {number} width Width of the rectangle\n * @param {number} height Height of the rectangle\n * @param {number} radius Radius of the rectangle\n */\n fillRects(x, y, width, height, radius) {\n this.fillRectToContext(this.waveCtx, x, y, width, height, radius);\n\n if (this.hasProgressCanvas) {\n this.fillRectToContext(\n this.progressCtx,\n x,\n y,\n width,\n height,\n radius\n );\n }\n }\n\n /**\n * Draw the actual rectangle on a `canvas` element\n *\n * @param {CanvasRenderingContext2D} ctx Rendering context of target canvas\n * @param {number} x X start position\n * @param {number} y Y start position\n * @param {number} width Width of the rectangle\n * @param {number} height Height of the rectangle\n * @param {number} radius Radius of the rectangle\n */\n fillRectToContext(ctx, x, y, width, height, radius) {\n if (!ctx) {\n return;\n }\n\n if (radius) {\n this.drawRoundedRect(ctx, x, y, width, height, radius);\n } else {\n ctx.fillRect(x, y, width, height);\n }\n }\n\n /**\n * Draw a rounded rectangle on Canvas\n *\n * @param {CanvasRenderingContext2D} ctx Canvas context\n * @param {number} x X-position of the rectangle\n * @param {number} y Y-position of the rectangle\n * @param {number} width Width of the rectangle\n * @param {number} height Height of the rectangle\n * @param {number} radius Radius of the rectangle\n *\n * @return {void}\n * @example drawRoundedRect(ctx, 50, 50, 5, 10, 3)\n */\n drawRoundedRect(ctx, x, y, width, height, radius) {\n if (height === 0) {\n return;\n }\n // peaks are float values from -1 to 1. Use absolute height values in\n // order to correctly calculate rounded rectangle coordinates\n if (height < 0) {\n height *= -1;\n y -= height;\n }\n ctx.beginPath();\n ctx.moveTo(x + radius, y);\n ctx.lineTo(x + width - radius, y);\n ctx.quadraticCurveTo(x + width, y, x + width, y + radius);\n ctx.lineTo(x + width, y + height - radius);\n ctx.quadraticCurveTo(\n x + width,\n y + height,\n x + width - radius,\n y + height\n );\n ctx.lineTo(x + radius, y + height);\n ctx.quadraticCurveTo(x, y + height, x, y + height - radius);\n ctx.lineTo(x, y + radius);\n ctx.quadraticCurveTo(x, y, x + radius, y);\n ctx.closePath();\n ctx.fill();\n }\n\n /**\n * Render the actual wave and progress lines\n *\n * @param {number[]} peaks Array with peaks data\n * @param {number} absmax Maximum peak value (absolute)\n * @param {number} halfH Half the height of the waveform\n * @param {number} offsetY Offset to the top\n * @param {number} start The x-offset of the beginning of the area that\n * should be rendered\n * @param {number} end The x-offset of the end of the area that\n * should be rendered\n */\n drawLines(peaks, absmax, halfH, offsetY, start, end) {\n this.drawLineToContext(\n this.waveCtx,\n peaks,\n absmax,\n halfH,\n offsetY,\n start,\n end\n );\n\n if (this.hasProgressCanvas) {\n this.drawLineToContext(\n this.progressCtx,\n peaks,\n absmax,\n halfH,\n offsetY,\n start,\n end\n );\n }\n }\n\n /**\n * Render the actual waveform line on a `canvas` element\n *\n * @param {CanvasRenderingContext2D} ctx Rendering context of target canvas\n * @param {number[]} peaks Array with peaks data\n * @param {number} absmax Maximum peak value (absolute)\n * @param {number} halfH Half the height of the waveform\n * @param {number} offsetY Offset to the top\n * @param {number} start The x-offset of the beginning of the area that\n * should be rendered\n * @param {number} end The x-offset of the end of the area that\n * should be rendered\n */\n drawLineToContext(ctx, peaks, absmax, halfH, offsetY, start, end) {\n if (!ctx) {\n return;\n }\n\n const length = peaks.length / 2;\n const first = Math.round(length * this.start);\n\n // use one more peak value to make sure we join peaks at ends -- unless,\n // of course, this is the last canvas\n const last = Math.round(length * this.end) + 1;\n\n const canvasStart = first;\n const canvasEnd = last;\n const scale = this.wave.width / (canvasEnd - canvasStart - 1);\n\n // optimization\n const halfOffset = halfH + offsetY;\n const absmaxHalf = absmax / halfH;\n\n ctx.beginPath();\n ctx.moveTo((canvasStart - first) * scale, halfOffset);\n\n ctx.lineTo(\n (canvasStart - first) * scale,\n halfOffset - Math.round((peaks[2 * canvasStart] || 0) / absmaxHalf)\n );\n\n let i, peak, h;\n for (i = canvasStart; i < canvasEnd; i++) {\n peak = peaks[2 * i] || 0;\n h = Math.round(peak / absmaxHalf);\n ctx.lineTo((i - first) * scale + this.halfPixel, halfOffset - h);\n }\n\n // draw the bottom edge going backwards, to make a single\n // closed hull to fill\n let j = canvasEnd - 1;\n for (j; j >= canvasStart; j--) {\n peak = peaks[2 * j + 1] || 0;\n h = Math.round(peak / absmaxHalf);\n ctx.lineTo((j - first) * scale + this.halfPixel, halfOffset - h);\n }\n\n ctx.lineTo(\n (canvasStart - first) * scale,\n halfOffset -\n Math.round((peaks[2 * canvasStart + 1] || 0) / absmaxHalf)\n );\n\n ctx.closePath();\n ctx.fill();\n }\n\n /**\n * Destroys this entry\n */\n destroy() {\n this.waveCtx = null;\n this.wave = null;\n\n this.progressCtx = null;\n this.progress = null;\n }\n\n /**\n * Return image data of the wave `canvas` element\n *\n * When using a `type` of `'blob'`, this will return a `Promise` that\n * resolves with a `Blob` instance.\n *\n * @param {string} format='image/png' An optional value of a format type.\n * @param {number} quality=0.92 An optional value between 0 and 1.\n * @param {string} type='dataURL' Either 'dataURL' or 'blob'.\n * @return {string|Promise} When using the default `'dataURL'` `type` this\n * returns a data URL. When using the `'blob'` `type` this returns a\n * `Promise` that resolves with a `Blob` instance.\n */\n getImage(format, quality, type) {\n if (type === 'blob') {\n return new Promise(resolve => {\n this.wave.toBlob(resolve, format, quality);\n });\n } else if (type === 'dataURL') {\n return this.wave.toDataURL(format, quality);\n }\n }\n}\n", "import * as util from './util';\n\n/**\n * Parent class for renderers\n *\n * @extends {Observer}\n */\nexport default class Drawer extends util.Observer {\n /**\n * @param {HTMLElement} container The container node of the wavesurfer instance\n * @param {WavesurferParams} params The wavesurfer initialisation options\n */\n constructor(container, params) {\n super();\n\n this.container = util.withOrientation(container, params.vertical);\n /**\n * @type {WavesurferParams}\n */\n this.params = params;\n /**\n * The width of the renderer\n * @type {number}\n */\n this.width = 0;\n /**\n * The height of the renderer\n * @type {number}\n */\n this.height = params.height * this.params.pixelRatio;\n\n this.lastPos = 0;\n /**\n * The `` element which is added to the container\n * @type {HTMLElement}\n */\n this.wrapper = null;\n }\n\n /**\n * Alias of `util.style`\n *\n * @param {HTMLElement} el The element that the styles will be applied to\n * @param {Object} styles The map of propName: attribute, both are used as-is\n * @return {HTMLElement} el\n */\n style(el, styles) {\n return util.style(el, styles);\n }\n\n /**\n * Create the wrapper `` element, style it and set up the events for\n * interaction\n */\n createWrapper() {\n this.wrapper = util.withOrientation(\n this.container.appendChild(document.createElement('wave')),\n this.params.vertical\n );\n\n this.style(this.wrapper, {\n display: 'block',\n position: 'relative',\n userSelect: 'none',\n webkitUserSelect: 'none',\n height: this.params.height + 'px'\n });\n\n if (this.params.fillParent || this.params.scrollParent) {\n this.style(this.wrapper, {\n width: '100%',\n cursor: this.params.hideCursor ? 'none' : 'auto',\n overflowX: this.params.hideScrollbar ? 'hidden' : 'auto',\n overflowY: 'hidden'\n });\n }\n\n this.setupWrapperEvents();\n }\n\n /**\n * Handle click event\n *\n * @param {Event} e Click event\n * @param {?boolean} noPrevent Set to true to not call `e.preventDefault()`\n * @return {number} Playback position from 0 to 1\n */\n handleEvent(e, noPrevent) {\n !noPrevent && e.preventDefault();\n\n const clientX = util.withOrientation(\n e.targetTouches ? e.targetTouches[0] : e,\n this.params.vertical\n ).clientX;\n const bbox = this.wrapper.getBoundingClientRect();\n\n const nominalWidth = this.width;\n const parentWidth = this.getWidth();\n const progressPixels = this.getProgressPixels(bbox, clientX);\n\n let progress;\n if (!this.params.fillParent && nominalWidth < parentWidth) {\n progress = progressPixels *\n (this.params.pixelRatio / nominalWidth) || 0;\n } else {\n progress = (progressPixels + this.wrapper.scrollLeft) /\n this.wrapper.scrollWidth || 0;\n }\n\n return util.clamp(progress, 0, 1);\n }\n\n getProgressPixels(wrapperBbox, clientX) {\n if (this.params.rtl) {\n return wrapperBbox.right - clientX;\n } else {\n return clientX - wrapperBbox.left;\n }\n }\n\n setupWrapperEvents() {\n this.wrapper.addEventListener('click', e => {\n const orientedEvent = util.withOrientation(e, this.params.vertical);\n const scrollbarHeight = this.wrapper.offsetHeight -\n this.wrapper.clientHeight;\n\n if (scrollbarHeight !== 0) {\n // scrollbar is visible. Check if click was on it\n const bbox = this.wrapper.getBoundingClientRect();\n if (orientedEvent.clientY >= bbox.bottom - scrollbarHeight) {\n // ignore mousedown as it was on the scrollbar\n return;\n }\n }\n\n if (this.params.interact) {\n this.fireEvent('click', e, this.handleEvent(e));\n }\n });\n\n this.wrapper.addEventListener('dblclick', e => {\n if (this.params.interact) {\n this.fireEvent('dblclick', e, this.handleEvent(e));\n }\n });\n\n this.wrapper.addEventListener('scroll', e =>\n this.fireEvent('scroll', e)\n );\n }\n\n /**\n * Draw peaks on the canvas\n *\n * @param {number[]|Number.} peaks Can also be an array of arrays\n * for split channel rendering\n * @param {number} length The width of the area that should be drawn\n * @param {number} start The x-offset of the beginning of the area that\n * should be rendered\n * @param {number} end The x-offset of the end of the area that should be\n * rendered\n */\n drawPeaks(peaks, length, start, end) {\n if (!this.setWidth(length)) {\n this.clearWave();\n }\n\n this.params.barWidth\n ? this.drawBars(peaks, 0, start, end)\n : this.drawWave(peaks, 0, start, end);\n }\n\n /**\n * Scroll to the beginning\n */\n resetScroll() {\n if (this.wrapper !== null) {\n this.wrapper.scrollLeft = 0;\n }\n }\n\n /**\n * Recenter the view-port at a certain percent of the waveform\n *\n * @param {number} percent Value from 0 to 1 on the waveform\n */\n recenter(percent) {\n const position = this.wrapper.scrollWidth * percent;\n this.recenterOnPosition(position, true);\n }\n\n /**\n * Recenter the view-port on a position, either scroll there immediately or\n * in steps of 5 pixels\n *\n * @param {number} position X-offset in pixels\n * @param {boolean} immediate Set to true to immediately scroll somewhere\n */\n recenterOnPosition(position, immediate) {\n const scrollLeft = this.wrapper.scrollLeft;\n const half = ~~(this.wrapper.clientWidth / 2);\n const maxScroll = this.wrapper.scrollWidth - this.wrapper.clientWidth;\n let target = position - half;\n let offset = target - scrollLeft;\n\n if (maxScroll == 0) {\n // no need to continue if scrollbar is not there\n return;\n }\n\n // if the cursor is currently visible...\n if (!immediate && -half <= offset && offset < half) {\n // set rate at which waveform is centered\n let rate = this.params.autoCenterRate;\n\n // make rate depend on width of view and length of waveform\n rate /= half;\n rate *= maxScroll;\n\n offset = Math.max(-rate, Math.min(rate, offset));\n target = scrollLeft + offset;\n }\n\n // limit target to valid range (0 to maxScroll)\n target = Math.max(0, Math.min(maxScroll, target));\n // no use attempting to scroll if we're not moving\n if (target != scrollLeft) {\n this.wrapper.scrollLeft = target;\n }\n }\n\n /**\n * Get the current scroll position in pixels\n *\n * @return {number} Horizontal scroll position in pixels\n */\n getScrollX() {\n let x = 0;\n if (this.wrapper) {\n const pixelRatio = this.params.pixelRatio;\n x = Math.round(this.wrapper.scrollLeft * pixelRatio);\n\n // In cases of elastic scroll (safari with mouse wheel) you can\n // scroll beyond the limits of the container\n // Calculate and floor the scrollable extent to make sure an out\n // of bounds value is not returned\n // Ticket #1312\n if (this.params.scrollParent) {\n const maxScroll = ~~(\n this.wrapper.scrollWidth * pixelRatio -\n this.getWidth()\n );\n x = Math.min(maxScroll, Math.max(0, x));\n }\n }\n return x;\n }\n\n /**\n * Get the width of the container\n *\n * @return {number} The width of the container\n */\n getWidth() {\n return Math.round(this.container.clientWidth * this.params.pixelRatio);\n }\n\n /**\n * Set the width of the container\n *\n * @param {number} width The new width of the container\n * @return {boolean} Whether the width of the container was updated or not\n */\n setWidth(width) {\n if (this.width == width) {\n return false;\n }\n\n this.width = width;\n\n if (this.params.fillParent || this.params.scrollParent) {\n this.style(this.wrapper, {\n width: ''\n });\n } else {\n const newWidth = ~~(this.width / this.params.pixelRatio) + 'px';\n this.style(this.wrapper, {\n width: newWidth\n });\n }\n\n this.updateSize();\n return true;\n }\n\n /**\n * Set the height of the container\n *\n * @param {number} height The new height of the container.\n * @return {boolean} Whether the height of the container was updated or not\n */\n setHeight(height) {\n if (height == this.height) {\n return false;\n }\n this.height = height;\n\n this.style(this.wrapper, {\n height: ~~(this.height / this.params.pixelRatio) + 'px'\n });\n\n this.updateSize();\n return true;\n }\n\n /**\n * Called by wavesurfer when progress should be rendered\n *\n * @param {number} progress From 0 to 1\n */\n progress(progress) {\n const minPxDelta = 1 / this.params.pixelRatio;\n const pos = Math.round(progress * this.width) * minPxDelta;\n\n if (pos < this.lastPos || pos - this.lastPos >= minPxDelta) {\n this.lastPos = pos;\n\n if (this.params.scrollParent && this.params.autoCenter) {\n const newPos = ~~(this.wrapper.scrollWidth * progress);\n this.recenterOnPosition(\n newPos,\n this.params.autoCenterImmediately\n );\n }\n\n this.updateProgress(pos);\n }\n }\n\n /**\n * This is called when wavesurfer is destroyed\n */\n destroy() {\n this.unAll();\n if (this.wrapper) {\n if (this.wrapper.parentNode == this.container.domElement) {\n this.container.removeChild(this.wrapper.domElement);\n }\n this.wrapper = null;\n }\n }\n\n /* Renderer-specific methods */\n\n /**\n * Called after cursor related params have changed.\n *\n * @abstract\n */\n updateCursor() {}\n\n /**\n * Called when the size of the container changes so the renderer can adjust\n *\n * @abstract\n */\n updateSize() {}\n\n /**\n * Draw a waveform with bars\n *\n * @abstract\n * @param {number[]|Number.} peaks Can also be an array of arrays for split channel\n * rendering\n * @param {number} channelIndex The index of the current channel. Normally\n * should be 0\n * @param {number} start The x-offset of the beginning of the area that\n * should be rendered\n * @param {number} end The x-offset of the end of the area that should be\n * rendered\n */\n drawBars(peaks, channelIndex, start, end) {}\n\n /**\n * Draw a waveform\n *\n * @abstract\n * @param {number[]|Number.} peaks Can also be an array of arrays for split channel\n * rendering\n * @param {number} channelIndex The index of the current channel. Normally\n * should be 0\n * @param {number} start The x-offset of the beginning of the area that\n * should be rendered\n * @param {number} end The x-offset of the end of the area that should be\n * rendered\n */\n drawWave(peaks, channelIndex, start, end) {}\n\n /**\n * Clear the waveform\n *\n * @abstract\n */\n clearWave() {}\n\n /**\n * Render the new progress\n *\n * @abstract\n * @param {number} position X-Offset of progress position in pixels\n */\n updateProgress(position) {}\n}\n", "import Drawer from './drawer';\nimport * as util from './util';\nimport CanvasEntry from './drawer.canvasentry';\n\n/**\n * MultiCanvas renderer for wavesurfer. Is currently the default and sole\n * builtin renderer.\n *\n * A `MultiCanvas` consists of one or more `CanvasEntry` instances, depending\n * on the zoom level.\n */\nexport default class MultiCanvas extends Drawer {\n /**\n * @param {HTMLElement} container The container node of the wavesurfer instance\n * @param {WavesurferParams} params The wavesurfer initialisation options\n */\n constructor(container, params) {\n super(container, params);\n\n /**\n * @type {number}\n */\n this.maxCanvasWidth = params.maxCanvasWidth;\n\n /**\n * @type {number}\n */\n this.maxCanvasElementWidth = Math.round(\n params.maxCanvasWidth / params.pixelRatio\n );\n\n /**\n * Whether or not the progress wave is rendered. If the `waveColor`\n * and `progressColor` are the same color it is not.\n *\n * @type {boolean}\n */\n this.hasProgressCanvas = params.waveColor != params.progressColor;\n\n /**\n * @type {number}\n */\n this.halfPixel = 0.5 / params.pixelRatio;\n\n /**\n * List of `CanvasEntry` instances.\n *\n * @type {Array}\n */\n this.canvases = [];\n\n /**\n * @type {HTMLElement}\n */\n this.progressWave = null;\n\n /**\n * Class used to generate entries.\n *\n * @type {function}\n */\n this.EntryClass = CanvasEntry;\n\n /**\n * Canvas 2d context attributes.\n *\n * @type {object}\n */\n this.canvasContextAttributes = params.drawingContextAttributes;\n\n /**\n * Overlap added between entries to prevent vertical white stripes\n * between `canvas` elements.\n *\n * @type {number}\n */\n this.overlap = 2 * Math.ceil(params.pixelRatio / 2);\n\n /**\n * The radius of the wave bars. Makes bars rounded\n *\n * @type {number}\n */\n this.barRadius = params.barRadius || 0;\n\n /**\n * Whether to render the waveform vertically. Defaults to false.\n *\n * @type {boolean}\n */\n this.vertical = params.vertical;\n }\n\n /**\n * Initialize the drawer\n */\n init() {\n this.createWrapper();\n this.createElements();\n }\n\n /**\n * Create the canvas elements and style them\n *\n */\n createElements() {\n this.progressWave = util.withOrientation(\n this.wrapper.appendChild(document.createElement('wave')),\n this.params.vertical\n );\n this.style(this.progressWave, {\n position: 'absolute',\n zIndex: 3,\n left: 0,\n top: 0,\n bottom: 0,\n overflow: 'hidden',\n width: '0',\n display: 'none',\n boxSizing: 'border-box',\n borderRightStyle: 'solid',\n pointerEvents: 'none'\n });\n\n this.addCanvas();\n this.updateCursor();\n }\n\n /**\n * Update cursor style\n */\n updateCursor() {\n this.style(this.progressWave, {\n borderRightWidth: this.params.cursorWidth + 'px',\n borderRightColor: this.params.cursorColor\n });\n }\n\n /**\n * Adjust to the updated size by adding or removing canvases\n */\n updateSize() {\n const totalWidth = Math.round(this.width / this.params.pixelRatio);\n const requiredCanvases = Math.ceil(\n totalWidth / (this.maxCanvasElementWidth + this.overlap)\n );\n\n // add required canvases\n while (this.canvases.length < requiredCanvases) {\n this.addCanvas();\n }\n\n // remove older existing canvases, if any\n while (this.canvases.length > requiredCanvases) {\n this.removeCanvas();\n }\n\n let canvasWidth = this.maxCanvasWidth + this.overlap;\n const lastCanvas = this.canvases.length - 1;\n this.canvases.forEach((entry, i) => {\n if (i == lastCanvas) {\n canvasWidth = this.width - this.maxCanvasWidth * lastCanvas;\n }\n this.updateDimensions(entry, canvasWidth, this.height);\n\n entry.clearWave();\n });\n }\n\n /**\n * Add a canvas to the canvas list\n *\n */\n addCanvas() {\n const entry = new this.EntryClass();\n entry.canvasContextAttributes = this.canvasContextAttributes;\n entry.hasProgressCanvas = this.hasProgressCanvas;\n entry.halfPixel = this.halfPixel;\n const leftOffset = this.maxCanvasElementWidth * this.canvases.length;\n\n // wave\n let wave = util.withOrientation(\n this.wrapper.appendChild(document.createElement('canvas')),\n this.params.vertical\n );\n this.style(wave, {\n position: 'absolute',\n zIndex: 2,\n left: leftOffset + 'px',\n top: 0,\n bottom: 0,\n height: '100%',\n pointerEvents: 'none'\n });\n entry.initWave(wave);\n\n // progress\n if (this.hasProgressCanvas) {\n let progress = util.withOrientation(\n this.progressWave.appendChild(document.createElement('canvas')),\n this.params.vertical\n );\n this.style(progress, {\n position: 'absolute',\n left: leftOffset + 'px',\n top: 0,\n bottom: 0,\n height: '100%'\n });\n entry.initProgress(progress);\n }\n\n this.canvases.push(entry);\n }\n\n /**\n * Pop single canvas from the list\n *\n */\n removeCanvas() {\n let lastEntry = this.canvases[this.canvases.length - 1];\n\n // wave\n lastEntry.wave.parentElement.removeChild(lastEntry.wave.domElement);\n\n // progress\n if (this.hasProgressCanvas) {\n lastEntry.progress.parentElement.removeChild(lastEntry.progress.domElement);\n }\n\n // cleanup\n if (lastEntry) {\n lastEntry.destroy();\n lastEntry = null;\n }\n\n this.canvases.pop();\n }\n\n /**\n * Update the dimensions of a canvas element\n *\n * @param {CanvasEntry} entry Target entry\n * @param {number} width The new width of the element\n * @param {number} height The new height of the element\n */\n updateDimensions(entry, width, height) {\n const elementWidth = Math.round(width / this.params.pixelRatio);\n const totalWidth = Math.round(this.width / this.params.pixelRatio);\n\n // update canvas dimensions\n entry.updateDimensions(elementWidth, totalWidth, width, height);\n\n // style element\n this.style(this.progressWave, { display: 'block' });\n }\n\n /**\n * Clear the whole multi-canvas\n */\n clearWave() {\n util.frame(() => {\n this.canvases.forEach(entry => entry.clearWave());\n })();\n }\n\n /**\n * Draw a waveform with bars\n *\n * @param {number[]|Number.} peaks Can also be an array of arrays\n * for split channel rendering\n * @param {number} channelIndex The index of the current channel. Normally\n * should be 0. Must be an integer.\n * @param {number} start The x-offset of the beginning of the area that\n * should be rendered\n * @param {number} end The x-offset of the end of the area that should be\n * rendered\n * @returns {void}\n */\n drawBars(peaks, channelIndex, start, end) {\n return this.prepareDraw(\n peaks,\n channelIndex,\n start,\n end,\n ({ absmax, hasMinVals, height, offsetY, halfH, peaks, channelIndex: ch }) => {\n // if drawBars was called within ws.empty we don't pass a start and\n // don't want anything to happen\n if (start === undefined) {\n return;\n }\n // Skip every other value if there are negatives.\n const peakIndexScale = hasMinVals ? 2 : 1;\n const length = peaks.length / peakIndexScale;\n const bar = this.params.barWidth * this.params.pixelRatio;\n const gap =\n this.params.barGap === null\n ? Math.max(this.params.pixelRatio, ~~(bar / 2))\n : Math.max(\n this.params.pixelRatio,\n this.params.barGap * this.params.pixelRatio\n );\n const step = bar + gap;\n\n const scale = length / this.width;\n const first = start;\n const last = end;\n let peakIndex = first;\n for (peakIndex; peakIndex < last; peakIndex += step) {\n\n // search for the highest peak in the range this bar falls into\n let peak = 0;\n let peakIndexRange = Math.floor(peakIndex * scale) * peakIndexScale; // start index\n const peakIndexEnd = Math.floor((peakIndex + step) * scale) * peakIndexScale;\n do { // do..while makes sure at least one peak is always evaluated\n const newPeak = Math.abs(peaks[peakIndexRange]); // for arrays starting with negative values\n if (newPeak > peak) {\n peak = newPeak; // higher\n }\n peakIndexRange += peakIndexScale; // skip every other value for negatives\n } while (peakIndexRange < peakIndexEnd);\n\n // calculate the height of this bar according to the highest peak found\n let h = Math.round((peak / absmax) * halfH);\n\n // raise the bar height to the specified minimum height\n // Math.max is used to replace any value smaller than barMinHeight (not just 0) with barMinHeight\n if (this.params.barMinHeight) {\n h = Math.max(h, this.params.barMinHeight);\n }\n\n this.fillRect(\n peakIndex + this.halfPixel,\n halfH - h + offsetY,\n bar + this.halfPixel,\n h * 2,\n this.barRadius,\n ch\n );\n }\n }\n );\n }\n\n /**\n * Draw a waveform\n *\n * @param {number[]|Number.} peaks Can also be an array of arrays\n * for split channel rendering\n * @param {number} channelIndex The index of the current channel. Normally\n * should be 0\n * @param {number?} start The x-offset of the beginning of the area that\n * should be rendered (If this isn't set only a flat line is rendered)\n * @param {number?} end The x-offset of the end of the area that should be\n * rendered\n * @returns {void}\n */\n drawWave(peaks, channelIndex, start, end) {\n return this.prepareDraw(\n peaks,\n channelIndex,\n start,\n end,\n ({ absmax, hasMinVals, height, offsetY, halfH, peaks, channelIndex }) => {\n if (!hasMinVals) {\n const reflectedPeaks = [];\n const len = peaks.length;\n let i = 0;\n for (i; i < len; i++) {\n reflectedPeaks[2 * i] = peaks[i];\n reflectedPeaks[2 * i + 1] = -peaks[i];\n }\n peaks = reflectedPeaks;\n }\n\n // if drawWave was called within ws.empty we don't pass a start and\n // end and simply want a flat line\n if (start !== undefined) {\n this.drawLine(peaks, absmax, halfH, offsetY, start, end, channelIndex);\n }\n\n // always draw a median line\n this.fillRect(\n 0,\n halfH + offsetY - this.halfPixel,\n this.width,\n this.halfPixel,\n this.barRadius,\n channelIndex\n );\n }\n );\n }\n\n /**\n * Tell the canvas entries to render their portion of the waveform\n *\n * @param {number[]} peaks Peaks data\n * @param {number} absmax Maximum peak value (absolute)\n * @param {number} halfH Half the height of the waveform\n * @param {number} offsetY Offset to the top\n * @param {number} start The x-offset of the beginning of the area that\n * should be rendered\n * @param {number} end The x-offset of the end of the area that\n * should be rendered\n * @param {channelIndex} channelIndex The channel index of the line drawn\n */\n drawLine(peaks, absmax, halfH, offsetY, start, end, channelIndex) {\n const { waveColor, progressColor } = this.params.splitChannelsOptions.channelColors[channelIndex] || {};\n this.canvases.forEach((entry, i) => {\n this.setFillStyles(entry, waveColor, progressColor);\n this.applyCanvasTransforms(entry, this.params.vertical);\n entry.drawLines(peaks, absmax, halfH, offsetY, start, end);\n });\n }\n\n /**\n * Draw a rectangle on the multi-canvas\n *\n * @param {number} x X-position of the rectangle\n * @param {number} y Y-position of the rectangle\n * @param {number} width Width of the rectangle\n * @param {number} height Height of the rectangle\n * @param {number} radius Radius of the rectangle\n * @param {channelIndex} channelIndex The channel index of the bar drawn\n */\n fillRect(x, y, width, height, radius, channelIndex) {\n const startCanvas = Math.floor(x / this.maxCanvasWidth);\n const endCanvas = Math.min(\n Math.ceil((x + width) / this.maxCanvasWidth) + 1,\n this.canvases.length\n );\n let i = startCanvas;\n for (i; i < endCanvas; i++) {\n const entry = this.canvases[i];\n const leftOffset = i * this.maxCanvasWidth;\n\n const intersection = {\n x1: Math.max(x, i * this.maxCanvasWidth),\n y1: y,\n x2: Math.min(\n x + width,\n i * this.maxCanvasWidth + entry.wave.width\n ),\n y2: y + height\n };\n\n if (intersection.x1 < intersection.x2) {\n const { waveColor, progressColor } = this.params.splitChannelsOptions.channelColors[channelIndex] || {};\n this.setFillStyles(entry, waveColor, progressColor);\n this.applyCanvasTransforms(entry, this.params.vertical);\n\n entry.fillRects(\n intersection.x1 - leftOffset,\n intersection.y1,\n intersection.x2 - intersection.x1,\n intersection.y2 - intersection.y1,\n radius\n );\n }\n }\n }\n\n /**\n * Returns whether to hide the channel from being drawn based on params.\n *\n * @param {number} channelIndex The index of the current channel.\n * @returns {bool} True to hide the channel, false to draw.\n */\n hideChannel(channelIndex) {\n return this.params.splitChannels && this.params.splitChannelsOptions.filterChannels.includes(channelIndex);\n }\n\n /**\n * Performs preparation tasks and calculations which are shared by `drawBars`\n * and `drawWave`\n *\n * @param {number[]|Number.} peaks Can also be an array of arrays for\n * split channel rendering\n * @param {number} channelIndex The index of the current channel. Normally\n * should be 0\n * @param {number?} start The x-offset of the beginning of the area that\n * should be rendered. If this isn't set only a flat line is rendered\n * @param {number?} end The x-offset of the end of the area that should be\n * rendered\n * @param {function} fn The render function to call, e.g. `drawWave`\n * @param {number} drawIndex The index of the current channel after filtering.\n * @param {number?} normalizedMax Maximum modulation value across channels for use with relativeNormalization. Ignored when undefined\n * @returns {void}\n */\n prepareDraw(peaks, channelIndex, start, end, fn, drawIndex, normalizedMax) {\n return util.frame(() => {\n // Split channels and call this function with the channelIndex set\n if (peaks[0] instanceof Array) {\n const channels = peaks;\n\n if (this.params.splitChannels) {\n const filteredChannels = channels.filter((c, i) => !this.hideChannel(i));\n if (!this.params.splitChannelsOptions.overlay) {\n this.setHeight(\n Math.max(filteredChannels.length, 1) *\n this.params.height *\n this.params.pixelRatio\n );\n }\n\n let overallAbsMax;\n if (this.params.splitChannelsOptions && this.params.splitChannelsOptions.relativeNormalization) {\n // calculate maximum peak across channels to use for normalization\n overallAbsMax = util.max(channels.map((channelPeaks => util.absMax(channelPeaks))));\n }\n\n\n return channels.forEach((channelPeaks, i) =>\n this.prepareDraw(channelPeaks, i, start, end, fn, filteredChannels.indexOf(channelPeaks), overallAbsMax)\n );\n }\n peaks = channels[0];\n }\n\n // Return and do not draw channel peaks if hidden.\n if (this.hideChannel(channelIndex)) {\n return;\n }\n\n // calculate maximum modulation value, either from the barHeight\n // parameter or if normalize=true from the largest value in the peak\n // set\n let absmax = 1 / this.params.barHeight;\n if (this.params.normalize) {\n absmax = normalizedMax === undefined ? util.absMax(peaks) : normalizedMax;\n }\n\n // Bar wave draws the bottom only as a reflection of the top,\n // so we don't need negative values\n const hasMinVals = [].some.call(peaks, val => val < 0);\n const height = this.params.height * this.params.pixelRatio;\n const halfH = height / 2;\n\n let offsetY = height * drawIndex || 0;\n\n // Override offsetY if overlay is true\n if (this.params.splitChannelsOptions && this.params.splitChannelsOptions.overlay) {\n offsetY = 0;\n }\n\n return fn({\n absmax: absmax,\n hasMinVals: hasMinVals,\n height: height,\n offsetY: offsetY,\n halfH: halfH,\n peaks: peaks,\n channelIndex: channelIndex\n });\n })();\n }\n\n /**\n * Set the fill styles for a certain entry (wave and progress)\n *\n * @param {CanvasEntry} entry Target entry\n * @param {string} waveColor Wave color to draw this entry\n * @param {string} progressColor Progress color to draw this entry\n */\n setFillStyles(entry, waveColor = this.params.waveColor, progressColor = this.params.progressColor) {\n entry.setFillStyles(waveColor, progressColor);\n }\n\n /**\n * Set the canvas transforms for a certain entry (wave and progress)\n *\n * @param {CanvasEntry} entry Target entry\n * @param {boolean} vertical Whether to render the waveform vertically\n */\n applyCanvasTransforms(entry, vertical = false) {\n entry.applyCanvasTransforms(vertical);\n }\n\n /**\n * Return image data of the multi-canvas\n *\n * When using a `type` of `'blob'`, this will return a `Promise`.\n *\n * @param {string} format='image/png' An optional value of a format type.\n * @param {number} quality=0.92 An optional value between 0 and 1.\n * @param {string} type='dataURL' Either 'dataURL' or 'blob'.\n * @return {string|string[]|Promise} When using the default `'dataURL'`\n * `type` this returns a single data URL or an array of data URLs,\n * one for each canvas. When using the `'blob'` `type` this returns a\n * `Promise` that resolves with an array of `Blob` instances, one for each\n * canvas.\n */\n getImage(format, quality, type) {\n if (type === 'blob') {\n return Promise.all(\n this.canvases.map(entry => {\n return entry.getImage(format, quality, type);\n })\n );\n } else if (type === 'dataURL') {\n let images = this.canvases.map(entry =>\n entry.getImage(format, quality, type)\n );\n return images.length > 1 ? images : images[0];\n }\n }\n\n /**\n * Render the new progress\n *\n * @param {number} position X-offset of progress position in pixels\n */\n updateProgress(position) {\n this.style(this.progressWave, { width: position + 'px' });\n }\n}\n", "import MediaElement from './mediaelement';\n\n/**\n * MediaElementWebAudio backend: load audio via an HTML5 audio tag, but playback with the WebAudio API.\n * The advantage here is that the html5