Add language select carousel, button animations

src/modules/shared/components/iconButton/IconButton.module.scss

@@ -5,6 +5,16 @@
   height: 4.5rem;
   background-color: transparent;
   border: none;
+  display: block;
+  transition: all 0.2s ease;
+
+  &:active {
+    transform: translateY(0.2rem) scale(0.95);
+
+    svg {
+      filter: none;
+    }
+  }
 
   svg {
     filter: $drop-shadow;

src/modules/shared/components/icons/index.ts

@@ -8,3 +8,6 @@ export * from "./currentSceneBookmarkIcon";
 export * from "./playButtonIcon";
 export * from "./pauseIcon";
 export * from "./booksIcon";
+export * from "./pinkButtonIcon";
+export * from "./tilesIcon";
+export * from "./playBubbleIcon";

src/modules/shared/components/icons/pinkButtonIcon/index.ts

@@ -0,0 +1 @@
+export * from "./PinkButtonIcon";

src/modules/shared/components/icons/playBubbleIcon/index.ts

@@ -0,0 +1 @@
+export * from "./PlayBubbleIcon";

src/modules/story/components/animationController/AnimationController.module.scss

@@ -12,6 +12,10 @@
   height: 100%;
 }
 
+.animation {
+  width: 100%;
+}
+
 .scene-navigation {
   width: 100%;
   display: flex;
@@ -37,6 +41,10 @@
   position: absolute;
   z-index: 15;
 
+  &:hover {
+    cursor: pointer;
+  }
+
   &-back {
     top: 1rem;
     left: 1rem;
@@ -56,4 +64,9 @@
     bottom: 1rem;
     left: 50%;
   }
+
+  &-language {
+    bottom: 1rem;
+    right: 1rem;
+  }
 }

src/modules/story/components/animationController/AnimationController.tsx

@@ -13,6 +13,8 @@ import {
 import { useNavigate } from "react-router-dom";
 import { APP_PATHS } from "../../../app/app.paths";
 import { SceneSelect } from "../sceneSelect";
+import { LanguageSelect } from "../languageSelect";
+import LanguagesJson from "../../data/languages.json";
 
 interface IAnimationControllerProps {
   scenesData: IScene[];
@@ -64,6 +66,11 @@ export const AnimationController: FC<IAnimationControllerProps> = ({
     navigate(APP_PATHS.overview);
   };
 
+  const onLanguageChange = (languageId: ELanguage) => {
+    setLanguage(languageId);
+    setIspaused(false);
+  };
+
   useEffect(() => {
     if (scenesData.length !== 0) {
       setLanguage(ELanguage.NL);
@@ -111,6 +118,18 @@ export const AnimationController: FC<IAnimationControllerProps> = ({
                 className={cxBind("btn", "btn-pause")}
               />
 
+              <LanguageSelect
+                currentLanguageId={language}
+                languages={LanguagesJson.map((language) => ({
+                  ...language,
+                  id: language.id as ELanguage,
+                }))}
+                onSelectLanguage={(languageId: ELanguage) =>
+                  onLanguageChange(languageId)
+                }
+                className={cxBind("btn", "btn-language")}
+              />
+
               {inTransition && currentTransition && (
                 <LottieAnimation
                   animationData={currentTransition.animationData}

src/modules/story/components/baseCarousel/BaseCarousel.module.scss

@@ -0,0 +1,3 @@
+.carousel-container {
+  width: 100%;
+}

src/modules/story/components/baseCarousel/BaseCarousel.tsx

@@ -0,0 +1,86 @@
+import React, { FC } from "react";
+import Carousel from "react-multi-carousel";
+import cx from "classnames/bind";
+import styles from "./BaseCarousel.module.scss";
+
+const cxBind = cx.bind(styles);
+
+interface IBaseCarouselProps {
+  children: React.ReactNode;
+  className?: string;
+  onSlideChange: (currentItemIndex: number) => void;
+  dataLength: number;
+}
+
+export const BaseCarousel: FC<IBaseCarouselProps> = ({
+  children,
+  className,
+  onSlideChange,
+  dataLength,
+}) => {
+  const responsive = {
+    superLargeDesktop: {
+      breakpoint: { max: 4000, min: 3000 },
+      items: 1,
+    },
+    desktop: {
+      breakpoint: { max: 3000, min: 1024 },
+      items: 1,
+    },
+    tablet: {
+      breakpoint: { max: 1024, min: 464 },
+      items: 1,
+    },
+    mobile: {
+      breakpoint: { max: 464, min: 0 },
+      items: 1,
+    },
+  };
+
+  const beforeSlideChange = (prev: number, curr: number) => {
+    const itemIndex = (
+      document.querySelector(".react-multi-carousel-item--active")
+        ?.firstChild as HTMLElement
+    ).dataset.index;
+
+    console.log(document.querySelector(".react-multi-carousel-item--active"));
+
+    if (prev > curr) {
+      Number(itemIndex) === dataLength - 1
+        ? onSlideChange(0)
+        : onSlideChange(Number(itemIndex) + 1);
+    } else {
+      Number(itemIndex) === 0
+        ? onSlideChange(dataLength - 1)
+        : onSlideChange(Number(itemIndex) - 1);
+    }
+  };
+
+  return (
+    <Carousel
+      autoPlaySpeed={3000}
+      infinite
+      centerMode
+      containerClass={cxBind("carousel-container", className)}
+      focusOnSelect={true}
+      itemClass={cxBind("carousel-item")}
+      keyBoardControl
+      minimumTouchDrag={80}
+      pauseOnHover
+      responsive={responsive}
+      rewindWithAnimation={true}
+      shouldResetAutoplay
+      showDots={false}
+      slidesToSlide={1}
+      draggable
+      swipeable
+      transitionDuration={1000}
+      //   afterChange={() => onSlideChange && onSlideChange()}
+      beforeChange={(previousSlide, { currentSlide }) =>
+        beforeSlideChange(previousSlide, currentSlide)
+      }
+    >
+      {children}
+    </Carousel>
+  );
+};

src/modules/story/components/baseCarousel/index.ts

@@ -0,0 +1 @@
+export * from "./BaseCarousel";

src/modules/story/components/index.ts

@@ -1,3 +1,6 @@
 export * from "./lottieAnimation";
 export * from "./animationController";
 export * from "./sceneSelect";
+export * from "./modal";
+export * from "./baseCarousel";
+export * from "./languageSelect";

src/modules/story/components/languageSelect/LanguageSelect.module.scss

@@ -0,0 +1,53 @@
+@import "../../../../styles/globals";
+
+.language-select-container {
+  display: flex;
+  justify-content: center;
+}
+
+.modal {
+  justify-content: flex-end;
+}
+
+.language-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  img {
+    height: 30rem;
+  }
+}
+
+.icon-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 4rem;
+  height: 4rem;
+}
+
+.carousel-container {
+  position: absolute;
+  bottom: -4rem;
+}
+
+.image-container {
+  position: absolute;
+  bottom: -4rem;
+  right: -0.5rem;
+  height: 8rem;
+  transform: rotate(-10deg);
+
+  img {
+    height: 100%;
+  }
+}
+
+.icon-container {
+  position: absolute;
+  left: -2rem;
+  top: 4rem;
+  cursor: pointer;
+}

src/modules/story/components/languageSelect/LanguageSelect.tsx

@@ -0,0 +1,105 @@
+import { FC, useEffect, useState } from "react";
+import {
+  IconButton,
+  PinkButtonIcon,
+  PlayBubbleIcon,
+} from "../../../shared/components";
+import { BaseCarousel } from "../baseCarousel";
+import { Modal } from "../modal";
+import cx from "classnames/bind";
+import styles from "./LanguageSelect.module.scss";
+import { ELanguage, ILanguage } from "../../types";
+
+const cxBind = cx.bind(styles);
+
+interface ILanguageSelectProps {
+  languages: ILanguage[];
+  onSelectLanguage: (languageId: ELanguage) => void;
+  currentLanguageId: ELanguage;
+  className?: string;
+}
+
+export const LanguageSelect: FC<ILanguageSelectProps> = ({
+  currentLanguageId,
+  languages,
+  onSelectLanguage,
+  className,
+}) => {
+  const [popupIsOpen, setPopupIsOpen] = useState<boolean>(false);
+  const currenLanguage = languages.find(
+    (language) => language.id === currentLanguageId
+  );
+  const [currentLanguageIndex, setCurrentLanguageIndex] = useState<number>(0);
+
+  const onSelect = (lngId: ELanguage) => {
+    onSelectLanguage(lngId);
+    setPopupIsOpen(false);
+  };
+
+  useEffect(() => {
+    console.log(currentLanguageIndex);
+  }, [currentLanguageIndex]);
+
+  return (
+    <>
+      <div
+        className={cxBind("language-select-container", className)}
+        onClick={() => setPopupIsOpen(!popupIsOpen)}
+      >
+        <IconButton icon={<PinkButtonIcon />} />
+
+        <div className={cxBind("image-container")}>
+          <img src={currenLanguage?.asset} alt={currenLanguage?.name} />
+        </div>
+      </div>
+
+      <Modal
+        isOpen={popupIsOpen}
+        onClose={() => setPopupIsOpen(false)}
+        className={cxBind("modal")}
+      >
+        <BaseCarousel
+          className={cxBind("carousel-container")}
+          onSlideChange={setCurrentLanguageIndex}
+          dataLength={languages.length}
+        >
+          {languages.map((language, index) => (
+            <div
+              className={cxBind("language-container")}
+              key={`language-option-${index}`}
+              data-index={index}
+            >
+              <h2>{language.name}</h2>
+              <img src={language.asset} alt={language.name} />
+
+              {index === currentLanguageIndex && (
+                <div
+                  className={`react-multi-carousel-item-button ${cxBind(
+                    "icon-container"
+                  )}`}
+                  onClick={() => onSelect(language.id)}
+                >
+                  <PlayBubbleIcon />
+                </div>
+              )}
+            </div>
+          ))}
+          {/* {scenes.map((scene, index) => (
+            <div className={cxBind("scene")} key={index}>
+              <div
+                className={cxBind("icon-container")}
+                onClick={() => onSelect(index)}
+              ></div>
+
+              <div className={cxBind("scene-thumbnail-container")}>
+                <img src={scene.thumbnail} alt={scene.name} />
+              </div>
+
+              <div className={cxBind("scene-index")}>{index + 1}</div>
+            </div>
+          ))} */}
+        </BaseCarousel>
+      </Modal>
+    </>
+  );
+};

src/modules/story/components/languageSelect/index.ts

@@ -0,0 +1 @@
+export * from "./LanguageSelect";

src/modules/story/components/lottieAnimation/LottieAnimation.module.scss

@@ -0,0 +1,12 @@
+.animation {
+  z-index: z-index;
+  position: "absolute";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  svg {
+    max-width: 100%;
+  }
+}

src/modules/story/components/lottieAnimation/LottieAnimation.tsx

@@ -2,6 +2,10 @@ import Lottie from "lottie-react";
 import { FC, useEffect, useRef } from "react";
 import { ILottieAnimationProps } from "./LottieAnimation.props";
 import { useAudio } from "../../hooks";
+import styles from "./LottieAnimation.module.scss";
+import cx from "classnames/bind";
+
+const cxBind = cx.bind(styles);
 
 export const LottieAnimation: FC<ILottieAnimationProps> = ({
   animationData,
@@ -117,6 +121,7 @@ export const LottieAnimation: FC<ILottieAnimationProps> = ({
       assetsPath={`assets/${animationAssetsPath}/images/`}
       lottieRef={animationRef}
       style={{ zIndex: zIndex, position: "absolute", top: 0, left: 0 }}
+      className={cxBind("animation")}
     />
   );
 };