Microphone access is required for recording.
\n \n `;\n\n this.element.insertAdjacentElement(\"afterend\", message);\n\n // Add click handler to the button\n const retryButton = message.querySelector(\".retry-button\");\n retryButton.addEventListener(\"click\", this.requestPermission.bind(this));\n }\n }\n\n // Hide permission message\n hideMessage() {\n if (this.hasMessageTarget) {\n this.recordingInterfaceTarget.classList.remove(\"hidden\");\n this.messageTarget.classList.add(\"hidden\");\n } else {\n // Remove any dynamically created messages\n const message = document.querySelector(\".microphone-permission-message\");\n if (message) {\n message.remove();\n }\n }\n }\n\n // Request microphone permission - triggered by UI\n requestPermission() {\n // Hide any messages while we request\n this.hideMessage();\n\n // Simply attempt to get user media to trigger browser permission prompt\n if (navigator.mediaDevices) {\n navigator.mediaDevices\n .getUserMedia({ audio: true })\n .then(() => {\n this.dispatch(\"granted\");\n })\n .catch(() => {\n this.dispatch(\"denied\");\n });\n }\n }\n\n // Simple event dispatcher\n dispatch(eventName) {\n const event = new CustomEvent(`microphone-permission:${eventName}`, {\n bubbles: true,\n });\n this.element.dispatchEvent(event);\n }\n}\n","// app/javascript/controllers/recordings_list_controller.js\nimport { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n static targets = [\"list\", \"loading\"];\n\n connect() {\n // Store the bound function\n this.boundHandleRecordingCompleted =\n this.handleRecordingCompleted.bind(this);\n\n document.addEventListener(\n \"audio-recorder:completed\",\n this.boundHandleRecordingCompleted\n );\n }\n\n disconnect() {\n document.removeEventListener(\n \"audio-recorder:completed\",\n this.boundHandleRecordingCompleted\n );\n }\n\n handleRecordingCompleted(event) {\n this.loadingTarget.style.display = \"block\";\n this.fetchRecordings(event.detail.songId);\n }\n\n fetchRecordings(songId) {\n fetch(`/recordings?song_id=${songId}`, {\n headers: {\n Accept: \"text/html\",\n \"X-Requested-With\": \"XMLHttpRequest\",\n },\n })\n .then((response) => response.text())\n .then((html) => {\n this.loadingTarget.style.display = \"none\";\n this.listTarget.innerHTML = html;\n\n // Dispatch update event if needed\n const event = new CustomEvent(\"recordings:updated\", {\n bubbles: true,\n detail: {},\n });\n this.element.dispatchEvent(event);\n })\n .catch((error) => {\n // console.error(\"Error fetching recordings:\", error);\n });\n }\n}\n","// app/javascript/controllers/set_list_songs_controller.js\nimport { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n static targets = [\"source\", \"destination\", \"form\"];\n static values = {\n setlistId: String,\n };\n\n connect() {}\n\n addOrRemoveSong(event) {\n event.preventDefault();\n\n const songIds = Array.from(\n this.destinationTarget.querySelectorAll(\"li\")\n ).map((li) => {\n return li.dataset.id;\n });\n const songId = event.target.closest(\"li\").dataset.id;\n if (!songIds.includes(songId)) {\n songIds.push(songId);\n } else {\n // If the song ID is already in the array, remove it\n event.target.closest(\"li\").classList.add(\"bg-blue-100\");\n songIds.splice(songIds.indexOf(songId), 1);\n }\n // Check if the song ID is already in the array to prevent duplicates\n\n const searchForm = document.querySelector(\n 'form[data-async-form-target=\"form\"]'\n );\n let searchParams = {};\n\n // If the search form exists, get its data\n if (searchForm) {\n const formData = new FormData(searchForm);\n formData.forEach((value, key) => {\n searchParams[key] = value;\n });\n }\n\n // Get CSRF token\n const csrfToken = document\n .querySelector('meta[name=\"csrf-token\"]')\n ?.getAttribute(\"content\");\n\n fetch(this.formTarget.action, {\n method: \"PATCH\",\n headers: {\n \"Content-Type\": \"application/json\",\n Accept: \"text/html\", // Request HTML\n \"X-CSRF-Token\": document.querySelector('meta[name=\"csrf-token\"]')\n .content,\n },\n body: JSON.stringify({\n set_list: {\n song_ids: songIds,\n ...searchParams,\n },\n }),\n })\n .then((response) => response.text())\n .then((html) => {\n // Create a temporary container to parse the HTML\n const parser = new DOMParser();\n const doc = parser.parseFromString(html, \"text/html\");\n\n // Find the destination div in the returned HTML\n const newDestination = doc.querySelector(\n '[data-set-list-entries-target=\"destination\"]'\n );\n\n if (newDestination) {\n // Replace just the contents of the destination div\n this.destinationTarget.innerHTML = newDestination.innerHTML;\n } else {\n // console.error(\n // \"Could not find destination element in the returned HTML\"\n // );\n }\n\n this.sourceTarget\n .querySelector(`#song_${songId}`)\n .classList.add(\"selected\");\n })\n .catch((error) => {\n // console.error(\"Error:\", error);\n // Optionally uncheck the checkbox if there was an error\n event.target.checked = false;\n })\n .finally(() => {\n // After a delay, allow processing again\n setTimeout(() => {\n this.isProcessing = false;\n }, 300);\n });\n }\n}\n","/**\n * MicroEvent - to make any js object an event emitter\n *\n * - pure javascript - server compatible, browser compatible\n * - dont rely on the browser doms\n * - super simple - you get it immediatly, no mistery, no magic involved\n *\n * @author Jerome Etienne (https://github.com/jeromeetienne)\n */\n/**\n * Execute callback for each event in space separated list of event names\n *\n */\nfunction forEvents(events, callback) {\n events.split(/\\s+/).forEach((event) => {\n callback(event);\n });\n}\nexport default class MicroEvent {\n constructor() {\n this._events = {};\n }\n on(events, fct) {\n forEvents(events, (event) => {\n const event_array = this._events[event] || [];\n event_array.push(fct);\n this._events[event] = event_array;\n });\n }\n off(events, fct) {\n var n = arguments.length;\n if (n === 0) {\n this._events = {};\n return;\n }\n forEvents(events, (event) => {\n if (n === 1) {\n delete this._events[event];\n return;\n }\n const event_array = this._events[event];\n if (event_array === undefined)\n return;\n event_array.splice(event_array.indexOf(fct), 1);\n this._events[event] = event_array;\n });\n }\n trigger(events, ...args) {\n var self = this;\n forEvents(events, (event) => {\n const event_array = self._events[event];\n if (event_array === undefined)\n return;\n event_array.forEach(fct => {\n fct.apply(self, args);\n });\n });\n }\n}\n;\n//# sourceMappingURL=microevent.js.map","/**\n * microplugin.js\n * Copyright (c) 2013 Brian Reavis & contributors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\"); you may not use this\n * file except in compliance with the License. You may obtain a copy of the License at:\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF\n * ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n *\n * @author Brian Reavis