From fd9d28fa11727d72788d0a4477815667d9164b71 Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Wed, 10 Jan 2024 17:01:40 +0100
Subject: [PATCH] Move lottie zap animation to a specialized component

---
 src/components/Layout/Layout.tsx              | 10 ++------
 src/components/Note/NoteFooter/NoteFooter.tsx |  6 ++---
 src/components/ZapAnimation/ZapAnimation.tsx  | 24 +++++++++++++++++++
 3 files changed, 29 insertions(+), 11 deletions(-)
 create mode 100644 src/components/ZapAnimation/ZapAnimation.tsx

diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index f55f0d7..769b9e0 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -14,6 +14,7 @@ import { SendNoteResult } from '../../types/primal';
 import { useProfileContext } from '../../contexts/ProfileContext';
 import Branding from '../Branding/Branding';
 import BannerIOS, { isIOS } from '../BannerIOS/BannerIOS';
+import ZapAnimation from '../ZapAnimation/ZapAnimation';
 
 export const [isHome, setIsHome] = createSignal(false);
 
@@ -87,14 +88,7 @@ const Layout: Component = () => {
         <div class="zap_icon_fill"></div>
         <div class="like_icon"></div>
         <div class="like_icon_fill"></div>
-        <lottie-player
-          src={zapSM}
-          speed="1"
-        ></lottie-player>
-        <lottie-player
-          src={zapMD}
-          speed="1"
-        ></lottie-player>
+        <ZapAnimation src={zapMD} />
       </div>
       <div id="modal" class={styles.modal}></div>
       <BannerIOS />
diff --git a/src/components/Note/NoteFooter/NoteFooter.tsx b/src/components/Note/NoteFooter/NoteFooter.tsx
index 4f2b92b..9742180 100644
--- a/src/components/Note/NoteFooter/NoteFooter.tsx
+++ b/src/components/Note/NoteFooter/NoteFooter.tsx
@@ -18,6 +18,7 @@ import PrimalMenu from '../../PrimalMenu/PrimalMenu';
 import { hookForDev } from '../../../lib/devTools';
 import NoteContextMenu from '../NoteContextMenu';
 import { getScreenCordinates } from '../../../utils';
+import ZapAnimation from '../../ZapAnimation/ZapAnimation';
 
 const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => {
 
@@ -336,13 +337,12 @@ const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => {
     <div id={props.id} class={styles.footer} ref={footerDiv}>
 
       <Show when={showZapAnim()}>
-        <lottie-player
+        <ZapAnimation
           id={`note-med-zap-${props.note.post.id}`}
           src={zapMD}
-          speed="1"
           class={styles.mediumZapLottie}
           ref={medZapAnimation}
-        ></lottie-player>
+        />
       </Show>
 
       {actionButton({
diff --git a/src/components/ZapAnimation/ZapAnimation.tsx b/src/components/ZapAnimation/ZapAnimation.tsx
new file mode 100644
index 0000000..2192c39
--- /dev/null
+++ b/src/components/ZapAnimation/ZapAnimation.tsx
@@ -0,0 +1,24 @@
+import { Component } from 'solid-js';
+
+const ZapAnimation: Component<{
+  id?: string,
+  class?: string,
+  src: any,
+  ref?: HTMLElement | undefined,
+}> = (props) => {
+
+  return (
+    // @ts-ignore
+    <lottie-player
+      id={props.id}
+      src={props.src}
+      speed="1"
+      class={props.class}
+      ref={props.ref}
+    >
+    {/* @ts-ignore */}
+    </lottie-player>
+  );
+}
+
+export default ZapAnimation;