85 lines
2.9 KiB
JavaScript
85 lines
2.9 KiB
JavaScript
import { useState, useEffect } from "react";
|
|
import styles from "./SplashComponent.module.scss";
|
|
import { StartUpProgressContainer } from "./start_up_progress_container/StartUpProgressContainer/";
|
|
import { DownloadModelsContainer } from "./download_models_container/DownloadModelsContainer/";
|
|
import MegaphoneSvg from "@images/megaphone.svg?react";
|
|
import XMarkSvg from "@images/cancel.svg?react";
|
|
import { useWindow } from "@logics_common";
|
|
import clsx from "clsx";
|
|
|
|
export const SplashComponent = () => {
|
|
return (
|
|
<div className={styles.container}>
|
|
<StartUpProgressContainer />
|
|
<DownloadModelsContainer />
|
|
<AnnouncementsContainer />
|
|
<CloseButtonContainer />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const SHOW_MEGAPHONE_TIME = 500;
|
|
|
|
const AnnouncementsContainer = () => {
|
|
const labels = ["Check the Latest Status", "最新の状況を確認"];
|
|
const [is_shown, setIsShown] = useState(0);
|
|
const [currentLabelIndex, setCurrentLabelIndex] = useState(0);
|
|
const [is_labels_active, setIsLabelsActive] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const showTimeout = setTimeout(() => {
|
|
setIsShown(true);
|
|
}, SHOW_MEGAPHONE_TIME);
|
|
|
|
const labelsTimeout = setTimeout(() => {
|
|
setIsLabelsActive(true);
|
|
}, SHOW_MEGAPHONE_TIME + 15000);
|
|
|
|
let labelInterval;
|
|
if (is_labels_active) {
|
|
labelInterval = setInterval(() => {
|
|
setCurrentLabelIndex((prevIndex) => (prevIndex + 1) % labels.length);
|
|
}, 4000);
|
|
}
|
|
|
|
return () => {
|
|
clearTimeout(showTimeout);
|
|
clearTimeout(labelsTimeout);
|
|
if (labelInterval) clearInterval(labelInterval);
|
|
};
|
|
}, [is_labels_active, labels.length]);
|
|
|
|
|
|
return (
|
|
<a
|
|
className={clsx(styles.announcements_button_wrapper, {
|
|
[styles.is_shown]: is_shown,
|
|
[styles.is_labels_active]: is_labels_active,
|
|
})}
|
|
href="https://docs.google.com/spreadsheets/d/1_L5i-1U6PB1dnaPPTE_5uKMfqOpkLziPyRkiMLi4mqU/edit?usp=sharing"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<button className={styles.announcements_button}>
|
|
<MegaphoneSvg className={styles.announcements_link_svg} />
|
|
<p className={styles.announcements_label}>
|
|
{labels[currentLabelIndex]}
|
|
</p>
|
|
</button>
|
|
</a>
|
|
);
|
|
};
|
|
|
|
|
|
// Duplicated
|
|
const CloseButtonContainer = () => {
|
|
const { asyncCloseApp } = useWindow();
|
|
|
|
return (
|
|
<button className={styles.close_button_wrapper} onClick={asyncCloseApp}>
|
|
<div className={styles.close_button}>
|
|
<XMarkSvg className={styles.x_mark_svg}/>
|
|
</div>
|
|
</button>
|
|
);
|
|
}; |