${src}`);\n } else {\n if (!this.inited) {\n // Put this after the fetch otherwise we can never catch it fast enough.\n // FIXME: Even so, this doesn't fire in chrome for listeners in time.\n this.shadowRoot.dispatchEvent(\n new Event(\"ready\", {\n composed: true,\n bubbles: false,\n cancelable: false,\n })\n );\n this.inited = true;\n }\n const reader = downloadAudioResponse.body.getReader();\n let expectedLength = parseInt(\n downloadAudioResponse.headers.get(\"Content-Length\"),\n 10\n );\n if (isNaN(expectedLength)) {\n expectedLength = parseInt(\n downloadAudioResponse.headers.get(\"Fallback-Content-Length\"),\n 10\n );\n }\n if (!isNaN(expectedLength)) {\n if (!this.progressBar.parentElement) {\n this.timelineElements.spectrogramContainer.appendChild(\n this.progressBar\n );\n }\n }\n while (!this.requestAborted) {\n const {done, value} = await reader.read();\n if (done) {\n break;\n }\n chunks.push(value);\n receivedLength += value.length;\n if (!isNaN(expectedLength)) {\n const progress = receivedLength / expectedLength;\n this.progressBar.setAttribute(\"value\", String(progress * 100));\n if (progress === 1) {\n if (this.progressBar.parentElement) {\n this.progressBar.parentElement.removeChild(this.progressBar);\n }\n }\n }\n }\n const fileBytesReceived = new Uint8Array(receivedLength);\n let position = 0;\n for (const chunk of chunks) {\n fileBytesReceived.set(chunk, position);\n position += chunk.length;\n }\n fileBytes = fileBytesReceived.buffer;\n const spectrogramInited = await initSpectrogram(\n fileBytes,\n this.persistentSpectrogramState || null\n );\n if (spectrogramInited.error) {\n this.showErrorMessage(`${spectrogramInited.error} for ${this.localSrc || src}`);\n } else {\n const {\n renderRange,\n renderToContext,\n audioFloatData,\n invalidateCanvasCaches,\n terminateWorkers,\n cyclePalette,\n getGainForRegion,\n persistentSpectrogramState,\n } = spectrogramInited;\n this.getGainForRegionOfInterest = getGainForRegion;\n timelineState.numAudioSamples = audioFloatData.length;\n timelineState.left = 0;\n timelineState.top = 1;\n timelineState.bottom = 0;\n timelineState.right = 1;\n timelineState.zoomX = 1;\n timelineState.pinchStarted = false;\n timelineState.panStarted = false;\n timelineState.initialPinchXLeftZeroOne = 0;\n timelineState.initialPinchXRightZeroOne = 1;\n timelineState.currentAction = null;\n audioState.followPlayhead = false;\n audioState.audioProgressZeroOne = 0;\n audioState.playbackStartOffset = 0;\n audioState.audioProgressSampleTime = performance.now();\n audioState.wasPlaying = false;\n audioState.playheadStartOffsetXZeroOne = 0;\n audioState.playheadDragOffsetX = 0;\n audioState.mainPlayheadStartOffsetXZeroOne = 0;\n audioState.mainPlayheadDragOffsetX = 0;\n audioState.dragPlayheadRaf = 0;\n audioState.playheadWasInRangeWhenPlaybackStarted = false;\n\n this.persistentSpectrogramState = persistentSpectrogramState;\n this.terminateWorkers = terminateWorkers;\n this.invalidateCanvasCaches = invalidateCanvasCaches;\n this.renderRange = renderRange;\n\n const defaultPalette = \"Viridis\";\n // Select starting palette\n let palette = this.colorScheme || defaultPalette;\n if (\n !colorMaps\n .map((p) => p.toLowerCase())\n .includes(palette.toLowerCase())\n ) {\n console.error(\n `Unknown color scheme: ${palette}. Allowed schemes are any of '${colorMaps.join(\n \"', '\"\n )}'`\n );\n palette = defaultPalette;\n }\n let paletteChangeTimeout;\n this.nextPalette = () => {\n this.clearOverlay();\n const nextPalette = cyclePalette();\n // Give downstream renderers a moment to adjust to palette changes;\n clearTimeout(paletteChangeTimeout);\n paletteChangeTimeout = setTimeout(() => {\n timelineState.isDarkTheme = nextPalette !== \"Grey\";\n const startZeroOne = timelineState.left;\n const endZeroOne = timelineState.right;\n const top = timelineState.top;\n const bottom = timelineState.bottom;\n if (this.sharedState.displayTimeline) {\n drawTimelineUI(\n startZeroOne,\n endZeroOne,\n timelineState.currentAction\n );\n }\n renderToContext(ctx, startZeroOne, endZeroOne, top, bottom);\n if (this.sharedState.displayTimeline) {\n renderToContext(mapCtx, 0, 1, 1, 0);\n }\n audioState.progressSampleTime = performance.now();\n updatePlayhead();\n if (this.actualSampleRate) {\n if (this.drawFrequencyScale) {\n this.redrawFrequencyScaleOverlay();\n } else {\n this.clearOverlay();\n }\n }\n }, 10);\n return nextPalette;\n };\n while (this.nextPalette().toLowerCase() !== palette.toLowerCase()) {\n // Cycle until we get the desired palette\n }\n this.transformY = (y) => {\n const top = timelineState.top;\n const bottom = timelineState.bottom;\n // Is the incoming y within the clampedRangeY?\n // FIXME: In the shader, we need to do this also so that the texture stretches correctly.\n const maxTextureHeight = Math.max(canvas.height, TEXTURE_HEIGHT);\n const maxZoom = (maxTextureHeight / (canvas.height / window.devicePixelRatio));\n const maxYZoom = maxZoom * MAX_ZOOMED_REGION;\n // const maxYZoom =\n // (TEXTURE_HEIGHT / (canvas.height / window.devicePixelRatio)) *\n // MAX_ZOOMED_REGION;\n const rangeY = top - bottom;\n const minRangeY = 1 / maxZoom;\n\n // The input height of the selected region.\n const clampedRangeY = Math.max(rangeY, minRangeY);\n const posY = bottom / Math.max(0.000001, 1 - rangeY);\n const rem = 1 - clampedRangeY;\n const inBottom = rem * posY;\n const inTop = inBottom + clampedRangeY;\n\n const mMaxZoom = map(clampedRangeY, 1, minRangeY, 1, 1 / maxYZoom);\n const actualHeight = clampedRangeY * (1 / mMaxZoom);\n const remainder = 1 - actualHeight;\n const selectedBottom = remainder * posY;\n const selectedTop = selectedBottom + actualHeight;\n\n const aboveRange = y > inTop;\n const belowRange = y < inBottom;\n const inRange = y <= inTop && y >= inBottom;\n if (inRange) {\n y = map(y, inBottom, inTop, selectedBottom, selectedTop);\n } else if (belowRange) {\n y = map(y, 0, inBottom, 0, selectedBottom);\n } else if (aboveRange) {\n y = map(y, inTop, 1.0, selectedTop, 1.0);\n }\n return y;\n };\n this.inverseTransformY = (yZeroOne) => {\n // How much to crop of the top and bottom of the spectrogram (used if the sample rate of the audio was different\n // from the sample rate the FFT was performed at, since that leaves a blank space at the top)\n let y = 1 - Math.min(1, Math.max(0, yZeroOne));\n const top = timelineState.top;\n const bottom = timelineState.bottom;\n\n const maxTextureHeight = Math.max(canvas.height, TEXTURE_HEIGHT);\n const maxZoom = (maxTextureHeight / (canvas.height / window.devicePixelRatio));\n const maxYZoom = maxZoom * MAX_ZOOMED_REGION;\n const minRangeY = 1.0 / maxZoom;\n const rangeY = top - bottom;\n const clampedRangeY = Math.max(rangeY, minRangeY);\n // Prevent divide by zero\n const posY = bottom / Math.max(0.000001, 1.0 - rangeY);\n const mMaxZoom = map(\n clampedRangeY,\n 1.0,\n minRangeY,\n 1.0,\n 1.0 / maxYZoom\n );\n const actualHeight = clampedRangeY * (1.0 / mMaxZoom);\n const remainder = 1.0 - actualHeight;\n const selectedBottom = remainder * posY;\n const selectedTop = selectedBottom + actualHeight;\n const aboveRange = y > selectedTop;\n const belowRange = y < selectedBottom;\n const inRange = y <= selectedTop && y >= selectedBottom;\n\n if (inRange) {\n y = map(y, selectedBottom, selectedTop, bottom, top);\n } else if (belowRange) {\n y = map(y, 0.0, selectedBottom, 0.0, bottom);\n } else if (aboveRange) {\n y = map(y, selectedTop, 1.0, top, 1.0);\n }\n return y;\n };\n let cropAmountTop = 0;\n const clampZeroOne = (x) => Math.max(0, Math.min(1, x));\n const clampZeroMax = (x, max) => Math.max(0, Math.min(max, x));\n const redrawTimescaleOverlay = (\n ctx,\n startZeroOne,\n endZeroOne,\n duration\n ) => {\n ctx.save();\n // Draw a notch every ~second\n ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n const startTime = startZeroOne * duration;\n const endTime = endZeroOne * duration;\n const startSeconds = Math.floor(startTime);\n const endSeconds = Math.ceil(endTime);\n const zoomLevel = endZeroOne - startZeroOne;\n\n //const distanceBetweenSecondNotches = (startZeroOne + 1) / duration * ctx.canvas.width / devicePixelRatio;\n\n // TODO: Fade between. I guess we want a good way of generalising this pattern of having features fade in at\n // various zoom levels. Maybe show every 10 seconds, then every 5, then every 2, then every 1\n\n //console.log(\"distanceBetweenSecondNotches\", distanceBetweenSecondNotches, drawEveryOtherSecond);\n const tenPx = 10 * devicePixelRatio;\n const twentyPx = tenPx * 2;\n const fortyPx = tenPx * 4;\n ctx.font = `${tenPx}px sans-serif`;\n ctx.textAlign = \"center\";\n let xOpacity = 0.5;\n const n1 = mapRange(0 / duration, startZeroOne, endZeroOne, 0, 1) *\n ctx.canvas.width / devicePixelRatio;\n const n2 = mapRange(1 / duration, startZeroOne, endZeroOne, 0, 1) *\n ctx.canvas.width / devicePixelRatio;\n const distanceBetweenSecondNotches = n2 - n1;\n const maxOpacity = 0.5;\n const breakPointsPx = [2, 4, 8, 16, 32, 64, 128, 256];\n // Work out the zoom levels these correspond to:\n for (let i = startSeconds; i < endSeconds; i += 1) {\n const m0 = (i) % 64 === 0;\n const m1 = (i) % 32 === 0;\n const m2 = (i) % 16 === 0;\n const m3 = (i) % 8 === 0;\n const m4 = (i) % 4 === 0;\n const m5 = (i) % 2 === 0;\n let displayNotch = false;\n let initialXOpacity = 0;\n if (distanceBetweenSecondNotches < breakPointsPx[0]) { // display a notch every 16 px\n displayNotch = m0;\n } else if (distanceBetweenSecondNotches < breakPointsPx[1]) {\n displayNotch = m0 || m1;\n } else if (distanceBetweenSecondNotches < breakPointsPx[2]) {\n displayNotch = m0 || m1 || m2;\n } else if (distanceBetweenSecondNotches < breakPointsPx[3]) {\n displayNotch = m0 || m1 || m2 || m3;\n } else if (distanceBetweenSecondNotches < breakPointsPx[4]) {\n displayNotch = m0 || m1 || m2 || m3 || m4;\n } else if (distanceBetweenSecondNotches < breakPointsPx[5]) {\n displayNotch = m0 || m1 || m2 || m3 || m4 || m5;\n } else {\n displayNotch = true;\n }\n if (displayNotch) {\n if (m0) {\n initialXOpacity = maxOpacity;\n } else if (m1) {\n initialXOpacity = clampZeroMax(mapRange(distanceBetweenSecondNotches, breakPointsPx[0], breakPointsPx[1], 0, maxOpacity), maxOpacity);\n } else if (m2) {\n initialXOpacity = clampZeroMax(mapRange(distanceBetweenSecondNotches, breakPointsPx[1], breakPointsPx[2], 0, maxOpacity), maxOpacity);\n } else if (m3) {\n initialXOpacity = clampZeroMax(mapRange(distanceBetweenSecondNotches, breakPointsPx[2], breakPointsPx[3], 0, maxOpacity), maxOpacity);\n } else if (m4) {\n initialXOpacity = clampZeroMax(mapRange(distanceBetweenSecondNotches, breakPointsPx[3], breakPointsPx[4], 0, maxOpacity), maxOpacity);\n } else if (m5) {\n initialXOpacity = clampZeroMax(mapRange(distanceBetweenSecondNotches, breakPointsPx[4], breakPointsPx[5], 0, maxOpacity), maxOpacity);\n } else {\n initialXOpacity = clampZeroMax(mapRange(distanceBetweenSecondNotches, breakPointsPx[5], breakPointsPx[6], 0, maxOpacity), maxOpacity);\n }\n }\n // Work out whether we want to draw this notch or not at this zoom level.\n if (i !== 0 && displayNotch) {\n const oX =\n mapRange(i / duration, startZeroOne, endZeroOne, 0, 1) *\n ctx.canvas.width;\n xOpacity = initialXOpacity;\n if (this.drawFrequencyScale && oX > canvas.width - fortyPx) {\n xOpacity = clampZeroOne(mapRange(oX, canvas.width - fortyPx, canvas.width - twentyPx, 1, 0)) * initialXOpacity;\n }\n ctx.fillStyle = `rgba(255, 255, 255, ${xOpacity})`;\n // Draw notches\n ctx.fillRect(oX, 0, 1, ctx.canvas.height / 2);\n ctx.fillStyle = `rgba(255, 255, 255, ${xOpacity})`;\n ctx.fillText(this.formatTime(i), oX, ctx.canvas.height / 2 + tenPx);\n\n }\n // Drawing inter-second notches\n const opacity = clampZeroOne(\n mapRange(distanceBetweenSecondNotches, breakPointsPx[6], breakPointsPx[7], 0, 1)\n );\n if (opacity > 0) {\n ctx.fillStyle = `rgba(255, 255, 255, ${opacity * xOpacity})`;\n for (let j = 1; j < 10; j += 1) {\n const oX =\n mapRange(\n (i + 0.1 * j) / duration,\n startZeroOne,\n endZeroOne,\n 0,\n 1\n ) * ctx.canvas.width;\n let h = ctx.canvas.height / 3;\n if (j === 5) {\n h += 5 * devicePixelRatio;\n }\n ctx.fillRect(oX, 0, 1, h);\n }\n }\n }\n ctx.restore();\n };\n this.redrawTimescaleOverlay = () =>\n redrawTimescaleOverlay(\n timescaleOverlayContext,\n timelineState.left,\n timelineState.right,\n audioState.audioDuration\n );\n this.clearTimescaleOverlay = () => {\n timescaleOverlayContext.save();\n timescaleOverlayContext.clearRect(\n 0,\n 0,\n ctx.canvas.width,\n ctx.canvas.height\n );\n };\n\n this.render = ({detail: {initialRender, force}}) => {\n if (this.raf) {\n cancelAnimationFrame(this.raf);\n this.raf = undefined;\n }\n this.raf = requestAnimationFrame(() => {\n const startZeroOne = timelineState.left;\n const endZeroOne = timelineState.right;\n const top = timelineState.top;\n const bottom = timelineState.bottom;\n if (\n (this.deferredWidth &&\n ctx.canvas.width !== this.deferredWidth) ||\n (this.deferredHeight &&\n ctx.canvas.height !== this.deferredHeight)\n ) {\n this.resizeCanvases(this.deferredWidth, true);\n this.timelineElements.container.classList.remove(\"disabled\");\n } else if (\n this.deferredWidth &&\n ctx.canvas.width === this.deferredWidth &&\n this.deferredHeight &&\n ctx.canvas.height === this.deferredHeight\n ) {\n this.timelineElements.container.classList.remove(\"disabled\");\n }\n\n if (this.sharedState.displayTimeline) {\n drawTimelineUI(\n startZeroOne,\n endZeroOne,\n timelineState.currentAction\n );\n }\n if (!audioState.playing) {\n audioState.progressSampleTime = performance.now();\n updatePlayhead();\n }\n\n // TODO: Move somewhere sensible\n this.drawTimescale = this.timeScale;\n this.drawFrequencyScale = this.frequencyScale;\n if (this.drawTimescale) {\n redrawTimescaleOverlay(\n timescaleOverlayContext,\n startZeroOne,\n endZeroOne,\n audioState.audioDuration\n );\n }\n\n // Render the stretched version\n renderToContext(ctx, startZeroOne, endZeroOne, top, bottom).then(\n (s) => {\n if (!!s) {\n this.shadowRoot.dispatchEvent(\n new CustomEvent(\"render\", {\n bubbles: false,\n composed: true,\n cancelable: false,\n detail: {\n range: {\n begin: startZeroOne,\n end: endZeroOne,\n min: bottom,\n max: top,\n },\n context: userOverlayCtx,\n },\n })\n );\n }\n }\n );\n if (initialRender) {\n renderToContext(mapCtx, 0, 1, 1, 0);\n }\n if (!this.sharedState.interacting || initialRender) {\n // Render the fine detail of the zoom level and then fill it in when available.\n renderRange(startZeroOne, endZeroOne, canvas.width, force).then(\n (rangeCropInfo) => {\n if (rangeCropInfo && rangeCropInfo.cropAmountTop) {\n cropAmountTop = rangeCropInfo.cropAmountTop;\n this.actualSampleRate = rangeCropInfo.actualSampleRate;\n }\n if (initialRender) {\n renderToContext(mapCtx, 0, 1, 1, 0).then(() => {\n if (\n this.loadingSpinner &&\n this.loadingSpinner.parentElement\n ) {\n this.loadingSpinner.parentElement.removeChild(\n this.loadingSpinner\n );\n this.playerElements.playButton.removeAttribute(\n \"disabled\"\n );\n this.shadowRoot.dispatchEvent(\n new CustomEvent(\"audio-loaded\", {\n composed: true,\n bubbles: false,\n cancelable: false,\n detail: {\n sampleRate: this.actualSampleRate,\n duration: audioState.audioDuration,\n },\n })\n );\n this.endLoad();\n }\n });\n }\n renderToContext(\n ctx,\n timelineState.left,\n timelineState.right,\n top,\n bottom\n ).then((s) => {\n if (\n initialRender &&\n startTimeOffset !== 0 &&\n endTimeOffset !== 1\n ) {\n // NOTE: If we're doing an initial render at a zoomed in portion, we need to make sure we create\n // the full range image first.\n setInitialZoom(\n startTimeOffset,\n endTimeOffset,\n 1,\n 0,\n initialRender,\n true\n );\n }\n\n if (!!s) {\n this.shadowRoot.dispatchEvent(\n new CustomEvent(\"render\", {\n bubbles: false,\n composed: true,\n cancelable: false,\n detail: {\n range: {\n begin: startZeroOne,\n end: endZeroOne,\n min: bottom,\n max: top,\n },\n context: userOverlayCtx,\n },\n })\n );\n }\n });\n }\n );\n }\n });\n };\n initAudio(\n this.playerElements,\n audioFloatData,\n audioState\n );\n this.removePlaybackFrequencyBandPass();\n if (audioState.playing || audioState.audioProgressZeroOne !== 0) {\n this.pause();\n }\n // Initial render\n this.render({detail: {initialRender: true, force: true}});\n // TODO: Animate to region of interest could be replaced by reactive setting of :start :end props?\n this.resizeInited = true;\n }\n }\n } catch (e) {\n // Failed to load audio, should show an error\n console.warn(\"aborted?\", e);\n }\n }\n })();\n }\n\n beginLoad() {\n if (!this.loadingSpinner.parentElement) {\n this.timelineElements.spectrogramContainer.appendChild(\n this.loadingSpinner\n );\n }\n this.timelineElements.container.classList.add(\"loading\");\n }\n\n endLoad() {\n this.timelineElements.container.classList.remove(\"loading\");\n }\n\n showErrorMessage(error) {\n if (\n this.loadingSpinner &&\n this.loadingSpinner.parentElement\n ) {\n this.loadingSpinner.parentElement.removeChild(\n this.loadingSpinner\n );\n }\n this.timelineElements.container.classList.add(\"error\");\n this.timelineElements.container.querySelector(\".error-message\").innerHTML = `Error: ${error}`;\n this.endLoad();\n }\n\n init() {\n // TODO: Maybe pass in min/max frequency bounds, so that the view is restricted to AOI?\n // TODO: Get height dynamically from attributes, and respond to changes in height.\n const lazyLoad = this.hasAttribute(\"lazy\");\n const allowFullscreen = this.hasAttribute(\"allow-fullscreen\");\n this.sharedState.displayTimeline = !this.hasAttribute(\"no-timeline\");\n const totalHeight = this.height || 360;\n this.timelineHeight = Math.min(60, Math.max(44, totalHeight - 200));\n this.spectrogramHeight = this.sharedState.displayTimeline ? totalHeight - this.timelineHeight : totalHeight;\n\n const src = this.getAttribute(\"src\");\n const root = this.shadowRoot;\n if (!this.inited) {\n root.appendChild(template.content.cloneNode(true));\n }\n\n const container = root.getElementById(\"container\");\n const spectrogramContainer = root.getElementById(\"spectrogram-container\");\n const canvasContainer = root.getElementById(\"canvas-container\");\n const miniMapContainer = root.getElementById(\"mini-map\");\n const mapCanvas = root.getElementById(\"map-canvas\");\n const canvas = root.getElementById(\"spectrogram-canvas\");\n const overlayCanvas = root.getElementById(\"spectastiq-overlay-canvas\");\n const timescaleCanvas = root.getElementById(\n \"spectastiq-timescale-overlay-canvas\"\n );\n const userOverlayCanvas = root.getElementById(\"user-overlay-canvas\");\n const playheadCanvas = root.getElementById(\"playhead-canvas\");\n const timelineUICanvas = root.getElementById(\"timeline-ui-canvas\");\n\n if (!this.sharedState.displayTimeline) {\n miniMapContainer.style.display = \"none\";\n }\n\n this.formatTime = (time) => {\n let seconds = Math.floor(time);\n if (seconds < 60) {\n return `0:${`${seconds}`.padStart(2, \"0\")}`;\n }\n const minutes = Math.floor(seconds / 60);\n seconds = seconds - minutes * 60;\n return `${minutes}:${seconds.toString().padStart(2, \"0\").padEnd(2, \"0\")}`;\n };\n\n const setupDefaultControls = () => {\n const additionalControls = root.querySelector(\".additional-controls\");\n const showAdditionalControlsBtn = root.querySelector(\".show-additional-controls\");\n const timeElapsed = root.querySelector(\".time-elapsed\");\n const fullscreenToggleBtn = root.querySelector(\".fullscreen-toggle\");\n if (allowFullscreen) {\n fullscreenToggleBtn.classList.add(\"allow-fullscreen\");\n const initialHeight = this.height;\n const spectastiq = this;\n const uiHeight = 44;\n const exitFullscreen = () => {\n if (!document.fullscreenElement) {\n spectastiq.height = initialHeight;\n window.removeEventListener(\"fullscreenchange\", exitFullscreen);\n }\n };\n fullscreenToggleBtn.addEventListener(\"click\", () => {\n if (!document.fullscreenElement) {\n document.documentElement.requestFullscreen().catch(err => {\n console.log(`Error attempting to enable fullscreen: ${err.message}`);\n }).then(() => {\n window.addEventListener(\"fullscreenchange\", exitFullscreen);\n spectastiq.height = window.screen.height - uiHeight;\n });\n } else {\n\n document.exitFullscreen().then(exitFullscreen);\n }\n });\n }\n root.addEventListener(\"playhead-update\", e => {\n timeElapsed.textContent = `${this.formatTime(e.detail.timeInSeconds)} / ${this.formatTime(this.timeline.timelineState.audioState.audioDuration)}`;\n });\n\n let showingAdditionalControls = false;\n const hideAdditionalControls = () => {\n showingAdditionalControls = false;\n additionalControls.classList.remove(\"show\");\n };\n\n // Handle clicks outside the web component\n document.addEventListener(\"click\", (e) => {\n if (showingAdditionalControls && e.target !== this.shadowRoot.host) {\n hideAdditionalControls();\n }\n });\n\n this.shadowRoot.addEventListener(\"click\", (e) => {\n // Handle clicks inside the web component that aren't the menu\n if (showingAdditionalControls &&\n !additionalControls.contains(e.target) &&\n !showAdditionalControlsBtn.contains(e.target)) {\n hideAdditionalControls();\n }\n });\n\n showAdditionalControlsBtn.addEventListener(\"click\", () => {\n showingAdditionalControls = !showingAdditionalControls;\n additionalControls.classList.toggle(\"show\");\n });\n\n const freqSwitch = root.getElementById(\"freq-switch\");\n if (this.frequencyScale) {\n freqSwitch.setAttribute(\"checked\", \"checked\");\n }\n // TODO: If frequencyScale is changed programmatically, we might want to sync the state here.\n freqSwitch.addEventListener(\"change\", () => {\n this.frequencyScale = freqSwitch.checked.toString();\n });\n const timeSwitch = root.getElementById(\"time-switch\");\n if (this.timeScale) {\n timeSwitch.setAttribute(\"checked\", \"checked\");\n }\n timeSwitch.addEventListener(\"change\", () => {\n this.timeScale = timeSwitch.checked.toString();\n });\n const palettes = root.querySelector(\".palettes\");\n const svgTick = palettes.querySelector('.svg-tick');\n for (const [color, gradient] of Object.entries(COLOR_MAPS)) {\n const button = document.createElement(\"input\");\n button.type = \"radio\";\n button.name = \"palette-group\";\n button.id = `palette-${color}`;\n button.classList.add(\"radio-custom\");\n\n const label = document.createElement(\"label\");\n label.setAttribute(\"for\", button.id);\n label.classList.add(\"radio-custom-label\");\n const icon = document.createElement(\"canvas\");\n icon.width = 16 * devicePixelRatio;\n icon.height = 16 * devicePixelRatio;\n label.appendChild(icon);\n const labelText = document.createElement(\"span\");\n labelText.textContent = color;\n label.appendChild(labelText);\n label.appendChild(svgTick.cloneNode(true));\n palettes.appendChild(button);\n palettes.appendChild(label);\n if (this.colorScheme.toLowerCase() === color) {\n button.setAttribute(\"checked\", \"checked\");\n }\n const ctx = icon.getContext(\"2d\");\n for (let y = 0; y < icon.height; y++) {\n const slot = (y / icon.height) * gradient.length;\n const color = gradient[Math.floor(slot)];\n ctx.fillStyle = `rgb(${color[0] * 255}, ${color[1] * 255}, ${color[2] * 255})`;\n ctx.fillRect(0, y, icon.width, 1);\n }\n button.addEventListener(\"change\", () => {\n this.colorScheme = color;\n });\n }\n // Init palette options.\n };\n\n // FIXME: Maybe only do this if there are no user-supplied controls?\n setupDefaultControls();\n\n if (!(src && !this.inited)) {\n container.classList.add(\"no-src\");\n // NOTE: No audio src, show ability to load from disk.\n const selectUserFileBtn = root.querySelector(\".select-user-file-btn\");\n const fileInput = root.querySelector(\".select-user-file-input\");\n selectUserFileBtn.addEventListener(\"click\", () => {\n fileInput.click();\n });\n fileInput.addEventListener('change', (e) => {\n if (e.target.files && e.target.files.length !== 0) {\n root.getElementById(\"container\").classList.remove(\"no-src\");\n const file = e.target.files[0];\n this.localSrc = e.target.files[0].name;\n this.loadSrc(URL.createObjectURL(file));\n }\n });\n }\n\n if (!this.loadingSpinner) {\n this.loadingSpinner = root.getElementById(\"loading-spinner\");\n this.loadingSpinner.parentElement.removeChild(this.loadingSpinner);\n }\n if (!this.progressBar) {\n this.progressBar = root.getElementById(\"progress-bar\");\n this.progressBar.parentElement.removeChild(this.progressBar);\n }\n const mainPlayheadCanvas = root.getElementById(\"main-playhead-canvas\");\n const controls = root.getElementById(\"controls\");\n const playButton = root.getElementById(\"play-button\");\n\n this.timelineElements = {\n mapCanvas,\n canvas,\n canvasContainer,\n miniMapContainer,\n userOverlayCanvas,\n overlayCanvas,\n timescaleCanvas,\n timelineUICanvas,\n mainPlayheadCanvas,\n container,\n spectrogramContainer,\n };\n\n this.playerElements = {\n playheadCanvas,\n mainPlayheadCanvas,\n playButton,\n canvas,\n overlayCanvas,\n playheadCanvasCtx: playheadCanvas.getContext(\"2d\"),\n mainPlayheadCanvasCtx: mainPlayheadCanvas.getContext(\"2d\"),\n };\n const resizeCanvas = (canvas, width, height, forReal = true) => {\n canvas.style.height = `${height}px`;\n canvas.style.width = `${width}px`;\n // NOTE: Defer resizing the backing canvas until we actually want to draw to it, this makes resizes look better.\n if (!this.resizeInited || forReal) {\n canvas.height = height * devicePixelRatio;\n canvas.width = width * devicePixelRatio;\n } else {\n this.deferredWidth = width;\n this.deferredHeight = height;\n }\n };\n overlayCanvas.addEventListener(\"interaction-begin\", () => {\n controls.classList.add(\"disabled\");\n this.sharedState.interacting = true;\n\n // TODO: Await requestAnimationFrame?\n // TODO: Set timeout in case we're interacting but not moving?\n if (this.sharedState.displayTimeline) {\n const startZeroOne = timelineState.left;\n const endZeroOne = timelineState.right;\n drawTimelineUI(startZeroOne, endZeroOne, timelineState.currentAction);\n }\n });\n overlayCanvas.addEventListener(\"interaction-target-changed\", () => {\n // Canvas-based hit areas changed, so redraw handles for hover states etc.\n if (this.sharedState.displayTimeline) {\n const startZeroOne = timelineState.left;\n const endZeroOne = timelineState.right;\n drawTimelineUI(startZeroOne, endZeroOne, timelineState.currentAction);\n }\n updatePlayhead();\n });\n overlayCanvas.addEventListener(\"interaction-end\", () => {\n controls.classList.remove(\"disabled\");\n this.sharedState.interacting = false;\n this.render &&\n this.render({detail: {initialRender: false, force: true}});\n });\n\n const clearOverlay = () => {\n const overlayCtx = overlayCanvas.getContext(\"2d\");\n overlayCtx.clearRect(\n 0,\n 0,\n overlayCtx.canvas.width,\n overlayCtx.canvas.height\n );\n };\n this.clearOverlay = clearOverlay;\n\n const redrawFrequencyScaleOverlay = (state, actualSampleRate) => {\n const ctx = overlayCanvas.getContext(\"2d\");\n ctx.save();\n const isDarkTheme = state.isDarkTheme;\n state.textMeasurementCache = state.textMeasurementCache || {};\n const maxFreq = actualSampleRate / 2;\n const pixelRatio = window.devicePixelRatio;\n ctx.font = `${10 * pixelRatio}px sans-serif`;\n const divisions = Math.ceil(maxFreq / 1000) + 1;\n const divisionColor = isDarkTheme\n ? \"rgba(255, 255, 255, 0.1)\"\n : \"rgba(0, 0, 0, 0.1)\";\n const textColor = isDarkTheme\n ? \"rgba(255, 255, 255, 0.5)\"\n : \"rgba(0, 0, 0, 0.85)\";\n //start at bottom?\n ctx.strokeStyle = divisionColor;\n ctx.lineWidth = Math.max(1, devicePixelRatio / 2);\n ctx.textAlign = \"right\";\n ctx.textBaseline = \"bottom\";\n ctx.fillStyle = textColor;\n const label = \"kHz\";\n const labelX = ctx.canvas.width - 4 * devicePixelRatio;\n const kHzLabelY = ctx.canvas.height - 4 * devicePixelRatio;\n ctx.fillText(label, labelX, kHzLabelY);\n const cacheKey = `${label}_${pixelRatio}`;\n const textHeight =\n state.textMeasurementCache[cacheKey] ||\n ctx.measureText(label).actualBoundingBoxAscent;\n state.textMeasurementCache[cacheKey] = textHeight;\n\n let prevY = (kHzLabelY - textHeight * 0.5) / pixelRatio;\n const minYOffsetFromMargin = Math.abs(\n prevY - ctx.canvas.height / pixelRatio\n );\n for (let i = divisions; i >= 0; i--) {\n const yy = i / divisions;\n const yyy = this.transformY(1 - yy);\n let y = ((1 - yyy) * ctx.canvas.height) / pixelRatio;\n if (prevY - y > 15) {\n ctx.strokeRect(\n 0,\n y * pixelRatio,\n ctx.canvas.width - 25 * pixelRatio,\n 0\n );\n ctx.textBaseline = \"middle\";\n const thisFrequency = Math.round((1 - yy) * maxFreq) / 1000;\n const label = `${thisFrequency.toFixed(1).toLocaleString()}`;\n // NOTE: Measure text takes a fair bit on time on chrome on lower powered android devices; cache measurements.\n const cacheKey = `${label}_${pixelRatio}`;\n const textHeight =\n state.textMeasurementCache[cacheKey] ||\n ctx.measureText(label).actualBoundingBoxAscent;\n state.textMeasurementCache[cacheKey] = textHeight;\n const overshootBottom = y + (textHeight + 5 * pixelRatio) * 0.5;\n const overshotBottom =\n overshootBottom >= ctx.canvas.height / pixelRatio;\n if (overshotBottom) {\n ctx.textBaseline = \"bottom\";\n y -= 2 * pixelRatio;\n }\n // NOTE: fillText is also slow on low-end devices, consider caching text and blitting.\n if (y * pixelRatio > 0) {\n ctx.fillText(\n label,\n ctx.canvas.width - 4 * pixelRatio,\n Math.max(minYOffsetFromMargin * pixelRatio, y * pixelRatio)\n );\n prevY = y;\n }\n }\n }\n ctx.restore();\n };\n\n overlayCanvas.addEventListener(\"range-change\", (e) => {\n this.render && this.render(e);\n });\n let prevMax = 0;\n let prevMin = 1;\n this.shadowRoot.addEventListener(\"render\", (e) => {\n const yRangeChanged =\n e.detail.range.min !== prevMin || e.detail.range.max !== prevMax;\n prevMax = e.detail.range.max;\n prevMin = e.detail.range.min;\n if (yRangeChanged) {\n this.drawFrequencyScale && clearOverlay();\n this.drawFrequencyScale &&\n redrawFrequencyScaleOverlay(timelineState, this.actualSampleRate);\n }\n });\n this.shadowRoot.addEventListener(\"audio-loaded\", (e) => {\n container.classList.add(\"audio-loaded\");\n this.drawFrequencyScale && clearOverlay();\n this.drawFrequencyScale &&\n redrawFrequencyScaleOverlay(timelineState, e.detail.sampleRate);\n });\n overlayCanvas.addEventListener(\"double-click\", async (e) => {\n if (this.applicationHandlesDoubleClick) {\n this.shadowRoot.dispatchEvent(new CustomEvent(\"double-click\", {\n detail: e.detail,\n composed: true,\n bubbles: false,\n cancelable: false,\n }));\n } else {\n // If there's a selected track, should we stop at the end of it?\n await play(e.detail.audioOffsetZeroOne);\n }\n });\n\n const timeline = initTimeline(\n this.shadowRoot,\n this.sharedState,\n this.timelineElements\n );\n const {\n drawTimelineUI,\n timelineState,\n setInitialZoom,\n animateToRange,\n getMaxXZoom,\n getMaxYZoom,\n resetYZoom,\n } = timeline;\n this.timeline = {\n drawTimelineUI,\n redrawFrequencyScaleOverlay,\n timelineState,\n setInitialZoom,\n animateToRange,\n getMaxXZoom,\n getMaxYZoom,\n resetYZoom,\n };\n\n const player = initAudioPlayer(\n this.shadowRoot,\n this.sharedState,\n this.timeline.timelineState,\n this.playerElements\n );\n const {\n audioState,\n updatePlayhead,\n setPlaybackOffset,\n setGain,\n setBandPass,\n startPlayheadDrag,\n endPlayheadDrag,\n dragLocalPlayhead,\n dragGlobalPlayhead,\n removeBandPass,\n play,\n pause,\n } = player;\n\n // TODO: Probably move audio progress to sharedState\n timelineState.audioState = player.audioState;\n timelineState.startPlayheadDrag = startPlayheadDrag;\n timelineState.endPlayheadDrag = endPlayheadDrag;\n timelineState.dragLocalPlayhead = dragLocalPlayhead;\n if (this.sharedState.displayTimeline) {\n timelineState.dragGlobalPlayhead = dragGlobalPlayhead;\n }\n this.audioPlayer = {\n audioState,\n updatePlayhead,\n setPlaybackOffset,\n setBandPass,\n removeBandPass,\n startPlayheadDrag,\n endPlayheadDrag,\n };\n\n this.play = play;\n this.pause = pause;\n this.setGain = setGain;\n\n this.animateToRegionOfInterest = async (start, end, min, max) => {\n const initialStart = timelineState.left;\n const initialEnd = timelineState.right;\n const initialTop = timelineState.top;\n const initialBottom = timelineState.bottom;\n await animateToRange(\n initialStart,\n initialEnd,\n initialTop,\n initialBottom,\n start,\n end,\n max,\n min,\n 200,\n (left, right, top, bottom, final) => {\n setInitialZoom(left, right, top, bottom, false, final);\n }\n );\n };\n\n this.setPlaybackFrequencyBandPass = (minFreq, maxFreq) => {\n setBandPass(minFreq, maxFreq);\n };\n this.removePlaybackFrequencyBandPass = () => removeBandPass();\n\n this.selectRegionOfInterest = async (start, end, min, max) => {\n {\n const centerX = start + (end - start) * 0.5;\n if (audioState.audioContext.state !== \"running\") {\n if (navigator.audioSession) {\n // Try to work around issue where iOS won't play audio if phone is muted.\n // (iOS 17+)\n navigator.audioSession.type = 'playback';\n }\n // If we start zooming to a region before the context is running, things break.\n await audioState.audioContext.resume();\n }\n const maxXZoom = getMaxXZoom();\n const pRange = (end - start) * 1.1;\n const paddedRange = Math.max(1 / maxXZoom, pRange);\n const range = paddedRange / 2;\n start = Math.max(centerX - range, 0);\n if (centerX - range < 0) {\n end = centerX + range + Math.abs(centerX - range);\n } else {\n end = centerX + range;\n }\n start = Math.max(0, start);\n end = Math.min(1, end);\n }\n {\n const maxYZoom = getMaxYZoom();\n // Make sure max - min is at least 1/maxYZoom;\n const minZoomYHeight = 1 / maxYZoom;\n let range = max - min;\n if (range < minZoomYHeight) {\n const centerY = min + range * 0.5;\n min = centerY - minZoomYHeight * 0.5;\n max = centerY + minZoomYHeight * 0.5;\n min = Math.max(0, min);\n max = Math.min(1, max);\n range = max - min;\n if (min === 0 && range < minZoomYHeight) {\n max = minZoomYHeight;\n } else if (max === 1 && range < minZoomYHeight) {\n min = 1 - minZoomYHeight;\n }\n }\n }\n\n this.timelineElements.overlayCanvas.dispatchEvent(\n new Event(\"interaction-begin\")\n );\n await this.animateToRegionOfInterest(start, end, min, max);\n this.timelineElements.overlayCanvas.dispatchEvent(\n new Event(\"interaction-end\")\n );\n };\n this.resetYZoom = resetYZoom;\n this.redrawFrequencyScaleOverlay = () =>\n redrawFrequencyScaleOverlay(timelineState, this.actualSampleRate);\n\n this.enterCustomInteractionMode = () => {\n timelineState.customInteractionMode = true;\n this.timelineElements.spectrogramContainer.classList.add(\n \"custom-interaction-mode\"\n );\n };\n this.exitCustomInteractionMode = () => {\n timelineState.customInteractionMode = false;\n this.timelineElements.spectrogramContainer.classList.remove(\n \"custom-interaction-mode\"\n );\n };\n this.beginCustomInteraction = () => {\n timelineState.inCustomInteraction = true;\n };\n this.endCustomInteraction = () => {\n timelineState.inCustomInteraction = false;\n };\n\n this.resizeCanvases = (resizedWidth, forReal) => {\n const width = resizedWidth || container.getBoundingClientRect().width;\n this.timelineElements.canvasContainer.style.height = `${this.spectrogramHeight}px`;\n this.timelineElements.miniMapContainer.style.height = `${this.timelineHeight}px`;\n const initialWidth = this.timelineElements.canvas.width;\n resizeCanvas(\n this.timelineElements.canvas,\n width,\n this.spectrogramHeight,\n forReal\n );\n resizeCanvas(\n this.timelineElements.timescaleCanvas,\n width,\n Math.max(20, Math.min(30, this.spectrogramHeight / 10)),\n true\n );\n resizeCanvas(\n this.timelineElements.overlayCanvas,\n width,\n this.spectrogramHeight,\n true\n );\n resizeCanvas(\n this.timelineElements.userOverlayCanvas,\n width,\n this.spectrogramHeight,\n true\n );\n\n if (this.sharedState.displayTimeline) {\n resizeCanvas(\n this.timelineElements.mapCanvas,\n width,\n this.timelineHeight,\n forReal\n );\n resizeCanvas(\n this.timelineElements.timelineUICanvas,\n width,\n this.timelineHeight,\n true\n );\n resizeCanvas(\n this.playerElements.playheadCanvas,\n width,\n this.timelineHeight,\n true\n );\n }\n resizeCanvas(\n this.playerElements.mainPlayheadCanvas,\n width,\n this.spectrogramHeight,\n true\n );\n let didChangeWidth = false;\n width * devicePixelRatio !== this.timelineElements.canvas.width;\n if (forReal) {\n didChangeWidth =\n this.deferredWidth &&\n this.timelineElements.canvas.width ===\n this.deferredWidth * devicePixelRatio &&\n this.deferredWidth !== initialWidth;\n this.deferredWidth = undefined;\n this.deferredHeight = undefined;\n }\n\n const wasTriggeredByResizeEvent = !!resizedWidth;\n if (wasTriggeredByResizeEvent && !!this.resizeInited) {\n {\n if (this.sharedState.displayTimeline) {\n const startZeroOne = timelineState.left;\n const endZeroOne = timelineState.right;\n drawTimelineUI(startZeroOne, endZeroOne, timelineState.currentAction);\n }\n if (this.actualSampleRate) {\n this.drawFrequencyScale && clearOverlay();\n this.drawFrequencyScale &&\n redrawFrequencyScaleOverlay(timelineState, this.actualSampleRate);\n }\n if (!audioState.playing) {\n audioState.progressSampleTime = performance.now();\n updatePlayhead();\n }\n }\n this.sharedState.interacting = true;\n clearTimeout(this.sharedState.interactionTimeout);\n this.timelineElements.container.classList.add(\"disabled\");\n this.sharedState.interactionTimeout = setTimeout(() => {\n // TODO: We only want to invalidate the caches if the *backing* size of the spectrogram has changed,\n // and it needed to be re-rendered. Otherwise just draw what we have again with no delay.\n // Worth noting though that our webgl canvases *do* need to be resized at some point, and at that point\n // we need to re-upload the textures, which can cause a hitch\n if (didChangeWidth) {\n this.invalidateCanvasCaches && this.invalidateCanvasCaches();\n this.renderRange &&\n this.renderRange(0, 1, canvas.width, true).then(() => {\n this.render({detail: {initialRender: true, force: true}});\n });\n } else {\n this.render({detail: {initialRender: true, force: true}});\n }\n this.sharedState.interacting = false;\n }, 300);\n }\n };\n const resizeObserver = new ResizeObserver((entries) => {\n // We'll defer resizing the spectrogram backing canvas until a new spectrogram has been created at the new\n // width and is ready to render.\n this.resizeCanvases(entries[0].contentRect.width, false);\n });\n resizeObserver.observe(container);\n if (lazyLoad) {\n const intersectionObserver = new IntersectionObserver((intersection) => {\n if (intersection[0].isIntersecting && src && src !== \"null\" && src !== \"undefined\") {\n this.loadSrc(src);\n intersectionObserver.disconnect();\n }\n }, {\n rootMargin: '50px',\n threshold: 0.1\n });\n intersectionObserver.observe(container);\n } else {\n // Initial attributeChangedCallback happens before connectedCallback, so need to load src after initial one-time setup.\n if (src && src !== \"null\" && src !== \"undefined\") {\n // NOTE: Vue initially passes `null` or `undefined` to src, which gets stringified.\n this.loadSrc(src);\n }\n }\n this.inited = true;\n }\n }\n if (!customElements.get(\"spectastiq-viewer\")) {\n customElements.define(\"spectastiq-viewer\", Spectastiq);\n }\n\n return Spectastiq;\n\n})();\n"]}