Start making it more robust

- Use structured data for search/render
- Start testing component
- Start testing domain logic

lib/music_library_web/live/record_live/barcode_scanner_component.ex

@@ -17,14 +17,21 @@ defmodule MusicLibraryWeb.RecordLive.BarcodeScannerComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div>
-      <h1>Barcode Scan</h1>
-      <video id="camera-view" phx-hook="BarcodeScanner"></video>
+    <div id="barcode-scanner" phx-hook="BarcodeScanner" phx-target={@myself}>
+      <header>
+        <h1 class="text-sm font-medium leading-6 text-zinc-700 dark:text-zinc-400">
+          {gettext("Scan one or more barcodes")}
+        </h1>
+      </header>
+      <div>
+        <p>{@camera}</p>
+        <video id="camera-preview"></video>
+      </div>
       <ul>
         <li :for={release <- assigns.releases}>
-          <span>{release["id"]}</span>
-          <span>{release["barcode"]}</span>
-          <span>{release["title"]}</span>
+          <span>{release.id}</span>
+          <span>{release.barcode}</span>
+          <span>{release.title}</span>
         </li>
       </ul>
     </div>
@@ -32,17 +39,17 @@ defmodule MusicLibraryWeb.RecordLive.BarcodeScannerComponent do
   end
 
   @impl true
-  def handle_event("camera:allowed", _params, socket) do
+  def handle_event("camera_allowed", _params, socket) do
     Logger.debug(fn -> "Camera access allowed" end)
     {:noreply, assign(socket, camera: :allowed)}
   end
 
-  def handle_event("camera:denied", _params, socket) do
+  def handle_event("camera_denied", _params, socket) do
     Logger.debug(fn -> "Camera access denied" end)
     {:noreply, assign(socket, camera: :denied)}
   end
 
-  def handle_event("barcode:scanned", %{"number" => number}, socket) do
+  def handle_event("barcode_scanned", %{"number" => number}, socket) do
     Logger.debug(fn -> "Scanned barcode #{number}" end)
 
     {:ok, releases} =