Extract Barcode icon

lib/music_library_web/components/barcode_scanner_component.ex

@@ -95,6 +95,141 @@ defmodule MusicLibraryWeb.BarcodeScannerComponent do
     """
   end
 
+  attr :class, :string, required: true
+
+  def barcode_icon(assigns) do
+    ~H"""
+    <svg
+      class={@class}
+      aria-hidden="true"
+      data-slot="icon"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      version="1.1"
+      width="16"
+      height="16"
+      viewBox="0 0 256 256"
+      xml:space="preserve"
+    >
+      <g
+        style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+        transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
+      >
+        <polygon
+          points="90,79.14 56.12,79.14 56.12,73.14 84,73.14 84,54.67 90,54.67 "
+          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+          transform="  matrix(1 0 0 1 0 0) "
+        />
+        <polygon
+          points="33.88,79.14 0,79.14 0,54.67 6,54.67 6,73.14 33.88,73.14 "
+          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+          transform="  matrix(1 0 0 1 0 0) "
+        />
+        <polygon
+          points="6,35.33 0,35.33 0,10.86 33.88,10.86 33.88,16.86 6,16.86 "
+          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+          transform="  matrix(1 0 0 1 0 0) "
+        />
+        <polygon
+          points="90,35.33 84,35.33 84,16.86 56.12,16.86 56.12,10.86 90,10.86 "
+          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+          transform="  matrix(1 0 0 1 0 0) "
+        />
+        <rect
+          x="36.27"
+          y="26.31"
+          rx="0"
+          ry="0"
+          width="6"
+          height="37.39"
+          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+          transform=" matrix(1 0 0 1 0 0) "
+        />
+        <rect
+          x="13.36"
+          y="26.31"
+          rx="0"
+          ry="0"
+          width="6"
+          height="37.39"
+          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+          transform=" matrix(1 0 0 1 0 0) "
+        />
+        <rect
+          x="59.18"
+          y="26.31"
+          rx="0"
+          ry="0"
+          width="6"
+          height="24.02"
+          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+          transform=" matrix(1 0 0 1 0 0) "
+        />
+        <rect
+          x="59.18"
+          y="56.85"
+          rx="0"
+          ry="0"
+          width="6"
+          height="6.84"
+          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+          transform=" matrix(1 0 0 1 0 0) "
+        />
+        <rect
+          x="24.82"
+          y="26.31"
+          rx="0"
+          ry="0"
+          width="6"
+          height="24.02"
+          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+          transform=" matrix(1 0 0 1 0 0) "
+        />
+        <rect
+          x="24.82"
+          y="56.85"
+          rx="0"
+          ry="0"
+          width="6"
+          height="6.84"
+          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+          transform=" matrix(1 0 0 1 0 0) "
+        />
+        <rect
+          x="70.64"
+          y="26.31"
+          rx="0"
+          ry="0"
+          width="6"
+          height="24.02"
+          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+          transform=" matrix(1 0 0 1 0 0) "
+        />
+        <rect
+          x="70.64"
+          y="56.85"
+          rx="0"
+          ry="0"
+          width="6"
+          height="6.84"
+          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+          transform=" matrix(1 0 0 1 0 0) "
+        />
+        <rect
+          x="47.73"
+          y="26.31"
+          rx="0"
+          ry="0"
+          width="6"
+          height="37.39"
+          style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
+          transform=" matrix(1 0 0 1 0 0) "
+        />
+      </g>
+    </svg>
+    """
+  end
+
   attr :scan_result, BarcodeScan.Result, required: true
 
   defp scan_result(assigns) do

lib/music_library_web/live/collection_live/index.ex

@@ -2,6 +2,7 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
   use MusicLibraryWeb, :live_view
   import MusicLibraryWeb.Pagination
   import MusicLibraryWeb.RecordComponents
+  import MusicLibraryWeb.BarcodeScannerComponent, only: [barcode_icon: 1]
 
   alias MusicLibrary.Collection
   alias MusicLibrary.Records

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

@@ -28,134 +28,7 @@
           ]}
           patch={~p"/collection/scan"}
         >
-          <svg
+          <.barcode_icon class="mr-2 fill-current" />
-            class="mr-2 fill-current"
-            aria-hidden="true"
-            data-slot="icon"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            version="1.1"
-            width="16"
-            height="16"
-            viewBox="0 0 256 256"
-            xml:space="preserve"
-          >
-            <g
-              style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
-              transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
-            >
-              <polygon
-                points="90,79.14 56.12,79.14 56.12,73.14 84,73.14 84,54.67 90,54.67 "
-                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
-                transform="  matrix(1 0 0 1 0 0) "
-              />
-              <polygon
-                points="33.88,79.14 0,79.14 0,54.67 6,54.67 6,73.14 33.88,73.14 "
-                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
-                transform="  matrix(1 0 0 1 0 0) "
-              />
-              <polygon
-                points="6,35.33 0,35.33 0,10.86 33.88,10.86 33.88,16.86 6,16.86 "
-                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
-                transform="  matrix(1 0 0 1 0 0) "
-              />
-              <polygon
-                points="90,35.33 84,35.33 84,16.86 56.12,16.86 56.12,10.86 90,10.86 "
-                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
-                transform="  matrix(1 0 0 1 0 0) "
-              />
-              <rect
-                x="36.27"
-                y="26.31"
-                rx="0"
-                ry="0"
-                width="6"
-                height="37.39"
-                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
-                transform=" matrix(1 0 0 1 0 0) "
-              />
-              <rect
-                x="13.36"
-                y="26.31"
-                rx="0"
-                ry="0"
-                width="6"
-                height="37.39"
-                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
-                transform=" matrix(1 0 0 1 0 0) "
-              />
-              <rect
-                x="59.18"
-                y="26.31"
-                rx="0"
-                ry="0"
-                width="6"
-                height="24.02"
-                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
-                transform=" matrix(1 0 0 1 0 0) "
-              />
-              <rect
-                x="59.18"
-                y="56.85"
-                rx="0"
-                ry="0"
-                width="6"
-                height="6.84"
-                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
-                transform=" matrix(1 0 0 1 0 0) "
-              />
-              <rect
-                x="24.82"
-                y="26.31"
-                rx="0"
-                ry="0"
-                width="6"
-                height="24.02"
-                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
-                transform=" matrix(1 0 0 1 0 0) "
-              />
-              <rect
-                x="24.82"
-                y="56.85"
-                rx="0"
-                ry="0"
-                width="6"
-                height="6.84"
-                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
-                transform=" matrix(1 0 0 1 0 0) "
-              />
-              <rect
-                x="70.64"
-                y="26.31"
-                rx="0"
-                ry="0"
-                width="6"
-                height="24.02"
-                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
-                transform=" matrix(1 0 0 1 0 0) "
-              />
-              <rect
-                x="70.64"
-                y="56.85"
-                rx="0"
-                ry="0"
-                width="6"
-                height="6.84"
-                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
-                transform=" matrix(1 0 0 1 0 0) "
-              />
-              <rect
-                x="47.73"
-                y="26.31"
-                rx="0"
-                ry="0"
-                width="6"
-                height="37.39"
-                style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
-                transform=" matrix(1 0 0 1 0 0) "
-              />
-            </g>
-          </svg>
           {gettext("Scan")}
         </.link>
       </nav>

priv/gettext/default.pot

@@ -31,7 +31,7 @@ msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:26
 #: lib/music_library_web/live/artist_live/show.html.heex:105
-#: lib/music_library_web/live/collection_live/index.ex:157
+#: lib/music_library_web/live/collection_live/index.ex:158
 #: lib/music_library_web/live/collection_live/show.ex:117
 #: lib/music_library_web/live/collection_live/show.ex:134
 #, elixir-autogen, elixir-format
@@ -59,8 +59,8 @@ msgstr ""
 msgid "Edit"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.ex:132
+#: lib/music_library_web/live/collection_live/index.ex:133
-#: lib/music_library_web/live/collection_live/index.ex:139
+#: lib/music_library_web/live/collection_live/index.ex:140
 #: lib/music_library_web/live/stats_live/index.ex:53
 #: lib/music_library_web/live/stats_live/index.ex:59
 #: lib/music_library_web/live/wishlist_live/index.ex:120
@@ -158,7 +158,7 @@ msgstr ""
 msgid "Previous"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:196
+#: lib/music_library_web/live/collection_live/index.html.heex:69
 #, elixir-autogen, elixir-format
 msgid "Purchase"
 msgstr ""
@@ -175,7 +175,7 @@ msgstr ""
 msgid "Purchased on"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.ex:124
+#: lib/music_library_web/live/collection_live/index.ex:125
 #: lib/music_library_web/live/stats_live/index.ex:45
 #: lib/music_library_web/live/wishlist_live/index.ex:112
 #, elixir-autogen, elixir-format
@@ -214,7 +214,7 @@ msgstr ""
 msgid "Show"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:201
+#: lib/music_library_web/live/collection_live/index.html.heex:74
 #: lib/music_library_web/live/wishlist_live/index.html.heex:23
 #, elixir-autogen, elixir-format
 msgid "Showing <b>%{visible}</b> of <b>%{total}</b> records"
@@ -236,7 +236,7 @@ msgstr ""
 msgid "Success!"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.ex:21
+#: lib/music_library_web/live/collection_live/index.ex:22
 #: lib/music_library_web/live/collection_live/show.ex:14
 #: lib/music_library_web/live/wishlist_live/index.ex:21
 #: lib/music_library_web/live/wishlist_live/show.ex:13
@@ -322,13 +322,13 @@ msgstr ""
 msgid "Choose which format to import"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:158
+#: lib/music_library_web/components/barcode_scanner_component.ex:293
 #: lib/music_library_web/live/stats_live/index.html.heex:141
 #, elixir-autogen, elixir-format
 msgid "Collected"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:155
+#: lib/music_library_web/components/barcode_scanner_component.ex:290
 #: lib/music_library_web/live/stats_live/index.html.heex:147
 #, elixir-autogen, elixir-format
 msgid "Wishlisted"
@@ -454,7 +454,7 @@ msgstr ""
 msgid "Error loading play count"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:178
+#: lib/music_library_web/live/collection_live/index.html.heex:51
 #, elixir-autogen, elixir-format
 msgid "A->Z"
 msgstr ""
@@ -580,12 +580,12 @@ msgstr ""
 msgid "Published releases"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:159
+#: lib/music_library_web/live/collection_live/index.html.heex:32
 #, elixir-autogen, elixir-format
 msgid "Scan"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.ex:58
+#: lib/music_library_web/live/collection_live/index.ex:59
 #, elixir-autogen, elixir-format
 msgid "Scan barcodes · Collection"
 msgstr ""
@@ -600,17 +600,17 @@ msgstr ""
 msgid "Open camera"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:187
+#: lib/music_library_web/components/barcode_scanner_component.ex:322
 #, elixir-autogen, elixir-format
 msgid "Failed to search release for barcode %{number}"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:200
+#: lib/music_library_web/components/barcode_scanner_component.ex:335
 #, elixir-autogen, elixir-format
 msgid "Records imported successfully"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:153
+#: lib/music_library_web/components/barcode_scanner_component.ex:288
 #, elixir-autogen, elixir-format
 msgid "New"
 msgstr ""
@@ -650,12 +650,12 @@ msgstr ""
 msgid "Live Dashboard"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:118
+#: lib/music_library_web/components/barcode_scanner_component.ex:253
 #, elixir-autogen, elixir-format
 msgid "Barcode not found"
 msgstr ""
 
-#: lib/music_library_web/components/barcode_scanner_component.ex:211
+#: lib/music_library_web/components/barcode_scanner_component.ex:346
 #, elixir-autogen, elixir-format
 msgid "Some records could not be imported: %{summary}"
 msgstr ""
@@ -666,7 +666,7 @@ msgstr ""
 msgid "Add"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.ex:44
+#: lib/music_library_web/live/collection_live/index.ex:45
 #, elixir-autogen, elixir-format
 msgid "Add new Record · Collection"
 msgstr ""