71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import PersonalVideo from "@/components/pages/ABDesign/v1/pages/TrialPayment/components/PersonalVideo";
|
|
import styles from "./styles.module.css";
|
|
import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { Outlet, useLocation } from "react-router-dom";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { actions, selectors } from "@/store";
|
|
import routes from "@/routes";
|
|
|
|
export interface IOutletContext {
|
|
containerVideoRef: React.RefObject<HTMLDivElement>;
|
|
isVisibleElements: boolean;
|
|
setIsVisibleElements: (value: boolean) => void;
|
|
setShowElements: (value: () => void) => void;
|
|
}
|
|
|
|
function LayoutABDesignV1() {
|
|
const dispatch = useDispatch();
|
|
const location = useLocation();
|
|
const mainRef = useRef<HTMLDivElement>(null);
|
|
useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
|
|
location,
|
|
]);
|
|
const [isVisibleElements, setIsVisibleElements] = useState(false);
|
|
const { gender } = useSelector(selectors.selectQuestionnaire);
|
|
const containerVideoRef = useRef<HTMLDivElement>(null);
|
|
const showElementsTimer = useRef<NodeJS.Timeout>();
|
|
|
|
const showElements = useCallback(() => {
|
|
showElementsTimer.current = setTimeout(() => {
|
|
setIsVisibleElements(true);
|
|
}, 33_000);
|
|
}, [setIsVisibleElements]);
|
|
|
|
useEffect(() => {
|
|
if (location.pathname !== routes.client.trialChoiceVideoV1()) {
|
|
dispatch(actions.personalVideo.updateIsVideoPlaying(false));
|
|
}
|
|
}, [dispatch, location.pathname]);
|
|
|
|
return (
|
|
<>
|
|
<main className={`${styles.main} content`} ref={mainRef}>
|
|
{/* <Suspense fallback={<LoadingPage />}> */}
|
|
<PersonalVideo
|
|
gender={gender}
|
|
url={"/trial-choice.MOV"}
|
|
classNameContainer={
|
|
location.pathname !== routes.client.trialChoiceVideoV1()
|
|
? styles["personal-video"]
|
|
: ""
|
|
}
|
|
isVisibleControllers={isVisibleElements}
|
|
onVideoStart={showElements}
|
|
containerRef={containerVideoRef}
|
|
isAutoPlay={location.pathname === routes.client.trialChoiceVideoV1()}
|
|
/>
|
|
<Outlet
|
|
context={{
|
|
containerVideoRef,
|
|
isVisibleElements,
|
|
}}
|
|
/>
|
|
{/* </Suspense> */}
|
|
</main>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default LayoutABDesignV1;
|