\n
\n `;\n return [div, shadow];\n }\n /** Wavesurfer itself calls this method. Do not call it manually. */\n setOptions(options) {\n if (this.options.container !== options.container) {\n const newParent = this.parentFromOptionsContainer(options.container);\n newParent.appendChild(this.container);\n this.parent = newParent;\n }\n if (options.dragToSeek && !this.options.dragToSeek) {\n this.initDrag();\n }\n this.options = options;\n // Re-render the waveform\n this.reRender();\n }\n getWrapper() {\n return this.wrapper;\n }\n getScroll() {\n return this.scrollContainer.scrollLeft;\n }\n destroy() {\n var _a;\n this.container.remove();\n (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();\n }\n createDelay(delayMs = 10) {\n let timeout;\n let reject;\n const onClear = () => {\n if (timeout)\n clearTimeout(timeout);\n if (reject)\n reject();\n };\n this.timeouts.push(onClear);\n return () => {\n return new Promise((resolveFn, rejectFn) => {\n onClear();\n reject = rejectFn;\n timeout = setTimeout(() => {\n timeout = undefined;\n reject = undefined;\n resolveFn();\n }, delayMs);\n });\n };\n }\n // Convert array of color values to linear gradient\n convertColorValues(color) {\n if (!Array.isArray(color))\n return color || '';\n if (color.length < 2)\n return color[0] || '';\n const canvasElement = document.createElement('canvas');\n const ctx = canvasElement.getContext('2d');\n const gradientHeight = canvasElement.height * (window.devicePixelRatio || 1);\n const gradient = ctx.createLinearGradient(0, 0, 0, gradientHeight);\n const colorStopPercentage = 1 / (color.length - 1);\n color.forEach((color, index) => {\n const offset = index * colorStopPercentage;\n gradient.addColorStop(offset, color);\n });\n return gradient;\n }\n renderBarWaveform(channelData, options, ctx, vScale) {\n const topChannel = channelData[0];\n const bottomChannel = channelData[1] || channelData[0];\n const length = topChannel.length;\n const { width, height } = ctx.canvas;\n const halfHeight = height / 2;\n const pixelRatio = window.devicePixelRatio || 1;\n const barWidth = options.barWidth ? options.barWidth * pixelRatio : 1;\n const barGap = options.barGap ? options.barGap * pixelRatio : options.barWidth ? barWidth / 2 : 0;\n const barRadius = options.barRadius || 0;\n const barIndexScale = width / (barWidth + barGap) / length;\n const rectFn = barRadius && 'roundRect' in ctx ? 'roundRect' : 'rect';\n ctx.beginPath();\n let prevX = 0;\n let maxTop = 0;\n let maxBottom = 0;\n for (let i = 0; i <= length; i++) {\n const x = Math.round(i * barIndexScale);\n if (x > prevX) {\n const topBarHeight = Math.round(maxTop * halfHeight * vScale);\n const bottomBarHeight = Math.round(maxBottom * halfHeight * vScale);\n const barHeight = topBarHeight + bottomBarHeight || 1;\n // Vertical alignment\n let y = halfHeight - topBarHeight;\n if (options.barAlign === 'top') {\n y = 0;\n }\n else if (options.barAlign === 'bottom') {\n y = height - barHeight;\n }\n ctx[rectFn](prevX * (barWidth + barGap), y, barWidth, barHeight, barRadius);\n prevX = x;\n maxTop = 0;\n maxBottom = 0;\n }\n const magnitudeTop = Math.abs(topChannel[i] || 0);\n const magnitudeBottom = Math.abs(bottomChannel[i] || 0);\n if (magnitudeTop > maxTop)\n maxTop = magnitudeTop;\n if (magnitudeBottom > maxBottom)\n maxBottom = magnitudeBottom;\n }\n ctx.fill();\n ctx.closePath();\n }\n renderLineWaveform(channelData, _options, ctx, vScale) {\n const drawChannel = (index) => {\n const channel = channelData[index] || channelData[0];\n const length = channel.length;\n const { height } = ctx.canvas;\n const halfHeight = height / 2;\n const hScale = ctx.canvas.width / length;\n ctx.moveTo(0, halfHeight);\n let prevX = 0;\n let max = 0;\n for (let i = 0; i <= length; i++) {\n const x = Math.round(i * hScale);\n if (x > prevX) {\n const h = Math.round(max * halfHeight * vScale) || 1;\n const y = halfHeight + h * (index === 0 ? -1 : 1);\n ctx.lineTo(prevX, y);\n prevX = x;\n max = 0;\n }\n const value = Math.abs(channel[i] || 0);\n if (value > max)\n max = value;\n }\n ctx.lineTo(prevX, halfHeight);\n };\n ctx.beginPath();\n drawChannel(0);\n drawChannel(1);\n ctx.fill();\n ctx.closePath();\n }\n renderWaveform(channelData, options, ctx) {\n ctx.fillStyle = this.convertColorValues(options.waveColor);\n // Custom rendering function\n if (options.renderFunction) {\n options.renderFunction(channelData, ctx);\n return;\n }\n // Vertical scaling\n let vScale = options.barHeight || 1;\n if (options.normalize) {\n const max = Array.from(channelData[0]).reduce((max, value) => Math.max(max, Math.abs(value)), 0);\n vScale = max ? 1 / max : 1;\n }\n // Render waveform as bars\n if (options.barWidth || options.barGap || options.barAlign) {\n this.renderBarWaveform(channelData, options, ctx, vScale);\n return;\n }\n // Render waveform as a polyline\n this.renderLineWaveform(channelData, options, ctx, vScale);\n }\n renderSingleCanvas(channelData, options, width, height, start, end, canvasContainer, progressContainer) {\n const pixelRatio = window.devicePixelRatio || 1;\n const canvas = document.createElement('canvas');\n const length = channelData[0].length;\n canvas.width = Math.round((width * (end - start)) / length);\n canvas.height = height * pixelRatio;\n canvas.style.width = `${Math.floor(canvas.width / pixelRatio)}px`;\n canvas.style.height = `${height}px`;\n canvas.style.left = `${Math.floor((start * width) / pixelRatio / length)}px`;\n canvasContainer.appendChild(canvas);\n const ctx = canvas.getContext('2d');\n this.renderWaveform(channelData.map((channel) => channel.slice(start, end)), options, ctx);\n // Draw a progress canvas\n if (canvas.width > 0 && canvas.height > 0) {\n const progressCanvas = canvas.cloneNode();\n const progressCtx = progressCanvas.getContext('2d');\n progressCtx.drawImage(canvas, 0, 0);\n // Set the composition method to draw only where the waveform is drawn\n progressCtx.globalCompositeOperation = 'source-in';\n progressCtx.fillStyle = this.convertColorValues(options.progressColor);\n // This rectangle acts as a mask thanks to the composition method\n progressCtx.fillRect(0, 0, canvas.width, canvas.height);\n progressContainer.appendChild(progressCanvas);\n }\n }\n renderChannel(channelData, options, width) {\n return __awaiter(this, void 0, void 0, function* () {\n // A container for canvases\n const canvasContainer = document.createElement('div');\n const height = this.getHeight(options.height);\n canvasContainer.style.height = `${height}px`;\n this.canvasWrapper.style.minHeight = `${height}px`;\n this.canvasWrapper.appendChild(canvasContainer);\n // A container for progress canvases\n const progressContainer = canvasContainer.cloneNode();\n this.progressWrapper.appendChild(progressContainer);\n const dataLength = channelData[0].length;\n // Draw a portion of the waveform from start peak to end peak\n const draw = (start, end) => {\n this.renderSingleCanvas(channelData, options, width, height, Math.max(0, start), Math.min(end, dataLength), canvasContainer, progressContainer);\n };\n // Draw the entire waveform\n if (!this.isScrollable) {\n draw(0, dataLength);\n return;\n }\n // Determine the currently visible part of the waveform\n const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;\n const scale = dataLength / scrollWidth;\n let viewportWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth);\n // Adjust width to avoid gaps between canvases when using bars\n if (options.barWidth || options.barGap) {\n const barWidth = options.barWidth || 0.5;\n const barGap = options.barGap || barWidth / 2;\n const totalBarWidth = barWidth + barGap;\n if (viewportWidth % totalBarWidth !== 0) {\n viewportWidth = Math.floor(viewportWidth / totalBarWidth) * totalBarWidth;\n }\n }\n const start = Math.floor(Math.abs(scrollLeft) * scale);\n const end = Math.floor(start + viewportWidth * scale);\n const viewportLen = end - start;\n if (viewportLen <= 0) {\n return;\n }\n // Draw the visible part of the waveform\n draw(start, end);\n // Draw the waveform in chunks equal to the size of the viewport, starting from the position of the viewport\n yield Promise.all([\n // Draw the chunks to the left of the viewport\n (() => __awaiter(this, void 0, void 0, function* () {\n if (start === 0)\n return;\n const delay = this.createDelay();\n for (let i = start; i >= 0; i -= viewportLen) {\n yield delay();\n draw(Math.max(0, i - viewportLen), i);\n }\n }))(),\n // Draw the chunks to the right of the viewport\n (() => __awaiter(this, void 0, void 0, function* () {\n if (end === dataLength)\n return;\n const delay = this.createDelay();\n for (let i = end; i < dataLength; i += viewportLen) {\n yield delay();\n draw(i, Math.min(dataLength, i + viewportLen));\n }\n }))(),\n ]);\n });\n }\n render(audioData) {\n return __awaiter(this, void 0, void 0, function* () {\n // Clear previous timeouts\n this.timeouts.forEach((clear) => clear());\n this.timeouts = [];\n // Clear the canvases\n this.canvasWrapper.innerHTML = '';\n this.progressWrapper.innerHTML = '';\n // Width\n if (this.options.width != null) {\n this.scrollContainer.style.width =\n typeof this.options.width === 'number' ? `${this.options.width}px` : this.options.width;\n }\n // Determine the width of the waveform\n const pixelRatio = window.devicePixelRatio || 1;\n const parentWidth = this.scrollContainer.clientWidth;\n const scrollWidth = Math.ceil(audioData.duration * (this.options.minPxPerSec || 0));\n // Whether the container should scroll\n this.isScrollable = scrollWidth > parentWidth;\n const useParentWidth = this.options.fillParent && !this.isScrollable;\n // Width of the waveform in pixels\n const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;\n // Set the width of the wrapper\n this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`;\n // Set additional styles\n this.scrollContainer.style.overflowX = this.isScrollable ? 'auto' : 'hidden';\n this.scrollContainer.classList.toggle('noScrollbar', !!this.options.hideScrollbar);\n this.cursor.style.backgroundColor = `${this.options.cursorColor || this.options.progressColor}`;\n this.cursor.style.width = `${this.options.cursorWidth}px`;\n this.audioData = audioData;\n this.emit('render');\n // Render the waveform\n try {\n if (this.options.splitChannels) {\n // Render a waveform for each channel\n yield Promise.all(Array.from({ length: audioData.numberOfChannels }).map((_, i) => {\n var _a;\n const options = Object.assign(Object.assign({}, this.options), (_a = this.options.splitChannels) === null || _a === void 0 ? void 0 : _a[i]);\n return this.renderChannel([audioData.getChannelData(i)], options, width);\n }));\n }\n else {\n // Render a single waveform for the first two channels (left and right)\n const channels = [audioData.getChannelData(0)];\n if (audioData.numberOfChannels > 1)\n channels.push(audioData.getChannelData(1));\n yield this.renderChannel(channels, this.options, width);\n }\n }\n catch (_a) {\n // Render cancelled due to another render\n return;\n }\n this.emit('rendered');\n });\n }\n reRender() {\n // Return if the waveform has not been rendered yet\n if (!this.audioData)\n return;\n // Remember the current cursor position\n const { scrollWidth } = this.scrollContainer;\n const { right: before } = this.progressWrapper.getBoundingClientRect();\n // Re-render the waveform\n this.render(this.audioData);\n // Adjust the scroll position so that the cursor stays in the same place\n if (this.isScrollable && scrollWidth !== this.scrollContainer.scrollWidth) {\n const { right: after } = this.progressWrapper.getBoundingClientRect();\n let delta = after - before;\n // to limit compounding floating-point drift\n // we need to round to the half px furthest from 0\n delta *= 2;\n delta = delta < 0 ? Math.floor(delta) : Math.ceil(delta);\n delta /= 2;\n this.scrollContainer.scrollLeft += delta;\n }\n }\n zoom(minPxPerSec) {\n this.options.minPxPerSec = minPxPerSec;\n this.reRender();\n }\n scrollIntoView(progress, isPlaying = false) {\n const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;\n const progressWidth = progress * scrollWidth;\n const startEdge = scrollLeft;\n const endEdge = scrollLeft + clientWidth;\n const middle = clientWidth / 2;\n if (this.isDragging) {\n // Scroll when dragging close to the edge of the viewport\n const minGap = 30;\n if (progressWidth + minGap > endEdge) {\n this.scrollContainer.scrollLeft += minGap;\n }\n else if (progressWidth - minGap < startEdge) {\n this.scrollContainer.scrollLeft -= minGap;\n }\n }\n else {\n if (progressWidth < startEdge || progressWidth > endEdge) {\n this.scrollContainer.scrollLeft = progressWidth - (this.options.autoCenter ? middle : 0);\n }\n // Keep the cursor centered when playing\n const center = progressWidth - scrollLeft - middle;\n if (isPlaying && this.options.autoCenter && center > 0) {\n this.scrollContainer.scrollLeft += Math.min(center, 10);\n }\n }\n // Emit the scroll event\n {\n const newScroll = this.scrollContainer.scrollLeft;\n const startX = newScroll / scrollWidth;\n const endX = (newScroll + clientWidth) / scrollWidth;\n this.emit('scroll', startX, endX);\n }\n }\n renderProgress(progress, isPlaying) {\n if (isNaN(progress))\n return;\n const percents = progress * 100;\n this.canvasWrapper.style.clipPath = `polygon(${percents}% 0, 100% 0, 100% 100%, ${percents}% 100%)`;\n this.progressWrapper.style.width = `${percents}%`;\n this.cursor.style.left = `${percents}%`;\n this.cursor.style.transform = `translateX(-${Math.round(percents) === 100 ? this.options.cursorWidth : 0}px)`;\n if (this.isScrollable && this.options.autoScroll) {\n this.scrollIntoView(progress, isPlaying);\n }\n }\n exportImage(format, quality, type) {\n return __awaiter(this, void 0, void 0, function* () {\n const canvases = this.canvasWrapper.querySelectorAll('canvas');\n if (!canvases.length) {\n throw new Error('No waveform data');\n }\n // Data URLs\n if (type === 'dataURL') {\n const images = Array.from(canvases).map((canvas) => canvas.toDataURL(format, quality));\n return Promise.resolve(images);\n }\n // Blobs\n return Promise.all(Array.from(canvases).map((canvas) => {\n return new Promise((resolve, reject) => {\n canvas.toBlob((blob) => {\n blob ? resolve(blob) : reject(new Error('Could not export image'));\n }, format, quality);\n });\n }));\n });\n }\n}\nRenderer.MAX_CANVAS_WIDTH = 4000;\nexport default Renderer;\n","export function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mouseButton = 0) {\n if (!element)\n return () => void 0;\n let unsubscribeDocument = () => void 0;\n const onPointerDown = (event) => {\n if (event.button !== mouseButton)\n return;\n event.preventDefault();\n event.stopPropagation();\n let startX = event.clientX;\n let startY = event.clientY;\n let isDragging = false;\n const onPointerMove = (event) => {\n event.preventDefault();\n event.stopPropagation();\n const x = event.clientX;\n const y = event.clientY;\n const dx = x - startX;\n const dy = y - startY;\n if (isDragging || Math.abs(dx) > threshold || Math.abs(dy) > threshold) {\n const rect = element.getBoundingClientRect();\n const { left, top } = rect;\n if (!isDragging) {\n onStart === null || onStart === void 0 ? void 0 : onStart(startX - left, startY - top);\n isDragging = true;\n }\n onDrag(dx, dy, x - left, y - top);\n startX = x;\n startY = y;\n }\n };\n const onPointerUp = () => {\n if (isDragging) {\n onEnd === null || onEnd === void 0 ? void 0 : onEnd();\n }\n unsubscribeDocument();\n };\n const onPointerLeave = (e) => {\n // Listen to events only on the document and not on inner elements\n if (!e.relatedTarget || e.relatedTarget === document.documentElement) {\n onPointerUp();\n }\n };\n const onClick = (event) => {\n if (isDragging) {\n event.stopPropagation();\n event.preventDefault();\n }\n };\n const onTouchMove = (event) => {\n if (isDragging) {\n event.preventDefault();\n }\n };\n document.addEventListener('pointermove', onPointerMove);\n document.addEventListener('pointerup', onPointerUp);\n document.addEventListener('pointerout', onPointerLeave);\n document.addEventListener('pointercancel', onPointerLeave);\n document.addEventListener('touchmove', onTouchMove, { passive: false });\n document.addEventListener('click', onClick, { capture: true });\n unsubscribeDocument = () => {\n document.removeEventListener('pointermove', onPointerMove);\n document.removeEventListener('pointerup', onPointerUp);\n document.removeEventListener('pointerout', onPointerLeave);\n document.removeEventListener('pointercancel', onPointerLeave);\n document.removeEventListener('touchmove', onTouchMove);\n setTimeout(() => {\n document.removeEventListener('click', onClick, { capture: true });\n }, 10);\n };\n };\n element.addEventListener('pointerdown', onPointerDown);\n return () => {\n unsubscribeDocument();\n element.removeEventListener('pointerdown', onPointerDown);\n };\n}\n","import EventEmitter from './event-emitter.js';\nclass Timer extends EventEmitter {\n constructor() {\n super(...arguments);\n this.unsubscribe = () => undefined;\n }\n start() {\n this.unsubscribe = this.on('tick', () => {\n requestAnimationFrame(() => {\n this.emit('tick');\n });\n });\n this.emit('tick');\n }\n stop() {\n this.unsubscribe();\n }\n destroy() {\n this.unsubscribe();\n }\n}\nexport default Timer;\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nimport EventEmitter from './event-emitter.js';\n/**\n * A Web Audio buffer player emulating the behavior of an HTML5 Audio element.\n */\nclass WebAudioPlayer extends EventEmitter {\n constructor(audioContext = new AudioContext()) {\n super();\n this.bufferNode = null;\n this.autoplay = false;\n this.playStartTime = 0;\n this.playedDuration = 0;\n this._muted = false;\n this._playbackRate = 1;\n this.buffer = null;\n this.currentSrc = '';\n this.paused = true;\n this.crossOrigin = null;\n this.seeking = false;\n /** Subscribe to an event. Returns an unsubscribe function. */\n this.addEventListener = this.on;\n /** Unsubscribe from an event */\n this.removeEventListener = this.un;\n this.audioContext = audioContext;\n this.gainNode = this.audioContext.createGain();\n this.gainNode.connect(this.audioContext.destination);\n }\n load() {\n return __awaiter(this, void 0, void 0, function* () {\n return;\n });\n }\n get src() {\n return this.currentSrc;\n }\n set src(value) {\n this.currentSrc = value;\n if (!value) {\n this.buffer = null;\n this.emit('emptied');\n return;\n }\n fetch(value)\n .then((response) => {\n if (response.status >= 400) {\n throw new Error(`Failed to fetch ${value}: ${response.status} (${response.statusText})`);\n }\n return response.arrayBuffer();\n })\n .then((arrayBuffer) => {\n if (this.currentSrc !== value)\n return null;\n return this.audioContext.decodeAudioData(arrayBuffer);\n })\n .then((audioBuffer) => {\n if (this.currentSrc !== value)\n return;\n this.buffer = audioBuffer;\n this.emit('loadedmetadata');\n this.emit('canplay');\n if (this.autoplay)\n this.play();\n });\n }\n _play() {\n var _a;\n if (!this.paused)\n return;\n this.paused = false;\n (_a = this.bufferNode) === null || _a === void 0 ? void 0 : _a.disconnect();\n this.bufferNode = this.audioContext.createBufferSource();\n this.bufferNode.buffer = this.buffer;\n this.bufferNode.playbackRate.value = this._playbackRate;\n this.bufferNode.connect(this.gainNode);\n let currentPos = this.playedDuration * this._playbackRate;\n if (currentPos >= this.duration) {\n currentPos = 0;\n this.playedDuration = 0;\n }\n this.bufferNode.start(this.audioContext.currentTime, currentPos);\n this.playStartTime = this.audioContext.currentTime;\n this.bufferNode.onended = () => {\n if (this.currentTime >= this.duration) {\n this.pause();\n this.emit('ended');\n }\n };\n }\n _pause() {\n var _a;\n this.paused = true;\n (_a = this.bufferNode) === null || _a === void 0 ? void 0 : _a.stop();\n this.playedDuration += this.audioContext.currentTime - this.playStartTime;\n }\n play() {\n return __awaiter(this, void 0, void 0, function* () {\n if (!this.paused)\n return;\n this._play();\n this.emit('play');\n });\n }\n pause() {\n if (this.paused)\n return;\n this._pause();\n this.emit('pause');\n }\n stopAt(timeSeconds) {\n var _a, _b;\n const delay = timeSeconds - this.currentTime;\n (_a = this.bufferNode) === null || _a === void 0 ? void 0 : _a.stop(this.audioContext.currentTime + delay);\n (_b = this.bufferNode) === null || _b === void 0 ? void 0 : _b.addEventListener('ended', () => {\n this.bufferNode = null;\n this.pause();\n }, { once: true });\n }\n setSinkId(deviceId) {\n return __awaiter(this, void 0, void 0, function* () {\n const ac = this.audioContext;\n return ac.setSinkId(deviceId);\n });\n }\n get playbackRate() {\n return this._playbackRate;\n }\n set playbackRate(value) {\n this._playbackRate = value;\n if (this.bufferNode) {\n this.bufferNode.playbackRate.value = value;\n }\n }\n get currentTime() {\n const time = this.paused\n ? this.playedDuration\n : this.playedDuration + (this.audioContext.currentTime - this.playStartTime);\n return time * this._playbackRate;\n }\n set currentTime(value) {\n this.emit('seeking');\n const wasPlaying = !this.paused;\n wasPlaying && this._pause();\n this.playedDuration = value / this._playbackRate;\n wasPlaying && this._play();\n this.emit('timeupdate');\n }\n get duration() {\n var _a;\n return ((_a = this.buffer) === null || _a === void 0 ? void 0 : _a.duration) || 0;\n }\n get volume() {\n return this.gainNode.gain.value;\n }\n set volume(value) {\n this.gainNode.gain.value = value;\n this.emit('volumechange');\n }\n get muted() {\n return this._muted;\n }\n set muted(value) {\n if (this._muted === value)\n return;\n this._muted = value;\n if (this._muted) {\n this.gainNode.disconnect();\n }\n else {\n this.gainNode.connect(this.audioContext.destination);\n }\n }\n canPlayType(mimeType) {\n return /^(audio|video)\\//.test(mimeType);\n }\n /** Get the GainNode used to play the audio. Can be used to attach filters. */\n getGainNode() {\n return this.gainNode;\n }\n /** Get decoded audio */\n getChannelData() {\n const channels = [];\n if (!this.buffer)\n return channels;\n const numChannels = this.buffer.numberOfChannels;\n for (let i = 0; i < numChannels; i++) {\n channels.push(this.buffer.getChannelData(i));\n }\n return channels;\n }\n}\nexport default WebAudioPlayer;\n","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nimport BasePlugin from './base-plugin.js';\nimport Decoder from './decoder.js';\nimport * as dom from './dom.js';\nimport Fetcher from './fetcher.js';\nimport Player from './player.js';\nimport Renderer from './renderer.js';\nimport Timer from './timer.js';\nimport WebAudioPlayer from './webaudio.js';\nconst defaultOptions = {\n waveColor: '#999',\n progressColor: '#555',\n cursorWidth: 1,\n minPxPerSec: 0,\n fillParent: true,\n interact: true,\n dragToSeek: false,\n autoScroll: true,\n autoCenter: true,\n sampleRate: 8000,\n};\nclass WaveSurfer extends Player {\n /** Create a new WaveSurfer instance */\n static create(options) {\n return new WaveSurfer(options);\n }\n /** Create a new WaveSurfer instance */\n constructor(options) {\n const media = options.media ||\n (options.backend === 'WebAudio' ? new WebAudioPlayer() : undefined);\n super({\n media,\n mediaControls: options.mediaControls,\n autoplay: options.autoplay,\n playbackRate: options.audioRate,\n });\n this.plugins = [];\n this.decodedData = null;\n this.subscriptions = [];\n this.mediaSubscriptions = [];\n this.options = Object.assign({}, defaultOptions, options);\n this.timer = new Timer();\n const audioElement = media ? undefined : this.getMediaElement();\n this.renderer = new Renderer(this.options, audioElement);\n this.initPlayerEvents();\n this.initRendererEvents();\n this.initTimerEvents();\n this.initPlugins();\n // Init and load async to allow external events to be registered\n Promise.resolve().then(() => {\n this.emit('init');\n // Load audio if URL or an external media with an src is passed,\n // of render w/o audio if pre-decoded peaks and duration are provided\n const url = this.options.url || this.getSrc() || '';\n if (url || (this.options.peaks && this.options.duration)) {\n this.load(url, this.options.peaks, this.options.duration);\n }\n });\n }\n updateProgress(currentTime = this.getCurrentTime()) {\n this.renderer.renderProgress(currentTime / this.getDuration(), this.isPlaying());\n return currentTime;\n }\n initTimerEvents() {\n // The timer fires every 16ms for a smooth progress animation\n this.subscriptions.push(this.timer.on('tick', () => {\n if (!this.isSeeking()) {\n const currentTime = this.updateProgress();\n this.emit('timeupdate', currentTime);\n this.emit('audioprocess', currentTime);\n }\n }));\n }\n initPlayerEvents() {\n if (this.isPlaying()) {\n this.emit('play');\n this.timer.start();\n }\n this.mediaSubscriptions.push(this.onMediaEvent('timeupdate', () => {\n const currentTime = this.updateProgress();\n this.emit('timeupdate', currentTime);\n }), this.onMediaEvent('play', () => {\n this.emit('play');\n this.timer.start();\n }), this.onMediaEvent('pause', () => {\n this.emit('pause');\n this.timer.stop();\n }), this.onMediaEvent('emptied', () => {\n this.timer.stop();\n }), this.onMediaEvent('ended', () => {\n this.emit('finish');\n }), this.onMediaEvent('seeking', () => {\n this.emit('seeking', this.getCurrentTime());\n }));\n }\n initRendererEvents() {\n this.subscriptions.push(\n // Seek on click\n this.renderer.on('click', (relativeX, relativeY) => {\n if (this.options.interact) {\n this.seekTo(relativeX);\n this.emit('interaction', relativeX * this.getDuration());\n this.emit('click', relativeX, relativeY);\n }\n }), \n // Double click\n this.renderer.on('dblclick', (relativeX, relativeY) => {\n this.emit('dblclick', relativeX, relativeY);\n }), \n // Scroll\n this.renderer.on('scroll', (startX, endX) => {\n const duration = this.getDuration();\n this.emit('scroll', startX * duration, endX * duration);\n }), \n // Redraw\n this.renderer.on('render', () => {\n this.emit('redraw');\n }), \n // RedrawComplete\n this.renderer.on('rendered', () => {\n this.emit('redrawcomplete');\n }));\n // Drag\n {\n let debounce;\n this.subscriptions.push(this.renderer.on('drag', (relativeX) => {\n if (!this.options.interact)\n return;\n // Update the visual position\n this.renderer.renderProgress(relativeX);\n // Set the audio position with a debounce\n clearTimeout(debounce);\n debounce = setTimeout(() => {\n this.seekTo(relativeX);\n }, this.isPlaying() ? 0 : 200);\n this.emit('interaction', relativeX * this.getDuration());\n this.emit('drag', relativeX);\n }));\n }\n }\n initPlugins() {\n var _a;\n if (!((_a = this.options.plugins) === null || _a === void 0 ? void 0 : _a.length))\n return;\n this.options.plugins.forEach((plugin) => {\n this.registerPlugin(plugin);\n });\n }\n unsubscribePlayerEvents() {\n this.mediaSubscriptions.forEach((unsubscribe) => unsubscribe());\n this.mediaSubscriptions = [];\n }\n /** Set new wavesurfer options and re-render it */\n setOptions(options) {\n this.options = Object.assign({}, this.options, options);\n this.renderer.setOptions(this.options);\n if (options.audioRate) {\n this.setPlaybackRate(options.audioRate);\n }\n if (options.mediaControls != null) {\n this.getMediaElement().controls = options.mediaControls;\n }\n }\n /** Register a wavesurfer.js plugin */\n registerPlugin(plugin) {\n plugin._init(this);\n this.plugins.push(plugin);\n // Unregister plugin on destroy\n this.subscriptions.push(plugin.once('destroy', () => {\n this.plugins = this.plugins.filter((p) => p !== plugin);\n }));\n return plugin;\n }\n /** For plugins only: get the waveform wrapper div */\n getWrapper() {\n return this.renderer.getWrapper();\n }\n /** Get the current scroll position in pixels */\n getScroll() {\n return this.renderer.getScroll();\n }\n /** Get all registered plugins */\n getActivePlugins() {\n return this.plugins;\n }\n loadAudio(url, blob, channelData, duration) {\n return __awaiter(this, void 0, void 0, function* () {\n this.emit('load', url);\n if (!this.options.media && this.isPlaying())\n this.pause();\n this.decodedData = null;\n // Fetch the entire audio as a blob if pre-decoded data is not provided\n if (!blob && !channelData) {\n const onProgress = (percentage) => this.emit('loading', percentage);\n blob = yield Fetcher.fetchBlob(url, onProgress, this.options.fetchParams);\n }\n // Set the mediaelement source\n this.setSrc(url, blob);\n // Wait for the audio duration\n const audioDuration = duration ||\n this.getDuration() ||\n (yield new Promise((resolve) => {\n this.onceMediaEvent('loadedmetadata', () => resolve(this.getDuration()));\n }));\n // Decode the audio data or use user-provided peaks\n if (channelData) {\n this.decodedData = Decoder.createBuffer(channelData, audioDuration || 0);\n }\n else if (blob) {\n const arrayBuffer = yield blob.arrayBuffer();\n this.decodedData = yield Decoder.decode(arrayBuffer, this.options.sampleRate);\n }\n if (this.decodedData) {\n this.emit('decode', this.getDuration());\n this.renderer.render(this.decodedData);\n }\n this.emit('ready', this.getDuration());\n });\n }\n /** Load an audio file by URL, with optional pre-decoded audio data */\n load(url, channelData, duration) {\n return __awaiter(this, void 0, void 0, function* () {\n yield this.loadAudio(url, undefined, channelData, duration);\n });\n }\n /** Load an audio blob */\n loadBlob(blob, channelData, duration) {\n return __awaiter(this, void 0, void 0, function* () {\n yield this.loadAudio('blob', blob, channelData, duration);\n });\n }\n /** Zoom the waveform by a given pixels-per-second factor */\n zoom(minPxPerSec) {\n if (!this.decodedData) {\n throw new Error('No audio loaded');\n }\n this.renderer.zoom(minPxPerSec);\n this.emit('zoom', minPxPerSec);\n }\n /** Get the decoded audio data */\n getDecodedData() {\n return this.decodedData;\n }\n /** Get decoded peaks */\n exportPeaks({ channels = 2, maxLength = 8000, precision = 10000 } = {}) {\n if (!this.decodedData) {\n throw new Error('The audio has not been decoded yet');\n }\n const maxChannels = Math.min(channels, this.decodedData.numberOfChannels);\n const peaks = [];\n for (let i = 0; i < maxChannels; i++) {\n const channel = this.decodedData.getChannelData(i);\n const data = [];\n const sampleSize = Math.round(channel.length / maxLength);\n for (let i = 0; i < maxLength; i++) {\n const sample = channel.slice(i * sampleSize, (i + 1) * sampleSize);\n let max = 0;\n for (let x = 0; x < sample.length; x++) {\n const n = sample[x];\n if (Math.abs(n) > Math.abs(max))\n max = n;\n }\n data.push(Math.round(max * precision) / precision);\n }\n peaks.push(data);\n }\n return peaks;\n }\n /** Get the duration of the audio in seconds */\n getDuration() {\n let duration = super.getDuration() || 0;\n // Fall back to the decoded data duration if the media duration is incorrect\n if ((duration === 0 || duration === Infinity) && this.decodedData) {\n duration = this.decodedData.duration;\n }\n return duration;\n }\n /** Toggle if the waveform should react to clicks */\n toggleInteraction(isInteractive) {\n this.options.interact = isInteractive;\n }\n /** Jumpt to a specific time in the audio (in seconds) */\n setTime(time) {\n super.setTime(time);\n this.updateProgress(time);\n }\n /** Seek to a percentage of audio as [0..1] (0 = beginning, 1 = end) */\n seekTo(progress) {\n const time = this.getDuration() * progress;\n this.setTime(time);\n }\n /** Play or pause the audio */\n playPause() {\n return __awaiter(this, void 0, void 0, function* () {\n return this.isPlaying() ? this.pause() : this.play();\n });\n }\n /** Stop the audio and go to the beginning */\n stop() {\n this.pause();\n this.setTime(0);\n }\n /** Skip N or -N seconds from the current position */\n skip(seconds) {\n this.setTime(this.getCurrentTime() + seconds);\n }\n /** Empty the waveform */\n empty() {\n this.load('', [[0]], 0.001);\n }\n /** Set HTML media element */\n setMediaElement(element) {\n this.unsubscribePlayerEvents();\n super.setMediaElement(element);\n this.initPlayerEvents();\n }\n exportImage(format = 'image/png', quality = 1, type = 'dataURL') {\n return __awaiter(this, void 0, void 0, function* () {\n return this.renderer.exportImage(format, quality, type);\n });\n }\n /** Unmount wavesurfer */\n destroy() {\n this.emit('destroy');\n this.plugins.forEach((plugin) => plugin.destroy());\n this.subscriptions.forEach((unsubscribe) => unsubscribe());\n this.unsubscribePlayerEvents();\n this.timer.destroy();\n this.renderer.destroy();\n super.destroy();\n }\n}\nWaveSurfer.BasePlugin = BasePlugin;\nWaveSurfer.dom = dom;\nexport default WaveSurfer;\n","(function(global) {\r\n /**\r\n * Polyfill URLSearchParams\r\n *\r\n * Inspired from : https://github.com/WebReflection/url-search-params/blob/master/src/url-search-params.js\r\n */\r\n\r\n var checkIfIteratorIsSupported = function() {\r\n try {\r\n return !!Symbol.iterator;\r\n } catch (error) {\r\n return false;\r\n }\r\n };\r\n\r\n\r\n var iteratorSupported = checkIfIteratorIsSupported();\r\n\r\n var createIterator = function(items) {\r\n var iterator = {\r\n next: function() {\r\n var value = items.shift();\r\n return { done: value === void 0, value: value };\r\n }\r\n };\r\n\r\n if (iteratorSupported) {\r\n iterator[Symbol.iterator] = function() {\r\n return iterator;\r\n };\r\n }\r\n\r\n return iterator;\r\n };\r\n\r\n /**\r\n * Search param name and values should be encoded according to https://url.spec.whatwg.org/#urlencoded-serializing\r\n * encodeURIComponent() produces the same result except encoding spaces as `%20` instead of `+`.\r\n */\r\n var serializeParam = function(value) {\r\n return encodeURIComponent(value).replace(/%20/g, '+');\r\n };\r\n\r\n var deserializeParam = function(value) {\r\n return decodeURIComponent(String(value).replace(/\\+/g, ' '));\r\n };\r\n\r\n var polyfillURLSearchParams = function() {\r\n\r\n var URLSearchParams = function(searchString) {\r\n Object.defineProperty(this, '_entries', { writable: true, value: {} });\r\n var typeofSearchString = typeof searchString;\r\n\r\n if (typeofSearchString === 'undefined') {\r\n // do nothing\r\n } else if (typeofSearchString === 'string') {\r\n if (searchString !== '') {\r\n this._fromString(searchString);\r\n }\r\n } else if (searchString instanceof URLSearchParams) {\r\n var _this = this;\r\n searchString.forEach(function(value, name) {\r\n _this.append(name, value);\r\n });\r\n } else if ((searchString !== null) && (typeofSearchString === 'object')) {\r\n if (Object.prototype.toString.call(searchString) === '[object Array]') {\r\n for (var i = 0; i < searchString.length; i++) {\r\n var entry = searchString[i];\r\n if ((Object.prototype.toString.call(entry) === '[object Array]') || (entry.length !== 2)) {\r\n this.append(entry[0], entry[1]);\r\n } else {\r\n throw new TypeError('Expected [string, any] as entry at index ' + i + ' of URLSearchParams\\'s input');\r\n }\r\n }\r\n } else {\r\n for (var key in searchString) {\r\n if (searchString.hasOwnProperty(key)) {\r\n this.append(key, searchString[key]);\r\n }\r\n }\r\n }\r\n } else {\r\n throw new TypeError('Unsupported input\\'s type for URLSearchParams');\r\n }\r\n };\r\n\r\n var proto = URLSearchParams.prototype;\r\n\r\n proto.append = function(name, value) {\r\n if (name in this._entries) {\r\n this._entries[name].push(String(value));\r\n } else {\r\n this._entries[name] = [String(value)];\r\n }\r\n };\r\n\r\n proto.delete = function(name) {\r\n delete this._entries[name];\r\n };\r\n\r\n proto.get = function(name) {\r\n return (name in this._entries) ? this._entries[name][0] : null;\r\n };\r\n\r\n proto.getAll = function(name) {\r\n return (name in this._entries) ? this._entries[name].slice(0) : [];\r\n };\r\n\r\n proto.has = function(name) {\r\n return (name in this._entries);\r\n };\r\n\r\n proto.set = function(name, value) {\r\n this._entries[name] = [String(value)];\r\n };\r\n\r\n proto.forEach = function(callback, thisArg) {\r\n var entries;\r\n for (var name in this._entries) {\r\n if (this._entries.hasOwnProperty(name)) {\r\n entries = this._entries[name];\r\n for (var i = 0; i < entries.length; i++) {\r\n callback.call(thisArg, entries[i], name, this);\r\n }\r\n }\r\n }\r\n };\r\n\r\n proto.keys = function() {\r\n var items = [];\r\n this.forEach(function(value, name) {\r\n items.push(name);\r\n });\r\n return createIterator(items);\r\n };\r\n\r\n proto.values = function() {\r\n var items = [];\r\n this.forEach(function(value) {\r\n items.push(value);\r\n });\r\n return createIterator(items);\r\n };\r\n\r\n proto.entries = function() {\r\n var items = [];\r\n this.forEach(function(value, name) {\r\n items.push([name, value]);\r\n });\r\n return createIterator(items);\r\n };\r\n\r\n if (iteratorSupported) {\r\n proto[Symbol.iterator] = proto.entries;\r\n }\r\n\r\n proto.toString = function() {\r\n var searchArray = [];\r\n this.forEach(function(value, name) {\r\n searchArray.push(serializeParam(name) + '=' + serializeParam(value));\r\n });\r\n return searchArray.join('&');\r\n };\r\n\r\n\r\n global.URLSearchParams = URLSearchParams;\r\n };\r\n\r\n var checkIfURLSearchParamsSupported = function() {\r\n try {\r\n var URLSearchParams = global.URLSearchParams;\r\n\r\n return (\r\n (new URLSearchParams('?a=1').toString() === 'a=1') &&\r\n (typeof URLSearchParams.prototype.set === 'function') &&\r\n (typeof URLSearchParams.prototype.entries === 'function')\r\n );\r\n } catch (e) {\r\n return false;\r\n }\r\n };\r\n\r\n if (!checkIfURLSearchParamsSupported()) {\r\n polyfillURLSearchParams();\r\n }\r\n\r\n var proto = global.URLSearchParams.prototype;\r\n\r\n if (typeof proto.sort !== 'function') {\r\n proto.sort = function() {\r\n var _this = this;\r\n var items = [];\r\n this.forEach(function(value, name) {\r\n items.push([name, value]);\r\n if (!_this._entries) {\r\n _this.delete(name);\r\n }\r\n });\r\n items.sort(function(a, b) {\r\n if (a[0] < b[0]) {\r\n return -1;\r\n } else if (a[0] > b[0]) {\r\n return +1;\r\n } else {\r\n return 0;\r\n }\r\n });\r\n if (_this._entries) { // force reset because IE keeps keys index\r\n _this._entries = {};\r\n }\r\n for (var i = 0; i < items.length; i++) {\r\n this.append(items[i][0], items[i][1]);\r\n }\r\n };\r\n }\r\n\r\n if (typeof proto._fromString !== 'function') {\r\n Object.defineProperty(proto, '_fromString', {\r\n enumerable: false,\r\n configurable: false,\r\n writable: false,\r\n value: function(searchString) {\r\n if (this._entries) {\r\n this._entries = {};\r\n } else {\r\n var keys = [];\r\n this.forEach(function(value, name) {\r\n keys.push(name);\r\n });\r\n for (var i = 0; i < keys.length; i++) {\r\n this.delete(keys[i]);\r\n }\r\n }\r\n\r\n searchString = searchString.replace(/^\\?/, '');\r\n var attributes = searchString.split('&');\r\n var attribute;\r\n for (var i = 0; i < attributes.length; i++) {\r\n attribute = attributes[i].split('=');\r\n this.append(\r\n deserializeParam(attribute[0]),\r\n (attribute.length > 1) ? deserializeParam(attribute[1]) : ''\r\n );\r\n }\r\n }\r\n });\r\n }\r\n\r\n // HTMLAnchorElement\r\n\r\n})(\r\n (typeof global !== 'undefined') ? global\r\n : ((typeof window !== 'undefined') ? window\r\n : ((typeof self !== 'undefined') ? self : this))\r\n);\r\n\r\n(function(global) {\r\n /**\r\n * Polyfill URL\r\n *\r\n * Inspired from : https://github.com/arv/DOM-URL-Polyfill/blob/master/src/url.js\r\n */\r\n\r\n var checkIfURLIsSupported = function() {\r\n try {\r\n var u = new global.URL('b', 'http://a');\r\n u.pathname = 'c d';\r\n return (u.href === 'http://a/c%20d') && u.searchParams;\r\n } catch (e) {\r\n return false;\r\n }\r\n };\r\n\r\n\r\n var polyfillURL = function() {\r\n var _URL = global.URL;\r\n\r\n var URL = function(url, base) {\r\n if (typeof url !== 'string') url = String(url);\r\n if (base && typeof base !== 'string') base = String(base);\r\n\r\n // Only create another document if the base is different from current location.\r\n var doc = document, baseElement;\r\n if (base && (global.location === void 0 || base !== global.location.href)) {\r\n base = base.toLowerCase();\r\n doc = document.implementation.createHTMLDocument('');\r\n baseElement = doc.createElement('base');\r\n baseElement.href = base;\r\n doc.head.appendChild(baseElement);\r\n try {\r\n if (baseElement.href.indexOf(base) !== 0) throw new Error(baseElement.href);\r\n } catch (err) {\r\n throw new Error('URL unable to set base ' + base + ' due to ' + err);\r\n }\r\n }\r\n\r\n var anchorElement = doc.createElement('a');\r\n anchorElement.href = url;\r\n if (baseElement) {\r\n doc.body.appendChild(anchorElement);\r\n anchorElement.href = anchorElement.href; // force href to refresh\r\n }\r\n\r\n var inputElement = doc.createElement('input');\r\n inputElement.type = 'url';\r\n inputElement.value = url;\r\n\r\n if (anchorElement.protocol === ':' || !/:/.test(anchorElement.href) || (!inputElement.checkValidity() && !base)) {\r\n throw new TypeError('Invalid URL');\r\n }\r\n\r\n Object.defineProperty(this, '_anchorElement', {\r\n value: anchorElement\r\n });\r\n\r\n\r\n // create a linked searchParams which reflect its changes on URL\r\n var searchParams = new global.URLSearchParams(this.search);\r\n var enableSearchUpdate = true;\r\n var enableSearchParamsUpdate = true;\r\n var _this = this;\r\n ['append', 'delete', 'set'].forEach(function(methodName) {\r\n var method = searchParams[methodName];\r\n searchParams[methodName] = function() {\r\n method.apply(searchParams, arguments);\r\n if (enableSearchUpdate) {\r\n enableSearchParamsUpdate = false;\r\n _this.search = searchParams.toString();\r\n enableSearchParamsUpdate = true;\r\n }\r\n };\r\n });\r\n\r\n Object.defineProperty(this, 'searchParams', {\r\n value: searchParams,\r\n enumerable: true\r\n });\r\n\r\n var search = void 0;\r\n Object.defineProperty(this, '_updateSearchParams', {\r\n enumerable: false,\r\n configurable: false,\r\n writable: false,\r\n value: function() {\r\n if (this.search !== search) {\r\n search = this.search;\r\n if (enableSearchParamsUpdate) {\r\n enableSearchUpdate = false;\r\n this.searchParams._fromString(this.search);\r\n enableSearchUpdate = true;\r\n }\r\n }\r\n }\r\n });\r\n };\r\n\r\n var proto = URL.prototype;\r\n\r\n var linkURLWithAnchorAttribute = function(attributeName) {\r\n Object.defineProperty(proto, attributeName, {\r\n get: function() {\r\n return this._anchorElement[attributeName];\r\n },\r\n set: function(value) {\r\n this._anchorElement[attributeName] = value;\r\n },\r\n enumerable: true\r\n });\r\n };\r\n\r\n ['hash', 'host', 'hostname', 'port', 'protocol']\r\n .forEach(function(attributeName) {\r\n linkURLWithAnchorAttribute(attributeName);\r\n });\r\n\r\n Object.defineProperty(proto, 'search', {\r\n get: function() {\r\n return this._anchorElement['search'];\r\n },\r\n set: function(value) {\r\n this._anchorElement['search'] = value;\r\n this._updateSearchParams();\r\n },\r\n enumerable: true\r\n });\r\n\r\n Object.defineProperties(proto, {\r\n\r\n 'toString': {\r\n get: function() {\r\n var _this = this;\r\n return function() {\r\n return _this.href;\r\n };\r\n }\r\n },\r\n\r\n 'href': {\r\n get: function() {\r\n return this._anchorElement.href.replace(/\\?$/, '');\r\n },\r\n set: function(value) {\r\n this._anchorElement.href = value;\r\n this._updateSearchParams();\r\n },\r\n enumerable: true\r\n },\r\n\r\n 'pathname': {\r\n get: function() {\r\n return this._anchorElement.pathname.replace(/(^\\/?)/, '/');\r\n },\r\n set: function(value) {\r\n this._anchorElement.pathname = value;\r\n },\r\n enumerable: true\r\n },\r\n\r\n 'origin': {\r\n get: function() {\r\n // get expected port from protocol\r\n var expectedPort = { 'http:': 80, 'https:': 443, 'ftp:': 21 }[this._anchorElement.protocol];\r\n // add port to origin if, expected port is different than actual port\r\n // and it is not empty f.e http://foo:8080\r\n // 8080 != 80 && 8080 != ''\r\n var addPortToOrigin = this._anchorElement.port != expectedPort &&\r\n this._anchorElement.port !== '';\r\n\r\n return this._anchorElement.protocol +\r\n '//' +\r\n this._anchorElement.hostname +\r\n (addPortToOrigin ? (':' + this._anchorElement.port) : '');\r\n },\r\n enumerable: true\r\n },\r\n\r\n 'password': { // TODO\r\n get: function() {\r\n return '';\r\n },\r\n set: function(value) {\r\n },\r\n enumerable: true\r\n },\r\n\r\n 'username': { // TODO\r\n get: function() {\r\n return '';\r\n },\r\n set: function(value) {\r\n },\r\n enumerable: true\r\n },\r\n });\r\n\r\n URL.createObjectURL = function(blob) {\r\n return _URL.createObjectURL.apply(_URL, arguments);\r\n };\r\n\r\n URL.revokeObjectURL = function(url) {\r\n return _URL.revokeObjectURL.apply(_URL, arguments);\r\n };\r\n\r\n global.URL = URL;\r\n\r\n };\r\n\r\n if (!checkIfURLIsSupported()) {\r\n polyfillURL();\r\n }\r\n\r\n if ((global.location !== void 0) && !('origin' in global.location)) {\r\n var getOrigin = function() {\r\n return global.location.protocol + '//' + global.location.hostname + (global.location.port ? (':' + global.location.port) : '');\r\n };\r\n\r\n try {\r\n Object.defineProperty(global.location, 'origin', {\r\n get: getOrigin,\r\n enumerable: true\r\n });\r\n } catch (e) {\r\n setInterval(function() {\r\n global.location.origin = getOrigin();\r\n }, 100);\r\n }\r\n }\r\n\r\n})(\r\n (typeof global !== 'undefined') ? global\r\n : ((typeof window !== 'undefined') ? window\r\n : ((typeof self !== 'undefined') ? self : this))\r\n);\r\n",";(function(){var h;function l(a){var c=0;return function(){return c\n \n \n \n
\n \n \n ![\"${source.title}\"](\"${imageUrl}\")
\n \n
\n `\n }\n\n let authorHtml = ''\n const authorText = source.perspectives_abstractperspectivesdetailpage__get_author_names_for_search\n if (authorText) {\n authorHtml = ``\n }\n\n li.innerHTML = `\n \n \n ${imageHtml}\n
\n \n
\n \n `\n\n const link = li.querySelector('a')\n if (!isExternal) {\n link.onclick = event => {\n event.preventDefault()\n barba.go(event.currentTarget.href, 'barba', event)\n }\n }\n\n return li\n }\n\n renderResults = (body) => {\n const { total, hits } = body.hits\n const totalHits = total.value\n\n this.resultsContainer.innerHTML = ''\n\n const colDiv = document.createElement('div')\n colDiv.className = 'col-xs-20 col-md-20'\n\n const rowDiv = document.createElement('div')\n rowDiv.className = 'row row-xs--center'\n const indexGridDiv = document.createElement('div')\n indexGridDiv.className = 'index-grid'\n\n if (this.pageTitle) {\n const header = document.createElement('header')\n header.className = 'articles-index__header'\n const headerRow = document.createElement('div')\n headerRow.className = 'row row-xs--center'\n const h1 = document.createElement('h1')\n h1.className = 'col-xs-22 col-md-20'\n h1.innerHTML = this.pageTitle\n headerRow.appendChild(h1)\n header.appendChild(headerRow)\n indexGridDiv.appendChild(header)\n }\n\n rowDiv.appendChild(colDiv)\n indexGridDiv.appendChild(rowDiv)\n if (totalHits > 0) {\n const list = document.createElement('ul')\n list.className = 'index-grid__list'\n hits.forEach(hit => {\n list.appendChild(this.renderHit(hit))\n })\n colDiv.appendChild(list)\n\n } else {\n const noResultsP = document.createElement('p')\n noResultsP.className = 'index-grid__no-results'\n noResultsP.textContent = 'No results.'\n colDiv.appendChild(noResultsP)\n }\n\n this.resultsContainer.appendChild(indexGridDiv)\n\n if (this.resultsTitle) {\n const titleMap = {\n 'news': 'News',\n 'insights': 'Insights',\n }\n\n this.resultsTitle.innerHTML = titleMap[this.currentCategory] || 'All Posts'\n }\n\n const maxPages = Math.ceil(totalHits / this.resultsPerPage)\n this.renderPager(maxPages)\n }\n\n onSearchInput = () => {\n clearTimeout(this.searchTimeout)\n this.searchTimeout = setTimeout(() => {\n this.fetchResults(1)\n }, 300)\n }\n\n fetchResults = async (page = 1, initialLoad = false) => {\n const query = this.searchInput.value\n this.currentPage = page\n\n const facetsMust = []\n const facetsShould = []\n if (this.currentCategory === 'news') {\n // eslint-disable-next-line camelcase\n facetsMust.push({ _django_content_type: 'perspectives.NewsPerspectivesDetailPage' })\n } else if (this.currentCategory === 'insights') {\n // eslint-disable-next-line camelcase\n facetsMust.push({ _django_content_type: 'perspectives.ConversationsPerspectivesDetailPage' })\n } else if (this.teamMemberId) {\n facetsMust.push(\n `(perspectives_abstractperspectivesdetailpage__team_member_id_filter:${this.teamMemberId} OR perspectives_abstractperspectivesdetailpage__author_id_filter:${this.teamMemberId})`\n )\n } else if (this.relationshipId) {\n facetsMust.push({\n 'perspectives_abstractperspectivesdetailpage__company_id_filter': this.relationshipId,\n })\n } else {\n // eslint-disable-next-line camelcase\n facetsShould.push({ _django_content_type: 'perspectives.NewsPerspectivesDetailPage' })\n // eslint-disable-next-line camelcase\n facetsShould.push({ _django_content_type: 'perspectives.ConversationsPerspectivesDetailPage' })\n }\n\n if (this.resultsTitle) {\n this.resultsTitle.classList.add(CLASSES.IS_SEARCHING)\n }\n if (this.resultsContainer) {\n this.resultsContainer.classList.add(CLASSES.IS_SEARCHING)\n }\n if (this.searchForm) {\n this.searchForm.classList.add(CLASSES.IS_SEARCHING)\n }\n\n try {\n const body = await this.search(query, facetsMust, facetsShould, this.currentPage)\n this.renderResults(body)\n } catch (error) {\n console.error('Error fetching search results:', error)\n } finally {\n if (this.resultsTitle) {\n this.resultsTitle.classList.remove(CLASSES.IS_SEARCHING)\n }\n if (this.resultsContainer) {\n this.resultsContainer.classList.remove(CLASSES.IS_SEARCHING)\n }\n if (this.searchForm) {\n this.searchForm.classList.remove(CLASSES.IS_SEARCHING)\n }\n if (this.searchInput && !initialLoad) {\n this.searchInput.focus()\n }\n }\n }\n\n onSearchSubmit = event => {\n event.preventDefault()\n if (this.searchTimeout) {\n clearTimeout(this.searchTimeout)\n }\n this.fetchResults(1)\n }\n\n onPagerDot(event) {\n event.preventDefault()\n const pageNumberStr = event.target.dataset.pageNumber || event.target.textContent\n const pageNumber = parseInt(pageNumberStr, 10)\n\n if (isNaN(pageNumber) || pageNumber === this.currentPage) {\n return\n }\n\n this.fetchResults(pageNumber)\n }\n\n onPagerPrev(event) {\n event.preventDefault()\n if (this.currentPage <= 1) return\n this.fetchResults(this.currentPage - 1)\n }\n\n onPagerNext(event) {\n event.preventDefault()\n this.fetchResults(this.currentPage + 1)\n }\n\n attachPagerEvents() {\n this.pagerElement.querySelectorAll('.pagination__button.-prev').forEach((a) => {\n a.addEventListener('click', this.onPagerPrev)\n })\n\n this.pagerElement.querySelectorAll('.pagination__number').forEach((a) => {\n a.addEventListener('click', this.onPagerDot)\n })\n\n this.pagerElement.querySelectorAll('.pagination__button.-next').forEach((a) => {\n a.addEventListener('click', this.onPagerNext)\n })\n }\n\n attachInitialPagerEvents() {\n if (!this.pagerElement) return\n\n this.attachPagerEvents()\n const activePageElement = this.pagerElement.querySelector('.pagination__number.-active')\n if (activePageElement) {\n this.currentPage = parseInt(activePageElement.textContent, 10)\n } else {\n this.currentPage = 1\n }\n }\n\n getArrowSvg = (modifierClasses = []) => {\n const classList = ['pagination__arrow', ...modifierClasses].join(' ')\n const path = '\n
\n ${authorHtml}\n