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

assets/js/app.js

@@ -30,7 +30,7 @@ let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken },
-  hooks: { Hooks }
+  hooks: Hooks
 })
 
 // Show progress bar on live navigation and form submits

assets/js/barcode-scanner.js

@@ -19,6 +19,29 @@ const barcodeTest = async function () {
 
 export default {
   mounted() {
-    console.log(this.el);
+    const video = this.el;
+    const constraints = {
+      audio: false,
+      video: { width: 800, height: 600 },
+    };
+
+    navigator.mediaDevices
+      .getUserMedia(constraints)
+      .then((mediaStream) => {
+        console.debug("Camera access allowed")
+        this.pushEventTo(video, "camera:allowed", {});
+        console.log(mediaStream);
+        video.srcObject = mediaStream;
+        video.onloadedmetadata = () => {
+          video.play();
+        };
+      })
+      .catch((err) => {
+        console.error(`${err.name}: ${err.message}`);
+        this.pushEventTo(video, "camera:denied", {});
+      });
+  },
+  destroyed() {
+    this.el.srcObject.getTracks().forEach(track => track.stop());
   }
 }

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