Intro.tsx

import {useRef} from 'react';
import {AnimateCC} from 'react-adobe-animate';
import Typewriter, {TypewriterClass} from "typewriter-effect";
import {intro, nextButton, skipToChapter, toChapter} from "../../public/lit/texts";
import {useAnimate} from "../hooks/useAnimate";
import {useTranslate} from "../hooks/useTranslate";
import {useNavigate} from "react-router-dom";
import volumeUp from "../assets/icons/volume_up_black.svg"
import volumeDown from "../assets/icons/volume_off_black.svg"

const Intro = () => {
    const nextButtonText = useTranslate(nextButton);
    const chapter1Text = useTranslate(toChapter) + "1";
    const typewriterRef = useRef<TypewriterClass>();
    const navigate = useNavigate();
    const skipButtonText = useTranslate(skipToChapter) + "1";

    const audioFiles: string[] = [];

    for (let i = 1; i <= 10; i++) {
        const filePath = `public/sounds/intro/en_intro_${i}.mp3`;
        audioFiles.push(filePath);
    }

    const {getAnimationObject, handleClick, isAnimationComplete, isLast, onInit, paused, handleMuteToggle, isMuted} = useAnimate({
        typewriterRef,
        link: '/insulin',
        text: intro,
        audioFiles: audioFiles
    });

    return (
        <>
            <div className="flex items-center justify-center">
                <div className="container">
                    <div className="text mt-12">
                        <div id="intro-text" className="font-speech">
                            <Typewriter
                                options={{
                                    delay: 40,
                                }}
                                onInit={(typewriter) => onInit({typewriter, pauseFor: 0})}
                            />
                        </div>
                        <div className="mt-12 ml-44 flex justify-center">
                            <div
                                id="animation-container"
                                style={{width: '600px', height: '300px', position: 'relative'}}
                            >
                                <AnimateCC
                                    animationName="intro"
                                    getAnimationObject={getAnimationObject}
                                    paused={paused}
                                />
                            </div>
                        </div>
                    </div>
                    <div className="mt-20 flex justify-evenly">
                        <button
                            onClick={handleClick}
                            className={`mt-20 border-4 border-black font-primary ${
                                !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-main'
                            }`}
                        >
                            {isLast ? chapter1Text : nextButtonText}
                        </button>
                        {!isLast && (
                        <button
                            onClick={() => navigate("/insulin")}
                            className={`mt-20 border-4 border-black font-primary bg-yellow-main`}
                        >
                            {skipButtonText}
                        </button>
                            )}
                        <button onClick={handleMuteToggle}
                                className={`mt-20 border-4 border-black font-primary bg-yellow-main`}
                        >
                            {isMuted ? (
                                <img src={volumeDown} alt="Volume off"/>
                            ) : (
                                <img src={volumeUp} alt="Volume On"/>
                            )}
                        </button>
                    </div>
                </div>
            </div>
        </>
    );
};
export default Intro;