mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-03 02:10:55 +00:00
Move lottie zap animation to a specialized component
This commit is contained in:
parent
7d6114f85c
commit
fd9d28fa11
@ -14,6 +14,7 @@ import { SendNoteResult } from '../../types/primal';
|
|||||||
import { useProfileContext } from '../../contexts/ProfileContext';
|
import { useProfileContext } from '../../contexts/ProfileContext';
|
||||||
import Branding from '../Branding/Branding';
|
import Branding from '../Branding/Branding';
|
||||||
import BannerIOS, { isIOS } from '../BannerIOS/BannerIOS';
|
import BannerIOS, { isIOS } from '../BannerIOS/BannerIOS';
|
||||||
|
import ZapAnimation from '../ZapAnimation/ZapAnimation';
|
||||||
|
|
||||||
export const [isHome, setIsHome] = createSignal(false);
|
export const [isHome, setIsHome] = createSignal(false);
|
||||||
|
|
||||||
@ -87,14 +88,7 @@ const Layout: Component = () => {
|
|||||||
<div class="zap_icon_fill"></div>
|
<div class="zap_icon_fill"></div>
|
||||||
<div class="like_icon"></div>
|
<div class="like_icon"></div>
|
||||||
<div class="like_icon_fill"></div>
|
<div class="like_icon_fill"></div>
|
||||||
<lottie-player
|
<ZapAnimation src={zapMD} />
|
||||||
src={zapSM}
|
|
||||||
speed="1"
|
|
||||||
></lottie-player>
|
|
||||||
<lottie-player
|
|
||||||
src={zapMD}
|
|
||||||
speed="1"
|
|
||||||
></lottie-player>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="modal" class={styles.modal}></div>
|
<div id="modal" class={styles.modal}></div>
|
||||||
<BannerIOS />
|
<BannerIOS />
|
||||||
|
@ -18,6 +18,7 @@ import PrimalMenu from '../../PrimalMenu/PrimalMenu';
|
|||||||
import { hookForDev } from '../../../lib/devTools';
|
import { hookForDev } from '../../../lib/devTools';
|
||||||
import NoteContextMenu from '../NoteContextMenu';
|
import NoteContextMenu from '../NoteContextMenu';
|
||||||
import { getScreenCordinates } from '../../../utils';
|
import { getScreenCordinates } from '../../../utils';
|
||||||
|
import ZapAnimation from '../../ZapAnimation/ZapAnimation';
|
||||||
|
|
||||||
const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => {
|
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}>
|
<div id={props.id} class={styles.footer} ref={footerDiv}>
|
||||||
|
|
||||||
<Show when={showZapAnim()}>
|
<Show when={showZapAnim()}>
|
||||||
<lottie-player
|
<ZapAnimation
|
||||||
id={`note-med-zap-${props.note.post.id}`}
|
id={`note-med-zap-${props.note.post.id}`}
|
||||||
src={zapMD}
|
src={zapMD}
|
||||||
speed="1"
|
|
||||||
class={styles.mediumZapLottie}
|
class={styles.mediumZapLottie}
|
||||||
ref={medZapAnimation}
|
ref={medZapAnimation}
|
||||||
></lottie-player>
|
/>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
{actionButton({
|
{actionButton({
|
||||||
|
24
src/components/ZapAnimation/ZapAnimation.tsx
Normal file
24
src/components/ZapAnimation/ZapAnimation.tsx
Normal file
@ -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;
|
Loading…
Reference in New Issue
Block a user