Open scan modal, handle permissions, open/close video preview

lib/music_library_web/live/collection_live/index.ex

@@ -45,6 +45,20 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
     |> assign(:record, nil)
   end
 
+  defp apply_action(socket, :barcode_scan, params) do
+    socket =
+      if get_in(socket.assigns, [:streams, :records]) == nil do
+        socket
+        |> apply_action(:index, params)
+      else
+        socket
+      end
+
+    socket
+    |> assign(:page_title, gettext("Scan barcodes · Collection"))
+    |> assign(:record, nil)
+  end
+
   defp apply_action(socket, :edit, params = %{"id" => id}) do
     socket =
       if get_in(socket.assigns, [:streams, :records]) == nil do

lib/music_library_web/live/collection_live/index.html.heex

@@ -2,9 +2,14 @@
   <header class="gap-6 mb-2">
     <div class="flex items-center justify-between gap-6 mb-2 mt-2">
       <.search_form query={@record_list_params.query} />
-      <.link patch={~p"/collection/import"}>
-        <.button>{gettext("Import")}</.button>
-      </.link>
+      <nav>
+        <.link patch={~p"/collection/import"}>
+          <.button>{gettext("Import")}</.button>
+        </.link>
+        <.link patch={~p"/collection/scan"}>
+          <.button>{gettext("Scan")}</.button>
+        </.link>
+      </nav>
     </div>
   </header>
 
@@ -93,4 +98,19 @@
   />
 </.modal>
 
+<.modal
+  :if={@live_action == :barcode_scan}
+  id="barcode-scanner-modal"
+  show
+  on_cancel={JS.patch(back_path(@record_list_params))}
+>
+  <.live_component
+    module={MusicLibraryWeb.RecordLive.BarcodeScannerComponent}
+    id={:barcode_scanner}
+    title={@page_title}
+    action={@live_action}
+    patch={back_path(@record_list_params)}
+  />
+</.modal>
+
 <.pagination id={:bottom_pagination} pagination_params={@record_list_params} />

lib/music_library_web/live/record_live/barcode_scanner_component.ex

@@ -0,0 +1,26 @@
+defmodule MusicLibraryWeb.RecordLive.BarcodeScannerComponent do
+  use MusicLibraryWeb, :live_component
+
+  require Logger
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <h1>Barcode Scan</h1>
+      <video id="barcode-scan" phx-hook="BarcodeScanner"></video>
+    </div>
+    """
+  end
+
+  @impl true
+  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
+    Logger.debug(fn -> "Camera access denied" end)
+    {:noreply, assign(socket, camera: :denied)}
+  end
+end

lib/music_library_web/router.ex

@@ -39,6 +39,7 @@ defmodule MusicLibraryWeb.Router do
 
       live "/collection", CollectionLive.Index, :index
       live "/collection/import", CollectionLive.Index, :import
+      live "/collection/scan", CollectionLive.Index, :barcode_scan
       live "/collection/:id/edit", CollectionLive.Index, :edit
 
       live "/collection/:id", CollectionLive.Show, :show