From a20d2f610c2f0e6a9481e30b66a54720d3b7fc67 Mon Sep 17 00:00:00 2001 From: Sid-80 Date: Sat, 29 Jun 2024 15:18:57 +0530 Subject: [PATCH] feat: audio speed --- package-lock.json | 70 +++++++++++---------- package.json | 2 +- src/pages/resources/audio/ChanakyaAudio.jsx | 68 +++++++++++++------- 3 files changed, 84 insertions(+), 56 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5293759..4d77260 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "bootstrap": "^5.3.3", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-h5-audio-player": "^3.9.1", + "react-player": "^2.16.0", "react-router-dom": "^6.23.1", "react-top-loading-bar": "^2.3.1", "react-typed": "^2.0.12" @@ -1040,25 +1040,6 @@ "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==", "dev": true }, - "node_modules/@iconify/react": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/@iconify/react/-/react-4.1.1.tgz", - "integrity": "sha512-jed14EjvKjee8mc0eoscGxlg7mSQRkwQG3iX3cPBCO7UlOjz0DtlvTqxqEcHUJGh+z1VJ31Yhu5B9PxfO0zbdg==", - "dependencies": { - "@iconify/types": "^2.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/cyberalien" - }, - "peerDependencies": { - "react": ">=16" - } - }, - "node_modules/@iconify/types": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz", - "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==" - }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", @@ -2128,6 +2109,14 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, + "node_modules/deepmerge": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", + "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/define-data-property": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz", @@ -3569,6 +3558,11 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "node_modules/load-script": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", + "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==" + }, "node_modules/locate-path": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", @@ -3610,6 +3604,11 @@ "yallist": "^3.0.2" } }, + "node_modules/memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "node_modules/mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", @@ -4016,24 +4015,31 @@ "react": "^18.2.0" } }, - "node_modules/react-h5-audio-player": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/react-h5-audio-player/-/react-h5-audio-player-3.9.1.tgz", - "integrity": "sha512-ILJdTXZgHEfv7WsvYPoN7afJncroYyg5Cxvs2qqrsnTzhtBdEuzlM0ETkhUhjqXOsAkbwAdHF9YgnEwgBJ8dCQ==", - "dependencies": { - "@babel/runtime": "^7.10.2", - "@iconify/react": "^4.1.1" - }, - "peerDependencies": { - "react": "^16.3.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0" - } + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-player": { + "version": "2.16.0", + "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.16.0.tgz", + "integrity": "sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==", + "dependencies": { + "deepmerge": "^4.0.0", + "load-script": "^1.0.0", + "memoize-one": "^5.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.0.1" + }, + "peerDependencies": { + "react": ">=16.6.0" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", diff --git a/package.json b/package.json index f47a139..49d5626 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "bootstrap": "^5.3.3", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-h5-audio-player": "^3.9.1", + "react-player": "^2.16.0", "react-router-dom": "^6.23.1", "react-top-loading-bar": "^2.3.1", "react-typed": "^2.0.12" diff --git a/src/pages/resources/audio/ChanakyaAudio.jsx b/src/pages/resources/audio/ChanakyaAudio.jsx index dea41be..f5de329 100644 --- a/src/pages/resources/audio/ChanakyaAudio.jsx +++ b/src/pages/resources/audio/ChanakyaAudio.jsx @@ -1,14 +1,20 @@ -import React, { useEffect, useState } from 'react'; -import AudioPlayer from "react-h5-audio-player"; -import * as func from '../../../functions/RequestEpisode.module'; +import React, { useEffect, useState } from "react"; +import * as func from "../../../functions/RequestEpisode.module"; +import ReactPlayer from "react-player"; const ChanakyaAudio = ({ setProgress }) => { - const [title, setTitle] = useState(''); - const [content, setContent] = useState(''); + const [title, setTitle] = useState(""); + const [content, setContent] = useState(""); const [URL, setURL] = useState(null); const [episodeNumber, setEpisodeNumber] = useState(1); const [value, setValue] = useState(1); + const [playbackRate, setPlaybackRate] = useState(1); + + const changePlaybackRate = (rate) => { + setPlaybackRate(rate); + }; + useEffect(() => { const getData = async () => { setProgress(50); @@ -21,11 +27,11 @@ const ChanakyaAudio = ({ setProgress }) => { setURL(data.trimData.URL); setProgress(85); } else { - console.error('No data found!'); + console.error("No data found!"); setURL(null); } } catch (error) { - console.error('Error fetching episode:', error); + console.error("Error fetching episode:", error); setURL(null); } setProgress(100); @@ -41,7 +47,11 @@ const ChanakyaAudio = ({ setProgress }) => { }; const handleKeyPress = (event) => { - if (event.key === 'Enter' && event.target.value >= 1 && event.target.value <= 806) { + if ( + event.key === "Enter" && + event.target.value >= 1 && + event.target.value <= 806 + ) { setEpisodeNumber(event.target.value); } }; @@ -52,37 +62,49 @@ const ChanakyaAudio = ({ setProgress }) => { const handlePrevious = () => { if (episodeNumber > 1) { - setEpisodeNumber(prevEpisode => prevEpisode - 1); + setEpisodeNumber((prevEpisode) => prevEpisode - 1); } }; const handleNext = () => { if (episodeNumber < 806) { - setEpisodeNumber(prevEpisode => prevEpisode + 1); + setEpisodeNumber((prevEpisode) => prevEpisode + 1); } }; return ( -
-
- - +
+
+ +
-
- chanakya-image +
+ chanakya-image
{title}

{content}

-