Improves payment reactions (#2251)

* updated to select

* updating

* working

* bundle

* updated to select

* updating

* working

* bundle

* Make room for everything apart from sending

* Update lnbits/static/js/base.js

Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com>

* prettier

* bundled

* fundle

* changed to window[]

* vlads suggestion

* added stars

* vlads suggestion

* fundle

---------

Co-authored-by: Vlad Stan <stan.v.vlad@gmail.com>

lnbits/core/templates/core/account.html

@@ -403,21 +403,19 @@
                 </div>
                 <div class="row q-mb-md">
                   <div class="col-4">
-                    <span v-text="$t('toggle_reactions')"></span>
+                    <span v-text="$t('payment_reactions')"></span>
                   </div>
                   <div class="col-8">
-                    <q-btn
-                      dense
-                      flat
-                      round
-                      @click="toggleReactions"
-                      :icon="(reactionToggle) ? 'visibility' : 'visibility_off'"
-                      size="sm"
+                    <q-select
+                      v-model="reactionChoice"
+                      :options="reactionOptions"
+                      label="Reactions"
+                      @input="reactionChoiceFunc"
                     >
                       <q-tooltip
-                        ><span v-text="$t('toggle_reactions')"></span
+                        ><span v-text="$t('payment_reactions')"></span
                       ></q-tooltip>
-                    </q-btn>
+                    </q-select>
                   </div>
                 </div>
               </q-tab-panel>

lnbits/static/i18n/en.js

@@ -59,7 +59,7 @@ window.localisation.en = {
   service_fee_tooltip:
     'Service fee charged by the LNbits server admin per outgoing transaction',
   toggle_darkmode: 'Toggle Dark Mode',
-  toggle_reactions: 'Toggle Payment Reactions',
+  payment_reactions: 'Payment Reactions',
   view_swagger_docs: 'View LNbits Swagger API docs',
   api_docs: 'API docs',
   api_keys_api_docs: 'API keys and API docs',

lnbits/static/js/account.js

@@ -6,6 +6,12 @@ new Vue({
       user: null,
       hasUsername: false,
       showUserId: false,
+      reactionOptions: [
+        'None',
+        'confettiBothSides',
+        'confettiFireworks',
+        'confettiStars'
+      ],
       tab: 'user',
       passwordData: {
         show: false,
@@ -27,9 +33,8 @@ new Vue({
       this.$q.dark.toggle()
       this.$q.localStorage.set('lnbits.darkMode', this.$q.dark.isActive)
     },
-    toggleReactions: function () {
-      this.reactionToggle = !this.reactionToggle
-      this.$q.localStorage.set('lnbits.reactions', this.reactionToggle)
+    reactionChoiceFunc: function () {
+      this.$q.localStorage.set('lnbits.reactions', this.reactionChoice)
     },
     changeColor: function (newValue) {
       document.body.setAttribute('data-theme', newValue)

lnbits/static/js/base.js

@@ -168,7 +168,6 @@ window.LNbits = {
       let listener = ev => {
         cb(JSON.parse(ev.data))
       }
-
       this.listenersCount = this.listenersCount || {[wallet.inkey]: 0}
       this.listenersCount[wallet.inkey]++
 
@@ -444,7 +443,7 @@ window.windowMixin = {
   data: function () {
     return {
       toggleSubs: true,
-      reactionToggle: true,
+      reactionChoice: 'confettiBothSides',
       isUserAuthorized: false,
       g: {
         offline: !navigator.onLine,
@@ -524,12 +523,8 @@ window.windowMixin = {
     } else {
       this.$q.dark.set(true)
     }
-    let reactions = this.$q.localStorage.getItem('lnbits.reactions')
-    if (reactions == null) {
-      this.$q.localStorage.set('lnbits.reactions', true)
-      reactions = true
-    }
-    this.reactionToggle = reactions
+    this.reactionChoice =
+      this.$q.localStorage.getItem('lnbits.reactions') || 'confettiBothSides'
 
     this.g.allowedThemes = window.allowedThemes ?? ['bitcoin']
 

lnbits/static/js/event-reactions.js

@@ -1,5 +1,9 @@
-function eventReactionWebocket(event_id, event_function) {
+function eventReactionWebocket(event_id) {
   localUrl = ''
+  reaction = localStorage.getItem('lnbits.reactions')
+  if (!reaction || reaction === 'None') {
+    return
+  }
   if (location.protocol !== 'http:') {
     localUrl = 'wss://' + location.host + '/api/v1/ws/' + event_id
   } else {
@@ -7,10 +11,21 @@ function eventReactionWebocket(event_id, event_function) {
   }
   connection = new WebSocket(localUrl)
   connection.onmessage = function (e) {
-    event_function()
+    try {
+      const parsedData = JSON.parse(e.data)
+      if (parsedData.payment.amount < 0) {
+        return
+      }
+      reaction = localStorage.getItem('lnbits.reactions')
+      if (reaction) {
+        window[reaction.split('|')[1]]()
+      }
+    } catch (e) {
+      console.log(e)
+    }
   }
 }
-function eventReactionBothSidesConfetti() {
+function confettiBothSides() {
   document.getElementById('vue').disabled = true
   var end = Date.now() + 2 * 1000
   var colors = ['#FFD700', '#ffffff']
@@ -39,8 +54,8 @@ function eventReactionBothSidesConfetti() {
   }
   frame()
 }
-function eventReactionFireworksConfetti() {
-  var duration = 15 * 1000
+function confettiFireworks() {
+  var duration = 3 * 1000
   var animationEnd = Date.now() + duration
   var defaults = {startVelocity: 30, spread: 360, ticks: 60, zIndex: 0}
 
@@ -70,6 +85,39 @@ function eventReactionFireworksConfetti() {
   }, 250)
 }
 
+function confettiStars() {
+  var defaults = {
+    spread: 360,
+    ticks: 50,
+    gravity: 0,
+    decay: 0.94,
+    startVelocity: 30,
+    colors: ['FFE400', 'FFBD00', 'E89400', 'FFCA6C', 'FDFFB8']
+  }
+
+  function shoot() {
+    confetti({
+      ...defaults,
+      particleCount: 40,
+      scalar: 1.2,
+      shapes: ['star']
+    })
+
+    confetti({
+      ...defaults,
+      particleCount: 10,
+      scalar: 0.75,
+      shapes: ['circle']
+    })
+  }
+
+  setTimeout(shoot, 0)
+  setTimeout(shoot, 100)
+  setTimeout(shoot, 200)
+  setTimeout(shoot, 0)
+  setTimeout(shoot, 100)
+  setTimeout(shoot, 200)
+}
 !(function (t, e) {
   !(function t(e, n, a, i) {
     var o = !!(

lnbits/static/js/service-worker.js

@@ -1,6 +1,6 @@
 // update cache version every time there is a new deployment
 // so the service worker reinitializes the cache
-const CACHE_VERSION = 109
+const CACHE_VERSION = 114
 const CURRENT_CACHE = `lnbits-${CACHE_VERSION}-`
 
 const getApiKey = request => {

lnbits/static/js/wallet.js

@@ -860,14 +860,11 @@ new Vue({
       this.disclaimerDialog.show = true
       this.$q.localStorage.set('lnbits.disclaimerShown', true)
     }
-
     // listen to incoming payments
-    if (this.reactionToggle) {
-      eventReactionWebocket(this.g.wallet.id, eventReactionBothSidesConfetti)
-    }
     LNbits.events.onInvoicePaid(this.g.wallet, payment =>
       this.onPaymentReceived(payment.payment_hash)
     )
+    eventReactionWebocket(wallet.id)
   }
 })