feat(trakt): adds trakt demo video

Author: dvcol

public/assets/video/trakt-extension-preview.hevc.mp4

@@ -9,7 +9,6 @@ import type { Component } from 'solid-js';
 
 import type { BackgroundColors, ImageCardProps } from '~/components/common/layout';
 
-import ComingSoonLottie from '~/assets/lottie/23888-website-build.json?url';
 import ContactLottie from '~/assets/lottie/64643-receive-a-new-email.json?url';
 import AboutMeSvg from '~/assets/lottie/developer-front-end-lottie.json?url';
 import { EnterTranslate, HoverScale } from '~/components/common/animation';
@@ -61,8 +60,9 @@ export const Home: Component = () => {
       id: uuid(),
       path: RoutesMeta.TraktDemo.path,
       title: RoutesMeta.TraktDemo.name,
-      imageProps: { sx: { background: RoutesMeta.TraktDemo.accentColor } },
-      lottieProps: { src: ComingSoonLottie },
+      videoProps: {
+        source: { src: 'assets/video/trakt-extension-preview.hevc.mp4', type: MimeType.MP4 },
+      },
       bgColors: {
         source: RoutesMeta.TraktDemo.accentColor,
         target: RoutesMeta.TraktDemo.bgColor,

src/components/pages/home/home.tsx

@@ -1,5 +1,7 @@
 import { useNavigate } from '@solidjs/router';
 
+import { Box } from '@suid/material';
+
 import { createEffect, createSignal, Show } from 'solid-js';
 
 import type { Component } from 'solid-js';
@@ -10,6 +12,7 @@ import { Spinner } from '~/components/common/loader';
 
 import { stopScrollPropagation } from '~/components/common/utils';
 import { Routes } from '~/services';
+import { Colors } from '~/themes';
 
 export const TraktDemo: Component = () => {
   const [loaded, setLoaded] = createSignal(false);
@@ -32,14 +35,20 @@ export const TraktDemo: Component = () => {
   });
 
   return (
-    <Page maxWidth="fhd" animate="fade">
+    <Page maxWidth="tablet" animate="fade">
       <Show when={loaded()} fallback={<Spinner center size={10} debounce={500} />}>
-        <wc-trakt-extension
-          ref={setWcRef}
-          style={{ margin: '0.7rem 1rem', height: 'calc(100dvh - 1.4rem)', overflow: 'hidden', position: 'relative' }}
+        <Box
+          sx={{
+            margin: '2rem 1rem',
+          }}
         >
-          <Spinner center size={10} debounce={500} />
-        </wc-trakt-extension>
+          <wc-trakt-extension
+            ref={setWcRef}
+            style={{ height: 'calc(100dvh - 4rem)', overflow: 'hidden', position: 'relative', background: Colors.DarkGrey }}
+          >
+            <Spinner center size={10} debounce={500} />
+          </wc-trakt-extension>
+        </Box>
       </Show>
     </Page>
   );

src/components/pages/trakt/trakt-demo.tsx

@@ -1,6 +1,6 @@
 {
   "synology_demo": "A chrome extension to manage your Synology Nas right from the browser. Create, delete or edit your task, consult or transfer your local download to your nas, etc.",
-  "trakt": "A chrome extension to manage your trakt.tv collections and lists. Consult, mark as watched or collect your shows or movies from your navigator.",
+  "trakt_demo": "Side-trakt is a powerful Chrome extension designed to seamlessly access your trakt.tv collections and lists from your web browser.",
   "about_me": "A small summary of my projects and past experiences. Consult my active projects, my previous jobs and studies, or just checkout my cv.",
   "contact": "A convenient way to contact me about my projects or any other inquiry."
 }

src/i18n/pages/home.en.json

@@ -1,6 +1,6 @@
 {
   "synology_demo": "Une extension chrome pour administrer un NAS Synology depuis votre navigateur. Ajoutez, supprimez, ou éditez vos tâches, gérer ou transférer vos téléchargement, etc.",
-  "trakt": "Une extension chrome pour gérer vos collections et listes trakt.tv. Consultez, enregistrez ou collectez vos séries et films depuis votre navigateur.",
+  "trakt_demo": "Side-trakt est une extension Chrome qui vous permet d'accéder à vos collections et listes Trakt.tv. Grâce à celle-ci, vous pouvez naviguer, suivre et gérer vos émissions et films préférés directement depuis votre navigateur web.",
   "about_me": "Une présentation succincte de mes projets personnels et expériences professionnelles. Consultez mes projets actifs, mes différentes expériences, mon parcours d'étude, ou tout simplement parcourez mon cv.",
   "contact": "Un formulaire de contact permettant de me joindre facilement au sujet de mes projets ou tout autre question."
 }

src/i18n/pages/home.fr.json

@@ -100,7 +100,7 @@ export const RoutesMeta: Record<keyof typeof Routes, RouteMeta> = {
     navbar: true,
     accentColor: Colors.trakt,
     color: Colors.white,
-    bgColor: Colors.DarkGrey,
+    bgColor: Colors.black,
   },
   Synology: {
     path: Routes.Synology,

src/services/router/routes.service.ts

@@ -2,7 +2,7 @@ export enum Colors {
   theme = '#2a2b30',
   accent = '#9fa0a1',
   background = '#1d1e21',
-  trakt = '#ed1c25',
+  trakt = '#80000a',
   SynologyDemo = '#00a5ff',
   AboutMe = '#ff3e00',
   Contact = '#800000',