cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show confetti when purchasing a record

Browse Source
This commit is contained in:
Claudio Ortolina
2025-03-08 21:53:17 +00:00
parent a160b8c98d
commit 4a18129d31
6 changed files with 59 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/app.js
+7
View File
@@ -22,6 +22,7 @@ import { Socket } from "phoenix";
import { LiveSocket } from "phoenix_live_view"; import { LiveSocket } from "phoenix_live_view";
import topbar from "../vendor/topbar"; import topbar from "../vendor/topbar";
import BarcodeScannerHook from "./barcode-scanner"; import BarcodeScannerHook from "./barcode-scanner";
import confetti from "canvas-confetti";
let Hooks = {}; let Hooks = {};
Hooks.BarcodeScanner = BarcodeScannerHook; Hooks.BarcodeScanner = BarcodeScannerHook;
@@ -53,6 +54,12 @@ window.addEventListener("music_library:clipcopy", (event) => {
window.addEventListener("music_library:scroll_top", (_event) => { window.addEventListener("music_library:scroll_top", (_event) => {
window.scrollTo(0, 0); window.scrollTo(0, 0);
}); });
window.addEventListener("music_library:confetti", (_event) => {
confetti({
particleCount: 100,
spread: 200,
});
});
// connect if there are any LiveViews on the page // connect if there are any LiveViews on the page
liveSocket.connect(); liveSocket.connect();
assets/package-lock.json
Generated
+11 -1
View File
@@ -5,7 +5,8 @@
"packages": { "packages": {
"": { "": {
"dependencies": { "dependencies": {
"barcode-detector": "^3.0.0" "barcode-detector": "^3.0.0",
"canvas-confetti": "^1.9.3"
} }
}, },
"node_modules/@types/emscripten": { "node_modules/@types/emscripten": {
@@ -21,6 +22,15 @@
"zxing-wasm": "^2.1.0" "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": { "node_modules/type-fest": {
"version": "4.37.0", "version": "4.37.0",
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.37.0.tgz", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.37.0.tgz",
assets/package.json
+2 -1
View File
@@ -1,5 +1,6 @@
{ {
"dependencies": { "dependencies": {
"barcode-detector": "^3.0.0" "barcode-detector": "^3.0.0",
"canvas-confetti": "^1.9.3"
} }
} }
lib/music_library_web/components/record_components.ex
+4 -1
View File
@@ -166,7 +166,10 @@ defmodule MusicLibraryWeb.RecordComponents do
role="menuitem" role="menuitem"
tabindex="0" tabindex="0"
id={"actions-#{record.id}-purchase"} 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")} {gettext("Purchased")}
</.link> </.link>
lib/music_library_web/live/wishlist_live/show.html.heex
+4 -1
View File
@@ -125,7 +125,10 @@
role="menuitem" role="menuitem"
tabindex="0" tabindex="0"
id={"actions-#{@record.id}-purchase"} 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 <.icon
name="hero-banknotes" name="hero-banknotes"
priv/gettext/default.pot
+31 -31
View File
@@ -16,9 +16,9 @@ msgstr ""
msgid "Actions" msgid "Actions"
msgstr "" 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/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 #, elixir-autogen, elixir-format
msgid "Are you sure?" msgid "Are you sure?"
msgstr "" msgstr ""
@@ -43,9 +43,9 @@ msgstr ""
msgid "Cover art" msgid "Cover art"
msgstr "" 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/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 #, elixir-autogen, elixir-format
msgid "Delete" msgid "Delete"
msgstr "" msgstr ""
@@ -85,7 +85,7 @@ msgid "Formats"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:164 #: 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 #, elixir-autogen, elixir-format
msgid "Genres" msgid "Genres"
msgstr "" msgstr ""
@@ -96,7 +96,7 @@ msgid "Hang in there while we get back on track"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:231 #: 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 #, elixir-autogen, elixir-format
msgid "Inserted at" msgid "Inserted at"
msgstr "" msgstr ""
@@ -124,7 +124,7 @@ msgstr ""
#: lib/music_library_web/components/form_component.ex:52 #: 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/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 #, elixir-autogen, elixir-format
msgid "MusicBrainz ID" msgid "MusicBrainz ID"
msgstr "" msgstr ""
@@ -202,7 +202,7 @@ msgstr ""
msgid "Saving..." msgid "Saving..."
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:202 #: lib/music_library_web/components/record_components.ex:205
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Search" msgid "Search"
msgstr "" msgstr ""
@@ -265,7 +265,7 @@ msgid "Types"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:239 #: 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 #, elixir-autogen, elixir-format
msgid "Updated at" msgid "Updated at"
msgstr "" msgstr ""
@@ -300,13 +300,13 @@ msgid "close"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:188 #: 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 #, elixir-autogen, elixir-format
msgid "Copy MusicBrainz ID to clipboard" msgid "Copy MusicBrainz ID to clipboard"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:250 #: 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 #, elixir-autogen, elixir-format
msgid "MusicBrainz data" msgid "MusicBrainz data"
msgstr "" msgstr ""
@@ -335,7 +335,7 @@ msgid "Wishlisted"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:219 #: 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 #, elixir-autogen, elixir-format
msgid "Includes" msgid "Includes"
msgstr "" msgstr ""
@@ -389,7 +389,7 @@ msgstr ""
msgid "Made by" msgid "Made by"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:261 #: lib/music_library_web/components/record_components.ex:264
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "View details" msgid "View details"
msgstr "" msgstr ""
@@ -469,7 +469,7 @@ msgstr ""
msgid "On Tour" msgid "On Tour"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:225 #: lib/music_library_web/components/record_components.ex:228
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "1 record" msgid "1 record"
msgid_plural "%{count} records" msgid_plural "%{count} records"
@@ -484,13 +484,13 @@ msgstr[0] ""
msgstr[1] "" msgstr[1] ""
#: lib/music_library_web/live/collection_live/show.html.heex:152 #: 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 #, elixir-autogen, elixir-format
msgid "Copy record ID to clipboard" msgid "Copy record ID to clipboard"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:144 #: 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 #, elixir-autogen, elixir-format
msgid "ID" msgid "ID"
msgstr "" msgstr ""
@@ -501,69 +501,69 @@ msgstr ""
msgid "Unreleased" msgid "Unreleased"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:286 #: lib/music_library_web/components/record_components.ex:289
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Album" msgid "Album"
msgstr "" msgstr ""
#: lib/music_library_web/components/layouts/app.html.heex:56 #: 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 #, elixir-autogen, elixir-format
msgid "Backup" msgid "Backup"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:282 #: lib/music_library_web/components/record_components.ex:285
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Blu-ray" msgid "Blu-ray"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:279 #: lib/music_library_web/components/record_components.ex:282
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "CD" msgid "CD"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:289 #: lib/music_library_web/components/record_components.ex:292
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Comp" msgid "Comp"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:283 #: lib/music_library_web/components/record_components.ex:286
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "DVD" msgid "DVD"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:287 #: lib/music_library_web/components/record_components.ex:290
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "EP" msgid "EP"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:288 #: lib/music_library_web/components/record_components.ex:291
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Live" msgid "Live"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:284 #: lib/music_library_web/components/record_components.ex:287
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Multi" msgid "Multi"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:291 #: lib/music_library_web/components/record_components.ex:294
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Other" msgid "Other"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:290 #: lib/music_library_web/components/record_components.ex:293
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Single" msgid "Single"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:281 #: lib/music_library_web/components/record_components.ex:284
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Vinyl" msgid "Vinyl"
msgstr "" msgstr ""
#: lib/music_library_web/components/record_components.ex:171 #: lib/music_library_web/components/record_components.ex:174
#: lib/music_library_web/live/wishlist_live/show.html.heex:136 #: lib/music_library_web/live/wishlist_live/show.html.heex:139
#, elixir-autogen, elixir-format #, elixir-autogen, elixir-format
msgid "Purchased" msgid "Purchased"
msgstr "" msgstr ""
@@ -575,7 +575,7 @@ msgid "Record added to the collection"
msgstr "" msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex:208 #: 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 #, elixir-autogen, elixir-format
msgid "Published releases" msgid "Published releases"
msgstr "" msgstr ""