test: testing apng

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@chargebee/chargebee-js-react-wrapper": "^0.6.3",
         "@reduxjs/toolkit": "^1.9.5",
+        "apng-js": "^1.1.1",
         "html-react-parser": "^3.0.16",
         "i18next": "^22.5.0",
         "i18next-react-postprocessor": "^3.1.0",
@@ -1351,6 +1352,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/apng-js": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/apng-js/-/apng-js-1.1.1.tgz",
+      "integrity": "sha512-UWaloDssWCE8Bj0wipyNxEXPnMadYS0VAjghCLas5nKGqfiBMNdQJhg8Fawq2+jZ50IOM1feKwjiqPAC/bvKgg=="
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -4245,6 +4251,11 @@
         "color-convert": "^1.9.0"
       }
     },
+    "apng-js": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/apng-js/-/apng-js-1.1.1.tgz",
+      "integrity": "sha512-UWaloDssWCE8Bj0wipyNxEXPnMadYS0VAjghCLas5nKGqfiBMNdQJhg8Fawq2+jZ50IOM1feKwjiqPAC/bvKgg=="
+    },
     "argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@chargebee/chargebee-js-react-wrapper": "^0.6.3",
     "@reduxjs/toolkit": "^1.9.5",
+    "apng-js": "^1.1.1",
     "html-react-parser": "^3.0.16",
     "i18next": "^22.5.0",
     "i18next-react-postprocessor": "^3.1.0",

src/components/BreathPage/index.tsx

@@ -1,5 +1,5 @@
 import styles from "./styles.module.css";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { UserCallbacks, useApi, useApiCall } from "@/api";
 import { Asset } from "@/api/resources/Assets";
 import { useDispatch } from "react-redux";
@@ -11,16 +11,24 @@ import StartBreathModalChild from "../StartBreathModalChild";
 import Title from "../Title";
 import { useNavigate } from "react-router-dom";
 import routes from "@/routes";
+import parseAPNG from "apng-js";
 
 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 leoCanvasRef = useRef<HTMLCanvasElement>(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"),
@@ -36,26 +44,39 @@ function BreathPage(): JSX.Element {
       setIsShowPreview(false);
     }, 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(() => {
-      setAsset(data[getRandomArbitrary(0, data?.length || 0)]);
+    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(() => {
+
+      // })
+      const context = leoCanvasRef.current?.getContext("2d");
+      console.log('context: ', context);
+      if (context) {
+        
+        (await apng.getPlayer(context)).pause();
+      }
     }, 9_000);
 
     return () => {
       clearTimeout(leoTimeOut);
     };
-  }, [data, isOpenModal]);
+  }, [data, isOpenModal, fetchAPNG]);
 
   const beginBreath = () => {
     setIsOpenModal(false);
@@ -107,13 +128,17 @@ function BreathPage(): JSX.Element {
         // }}
       >
         {!isOpenModal && asset?.url && (
-          <div className={styles["leo-apng-container"]}>
-            <img
+          <canvas
+            // style={{ backgroundImage: `url(${asset?.url})` }}
+            className={styles["leo-apng-container"]}
+            ref={leoCanvasRef}
+          >
+            {/* <img
               className={styles["leo-apng"]}
               src={asset.url}
               alt="leo apng"
-            />
-          </div>
+            /> */}
+          </canvas>
         )}
         {!isOpenModal && isShowPreview && (
           <div className={styles.preview}>

src/components/BreathPage/styles.module.css

@@ -18,6 +18,7 @@
 }
 
 .leo-apng {
+  width: 100%;
   animation-name: leo-apng;
   animation-duration: 1.5s;
   animation-iteration-count: 1;