diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml new file mode 100644 index 00000000..84075ef4 --- /dev/null +++ b/.pre-commit-config.yaml @@ -0,0 +1,31 @@ +# See https://pre-commit.com for more information +# See https://pre-commit.com/hooks.html for more hooks +repos: + - repo: local + hooks: + - id: yarn-format + name: run yarn format + language: system + entry: bash -c 'cd www && yarn format' + pass_filenames: false + files: ^www/ + + - repo: https://github.com/pre-commit/pre-commit-hooks + rev: v4.4.0 + hooks: + - id: debug-statements + - id: trailing-whitespace + - id: check-added-large-files + - id: detect-private-key + + - repo: https://github.com/pycqa/isort + rev: 5.12.0 + hooks: + - id: isort + args: ["--profile", "black"] + + - repo: https://github.com/psf/black + rev: 23.1.0 + hooks: + - id: black + args: ["--line-length", "120"] diff --git a/www/app/components/CustomRecordPlugin.js b/www/app/components/CustomRecordPlugin.js index 8e8cdc44..7e29ea7c 100644 --- a/www/app/components/CustomRecordPlugin.js +++ b/www/app/components/CustomRecordPlugin.js @@ -18,81 +18,81 @@ class CustomRecordPlugin extends RecordPlugin { return new CustomRecordPlugin(options || {}); } render(stream) { - if (!this.wavesurfer) return () => undefined + if (!this.wavesurfer) return () => undefined; - const container = this.wavesurfer.getWrapper() - const canvas = document.createElement('canvas') - canvas.width = container.clientWidth - canvas.height = container.clientHeight - canvas.style.zIndex = '10' - container.appendChild(canvas) + const container = this.wavesurfer.getWrapper(); + const canvas = document.createElement("canvas"); + canvas.width = container.clientWidth; + canvas.height = container.clientHeight; + canvas.style.zIndex = "10"; + container.appendChild(canvas); - const canvasCtx = canvas.getContext('2d') - const audioContext = new AudioContext() - const source = audioContext.createMediaStreamSource(stream) - const analyser = audioContext.createAnalyser() - analyser.fftSize = 2 ** 5 - source.connect(analyser) - const bufferLength = analyser.frequencyBinCount - const dataArray = new Uint8Array(bufferLength) + const canvasCtx = canvas.getContext("2d"); + const audioContext = new AudioContext(); + const source = audioContext.createMediaStreamSource(stream); + const analyser = audioContext.createAnalyser(); + analyser.fftSize = 2 ** 5; + source.connect(analyser); + const bufferLength = analyser.frequencyBinCount; + const dataArray = new Uint8Array(bufferLength); let animationId, previousTimeStamp; - const BUFFER_SIZE = 2 ** 8 - const dataBuffer = new Array(BUFFER_SIZE).fill(canvas.height) + const BUFFER_SIZE = 2 ** 8; + const dataBuffer = new Array(BUFFER_SIZE).fill(canvas.height); const drawWaveform = (timeStamp) => { - if (!canvasCtx) return + if (!canvasCtx) return; - analyser.getByteTimeDomainData(dataArray) - canvasCtx.clearRect(0, 0, canvas.width, canvas.height) - canvasCtx.fillStyle = '#cc3347' + analyser.getByteTimeDomainData(dataArray); + canvasCtx.clearRect(0, 0, canvas.width, canvas.height); + canvasCtx.fillStyle = "#cc3347"; if (previousTimeStamp === undefined) { - previousTimeStamp = timeStamp - dataBuffer.push(Math.min(...dataArray)) - dataBuffer.splice(0, 1) + previousTimeStamp = timeStamp; + dataBuffer.push(Math.min(...dataArray)); + dataBuffer.splice(0, 1); } const elapsed = timeStamp - previousTimeStamp; if (elapsed > 10) { - previousTimeStamp = timeStamp - dataBuffer.push(Math.min(...dataArray)) - dataBuffer.splice(0, 1) + previousTimeStamp = timeStamp; + dataBuffer.push(Math.min(...dataArray)); + dataBuffer.splice(0, 1); } // Drawing - const sliceWidth = canvas.width / dataBuffer.length - let x = 0 + const sliceWidth = canvas.width / dataBuffer.length; + let x = 0; for (let i = 0; i < dataBuffer.length; i++) { - const valueNormalized = dataBuffer[i] / canvas.height - const y = valueNormalized * canvas.height / 2 - const sliceHeight = canvas.height + 1 - y * 2 + const valueNormalized = dataBuffer[i] / canvas.height; + const y = (valueNormalized * canvas.height) / 2; + const sliceHeight = canvas.height + 1 - y * 2; - canvasCtx.fillRect(x, y, sliceWidth * 2 / 3, sliceHeight) - x += sliceWidth + canvasCtx.fillRect(x, y, (sliceWidth * 2) / 3, sliceHeight); + x += sliceWidth; } - animationId = requestAnimationFrame(drawWaveform) - } + animationId = requestAnimationFrame(drawWaveform); + }; - drawWaveform() + drawWaveform(); return () => { if (animationId) { - cancelAnimationFrame(animationId) + cancelAnimationFrame(animationId); } if (source) { - source.disconnect() - source.mediaStream.getTracks().forEach((track) => track.stop()) + source.disconnect(); + source.mediaStream.getTracks().forEach((track) => track.stop()); } if (audioContext) { - audioContext.close() + audioContext.close(); } - canvas?.remove() - } + canvas?.remove(); + }; } startRecording(stream) { this.preventInteraction(); diff --git a/www/app/components/dashboard.js b/www/app/components/dashboard.js index e7017d11..cf5c75c0 100644 --- a/www/app/components/dashboard.js +++ b/www/app/components/dashboard.js @@ -1,7 +1,10 @@ import { Mulberry32 } from "../utils.js"; import React, { useState, useEffect } from "react"; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faChevronRight, faChevronDown } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faChevronRight, + faChevronDown, +} from "@fortawesome/free-solid-svg-icons"; export function Dashboard({ isRecording, @@ -47,7 +50,6 @@ export function Dashboard({ ))} - {finalSummary && (

Final Summary

diff --git a/www/app/components/record.js b/www/app/components/record.js index cb3b03f8..33ee8fb4 100644 --- a/www/app/components/record.js +++ b/www/app/components/record.js @@ -7,27 +7,28 @@ import "react-dropdown/style.css"; import CustomRecordPlugin from "./CustomRecordPlugin"; - const AudioInputsDropdown = (props) => { const [ddOptions, setDdOptions] = useState([]); useEffect(() => { const init = async () => { // Request permission to use audio inputs - await navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => stream.getTracks().forEach((t) => t.stop())) + await navigator.mediaDevices + .getUserMedia({ audio: true }) + .then((stream) => stream.getTracks().forEach((t) => t.stop())); - const devices = await navigator.mediaDevices.enumerateDevices() + const devices = await navigator.mediaDevices.enumerateDevices(); const audioDevices = devices .filter((d) => d.kind === "audioinput" && d.deviceId != "") - .map((d) => ({ value: d.deviceId, label: d.label })) + .map((d) => ({ value: d.deviceId, label: d.label })); - if (audioDevices.length < 1) return console.log("no audio input devices") + if (audioDevices.length < 1) return console.log("no audio input devices"); - setDdOptions(audioDevices) - props.setDeviceId(audioDevices[0].value) - } - init() - }, []) + setDdOptions(audioDevices); + props.setDeviceId(audioDevices[0].value); + }; + init(); + }, []); const handleDropdownChange = (e) => { props.setDeviceId(e.value); @@ -40,8 +41,8 @@ const AudioInputsDropdown = (props) => { value={ddOptions[0]} disabled={props.disabled} /> - ) -} + ); +}; export default function Recorder(props) { const waveformRef = useRef(); diff --git a/www/app/components/webrtc.js b/www/app/components/webrtc.js index 1b9843c0..3469cd19 100644 --- a/www/app/components/webrtc.js +++ b/www/app/components/webrtc.js @@ -64,7 +64,7 @@ const useWebRTC = (stream) => { duration: serverData.duration, summary: serverData.summary, }, - text: '' + text: "", })); break; default: diff --git a/www/app/layout.js b/www/app/layout.js index 25b34bb7..163a2faa 100644 --- a/www/app/layout.js +++ b/www/app/layout.js @@ -17,9 +17,8 @@ export default function RootLayout({ children }) { Test - {children} - - + {children} + ); } diff --git a/www/app/page.js b/www/app/page.js index 6dae28ea..9fcf0087 100644 --- a/www/app/page.js +++ b/www/app/page.js @@ -12,7 +12,8 @@ const App = () => { // transcription, summary, etc const serverData = useWebRTC(stream); - const sendStopCmd = () => serverData?.peer?.send(JSON.stringify({ cmd: "STOP" })) + const sendStopCmd = () => + serverData?.peer?.send(JSON.stringify({ cmd: "STOP" })); return (
diff --git a/www/next.config.js b/www/next.config.js index 7f188f5c..610b5be8 100644 --- a/www/next.config.js +++ b/www/next.config.js @@ -1,11 +1,10 @@ /** @type {import('next').NextConfig} */ const nextConfig = { - output: 'standalone', + output: "standalone", }; module.exports = nextConfig; - // Sentry content below const { withSentryConfig } = require("@sentry/nextjs"); @@ -40,5 +39,5 @@ module.exports = withSentryConfig( // Automatically tree-shake Sentry logger statements to reduce bundle size disableLogger: true, - } + }, ); diff --git a/www/package.json b/www/package.json index 9f2f418b..373edc00 100644 --- a/www/package.json +++ b/www/package.json @@ -30,8 +30,8 @@ }, "main": "index.js", "repository": "https://github.com/Monadical-SAS/reflector-ui.git", - "author": "Koper ", - "license": "MIT", + "author": "Andreas ", + "license": "All Rights Reserved", "devDependencies": { "prettier": "^3.0.0" } diff --git a/www/pages/sentry-example-page.js b/www/pages/sentry-example-page.js index 5e935e43..bcace78b 100644 --- a/www/pages/sentry-example-page.js +++ b/www/pages/sentry-example-page.js @@ -70,7 +70,10 @@ export default function Home() {

Next, look for the error on the{" "} - Issues Page. + + Issues Page + + .

For more information, see{" "}