From 74d1df6dc495727cdccee73f87c7b3f6b5bccb52 Mon Sep 17 00:00:00 2001 From: Koper Date: Fri, 21 Jul 2023 17:37:22 +0700 Subject: [PATCH 1/6] Manual update with main --- app/components/dashboard.js | 19 ++++---- app/components/record.js | 2 +- app/page.js | 36 +++++++++----- package-lock.json | 26 ++++++++++- yarn.lock | 93 ++++++++++++------------------------- 5 files changed, 91 insertions(+), 85 deletions(-) diff --git a/app/components/dashboard.js b/app/components/dashboard.js index 5830c930..dd66c17e 100644 --- a/app/components/dashboard.js +++ b/app/components/dashboard.js @@ -14,7 +14,11 @@ export function Dashboard({ return ( <> -
+
+
+

Reflector

+

Capture The Signal, Not The Noise

+
Timestamp
Topic
@@ -31,9 +35,8 @@ export function Dashboard({
{item.title}{" "} {">"} @@ -42,11 +45,12 @@ export function Dashboard({
{openIndex === index && ( -
{item.transcript}
+
{item.transcript}
)}
))} -
+ +
Live
Transcript
@@ -57,8 +61,7 @@ export function Dashboard({ {transcriptionText}
-
); -} +} \ No newline at end of file diff --git a/app/components/record.js b/app/components/record.js index 01b2c887..6b1ea345 100644 --- a/app/components/record.js +++ b/app/components/record.js @@ -88,7 +88,7 @@ export default function Recorder(props) { return ( -
+
  diff --git a/app/page.js b/app/page.js index 393b8fd2..14993f89 100644 --- a/app/page.js +++ b/app/page.js @@ -6,12 +6,24 @@ import useWebRTC from "./components/webrtc.js"; import "../public/button.css"; const App = () => { + const [isRecording, setIsRecording] = useState(false); const [stream, setStream] = useState(null); - // This is where you'd send the stream and receive the data from the server. - // transcription, summary, etc - const serverData = useWebRTC(stream); - const text = serverData?.text ?? ""; + const handleRecord = (recording) => { + setIsRecording(recording); + + if (recording) { + navigator.mediaDevices + .getUserMedia({ audio: true }) + .then(setStream) + .catch((err) => console.error(err)); + } else if (!recording && serverData.peer) { + serverData.peer.send(JSON.stringify({ cmd: 'STOP' })); + } + }; + + + const serverData = useWebRTC(stream, setIsRecording); return (
@@ -20,17 +32,17 @@ const App = () => {

Capture The Signal, Not The Noise

- + handleRecord(recording)} + transcriptionText={serverData.text ?? "(No transcription text)"} + finalSummary={serverData.finalSummary} + topics={serverData.topics ?? []} + stream={stream} /> - -
- Reflector © 2023 Monadical -
); }; -export default App; +export default App; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index e2b473d8..0b237347 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,10 +14,12 @@ "postcss": "8.4.25", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-dropdown": "^1.11.0", "sass": "^1.63.6", "simple-peer": "^9.11.1", "supports-color": "^9.4.0", - "tailwindcss": "^3.3.2" + "tailwindcss": "^3.3.2", + "wavesurfer.js": "^7.0.3" }, "devDependencies": { "prettier": "^3.0.0" @@ -497,6 +499,11 @@ "node": ">= 6" } }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", @@ -1245,6 +1252,18 @@ "react": "^18.2.0" } }, + "node_modules/react-dropdown": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/react-dropdown/-/react-dropdown-1.11.0.tgz", + "integrity": "sha512-E2UWetRPxNdIhQahXw6b984ME7WmcgDj9AEAjrtS/oyLCFVo+2qkCfcS06C22JR0Zj+YLnygwv0Ozf6VKKDq7g==", + "dependencies": { + "classnames": "^2.2.3" + }, + "peerDependencies": { + "react": "^0.14.7 || ^15.0.0-0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.14.7 || ^15.0.0-0 || ^16.0.0 || ^17.0.0|| ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -1607,6 +1626,11 @@ "node": ">=10.13.0" } }, + "node_modules/wavesurfer.js": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/wavesurfer.js/-/wavesurfer.js-7.0.3.tgz", + "integrity": "sha512-gJ3P+Bd3Q4E8qETjjg0pneaVqm2J7jegG2Cc6vqEF5YDDKQ3m8sKsvVfgVhJkacKkO9jFAGDu58Hw4zLr7xD0A==" + }, "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", diff --git a/yarn.lock b/yarn.lock index 4ade487a..f189842f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -26,16 +26,16 @@ resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz" integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw== -"@jridgewell/sourcemap-codec@1.4.14": - version "1.4.14" - resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz" - integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw== - "@jridgewell/sourcemap-codec@^1.4.10": version "1.4.15" resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz" integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg== +"@jridgewell/sourcemap-codec@1.4.14": + version "1.4.14" + resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz" + integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw== + "@jridgewell/trace-mapping@^0.3.9": version "0.3.18" resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz" @@ -54,46 +54,6 @@ resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.9.tgz" integrity sha512-TVzGHpZoVBk3iDsTOQA/R6MGmFp0+17SWXMEWd6zG30AfuELmSSMe2SdPqxwXU0gbpWkJL1KgfLzy5ReN0crqQ== -"@next/swc-darwin-x64@13.4.9": - version "13.4.9" - resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.9.tgz#a08fccdee68201522fe6618ec81f832084b222f8" - integrity sha512-aSfF1fhv28N2e7vrDZ6zOQ+IIthocfaxuMWGReB5GDriF0caTqtHttAvzOMgJgXQtQx6XhyaJMozLTSEXeNN+A== - -"@next/swc-linux-arm64-gnu@13.4.9": - version "13.4.9" - resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.9.tgz#1798c2341bb841e96521433eed00892fb24abbd1" - integrity sha512-JhKoX5ECzYoTVyIy/7KykeO4Z2lVKq7HGQqvAH+Ip9UFn1MOJkOnkPRB7v4nmzqAoY+Je05Aj5wNABR1N18DMg== - -"@next/swc-linux-arm64-musl@13.4.9": - version "13.4.9" - resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.9.tgz#cee04c51610eddd3638ce2499205083656531ea0" - integrity sha512-OOn6zZBIVkm/4j5gkPdGn4yqQt+gmXaLaSjRSO434WplV8vo2YaBNbSHaTM9wJpZTHVDYyjzuIYVEzy9/5RVZw== - -"@next/swc-linux-x64-gnu@13.4.9": - version "13.4.9" - resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.9.tgz#1932d0367916adbc6844b244cda1d4182bd11f7a" - integrity sha512-iA+fJXFPpW0SwGmx/pivVU+2t4zQHNOOAr5T378PfxPHY6JtjV6/0s1vlAJUdIHeVpX98CLp9k5VuKgxiRHUpg== - -"@next/swc-linux-x64-musl@13.4.9": - version "13.4.9" - resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.9.tgz#a66aa8c1383b16299b72482f6360facd5cde3c7a" - integrity sha512-rlNf2WUtMM+GAQrZ9gMNdSapkVi3koSW3a+dmBVp42lfugWVvnyzca/xJlN48/7AGx8qu62WyO0ya1ikgOxh6A== - -"@next/swc-win32-arm64-msvc@13.4.9": - version "13.4.9" - resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.9.tgz#39482ee856c867177a612a30b6861c75e0736a4a" - integrity sha512-5T9ybSugXP77nw03vlgKZxD99AFTHaX8eT1ayKYYnGO9nmYhJjRPxcjU5FyYI+TdkQgEpIcH7p/guPLPR0EbKA== - -"@next/swc-win32-ia32-msvc@13.4.9": - version "13.4.9" - resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.9.tgz#29db85e34b597ade1a918235d16a760a9213c190" - integrity sha512-ojZTCt1lP2ucgpoiFgrFj07uq4CZsq4crVXpLGgQfoFq00jPKRPgesuGPaz8lg1yLfvafkU3Jd1i8snKwYR3LA== - -"@next/swc-win32-x64-msvc@13.4.9": - version "13.4.9" - resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.9.tgz#0c2758164cccd61bc5a1c6cd8284fe66173e4a2b" - integrity sha512-QbT03FXRNdpuL+e9pLnu+XajZdm/TtIXVYY4lA9t+9l0fLZbHXDYEKitAqxrOj37o3Vx5ufxiRAniaIebYDCgw== - "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz" @@ -102,7 +62,7 @@ "@nodelib/fs.stat" "2.0.5" run-parallel "^1.1.9" -"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2": +"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5": version "2.0.5" resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz" integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A== @@ -182,7 +142,7 @@ braces@^3.0.2, braces@~3.0.2: dependencies: fill-range "^7.0.1" -browserslist@^4.21.5: +browserslist@^4.21.5, "browserslist@>= 4.21.0": version "4.21.9" resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.21.9.tgz" integrity sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg== @@ -234,7 +194,7 @@ chokidar@^3.5.3, "chokidar@>=3.0.0 <4.0.0": classnames@^2.2.3: version "2.3.2" - resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" + resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz" integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== client-only@0.0.1: @@ -339,7 +299,7 @@ get-browser-rtc@^1.1.0: resolved "https://registry.npmjs.org/get-browser-rtc/-/get-browser-rtc-1.1.0.tgz" integrity sha512-MghbMJ61EJrRsDe7w1Bvqt3ZsBuqhce5nrn/XAwgwOXhcsz53/ltdxOse1h/8eKXj5slzxdsz56g5rzOFSGwfQ== -glob-parent@^5.1.2, glob-parent@~5.1.2: +glob-parent@^5.1.2: version "5.1.2" resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz" integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== @@ -353,6 +313,13 @@ glob-parent@^6.0.2: dependencies: is-glob "^4.0.3" +glob-parent@~5.1.2: + version "5.1.2" + resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz" + integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== + dependencies: + is-glob "^4.0.1" + glob-to-regexp@^0.4.1: version "0.4.1" resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz" @@ -400,7 +367,7 @@ inflight@^1.0.4: once "^1.3.0" wrappy "1" -inherits@2, inherits@^2.0.3: +inherits@^2.0.3, inherits@2: version "2.0.4" resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz" integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== @@ -632,6 +599,15 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0: resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== +postcss@^8.0.0, postcss@^8.1.0, postcss@^8.2.14, postcss@^8.4.21, postcss@^8.4.23, postcss@>=8.0.9, postcss@8.4.25: + version "8.4.25" + resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.25.tgz" + integrity sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw== + dependencies: + nanoid "^3.3.6" + picocolors "^1.0.0" + source-map-js "^1.0.2" + postcss@8.4.14: version "8.4.14" resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz" @@ -641,15 +617,6 @@ postcss@8.4.14: picocolors "^1.0.0" source-map-js "^1.0.2" -postcss@8.4.25, postcss@^8.4.23: - version "8.4.25" - resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.25.tgz" - integrity sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw== - dependencies: - nanoid "^3.3.6" - picocolors "^1.0.0" - source-map-js "^1.0.2" - prettier@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz" @@ -667,7 +634,7 @@ randombytes@^2.1.0: dependencies: safe-buffer "^5.1.0" -react-dom@^18.2.0: +"react-dom@^0.14.7 || ^15.0.0-0 || ^16.0.0 || ^17.0.0|| ^18.0.0", react-dom@^18.2.0: version "18.2.0" resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz" integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== @@ -677,12 +644,12 @@ react-dom@^18.2.0: react-dropdown@^1.11.0: version "1.11.0" - resolved "https://registry.yarnpkg.com/react-dropdown/-/react-dropdown-1.11.0.tgz#b9576de17efd28e5684d101b3f58dfe784af242c" + resolved "https://registry.npmjs.org/react-dropdown/-/react-dropdown-1.11.0.tgz" integrity sha512-E2UWetRPxNdIhQahXw6b984ME7WmcgDj9AEAjrtS/oyLCFVo+2qkCfcS06C22JR0Zj+YLnygwv0Ozf6VKKDq7g== dependencies: classnames "^2.2.3" -react@^18.2.0: +"react@^0.14.7 || ^15.0.0-0 || ^16.0.0 || ^17.0.0 || ^18.0.0", react@^18.2.0, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0": version "18.2.0" resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz" integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== @@ -897,7 +864,7 @@ watchpack@2.4.0: wavesurfer.js@^7.0.3: version "7.0.3" - resolved "https://registry.yarnpkg.com/wavesurfer.js/-/wavesurfer.js-7.0.3.tgz#d3e0b07056c08d43db19d4950d2de68681f48606" + resolved "https://registry.npmjs.org/wavesurfer.js/-/wavesurfer.js-7.0.3.tgz" integrity sha512-gJ3P+Bd3Q4E8qETjjg0pneaVqm2J7jegG2Cc6vqEF5YDDKQ3m8sKsvVfgVhJkacKkO9jFAGDu58Hw4zLr7xD0A== wrappy@1: From 863a04094bc013eda98142a629c41ace0dc44022 Mon Sep 17 00:00:00 2001 From: Koper Date: Fri, 21 Jul 2023 17:39:49 +0700 Subject: [PATCH 2/6] Update dashboard.js --- app/components/dashboard.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/components/dashboard.js b/app/components/dashboard.js index dd66c17e..4dd58922 100644 --- a/app/components/dashboard.js +++ b/app/components/dashboard.js @@ -16,8 +16,7 @@ export function Dashboard({ <>
-

Reflector

-

Capture The Signal, Not The Noise

+

Meeting Topics

Timestamp
From f4235147aa3d4430f896cc4d87856a228d52af09 Mon Sep 17 00:00:00 2001 From: Koper Date: Fri, 21 Jul 2023 18:08:42 +0700 Subject: [PATCH 3/6] Last touches for new audiowave integration --- app/components/CustomRecordPlugin.js | 49 +++++----- app/components/dashboard.js | 13 ++- app/components/record.js | 131 +++++++++++++++------------ app/components/webrtc.js | 2 +- app/page.js | 5 +- 5 files changed, 108 insertions(+), 92 deletions(-) diff --git a/app/components/CustomRecordPlugin.js b/app/components/CustomRecordPlugin.js index 6ec25fd4..bbe21195 100644 --- a/app/components/CustomRecordPlugin.js +++ b/app/components/CustomRecordPlugin.js @@ -1,44 +1,51 @@ // Override the startRecording method so we can pass the desired stream // Checkout: https://github.com/katspaugh/wavesurfer.js/blob/fa2bcfe/src/plugins/record.ts -import RecordPlugin from "wavesurfer.js/dist/plugins/record" +import RecordPlugin from "wavesurfer.js/dist/plugins/record"; -const MIME_TYPES = ['audio/webm', 'audio/wav', 'audio/mpeg', 'audio/mp4', 'audio/mp3'] -const findSupportedMimeType = () => MIME_TYPES.find((mimeType) => MediaRecorder.isTypeSupported(mimeType)) +const MIME_TYPES = [ + "audio/webm", + "audio/wav", + "audio/mpeg", + "audio/mp4", + "audio/mp3", +]; +const findSupportedMimeType = () => + MIME_TYPES.find((mimeType) => MediaRecorder.isTypeSupported(mimeType)); class CustomRecordPlugin extends RecordPlugin { static create(options) { - return new CustomRecordPlugin(options || {}) + return new CustomRecordPlugin(options || {}); } startRecording(stream) { - this.preventInteraction() - this.cleanUp() + this.preventInteraction(); + this.cleanUp(); - const onStop = this.render(stream) + const onStop = this.render(stream); const mediaRecorder = new MediaRecorder(stream, { mimeType: this.options.mimeType || findSupportedMimeType(), audioBitsPerSecond: this.options.audioBitsPerSecond, - }) - const recordedChunks = [] + }); + const recordedChunks = []; - mediaRecorder.addEventListener('dataavailable', (event) => { + mediaRecorder.addEventListener("dataavailable", (event) => { if (event.data.size > 0) { - recordedChunks.push(event.data) + recordedChunks.push(event.data); } - }) + }); - mediaRecorder.addEventListener('stop', () => { - onStop() - this.loadBlob(recordedChunks, mediaRecorder.mimeType) - this.emit('stopRecording') - }) + mediaRecorder.addEventListener("stop", () => { + onStop(); + this.loadBlob(recordedChunks, mediaRecorder.mimeType); + this.emit("stopRecording"); + }); - mediaRecorder.start() + mediaRecorder.start(); - this.emit('startRecording') + this.emit("startRecording"); - this.mediaRecorder = mediaRecorder + this.mediaRecorder = mediaRecorder; } } -export default CustomRecordPlugin; \ No newline at end of file +export default CustomRecordPlugin; diff --git a/app/components/dashboard.js b/app/components/dashboard.js index 4dd58922..8ed945f3 100644 --- a/app/components/dashboard.js +++ b/app/components/dashboard.js @@ -34,14 +34,14 @@ export function Dashboard({
{item.title}{" "} {">"}
-
-
+
{openIndex === index && (
{item.transcript}
@@ -53,8 +53,7 @@ export function Dashboard({
Live
Transcript
-
-
+
{transcriptionText} @@ -63,4 +62,4 @@ export function Dashboard({
); -} \ No newline at end of file +} diff --git a/app/components/record.js b/app/components/record.js index 6b1ea345..de9897cb 100644 --- a/app/components/record.js +++ b/app/components/record.js @@ -2,106 +2,117 @@ import React, { useRef, useEffect, useState } from "react"; import WaveSurfer from "wavesurfer.js"; -import Dropdown from 'react-dropdown' -import 'react-dropdown/style.css' - -import CustomRecordPlugin from './CustomRecordPlugin' +import Dropdown from "react-dropdown"; +import "react-dropdown/style.css"; +import CustomRecordPlugin from "./CustomRecordPlugin"; export default function Recorder(props) { - const waveformRef = useRef() - const [wavesurfer, setWavesurfer] = useState(null) - const [record, setRecord] = useState(null) - const [isRecording, setIsRecording] = useState(false) - const [isPlaying, setIsPlaying] = useState(false) - const [deviceId, setDeviceId] = useState(null) - const [ddOptions, setDdOptions] = useState([]) + const waveformRef = useRef(); + const [wavesurfer, setWavesurfer] = useState(null); + const [record, setRecord] = useState(null); + const [isRecording, setIsRecording] = useState(false); + const [isPlaying, setIsPlaying] = useState(false); + const [deviceId, setDeviceId] = useState(null); + const [ddOptions, setDdOptions] = useState([]); useEffect(() => { - document.getElementById('play-btn').disabled = true + document.getElementById("play-btn").disabled = true; - navigator.mediaDevices.enumerateDevices().then(devices => { + navigator.mediaDevices.enumerateDevices().then((devices) => { const audioDevices = devices - .filter(d => d.kind === 'audioinput') - .map(d => ({value: d.deviceId, label: d.label})) - - if (audioDevices.length < 1) return console.log("no audio input devices") + .filter((d) => d.kind === "audioinput") + .map((d) => ({ value: d.deviceId, label: d.label })); - setDdOptions(audioDevices) - setDeviceId(audioDevices[0].value) - }) + if (audioDevices.length < 1) return console.log("no audio input devices"); - if(waveformRef.current) { + setDdOptions(audioDevices); + setDeviceId(audioDevices[0].value); + }); + + if (waveformRef.current) { const _wavesurfer = WaveSurfer.create({ container: waveformRef.current, - waveColor: "#333", - progressColor: "#0178FF", + waveColor: "#cc3347", + progressColor: "#0178FFπ", cursorColor: "OrangeRed", hideScrollbar: true, autoCenter: true, barWidth: 2, - }) - const wsWrapper = _wavesurfer.getWrapper() - wsWrapper.style.cursor = 'pointer' - wsWrapper.style.backgroundColor = 'lightgray' - wsWrapper.style.borderRadius = '15px' + }); + const wsWrapper = _wavesurfer.getWrapper(); + wsWrapper.style.cursor = "pointer"; + wsWrapper.style.backgroundColor = "lightgray"; + wsWrapper.style.borderRadius = "15px"; - _wavesurfer.on('play', () => { - setIsPlaying(true) - }) - _wavesurfer.on('pause', () => { - setIsPlaying(false) - }) + _wavesurfer.on("play", () => { + setIsPlaying(true); + }); + _wavesurfer.on("pause", () => { + setIsPlaying(false); + }); - setRecord(_wavesurfer.registerPlugin(CustomRecordPlugin.create())) - setWavesurfer(_wavesurfer) + setRecord(_wavesurfer.registerPlugin(CustomRecordPlugin.create())); + setWavesurfer(_wavesurfer); return () => { - _wavesurfer.destroy() - setIsRecording(false) - setIsPlaying(false) - } + _wavesurfer.destroy(); + setIsRecording(false); + setIsPlaying(false); + }; } - }, []) + }, []); const handleRecClick = async () => { - if (!record) return console.log("no record") + if (!record) return console.log("no record"); - if(record?.isRecording()) { - record.stopRecording() - setIsRecording(false) - document.getElementById('play-btn').disabled = false + if (record?.isRecording()) { + record.stopRecording(); + setIsRecording(false); + document.getElementById("play-btn").disabled = false; } else { - const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId } }) - await record.startRecording(stream) - props.setStream(stream) - setIsRecording(true) + const stream = await navigator.mediaDevices.getUserMedia({ + audio: { deviceId }, + }); + await record.startRecording(stream); + props.setStream(stream); + setIsRecording(true); } - } + }; const handlePlayClick = () => { - wavesurfer?.playPause() - } + wavesurfer?.playPause(); + }; const handleDropdownChange = (e) => { - setDeviceId(e.value) - } - + setDeviceId(e.value); + }; return (
- +   -   -
{/* TODO: Download audio tag */}
- ) + ); } diff --git a/app/components/webrtc.js b/app/components/webrtc.js index 927b8a95..4a310905 100644 --- a/app/components/webrtc.js +++ b/app/components/webrtc.js @@ -37,7 +37,7 @@ const useWebRTC = (stream, setIsRecording) => { peer.on("connect", () => { console.log("WebRTC connected"); - setData(prevData => ({ ...prevData, peer: peer })); + setData((prevData) => ({ ...prevData, peer: peer })); }); peer.on("data", (data) => { diff --git a/app/page.js b/app/page.js index 14993f89..9d2ae165 100644 --- a/app/page.js +++ b/app/page.js @@ -18,11 +18,10 @@ const App = () => { .then(setStream) .catch((err) => console.error(err)); } else if (!recording && serverData.peer) { - serverData.peer.send(JSON.stringify({ cmd: 'STOP' })); + serverData.peer.send(JSON.stringify({ cmd: "STOP" })); } }; - const serverData = useWebRTC(stream, setIsRecording); return ( @@ -45,4 +44,4 @@ const App = () => { ); }; -export default App; \ No newline at end of file +export default App; From 802d3832d0a93080db5878744e67293a8963f60b Mon Sep 17 00:00:00 2001 From: Koper Date: Fri, 21 Jul 2023 18:20:56 +0700 Subject: [PATCH 4/6] New footer --- app/layout.js | 10 +++++++++- app/page.js | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/app/layout.js b/app/layout.js index 0e91a9e4..858afbeb 100644 --- a/app/layout.js +++ b/app/layout.js @@ -16,7 +16,15 @@ export default function RootLayout({ children }) { Test - {children} + +
+ {children} +
+
+ © 2023 Reflector, a product of Monadical +
+ + ); } diff --git a/app/page.js b/app/page.js index 9d2ae165..91a52aba 100644 --- a/app/page.js +++ b/app/page.js @@ -35,7 +35,7 @@ const App = () => { handleRecord(recording)} - transcriptionText={serverData.text ?? "(No transcription text)"} + transcriptionText={serverData.text ?? "..."} finalSummary={serverData.finalSummary} topics={serverData.topics ?? []} stream={stream} From c889de58bea351ea4efea6cb6f89e86b422dbc17 Mon Sep 17 00:00:00 2001 From: Koper Date: Fri, 21 Jul 2023 18:22:30 +0700 Subject: [PATCH 5/6] Meeting Topics -> Meeting Notes --- app/components/dashboard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/dashboard.js b/app/components/dashboard.js index 8ed945f3..d59ef1a2 100644 --- a/app/components/dashboard.js +++ b/app/components/dashboard.js @@ -16,7 +16,7 @@ export function Dashboard({ <>
-

Meeting Topics

+

Meeting Notes

Timestamp
From 29351def4ad0c4208baee07f6f6933b5fb7487da Mon Sep 17 00:00:00 2001 From: Koper Date: Fri, 21 Jul 2023 18:39:14 +0700 Subject: [PATCH 6/6] Update dashboard.js --- app/components/dashboard.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/components/dashboard.js b/app/components/dashboard.js index d59ef1a2..2a2d3581 100644 --- a/app/components/dashboard.js +++ b/app/components/dashboard.js @@ -59,6 +59,14 @@ export function Dashboard({ {transcriptionText}
+ + {finalSummary && ( +
+

Final Summary

+

Duration: {finalSummary.duration}

+

{finalSummary.summary}

+
+ )}
);