From 4a18129d319a9f2a49a38ef042eb755334c9b935 Mon Sep 17 00:00:00 2001 From: Claudio Ortolina Date: Sat, 8 Mar 2025 21:53:17 +0000 Subject: [PATCH] Show confetti when purchasing a record --- assets/js/app.js | 7 +++ assets/package-lock.json | 12 +++- assets/package.json | 3 +- .../components/record_components.ex | 5 +- .../live/wishlist_live/show.html.heex | 5 +- priv/gettext/default.pot | 62 +++++++++---------- 6 files changed, 59 insertions(+), 35 deletions(-) diff --git a/assets/js/app.js b/assets/js/app.js index b09651a9..2e6e191a 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -22,6 +22,7 @@ import { Socket } from "phoenix"; import { LiveSocket } from "phoenix_live_view"; import topbar from "../vendor/topbar"; import BarcodeScannerHook from "./barcode-scanner"; +import confetti from "canvas-confetti"; let Hooks = {}; Hooks.BarcodeScanner = BarcodeScannerHook; @@ -53,6 +54,12 @@ window.addEventListener("music_library:clipcopy", (event) => { window.addEventListener("music_library:scroll_top", (_event) => { window.scrollTo(0, 0); }); +window.addEventListener("music_library:confetti", (_event) => { + confetti({ + particleCount: 100, + spread: 200, + }); +}); // connect if there are any LiveViews on the page liveSocket.connect(); diff --git a/assets/package-lock.json b/assets/package-lock.json index 4e156fc7..77fa1596 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -5,7 +5,8 @@ "packages": { "": { "dependencies": { - "barcode-detector": "^3.0.0" + "barcode-detector": "^3.0.0", + "canvas-confetti": "^1.9.3" } }, "node_modules/@types/emscripten": { @@ -21,6 +22,15 @@ "zxing-wasm": "^2.1.0" } }, + "node_modules/canvas-confetti": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.3.tgz", + "integrity": "sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==", + "funding": { + "type": "donate", + "url": "https://www.paypal.me/kirilvatev" + } + }, "node_modules/type-fest": { "version": "4.37.0", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.37.0.tgz", diff --git a/assets/package.json b/assets/package.json index f01ddfbd..057e814e 100644 --- a/assets/package.json +++ b/assets/package.json @@ -1,5 +1,6 @@ { "dependencies": { - "barcode-detector": "^3.0.0" + "barcode-detector": "^3.0.0", + "canvas-confetti": "^1.9.3" } } diff --git a/lib/music_library_web/components/record_components.ex b/lib/music_library_web/components/record_components.ex index c75a3018..b10d7e8e 100644 --- a/lib/music_library_web/components/record_components.ex +++ b/lib/music_library_web/components/record_components.ex @@ -166,7 +166,10 @@ defmodule MusicLibraryWeb.RecordComponents do role="menuitem" tabindex="0" id={"actions-#{record.id}-purchase"} - phx-click={JS.push("add-to-collection", value: %{id: record.id})} + phx-click={ + JS.dispatch("music_library:confetti") + |> JS.push("add-to-collection", value: %{id: record.id}) + } > {gettext("Purchased")} diff --git a/lib/music_library_web/live/wishlist_live/show.html.heex b/lib/music_library_web/live/wishlist_live/show.html.heex index 251245b6..c49aa47b 100644 --- a/lib/music_library_web/live/wishlist_live/show.html.heex +++ b/lib/music_library_web/live/wishlist_live/show.html.heex @@ -125,7 +125,10 @@ role="menuitem" tabindex="0" id={"actions-#{@record.id}-purchase"} - phx-click={JS.push("add-to-collection", value: %{id: @record.id})} + phx-click={ + JS.dispatch("music_library:confetti") + |> JS.push("add-to-collection", value: %{id: @record.id}) + } > <.icon name="hero-banknotes" diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot index a910daa4..0737a325 100644 --- a/priv/gettext/default.pot +++ b/priv/gettext/default.pot @@ -16,9 +16,9 @@ msgstr "" msgid "Actions" msgstr "" -#: lib/music_library_web/components/record_components.ex:180 +#: lib/music_library_web/components/record_components.ex:183 #: lib/music_library_web/live/collection_live/show.html.heex:126 -#: lib/music_library_web/live/wishlist_live/show.html.heex:145 +#: lib/music_library_web/live/wishlist_live/show.html.heex:148 #, elixir-autogen, elixir-format msgid "Are you sure?" msgstr "" @@ -43,9 +43,9 @@ msgstr "" msgid "Cover art" msgstr "" -#: lib/music_library_web/components/record_components.ex:182 +#: lib/music_library_web/components/record_components.ex:185 #: lib/music_library_web/live/collection_live/show.html.heex:134 -#: lib/music_library_web/live/wishlist_live/show.html.heex:153 +#: lib/music_library_web/live/wishlist_live/show.html.heex:156 #, elixir-autogen, elixir-format msgid "Delete" msgstr "" @@ -85,7 +85,7 @@ msgid "Formats" msgstr "" #: lib/music_library_web/live/collection_live/show.html.heex:164 -#: lib/music_library_web/live/wishlist_live/show.html.heex:184 +#: lib/music_library_web/live/wishlist_live/show.html.heex:187 #, elixir-autogen, elixir-format msgid "Genres" msgstr "" @@ -96,7 +96,7 @@ msgid "Hang in there while we get back on track" msgstr "" #: lib/music_library_web/live/collection_live/show.html.heex:231 -#: lib/music_library_web/live/wishlist_live/show.html.heex:243 +#: lib/music_library_web/live/wishlist_live/show.html.heex:246 #, elixir-autogen, elixir-format msgid "Inserted at" msgstr "" @@ -124,7 +124,7 @@ msgstr "" #: lib/music_library_web/components/form_component.ex:52 #: lib/music_library_web/live/collection_live/show.html.heex:178 -#: lib/music_library_web/live/wishlist_live/show.html.heex:198 +#: lib/music_library_web/live/wishlist_live/show.html.heex:201 #, elixir-autogen, elixir-format msgid "MusicBrainz ID" msgstr "" @@ -202,7 +202,7 @@ msgstr "" msgid "Saving..." msgstr "" -#: lib/music_library_web/components/record_components.ex:202 +#: lib/music_library_web/components/record_components.ex:205 #, elixir-autogen, elixir-format msgid "Search" msgstr "" @@ -265,7 +265,7 @@ msgid "Types" msgstr "" #: lib/music_library_web/live/collection_live/show.html.heex:239 -#: lib/music_library_web/live/wishlist_live/show.html.heex:251 +#: lib/music_library_web/live/wishlist_live/show.html.heex:254 #, elixir-autogen, elixir-format msgid "Updated at" msgstr "" @@ -300,13 +300,13 @@ msgid "close" msgstr "" #: lib/music_library_web/live/collection_live/show.html.heex:188 -#: lib/music_library_web/live/wishlist_live/show.html.heex:208 +#: lib/music_library_web/live/wishlist_live/show.html.heex:211 #, elixir-autogen, elixir-format msgid "Copy MusicBrainz ID to clipboard" msgstr "" #: lib/music_library_web/live/collection_live/show.html.heex:250 -#: lib/music_library_web/live/wishlist_live/show.html.heex:262 +#: lib/music_library_web/live/wishlist_live/show.html.heex:265 #, elixir-autogen, elixir-format msgid "MusicBrainz data" msgstr "" @@ -335,7 +335,7 @@ msgid "Wishlisted" msgstr "" #: lib/music_library_web/live/collection_live/show.html.heex:219 -#: lib/music_library_web/live/wishlist_live/show.html.heex:231 +#: lib/music_library_web/live/wishlist_live/show.html.heex:234 #, elixir-autogen, elixir-format msgid "Includes" msgstr "" @@ -389,7 +389,7 @@ msgstr "" msgid "Made by" msgstr "" -#: lib/music_library_web/components/record_components.ex:261 +#: lib/music_library_web/components/record_components.ex:264 #, elixir-autogen, elixir-format msgid "View details" msgstr "" @@ -469,7 +469,7 @@ msgstr "" msgid "On Tour" msgstr "" -#: lib/music_library_web/components/record_components.ex:225 +#: lib/music_library_web/components/record_components.ex:228 #, elixir-autogen, elixir-format msgid "1 record" msgid_plural "%{count} records" @@ -484,13 +484,13 @@ msgstr[0] "" msgstr[1] "" #: lib/music_library_web/live/collection_live/show.html.heex:152 -#: lib/music_library_web/live/wishlist_live/show.html.heex:172 +#: lib/music_library_web/live/wishlist_live/show.html.heex:175 #, elixir-autogen, elixir-format msgid "Copy record ID to clipboard" msgstr "" #: lib/music_library_web/live/collection_live/show.html.heex:144 -#: lib/music_library_web/live/wishlist_live/show.html.heex:164 +#: lib/music_library_web/live/wishlist_live/show.html.heex:167 #, elixir-autogen, elixir-format msgid "ID" msgstr "" @@ -501,69 +501,69 @@ msgstr "" msgid "Unreleased" msgstr "" -#: lib/music_library_web/components/record_components.ex:286 +#: lib/music_library_web/components/record_components.ex:289 #, elixir-autogen, elixir-format msgid "Album" msgstr "" #: lib/music_library_web/components/layouts/app.html.heex:56 -#: lib/music_library_web/components/record_components.ex:280 +#: lib/music_library_web/components/record_components.ex:283 #, elixir-autogen, elixir-format msgid "Backup" msgstr "" -#: lib/music_library_web/components/record_components.ex:282 +#: lib/music_library_web/components/record_components.ex:285 #, elixir-autogen, elixir-format msgid "Blu-ray" msgstr "" -#: lib/music_library_web/components/record_components.ex:279 +#: lib/music_library_web/components/record_components.ex:282 #, elixir-autogen, elixir-format msgid "CD" msgstr "" -#: lib/music_library_web/components/record_components.ex:289 +#: lib/music_library_web/components/record_components.ex:292 #, elixir-autogen, elixir-format msgid "Comp" msgstr "" -#: lib/music_library_web/components/record_components.ex:283 +#: lib/music_library_web/components/record_components.ex:286 #, elixir-autogen, elixir-format msgid "DVD" msgstr "" -#: lib/music_library_web/components/record_components.ex:287 +#: lib/music_library_web/components/record_components.ex:290 #, elixir-autogen, elixir-format msgid "EP" msgstr "" -#: lib/music_library_web/components/record_components.ex:288 +#: lib/music_library_web/components/record_components.ex:291 #, elixir-autogen, elixir-format msgid "Live" msgstr "" -#: lib/music_library_web/components/record_components.ex:284 +#: lib/music_library_web/components/record_components.ex:287 #, elixir-autogen, elixir-format msgid "Multi" msgstr "" -#: lib/music_library_web/components/record_components.ex:291 +#: lib/music_library_web/components/record_components.ex:294 #, elixir-autogen, elixir-format msgid "Other" msgstr "" -#: lib/music_library_web/components/record_components.ex:290 +#: lib/music_library_web/components/record_components.ex:293 #, elixir-autogen, elixir-format msgid "Single" msgstr "" -#: lib/music_library_web/components/record_components.ex:281 +#: lib/music_library_web/components/record_components.ex:284 #, elixir-autogen, elixir-format msgid "Vinyl" msgstr "" -#: lib/music_library_web/components/record_components.ex:171 -#: lib/music_library_web/live/wishlist_live/show.html.heex:136 +#: lib/music_library_web/components/record_components.ex:174 +#: lib/music_library_web/live/wishlist_live/show.html.heex:139 #, elixir-autogen, elixir-format msgid "Purchased" msgstr "" @@ -575,7 +575,7 @@ msgid "Record added to the collection" msgstr "" #: lib/music_library_web/live/collection_live/show.html.heex:208 -#: lib/music_library_web/live/wishlist_live/show.html.heex:220 +#: lib/music_library_web/live/wishlist_live/show.html.heex:223 #, elixir-autogen, elixir-format msgid "Published releases" msgstr ""