Skip to content

Commit

Permalink
Merge pull request #76 from UjjwalSaini07/UjjwalSaini07/patch-37
Browse files Browse the repository at this point in the history 
Do major Change for Release 2
  • Loading branch information
@UjjwalSaini07
UjjwalSaini07 authored Sep 14, 2024
2 parents abd9a33 + 71bffb0 commit 431f011
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 181 deletions.
11 changes: 11 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"react-spring": "^9.7.4",
"react-tsparticles": "^2.12.2",
"slick-carousel": "^1.8.1",
"sweetalert2": "^11.14.0",
"tsparticles-engine": "^2.12.0",
"tsparticles-preset-snow": "^2.12.0",
"web-vitals": "^2.1.4"
Expand Down
205 changes: 29 additions & 176 deletions src/components/Homeque.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import icon from "./CodeAssets/Icon.svg";
import "../App.css";
import { Link, useLocation } from "react-router-dom";
import AudioRead from "./AudioRead";
import Swal from 'sweetalert2';

const Homeque = () => {
const [voices, setVoices] = useState([]);
Expand Down Expand Up @@ -99,7 +100,10 @@ const Homeque = () => {
setLoading(true);
reqHandler(chap, ver + 1);
} else {
alert("All chapters are finished");
Swal.fire({
text: "All Chapters are Finished",
icon: "warning",
});
}
};

Expand All @@ -109,18 +113,23 @@ const Homeque = () => {
setLoading(true);
reqHandler(chap, ver - 1);
} else {
alert("Already on the first chapter and verse");
Swal.fire({
text: "Already on the First Chapter and Verse",
icon: "warning",
});
}
};

useEffect(() => {
// Alert on component load
showVolumeAlert();
}, []);

const showVolumeAlert = () => {
const alertMessage = "Mind It : Double Click on the Volume Icon to Change the Respective Audio";
alert(alertMessage);
Swal.fire({
title: "Take a Look!!!",
text: "Double Click on the Volume Icon to Change the Respective Audio",
icon: "info",
});
};

useEffect(() => {
Expand All @@ -145,11 +154,11 @@ const Homeque = () => {
</div>
) : (
<>
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-8">
<h1 className="text-2xl sm:text-4xl md:text-5xl font-bold mb-8">
|| श्रीमद्भगवद्गीता {chapter + "." + verse} ||
</h1>
<img className="w-full max-w-xl mb-8" src={bgpic} alt="Background" />
<div className="flex justify-between items-center w-full max-w-xl mb-8">
<img className="w-full max-w-xl mb-6" src={bgpic} alt="Background" />
<div className="flex justify-between items-center w-full max-w-xl mb-0">
<Link
to={`/api/chapter/${chap}/shlok/${ver - 1}`}
className="transform rotate-180">
Expand All @@ -171,185 +180,29 @@ const Homeque = () => {
/>
</Link>
</div>
<div className="text-center w-full">
<h1 className="text-lg sm:text-xl md:text-2xl font-semibold mb-4">

<div className="text-center w-full sm:p-3">
<h1 className="text-lg sm:text-xl md:text-2xl font-semibold text-gray-900 mb-3 transition-all duration-300 ease-in-out">
<AudioRead slok={slok} speech={speech} />{textFormatter(slok)}
</h1>
<p className="text-base sm:text-lg mb-4">

<p className="text-lg sm:text-lg text-gray-800 font-semibold mb-3 transition-all transform">
<AudioRead slok={transliteration} speech={speech} />{textFormatter(transliteration)}
</p>
<p className="text-lg sm:text-xl md:text-2xl mb-4">

<p className="text-lg sm:text-lg md:text-2xl font-semibold text-gray-900 mb-3 transition-all duration-300 ease-in-out">
<AudioRead slok={slokHindi} speech={speech} />{textFormatter(slokHindi)}
</p>
<p className="text-base sm:text-lg"><AudioRead slok={slokEnglish} speech={speech} />{textFormatter(slokEnglish)}</p>

<p className="text-lg sm:text-lg text-gray-800 font-semibold transition-all transform">
<AudioRead slok={slokEnglish} speech={speech} />{textFormatter(slokEnglish)}
</p>
</div>

</>
)}
</div>
);
};

export default Homeque;

// Todo: Initial Code - Only for Emergency
// import React, { useState, useEffect, useRef } from "react";
// import bgpic from "./Homebg.png";
// import icon from "./Icon.svg";
// import "../App.css";
// import { Link, useLocation } from "react-router-dom";
// import AudioRead from "./AudioRead";

// const Homeque = () => {
// const speech = useRef(new SpeechSynthesisUtterance()).current;
// const voices = window.speechSynthesis.getVoices();
// speech.voice = voices[10]; // setting default voice

// const location = useLocation();
// const [chap, setChap] = useState(1);
// const [ver, setVer] = useState(1);
// const [loading, setLoading] = useState(true);

// const [chapter, setChapter] = useState("");
// const [verse, setVerse] = useState("");
// const [slok, setSlok] = useState("");
// const [transliteration, setTransliteration] = useState("");
// const [slokHindi, setSlokHindi] = useState("");
// const [slokEnglish, setSlokEnglish] = useState("");

// useEffect(() => {
// const fetchData = async () => {
// const urlParts = location.pathname.split("/");
// const newChap = parseInt(urlParts[urlParts.indexOf("chapter") + 1]);
// const newVer = parseInt(urlParts[urlParts.indexOf("shlok") + 1]);

// if (!isNaN(newChap) && !isNaN(newVer)) {
// setChap(newChap);
// setVer(newVer);
// setLoading(true);

// reqHandler(newChap, newVer);
// }
// };

// fetchData();
// }, [location]);

// const reqHandler = async (chap, ver) => {
// const currentURL =
// "https://vedicvani-backend.onrender.com" + window.location.pathname;
// LoadData(currentURL);
// };

// const LoadData = async (url) => {
// try {
// const response = await fetch(url);
// if (response.ok) {
// const data = await response.json();
// setChapter(data.chapter);
// setVerse(data.verse);
// setSlok(data.slok);
// setTransliteration(data.transliteration);
// setSlokHindi(data.tej.ht);
// setSlokEnglish(data.siva.et);
// } else {
// console.error("Failed to fetch data");
// }
// } catch (error) {
// console.error("An error occurred while fetching data", error);
// } finally {
// setLoading(false);
// }
// };

// useEffect(() => {
// // Alert on component load
// showVolumeAlert();
// }, [0]); // Empty dependency array ensures this effect runs only once on mount

// const showVolumeAlert = () => {
// const alertMessage = "Mind It : Double Click on the Volume Icon to Change the Respective Audio";
// alert(alertMessage);
// };

// const textFormatter = (text) => {
// return text.split("\n").map((line, index) => (
// <span key={index}>
// {line}
// <br />
// </span>
// ));
// };

// const handleNext = () => {
// if (ver < 47) {
// setVer(ver + 1);
// setLoading(true);
// reqHandler(chap, ver + 1);
// } else {
// alert("All chapters are finished");
// }
// };

// const handlePrevious = () => {
// if (ver > 1) {
// setVer(ver - 1);
// setLoading(true);
// reqHandler(chap, ver - 1);
// } else {
// alert("Already on the first chapter and verse");
// }
// };

// return (
// <div className="flex flex-col justify-center items-center min-h-screen max-w-5xl mx-auto px-4">
// {loading ? (
// <div className="flex justify-center items-center min-h-screen">
// <div className="animate-spin h-8 w-8 sm:h-10 sm:w-10 rounded-full border-t-2 border-b-2 border-gray-900"></div>
// </div>
// ) : (
// <>
// <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-8">
// || श्रीमद्भगवद्गीता {chapter + "." + verse} ||
// </h1>
// <img className="w-full max-w-xl mb-8" src={bgpic} alt="Background" />
// <div className="flex justify-between items-center w-full max-w-xl mb-8">
// <Link
// to={`/api/chapter/${chap}/shlok/${ver - 1}`}
// className="transform rotate-180">
// <img
// className="w-10 h-8 sm:w-10 sm:h-8 opacity-45 hover:opacity-100 duration-300 cursor-pointer"
// onClick={handlePrevious}
// src={icon}
// alt="Previous"
// title="Previous Shlok"
// />
// </Link>
// <Link to={`/api/chapter/${chap}/shlok/${ver + 1}`}>
// <img
// className="w-10 h-8 sm:w-10 sm:h-8 opacity-45 hover:opacity-100 duration-300 cursor-pointer"
// onClick={handleNext}
// alt="Next"
// src={icon}
// title="Next Shlok"
// />
// </Link>
// </div>
// <div className="text-center w-full">
// <h1 className="text-lg sm:text-xl md:text-2xl font-semibold mb-4">
// <AudioRead slok={slok} speech={speech} />{textFormatter(slok)}
// </h1>
// <p className="text-base sm:text-lg mb-4">
// <AudioRead slok={transliteration} speech={speech} />{textFormatter(transliteration)}
// </p>
// <p className="text-lg sm:text-xl md:text-2xl mb-4">
// <AudioRead slok={slokHindi} speech={speech} />{textFormatter(slokHindi)}
// </p>
// <p className="text-base sm:text-lg"><AudioRead slok={slokEnglish} speech={speech} />{textFormatter(slokEnglish)}</p>
// </div>
// </>
// )}
// </div>
// );
// };

// export default Homeque;
10 changes: 5 additions & 5 deletions src/pages/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,18 +47,18 @@ function Home() {
}, []);

return (
<section className="min-h-screen flex flex-col items-center p-4">
<div className="w-full flex justify-center items-center mb-8">
<section className="min-h-screen flex flex-col items-center p-2">
<div className="w-full flex justify-center items-center mb-2">
<img className="opacity-80 w-full max-w-xl" src={krishna} alt="krishna" style={{ animation: "float 2s ease-in-out infinite" }} />
</div>
<div className="relative mb-8">
<div className="relative mb-2">
<img data-aos="fade-right" className="backdrop-opacity-1 absolute w-[28rem] max-w-full top-2 left-[12%] transform -translate-x-1/2" src={logounder} alt="logo" />
<p className="text-5xl font-[Alegreya] text-center">VedicVani</p>
<AudioPlayer className="invisible" loop autoPlay src={song} volume={6.7} />
<AudioPlayer className="invisible" loop autoPlay src={song} volume={7} />
</div>

<div data-aos="zoom-in" data-aos-easing="linear" data-aos-duration="500">
<div className="flex flex-col md:flex-row justify-center items-center w-full max-w-xl mx-auto mb-8 gap-4">
<div className="flex flex-col md:flex-row justify-center items-center w-full max-w-xl mx-auto mb-4 gap-4">
<form className="w-full flex flex-col md:flex-row justify-evenly items-center gap-4">
<div className="relative mt-4 w-full">
<select
Expand Down

0 comments on commit 431f011

Please sign in to comment.