Improve camera request flow and layout

assets/js/barcode-scanner.js

@@ -27,7 +27,7 @@ export default {
         .getUserMedia(constraints)
         .then((mediaStream) => {
           console.debug("Camera access allowed")
-          this.pushEventTo(this.cameraPreview, "camera_allowed", {});
+          this.pushEventTo(this.el, "camera_allowed", {});
           this.cameraPreview.srcObject = mediaStream;
           this.cameraPreview.onloadedmetadata = () => {
             this.cameraPreview.play();
@@ -37,7 +37,7 @@ export default {
 
               barcodes.forEach(barcode => {
                 if (!detectedBarcodes.has(barcode.rawValue)) {
-                  this.pushEventTo(this.cameraPreview, "barcode_scanned", { number: barcode.rawValue });
+                  this.pushEventTo(this.el, "barcode_scanned", { number: barcode.rawValue });
                   detectedBarcodes.add(barcode.rawValue);
                 };
               });
@@ -46,13 +46,15 @@ export default {
         })
         .catch((err) => {
           console.error(`${err.name}: ${err.message}`);
-          this.pushEventTo(this.cameraPreview, "camera_denied", {});
+          this.pushEventTo(this.el, "camera_denied", {});
         });
     })
 
   },
   destroyed() {
-    this.cameraPreview.srcObject.getTracks().forEach(track => track.stop());
-    window.clearInterval(this.scanInterval);
+    if (this.cameraPreview.srcObject) {
+      this.cameraPreview.srcObject.getTracks().forEach(track => track.stop());
+      window.clearInterval(this.scanInterval);
+    }
   }
 }

lib/music_library_web/live/record_live/barcode_scanner_component.ex

@@ -11,7 +11,21 @@ defmodule MusicLibraryWeb.RecordLive.BarcodeScannerComponent do
      socket
      |> assign(:camera, :pending)
      |> assign(:barcodes, MapSet.new())
-     |> assign(:releases, [])}
+     |> assign(:releases, [
+       %MusicBrainz.ReleaseSearchResult{
+         id: "dc393148-be34-4056-be66-b2b95905c5c1",
+         title: "Equally Cursed and Blessed",
+         release_group: %{
+           id: "c35fc446-65cc-3645-939b-1b3782e60639",
+           type: :album,
+           title: "Equally Cursed and Blessed"
+         },
+         artists: "Catatonia",
+         date: "1999-04-12",
+         barcode: "639842709422",
+         media: [%{format: "CD", disc_count: 5, track_count: 11}]
+       }
+     ])}
   end
 
   @impl true
@@ -26,10 +40,15 @@ defmodule MusicLibraryWeb.RecordLive.BarcodeScannerComponent do
       <div>
         <p>{@camera}</p>
         <button
-          :if={@camera == :pending}
+          :if={!(@camera == :allowed)}
+          id="camera-button"
           type="button"
-          phx-click={JS.dispatch("camera_request", to: "#barcode-scanner")}
-          class="relative block w-full rounded-lg border-2 border-dashed border-zinc-300 p-12 text-center hover:border-zinc-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+          phx-click={
+            JS.show(to: "#camera-preview")
+            |> JS.dispatch("camera_request", to: "#barcode-scanner")
+            |> JS.hide(to: "#camera-button")
+          }
+          class="relative block w-full h-96 rounded-lg border-2 border-dashed border-zinc-300 p-12 text-center hover:border-zinc-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
         >
           <svg
             class="mx-auto size-12 text-zinc-400"
@@ -46,7 +65,7 @@ defmodule MusicLibraryWeb.RecordLive.BarcodeScannerComponent do
           </svg>
           <span class="mt-2 block text-sm font-semibold text-zinc-900">{gettext("Open camera")}</span>
         </button>
-        <video class="w-full" id="camera-preview"></video>
+        <video :if={!(@camera == :denied)} class="w-full hidden" id="camera-preview"></video>
       </div>
       <ul class="divide-y divide-zinc-100 dark:divide-slate-300/30 mt-5">
         <.result :for={release <- assigns.releases} id={release.id} release={release} />

priv/gettext/default.pot

@@ -630,12 +630,12 @@ msgstr ""
 msgid "Scan barcodes · Collection"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/barcode_scanner_component.ex:23
+#: lib/music_library_web/live/record_live/barcode_scanner_component.ex:37
 #, elixir-autogen, elixir-format
 msgid "Scan one or more barcodes"
 msgstr ""
 
-#: lib/music_library_web/live/record_live/barcode_scanner_component.ex:47
+#: lib/music_library_web/live/record_live/barcode_scanner_component.ex:64
 #, elixir-autogen, elixir-format
 msgid "Open camera"
 msgstr ""