feat(home): adds gif & lottie

Author: dvcol

src/assets/gif/synology_demo.gif

@@ -1,14 +1,18 @@
 import { Card, CardActionArea, CardContent, CardMedia, Typography } from '@suid/material';
 
-import { splitProps } from 'solid-js';
+import { Show, splitProps } from 'solid-js';
 
 import type CardProps from '@suid/material/Card/CardProps';
 import type { CardActionsProps } from '@suid/material/CardActions';
 import type { CardMediaProps } from '@suid/material/CardMedia';
 import type { JSX, ParentComponent } from 'solid-js';
 
+import type { LottiePlayerProps } from '~/components';
+
 import type { ResponsiveStyleValue } from '~/themes';
 
+import { LottiePlayer } from '~/components';
+
 type ImageCardMediaProps = CardMediaProps & {
   component?: keyof JSX.IntrinsicElements;
   height?: ResponsiveStyleValue<string | number>;
@@ -17,6 +21,7 @@ export type ImageCardProps = {
   title?: string | JSX.Element;
   description?: string | JSX.Element;
   imageProps?: ImageCardMediaProps & { alt?: string };
+  lottieProps?: LottiePlayerProps;
   actionProps?: CardActionsProps;
 } & CardProps;
 export const ImageCard: ParentComponent<ImageCardProps> = props => {
@@ -26,8 +31,6 @@ export const ImageCard: ParentComponent<ImageCardProps> = props => {
     <Card
       {...cardProps}
       sx={{
-        height: '100%',
-        width: '100%',
         whiteSpace: 'pre-line',
         ...cardProps.sx,
       }}
@@ -39,7 +42,11 @@ export const ImageCard: ParentComponent<ImageCardProps> = props => {
           ..._props.actionProps?.sx,
         }}
       >
-        <CardMedia component="img" {..._props.imageProps} />
+        <CardMedia {..._props.imageProps}>
+          <Show when={props.lottieProps}>
+            <LottiePlayer autoplay loop mode="normal" {...props.lottieProps} />
+          </Show>
+        </CardMedia>
         <CardContent>
           <Typography gutterBottom variant="h6" component="div">
             {_props.title}

src/assets/lottie/64643-receive-a-new-email.json

@@ -2,6 +2,9 @@ import type { Component } from 'solid-js';
 
 import type { LottiePlayerComponent } from '~/apps/lottie/entry';
 
+import type { PropsWithRef } from '~/utils';
+
+export type LottiePlayerProps = PropsWithRef<LottiePlayerComponent>;
 export const LottiePlayer: Component<LottiePlayerComponent & { ref?: LottiePlayerComponent | ((el: LottiePlayerComponent) => void) }> = props => {
   import('~/apps/lottie/entry').catch(() => console.error('Failed to define lottie web components'));
 

src/assets/lottie/70229-contact-us.json

@@ -1 +1,2 @@
 export * from './particles-container';
+export * from './triangle.particles';

src/components/common/layout/image-card.tsx

@@ -155,7 +155,7 @@ export const ContactForm: Component<ContactFormProps> = props => {
         fieldProps: {
           required: true,
           multiline: true,
-          rows: Math.ceil(window.innerHeight / 100),
+          rows: Math.ceil(2 + window.innerHeight / 100),
         },
         ref: setBodyRef,
       },

src/components/common/lottie/lottie-player.tsx

@@ -8,7 +8,7 @@ import { ContactForm } from './contact-form';
 
 import type { Component } from 'solid-js';
 
-import ContactLottie from '~/assets/lottie/70229-contact-us.json?url';
+import ContactLottie from '~/assets/lottie/64643-receive-a-new-email.json?url';
 import { HoverScale, LottiePlayer, Page, PageHeader } from '~/components';
 import { RoutesMeta } from '~/services';
 import { BreakPointsStop } from '~/themes';
@@ -96,7 +96,6 @@ export const Contact: Component = () => {
       setTimeout(() => {
         const _card = cardRef();
         if (!_card || !_card.clientWidth || !_card.clientHeight) return;
-        console.info({ _card, width: _card.clientWidth });
         setBorders({
           width: _card.clientWidth / 2,
           height: _card.clientHeight / 2,

src/components/common/particles/index.ts

@@ -8,10 +8,11 @@ import type { Component } from 'solid-js';
 
 import type { ImageCardProps } from '~/components';
 
+import SynologyDemoGif from '~/assets/gif/synology_demo.gif?url';
 import SolidSvg from '~/assets/logo/solid.svg?url';
-import { HoverScale, ImageCard, Page, ParticlesContainer } from '~/components';
+import ContactLottie from '~/assets/lottie/64643-receive-a-new-email.json?url';
+import { HoverScale, ImageCard, Page, ParticlesContainer, TriangleParticles } from '~/components';
 
-import { TriangleParticles } from '~/components/common/particles/triangle.particles';
 import { RoutesMeta } from '~/services';
 import { BreakPointsStop } from '~/themes';
 import { camelToSnakeCase } from '~/utils';
@@ -25,23 +26,24 @@ export const Home: Component = () => {
     {
       path: RoutesMeta.SynologyDemo.path,
       title: RoutesMeta.SynologyDemo.name,
-      imageProps: { image: SolidSvg },
+      imageProps: { component: 'img', image: SynologyDemoGif, sx: { background: 'black' } },
     },
 
     {
       path: RoutesMeta.AboutMe.path,
       title: RoutesMeta.AboutMe.name,
-      imageProps: { image: SolidSvg },
+      imageProps: { component: 'img', image: SolidSvg },
     },
     {
       path: RoutesMeta.Trakt.path,
       title: RoutesMeta.Trakt.name,
-      imageProps: { image: SolidSvg },
+      imageProps: { component: 'img', image: SolidSvg },
     },
     {
       path: RoutesMeta.Contact.path,
       title: RoutesMeta.Contact.name,
-      imageProps: { image: SolidSvg },
+      imageProps: { sx: { background: 'maroon' } },
+      lottieProps: { src: ContactLottie },
     },
   ];
   return (
@@ -67,23 +69,25 @@ export const Home: Component = () => {
           }}
         >
           <For each={cards}>
-            {({ path, title, imageProps }) => (
+            {({ path, title, imageProps, ..._props }) => (
               <Grid item xs={12} sm={6}>
                 <HoverScale>
                   <ImageCard
                     title={t(`routes.${camelToSnakeCase(title)}`)}
                     description={t(`home.${camelToSnakeCase(title)}`)}
                     imageProps={{
+                      ...imageProps,
                       alt: `cover image for ${title}`,
                       sx: {
                         height: {
                           [BreakPointsStop.default]: 200,
                           [BreakPointsStop.tablet]: 300,
                           [BreakPointsStop.fhd]: 400,
                         },
+                        ...imageProps?.sx,
                       },
-                      ...imageProps,
                     }}
+                    {..._props}
                     onclick={() => navigate(path)}
                   />
                 </HoverScale>