From 4f16b7adc9f3c91dfefb034bec4485db7e5d49bf Mon Sep 17 00:00:00 2001 From: shivalagisetty Date: Mon, 22 Apr 2024 00:41:45 +0530 Subject: [PATCH] added waiting spinners --- package-lock.json | 147 ++++++++++++++++++++++++++++++++- package.json | 1 + src/common/audioCard.jsx | 37 +++++++-- src/common/hourglassLoader.jsx | 24 ++++++ src/common/translateCard.jsx | 52 +++++++----- src/page/index.jsx | 9 +- 6 files changed, 241 insertions(+), 29 deletions(-) create mode 100644 src/common/hourglassLoader.jsx diff --git a/package-lock.json b/package-lock.json index 3d5d4d8..927d79d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "epubjs": "^0.3.93", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-loader-spinner": "^6.1.6", "react-reader": "^2.0.9" }, "devDependencies": { @@ -1822,6 +1823,11 @@ "form-data": "^2.5.0" } }, + "node_modules/@types/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==" + }, "node_modules/@types/tough-cookie": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", @@ -2240,6 +2246,14 @@ "node": ">=6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001608", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001608.tgz", @@ -2374,6 +2388,24 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -4404,7 +4436,6 @@ "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true, "funding": [ { "type": "github", @@ -4747,6 +4778,11 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -4862,6 +4898,27 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-loader-spinner": { + "version": "6.1.6", + "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-6.1.6.tgz", + "integrity": "sha512-x5h1Jcit7Qn03MuKlrWcMG9o12cp9SNDVHVJTNRi9TgtGPKcjKiXkou4NRfLAtXaFB3+Z8yZsVzONmPzhv2ErA==", + "dependencies": { + "react-is": "^18.2.0", + "styled-components": "^6.1.2" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-loader-spinner/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, "node_modules/react-reader": { "version": "2.0.9", "resolved": "https://registry.npmjs.org/react-reader/-/react-reader-2.0.9.tgz", @@ -5188,6 +5245,11 @@ "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -5239,7 +5301,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -5381,6 +5442,83 @@ "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz", "integrity": "sha512-PdHt7hHUJKxvTCgbKX9C1V/ftOcjJQgz8BZwNfV5c4B6dcGqlpelTbJ999jBGZ2jYiPAwcX5dP6oBwVlBlUbxw==" }, + "node_modules/styled-components": { + "version": "6.1.8", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz", + "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==", + "dependencies": { + "@emotion/is-prop-valid": "1.2.1", + "@emotion/unitless": "0.8.0", + "@types/stylis": "4.2.0", + "css-to-react-native": "3.2.0", + "csstype": "3.1.2", + "postcss": "8.4.31", + "shallowequal": "1.1.0", + "stylis": "4.3.1", + "tslib": "2.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/styled-components/node_modules/@emotion/unitless": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", + "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" + }, + "node_modules/styled-components/node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/styled-components/node_modules/stylis": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz", + "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==" + }, "node_modules/stylis": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", @@ -5465,6 +5603,11 @@ "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" }, + "node_modules/tslib": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", + "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" + }, "node_modules/type": { "version": "2.7.2", "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz", diff --git a/package.json b/package.json index 69243ea..2c686e9 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "epubjs": "^0.3.93", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-loader-spinner": "^6.1.6", "react-reader": "^2.0.9" }, "devDependencies": { diff --git a/src/common/audioCard.jsx b/src/common/audioCard.jsx index 49259fa..dac80d8 100644 --- a/src/common/audioCard.jsx +++ b/src/common/audioCard.jsx @@ -37,14 +37,37 @@ export default function AudioCard({ pageContent }) { let utter; React.useEffect(() => { - if(synth.speaking){ - synth.cancel() + if(isPlaying){ + if(synth.speaking){ + synth.cancel() + setProgress(0) + } + utter = new SpeechSynthesisUtterance(pageContent); + synth.speak(utter) + setIsPlaying(true) } - utter = new SpeechSynthesisUtterance(pageContent); - synth.speak(utter) - setIsPlaying(true) - }, [pageContent]) + const [progress, setProgress] = React.useState(0); + const intervalRef = React.useRef(null); // Reference to store the interval + + React.useEffect(() => { + if (isPlaying) { + intervalRef.current = setInterval(() => { + setProgress((prevProgress) => { + if (prevProgress === 100) { + clearInterval(intervalRef.current); + return 100; + } else { + return prevProgress + 1; + } + }); + }, 600); + } else { + clearInterval(intervalRef.current); + } + + return () => clearInterval(intervalRef.current); + }, [isPlaying]); return ( - + diff --git a/src/common/hourglassLoader.jsx b/src/common/hourglassLoader.jsx new file mode 100644 index 0000000..12fb2b5 --- /dev/null +++ b/src/common/hourglassLoader.jsx @@ -0,0 +1,24 @@ +import { Hourglass } from "react-loader-spinner"; +import BootstrapDialog from "./botstrapDialog"; +import { DialogContent } from "@mui/material"; + +export default function HourglassLoader({open}) { + + return ( + + +
+ +
+ + + ) +} \ No newline at end of file diff --git a/src/common/translateCard.jsx b/src/common/translateCard.jsx index 5058fb1..6f6bfa9 100644 --- a/src/common/translateCard.jsx +++ b/src/common/translateCard.jsx @@ -12,13 +12,15 @@ import Select from '@mui/material/Select'; import { IconButton } from '@mui/material'; import SwapHorizIcon from '@mui/icons-material/SwapHoriz'; import CloseIcon from '@mui/icons-material/Close'; -import {translateContent} from '../actions/llm'; +import { translateContent } from '../actions/llm'; +import { Hourglass } from 'react-loader-spinner'; -export default function DialogSelect({ open, setOpen, highlihghtedContent , setGlbTranslateTo, setHighlightedContent, setTranslationTrigger }) { +export default function DialogSelect({ open, setOpen, highlihghtedContent, setGlbTranslateTo, setHighlightedContent, setTranslationTrigger }) { const [translateFrom, setTranslateFrom] = React.useState('English'); const [translateTo, setTranslateTo] = React.useState('Hindi'); const [translatedContent, setTranslatedContent] = React.useState(""); - const [referenceContent, setReferenceContent] = React.useState('') + const [referenceContent, setReferenceContent] = React.useState(''); + const [translating, SetTranslating] = React.useState(false); const handleChangeTF = (event) => { @@ -37,8 +39,8 @@ export default function DialogSelect({ open, setOpen, highlihghtedContent , setG }; const handleClose = () => { - setOpen(false); - setHighlightedContent([]) + setOpen(false); + setHighlightedContent([]) }; React.useEffect(() => { @@ -46,16 +48,18 @@ export default function DialogSelect({ open, setOpen, highlihghtedContent , setG }, []) const onClickTranslateContent = () => { - if(!highlihghtedContent.length){ + if (!highlihghtedContent.length) { setGlbTranslateTo(translateTo) setTranslationTrigger(Math.random()); handleClose() } - if(highlihghtedContent.length){ - translateContent(referenceContent, translateTo).then(llmOutput => { - setTranslatedContent(JSON.parse(llmOutput).translatedContent) - }) - } + if (highlihghtedContent.length) { + SetTranslating(true); + translateContent(referenceContent, translateTo).then(llmOutput => { + SetTranslating(false) + setTranslatedContent(JSON.parse(llmOutput).translatedContent) + }) + } } return ( @@ -97,10 +101,10 @@ export default function DialogSelect({ open, setOpen, highlihghtedContent , setG - - + + - +