+
+
+
{t("settingPage.appearanceSettings.themeOption")}
+
+
+ {getThemeOptionLabel(theme)}
+
+
+ -
+
+
+
);
};
diff --git a/src/components/setting_page/Settings.jsx b/src/components/setting_page/Settings.jsx
index 31c75dfc2..07049c72f 100644
--- a/src/components/setting_page/Settings.jsx
+++ b/src/components/setting_page/Settings.jsx
@@ -1,6 +1,6 @@
import { useEffect, useState } from "react";
-import { Col, Row } from "react-bootstrap";
import { useTranslation } from "react-i18next";
+import Container from "../../ui/Container";
import { isElectron } from "../../utils/isElectron";
import TopNavBar from "../general/TopNavBar";
import AppearanceSettings from "./Appearance";
@@ -38,9 +38,9 @@ const SettingsPage = () => {
return (
<>
-
-
-
+
+
+
{currentPage === "settings" && (
<>
{t("settingPage.heading")}
@@ -79,9 +79,9 @@ const SettingsPage = () => {
)}
{currentPage === "video-download" && }
-
-
-
+
+
);
};
diff --git a/src/components/sound_page/PracticeSound.jsx b/src/components/sound_page/PracticeSound.jsx
index 82e4d53a0..d4ec169e0 100644
--- a/src/components/sound_page/PracticeSound.jsx
+++ b/src/components/sound_page/PracticeSound.jsx
@@ -1,39 +1,36 @@
import he from "he";
import { useCallback, useEffect, useState } from "react";
-import { Alert, Button, Card, Col, Modal, Ratio, Row } from "react-bootstrap";
-import { ArrowLeftCircle, RecordCircleFill } from "react-bootstrap-icons";
+import { BsArrowLeftCircle, BsRecordCircleFill } from "react-icons/bs";
+import { IoInformationCircleOutline } from "react-icons/io5";
+import { MdOutlineOndemandVideo, MdKeyboardVoice, MdChecklist } from "react-icons/md";
+
import { Trans, useTranslation } from "react-i18next";
-import Skeleton from "react-loading-skeleton";
-import "react-loading-skeleton/dist/skeleton.css";
import { checkRecordingExists } from "../../utils/databaseOperations";
import { isElectron } from "../../utils/isElectron";
import LoadingOverlay from "../general/LoadingOverlay";
-import ToastNotification from "../general/ToastNotification";
import ReviewCard from "./ReviewCard";
import SoundPracticeCard from "./SoundPracticeCard";
-import { usePlaybackFunction } from "./usePlaybackFunction";
-import { useRecordingFunction } from "./useRecordingFunction";
-import { useSoundVideoMapping } from "./useSoundVideoMapping";
+import { usePlaybackFunction } from "./hooks/usePlaybackFunction";
+import { useRecordingFunction } from "./hooks/useRecordingFunction";
+import { useSoundVideoMapping } from "./hooks/useSoundVideoMapping";
+import { WatchVideoCard } from "./WatchVideoCard";
const PracticeSound = ({ sound, accent, onBack, index, soundsData }) => {
const { t } = useTranslation();
+ const [activeTab, setActiveTab] = useState("watchTab");
const accentKey = accent === "american" ? "a" : "b";
const accentData = sound[accentKey][0];
const findPhonemeDetails = useCallback(
(phoneme) => {
- let index = soundsData.consonants.findIndex((p) => p.phoneme === phoneme);
- if (index !== -1) {
- return { index, type: "consonant" };
- }
+ let phonemeIndex = soundsData.consonants.findIndex((p) => p.phoneme === phoneme);
+ if (phonemeIndex !== -1) return { index: phonemeIndex, type: "consonant" };
- index = soundsData.vowels_n_diphthongs.findIndex((p) => p.phoneme === phoneme);
- if (index !== -1) {
- return { index, type: "vowel" };
- }
+ phonemeIndex = soundsData.vowels_n_diphthongs.findIndex((p) => p.phoneme === phoneme);
+ if (phonemeIndex !== -1) return { index: phonemeIndex, type: "vowel" };
- return { index: -1, type: null }; // Not found
+ return { index: -1, type: null };
},
[soundsData.consonants, soundsData.vowels_n_diphthongs]
);
@@ -47,65 +44,25 @@ const PracticeSound = ({ sound, accent, onBack, index, soundsData }) => {
? `${import.meta.env.BASE_URL}images/ispeaker/sound_images/sounds_american.jpg`
: `${import.meta.env.BASE_URL}images/ispeaker/sound_images/sounds_british.jpg`;
- const [review, setReview] = useState(null);
-
- const handleReviewClick = (newReview) => {
- const { type } = findPhonemeDetails(sound.phoneme);
- const reviewKey = `${type}${index + 1}`; // Adding 1 to make it 1-indexed, matching "consonant1", "vowel1", etc.
-
- // Fetch current ispeaker data or initialize
- const ispeakerData = JSON.parse(localStorage.getItem("ispeaker") || "{}");
- // Ensure soundReview object exists for both accents
- ispeakerData.soundReview = ispeakerData.soundReview || {};
- ispeakerData.soundReview[accent] = ispeakerData.soundReview[accent] || {};
- // Save the new review under the correct accent and review key
- ispeakerData.soundReview[accent][reviewKey] = newReview;
-
- localStorage.setItem("ispeaker", JSON.stringify(ispeakerData));
- setReview(newReview);
- };
-
useEffect(() => {
window.scrollTo(0, 0);
- // Fetch reviews from localStorage
- const reviews = JSON.parse(localStorage.getItem("ispeaker") || "{}").soundReview || {};
- const { type } = findPhonemeDetails(sound.phoneme);
- const reviewKey = `${type}${index + 1}`;
-
- // Try to load the review for the current accent and phoneme
- const soundReview = reviews[accent] ? reviews[accent][reviewKey] : null;
- if (soundReview) {
- setReview(soundReview);
- }
- }, [sound.phoneme, findPhonemeDetails, accent, index]);
-
- const emojiStyle = (reviewType) => {
- const styles = {
- good: "text-success",
- neutral: "text-warning",
- bad: "text-danger",
- };
- return review === reviewType ? styles[reviewType] : "";
- };
+ }, []);
// Video modals
- const [show, setShow] = useState(false);
const [selectedVideoUrl, setSelectedVideoUrl] = useState("");
const [selectedVideoModalIndex, setSelectedVideoModalIndex] = useState("");
const handleShow = (videoIndex) => {
setSelectedVideoModalIndex(videoIndex);
setSelectedVideoUrl(videoUrls[videoIndex]);
- setShow(true);
setIframeLoadingStates((prevStates) => ({
...prevStates,
modalIframe: true, // Reset the modal iframe loading state to true when modal is opened
}));
+ document.getElementById("sound_video_modal").showModal();
};
- const handleClose = () => setShow(false);
-
// iframe loading
const [iframeLoadingStates, setIframeLoadingStates] = useState({
mainIframe: true,
@@ -132,17 +89,11 @@ const PracticeSound = ({ sound, accent, onBack, index, soundsData }) => {
const [currentAudioSource, setCurrentAudioSource] = useState(null); // For AudioContext source node
const [currentAudioElement, setCurrentAudioElement] = useState(null); // For Audio element (fallback)
- // Notification state
- const [showToast, setShowToast] = useState(false);
- const [toastMessage, setToastMessage] = useState("");
-
const { getRecordingKey, isRecordingPlayingActive, isRecordingAvailable, handleRecording } = useRecordingFunction(
activeRecordingCard,
setActiveRecordingCard,
setIsRecording,
setMediaRecorder,
- setToastMessage,
- setShowToast,
setRecordingAvailability,
isRecording,
mediaRecorder,
@@ -180,9 +131,7 @@ const PracticeSound = ({ sound, accent, onBack, index, soundsData }) => {
setCurrentAudioElement,
setIsRecordingPlaying,
setActivePlaybackCard,
- setPlayingRecordings,
- setToastMessage,
- setShowToast
+ setPlayingRecordings
);
useEffect(() => {
@@ -219,158 +168,156 @@ const PracticeSound = ({ sound, accent, onBack, index, soundsData }) => {
return (
<>
-
-
-
+
+
+
{t("sound_page.soundTop")} {he.decode(sound.phoneme)}
-
+
{t("accent.accentSettings")}:{" "}
{accent == "american" ? t("accent.accentAmerican") : t("accent.accentBritish")}
{accentData && (
<>
-
{t("sound_page.exampleWords")}
+
{t("sound_page.exampleWords")}
{["initial", "medial", "final"].map((position) => (
))}
)}
-
-
-
-
- {t("sound_page.watchCard")}
-
-
-
- {isElectron() &&
- videoUrl?.isLocal &&
- videoUrl.value.includes("http://localhost") ? (
-
- ) : (
+
+
+
+
+ {/* Menu */}
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
+ {/* Tab Content */}
+
+ {activeTab === "watchTab" && (
+
+ )}
+ {activeTab === "practieTab" && (
+
+ )}
+ {activeTab === "reviewTab" && (
+
+ )}
+
+
+
+
);
};
diff --git a/src/components/sound_page/ReviewCard.jsx b/src/components/sound_page/ReviewCard.jsx
index f9eb5cccb..e513c70af 100644
--- a/src/components/sound_page/ReviewCard.jsx
+++ b/src/components/sound_page/ReviewCard.jsx
@@ -1,33 +1,62 @@
import he from "he";
-import { Card, Col, Row } from "react-bootstrap";
-import { EmojiFrown, EmojiNeutral, EmojiSmile } from "react-bootstrap-icons";
import { useTranslation } from "react-i18next";
+import {
+ BsEmojiFrown,
+ BsEmojiFrownFill,
+ BsEmojiNeutral,
+ BsEmojiNeutralFill,
+ BsEmojiSmile,
+ BsEmojiSmileFill,
+} from "react-icons/bs";
+import { useReview } from "./hooks/useReview";
-const ReviewCard = ({ sound, handleReviewClick, emojiStyle }) => {
+const ReviewCard = ({ sound, accent, index, soundsData }) => {
const { t } = useTranslation();
+ // Integrate the useReview hook
+ const { review, handleReviewClick } = useReview(sound, accent, index, soundsData);
+
+ // Local function for emoji styling
+ const emojiStyle = (reviewType) => {
+ const styles = {
+ good: "text-success",
+ neutral: "text-warning",
+ bad: "text-error",
+ };
+ return review === reviewType ? styles[reviewType] : "";
+ };
+
return (
-
- {t("sound_page.reviewCard")}
-
- {t("sound_page.reviewInstructions", { phoneme: he.decode(sound.phoneme) })}
-
- handleReviewClick("good")}>
-
-
- handleReviewClick("neutral")}>
-
-
- handleReviewClick("bad")}>
-
-
-
-
-
+
+
+
+ {t("sound_page.reviewInstructions", { phoneme: he.decode(sound.phoneme) })}
+
+
+
+
);
};
diff --git a/src/components/sound_page/SoundList.jsx b/src/components/sound_page/SoundList.jsx
index 8b2c446ef..027523db8 100644
--- a/src/components/sound_page/SoundList.jsx
+++ b/src/components/sound_page/SoundList.jsx
@@ -1,7 +1,7 @@
import he from "he";
import { Suspense, lazy, useEffect, useState } from "react";
-import { Badge, Button, Card, Col, Row } from "react-bootstrap";
import { useTranslation } from "react-i18next";
+import Container from "../../ui/Container";
import AccentLocalStorage from "../../utils/AccentLocalStorage";
import { isElectron } from "../../utils/isElectron";
import AccentDropdown from "../general/AccentDropdown";
@@ -16,6 +16,7 @@ const SoundList = () => {
const [selectedSound, setSelectedSound] = useState(null);
const [loading, setLoading] = useState(true);
const [selectedAccent, setSelectedAccent] = AccentLocalStorage();
+ const [activeTab, setActiveTab] = useState("tab1");
const [soundsData, setSoundsData] = useState({
consonants: [],
@@ -58,24 +59,18 @@ const SoundList = () => {
};
const getBadgeColor = (sound, index) => {
- // Retrieve the entire data structure from localStorage
const ispeakerData = JSON.parse(localStorage.getItem("ispeaker") || "{}");
const accentReviews = ispeakerData.soundReview ? ispeakerData.soundReview[selectedAccent] || {} : {};
-
- // Generate the correct review key for this sound based on its index
const reviewKey = getReviewKey(sound, index);
- const review = accentReviews[reviewKey]; // Access the specific review by its key
+ const review = accentReviews[reviewKey];
- switch (review) {
- case "good":
- return "success";
- case "neutral":
- return "warning";
- case "bad":
- return "danger";
- default:
- return "secondary"; // No review found or the key does not exist
- }
+ const badgeColors = {
+ good: "badge-success",
+ neutral: "badge-warning",
+ bad: "badge-error",
+ };
+
+ return badgeColors[review] || null; // Return the Tailwind class or null
};
const getReviewText = (review) => {
@@ -139,94 +134,155 @@ const SoundList = () => {
return (
<>
-
{t("navigation.sounds")}
- {selectedSound ? (
-
}>
-
handleGoBack()}
- />
-
- ) : (
- <>
-
-
- {loading ? (
-
- ) : (
- <>
-
{t("sound_page.consonants")}
-
- {soundsData.consonants
- .filter(
- (sound) =>
- (selectedAccent === "british" && sound.b_s === "yes") ||
- (selectedAccent === "american" && sound.a_s === "yes")
- )
- .map((sound, index) => (
-
-
-
-
- {getReviewText(reviews[`${getReviewKey(sound, index)}`])}
-
- {he.decode(sound.phoneme)}
- {sound.example_word}
-
-
-
-
- ))}
-
-
- {t("sound_page.vowels_dipthongs")}
-
- {soundsData.vowels_n_diphthongs
- .filter(
- (sound) =>
- (selectedAccent === "british" && sound.b_s === "yes") ||
- (selectedAccent === "american" && sound.a_s === "yes")
- )
- .map((sound, index) => (
-
-
-
-
- {getReviewText(reviews[`${getReviewKey(sound, index)}`])}
-
- {he.decode(sound.phoneme)}
- {sound.example_word}
-
-
-
-
- ))}
-
-
- )}
-
-
- )}
+
+ {t("navigation.sounds")}
+ {selectedSound ? (
+ }>
+ handleGoBack()}
+ />
+
+ ) : (
+ <>
+
+
+ {loading ? (
+
+ ) : (
+ <>
+
+ {/* Menu */}
+
+ -
+
+
+ -
+
+
+
+
+ {/* Tab Content */}
+
+ {activeTab === "tab1" && (
+ <>
+
+ {soundsData.consonants
+ .filter(
+ (sound) =>
+ (selectedAccent === "british" && sound.b_s === "yes") ||
+ (selectedAccent === "american" && sound.a_s === "yes")
+ )
+ .map((sound, index) => (
+
+ {getBadgeColor(sound, index) && (
+
+ {getReviewText(
+ reviews[`${getReviewKey(sound, index)}`]
+ )}
+
+ )}
+
+
+
+ {he.decode(sound.phoneme)}{" "}
+
+
{sound.example_word}
+
+
+
+
+
+
+ ))}
+
+
+ )}
+ {activeTab === "tab2" && (
+ <>
+
+ {soundsData.vowels_n_diphthongs
+ .filter(
+ (sound) =>
+ (selectedAccent === "british" && sound.b_s === "yes") ||
+ (selectedAccent === "american" && sound.a_s === "yes")
+ )
+ .map((sound, index) => (
+
+ {getBadgeColor(sound, index) && (
+
+ {getReviewText(
+ reviews[`${getReviewKey(sound, index)}`]
+ )}
+
+ )}
+
+
+
+ {he.decode(sound.phoneme)}
+
+
{sound.example_word}
+
+
+
+
+
+
+ ))}
+
+
+ )}
+
+
+ )}
+
-
-
-
-
-
-
-
- handleRecording(id)}
- />
- (isRecordingAvailable(id) ? handlePlayRecording(id) : null)}
- disabled={isRecordingPlaying && activePlaybackCard !== id}
- />
-
-
-
-
-);
+}) => {
+ const isRecordingDisabled = activeRecordingCard !== null || isRecordingPlaying;
+ const isPlayingDisabled =
+ (isRecordingPlaying && activePlaybackCard !== id) || !isRecordingAvailable(id) || activeRecordingCard !== null;
+
+ const recordIconClasses = `me-2${
+ activeRecordingCard === id ? " text-success" : isRecordingDisabled ? " pointer-events-none opacity-25" : ""
+ }`;
+ const playIconClasses = `me-2${
+ isRecordingPlaying && activePlaybackCard !== id
+ ? " pointer-events-none opacity-25"
+ : isRecordingPlayingActive(id)
+ ? " text-success"
+ : isPlayingDisabled
+ ? " pointer-events-none opacity-25"
+ : ""
+ }`;
+
+ return (
+
+
+
+
+
+
+
+ handleRecording(id)}
+ />
+ (isRecordingAvailable(id) ? handlePlayRecording(id) : null)}
+ disabled={isRecordingPlaying && activePlaybackCard !== id}
+ />
+
+
+
+
+
+
+
+
+ {isElectron() && videoUrl?.isLocal && videoUrl.value.includes("http://localhost") ? (
+
+ ) : (
+ <>
+ {iframeLoadingStates.mainIframe &&
}
+
+
+ )}
+
+
+ {isElectron() && !videoUrl?.value.includes("http://localhost") ? (
+
+
+ {t("alert.alertOnlineVideo")}
+
+ ) : (
+ ""
+ )}
+
+
+ {children}
+
+ );
+};
+
+Container.propTypes = {
+ children: PropTypes.node.isRequired,
+ className: PropTypes.string,
+};
+
+export default Container;
diff --git a/src/utils/ThemeContext/ThemeProvider.jsx b/src/utils/ThemeContext/ThemeProvider.jsx
new file mode 100644
index 000000000..890f11b89
--- /dev/null
+++ b/src/utils/ThemeContext/ThemeProvider.jsx
@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import ThemeProviderContext from "./ThemeProviderContext";
+
+export function ThemeProvider({ children, defaultTheme = "auto", storageKey = "ispeakerreact-ui-theme" }) {
+ const [theme, setTheme] = useState(() => {
+ return localStorage.getItem(storageKey) || defaultTheme;
+ });
+
+ useEffect(() => {
+ const root = window.document.documentElement;
+
+ // Function to update the theme
+ const updateTheme = () => {
+ const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+
+ switch (theme) {
+ case "auto":
+ root.setAttribute("data-theme", systemTheme === "dark" ? "dim" : systemTheme);
+ break;
+ case "dark":
+ root.setAttribute("data-theme", "dim");
+ break;
+ default:
+ root.setAttribute("data-theme", theme);
+ break;
+ }
+ };
+
+ // Initial theme setup
+ updateTheme();
+
+ // Add event listener for system theme changes
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+ const handleChange = () => {
+ if (theme === "auto") {
+ updateTheme();
+ }
+ };
+
+ mediaQuery.addEventListener("change", handleChange);
+
+ // Cleanup event listener
+ return () => {
+ mediaQuery.removeEventListener("change", handleChange);
+ };
+ }, [theme]);
+
+ const value = {
+ theme,
+ setTheme: (newTheme) => {
+ localStorage.setItem(storageKey, newTheme);
+ setTheme(newTheme);
+ },
+ };
+
+ return {children};
+}
diff --git a/src/utils/ThemeContext/ThemeProviderContext.jsx b/src/utils/ThemeContext/ThemeProviderContext.jsx
new file mode 100644
index 000000000..1b8d92714
--- /dev/null
+++ b/src/utils/ThemeContext/ThemeProviderContext.jsx
@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+const ThemeProviderContext = createContext({
+ theme: "auto",
+ setTheme: () => null,
+});
+
+export default ThemeProviderContext;
diff --git a/src/utils/ThemeContext/useTheme.jsx b/src/utils/ThemeContext/useTheme.jsx
new file mode 100644
index 000000000..f2e172902
--- /dev/null
+++ b/src/utils/ThemeContext/useTheme.jsx
@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import ThemeProviderContext from "./ThemeProviderContext";
+
+export const useTheme = () => {
+ const context = useContext(ThemeProviderContext);
+
+ if (!context) {
+ throw new Error("useTheme must be used within a ThemeProvider");
+ }
+
+ return context;
+};
diff --git a/src/utils/ThemeProvider.jsx b/src/utils/ThemeProvider.jsx
deleted file mode 100644
index bdb44b826..000000000
--- a/src/utils/ThemeProvider.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { createContext, useEffect, useState } from "react";
-
-export const ThemeContext = createContext();
-
-export const ThemeProvider = ({ children }) => {
- const [theme, setTheme] = useState(localStorage.getItem("theme") || "auto");
-
- // Initialize showToggleButton from localStorage or default to true
- const [showToggleButton, setShowToggleButton] = useState(() => {
- const savedSettings = JSON.parse(localStorage.getItem("ispeaker"));
- return savedSettings && savedSettings.showToggleButton !== undefined ? savedSettings.showToggleButton : true; // Default to true if not found
- });
-
- // Effect to apply the theme and save it to localStorage
- useEffect(() => {
- const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
- const applyTheme = (themeValue) => {
- const newTheme = themeValue === "auto" ? (mediaQuery.matches ? "dark" : "light") : themeValue;
- document.documentElement.setAttribute("data-bs-theme", newTheme);
- localStorage.setItem("theme", themeValue);
- };
-
- // Initial theme apply
- applyTheme(theme);
-
- // Listener for system theme changes
- const handleChange = () => {
- if (theme === "auto") {
- applyTheme("auto");
- }
- };
- mediaQuery.addEventListener("change", handleChange);
-
- // Cleanup
- return () => mediaQuery.removeEventListener("change", handleChange);
- }, [theme]);
-
- // Effect to save showToggleButton to localStorage
- useEffect(() => {
- const savedSettings = JSON.parse(localStorage.getItem("ispeaker")) || {};
- savedSettings.showToggleButton = showToggleButton;
- localStorage.setItem("ispeaker", JSON.stringify(savedSettings));
- }, [showToggleButton]);
-
- return (
-
- {children}
-
- );
-};
diff --git a/src/utils/ThemeSwitcher.jsx b/src/utils/ThemeSwitcher.jsx
deleted file mode 100644
index 32ca535de..000000000
--- a/src/utils/ThemeSwitcher.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Dropdown } from "react-bootstrap";
-import { CircleHalf, MoonStarsFill, SunFill } from "react-bootstrap-icons";
-import { useContext } from "react";
-import { ThemeContext } from "../utils/ThemeProvider";
-
-const ThemeSwitcher = () => {
- const { theme, setTheme, showToggleButton } = useContext(ThemeContext);
-
- const themeItems = [
- { name: "Light", value: "light", icon: },
- { name: "Dark", value: "dark", icon: },
- { name: "Auto", value: "auto", icon: },
- ];
-
- return (
- <>
-
-
- {themeItems.find((item) => item.value === theme).icon}
- Toggle theme
-
-
-
- {themeItems.map((item) => (
- setTheme(item.value)}
- active={theme === item.value}>
- {item.icon}
- {item.name}
-
- ))}
-
-
-
- );
-};
-
-export default ThemeSwitcher;
diff --git a/src/utils/phonemeUtils.jsx b/src/utils/phonemeUtils.jsx
new file mode 100644
index 000000000..a61a27863
--- /dev/null
+++ b/src/utils/phonemeUtils.jsx
@@ -0,0 +1,9 @@
+export const findPhonemeDetails = (phoneme, soundsData) => {
+ let phonemeIndex = soundsData.consonants.findIndex((p) => p.phoneme === phoneme);
+ if (phonemeIndex !== -1) return { index: phonemeIndex, type: "consonant" };
+
+ phonemeIndex = soundsData.vowels_n_diphthongs.findIndex((p) => p.phoneme === phoneme);
+ if (phonemeIndex !== -1) return { index: phonemeIndex, type: "vowel" };
+
+ return { index: -1, type: null }; // Not found
+};
diff --git a/src/utils/sonnerCustomToast.jsx b/src/utils/sonnerCustomToast.jsx
new file mode 100644
index 000000000..464b897d3
--- /dev/null
+++ b/src/utils/sonnerCustomToast.jsx
@@ -0,0 +1,29 @@
+import { IoAlertCircleOutline, IoCheckmarkCircleOutline, IoWarningOutline } from "react-icons/io5";
+import { toast } from "sonner";
+
+export const sonnerSuccessToast = (message) => {
+ toast.custom(() => (
+
+
+ {message}
+
+ ));
+};
+
+export const sonnerWarningToast = (message) => {
+ toast.custom(() => (
+
+
+ {message}
+
+ ));
+};
+
+export const sonnerErrorToast = (message) => {
+ toast.custom(() => (
+
+
+ {message}
+
+ ));
+};
diff --git a/src/utils/useTheme.jsx b/src/utils/useTheme.jsx
deleted file mode 100644
index 37b675644..000000000
--- a/src/utils/useTheme.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import { useContext } from "react";
-import { ThemeContext } from "./ThemeProvider";
-
-export const useTheme = () => useContext(ThemeContext);
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 000000000..11cde2119
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,33 @@
+/** @type {import('tailwindcss').Config} */
+import typography from "@tailwindcss/typography";
+import daisyui from "daisyui";
+
+export default {
+ content: ["./index.html", "./src/**/*.{html,js,jsx}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [typography, daisyui],
+ daisyui: {
+ themes: [
+ {
+ light: {
+ "color-scheme": "light",
+ primary: "oklch(64.23% 0.1467 133.01)",
+ secondary: "oklch(83.66% 0.1165 66.29)",
+ accent: "oklch(85.39% 0.201 100.73)",
+ neutral: "oklch(30.98% 0.075 108.6)",
+ "base-100": "oklch(98.71% 0.02 123.72)",
+ info: "oklch(86.19% 0.047 224.14)",
+ success: "oklch(52.73% 0.1371 150.07)",
+ "success-content": "white",
+ warning: "oklch(78.39% 0.1719 68.09)",
+ error: "oklch(50.6% 0.1927 27.7)",
+ },
+ },
+ "dim",
+ ],
+ darkTheme: "dim",
+ },
+ darkMode: ["selector", '[data-theme="dim"]'],
+};
From 85f4179320491b5fc4b63430e1595770b5dc7b74 Mon Sep 17 00:00:00 2001
From: yell0wsuit <5692900+yell0wsuit@users.noreply.github.com>
Date: Tue, 10 Dec 2024 10:42:52 +0700
Subject: [PATCH 02/95] Update packages
---
package-lock.json | 36 ++++++++++++++++++------------------
package.json | 8 ++++----
2 files changed, 22 insertions(+), 22 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 208f6f569..bd7de6896 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,7 @@
"express": "^4.21.2",
"he": "^1.2.0",
"i18next": "^24.0.5",
- "i18next-browser-languagedetector": "^8.0.1",
+ "i18next-browser-languagedetector": "^8.0.2",
"i18next-http-backend": "^3.0.1",
"lodash": "^4.17.21",
"masonry-layout": "^4.2.2",
@@ -30,7 +30,7 @@
"react-bootstrap-icons": "^1.11.5",
"react-dom": "^19.0.0",
"react-flip-toolkit": "^7.2.4",
- "react-i18next": "^15.1.3",
+ "react-i18next": "^15.1.4",
"react-icons": "^5.4.0",
"react-loading-skeleton": "^3.5.0",
"react-router-dom": "^7.0.2",
@@ -49,12 +49,12 @@
"@eslint/js": "^9.16.0",
"@tailwindcss/typography": "^0.5.15",
"@types/react": "^19.0.1",
- "@types/react-dom": "^19.0.1",
+ "@types/react-dom": "^19.0.2",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"concurrently": "^9.1.0",
"cross-env": "^7.0.3",
- "daisyui": "^4.12.14",
+ "daisyui": "^4.12.20",
"electron": "^33.2.1",
"eslint": "^9.16.0",
"eslint-plugin-react": "^7.37.2",
@@ -3331,12 +3331,12 @@
}
},
"node_modules/@types/react-dom": {
- "version": "19.0.1",
- "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.1.tgz",
- "integrity": "sha512-hljHij7MpWPKF6u5vojuyfV0YA4YURsQG7KT6SzV0Zs2BXAtgdTxG6A229Ub/xiWV4w/7JL8fi6aAyjshH4meA==",
+ "version": "19.0.2",
+ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.2.tgz",
+ "integrity": "sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==",
"dev": true,
- "dependencies": {
- "@types/react": "*"
+ "peerDependencies": {
+ "@types/react": "^19.0.0"
}
},
"node_modules/@types/react-transition-group": {
@@ -4745,9 +4745,9 @@
}
},
"node_modules/daisyui": {
- "version": "4.12.14",
- "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.14.tgz",
- "integrity": "sha512-hA27cdBasdwd4/iEjn+aidoCrRroDuo3G5W9NDKaVCJI437Mm/3eSL/2u7MkZ0pt8a+TrYF3aT2pFVemTS3how==",
+ "version": "4.12.20",
+ "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.20.tgz",
+ "integrity": "sha512-uHr3SQsd2yTjRdVuswTiqGFvZTxX0sGSBRa8JJdbKgmZCk/kRFh4B7Z2jg9vLIdwsHTHPyPgCkZadQo1ce0tAw==",
"dev": true,
"dependencies": {
"css-selector-tokenizer": "^0.8",
@@ -7288,9 +7288,9 @@
}
},
"node_modules/i18next-browser-languagedetector": {
- "version": "8.0.1",
- "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.1.tgz",
- "integrity": "sha512-z9ZuWA7qxbww+cPtdJTgV0O2H9+qlLpQnb37RpnwfsWnUmrO+q92gbVKVtfBL7jRvxfmVMOUKxKGg6VBqO49Pg==",
+ "version": "8.0.2",
+ "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.2.tgz",
+ "integrity": "sha512-shBvPmnIyZeD2VU5jVGIOWP7u9qNG3Lj7mpaiPFpbJ3LVfHZJvVzKR4v1Cb91wAOFpNw442N+LGPzHOHsten2g==",
"dependencies": {
"@babel/runtime": "^7.23.2"
}
@@ -10139,9 +10139,9 @@
}
},
"node_modules/react-i18next": {
- "version": "15.1.3",
- "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.1.3.tgz",
- "integrity": "sha512-J11oA30FbM3NZegUZjn8ySK903z6PLBz/ZuBYyT1JMR0QPrW6PFXvl1WoUhortdGi9dM0m48/zJQlPskVZXgVw==",
+ "version": "15.1.4",
+ "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.1.4.tgz",
+ "integrity": "sha512-2tai71gmehbvl9ZIqPMqlCCkm/cbeV1G4STpmM3C8Uzo6T2l8jDvZxEVSsQKt8blP9X34iRFP/k1ROqG2296MQ==",
"dependencies": {
"@babel/runtime": "^7.25.0",
"html-parse-stringify": "^3.0.1"
diff --git a/package.json b/package.json
index aede82620..be9460570 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
"express": "^4.21.2",
"he": "^1.2.0",
"i18next": "^24.0.5",
- "i18next-browser-languagedetector": "^8.0.1",
+ "i18next-browser-languagedetector": "^8.0.2",
"i18next-http-backend": "^3.0.1",
"lodash": "^4.17.21",
"masonry-layout": "^4.2.2",
@@ -42,7 +42,7 @@
"react-bootstrap-icons": "^1.11.5",
"react-dom": "^19.0.0",
"react-flip-toolkit": "^7.2.4",
- "react-i18next": "^15.1.3",
+ "react-i18next": "^15.1.4",
"react-icons": "^5.4.0",
"react-loading-skeleton": "^3.5.0",
"react-router-dom": "^7.0.2",
@@ -61,12 +61,12 @@
"@eslint/js": "^9.16.0",
"@tailwindcss/typography": "^0.5.15",
"@types/react": "^19.0.1",
- "@types/react-dom": "^19.0.1",
+ "@types/react-dom": "^19.0.2",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"concurrently": "^9.1.0",
"cross-env": "^7.0.3",
- "daisyui": "^4.12.14",
+ "daisyui": "^4.12.20",
"electron": "^33.2.1",
"eslint": "^9.16.0",
"eslint-plugin-react": "^7.37.2",
From e289b28e0787e5e71b89de4d57370d1b0b2b0912 Mon Sep 17 00:00:00 2001
From: yell0wsuit <5692900+yell0wsuit@users.noreply.github.com>
Date: Tue, 10 Dec 2024 13:41:52 +0700
Subject: [PATCH 03/95] Update index.jsx
---
src/index.jsx | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/index.jsx b/src/index.jsx
index 7a03c277c..8448c9216 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,12 +1,12 @@
-import "./styles/index.css";
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
import "../i18n";
+import App from "./App";
+import "./styles/index.css";
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById("root"));
root.render(
-
+
-
+
);
From 86bac249c4264afcfdb75d4b60d4f3e4ef133a29 Mon Sep 17 00:00:00 2001
From: yell0wsuit <5692900+yell0wsuit@users.noreply.github.com>
Date: Tue, 10 Dec 2024 13:42:05 +0700
Subject: [PATCH 04/95] Add footer
---
src/components/Homepage.jsx | 40 +++-----------------
src/components/general/Footer.jsx | 44 ++++++++++++++++++++++
src/components/general/LogoLightOrDark.jsx | 37 ++++++++++++++++++
3 files changed, 86 insertions(+), 35 deletions(-)
create mode 100644 src/components/general/Footer.jsx
create mode 100644 src/components/general/LogoLightOrDark.jsx
diff --git a/src/components/Homepage.jsx b/src/components/Homepage.jsx
index 148e61445..0d4ac571f 100644
--- a/src/components/Homepage.jsx
+++ b/src/components/Homepage.jsx
@@ -1,42 +1,15 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import Container from "../ui/Container";
-import { useTheme } from "../utils/ThemeContext/useTheme";
+import Footer from "./general/Footer";
+import LogoLightOrDark from "./general/LogoLightOrDark";
import TopNavBar from "./general/TopNavBar";
function Homepage() {
const { t } = useTranslation();
const navigate = useNavigate();
- const { theme } = useTheme();
- const [currentTheme, setCurrentTheme] = useState(theme);
- const [isDarkMode, setIsDarkMode] = useState(false);
-
- useEffect(() => {
- const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-
- const updateTheme = () => {
- if (theme === "auto") {
- const systemPrefersDark = mediaQuery.matches;
- setCurrentTheme(systemPrefersDark ? "dark" : "light");
- setIsDarkMode(systemPrefersDark);
- } else {
- setCurrentTheme(theme);
- setIsDarkMode(theme === "dark");
- }
- };
-
- // Initial check and listener
- updateTheme();
- if (theme === "auto") {
- mediaQuery.addEventListener("change", updateTheme);
- }
-
- return () => {
- mediaQuery.removeEventListener("change", updateTheme);
- };
- }, [theme]);
const handleNavigate = (path) => {
navigate(path);
@@ -46,10 +19,6 @@ function Homepage() {
document.title = `${t("navigation.home")} | iSpeakerReact v${__APP_VERSION__}`;
}, [t]);
- const logoSrc = isDarkMode
- ? `${import.meta.env.BASE_URL}images/logos/ispeakerreact-no-background-darkmode.svg`
- : `${import.meta.env.BASE_URL}images/logos/ispeakerreact-no-background.svg`;
-
const cardsInfo = [
{
title: "Sounds",
@@ -93,7 +62,7 @@ function Homepage() {
-
+
iSpeakerReact
v{__APP_VERSION__}
@@ -122,6 +91,7 @@ function Homepage() {
))}
+
);
}
diff --git a/src/components/general/Footer.jsx b/src/components/general/Footer.jsx
new file mode 100644
index 000000000..302763166
--- /dev/null
+++ b/src/components/general/Footer.jsx
@@ -0,0 +1,44 @@
+import LogoLightOrDark from "./LogoLightOrDark";
+
+const Footer = () => {
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/src/components/general/LogoLightOrDark.jsx b/src/components/general/LogoLightOrDark.jsx
new file mode 100644
index 000000000..ef44fd4c0
--- /dev/null
+++ b/src/components/general/LogoLightOrDark.jsx
@@ -0,0 +1,37 @@
+import { useTheme } from "../../utils/ThemeContext/useTheme";
+import { useState, useEffect } from "react";
+
+const LogoLightOrDark = ({ width, height }) => {
+ const { theme } = useTheme();
+ const [isDarkMode, setIsDarkMode] = useState(false);
+
+ useEffect(() => {
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+ const updateTheme = () => {
+ const systemPrefersDark = mediaQuery.matches;
+ const newIsDarkMode = theme === "auto" ? systemPrefersDark : theme === "dark";
+
+ if (newIsDarkMode !== isDarkMode) {
+ setIsDarkMode(newIsDarkMode);
+ }
+ };
+
+ updateTheme();
+ if (theme === "auto") {
+ mediaQuery.addEventListener("change", updateTheme);
+ }
+
+ return () => {
+ mediaQuery.removeEventListener("change", updateTheme);
+ };
+ }, [theme]);
+
+ const logoSrc = isDarkMode
+ ? `${import.meta.env.BASE_URL}images/logos/ispeakerreact-no-background-darkmode.svg`
+ : `${import.meta.env.BASE_URL}images/logos/ispeakerreact-no-background.svg`;
+
+ return ;
+};
+
+export default LogoLightOrDark;
From c53e92e927e3c51ae087f7d92cc859dea1532932 Mon Sep 17 00:00:00 2001
From: yell0wsuit <5692900+yell0wsuit@users.noreply.github.com>
Date: Tue, 10 Dec 2024 13:42:27 +0700
Subject: [PATCH 05/95] Make the tab stick to top when scrolling
---
src/components/sound_page/PracticeSound.jsx | 55 +++++++++++----------
src/components/sound_page/SoundList.jsx | 46 +++++++++--------
2 files changed, 54 insertions(+), 47 deletions(-)
diff --git a/src/components/sound_page/PracticeSound.jsx b/src/components/sound_page/PracticeSound.jsx
index d4ec169e0..809ebe516 100644
--- a/src/components/sound_page/PracticeSound.jsx
+++ b/src/components/sound_page/PracticeSound.jsx
@@ -193,38 +193,39 @@ const PracticeSound = ({ sound, accent, onBack, index, soundsData }) => {
-
- {/* Menu */}
-
- -
-
-
- -
-
-
- -
-
-
-
+
+
+ {/* Menu */}
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
{/* Tab Content */}
-
+
{activeTab === "watchTab" && (
{
) : (
<>
-
- {/* Menu */}
-
- -
-
-
- -
-
-
-
+
+
+ {/* Menu */}
+
+ -
+
+
+ -
+
+
+
+
{/* Tab Content */}
From 8d256289259299996f6ca5dde879b3042860d034 Mon Sep 17 00:00:00 2001
From: yell0wsuit <5692900+yell0wsuit@users.noreply.github.com>
Date: Tue, 10 Dec 2024 13:42:39 +0700
Subject: [PATCH 06/95] Prevent overflow when iframe is loading
---
src/components/sound_page/WatchVideoCard.jsx | 72 ++++++++++----------
1 file changed, 37 insertions(+), 35 deletions(-)
diff --git a/src/components/sound_page/WatchVideoCard.jsx b/src/components/sound_page/WatchVideoCard.jsx
index 56c7380d3..3a232ea32 100644
--- a/src/components/sound_page/WatchVideoCard.jsx
+++ b/src/components/sound_page/WatchVideoCard.jsx
@@ -3,43 +3,45 @@ import { isElectron } from "../../utils/isElectron";
export const WatchVideoCard = ({ t, videoUrl, iframeLoadingStates, handleIframeLoad }) => {
return (
-
-
-
-
- {isElectron() && videoUrl?.isLocal && videoUrl.value.includes("http://localhost") ? (
-
- ) : (
- <>
- {iframeLoadingStates.mainIframe &&
}
-
-
- )}
+
+
+
+
+
+ {isElectron() && videoUrl?.isLocal && videoUrl.value.includes("http://localhost") ? (
+
+ ) : (
+ <>
+ {iframeLoadingStates.mainIframe &&
}
+
+
+ )}
+
+ {isElectron() && !videoUrl?.value.includes("http://localhost") ? (
+
+
+ {t("alert.alertOnlineVideo")}
+
+ ) : (
+ ""
+ )}
- {isElectron() && !videoUrl?.value.includes("http://localhost") ? (
-
-
- {t("alert.alertOnlineVideo")}
-
- ) : (
- ""
- )}
);
From 6ddaed4e26eebbef013e1ff3831c4c30955a1462 Mon Sep 17 00:00:00 2001
From: yell0wsuit <5692900+yell0wsuit@users.noreply.github.com>
Date: Tue, 10 Dec 2024 16:42:02 +0700
Subject: [PATCH 07/95] Minor tweak to tabs for Sounds
---
src/components/sound_page/PracticeSound.jsx | 18 ++++++++++++------
src/components/sound_page/SoundList.jsx | 4 ++--
2 files changed, 14 insertions(+), 8 deletions(-)
diff --git a/src/components/sound_page/PracticeSound.jsx b/src/components/sound_page/PracticeSound.jsx
index 809ebe516..48a737fdf 100644
--- a/src/components/sound_page/PracticeSound.jsx
+++ b/src/components/sound_page/PracticeSound.jsx
@@ -193,28 +193,34 @@ const PracticeSound = ({ sound, accent, onBack, index, soundsData }) => {
-
+
{/* Menu */}
-
-
-
@@ -223,7 +229,7 @@ const PracticeSound = ({ sound, accent, onBack, index, soundsData }) => {
{/* Tab Content */}
-
+
{activeTab === "watchTab" && (
{
-
@@ -384,7 +384,7 @@ const ExerciseDetailPage = ({ heading, id, title, accent, file, onBack }) => {
{timeIsUp || quizCompleted || onMatchFinished ? (
<>
-
+
{t("exercise_page.result.cardHeading")}
@@ -413,7 +413,7 @@ const ExerciseDetailPage = ({ heading, id, title, accent, file, onBack }) => {
{t("exercise_page.result.answerBottom")}
)}
-