From d778546b980fcde138e7d6f4750600a11c4965f6 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Fri, 25 Oct 2024 09:02:45 +0500 Subject: [PATCH 01/23] feat: added audio icon in testaments, started community audio page --- components/CommunityAudio/ComunityAudio.jsx | 97 +++++++++++++++++++ components/Project/BookList/Testament.js | 28 ++++++ components/Project/BookReader.js | 2 +- .../books/[bookid]/community-audio/index.js | 26 +++++ recorder.svg | 6 ++ 5 files changed, 158 insertions(+), 1 deletion(-) create mode 100644 components/CommunityAudio/ComunityAudio.jsx create mode 100644 pages/projects/[code]/books/[bookid]/community-audio/index.js create mode 100644 recorder.svg diff --git a/components/CommunityAudio/ComunityAudio.jsx b/components/CommunityAudio/ComunityAudio.jsx new file mode 100644 index 000000000..f30f86be6 --- /dev/null +++ b/components/CommunityAudio/ComunityAudio.jsx @@ -0,0 +1,97 @@ +import { useEffect, useMemo, useState } from 'react' + +import { useCurrentUser } from 'lib/UserContext' +import { useAccess, useGetBooks, useGetChaptersTranslate, useProject } from 'utils/hooks' + +import ParticipantInfo from 'components/Project/ParticipantInfo' +import { BookListReader } from 'components/Project/BookReader' +import { newTestamentList, oldTestamentList } from 'utils/config' +import { checkBookCodeExists } from 'utils/helper' + +function CommunityAudio({ code, bookid }) { + const [reference, setReference] = useState() + + const { user } = useCurrentUser() + + const [project] = useProject({ code }) + + const [{ isCoordinatorAccess, isModeratorAccess, isAdminAccess }, { isLoading }] = + useAccess({ + user_id: user?.id, + code: project?.code, + }) + + const [chapters] = useGetChaptersTranslate({ code }) + + const [books] = useGetBooks({ + code, + }) + + const createdNewTestamentBooks = useMemo( + () => + books + ? books + .filter((book) => + Object.keys(newTestamentList).some( + (nt) => + nt === book.code && + (book?.level_checks || checkBookCodeExists(book.code, chapters)) + ) + ) + .sort((a, b) => { + return ( + Object.keys(newTestamentList).indexOf(a.code) - + Object.keys(newTestamentList).indexOf(b.code) + ) + }) + : [], + [books, chapters] + ) + + const createdOldTestamentBooks = useMemo( + () => + books + ? books + .filter((book) => + Object.keys(oldTestamentList).some( + (ot) => + ot === book.code && + (book?.level_checks || checkBookCodeExists(book.code, chapters)) + ) + ) + .sort((a, b) => { + return ( + Object.keys(oldTestamentList).indexOf(a.code) - + Object.keys(oldTestamentList).indexOf(b.code) + ) + }) + : [], + + [books, chapters] + ) + + useEffect(() => { + if (bookid && books) { + const book = books.find((book) => book.code === bookid) + setReference((prev) => ({ ...prev, chapter: 1, bookid, checks: book.level_checks })) + } + }, [bookid, books]) + + return ( +
+
+ + +
+
+ ) +} + +export default CommunityAudio diff --git a/components/Project/BookList/Testament.js b/components/Project/BookList/Testament.js index d1513a779..e3250b338 100644 --- a/components/Project/BookList/Testament.js +++ b/components/Project/BookList/Testament.js @@ -19,6 +19,7 @@ import Reader from 'public/dictionary.svg' import DownloadIcon from 'public/download.svg' import Play from 'public/play.svg' import Elipsis from 'public/elipsis.svg' +import Recorder from 'public/recorder.svg' function Testament({ bookList, @@ -106,6 +107,20 @@ function Testament({ >
+ + + + {isCoordinatorAccess && isBookCreated && ( )} + {!isBookCreated && isCoordinatorAccess && ( + ))} +
+ + + ) + }} + + ))} + + ))} + + + + + ) +} + +export default BookListReader diff --git a/components/CommunityAudio/CommunityAudio.jsx b/components/CommunityAudio/CommunityAudio.jsx new file mode 100644 index 000000000..80666e28a --- /dev/null +++ b/components/CommunityAudio/CommunityAudio.jsx @@ -0,0 +1,140 @@ +import { useEffect, useMemo, useState } from 'react' + +import { useRouter } from 'next/router' + +import BookListReader from './BookListReader' +import ParticipantInfo from 'components/Project/ParticipantInfo' +import { useCurrentUser } from 'lib/UserContext' +import { + useAccess, + useGetBooks, + useGetChaptersTranslate, + useGetResource, + useProject, +} from 'utils/hooks' + +import { newTestamentList, oldTestamentList, usfmFileNames } from 'utils/config' +import { checkBookCodeExists, getVerseObjectsForBookAndChapter } from 'utils/helper' + +function CommunityAudio() { + const { user } = useCurrentUser() + const [reference, setReference] = useState() + const { + query: { code, bookid }, + } = useRouter() + const [books] = useGetBooks({ + code, + }) + const [project] = useProject({ code }) + const [{ isCoordinatorAccess }] = useAccess({ + user_id: user?.id, + code: project?.code, + }) + + const [chapters] = useGetChaptersTranslate({ code }) + + const resource = useMemo(() => { + if (reference?.checks) { + const resource = reference?.checks?.url?.split('/') + return { + owner: resource[3], + repo: resource[4], + commit: resource[6], + bookPath: + project?.type === 'obs' ? './content' : './' + usfmFileNames[reference?.bookid], + } + } + }, [project?.type, reference?.bookid, reference?.checks]) + + const { isLoading, data: verseObjects } = useGetResource({ + config: { + reference: { book: reference?.bookid, chapter: reference?.chapter }, + resource: resource || { owner: '', repo: '', commit: '', bookPath: '' }, + }, + url: `/api/git/${project?.type}`, + }) + + const verseObjectsToUse = + verseObjects || + getVerseObjectsForBookAndChapter(chapters, reference?.bookid, reference?.chapter) + + const createdNewTestamentBooks = useMemo( + () => + books + ? books + .filter((book) => + Object.keys(newTestamentList).some( + (nt) => + nt === book.code && + (book?.level_checks || checkBookCodeExists(book.code, chapters)) + ) + ) + .sort((a, b) => { + return ( + Object.keys(newTestamentList).indexOf(a.code) - + Object.keys(newTestamentList).indexOf(b.code) + ) + }) + : [], + [books, chapters] + ) + + const createdOldTestamentBooks = useMemo( + () => + books + ? books + .filter((book) => + Object.keys(oldTestamentList).some( + (ot) => + ot === book.code && + (book?.level_checks || checkBookCodeExists(book.code, chapters)) + ) + ) + .sort((a, b) => { + return ( + Object.keys(oldTestamentList).indexOf(a.code) - + Object.keys(oldTestamentList).indexOf(b.code) + ) + }) + : [], + + [books, chapters] + ) + + useEffect(() => { + if (bookid && books) { + const book = books.find((book) => book.code === bookid) + setReference((prev) => ({ + ...prev, + chapter: 1, + bookid, + checks: book.level_checks, + })) + } + }, [bookid, books]) + + return ( +
+
+
+ +
+
+ +
+
+
+
+ ) +} + +export default CommunityAudio diff --git a/components/CommunityAudio/ComunityAudio.jsx b/components/CommunityAudio/ComunityAudio.jsx deleted file mode 100644 index f30f86be6..000000000 --- a/components/CommunityAudio/ComunityAudio.jsx +++ /dev/null @@ -1,97 +0,0 @@ -import { useEffect, useMemo, useState } from 'react' - -import { useCurrentUser } from 'lib/UserContext' -import { useAccess, useGetBooks, useGetChaptersTranslate, useProject } from 'utils/hooks' - -import ParticipantInfo from 'components/Project/ParticipantInfo' -import { BookListReader } from 'components/Project/BookReader' -import { newTestamentList, oldTestamentList } from 'utils/config' -import { checkBookCodeExists } from 'utils/helper' - -function CommunityAudio({ code, bookid }) { - const [reference, setReference] = useState() - - const { user } = useCurrentUser() - - const [project] = useProject({ code }) - - const [{ isCoordinatorAccess, isModeratorAccess, isAdminAccess }, { isLoading }] = - useAccess({ - user_id: user?.id, - code: project?.code, - }) - - const [chapters] = useGetChaptersTranslate({ code }) - - const [books] = useGetBooks({ - code, - }) - - const createdNewTestamentBooks = useMemo( - () => - books - ? books - .filter((book) => - Object.keys(newTestamentList).some( - (nt) => - nt === book.code && - (book?.level_checks || checkBookCodeExists(book.code, chapters)) - ) - ) - .sort((a, b) => { - return ( - Object.keys(newTestamentList).indexOf(a.code) - - Object.keys(newTestamentList).indexOf(b.code) - ) - }) - : [], - [books, chapters] - ) - - const createdOldTestamentBooks = useMemo( - () => - books - ? books - .filter((book) => - Object.keys(oldTestamentList).some( - (ot) => - ot === book.code && - (book?.level_checks || checkBookCodeExists(book.code, chapters)) - ) - ) - .sort((a, b) => { - return ( - Object.keys(oldTestamentList).indexOf(a.code) - - Object.keys(oldTestamentList).indexOf(b.code) - ) - }) - : [], - - [books, chapters] - ) - - useEffect(() => { - if (bookid && books) { - const book = books.find((book) => book.code === bookid) - setReference((prev) => ({ ...prev, chapter: 1, bookid, checks: book.level_checks })) - } - }, [bookid, books]) - - return ( -
-
- - -
-
- ) -} - -export default CommunityAudio diff --git a/components/Project/BookReader.js b/components/Project/BookReader.js index 7e8cd6241..ea1b91e98 100644 --- a/components/Project/BookReader.js +++ b/components/Project/BookReader.js @@ -60,6 +60,7 @@ function BookReader() { } } }, [project?.type, reference?.bookid, reference?.checks]) + const { isLoading, data: verseObjects } = useGetResource({ config: { reference: { book: reference?.bookid, chapter: reference?.chapter }, @@ -67,15 +68,18 @@ function BookReader() { }, url: `/api/git/${project?.type}`, }) + const verseObjectsToUse = verseObjects || getVerseObjectsForBookAndChapter(chapters, reference?.bookid, reference?.chapter) + useEffect(() => { if (bookid && books) { const book = books.find((book) => book.code === bookid) setReference((prev) => ({ ...prev, chapter: 1, bookid, checks: book.level_checks })) } }, [bookid, books]) + const createdNewTestamentBooks = useMemo( () => books @@ -117,6 +121,7 @@ function BookReader() { [books, chapters] ) + return (
@@ -165,6 +170,7 @@ function BookReader() { } export default BookReader + function Verses({ verseObjects, user, reference, isLoading }) { const { push, @@ -443,7 +449,7 @@ function Navigation({ books, reference, setReference }) { ) } -export function BookListReader({ books, setReference, reference, project }) { +function BookListReader({ books, setReference, reference, project }) { const [createdOldTestamentBooks, createdNewTestamentBooks] = books const [currentBook, setCurrentBook] = useState(null) const { query, replace } = useRouter() diff --git a/pages/projects/[code]/books/[bookid]/community-audio/index.js b/pages/projects/[code]/books/[bookid]/community-audio/index.js index 90914c6b4..99e1c95e8 100644 --- a/pages/projects/[code]/books/[bookid]/community-audio/index.js +++ b/pages/projects/[code]/books/[bookid]/community-audio/index.js @@ -1,7 +1,8 @@ +import { useRouter } from 'next/router' + import { serverSideTranslations } from 'next-i18next/serverSideTranslations' -import CommunityAudio from 'components/CommunityAudio/ComunityAudio' -import { useRouter } from 'next/router' +import CommunityAudio from 'components/CommunityAudio/CommunityAudio' function CommunityAudioPage() { const router = useRouter() From b51f6b2e2d1a9d47634861237615aa54a607f2cb Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Sat, 26 Oct 2024 11:49:48 +0500 Subject: [PATCH 03/23] feat: implemented verses component --- components/CommunityAudio/CommunityAudio.jsx | 28 +++- components/CommunityAudio/Verses.jsx | 141 +++++++++++++++++++ 2 files changed, 168 insertions(+), 1 deletion(-) create mode 100644 components/CommunityAudio/Verses.jsx diff --git a/components/CommunityAudio/CommunityAudio.jsx b/components/CommunityAudio/CommunityAudio.jsx index 80666e28a..76d7d4a7b 100644 --- a/components/CommunityAudio/CommunityAudio.jsx +++ b/components/CommunityAudio/CommunityAudio.jsx @@ -1,7 +1,9 @@ import { useEffect, useMemo, useState } from 'react' import { useRouter } from 'next/router' +import Link from 'next/link' +import Verses from './Verses' import BookListReader from './BookListReader' import ParticipantInfo from 'components/Project/ParticipantInfo' import { useCurrentUser } from 'lib/UserContext' @@ -15,6 +17,7 @@ import { import { newTestamentList, oldTestamentList, usfmFileNames } from 'utils/config' import { checkBookCodeExists, getVerseObjectsForBookAndChapter } from 'utils/helper' +import Left from '/public/left.svg' function CommunityAudio() { const { user } = useCurrentUser() @@ -132,7 +135,30 @@ function CommunityAudio() {
-
+
+
+
+ + + + {/* */} +
+ +
+
) } diff --git a/components/CommunityAudio/Verses.jsx b/components/CommunityAudio/Verses.jsx new file mode 100644 index 000000000..a83e88e1c --- /dev/null +++ b/components/CommunityAudio/Verses.jsx @@ -0,0 +1,141 @@ +import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react' + +import { useRouter } from 'next/router' +import Link from 'next/link' + +import { useTranslation } from 'next-i18next' + +import { Disclosure, Combobox, Tab, Transition } from '@headlessui/react' + +import Breadcrumbs from 'components/Breadcrumbs' + +import { useCurrentUser } from 'lib/UserContext' +import { + useAccess, + useGetBooks, + useGetChaptersTranslate, + useGetResource, + useProject, +} from 'utils/hooks' + +import { + checkBookCodeExists, + checkChapterVersesExist, + getVerseCount, + getVerseCountOBS, + getVerseObjectsForBookAndChapter, +} from 'utils/helper' + +import { oldTestamentList, newTestamentList, usfmFileNames } from '/utils/config' + +import Down from '/public/arrow-down.svg' +import Left from '/public/left.svg' +import Gear from '/public/gear.svg' + +function Verses({ verseObjects, user, reference, isLoading }) { + const { + push, + query: { bookid, code }, + } = useRouter() + + const [{ isCoordinatorAccess }] = useAccess({ + user_id: user?.id, + code, + }) + const [project] = useProject({ code }) + const { t } = useTranslation() + const [books] = useGetBooks({ code }) + + const verseCount = useMemo(() => { + if (project?.type === 'obs') { + return getVerseCountOBS(books, reference?.chapter) + } else { + return getVerseCount(books, bookid, reference?.chapter) + } + }, [books, project?.type, bookid, reference?.chapter]) + + return ( +
+
+ +
+ {reference?.chapter && ( +
{`${t('books:' + bookid)} ${ + reference?.chapter + }`}
+ )} +
+ {!isLoading ? ( + verseObjects ? ( + <> + {Array.from({ length: Math.min(verseCount + 1, 200) }).map((_, index) => { + const verseIndex = verseObjects?.verseObjects?.findIndex( + (verse) => parseInt(verse.verse) === index + ) + const text = + verseObjects?.verseObjects && verseIndex !== -1 + ? verseObjects.verseObjects[verseIndex].text + : ' ' + + return ( +
+ {index !== 0 && {index}} +

{text}

+
+ ) + })} + {verseObjects?.verseObjects && ( +
+ {verseObjects.verseObjects.find((verse) => verse.verse === 200)?.text} +
+ )} + + ) : ( + <> +

{t('NoContent')}

+ {isCoordinatorAccess && ( +
+ push({ + pathname: `/projects/${project?.code}`, + query: { + properties: bookid, + levels: true, + }, + }) + } + > + {t('CheckLinkResource')} + +
+ )} + + ) + ) : ( +
+
+ {[...Array(22).keys()].map((el) => ( +
+
+
+ ))} +
+ )} +
+
+ ) +} + +export default Verses From f21a57556c6d3baf72d04dafec5718bec908bd13 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Sun, 27 Oct 2024 21:21:21 +0500 Subject: [PATCH 04/23] feat: started recorder component --- components/CommunityAudio/CommunityAudio.jsx | 13 +- .../CommunityAudio/CommunityAudioRecorder.jsx | 181 ++++++++++++++++++ components/CommunityAudio/Verses.jsx | 21 +- 3 files changed, 186 insertions(+), 29 deletions(-) create mode 100644 components/CommunityAudio/CommunityAudioRecorder.jsx diff --git a/components/CommunityAudio/CommunityAudio.jsx b/components/CommunityAudio/CommunityAudio.jsx index 76d7d4a7b..1feb77292 100644 --- a/components/CommunityAudio/CommunityAudio.jsx +++ b/components/CommunityAudio/CommunityAudio.jsx @@ -18,6 +18,7 @@ import { import { newTestamentList, oldTestamentList, usfmFileNames } from 'utils/config' import { checkBookCodeExists, getVerseObjectsForBookAndChapter } from 'utils/helper' import Left from '/public/left.svg' +import CommunityAudioRecorder from './CommunityAudioRecorder' function CommunityAudio() { const { user } = useCurrentUser() @@ -135,21 +136,13 @@ function CommunityAudio() { -
+
+
- {/* */}
+
+ + +
+
+ + + +
+
+
+

FILENAME

+ + +
+
+
+ ) +} + +export default CommunityAudioRecorder + +function SpeedSetting() { + const [speed, setSpeed] = useState(1) + + return ( +
+
+ + +
+
+

+ {speed} Прокрутка текста +

+
+
+ ) +} + +function FontSizeSetting() { + const [fontSize, setFontSize] = useState(16) + + return ( +
+
+ + +
+
+

+ {fontSize} Размер текста +

+
+
+ ) +} diff --git a/components/CommunityAudio/Verses.jsx b/components/CommunityAudio/Verses.jsx index a83e88e1c..0f796fa8c 100644 --- a/components/CommunityAudio/Verses.jsx +++ b/components/CommunityAudio/Verses.jsx @@ -9,27 +9,10 @@ import { Disclosure, Combobox, Tab, Transition } from '@headlessui/react' import Breadcrumbs from 'components/Breadcrumbs' -import { useCurrentUser } from 'lib/UserContext' -import { - useAccess, - useGetBooks, - useGetChaptersTranslate, - useGetResource, - useProject, -} from 'utils/hooks' +import { useAccess, useGetBooks, useProject } from 'utils/hooks' -import { - checkBookCodeExists, - checkChapterVersesExist, - getVerseCount, - getVerseCountOBS, - getVerseObjectsForBookAndChapter, -} from 'utils/helper' +import { getVerseCount, getVerseCountOBS } from 'utils/helper' -import { oldTestamentList, newTestamentList, usfmFileNames } from '/utils/config' - -import Down from '/public/arrow-down.svg' -import Left from '/public/left.svg' import Gear from '/public/gear.svg' function Verses({ verseObjects, user, reference, isLoading }) { From e4775176c1951d6fecddb4391f108a3b7b39d356 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Mon, 28 Oct 2024 16:25:41 +0500 Subject: [PATCH 05/23] feat: made recording, pausing, stoping and playing --- .../CommunityAudio/CommunityAudioRecorder.jsx | 110 +++++++++++++++--- 1 file changed, 97 insertions(+), 13 deletions(-) diff --git a/components/CommunityAudio/CommunityAudioRecorder.jsx b/components/CommunityAudio/CommunityAudioRecorder.jsx index 2d3f57de9..bd3883e79 100644 --- a/components/CommunityAudio/CommunityAudioRecorder.jsx +++ b/components/CommunityAudio/CommunityAudioRecorder.jsx @@ -1,7 +1,76 @@ -import { useState } from 'react' +import { useCallback, useEffect, useRef, useState } from 'react' function CommunityAudioRecorder() { - const [isPlaying, setIsPlaying] = useState(false) + const [isRecording, setIsRecording] = useState(false) + const [isPaused, setIsPaused] = useState(false) + const [audioUrl, setAudioUrl] = useState(null) + const [preview, setPreview] = useState(null) + + const mediaRecorder = useRef(null) + const audioChunks = useRef([]) + + const startRecording = useCallback(async () => { + audioChunks.current = [] + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) + mediaRecorder.current = new MediaRecorder(stream) + + mediaRecorder.current.ondataavailable = (event) => { + audioChunks.current.push(event.data) + } + + mediaRecorder.current.onstop = () => { + const audioBlob = new Blob(audioChunks.current, { type: 'audio/wav' }) + const audioUrl = URL.createObjectURL(audioBlob) + setAudioUrl(audioUrl) + } + + mediaRecorder.current.start() + setIsRecording(true) + setIsPaused(false) + } catch (error) { + console.error('Error accessing microphone:', error) + } + }, []) + + const stopRecording = useCallback(async () => { + if (mediaRecorder.current) { + mediaRecorder.current.stop() + setIsRecording(false) + setIsPaused(false) + } + }, []) + + const pauseRecording = useCallback(() => { + if (mediaRecorder.current) { + console.log('pause') + mediaRecorder.current.pause() + + setIsPaused(true) + } + }, []) + + const resumeRecording = useCallback(() => { + if (mediaRecorder.current) { + mediaRecorder.current.resume() + + setIsPaused(false) + } + }, []) + + const playRecording = useCallback(() => { + if (preview) { + preview.play() + } + }, [preview]) + + useEffect(() => { + if (audioUrl) { + const audio = new Audio(audioUrl) + + setPreview(audio) + } + }, [audioUrl]) return (
@@ -11,8 +80,9 @@ function CommunityAudioRecorder() {
-
+

FILENAME

- - - - + + +
-
-

FILENAME

- - - - - - -
+
) @@ -184,8 +48,21 @@ function CommunityAudioRecorder() { export default CommunityAudioRecorder +// ? Components + function SpeedSetting() { const [speed, setSpeed] = useState(1) + const [isMounted, setIsMounted] = useState(false) + const { t } = useTranslation(['common']) + + const minSpeed = 1 + const maxSpeed = 50 + + useEffect(() => { + setIsMounted(true) + }, []) + + if (!isMounted) return null return (
@@ -193,7 +70,7 @@ function SpeedSetting() {
@@ -237,6 +115,18 @@ function SpeedSetting() { function FontSizeSetting() { const [fontSize, setFontSize] = useState(16) + const [isMounted, setIsMounted] = useState(false) + + const { t } = useTranslation(['common']) + + const minSize = 12 + const maxSize = 48 + + useEffect(() => { + setIsMounted(true) + }, []) + + if (!isMounted) return null return (
@@ -244,22 +134,255 @@ function FontSizeSetting() {

- {fontSize} Размер текста + {fontSize} {t('FontSize')}

) } + +function AudioPreview({ audioUrl, onPlay, onPause, isPlaying }) { + return ( +
+

FILENAME

+ + + + + + +
+ ) +} + +function PauseButton({ isPaused, isRecording, onPause, onResume }) { + return ( + + ) +} + +function RecordButton({ isPaused, isRecording, startRecording, resumeRecording }) { + return ( + + ) +} + +function StopButton({ isRecording, stopRecording }) { + return ( + + ) +} + +// ? Hooks +function useAudioRecorder() { + const [isRecording, setIsRecording] = useState(false) + const [isPaused, setIsPaused] = useState(false) + const [audioUrl, setAudioUrl] = useState(null) + const mediaRecorder = useRef(null) + const audioChunks = useRef([]) + + const startRecording = useCallback(async () => { + audioChunks.current = [] + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) + mediaRecorder.current = new MediaRecorder(stream) + + mediaRecorder.current.ondataavailable = (event) => { + audioChunks.current.push(event.data) + } + + mediaRecorder.current.onstop = () => { + const audioBlob = new Blob(audioChunks.current, { type: 'audio/wav' }) + const audioUrl = URL.createObjectURL(audioBlob) + setAudioUrl(audioUrl) + } + + mediaRecorder.current.start() + setIsRecording(true) + setIsPaused(false) + } catch (error) { + console.error('Error accessing microphone:', error) + } + }, []) + + const stopRecording = useCallback(() => { + if (mediaRecorder.current) { + mediaRecorder.current.stop() + setIsRecording(false) + setIsPaused(false) + } + }, []) + + const pauseRecording = useCallback(() => { + if (mediaRecorder.current) { + mediaRecorder.current.pause() + setIsPaused(true) + } + }, []) + + const resumeRecording = useCallback(() => { + if (mediaRecorder.current) { + mediaRecorder.current.resume() + setIsPaused(false) + } + }, []) + + return { + isRecording, + isPaused, + audioUrl, + startRecording, + stopRecording, + pauseRecording, + resumeRecording, + } +} + +function useAudioPreview(audioUrl) { + const [isPlaying, setIsPlaying] = useState(false) + const [preview, setPreview] = useState(null) + + useEffect(() => { + if (audioUrl) { + const audio = new Audio(audioUrl) + setPreview(audio) + + audio.addEventListener('ended', () => setIsPlaying(false)) + + return () => audio.removeEventListener('ended', () => setIsPlaying(false)) + } + }, [audioUrl]) + + const play = useCallback(() => { + if (preview) { + preview.play() + setIsPlaying(true) + } + }, [preview]) + + const pause = useCallback(() => { + if (preview) { + preview.pause() + setIsPlaying(false) + } + }, [preview]) + + return { isPlaying, play, pause } +} diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 1a26420e0..916a6436b 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -190,5 +190,7 @@ "Projects": "Projects", "CreateProject": "Create project", "About": "About", - "Language": "Language" + "Language": "Language", + "TextSpeed": "Text speed", + "FontSize": "Font size" } diff --git a/public/locales/es/common.json b/public/locales/es/common.json index 573d5cd20..e0044ff87 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -190,5 +190,7 @@ "Projects": "Proyectos", "CreateProject": "Crear un proyecto", "About": "Sobre el proyecto", - "Language": "Idioma" + "Language": "Idioma", + "TextSpeed": "Velocidad del texto", + "FontSize": "Tamaño de letra" } diff --git a/public/locales/ru/common.json b/public/locales/ru/common.json index 2b33b9334..ded739eb5 100644 --- a/public/locales/ru/common.json +++ b/public/locales/ru/common.json @@ -190,5 +190,7 @@ "Projects": "Проекты", "CreateProject": "Создать проект", "About": "О проекте", - "Language": "Язык" + "Language": "Язык", + "TextSpeed": "Прокрутка текста", + "FontSize": "Размер текста" } From a209a15cbdc112f122980db4c9d27bc016c0fc5a Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Wed, 30 Oct 2024 14:44:54 +0500 Subject: [PATCH 07/23] feat: made font size adjustment --- components/CommunityAudio/CommunityAudio.jsx | 5 ++++- components/CommunityAudio/CommunityAudioRecorder.jsx | 7 +++---- components/CommunityAudio/Verses.jsx | 6 +++++- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/components/CommunityAudio/CommunityAudio.jsx b/components/CommunityAudio/CommunityAudio.jsx index 1feb77292..f823736e5 100644 --- a/components/CommunityAudio/CommunityAudio.jsx +++ b/components/CommunityAudio/CommunityAudio.jsx @@ -21,6 +21,8 @@ import Left from '/public/left.svg' import CommunityAudioRecorder from './CommunityAudioRecorder' function CommunityAudio() { + const [fontSize, setFontSize] = useState(16) + const { user } = useCurrentUser() const [reference, setReference] = useState() const { @@ -137,7 +139,7 @@ function CommunityAudio() {
- +
@@ -145,6 +147,7 @@ function CommunityAudio() {
- +
)} + + {/* */} +
{!isLoading ? ( verseObjects ? ( From 2d704c46b303ba6032c15d382b46d2d67216849f Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Sat, 2 Nov 2024 22:53:54 +0500 Subject: [PATCH 08/23] feat: made simple teleprompter functionality --- components/CommunityAudio/CommunityAudio.jsx | 109 +++++++++++++++-- ...Recorder.jsx => CommunityAudioRecorder.js} | 102 +++------------- .../{Verses.jsx => Teleprompter.jsx} | 110 +++++++++++++++--- 3 files changed, 213 insertions(+), 108 deletions(-) rename components/CommunityAudio/{CommunityAudioRecorder.jsx => CommunityAudioRecorder.js} (80%) rename components/CommunityAudio/{Verses.jsx => Teleprompter.jsx} (56%) diff --git a/components/CommunityAudio/CommunityAudio.jsx b/components/CommunityAudio/CommunityAudio.jsx index f823736e5..2e0bf7435 100644 --- a/components/CommunityAudio/CommunityAudio.jsx +++ b/components/CommunityAudio/CommunityAudio.jsx @@ -1,11 +1,12 @@ -import { useEffect, useMemo, useState } from 'react' +import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useRouter } from 'next/router' import Link from 'next/link' -import Verses from './Verses' import BookListReader from './BookListReader' +import CommunityAudioRecorder from './CommunityAudioRecorder' import ParticipantInfo from 'components/Project/ParticipantInfo' + import { useCurrentUser } from 'lib/UserContext' import { useAccess, @@ -17,11 +18,23 @@ import { import { newTestamentList, oldTestamentList, usfmFileNames } from 'utils/config' import { checkBookCodeExists, getVerseObjectsForBookAndChapter } from 'utils/helper' + import Left from '/public/left.svg' -import CommunityAudioRecorder from './CommunityAudioRecorder' +import Teleprompter from './Teleprompter' function CommunityAudio() { const [fontSize, setFontSize] = useState(16) + const [textSpeed, setTextSpeed] = useState(1) + + const { + isRecording, + isPaused, + audioUrl, + startRecording, + stopRecording, + pauseRecording, + resumeRecording, + } = useAudioRecorder() const { user } = useCurrentUser() const [reference, setReference] = useState() @@ -139,19 +152,28 @@ function CommunityAudio() {
- -
-
- - - -
- +
+
@@ -160,3 +182,68 @@ function CommunityAudio() { } export default CommunityAudio + +// ? Hooks +function useAudioRecorder() { + const [isRecording, setIsRecording] = useState(false) + const [isPaused, setIsPaused] = useState(false) + const [audioUrl, setAudioUrl] = useState(null) + const mediaRecorder = useRef(null) + const audioChunks = useRef([]) + + const startRecording = useCallback(async () => { + audioChunks.current = [] + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) + mediaRecorder.current = new MediaRecorder(stream) + + mediaRecorder.current.ondataavailable = (event) => { + audioChunks.current.push(event.data) + } + + mediaRecorder.current.onstop = () => { + const audioBlob = new Blob(audioChunks.current, { type: 'audio/wav' }) + const audioUrl = URL.createObjectURL(audioBlob) + setAudioUrl(audioUrl) + } + + mediaRecorder.current.start() + setIsRecording(true) + setIsPaused(false) + } catch (error) { + console.error('Error accessing microphone:', error) + } + }, []) + + const stopRecording = useCallback(() => { + if (mediaRecorder.current) { + mediaRecorder.current.stop() + setIsRecording(false) + setIsPaused(false) + } + }, []) + + const pauseRecording = useCallback(() => { + if (mediaRecorder.current) { + mediaRecorder.current.pause() + setIsPaused(true) + } + }, []) + + const resumeRecording = useCallback(() => { + if (mediaRecorder.current) { + mediaRecorder.current.resume() + setIsPaused(false) + } + }, []) + + return { + isRecording, + isPaused, + audioUrl, + startRecording, + stopRecording, + pauseRecording, + resumeRecording, + } +} diff --git a/components/CommunityAudio/CommunityAudioRecorder.jsx b/components/CommunityAudio/CommunityAudioRecorder.js similarity index 80% rename from components/CommunityAudio/CommunityAudioRecorder.jsx rename to components/CommunityAudio/CommunityAudioRecorder.js index af7485991..61001ddec 100644 --- a/components/CommunityAudio/CommunityAudioRecorder.jsx +++ b/components/CommunityAudio/CommunityAudioRecorder.js @@ -1,22 +1,22 @@ -import { useCallback, useEffect, useRef, useState } from 'react' +import { useCallback, useEffect, useState } from 'react' + import { useTranslation } from 'react-i18next' -function CommunityAudioRecorder({ fontSize, setFontSize }) { - const { - isRecording, - isPaused, - audioUrl, - startRecording, - stopRecording, - pauseRecording, - resumeRecording, - } = useAudioRecorder() +function CommunityAudioRecorder({ + isRecording, + isPaused, + audioUrl, + audioMethods, + textSettings, +}) { const { isPlaying, play, pause } = useAudioPreview(audioUrl) + const { fontSize, setFontSize, textSpeed, setTextSpeed } = textSettings + const { startRecording, stopRecording, pauseRecording, resumeRecording } = audioMethods return (
- +
@@ -36,6 +36,7 @@ function CommunityAudioRecorder({ fontSize, setFontSize }) {
@@ -290,70 +290,6 @@ function StopButton({ isRecording, stopRecording }) { } // ? Hooks -function useAudioRecorder() { - const [isRecording, setIsRecording] = useState(false) - const [isPaused, setIsPaused] = useState(false) - const [audioUrl, setAudioUrl] = useState(null) - const mediaRecorder = useRef(null) - const audioChunks = useRef([]) - - const startRecording = useCallback(async () => { - audioChunks.current = [] - try { - const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) - mediaRecorder.current = new MediaRecorder(stream) - - mediaRecorder.current.ondataavailable = (event) => { - audioChunks.current.push(event.data) - } - - mediaRecorder.current.onstop = () => { - const audioBlob = new Blob(audioChunks.current, { type: 'audio/wav' }) - const audioUrl = URL.createObjectURL(audioBlob) - setAudioUrl(audioUrl) - } - - mediaRecorder.current.start() - setIsRecording(true) - setIsPaused(false) - } catch (error) { - console.error('Error accessing microphone:', error) - } - }, []) - - const stopRecording = useCallback(() => { - if (mediaRecorder.current) { - mediaRecorder.current.stop() - setIsRecording(false) - setIsPaused(false) - } - }, []) - - const pauseRecording = useCallback(() => { - if (mediaRecorder.current) { - mediaRecorder.current.pause() - setIsPaused(true) - } - }, []) - - const resumeRecording = useCallback(() => { - if (mediaRecorder.current) { - mediaRecorder.current.resume() - setIsPaused(false) - } - }, []) - - return { - isRecording, - isPaused, - audioUrl, - startRecording, - stopRecording, - pauseRecording, - resumeRecording, - } -} - function useAudioPreview(audioUrl) { const [isPlaying, setIsPlaying] = useState(false) const [preview, setPreview] = useState(null) diff --git a/components/CommunityAudio/Verses.jsx b/components/CommunityAudio/Teleprompter.jsx similarity index 56% rename from components/CommunityAudio/Verses.jsx rename to components/CommunityAudio/Teleprompter.jsx index f5946c404..9b40f7149 100644 --- a/components/CommunityAudio/Verses.jsx +++ b/components/CommunityAudio/Teleprompter.jsx @@ -1,12 +1,9 @@ -import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react' +import { useEffect, useMemo, useRef, useState } from 'react' import { useRouter } from 'next/router' -import Link from 'next/link' import { useTranslation } from 'next-i18next' -import { Disclosure, Combobox, Tab, Transition } from '@headlessui/react' - import Breadcrumbs from 'components/Breadcrumbs' import { useAccess, useGetBooks, useProject } from 'utils/hooks' @@ -15,7 +12,19 @@ import { getVerseCount, getVerseCountOBS } from 'utils/helper' import Gear from '/public/gear.svg' -function Verses({ verseObjects, user, reference, isLoading, fontSize }) { +function Teleprompter({ + verseObjects, + user, + reference, + isLoading, + fontSize, + textSpeed, + isRecording, + isPaused, +}) { + const [isPlaying, setIsPlaying] = useState(false) + const [activeVerseIndex, setActiveVerseIndex] = useState(1) + const { push, query: { bookid, code }, @@ -37,9 +46,69 @@ function Verses({ verseObjects, user, reference, isLoading, fontSize }) { } }, [books, project?.type, bookid, reference?.chapter]) + const containerRef = useRef(null) + + const scrollSpeed = useMemo(() => { + return 20 + (textSpeed * 180) / 100 + }, [textSpeed]) + + const handlePlayPause = () => { + setIsPlaying(!isPlaying) + } + + const handleReset = () => { + setIsPlaying(false) + setActiveVerseIndex(1) + if (containerRef.current) { + containerRef.current.scrollTop = 0 + } + } + + useEffect(() => { + if (isRecording) { + if (isPaused) { + setIsPlaying(false) + } else { + setIsPlaying(true) + } + } else { + handleReset() + } + }, [isRecording, isPaused]) + + useEffect(() => { + if (!isPlaying || !containerRef.current) return + + const container = containerRef.current + const verses = container.querySelectorAll('.verse-line') + let currentIndex = activeVerseIndex + + const scrollInterval = setInterval(() => { + if (currentIndex >= verses.length) { + setIsPlaying(false) + clearInterval(scrollInterval) + handleReset() + return + } + + const verse = verses[currentIndex] + const verseTop = verse.offsetTop - container.offsetTop + + container.scrollTo({ + top: verseTop - 100, + behavior: 'smooth', + }) + + setActiveVerseIndex(currentIndex) + currentIndex++ + }, (1000 * 60) / scrollSpeed) + + return () => clearInterval(scrollInterval) + }, [isPlaying, scrollSpeed, activeVerseIndex]) + return (
-
+
{reference?.chapter && ( -
{`${t('books:' + bookid)} ${ +
{`${t('books:' + bookid)} ${ reference?.chapter }`}
)} - {/* */} -
@@ -75,14 +145,26 @@ function Verses({ verseObjects, user, reference, isLoading, fontSize }) { : ' ' return ( -
+
26 + ? fontSize > 32 + ? 'pt-10' + : 'pt-6' + : 'pt-2' + : '' + } + ${activeVerseIndex === index ? 'bg-gray-200' : ''}`} + key={index} + > {index !== 0 && {index}} -

{text}

+

{text}

) })} {verseObjects?.verseObjects && ( -
+
{verseObjects.verseObjects.find((verse) => verse.verse === 200)?.text}
)} @@ -125,4 +207,4 @@ function Verses({ verseObjects, user, reference, isLoading, fontSize }) { ) } -export default Verses +export default Teleprompter From d3938a7d9f6275ad7f82ef388bbe3914e77000d1 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Sun, 3 Nov 2024 00:40:11 +0500 Subject: [PATCH 09/23] feat: minor refactor --- .../{CommunityAudio.jsx => CommunityAudio.js} | 11 +- .../CommunityAudio/CommunityAudioRecorder.js | 1 - components/CommunityAudio/Teleprompter.js | 206 +++++++++++++++++ components/CommunityAudio/Teleprompter.jsx | 211 +----------------- 4 files changed, 210 insertions(+), 219 deletions(-) rename components/CommunityAudio/{CommunityAudio.jsx => CommunityAudio.js} (99%) create mode 100644 components/CommunityAudio/Teleprompter.js diff --git a/components/CommunityAudio/CommunityAudio.jsx b/components/CommunityAudio/CommunityAudio.js similarity index 99% rename from components/CommunityAudio/CommunityAudio.jsx rename to components/CommunityAudio/CommunityAudio.js index 2e0bf7435..9c1a78dc4 100644 --- a/components/CommunityAudio/CommunityAudio.jsx +++ b/components/CommunityAudio/CommunityAudio.js @@ -1,11 +1,11 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useRouter } from 'next/router' -import Link from 'next/link' import BookListReader from './BookListReader' import CommunityAudioRecorder from './CommunityAudioRecorder' import ParticipantInfo from 'components/Project/ParticipantInfo' +import Teleprompter from './Teleprompter' import { useCurrentUser } from 'lib/UserContext' import { @@ -19,9 +19,6 @@ import { import { newTestamentList, oldTestamentList, usfmFileNames } from 'utils/config' import { checkBookCodeExists, getVerseObjectsForBookAndChapter } from 'utils/helper' -import Left from '/public/left.svg' -import Teleprompter from './Teleprompter' - function CommunityAudio() { const [fontSize, setFontSize] = useState(16) const [textSpeed, setTextSpeed] = useState(1) @@ -76,7 +73,6 @@ function CommunityAudio() { const verseObjectsToUse = verseObjects || getVerseObjectsForBookAndChapter(chapters, reference?.bookid, reference?.chapter) - const createdNewTestamentBooks = useMemo( () => books @@ -97,7 +93,6 @@ function CommunityAudio() { : [], [books, chapters] ) - const createdOldTestamentBooks = useMemo( () => books @@ -168,12 +163,12 @@ function CommunityAudio() {
diff --git a/components/CommunityAudio/CommunityAudioRecorder.js b/components/CommunityAudio/CommunityAudioRecorder.js index 61001ddec..0f0baa2ca 100644 --- a/components/CommunityAudio/CommunityAudioRecorder.js +++ b/components/CommunityAudio/CommunityAudioRecorder.js @@ -50,7 +50,6 @@ function CommunityAudioRecorder({ export default CommunityAudioRecorder // ? Components - function SpeedSetting({ textSpeed, setTextSpeed }) { const [isMounted, setIsMounted] = useState(false) const { t } = useTranslation(['common']) diff --git a/components/CommunityAudio/Teleprompter.js b/components/CommunityAudio/Teleprompter.js new file mode 100644 index 000000000..1b709b0a7 --- /dev/null +++ b/components/CommunityAudio/Teleprompter.js @@ -0,0 +1,206 @@ +import { useEffect, useMemo, useRef, useState } from 'react' + +import { useRouter } from 'next/router' + +import { useTranslation } from 'next-i18next' + +import Breadcrumbs from 'components/Breadcrumbs' + +import { useAccess, useGetBooks, useProject } from 'utils/hooks' + +import { getVerseCount, getVerseCountOBS } from 'utils/helper' + +import Gear from '/public/gear.svg' + +function Teleprompter({ + verseObjects, + user, + reference, + isLoading, + fontSize, + textSpeed, + isRecording, + isPaused, +}) { + const [isPlaying, setIsPlaying] = useState(false) + const [activeVerseIndex, setActiveVerseIndex] = useState(1) + + const { + push, + query: { bookid, code }, + } = useRouter() + + const [{ isCoordinatorAccess }] = useAccess({ + user_id: user?.id, + code, + }) + const [project] = useProject({ code }) + const { t } = useTranslation() + const [books] = useGetBooks({ code }) + + const verseCount = useMemo(() => { + if (project?.type === 'obs') { + return getVerseCountOBS(books, reference?.chapter) + } else { + return getVerseCount(books, bookid, reference?.chapter) + } + }, [books, project?.type, bookid, reference?.chapter]) + + const containerRef = useRef(null) + + const scrollSpeed = useMemo(() => { + return 20 + (textSpeed * 180) / 100 + }, [textSpeed]) + + const handleReset = () => { + setIsPlaying(false) + setActiveVerseIndex(1) + if (containerRef.current) { + containerRef.current.scrollTop = 0 + } + } + + useEffect(() => { + if (isRecording) { + if (isPaused) { + setIsPlaying(false) + } else { + setIsPlaying(true) + } + } else { + handleReset() + } + }, [isRecording, isPaused]) + + useEffect(() => { + if (!isPlaying || !containerRef.current) return + + const container = containerRef.current + const verses = container.querySelectorAll('.verse-line') + let currentIndex = activeVerseIndex + + const scrollInterval = setInterval(() => { + if (currentIndex >= verses.length) { + setIsPlaying(false) + clearInterval(scrollInterval) + handleReset() + return + } + + const verse = verses[currentIndex] + const verseTop = verse.offsetTop - container.offsetTop + + container.scrollTo({ + top: verseTop - 100, + behavior: 'smooth', + }) + + setActiveVerseIndex(currentIndex) + currentIndex++ + }, (1000 * 60) / scrollSpeed) + + return () => clearInterval(scrollInterval) + }, [isPlaying, scrollSpeed, activeVerseIndex]) + + return ( +
+
+ +
+ {reference?.chapter && ( +
{`${t('books:' + bookid)} ${ + reference?.chapter + }`}
+ )} + +
+ {!isLoading ? ( + verseObjects ? ( + <> + {Array.from({ length: Math.min(verseCount + 1, 200) }).map((_, index) => { + const verseIndex = verseObjects?.verseObjects?.findIndex( + (verse) => parseInt(verse.verse) === index + ) + const text = + verseObjects?.verseObjects && verseIndex !== -1 + ? verseObjects.verseObjects[verseIndex].text + : ' ' + + return ( +
26 + ? fontSize > 32 + ? 'pt-10' + : 'pt-6' + : 'pt-2' + : '' + } + ${activeVerseIndex === index ? 'bg-gray-200' : ''}`} + key={index} + > + {index !== 0 && {index}} +

{text}

+
+ ) + })} + {verseObjects?.verseObjects && ( +
+ {verseObjects.verseObjects.find((verse) => verse.verse === 200)?.text} +
+ )} + + ) : ( + <> +

{t('NoContent')}

+ {isCoordinatorAccess && ( +
+ push({ + pathname: `/projects/${project?.code}`, + query: { + properties: bookid, + levels: true, + }, + }) + } + > + {t('CheckLinkResource')} + +
+ )} + + ) + ) : ( +
+
+ {[...Array(22).keys()].map((el) => ( +
+
+
+ ))} +
+ )} +
+
+ ) +} + +export default Teleprompter diff --git a/components/CommunityAudio/Teleprompter.jsx b/components/CommunityAudio/Teleprompter.jsx index 9b40f7149..0519ecba6 100644 --- a/components/CommunityAudio/Teleprompter.jsx +++ b/components/CommunityAudio/Teleprompter.jsx @@ -1,210 +1 @@ -import { useEffect, useMemo, useRef, useState } from 'react' - -import { useRouter } from 'next/router' - -import { useTranslation } from 'next-i18next' - -import Breadcrumbs from 'components/Breadcrumbs' - -import { useAccess, useGetBooks, useProject } from 'utils/hooks' - -import { getVerseCount, getVerseCountOBS } from 'utils/helper' - -import Gear from '/public/gear.svg' - -function Teleprompter({ - verseObjects, - user, - reference, - isLoading, - fontSize, - textSpeed, - isRecording, - isPaused, -}) { - const [isPlaying, setIsPlaying] = useState(false) - const [activeVerseIndex, setActiveVerseIndex] = useState(1) - - const { - push, - query: { bookid, code }, - } = useRouter() - - const [{ isCoordinatorAccess }] = useAccess({ - user_id: user?.id, - code, - }) - const [project] = useProject({ code }) - const { t } = useTranslation() - const [books] = useGetBooks({ code }) - - const verseCount = useMemo(() => { - if (project?.type === 'obs') { - return getVerseCountOBS(books, reference?.chapter) - } else { - return getVerseCount(books, bookid, reference?.chapter) - } - }, [books, project?.type, bookid, reference?.chapter]) - - const containerRef = useRef(null) - - const scrollSpeed = useMemo(() => { - return 20 + (textSpeed * 180) / 100 - }, [textSpeed]) - - const handlePlayPause = () => { - setIsPlaying(!isPlaying) - } - - const handleReset = () => { - setIsPlaying(false) - setActiveVerseIndex(1) - if (containerRef.current) { - containerRef.current.scrollTop = 0 - } - } - - useEffect(() => { - if (isRecording) { - if (isPaused) { - setIsPlaying(false) - } else { - setIsPlaying(true) - } - } else { - handleReset() - } - }, [isRecording, isPaused]) - - useEffect(() => { - if (!isPlaying || !containerRef.current) return - - const container = containerRef.current - const verses = container.querySelectorAll('.verse-line') - let currentIndex = activeVerseIndex - - const scrollInterval = setInterval(() => { - if (currentIndex >= verses.length) { - setIsPlaying(false) - clearInterval(scrollInterval) - handleReset() - return - } - - const verse = verses[currentIndex] - const verseTop = verse.offsetTop - container.offsetTop - - container.scrollTo({ - top: verseTop - 100, - behavior: 'smooth', - }) - - setActiveVerseIndex(currentIndex) - currentIndex++ - }, (1000 * 60) / scrollSpeed) - - return () => clearInterval(scrollInterval) - }, [isPlaying, scrollSpeed, activeVerseIndex]) - - return ( -
-
- -
- {reference?.chapter && ( -
{`${t('books:' + bookid)} ${ - reference?.chapter - }`}
- )} - -
- {!isLoading ? ( - verseObjects ? ( - <> - {Array.from({ length: Math.min(verseCount + 1, 200) }).map((_, index) => { - const verseIndex = verseObjects?.verseObjects?.findIndex( - (verse) => parseInt(verse.verse) === index - ) - const text = - verseObjects?.verseObjects && verseIndex !== -1 - ? verseObjects.verseObjects[verseIndex].text - : ' ' - - return ( -
26 - ? fontSize > 32 - ? 'pt-10' - : 'pt-6' - : 'pt-2' - : '' - } - ${activeVerseIndex === index ? 'bg-gray-200' : ''}`} - key={index} - > - {index !== 0 && {index}} -

{text}

-
- ) - })} - {verseObjects?.verseObjects && ( -
- {verseObjects.verseObjects.find((verse) => verse.verse === 200)?.text} -
- )} - - ) : ( - <> -

{t('NoContent')}

- {isCoordinatorAccess && ( -
- push({ - pathname: `/projects/${project?.code}`, - query: { - properties: bookid, - levels: true, - }, - }) - } - > - {t('CheckLinkResource')} - -
- )} - - ) - ) : ( -
-
- {[...Array(22).keys()].map((el) => ( -
-
-
- ))} -
- )} -
-
- ) -} - -export default Teleprompter + \ No newline at end of file From 685dca33adc87600919fb714a22a73c1072d5090 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Fri, 15 Nov 2024 17:40:37 +0500 Subject: [PATCH 10/23] feat: minor fixes --- .../{CommunityAudio.jsx => CommunityAudio.js} | 111 ++++++++- ...Recorder.jsx => CommunityAudioRecorder.js} | 101 ++------ components/CommunityAudio/Teleprompter.js | 215 ++++++++++++++++++ components/CommunityAudio/Verses.jsx | 128 ----------- styles/globals.css | 18 ++ 5 files changed, 355 insertions(+), 218 deletions(-) rename components/CommunityAudio/{CommunityAudio.jsx => CommunityAudio.js} (64%) rename components/CommunityAudio/{CommunityAudioRecorder.jsx => CommunityAudioRecorder.js} (79%) create mode 100644 components/CommunityAudio/Teleprompter.js delete mode 100644 components/CommunityAudio/Verses.jsx diff --git a/components/CommunityAudio/CommunityAudio.jsx b/components/CommunityAudio/CommunityAudio.js similarity index 64% rename from components/CommunityAudio/CommunityAudio.jsx rename to components/CommunityAudio/CommunityAudio.js index f823736e5..08038442d 100644 --- a/components/CommunityAudio/CommunityAudio.jsx +++ b/components/CommunityAudio/CommunityAudio.js @@ -1,11 +1,12 @@ -import { useEffect, useMemo, useState } from 'react' +import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useRouter } from 'next/router' import Link from 'next/link' -import Verses from './Verses' +import Teleprompter from './Teleprompter' import BookListReader from './BookListReader' import ParticipantInfo from 'components/Project/ParticipantInfo' +import CommunityAudioRecorder from './CommunityAudioRecorder' import { useCurrentUser } from 'lib/UserContext' import { useAccess, @@ -17,11 +18,22 @@ import { import { newTestamentList, oldTestamentList, usfmFileNames } from 'utils/config' import { checkBookCodeExists, getVerseObjectsForBookAndChapter } from 'utils/helper' + import Left from '/public/left.svg' -import CommunityAudioRecorder from './CommunityAudioRecorder' function CommunityAudio() { const [fontSize, setFontSize] = useState(16) + const [textSpeed, setTextSpeed] = useState(1) + + const { + isRecording, + isPaused, + audioUrl, + startRecording, + stopRecording, + pauseRecording, + resumeRecording, + } = useAudioRecorder() const { user } = useCurrentUser() const [reference, setReference] = useState() @@ -139,19 +151,41 @@ function CommunityAudio() {
- +
-
@@ -160,3 +194,68 @@ function CommunityAudio() { } export default CommunityAudio + +// ? Hooks +function useAudioRecorder() { + const [isRecording, setIsRecording] = useState(false) + const [isPaused, setIsPaused] = useState(false) + const [audioUrl, setAudioUrl] = useState(null) + const mediaRecorder = useRef(null) + const audioChunks = useRef([]) + + const startRecording = useCallback(async () => { + audioChunks.current = [] + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) + mediaRecorder.current = new MediaRecorder(stream) + + mediaRecorder.current.ondataavailable = (event) => { + audioChunks.current.push(event.data) + } + + mediaRecorder.current.onstop = () => { + const audioBlob = new Blob(audioChunks.current, { type: 'audio/wav' }) + const audioUrl = URL.createObjectURL(audioBlob) + setAudioUrl(audioUrl) + } + + mediaRecorder.current.start() + setIsRecording(true) + setIsPaused(false) + } catch (error) { + console.error('Error accessing microphone:', error) + } + }, []) + + const stopRecording = useCallback(() => { + if (mediaRecorder.current) { + mediaRecorder.current.stop() + setIsRecording(false) + setIsPaused(false) + } + }, []) + + const pauseRecording = useCallback(() => { + if (mediaRecorder.current) { + mediaRecorder.current.pause() + setIsPaused(true) + } + }, []) + + const resumeRecording = useCallback(() => { + if (mediaRecorder.current) { + mediaRecorder.current.resume() + setIsPaused(false) + } + }, []) + + return { + isRecording, + isPaused, + audioUrl, + startRecording, + stopRecording, + pauseRecording, + resumeRecording, + } +} diff --git a/components/CommunityAudio/CommunityAudioRecorder.jsx b/components/CommunityAudio/CommunityAudioRecorder.js similarity index 79% rename from components/CommunityAudio/CommunityAudioRecorder.jsx rename to components/CommunityAudio/CommunityAudioRecorder.js index af7485991..c19032edf 100644 --- a/components/CommunityAudio/CommunityAudioRecorder.jsx +++ b/components/CommunityAudio/CommunityAudioRecorder.js @@ -1,22 +1,20 @@ -import { useCallback, useEffect, useRef, useState } from 'react' +import { useCallback, useEffect, useState } from 'react' + import { useTranslation } from 'react-i18next' -function CommunityAudioRecorder({ fontSize, setFontSize }) { - const { - isRecording, - isPaused, - audioUrl, - startRecording, - stopRecording, - pauseRecording, - resumeRecording, - } = useAudioRecorder() +function CommunityAudioRecorder({ + isRecording, + isPaused, + audioUrl, + recordingMethods: { startRecording, stopRecording, pauseRecording, resumeRecording }, + textAdjustment: { fontSize, setFontSize, textSpeed, setTextSpeed }, +}) { const { isPlaying, play, pause } = useAudioPreview(audioUrl) return ( -
+
- +
@@ -50,8 +48,7 @@ export default CommunityAudioRecorder // ? Components -function SpeedSetting() { - const [speed, setSpeed] = useState(1) +function SpeedSetting({ textSpeed, setTextSpeed }) { const [isMounted, setIsMounted] = useState(false) const { t } = useTranslation(['common']) @@ -69,8 +66,8 @@ function SpeedSetting() {
@@ -290,70 +287,6 @@ function StopButton({ isRecording, stopRecording }) { } // ? Hooks -function useAudioRecorder() { - const [isRecording, setIsRecording] = useState(false) - const [isPaused, setIsPaused] = useState(false) - const [audioUrl, setAudioUrl] = useState(null) - const mediaRecorder = useRef(null) - const audioChunks = useRef([]) - - const startRecording = useCallback(async () => { - audioChunks.current = [] - try { - const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) - mediaRecorder.current = new MediaRecorder(stream) - - mediaRecorder.current.ondataavailable = (event) => { - audioChunks.current.push(event.data) - } - - mediaRecorder.current.onstop = () => { - const audioBlob = new Blob(audioChunks.current, { type: 'audio/wav' }) - const audioUrl = URL.createObjectURL(audioBlob) - setAudioUrl(audioUrl) - } - - mediaRecorder.current.start() - setIsRecording(true) - setIsPaused(false) - } catch (error) { - console.error('Error accessing microphone:', error) - } - }, []) - - const stopRecording = useCallback(() => { - if (mediaRecorder.current) { - mediaRecorder.current.stop() - setIsRecording(false) - setIsPaused(false) - } - }, []) - - const pauseRecording = useCallback(() => { - if (mediaRecorder.current) { - mediaRecorder.current.pause() - setIsPaused(true) - } - }, []) - - const resumeRecording = useCallback(() => { - if (mediaRecorder.current) { - mediaRecorder.current.resume() - setIsPaused(false) - } - }, []) - - return { - isRecording, - isPaused, - audioUrl, - startRecording, - stopRecording, - pauseRecording, - resumeRecording, - } -} - function useAudioPreview(audioUrl) { const [isPlaying, setIsPlaying] = useState(false) const [preview, setPreview] = useState(null) diff --git a/components/CommunityAudio/Teleprompter.js b/components/CommunityAudio/Teleprompter.js new file mode 100644 index 000000000..71b12c3da --- /dev/null +++ b/components/CommunityAudio/Teleprompter.js @@ -0,0 +1,215 @@ +import { useCallback, useEffect, useMemo, useRef, useState } from 'react' + +import { useRouter } from 'next/router' + +import { useTranslation } from 'next-i18next' + +import Breadcrumbs from 'components/Breadcrumbs' + +import { useAccess, useGetBooks, useProject } from 'utils/hooks' +import { getVerseCount, getVerseCountOBS } from 'utils/helper' + +function Teleprompter({ + verseObjects, + user, + reference, + isLoading, + isRecording, + isPaused, + stopRecording, + textProperties: { fontSize, textSpeed }, +}) { + const { + push, + query: { bookid, code }, + } = useRouter() + + const [{ isCoordinatorAccess }] = useAccess({ + user_id: user?.id, + code, + }) + const [project] = useProject({ code }) + const { t } = useTranslation() + const [books] = useGetBooks({ code }) + + const [isPlaying, setIsPlaying] = useState(false) + const containerRef = useRef(null) + const animationRef = useRef(null) + const scrollPositionRef = useRef(0) + + const verseCount = useMemo(() => { + if (project?.type === 'obs') { + return getVerseCountOBS(books, reference?.chapter) + } else { + return getVerseCount(books, bookid, reference?.chapter) + } + }, [books, project?.type, bookid, reference?.chapter]) + + const handleReset = useCallback(() => { + setIsPlaying(false) + scrollPositionRef.current = 0 + if (containerRef.current) { + containerRef.current.scrollTop = 0 + } + if (animationRef.current) { + cancelAnimationFrame(animationRef.current) + } + }, []) + + const LoadingSection = () => ( +
+
+ {[...Array(22).keys()].map((el) => ( +
+
+
+ ))} +
+ ) + + const NoContentSection = () => ( + <> +

{t('NoContent')}

+ {isCoordinatorAccess && ( +
+ push({ + pathname: `/projects/${project?.code}`, + query: { properties: bookid, levels: true }, + }) + } + > + {t('CheckLinkResource')} +
+ )} + + ) + + useEffect(() => { + if (isRecording && !isPaused) { + setIsPlaying(true) + } + if (isPaused) { + setIsPlaying(false) + } + + if (!isRecording) { + handleReset() + } + }, [fontSize, textSpeed, isRecording, isPaused]) + + useEffect(() => { + let previousTimestamp = null + + const animate = (timestamp) => { + if (!previousTimestamp) previousTimestamp = timestamp + if (!containerRef.current) return + + const elapsed = timestamp - previousTimestamp + const speed = textSpeed * 0.004 + + scrollPositionRef.current += elapsed * speed + containerRef.current.scrollTop = scrollPositionRef.current + + previousTimestamp = timestamp + + if ( + containerRef.current.scrollTop >= + containerRef.current.scrollHeight - containerRef.current.clientHeight + ) { + stopRecording() + setIsPlaying(false) + handleReset() + return + } + + if (isPlaying) { + animationRef.current = requestAnimationFrame(animate) + } + } + + if (isPlaying) { + animationRef.current = requestAnimationFrame(animate) + } + + return () => { + if (animationRef.current) { + cancelAnimationFrame(animationRef.current) + } + } + }, [isPlaying, textSpeed]) + + return ( +
+
+ +
+ {reference?.chapter && ( +
{`${t('books:' + bookid)} ${ + reference?.chapter + }`}
+ )} +
+
+ +
+ {!isLoading ? ( + verseObjects ? ( +
+ {Array.from({ length: Math.min(verseCount + 1, 200) }).map((_, index) => { + const verseIndex = verseObjects?.verseObjects?.findIndex( + (verse) => parseInt(verse.verse) === index + ) + const text = + verseObjects?.verseObjects && verseIndex !== -1 + ? verseObjects.verseObjects[verseIndex].text + : ' ' + + return ( +
+ {index !== 0 && {index}} +

{text}

+
+ ) + })} + {verseObjects?.verseObjects && ( +
+ {verseObjects.verseObjects.find((verse) => verse.verse === 200)?.text} +
+ )} +
+ ) : ( + + ) + ) : ( + + )} + +
+
+
+
+ ) +} + +export default Teleprompter diff --git a/components/CommunityAudio/Verses.jsx b/components/CommunityAudio/Verses.jsx deleted file mode 100644 index f5946c404..000000000 --- a/components/CommunityAudio/Verses.jsx +++ /dev/null @@ -1,128 +0,0 @@ -import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react' - -import { useRouter } from 'next/router' -import Link from 'next/link' - -import { useTranslation } from 'next-i18next' - -import { Disclosure, Combobox, Tab, Transition } from '@headlessui/react' - -import Breadcrumbs from 'components/Breadcrumbs' - -import { useAccess, useGetBooks, useProject } from 'utils/hooks' - -import { getVerseCount, getVerseCountOBS } from 'utils/helper' - -import Gear from '/public/gear.svg' - -function Verses({ verseObjects, user, reference, isLoading, fontSize }) { - const { - push, - query: { bookid, code }, - } = useRouter() - - const [{ isCoordinatorAccess }] = useAccess({ - user_id: user?.id, - code, - }) - const [project] = useProject({ code }) - const { t } = useTranslation() - const [books] = useGetBooks({ code }) - - const verseCount = useMemo(() => { - if (project?.type === 'obs') { - return getVerseCountOBS(books, reference?.chapter) - } else { - return getVerseCount(books, bookid, reference?.chapter) - } - }, [books, project?.type, bookid, reference?.chapter]) - - return ( -
-
- -
- {reference?.chapter && ( -
{`${t('books:' + bookid)} ${ - reference?.chapter - }`}
- )} - - {/* */} - -
- {!isLoading ? ( - verseObjects ? ( - <> - {Array.from({ length: Math.min(verseCount + 1, 200) }).map((_, index) => { - const verseIndex = verseObjects?.verseObjects?.findIndex( - (verse) => parseInt(verse.verse) === index - ) - const text = - verseObjects?.verseObjects && verseIndex !== -1 - ? verseObjects.verseObjects[verseIndex].text - : ' ' - - return ( -
- {index !== 0 && {index}} -

{text}

-
- ) - })} - {verseObjects?.verseObjects && ( -
- {verseObjects.verseObjects.find((verse) => verse.verse === 200)?.text} -
- )} - - ) : ( - <> -

{t('NoContent')}

- {isCoordinatorAccess && ( -
- push({ - pathname: `/projects/${project?.code}`, - query: { - properties: bookid, - levels: true, - }, - }) - } - > - {t('CheckLinkResource')} - -
- )} - - ) - ) : ( -
-
- {[...Array(22).keys()].map((el) => ( -
-
-
- ))} -
- )} -
-
- ) -} - -export default Verses diff --git a/styles/globals.css b/styles/globals.css index 34ff01c75..51602d3ec 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -421,3 +421,21 @@ .progress-light path { @apply stroke-th-secondary-10 } + +.verse-container { + position: relative; + padding: 1rem; +} + +.verse-line { + transition: all 0.3s ease; +} + +.scrollbar-hide { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +.scrollbar-hide::-webkit-scrollbar { + display: none; /* Chrome, Safari and Opera */ +} From 4df1b183f4566c4de7d99ee4b5ed0ba69d357c17 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Mon, 18 Nov 2024 18:46:47 +0500 Subject: [PATCH 11/23] feat: fixed conflict --- components/CommunityAudio/BookListReader.js | 2 +- components/CommunityAudio/CommunityAudio.js | 2 +- components/Project/BookList/Testament.js | 15 +++++++++++++-- 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/components/CommunityAudio/BookListReader.js b/components/CommunityAudio/BookListReader.js index 2aa58d78f..7c8fa30e5 100644 --- a/components/CommunityAudio/BookListReader.js +++ b/components/CommunityAudio/BookListReader.js @@ -11,7 +11,7 @@ import { useGetChaptersTranslate } from 'utils/hooks' import { checkChapterVersesExist } from 'utils/helper' -import Down from '/public/arrow-down.svg' +import Down from 'public/icons/arrow-down.svg' function BookListReader({ books, setReference, reference, project }) { const [currentBook, setCurrentBook] = useState(null) diff --git a/components/CommunityAudio/CommunityAudio.js b/components/CommunityAudio/CommunityAudio.js index 08038442d..d4f64a53d 100644 --- a/components/CommunityAudio/CommunityAudio.js +++ b/components/CommunityAudio/CommunityAudio.js @@ -19,7 +19,7 @@ import { import { newTestamentList, oldTestamentList, usfmFileNames } from 'utils/config' import { checkBookCodeExists, getVerseObjectsForBookAndChapter } from 'utils/helper' -import Left from '/public/left.svg' +import Left from 'public/icons/left.svg' function CommunityAudio() { const [fontSize, setFontSize] = useState(16) diff --git a/components/Project/BookList/Testament.js b/components/Project/BookList/Testament.js index fd2d98259..6256bb1e9 100644 --- a/components/Project/BookList/Testament.js +++ b/components/Project/BookList/Testament.js @@ -19,6 +19,7 @@ import DownloadIcon from 'public/icons/download.svg' import Elipsis from 'public/icons/elipsis.svg' import Gear from 'public/icons/gear.svg' import Play from 'public/icons/play.svg' +import Recorder from 'public/icons/recorder.svg' function Testament({ bookList, @@ -222,7 +223,7 @@ function Testament({ }} /> )} - {isBookCreated && ( + {/* {isBookCreated && ( @@ -232,7 +233,17 @@ function Testament({ }) } /> - )} + )} */} + + + push({ + pathname: `/projects/${project?.code}/books/${book}/community-audio`, + shallow: true, + }) + } + /> {isCoordinatorAccess && ( <> {isBookCreated && ( From 8ec0fc0d3d346e44be43ef2bdd9cd4c36e22973b Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Tue, 19 Nov 2024 09:25:49 +0500 Subject: [PATCH 12/23] feat: max speed 15 --- components/CommunityAudio/CommunityAudioRecorder.js | 2 +- components/CommunityAudio/Teleprompter.js | 2 +- components/CommunityAudio/Teleprompter.jsx | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) delete mode 100644 components/CommunityAudio/Teleprompter.jsx diff --git a/components/CommunityAudio/CommunityAudioRecorder.js b/components/CommunityAudio/CommunityAudioRecorder.js index c19032edf..b4d2025ed 100644 --- a/components/CommunityAudio/CommunityAudioRecorder.js +++ b/components/CommunityAudio/CommunityAudioRecorder.js @@ -53,7 +53,7 @@ function SpeedSetting({ textSpeed, setTextSpeed }) { const { t } = useTranslation(['common']) const minSpeed = 1 - const maxSpeed = 50 + const maxSpeed = 15 useEffect(() => { setIsMounted(true) diff --git a/components/CommunityAudio/Teleprompter.js b/components/CommunityAudio/Teleprompter.js index 71b12c3da..e42ceb367 100644 --- a/components/CommunityAudio/Teleprompter.js +++ b/components/CommunityAudio/Teleprompter.js @@ -158,7 +158,7 @@ function Teleprompter({ }`}
)}
-
+
Date: Wed, 20 Nov 2024 10:02:01 +0500 Subject: [PATCH 13/23] feat: added filename --- components/CommunityAudio/CommunityAudio.js | 40 ++++++++----- .../CommunityAudio/CommunityAudioRecorder.js | 56 ++++++++++--------- components/CommunityAudio/Teleprompter.js | 22 ++++---- components/Project/BookList/Testament.js | 17 ++---- 4 files changed, 71 insertions(+), 64 deletions(-) diff --git a/components/CommunityAudio/CommunityAudio.js b/components/CommunityAudio/CommunityAudio.js index d4f64a53d..cdc4d2e31 100644 --- a/components/CommunityAudio/CommunityAudio.js +++ b/components/CommunityAudio/CommunityAudio.js @@ -1,13 +1,20 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react' -import { useRouter } from 'next/router' import Link from 'next/link' +import { useRouter } from 'next/router' + +import { useTranslation } from 'react-i18next' -import Teleprompter from './Teleprompter' -import BookListReader from './BookListReader' import ParticipantInfo from 'components/Project/ParticipantInfo' + +import BookListReader from './BookListReader' import CommunityAudioRecorder from './CommunityAudioRecorder' +import Teleprompter from './Teleprompter' + import { useCurrentUser } from 'lib/UserContext' + +import { newTestamentList, oldTestamentList, usfmFileNames } from 'utils/config' +import { checkBookCodeExists, getVerseObjectsForBookAndChapter } from 'utils/helper' import { useAccess, useGetBooks, @@ -16,14 +23,14 @@ import { useProject, } from 'utils/hooks' -import { newTestamentList, oldTestamentList, usfmFileNames } from 'utils/config' -import { checkBookCodeExists, getVerseObjectsForBookAndChapter } from 'utils/helper' - import Left from 'public/icons/left.svg' function CommunityAudio() { const [fontSize, setFontSize] = useState(16) const [textSpeed, setTextSpeed] = useState(1) + const { t } = useTranslation(['books']) + const router = useRouter() + const currentLang = router.locale const { isRecording, @@ -48,7 +55,6 @@ function CommunityAudio() { user_id: user?.id, code: project?.code, }) - const [chapters] = useGetChaptersTranslate({ code }) const resource = useMemo(() => { @@ -131,10 +137,17 @@ function CommunityAudio() { } }, [bookid, books]) + const audioName = + reference && + `${t(`books:${reference.bookid}_abbr`)}_${reference.chapter}_${currentLang === 'ru' ? `${new Date().getDate()}${new Date().getMonth()}` : `${new Date().getMonth()}${new Date().getDate()}`}${new Date().getFullYear().toString().slice(2)}` + + console.log(reference) + console.log(chapters) + return ( -
-
-
+
+
+
-
+
-
+
- +
-
+
+
@@ -34,6 +35,7 @@ function CommunityAudioRecorder({
-
+
+
+
+ ) +} diff --git a/components/CommunityAudio/CommunityAudio.js b/components/CommunityAudio/CommunityAudio.js index 6ffd675ad..fa8b93366 100644 --- a/components/CommunityAudio/CommunityAudio.js +++ b/components/CommunityAudio/CommunityAudio.js @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import { useEffect, useMemo, useRef, useState } from 'react' import Link from 'next/link' import { useRouter } from 'next/router' @@ -10,6 +10,7 @@ import ParticipantInfo from 'components/Project/ParticipantInfo' import BookListReader from './BookListReader' import CommunityAudioRecorder from './CommunityAudioRecorder' import Teleprompter from './Teleprompter' +import { useAudioRecorder } from './useAudio' import { useCurrentUser } from 'lib/UserContext' @@ -205,69 +206,3 @@ function CommunityAudio() { } export default CommunityAudio - -// ? Hooks -function useAudioRecorder() { - const [isRecording, setIsRecording] = useState(false) - const [isPaused, setIsPaused] = useState(false) - const [audioUrl, setAudioUrl] = useState(null) - const mediaRecorder = useRef(null) - const audioChunks = useRef([]) - - const startRecording = useCallback(async () => { - audioChunks.current = [] - - try { - const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) - mediaRecorder.current = new MediaRecorder(stream) - - mediaRecorder.current.ondataavailable = (event) => { - audioChunks.current.push(event.data) - } - - mediaRecorder.current.onstop = () => { - const audioBlob = new Blob(audioChunks.current, { type: 'audio/mpeg' }) - const audioUrl = URL.createObjectURL(audioBlob) - setAudioUrl(audioUrl) - } - - mediaRecorder.current.start() - setIsRecording(true) - setIsPaused(false) - } catch (error) { - console.error('Error accessing microphone:', error) - } - }, []) - - const stopRecording = useCallback(() => { - if (mediaRecorder.current) { - mediaRecorder.current.stop() - setIsRecording(false) - setIsPaused(false) - } - }, []) - - const pauseRecording = useCallback(() => { - if (mediaRecorder.current) { - mediaRecorder.current.pause() - setIsPaused(true) - } - }, []) - - const resumeRecording = useCallback(() => { - if (mediaRecorder.current) { - mediaRecorder.current.resume() - setIsPaused(false) - } - }, []) - - return { - isRecording, - isPaused, - audioUrl, - startRecording, - stopRecording, - pauseRecording, - resumeRecording, - } -} diff --git a/components/CommunityAudio/CommunityAudioRecorder.js b/components/CommunityAudio/CommunityAudioRecorder.js index d3552439c..01eb9f0ab 100644 --- a/components/CommunityAudio/CommunityAudioRecorder.js +++ b/components/CommunityAudio/CommunityAudioRecorder.js @@ -1,7 +1,15 @@ -import { useCallback, useEffect, useState } from 'react' +import { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' +import AudioPreview from './AudioPreview' +import FontSizeSetting from './FontSizeSetting' +import PauseButton from './PauseButton' +import RecordButton from './RecordButton' +import SpeedSetting from './SpeedSetting' +import StopButton from './StopButton' +import { useAudioPreview } from './useAudio' + function CommunityAudioRecorder({ isRecording, isPaused, @@ -47,283 +55,3 @@ function CommunityAudioRecorder({ } export default CommunityAudioRecorder - -// ? Components - -function SpeedSetting({ textSpeed, setTextSpeed }) { - const [isMounted, setIsMounted] = useState(false) - const { t } = useTranslation(['common']) - - const minSpeed = 1 - const maxSpeed = 15 - - useEffect(() => { - setIsMounted(true) - }, []) - - if (!isMounted) return null - - return ( -
-
- - -
-
-

- - {textSpeed < 10 ? `0${textSpeed}` : textSpeed} - {' '} - {t('TextSpeed')} -

-
-
- ) -} - -function FontSizeSetting({ fontSize, setFontSize }) { - const [isMounted, setIsMounted] = useState(false) - - const { t } = useTranslation(['common']) - - const minSize = 12 - const maxSize = 48 - - useEffect(() => { - setIsMounted(true) - }, []) - - if (!isMounted) return null - - return ( -
-
- - -
-
-

- {fontSize} {t('FontSize')} -

-
-
- ) -} - -function AudioPreview({ audioUrl, onPlay, onPause, isPlaying, audioName }) { - return ( -
-

{audioName}

- - - - - - -
- ) -} - -function PauseButton({ isPaused, isRecording, onPause, onResume }) { - return ( - - ) -} - -function RecordButton({ isPaused, isRecording, startRecording, resumeRecording }) { - return ( - - ) -} - -function StopButton({ isRecording, stopRecording }) { - return ( - - ) -} - -// ? Hooks -function useAudioPreview(audioUrl) { - const [isPlaying, setIsPlaying] = useState(false) - const [preview, setPreview] = useState(null) - - useEffect(() => { - if (audioUrl) { - const audio = new Audio(audioUrl) - setPreview(audio) - - audio.addEventListener('ended', () => setIsPlaying(false)) - - return () => audio.removeEventListener('ended', () => setIsPlaying(false)) - } - }, [audioUrl]) - - const play = useCallback(() => { - if (preview) { - preview.play() - setIsPlaying(true) - } - }, [preview]) - - const pause = useCallback(() => { - if (preview) { - preview.pause() - setIsPlaying(false) - } - }, [preview]) - - return { isPlaying, play, pause } -} diff --git a/components/CommunityAudio/FontSizeSetting.js b/components/CommunityAudio/FontSizeSetting.js new file mode 100644 index 000000000..1230c2b0c --- /dev/null +++ b/components/CommunityAudio/FontSizeSetting.js @@ -0,0 +1,44 @@ +import { useEffect, useState } from 'react' + +import { useTranslation } from 'react-i18next' + +export default function FontSizeSetting({ fontSize, setFontSize }) { + const [isMounted, setIsMounted] = useState(false) + + const { t } = useTranslation(['common']) + + const minSize = 12 + const maxSize = 48 + + useEffect(() => { + setIsMounted(true) + }, []) + + if (!isMounted) return null + + return ( +
+
+ + +
+
+

+ {fontSize} {t('FontSize')} +

+
+
+ ) +} diff --git a/components/CommunityAudio/PauseButton.js b/components/CommunityAudio/PauseButton.js new file mode 100644 index 000000000..25eceb046 --- /dev/null +++ b/components/CommunityAudio/PauseButton.js @@ -0,0 +1,24 @@ +export default function PauseButton({ isPaused, isRecording, onPause, onResume }) { + return ( + + ) +} diff --git a/components/CommunityAudio/RecordButton.js b/components/CommunityAudio/RecordButton.js new file mode 100644 index 000000000..5212cdc83 --- /dev/null +++ b/components/CommunityAudio/RecordButton.js @@ -0,0 +1,29 @@ +export default function RecordButton({ + isPaused, + isRecording, + startRecording, + resumeRecording, +}) { + return ( + + ) +} diff --git a/components/CommunityAudio/SpeedSetting.js b/components/CommunityAudio/SpeedSetting.js new file mode 100644 index 000000000..6fa9e5a87 --- /dev/null +++ b/components/CommunityAudio/SpeedSetting.js @@ -0,0 +1,68 @@ +import { useEffect, useState } from 'react' + +import { useTranslation } from 'react-i18next' + +export default function SpeedSetting({ textSpeed, setTextSpeed }) { + const [isMounted, setIsMounted] = useState(false) + const { t } = useTranslation(['common']) + + const minSpeed = 1 + const maxSpeed = 15 + + useEffect(() => { + setIsMounted(true) + }, []) + + if (!isMounted) return null + + return ( +
+
+ + +
+
+

+ + {textSpeed < 10 ? `0${textSpeed}` : textSpeed} + {' '} + {t('TextSpeed')} +

+
+
+ ) +} diff --git a/components/CommunityAudio/StopButton.js b/components/CommunityAudio/StopButton.js new file mode 100644 index 000000000..ff24a4a7f --- /dev/null +++ b/components/CommunityAudio/StopButton.js @@ -0,0 +1,24 @@ +export default function StopButton({ isRecording, stopRecording }) { + return ( + + ) +} diff --git a/components/CommunityAudio/Teleprompter.js b/components/CommunityAudio/Teleprompter.js index cb39ef3c9..68741cd4c 100644 --- a/components/CommunityAudio/Teleprompter.js +++ b/components/CommunityAudio/Teleprompter.js @@ -1,15 +1,14 @@ -import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react' +import { useCallback, useEffect, useMemo, useRef, useState } from 'react' -import Link from 'next/link' import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' +import Breadcrumbs from './TeleprompterBreadCrumbs' + import { getVerseCount, getVerseCountOBS } from 'utils/helper' import { useAccess, useGetBooks, useProject } from 'utils/hooks' -import LeftArrow from 'public/icons/left.svg' - function Teleprompter({ verseObjects, user, @@ -164,7 +163,9 @@ function Teleprompter({ {!isLoading ? ( verseObjects ? (
-

{t('Chapter') + ' ' + reference?.chapter}

+ {reference?.chapter && ( +

{t('Chapter') + ' ' + reference?.chapter}

+ )} {Array.from({ length: Math.min(verseCount + 1, 200) }).map((_, index) => { const verseIndex = verseObjects?.verseObjects?.findIndex( @@ -207,17 +208,3 @@ function Teleprompter({ } export default Teleprompter - -// ? Components -function Breadcrumbs({ full, title, backLink }) { - return ( -
-
- - - -

{title}

-
-
- ) -} diff --git a/components/CommunityAudio/TeleprompterBreadCrumbs.js b/components/CommunityAudio/TeleprompterBreadCrumbs.js new file mode 100644 index 000000000..67df3dac9 --- /dev/null +++ b/components/CommunityAudio/TeleprompterBreadCrumbs.js @@ -0,0 +1,16 @@ +import Link from 'next/link' + +import LeftArrow from 'public/icons/left.svg' + +export default function Breadcrumbs({ full, title, backLink }) { + return ( +
+
+ + + +

{title}

+
+
+ ) +} diff --git a/components/CommunityAudio/useAudio.js b/components/CommunityAudio/useAudio.js new file mode 100644 index 000000000..2938637cf --- /dev/null +++ b/components/CommunityAudio/useAudio.js @@ -0,0 +1,103 @@ +import { useCallback, useEffect, useRef, useState } from 'react' + +import toast from 'react-hot-toast' +import { useTranslation } from 'react-i18next' + +export function useAudioRecorder() { + const [isRecording, setIsRecording] = useState(false) + const [isPaused, setIsPaused] = useState(false) + const [audioUrl, setAudioUrl] = useState(null) + const mediaRecorder = useRef(null) + const audioChunks = useRef([]) + const { t } = useTranslation(['audio']) + + const startRecording = useCallback(async () => { + audioChunks.current = [] + + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) + mediaRecorder.current = new MediaRecorder(stream) + + mediaRecorder.current.ondataavailable = (event) => { + audioChunks.current.push(event.data) + } + + mediaRecorder.current.onstop = () => { + const audioBlob = new Blob(audioChunks.current, { type: 'audio/mpeg' }) + const audioUrl = URL.createObjectURL(audioBlob) + setAudioUrl(audioUrl) + } + + mediaRecorder.current.start() + setIsRecording(true) + setIsPaused(false) + } catch (error) { + toast.error(t('audio:TurnMicrophone'), { position: 'bottom-right' }) + console.error('Error accessing microphone:', error) + } + }, []) + + const stopRecording = useCallback(() => { + if (mediaRecorder.current) { + mediaRecorder.current.stop() + setIsRecording(false) + setIsPaused(false) + } + }, []) + + const pauseRecording = useCallback(() => { + if (mediaRecorder.current) { + mediaRecorder.current.pause() + setIsPaused(true) + } + }, []) + + const resumeRecording = useCallback(() => { + if (mediaRecorder.current) { + mediaRecorder.current.resume() + setIsPaused(false) + } + }, []) + + return { + isRecording, + isPaused, + audioUrl, + startRecording, + stopRecording, + pauseRecording, + resumeRecording, + } +} + +export function useAudioPreview(audioUrl) { + const [isPlaying, setIsPlaying] = useState(false) + const [preview, setPreview] = useState(null) + + useEffect(() => { + if (audioUrl) { + const audio = new Audio(audioUrl) + setPreview(audio) + + audio.addEventListener('ended', () => setIsPlaying(false)) + + return () => audio.removeEventListener('ended', () => setIsPlaying(false)) + } + }, [audioUrl]) + + const play = useCallback(() => { + if (preview) { + preview.play() + setIsPlaying(true) + } + }, [preview]) + + const pause = useCallback(() => { + if (preview) { + preview.pause() + setIsPlaying(false) + } + }, [preview]) + + return { isPlaying, play, pause } +} diff --git a/pages/projects/[code]/books/[bookid]/community-audio/index.js b/pages/projects/[code]/books/[bookid]/community-audio/index.js index 1b86b64bb..25b0fb4d1 100644 --- a/pages/projects/[code]/books/[bookid]/community-audio/index.js +++ b/pages/projects/[code]/books/[bookid]/community-audio/index.js @@ -20,6 +20,7 @@ export async function getServerSideProps({ locale, query }) { 'users', 'about', 'start-page', + 'audio', ])), }, } From 8739e921e94768d3ea86d2e2769d5ea89ed114c0 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Mon, 25 Nov 2024 22:21:19 +0500 Subject: [PATCH 18/23] feat: removed lamejs --- components/CommunityAudio/CommunityAudioRecorder.js | 4 ---- package.json | 1 - yarn.lock | 12 ------------ 3 files changed, 17 deletions(-) diff --git a/components/CommunityAudio/CommunityAudioRecorder.js b/components/CommunityAudio/CommunityAudioRecorder.js index 01eb9f0ab..cc9dc1f7c 100644 --- a/components/CommunityAudio/CommunityAudioRecorder.js +++ b/components/CommunityAudio/CommunityAudioRecorder.js @@ -1,7 +1,3 @@ -import { useEffect, useState } from 'react' - -import { useTranslation } from 'react-i18next' - import AudioPreview from './AudioPreview' import FontSizeSetting from './FontSizeSetting' import PauseButton from './PauseButton' diff --git a/package.json b/package.json index 00f0c8edc..143a6a911 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,6 @@ "i18next": "^23.11.3", "js-yaml": "^4.1.0", "jszip": "^3.10.1", - "lamejs": "1.2.0", "localforage": "^1.10.0", "next": "^14.2.14", "next-i18next": "^14.0.3", diff --git a/yarn.lock b/yarn.lock index aedc0d876..cacaf8162 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7431,13 +7431,6 @@ kleur@^4.0.3: resolved "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz" integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ== -lamejs@1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/lamejs/-/lamejs-1.2.0.tgz#0259f83db4666141a7b671b8caa6369d95177d08" - integrity sha512-xEYvsB2sZ9jIccqfUQpQEBdB6UYQDG/ta2xQkH7oEpENb0JHFJii965WVF8ErUMdZzoe7EdIruz1WpICdhZ9Pw== - dependencies: - use-strict "1.0.1" - language-subtag-registry@^0.3.20: version "0.3.23" resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz#23529e04d9e3b74679d70142df3fd2eb6ec572e7" @@ -11185,11 +11178,6 @@ use-latest@^1.2.1: dependencies: use-isomorphic-layout-effect "^1.1.1" -use-strict@1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/use-strict/-/use-strict-1.0.1.tgz#0bb80d94f49a4a05192b84a8c7d34e95f1a7e3a0" - integrity sha512-IeiWvvEXfW5ltKVMkxq6FvNf2LojMKvB2OCeja6+ct24S1XOmQw2dGr2JyndwACWAGJva9B7yPHwAmeA9QCqAQ== - use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0: version "1.2.0" resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz" From 4554fe6771c47457f0614c0607855f4a41147a0c Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Thu, 12 Dec 2024 12:50:27 +0500 Subject: [PATCH 19/23] feat: fixed on comments, added lamejs --- components/CommunityAudio/AudioPreview.js | 36 ++++------------------- components/CommunityAudio/PauseButton.js | 15 ++-------- components/CommunityAudio/SpeedSetting.js | 4 +-- package.json | 1 + public/icons/audioPause.svg | 12 ++++++++ public/icons/audioPlay.svg | 12 ++++++++ public/icons/pause.svg | 2 +- public/locales/en/common.json | 6 ---- public/locales/es/common.json | 6 ---- public/locales/ru/common.json | 6 ---- public/updates_en.md | 5 ++++ public/updates_es.md | 5 ++++ public/updates_ru.md | 5 ++++ yarn.lock | 12 ++++++++ 14 files changed, 63 insertions(+), 64 deletions(-) create mode 100644 public/icons/audioPause.svg create mode 100644 public/icons/audioPlay.svg diff --git a/components/CommunityAudio/AudioPreview.js b/components/CommunityAudio/AudioPreview.js index 18db2d968..50ec073e3 100644 --- a/components/CommunityAudio/AudioPreview.js +++ b/components/CommunityAudio/AudioPreview.js @@ -1,3 +1,6 @@ +import AudioPause from 'public/icons/audioPause.svg' +import AudioPlay from 'public/icons/audioPlay.svg' + export default function AudioPreview({ audioUrl, onPlay, @@ -12,12 +15,7 @@ export default function AudioPreview({ }`} >

{audioName}

- + {isPlaying ? ( - - - + ) : ( - - - + )}
diff --git a/components/CommunityAudio/PauseButton.js b/components/CommunityAudio/PauseButton.js index 25eceb046..583409291 100644 --- a/components/CommunityAudio/PauseButton.js +++ b/components/CommunityAudio/PauseButton.js @@ -1,3 +1,5 @@ +import AudioPause from 'public/icons/audioPause.svg' + export default function PauseButton({ isPaused, isRecording, onPause, onResume }) { return ( ) } diff --git a/components/CommunityAudio/SpeedSetting.js b/components/CommunityAudio/SpeedSetting.js index 6fa9e5a87..844ded1b4 100644 --- a/components/CommunityAudio/SpeedSetting.js +++ b/components/CommunityAudio/SpeedSetting.js @@ -57,9 +57,7 @@ export default function SpeedSetting({ textSpeed, setTextSpeed }) {

- - {textSpeed < 10 ? `0${textSpeed}` : textSpeed} - {' '} + {textSpeed.toString().padStart(2, '0')}{' '} {t('TextSpeed')}

diff --git a/package.json b/package.json index 143a6a911..00f0c8edc 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "i18next": "^23.11.3", "js-yaml": "^4.1.0", "jszip": "^3.10.1", + "lamejs": "1.2.0", "localforage": "^1.10.0", "next": "^14.2.14", "next-i18next": "^14.0.3", diff --git a/public/icons/audioPause.svg b/public/icons/audioPause.svg new file mode 100644 index 000000000..3950d6bd2 --- /dev/null +++ b/public/icons/audioPause.svg @@ -0,0 +1,12 @@ + + + diff --git a/public/icons/audioPlay.svg b/public/icons/audioPlay.svg new file mode 100644 index 000000000..ac1ef27c4 --- /dev/null +++ b/public/icons/audioPlay.svg @@ -0,0 +1,12 @@ + + + diff --git a/public/icons/pause.svg b/public/icons/pause.svg index 7b441d036..8972bb4c2 100644 --- a/public/icons/pause.svg +++ b/public/icons/pause.svg @@ -1,3 +1,3 @@ - + diff --git a/public/locales/en/common.json b/public/locales/en/common.json index d4a9df696..558b0325b 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -192,12 +192,6 @@ "WordExist": "Duplicated word exists:", "WrongResource": "Wrong resource", "Yes": "Yes", - "Symbols": "Symbols", - "Account": "Account", - "Projects": "Projects", - "CreateProject": "Create project", - "About": "About", - "Language": "Language", "TextSpeed": "Text speed", "FontSize": "Font size" } diff --git a/public/locales/es/common.json b/public/locales/es/common.json index 77705a561..2e6679550 100644 --- a/public/locales/es/common.json +++ b/public/locales/es/common.json @@ -192,12 +192,6 @@ "WordExist": "Duplicated word exists:", "WrongResource": "Wrong resource", "Yes": "Yes", - "Symbols": "Símbolos", - "Account": "Cuenta", - "Projects": "Proyectos", - "CreateProject": "Crear un proyecto", - "About": "Sobre el proyecto", - "Language": "Idioma", "TextSpeed": "Velocidad del texto", "FontSize": "Tamaño de letra" } diff --git a/public/locales/ru/common.json b/public/locales/ru/common.json index aad71881a..150b41cf1 100644 --- a/public/locales/ru/common.json +++ b/public/locales/ru/common.json @@ -192,12 +192,6 @@ "WordExist": "Такое слово уже существует:", "WrongResource": "Ошибка загрузки ресурса", "Yes": "Да", - "Symbols": "Символы", - "Account": "Аккаунт", - "Projects": "Проекты", - "CreateProject": "Создать проект", - "About": "О проекте", - "Language": "Язык", "TextSpeed": "Прокрутка текста", "FontSize": "Размер текста" } diff --git a/public/updates_en.md b/public/updates_en.md index c7ea57021..9e9ab07c4 100644 --- a/public/updates_en.md +++ b/public/updates_en.md @@ -8,6 +8,11 @@ - inside tWords, cross-references between words work - links to articles of the Translation Academy work inside tWords and tNotes +## Date: 12/11/2024 + +### **Added:** +- community audio + # Version 0.25.1 ## Date: 11/08/2024 diff --git a/public/updates_es.md b/public/updates_es.md index f19d96f6b..7c7fc3640 100644 --- a/public/updates_es.md +++ b/public/updates_es.md @@ -8,6 +8,11 @@ - dentro de tWords funcionan los enlaces cruzados entre palabras - dentro de tWords y tNotes funcionan enlaces a artículos De la Academia de traducción +## Date: 12/11/2024 + +### **Added:** +- audio comunitario + # Versión 0.25.1 ## Date: 11/08/2024 diff --git a/public/updates_ru.md b/public/updates_ru.md index f0b319d59..b13c4148d 100644 --- a/public/updates_ru.md +++ b/public/updates_ru.md @@ -8,6 +8,11 @@ - внутри tWords работают перекрестные ссылки между словами - внутри tWords и tNotes работают ссылки на статьи Академии перевода +## Дата: 11.12.2024 + +### **Добавлено:** +- аудио сообщества + # Версия 0.25.1 ## Date: 08.11.2024 diff --git a/yarn.lock b/yarn.lock index cacaf8162..aedc0d876 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7431,6 +7431,13 @@ kleur@^4.0.3: resolved "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz" integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ== +lamejs@1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/lamejs/-/lamejs-1.2.0.tgz#0259f83db4666141a7b671b8caa6369d95177d08" + integrity sha512-xEYvsB2sZ9jIccqfUQpQEBdB6UYQDG/ta2xQkH7oEpENb0JHFJii965WVF8ErUMdZzoe7EdIruz1WpICdhZ9Pw== + dependencies: + use-strict "1.0.1" + language-subtag-registry@^0.3.20: version "0.3.23" resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz#23529e04d9e3b74679d70142df3fd2eb6ec572e7" @@ -11178,6 +11185,11 @@ use-latest@^1.2.1: dependencies: use-isomorphic-layout-effect "^1.1.1" +use-strict@1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/use-strict/-/use-strict-1.0.1.tgz#0bb80d94f49a4a05192b84a8c7d34e95f1a7e3a0" + integrity sha512-IeiWvvEXfW5ltKVMkxq6FvNf2LojMKvB2OCeja6+ct24S1XOmQw2dGr2JyndwACWAGJva9B7yPHwAmeA9QCqAQ== + use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0: version "1.2.0" resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz" From 392500d8e21e8cb2377f43cca5e83208327fd33c Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Thu, 12 Dec 2024 14:30:22 +0500 Subject: [PATCH 20/23] feat: mp3 converter --- components/CommunityAudio/useAudio.js | 49 +++++++++++++++++++++++---- 1 file changed, 43 insertions(+), 6 deletions(-) diff --git a/components/CommunityAudio/useAudio.js b/components/CommunityAudio/useAudio.js index 2938637cf..aafb75122 100644 --- a/components/CommunityAudio/useAudio.js +++ b/components/CommunityAudio/useAudio.js @@ -1,7 +1,7 @@ import { useCallback, useEffect, useRef, useState } from 'react' +import { Mp3Encoder } from 'lamejs' import toast from 'react-hot-toast' -import { useTranslation } from 'react-i18next' export function useAudioRecorder() { const [isRecording, setIsRecording] = useState(false) @@ -11,6 +11,44 @@ export function useAudioRecorder() { const audioChunks = useRef([]) const { t } = useTranslation(['audio']) + const encodeToMp3 = async (chunks) => { + try { + const audioBlob = new Blob(chunks, { type: 'audio/webm' }) + const arrayBuffer = await audioBlob.arrayBuffer() + + const audioContext = new AudioContext() + const audioBuffer = await audioContext.decodeAudioData(arrayBuffer) + + const mp3Data = [] + const encoder = new Mp3Encoder(1, audioBuffer.sampleRate, 128) + + const samples = audioBuffer.getChannelData(0) + const buffer = new Int16Array(samples.length) + + for (let i = 0; i < samples.length; i++) { + buffer[i] = samples[i] * 32767 + } + + let sampleIndex = 0 + while (sampleIndex < buffer.length) { + const sampleChunk = buffer.subarray(sampleIndex, sampleIndex + 1152) + const mp3Chunk = encoder.encodeBuffer(sampleChunk) + if (mp3Chunk.length > 0) mp3Data.push(new Uint8Array(mp3Chunk)) + sampleIndex += 1152 + } + + const mp3Final = encoder.flush() + if (mp3Final.length > 0) mp3Data.push(new Uint8Array(mp3Final)) + + const mp3Blob = new Blob(mp3Data, { type: 'audio/mp3' }) + return URL.createObjectURL(mp3Blob) + } catch (error) { + console.error('Error encoding MP3:', error) + toast.error(t('audio:EncodingError'), { position: 'bottom-right' }) + return null + } + } + const startRecording = useCallback(async () => { audioChunks.current = [] @@ -22,10 +60,9 @@ export function useAudioRecorder() { audioChunks.current.push(event.data) } - mediaRecorder.current.onstop = () => { - const audioBlob = new Blob(audioChunks.current, { type: 'audio/mpeg' }) - const audioUrl = URL.createObjectURL(audioBlob) - setAudioUrl(audioUrl) + mediaRecorder.current.onstop = async () => { + const mp3Url = await encodeToMp3(audioChunks.current) + setAudioUrl(mp3Url) } mediaRecorder.current.start() @@ -35,7 +72,7 @@ export function useAudioRecorder() { toast.error(t('audio:TurnMicrophone'), { position: 'bottom-right' }) console.error('Error accessing microphone:', error) } - }, []) + }, [t]) const stopRecording = useCallback(() => { if (mediaRecorder.current) { From 59c387e015710acd1bfa4a8d6d5059b23025509b Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Fri, 13 Dec 2024 17:13:45 +0500 Subject: [PATCH 21/23] feat: added recorder loading after recording stopped --- components/CommunityAudio/AudioPreview.js | 8 ++++++-- components/CommunityAudio/CommunityAudio.js | 4 +++- components/CommunityAudio/CommunityAudioRecorder.js | 2 ++ components/CommunityAudio/useAudio.js | 10 ++++++++++ 4 files changed, 21 insertions(+), 3 deletions(-) diff --git a/components/CommunityAudio/AudioPreview.js b/components/CommunityAudio/AudioPreview.js index 50ec073e3..8dc9c171c 100644 --- a/components/CommunityAudio/AudioPreview.js +++ b/components/CommunityAudio/AudioPreview.js @@ -1,5 +1,6 @@ import AudioPause from 'public/icons/audioPause.svg' import AudioPlay from 'public/icons/audioPlay.svg' +import Loading from 'public/icons/progress.svg' export default function AudioPreview({ audioUrl, @@ -7,11 +8,12 @@ export default function AudioPreview({ onPause, isPlaying, audioName, + loading, }) { return (

{audioName}

@@ -34,7 +36,9 @@ export default function AudioPreview({ className="rounded-full bg-th-secondary-400 p-2 disabled:bg-th-text-primary" onClick={isPlaying ? onPause : onPlay} > - {isPlaying ? ( + {loading ? ( + + ) : isPlaying ? ( ) : ( diff --git a/components/CommunityAudio/CommunityAudio.js b/components/CommunityAudio/CommunityAudio.js index fa8b93366..9302b17b7 100644 --- a/components/CommunityAudio/CommunityAudio.js +++ b/components/CommunityAudio/CommunityAudio.js @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useRef, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import Link from 'next/link' import { useRouter } from 'next/router' @@ -41,6 +41,7 @@ function CommunityAudio() { stopRecording, pauseRecording, resumeRecording, + loading, } = useAudioRecorder() const { user } = useCurrentUser() @@ -173,6 +174,7 @@ function CommunityAudio() { isRecording={isRecording} isPaused={isPaused} audioUrl={audioUrl} + loading={loading} recordingMethods={{ startRecording, stopRecording, diff --git a/components/CommunityAudio/CommunityAudioRecorder.js b/components/CommunityAudio/CommunityAudioRecorder.js index cc9dc1f7c..9a0272e9f 100644 --- a/components/CommunityAudio/CommunityAudioRecorder.js +++ b/components/CommunityAudio/CommunityAudioRecorder.js @@ -11,6 +11,7 @@ function CommunityAudioRecorder({ isPaused, audioUrl, audioName, + loading, recordingMethods: { startRecording, stopRecording, pauseRecording, resumeRecording }, textAdjustment: { fontSize, setFontSize, textSpeed, setTextSpeed }, }) { @@ -39,6 +40,7 @@ function CommunityAudioRecorder({
{ @@ -79,6 +83,7 @@ export function useAudioRecorder() { mediaRecorder.current.stop() setIsRecording(false) setIsPaused(false) + setLoading(true) } }, []) @@ -96,6 +101,10 @@ export function useAudioRecorder() { } }, []) + useEffect(() => { + if (audioUrl) setLoading(false) + }, [audioUrl]) + return { isRecording, isPaused, @@ -104,6 +113,7 @@ export function useAudioRecorder() { stopRecording, pauseRecording, resumeRecording, + loading, } } From 817ddf5267488245634eea37586077415a968029 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Mon, 16 Dec 2024 20:43:57 +0500 Subject: [PATCH 22/23] feat: fixed on comments --- components/CommunityAudio/AudioPreview.js | 26 +++--- components/CommunityAudio/BookListReader.js | 20 ++-- components/CommunityAudio/CommunityAudio.js | 93 +++++++++---------- .../CommunityAudio/CommunityAudioRecorder.js | 12 +-- components/CommunityAudio/FontSizeSetting.js | 2 +- components/CommunityAudio/RecordButton.js | 12 +-- components/CommunityAudio/SpeedSetting.js | 31 ++----- components/CommunityAudio/StopButton.js | 15 +-- components/CommunityAudio/useAudio.js | 81 ++++++++-------- public/icons/audioMinus.svg | 11 +++ public/icons/audioPlus.svg | 15 +++ public/icons/audioRecord.svg | 10 ++ public/icons/audioStop.svg | 13 +++ public/icons/download-audio.svg | 13 +++ public/updates_en.md | 11 ++- public/updates_es.md | 11 ++- public/updates_ru.md | 11 ++- 17 files changed, 206 insertions(+), 181 deletions(-) create mode 100644 public/icons/audioMinus.svg create mode 100644 public/icons/audioPlus.svg create mode 100644 public/icons/audioRecord.svg create mode 100644 public/icons/audioStop.svg create mode 100644 public/icons/download-audio.svg diff --git a/components/CommunityAudio/AudioPreview.js b/components/CommunityAudio/AudioPreview.js index 8dc9c171c..d9d63ce68 100644 --- a/components/CommunityAudio/AudioPreview.js +++ b/components/CommunityAudio/AudioPreview.js @@ -1,5 +1,6 @@ import AudioPause from 'public/icons/audioPause.svg' import AudioPlay from 'public/icons/audioPlay.svg' +import Download from 'public/icons/download-audio.svg' import Loading from 'public/icons/progress.svg' export default function AudioPreview({ @@ -16,20 +17,17 @@ export default function AudioPreview({ !audioUrl || loading ? 'opacity-70' : '' }`} > -

{audioName}

- - - - +

{audioName || 'audio'}

+ + {loading && !audioUrl ? ( + + ) : ( + + )} ) } diff --git a/components/CommunityAudio/SpeedSetting.js b/components/CommunityAudio/SpeedSetting.js index 844ded1b4..c01eec75d 100644 --- a/components/CommunityAudio/SpeedSetting.js +++ b/components/CommunityAudio/SpeedSetting.js @@ -2,6 +2,9 @@ import { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' +import Minus from 'public/icons/audioMinus.svg' +import Plus from 'public/icons/audioPlus.svg' + export default function SpeedSetting({ textSpeed, setTextSpeed }) { const [isMounted, setIsMounted] = useState(false) const { t } = useTranslation(['common']) @@ -13,7 +16,7 @@ export default function SpeedSetting({ textSpeed, setTextSpeed }) { setIsMounted(true) }, []) - if (!isMounted) return null + if (!isMounted || !textSpeed || !setTextSpeed) return null return (
@@ -23,36 +26,14 @@ export default function SpeedSetting({ textSpeed, setTextSpeed }) { onClick={() => setTextSpeed(textSpeed - 1)} disabled={textSpeed === minSpeed} > - - - +
diff --git a/components/CommunityAudio/StopButton.js b/components/CommunityAudio/StopButton.js index ff24a4a7f..fc31a3577 100644 --- a/components/CommunityAudio/StopButton.js +++ b/components/CommunityAudio/StopButton.js @@ -1,3 +1,5 @@ +import Stop from 'public/icons/audioStop.svg' + export default function StopButton({ isRecording, stopRecording }) { return ( ) } diff --git a/components/CommunityAudio/useAudio.js b/components/CommunityAudio/useAudio.js index 9b5fc2c87..1475a8f7d 100644 --- a/components/CommunityAudio/useAudio.js +++ b/components/CommunityAudio/useAudio.js @@ -4,7 +4,7 @@ import { Mp3Encoder } from 'lamejs' import toast from 'react-hot-toast' import { useTranslation } from 'react-i18next' -export function useAudioRecorder() { +export function useAudioRecorder(bitrate = 128) { const [isRecording, setIsRecording] = useState(false) const [isPaused, setIsPaused] = useState(false) const [audioUrl, setAudioUrl] = useState(null) @@ -15,43 +15,48 @@ export function useAudioRecorder() { const { t } = useTranslation(['audio']) - const encodeToMp3 = async (chunks) => { - try { - const audioBlob = new Blob(chunks, { type: 'audio/webm' }) - const arrayBuffer = await audioBlob.arrayBuffer() - - const audioContext = new AudioContext() - const audioBuffer = await audioContext.decodeAudioData(arrayBuffer) - - const mp3Data = [] - const encoder = new Mp3Encoder(1, audioBuffer.sampleRate, 128) - - const samples = audioBuffer.getChannelData(0) - const buffer = new Int16Array(samples.length) - - for (let i = 0; i < samples.length; i++) { - buffer[i] = samples[i] * 32767 - } - - let sampleIndex = 0 - while (sampleIndex < buffer.length) { - const sampleChunk = buffer.subarray(sampleIndex, sampleIndex + 1152) - const mp3Chunk = encoder.encodeBuffer(sampleChunk) - if (mp3Chunk.length > 0) mp3Data.push(new Uint8Array(mp3Chunk)) - sampleIndex += 1152 + const encodeToMp3 = useCallback( + async (chunks) => { + try { + const samplesAmount = 1152 + const maxPosValue = 32767 + const audioBlob = new Blob(chunks, { type: 'audio/webm' }) + const arrayBuffer = await audioBlob.arrayBuffer() + + const audioContext = new AudioContext() + const audioBuffer = await audioContext.decodeAudioData(arrayBuffer) + + const mp3Data = [] + const encoder = new Mp3Encoder(1, audioBuffer.sampleRate, bitrate) + + const samples = audioBuffer.getChannelData(0) + const buffer = new Int16Array(samples.length) + + for (let i = 0; i < samples.length; i++) { + buffer[i] = samples[i] * maxPosValue + } + + let sampleIndex = 0 + while (sampleIndex < buffer.length) { + const sampleChunk = buffer.subarray(sampleIndex, sampleIndex + samplesAmount) + const mp3Chunk = encoder.encodeBuffer(sampleChunk) + if (mp3Chunk.length > 0) mp3Data.push(new Uint8Array(mp3Chunk)) + sampleIndex += samplesAmount + } + + const mp3Final = encoder.flush() + if (mp3Final.length > 0) mp3Data.push(new Uint8Array(mp3Final)) + + const mp3Blob = new Blob(mp3Data, { type: 'audio/mp3' }) + return URL.createObjectURL(mp3Blob) + } catch (error) { + console.error('Error encoding MP3:', error) + toast.error(t('audio:EncodingError'), { position: 'bottom-right' }) + return null } - - const mp3Final = encoder.flush() - if (mp3Final.length > 0) mp3Data.push(new Uint8Array(mp3Final)) - - const mp3Blob = new Blob(mp3Data, { type: 'audio/mp3' }) - return URL.createObjectURL(mp3Blob) - } catch (error) { - console.error('Error encoding MP3:', error) - toast.error(t('audio:EncodingError'), { position: 'bottom-right' }) - return null - } - } + }, + [t, bitrate] + ) const startRecording = useCallback(async () => { audioChunks.current = [] @@ -76,7 +81,7 @@ export function useAudioRecorder() { toast.error(t('audio:TurnMicrophone'), { position: 'bottom-right' }) console.error('Error accessing microphone:', error) } - }, [t]) + }, [t, encodeToMp3]) const stopRecording = useCallback(() => { if (mediaRecorder.current) { diff --git a/public/icons/audioMinus.svg b/public/icons/audioMinus.svg new file mode 100644 index 000000000..0075b9056 --- /dev/null +++ b/public/icons/audioMinus.svg @@ -0,0 +1,11 @@ + + + diff --git a/public/icons/audioPlus.svg b/public/icons/audioPlus.svg new file mode 100644 index 000000000..5b4a06d64 --- /dev/null +++ b/public/icons/audioPlus.svg @@ -0,0 +1,15 @@ + + + diff --git a/public/icons/audioRecord.svg b/public/icons/audioRecord.svg new file mode 100644 index 000000000..0d1fad4f2 --- /dev/null +++ b/public/icons/audioRecord.svg @@ -0,0 +1,10 @@ + + + + diff --git a/public/icons/audioStop.svg b/public/icons/audioStop.svg new file mode 100644 index 000000000..76d9e2cc0 --- /dev/null +++ b/public/icons/audioStop.svg @@ -0,0 +1,13 @@ + + + diff --git a/public/icons/download-audio.svg b/public/icons/download-audio.svg new file mode 100644 index 000000000..675fa7381 --- /dev/null +++ b/public/icons/download-audio.svg @@ -0,0 +1,13 @@ + + + diff --git a/public/updates_en.md b/public/updates_en.md index 9e9ab07c4..eb2a96a0f 100644 --- a/public/updates_en.md +++ b/public/updates_en.md @@ -1,3 +1,9 @@ +# Version 0.27.0 +## Date: 12/11/2024 + +### **Added:** +- community audio + # Version 0.26.0 ## Date: 27.11.2024 @@ -8,11 +14,6 @@ - inside tWords, cross-references between words work - links to articles of the Translation Academy work inside tWords and tNotes -## Date: 12/11/2024 - -### **Added:** -- community audio - # Version 0.25.1 ## Date: 11/08/2024 diff --git a/public/updates_es.md b/public/updates_es.md index 7c7fc3640..143034656 100644 --- a/public/updates_es.md +++ b/public/updates_es.md @@ -1,3 +1,9 @@ +# Versión 0.27.0 +## Date: 12/16/2024 + +### **Added:** +- audio comunitario + # Versión 0.26.0 ## Date: 27.11.2024 @@ -8,11 +14,6 @@ - dentro de tWords funcionan los enlaces cruzados entre palabras - dentro de tWords y tNotes funcionan enlaces a artículos De la Academia de traducción -## Date: 12/11/2024 - -### **Added:** -- audio comunitario - # Versión 0.25.1 ## Date: 11/08/2024 diff --git a/public/updates_ru.md b/public/updates_ru.md index b13c4148d..3ff7c2379 100644 --- a/public/updates_ru.md +++ b/public/updates_ru.md @@ -1,3 +1,9 @@ +# Версия 0.27.0 +## Дата: 16.12.2024 + +### **Добавлено:** +- аудио сообщества + # Версия 0.26.0 ## Date: 27.11.2024 @@ -8,11 +14,6 @@ - внутри tWords работают перекрестные ссылки между словами - внутри tWords и tNotes работают ссылки на статьи Академии перевода -## Дата: 11.12.2024 - -### **Добавлено:** -- аудио сообщества - # Версия 0.25.1 ## Date: 08.11.2024 From f3b99dddabb853332d48c60d581f3595dd8f2d47 Mon Sep 17 00:00:00 2001 From: BogdanLi Date: Wed, 18 Dec 2024 13:15:13 +0500 Subject: [PATCH 23/23] feat: comments fix --- public/updates_en.md | 2 +- public/updates_ru.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/updates_en.md b/public/updates_en.md index eb2a96a0f..e17d5d46a 100644 --- a/public/updates_en.md +++ b/public/updates_en.md @@ -1,5 +1,5 @@ # Version 0.27.0 -## Date: 12/11/2024 +## Date: 12/16/2024 ### **Added:** - community audio diff --git a/public/updates_ru.md b/public/updates_ru.md index 3ff7c2379..2c51fdc8d 100644 --- a/public/updates_ru.md +++ b/public/updates_ru.md @@ -2,7 +2,7 @@ ## Дата: 16.12.2024 ### **Добавлено:** -- аудио сообщества +- аудио для сообщества # Версия 0.26.0 ## Date: 27.11.2024