fix: breath leo apng

src/components/BreathPage/index.tsx

@@ -5,30 +5,25 @@ import { Asset } from "@/api/resources/Assets";
 import { useDispatch } from "react-redux";
 import { actions } from "@/store";
 import { useTranslation } from "react-i18next";
-// import { getRandomArbitrary } from "@/services/random-value";
 import FullScreenModal from "../FullScreenModal";
 import StartBreathModalChild from "../StartBreathModalChild";
 import Title from "../Title";
 import { useNavigate } from "react-router-dom";
-// import routes from "@/routes";
+import routes from "@/routes";
 import parseAPNG from "apng-js";
+import Player from "apng-js/types/library/player";
 
 function BreathPage(): JSX.Element {
   const { t } = useTranslation();
-  const [asset, setAsset] = useState<Asset>();
   const [isOpenModal, setIsOpenModal] = useState<boolean>(true);
   const [isShowPreview, setIsShowPreview] = useState<boolean>(true);
+  const [apngPlayer, setApngPlayer] = useState<Player>();
   const leoCanvasRef = useRef<HTMLCanvasElement>(null);
+  const pageRef = useRef<HTMLElement>(null);
   const api = useApi();
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
-  const fetchAPNG = async () => {
-    const response = await fetch(asset?.url || "");
-    const arrayBuffer = await response.arrayBuffer();
-    return parseAPNG(arrayBuffer);
-  };
-
   const assetsData = useCallback(async () => {
     const { assets } = await api.getAssets({
       category: String("au"),
@@ -42,41 +37,51 @@ function BreathPage(): JSX.Element {
     if (isOpenModal) return;
     const previewTimeOut = setTimeout(() => {
       setIsShowPreview(false);
+      console.log(apngPlayer);
+      
+      apngPlayer?.play()
     }, 10_000);
 
-    // const navigateTimeOut = setTimeout(() => {
-    //   navigate(routes.client.breathResult());
-    // }, 60_000);
+    const navigateTimeOut = setTimeout(() => {
+      navigate(routes.client.breathResult());
+    }, 60_000);
 
     return () => {
-      // clearTimeout(navigateTimeOut);
+      clearTimeout(navigateTimeOut);
       clearTimeout(previewTimeOut);
     };
   }, [navigate, isOpenModal]);
 
   useEffect(() => {
-    if (!data) return;
-    const leoTimeOut = setTimeout(async () => {
-      setAsset(data.find((item) => item.key === "au.apng.leo"));
-      const apng = await fetchAPNG();
-      if (apng instanceof Error) {
-        return;
-      }
-      // apng.createImages().then(() => {
+    async function test() {
+      console.log(data);
 
-      // })
+      if (!data) return;
+      console.log(1);
+
+      const response = await fetch(
+        data.find((item) => item.key === "au.apng.leo")?.url || ""
+      );
+      console.log(2);
+      const arrayBuffer = await response.arrayBuffer();
+      console.log(3);
+      const apng = parseAPNG(arrayBuffer);
+      console.log(4);
       const context = leoCanvasRef.current?.getContext("2d");
-      console.log('context: ', context);
-      if (context) {
-        
-        (await apng.getPlayer(context)).pause();
+      console.log("context: ", context);
+      if (context && !(apng instanceof Error)) {
+        context.canvas.height = apng.height;
+        context.canvas.width = apng.width;
+        const _apngPlayer = await apng.getPlayer(context);
+        console.log(5);
+        setApngPlayer(_apngPlayer);
+        if (apngPlayer) {
+          apngPlayer.stop();
+        }
       }
-    }, 9_000);
-
-    return () => {
-      clearTimeout(leoTimeOut);
-    };
-  }, [data, isOpenModal, fetchAPNG]);
+    }
+    test();
+  }, [data]);
 
   const beginBreath = () => {
     setIsOpenModal(false);
@@ -123,26 +128,16 @@ function BreathPage(): JSX.Element {
     <>
       <section
         className={`${styles.page} page`}
-        // style={{
-        //   backgroundImage: `url(${!isOpenModal ? asset?.url : "none"})`,
-        // }}
+        ref={pageRef}
       >
-        {!isOpenModal && asset?.url && (
-          <canvas
-            // style={{ backgroundImage: `url(${asset?.url})` }}
-            className={styles["leo-apng-container"]}
-            ref={leoCanvasRef}
-          >
-            {/* <img
-              className={styles["leo-apng"]}
-              src={asset.url}
-              alt="leo apng"
-            /> */}
-          </canvas>
-        )}
+        <canvas
+          style={{ display: isOpenModal ? "hidden" : "block" }}
+          className={`${styles["leo-apng"]} ${!isOpenModal && isShowPreview ? styles.leo : ''}`}
+          ref={leoCanvasRef}
+        >
+        </canvas>
         {!isOpenModal && isShowPreview && (
           <div className={styles.preview}>
-            <img className={styles.leo} src="/leo.png" alt="leo" />
             <Title
               variant="h2"
               className={`${styles.text} ${styles["breath-relax"]}`}

src/components/BreathPage/styles.module.css

@@ -8,21 +8,27 @@
   flex: auto;
 }
 
-.leo-apng-container {
+/* .leo-apng-container {
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
-}
+} */
 
 .leo-apng {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
+  height: 100%;
+  object-fit: cover;
+  /* width: 100%;
   animation-name: leo-apng;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
-  animation-timing-function: linear;
+  animation-timing-function: linear; */
 }
 
 .text-container {
@@ -55,12 +61,13 @@
 .preview {
   position: relative;
   width: 100%;
+  height: 200px;
   display: flex;
   justify-content: center;
 }
 
 .leo {
-  width: 90%;
+  /* width: 90%; */
   animation-name: leo;
   animation-duration: 10s;
   animation-iteration-count: 1;
@@ -112,12 +119,12 @@
   85% {
     scale: 1.1;
   }
-  95% {
+  /* 95% {
     opacity: 1;
-  }
+  } */
   100% {
     scale: 1;
-    opacity: 0;
+    opacity: 1;
   }
 }
 

src/components/HomePage/index.tsx

@@ -136,7 +136,7 @@ function HomePage(): JSX.Element {
 
   const downloadImg = () => {
     if (!asset) return;
-    download(asset.url, "image.png");
+    download(asset.url.replace("http://", "https://"), "image.png");
   };
 
   return (

src/components/StartBreathModalChild/styles.module.css

@@ -26,6 +26,7 @@
 
 .symbol {
   opacity: 0;
+  will-change: opacity;
   animation-name: appearance;
   animation-timing-function: ease;
   animation-duration: .3s;