paid reactions impl

Author: teidesu

eslint.config.mjs

@@ -148,7 +148,7 @@ export default [{
     '@typescript-eslint/await-thenable': 'error'
   }
 }, {
-  files: ['**/*.ts'],
+  files: ['**/*.ts', '**/*.tsx'],
 
   languageOptions: {
     ecmaVersion: 5,

index.html

@@ -72,33 +72,6 @@
             <path d="M-6 16h6v17c-.193-2.84-.876-5.767-2.05-8.782-.904-2.325-2.446-4.485-4.625-6.48A1 1 0 01-6 16z" transform="matrix(1 0 0 -1 0 49)" id="corner-fill" fill="inherit"/>
           </g>
         </symbol>
-        <symbol id="paid-reaction-background" viewBox="0 0 59 37">
-          <g opacity="0.3">
-            <path d="M21.9985 12C22.1433 12 22.2555 11.8966 22.2792 11.7458C22.5451 9.77438 22.8198 9.49655 24.7341 9.28374C24.8848 9.26601 25 9.14483 25 9C25 8.85222 24.8877 8.73399 24.7371 8.71626C22.8257 8.48867 22.5628 8.22266 22.2792 6.25419C22.2555 6.10345 22.1403 6 21.9985 6C21.8567 6 21.7415 6.10345 21.7179 6.25419C21.452 8.22562 21.1773 8.50345 19.2659 8.71626C19.1123 8.73399 19 8.85222 19 9C19 9.14483 19.1093 9.26305 19.2629 9.28374C21.1743 9.54089 21.4254 9.77734 21.7179 11.7458C21.7445 11.8966 21.8597 12 21.9985 12Z" fill="inherit"/>
-          </g>
-          <path d="M7.99852 37C8.14328 37 8.25554 36.8966 8.27917 36.7458C8.54505 34.7744 8.81979 34.4966 10.7341 34.2837C10.8848 34.266 11 34.1448 11 34C11 33.8522 10.8877 33.734 10.7371 33.7163C8.8257 33.4887 8.56278 33.2227 8.27917 31.2542C8.25554 31.1034 8.14033 31 7.99852 31C7.85672 31 7.74151 31.1034 7.71787 31.2542C7.45199 33.2256 7.17725 33.5034 5.26588 33.7163C5.11226 33.734 5 33.8522 5 34C5 34.1448 5.10931 34.2631 5.26292 34.2837C7.1743 34.5409 7.42541 34.7773 7.71787 36.7458C7.74446 36.8966 7.85968 37 7.99852 37Z" fill="inherit" fill-opacity="0.5"/>
-          <path d="M55.9985 28C56.1433 28 56.2555 27.8966 56.2792 27.7458C56.5451 25.7744 56.8198 25.4966 58.7341 25.2837C58.8848 25.266 59 25.1448 59 25C59 24.8522 58.8877 24.734 58.7371 24.7163C56.8257 24.4887 56.5628 24.2227 56.2792 22.2542C56.2555 22.1034 56.1403 22 55.9985 22C55.8567 22 55.7415 22.1034 55.7179 22.2542C55.452 24.2256 55.1773 24.5034 53.2659 24.7163C53.1123 24.734 53 24.8522 53 25C53 25.1448 53.1093 25.2631 53.2629 25.2837C55.1743 25.5409 55.4254 25.7773 55.7179 27.7458C55.7445 27.8966 55.8597 28 55.9985 28Z" fill="inherit" fill-opacity="0.5"/>
-          <g opacity="0.5">
-            <path d="M4.99902 12C5.09552 12 5.17036 11.931 5.18612 11.8305C5.36337 10.5163 5.54653 10.331 6.82275 10.1892C6.92319 10.1773 7 10.0966 7 10C7 9.90148 6.92516 9.82266 6.82472 9.81084C5.55047 9.65911 5.37518 9.48177 5.18612 8.16946C5.17036 8.06897 5.09355 8 4.99902 8C4.90448 8 4.82767 8.06897 4.81192 8.16946C4.63466 9.48374 4.4515 9.66897 3.17725 9.81084C3.07484 9.82266 3 9.90148 3 10C3 10.0966 3.07287 10.1754 3.17528 10.1892C4.44953 10.3606 4.61694 10.5182 4.81192 11.8305C4.82964 11.931 4.90645 12 4.99902 12Z" fill="inherit"/>
-          </g>
-          <g opacity="0.5">
-            <path d="M24.999 32C25.0955 32 25.1704 31.931 25.1861 31.8305C25.3634 30.5163 25.5465 30.331 26.8227 30.1892C26.9232 30.1773 27 30.0966 27 30C27 29.9015 26.9252 29.8227 26.8247 29.8108C25.5505 29.6591 25.3752 29.4818 25.1861 28.1695C25.1704 28.069 25.0935 28 24.999 28C24.9045 28 24.8277 28.069 24.8119 28.1695C24.6347 29.4837 24.4515 29.669 23.1773 29.8108C23.0748 29.8227 23 29.9015 23 30C23 30.0966 23.0729 30.1754 23.1753 30.1892C24.4495 30.3606 24.6169 30.5182 24.8119 31.8305C24.8296 31.931 24.9065 32 24.999 32Z" fill="inherit"/>
-          </g>
-          <g opacity="0.5">
-            <path d="M35.999 27C36.0955 27 36.1704 26.931 36.1861 26.8305C36.3634 25.5163 36.5465 25.331 37.8227 25.1892C37.9232 25.1773 38 25.0966 38 25C38 24.9015 37.9252 24.8227 37.8247 24.8108C36.5505 24.6591 36.3752 24.4818 36.1861 23.1695C36.1704 23.069 36.0935 23 35.999 23C35.9045 23 35.8277 23.069 35.8119 23.1695C35.6347 24.4837 35.4515 24.669 34.1773 24.8108C34.0748 24.8227 34 24.9015 34 25C34 25.0966 34.0729 25.1754 34.1753 25.1892C35.4495 25.3606 35.6169 25.5182 35.8119 26.8305C35.8296 26.931 35.9065 27 35.999 27Z" fill="inherit"/>
-          </g>
-          <g opacity="0.5">
-            <path d="M37.999 7C38.0955 7 38.1704 6.93103 38.1861 6.83054C38.3634 5.51626 38.5465 5.33103 39.8227 5.18916C39.9232 5.17734 40 5.09655 40 5C40 4.90148 39.9252 4.82266 39.8247 4.81084C38.5505 4.65911 38.3752 4.48177 38.1861 3.16946C38.1704 3.06897 38.0935 3 37.999 3C37.9045 3 37.8277 3.06897 37.8119 3.16946C37.6347 4.48374 37.4515 4.66897 36.1773 4.81084C36.0748 4.82266 36 4.90148 36 5C36 5.09655 36.0729 5.17537 36.1753 5.18916C37.4495 5.36059 37.6169 5.51823 37.8119 6.83054C37.8296 6.93103 37.9065 7 37.999 7Z" fill="inherit"/>
-          </g>
-          <g opacity="0.5">
-            <path d="M43.999 36C44.0955 36 44.1704 35.931 44.1861 35.8305C44.3634 34.5163 44.5465 34.331 45.8227 34.1892C45.9232 34.1773 46 34.0966 46 34C46 33.9015 45.9252 33.8227 45.8247 33.8108C44.5505 33.6591 44.3752 33.4818 44.1861 32.1695C44.1704 32.069 44.0935 32 43.999 32C43.9045 32 43.8277 32.069 43.8119 32.1695C43.6347 33.4837 43.4515 33.669 42.1773 33.8108C42.0748 33.8227 42 33.9015 42 34C42 34.0966 42.0729 34.1754 42.1753 34.1892C43.4495 34.3606 43.6169 34.5182 43.8119 35.8305C43.8296 35.931 43.9065 36 43.999 36Z" fill="inherit"/>
-          </g>
-          <g opacity="0.4">
-            <path d="M10.999 4C11.0955 4 11.1704 3.93103 11.1861 3.83054C11.3634 2.51626 11.5465 2.33103 12.8227 2.18916C12.9232 2.17734 13 2.09655 13 2C13 1.90148 12.9252 1.82266 12.8247 1.81084C11.5505 1.65911 11.3752 1.48177 11.1861 0.169458C11.1704 0.0689655 11.0935 0 10.999 0C10.9045 0 10.8277 0.0689655 10.8119 0.169458C10.6347 1.48374 10.4515 1.66897 9.17725 1.81084C9.07484 1.82266 9 1.90148 9 2C9 2.09655 9.07287 2.17537 9.17528 2.18916C10.4495 2.36059 10.6169 2.51823 10.8119 3.83054C10.8296 3.93103 10.9065 4 10.999 4Z" fill="inherit"/>
-          </g>
-          <path d="M1.99902 25C2.09552 25 2.17036 24.931 2.18612 24.8305C2.36337 23.5163 2.54653 23.331 3.82275 23.1892C3.92319 23.1773 4 23.0966 4 23C4 22.9015 3.92516 22.8227 3.82472 22.8108C2.55047 22.6591 2.37518 22.4818 2.18612 21.1695C2.17036 21.069 2.09355 21 1.99902 21C1.90448 21 1.82767 21.069 1.81192 21.1695C1.63466 22.4837 1.4515 22.669 0.177253 22.8108C0.07484 22.8227 0 22.9015 0 23C0 23.0966 0.0728705 23.1754 0.175283 23.1892C1.44953 23.3606 1.61694 23.5182 1.81192 24.8305C1.82964 24.931 1.90645 25 1.99902 25Z" fill="inherit"/>
-          <path d="M53.999 13C54.0955 13 54.1704 12.931 54.1861 12.8305C54.3634 11.5163 54.5465 11.331 55.8227 11.1892C55.9232 11.1773 56 11.0966 56 11C56 10.9015 55.9252 10.8227 55.8247 10.8108C54.5505 10.6591 54.3752 10.4818 54.1861 9.16946C54.1704 9.06897 54.0935 9 53.999 9C53.9045 9 53.8277 9.06897 53.8119 9.16946C53.6347 10.4837 53.4515 10.669 52.1773 10.8108C52.0748 10.8227 52 10.9015 52 11C52 11.0966 52.0729 11.1754 52.1753 11.1892C53.4495 11.3606 53.6169 11.5182 53.8119 12.8305C53.8296 12.931 53.9065 13 53.999 13Z" fill="inherit"/>
-        </symbol>
         <linearGradient id="paint0_linear_6651_5783" x1="12.1999" y1="-1.71024" x2="12.1999" y2="25.2914" gradientUnits="userSpaceOnUse">
           <stop stop-color="#FFF0C2"/>
           <stop offset="1" stop-color="#FFEBBA"/>

public/assets/fonts/Numbers-Rounded.woff2

@@ -0,0 +1,99 @@
+import {AnimatedSuper} from './animatedSuper.js';
+
+export interface AnimatedCounterOptions {
+  reverse?: boolean;
+  duration?: number;
+}
+
+export class AnimatedCounter {
+  static EMPTY_INDEX = -1;
+  static BASE_CLASS = 'animated-counter';
+  container: HTMLElement;
+  decimals: {
+    container: HTMLElement,
+    placeholder: HTMLElement,
+    animatedSuper: AnimatedSuper
+  }[] = [];
+  previousNumber = 0;
+  clearTimeout: number;
+
+  reverse: AnimatedCounterOptions['reverse'];
+  duration: AnimatedCounterOptions['duration'];
+
+  constructor(options: AnimatedCounterOptions) {
+    this.reverse = options.reverse;
+    this.duration = options.duration ?? AnimatedSuper.DEFAULT_DURATION;
+    this.container = document.createElement('div');
+    this.container.className = AnimatedCounter.BASE_CLASS;
+  }
+
+  getDecimal(index: number) {
+    if(this.decimals[index]) return this.decimals[index];
+    const item = document.createElement('div');
+    item.className = AnimatedCounter.BASE_CLASS + '-decimal';
+
+    const placeholder = document.createElement('div');
+    placeholder.className = AnimatedCounter.BASE_CLASS + '-decimal-placeholder';
+
+    const animatedSuper = new AnimatedSuper({duration: this.duration});
+    animatedSuper.container.className = AnimatedCounter.BASE_CLASS + '-decimal-wrapper';
+
+    item.append(placeholder, animatedSuper.container);
+
+    this.container.append(item);
+
+    return this.decimals[index] = {container: item, placeholder, animatedSuper};
+  }
+
+  clear(number: number) {
+    if(this.clearTimeout) clearTimeout(this.clearTimeout);
+
+    const decimals = ('' + number).length;
+    if(decimals >= this.decimals.length) {
+      return;
+    }
+
+    this.clearTimeout = window.setTimeout(() => {
+      const byDecimal = this.decimals.splice(decimals, this.decimals.length - decimals);
+      byDecimal.forEach((decimal) => {
+        decimal.container.remove();
+      });
+    }, this.duration);
+  }
+
+  hideLeft(number: number) {
+    const decimals = ('' + number).length;
+    const byDecimal = this.decimals.slice(decimals);// this.decimals.splice(deleteCount, this.decimals.length - deleteCount);
+    byDecimal.forEach((decimal) => {
+      const previousDecimalNumber = +decimal.placeholder.innerText || 0;
+      const row = decimal.animatedSuper.getRow(AnimatedCounter.EMPTY_INDEX, true);
+      decimal.animatedSuper.animate(AnimatedCounter.EMPTY_INDEX, previousDecimalNumber, this.reverse ? number < this.previousNumber : number > this.previousNumber, true);
+    });
+
+    this.clear(number);
+  }
+
+  setCount(number: number) {
+    // this.prepareNumber(number);
+
+    const previousByDecimal = Array.from('' + this.previousNumber).map((n) => +n);
+    const byDecimal = Array.from('' + number).map((n) => +n);
+    byDecimal.forEach((decimalNumber, idx) => {
+      const decimal = this.getDecimal(idx);
+      const row = decimal.animatedSuper.getRow(decimalNumber, true);
+      const previousDecimalNumber = previousByDecimal[idx] ?? AnimatedCounter.EMPTY_INDEX;
+      row.innerText = decimal.placeholder.innerText = '' + decimalNumber;
+      decimal.animatedSuper.animate(decimalNumber, previousDecimalNumber, this.reverse ? number < this.previousNumber : number > this.previousNumber, true);
+    });
+
+    this.hideLeft(number);
+    // this.clear(number);
+    this.previousNumber = number;
+  }
+
+  destroy() {
+    this.decimals.forEach((decimal) => {
+      decimal.animatedSuper.destroy();
+    });
+  }
+}

public/assets/img/anon_paid_reaction.png

@@ -0,0 +1,100 @@
+import {getMiddleware, MiddlewareHelper} from '../helpers/middleware.js';
+
+export interface AnimatedSuperOptions {
+  duration?: number;
+}
+
+export class AnimatedSuper {
+  static BASE_CLASS = 'animated-super';
+  static DEFAULT_DURATION = 200;
+  container: HTMLDivElement;
+  rows: {[index: string]: {element: HTMLElement, middleware: MiddlewareHelper, timeout?: number, new?: true}} = {};
+  clearTimeout: number;
+
+  duration: AnimatedSuperOptions['duration'];
+  constructor(options?: AnimatedSuperOptions) {
+    this.duration = options?.duration ?? AnimatedSuper.DEFAULT_DURATION;
+    this.container = document.createElement('div');
+    this.container.className = AnimatedSuper.BASE_CLASS;
+  }
+
+  public getRow(index: number, animateFirst = false) {
+    if(this.rows[index]) return this.rows[index].element;
+    const row = document.createElement('div');
+    const isFirst = !Object.keys(this.rows).length && !animateFirst;
+    row.className = AnimatedSuper.BASE_CLASS + '-row' + (isFirst ? '' : ' is-hiding hide');
+    this.rows[index] = {element: row, middleware: row.middlewareHelper = getMiddleware(), new: true};
+    this.container.append(row);
+    return row;
+  }
+
+  public clearRow(index: number) {
+    if(!this.rows[index]) return;
+    this.rows[index].element.remove();
+    this.rows[index].middleware.destroy();
+    delete this.rows[index];
+  }
+
+  public clearRows(currentIndex?: number) {
+    if(this.clearTimeout) clearTimeout(this.clearTimeout);
+    this.clearTimeout = window.setTimeout(() => {
+      for(const i in this.rows) {
+        if(+i === currentIndex) continue;
+        this.clearRow(+i);
+      }
+    }, this.duration);
+  }
+
+  public setNewRow(index: number, reflow = false) {
+    const row = this.rows[index];
+    if(row.new) {
+      if(reflow) {
+        row.element.classList.remove('hide');
+        void row.element.offsetLeft; // reflow
+      } else {
+        row.element.classList.remove('is-hiding', 'hide');
+      }
+
+      delete row.new;
+    }
+
+    this.clearRows(index);
+  }
+
+  public animate(index: number, previousIndex: number, fromTop = index > previousIndex, ignorePrevious = false) {
+    if(index === previousIndex) { // * handle if set index 0 and previousIndex 0
+      return this.setNewRow(index);
+    }
+
+    const row = this.rows[index];
+    const previousRow = this.rows[previousIndex];
+    if(!previousRow && !ignorePrevious) {
+      return this.setNewRow(index);
+    }
+
+    const sides = ['from-top', 'from-bottom'];
+    if(!fromTop) sides.reverse();
+
+    row.element.classList.add(sides[0]);
+    row.element.classList.remove(sides[1]);
+    if(previousRow) {
+      previousRow.element.classList.add(sides[1]);
+      previousRow.element.classList.remove(sides[0]);
+    }
+
+    if(row.new) {
+      this.setNewRow(index, true);
+    }
+
+    row.element.classList.toggle('is-hiding', false);
+    previousRow && previousRow.element.classList.toggle('is-hiding', true);
+
+    this.clearRows(index);
+  }
+
+  public destroy() {
+    for(const i in this.rows) {
+      this.clearRow(+i);
+    }
+  }
+}

public/assets/tgs/StarReaction.json

@@ -889,6 +889,11 @@ export const AvatarNew = (props: {
   return ret;
 };
 
+export function AvatarNewTsx(props: Parameters<typeof AvatarNew>[0]) {
+  const el = AvatarNew(props);
+  return el.element;
+}
+
 export function avatarNew(props: {
   middleware: Middleware
 } & Parameters<typeof AvatarNew>[0]) {

public/assets/tgs/StarReactionAppear.json

@@ -65,6 +65,7 @@ import PopupElement from '../popups';
 import PopupStars from '../popups/stars';
 import {getPendingPaidReactionKey, PENDING_PAID_REACTIONS} from './reactions';
 import tsNow from '../../helpers/tsNow';
+import {doubleRaf} from '../../helpers/schedulers.js';
 
 export enum ChatType {
   Chat = 'chat',
@@ -1288,9 +1289,17 @@ export default class Chat extends EventListenerBase<{
     const isPaidReaction = options.reaction._ === 'reactionPaid';
     const count = options.count ?? 1;
     if(isPaidReaction) {
+      const key = getPendingPaidReactionKey(options.message as Message.message);
+      let pending = PENDING_PAID_REACTIONS.get(key);
       if(!this.stars()) {
+        let count = 1
+        if(pending) {
+          count += pending.count();
+          pending.abortController.abort();
+        }
+
         PopupElement.createPopup(PopupStars, {
-          itemPrice: 1,
+          itemPrice: count,
           onTopup: () => {
             this.sendReaction(options);
           },
@@ -1301,28 +1310,29 @@ export default class Chat extends EventListenerBase<{
         return;
       }
 
-      const key = getPendingPaidReactionKey(options.message as Message.message);
-      let pending = PENDING_PAID_REACTIONS.get(key);
       if(!pending) {
         const [count, setCount] = createSignal(0);
         const [sendTime, setSendTime] = createSignal(0);
+        const abortController = new AbortController();
+        abortController.signal.addEventListener('abort', () => {
+          clearTimeout(pending.sendTimeout);
+          pending.setSendTime(0);
+          PENDING_PAID_REACTIONS.delete(key);
+          setReservedStars((reservedStars) => reservedStars - pending.count());
+          rootScope.dispatchEventSingle('messages_reactions', [{
+            message: this.getMessageByPeer(options.message.peerId, options.message.mid) as Message.message,
+            changedResults: [],
+            removedResults: []
+          }]);
+        });
+
         PENDING_PAID_REACTIONS.set(key, pending = {
           count,
           setCount,
           sendTime,
           setSendTime,
           sendTimeout: 0,
-          cancel: () => {
-            clearTimeout(pending.sendTimeout);
-            pending.setSendTime(0);
-            PENDING_PAID_REACTIONS.delete(key);
-            setReservedStars((reservedStars) => reservedStars - pending.count());
-            rootScope.dispatchEventSingle('messages_reactions', [{
-              message: this.getMessageByPeer(options.message.peerId, options.message.mid) as Message.message,
-              changedResults: [],
-              removedResults: []
-            }]);
-          }
+          abortController
         });
       } else {
         clearTimeout(pending.sendTimeout);
@@ -1331,8 +1341,13 @@ export default class Chat extends EventListenerBase<{
       pending.setCount((_count) => _count + count);
       pending.setSendTime(Date.now() + SEND_PAID_REACTION_DELAY);
       pending.sendTimeout = window.setTimeout(() => {
-        pending.cancel();
-        // alert('yeah');
+        const count = pending.count();
+        pending.abortController.abort();
+        this.managers.appReactionsManager.sendReaction({
+          sendAsPeerId: this.getMessageSendingParams().sendAsPeerId,
+          ...options,
+          count
+        });
       }, SEND_PAID_REACTION_DELAY);
 
       setReservedStars((reservedStars) => reservedStars + count);

public/assets/tgs/StarReactionEffect1.json

@@ -75,6 +75,7 @@ import deepEqual from '../../helpers/object/deepEqual';
 import wrapDraftText from '../../lib/richTextProcessor/wrapDraftText';
 import flatten from '../../helpers/array/flatten';
 import PopupStarReaction from '../popups/starReaction';
+import {PENDING_PAID_REACTIONS} from './reactions.js';
 import getUniqueCustomEmojisFromMessage from '../../lib/appManagers/utils/messages/getUniqueCustomEmojisFromMessage';
 
 type ChatContextMenuButton = ButtonMenuItemOptions & {
@@ -214,7 +215,8 @@ export default class ChatContextMenu {
     }
 
     const paidReactionElement = (e.target as HTMLElement).closest('.reaction.is-paid');
-    if(paidReactionElement && !findUpClassName(e.target, 'tooltip')) {
+    if(paidReactionElement) {
+      PENDING_PAID_REACTIONS.forEach(it => it.abortController.abort());
       PopupElement.createPopup(PopupStarReaction, bubble.dataset.peerId.toPeerId(), mid);
       return;
     }
@@ -1110,6 +1112,12 @@ export default class ChatContextMenu {
             return;
           }
 
+          if(reaction._ === 'reactionPaid') {
+            PENDING_PAID_REACTIONS.forEach(it => it.abortController.abort());
+            PopupElement.createPopup(PopupStarReaction, reactionsMessage.peerId, reactionsMessage.mid);
+            return;
+          }
+
           if(!rootScope.premium && tags) {
             PopupPremium.show({feature: 'saved_tags'});
             return;