diff --git a/.eslintrc.js b/.eslintrc.js index 4b07ff99..0459a05c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -74,6 +74,8 @@ module.exports = { 'unicorn/numeric-separators-style': 'off', 'unicorn/prefer-node-protocol': 'off', + 'promise/always-return': 'off', + eqeqeq: 'error', 'no-param-reassign': 'error', 'no-nested-ternary': 'error', diff --git a/src/components/Article/Soundwave.tsx b/src/components/Article/Soundwave.tsx index b32c2bed..27164504 100644 --- a/src/components/Article/Soundwave.tsx +++ b/src/components/Article/Soundwave.tsx @@ -1,31 +1,63 @@ import { onMount } from 'solid-js' +/** + * A utility function for drawing our line segments + * @param {AudioContext} ctx the audio context + * @param {number} x the x coordinate of the beginning of the line segment + * @param {number} height the desired height of the line segment + * @param {number} width the desired width of the line segment + * @param {boolean} isEven whether or not the segmented is even-numbered + */ +const drawLineSegment = (ctx, x, height, width, isEven) => { + ctx.lineWidth = 1 // how thick the line is + ctx.strokeStyle = '#fff' // what color our line is + ctx.beginPath() + const h = isEven ? height : -height + ctx.moveTo(x, 0) + ctx.lineTo(x, h) + ctx.arc(x + width / 2, h, width / 2, Math.PI, 0, isEven) + ctx.lineTo(x + width, 0) + ctx.stroke() +} + +/** + * Filters the AudioBuffer retrieved from an external source + * @param {AudioBuffer} audioBuffer the AudioBuffer from drawAudio() + * @returns {Array} an array of floating point numbers + */ +const filterData = (audioBuffer) => { + const rawData = audioBuffer.getChannelData(0) // We only need to work with one channel of data + const samples = 70 // Number of samples we want to have in our final data set + const blockSize = Math.floor(rawData.length / samples) // the number of samples in each subdivision + const filteredData = [] + for (let i = 0; i < samples; i++) { + const blockStart = blockSize * i // the location of the first sample in the block + let sum = 0 + for (let j = 0; j < blockSize; j++) { + sum = sum + Math.abs(rawData[blockStart + j]) // find the sum of all the samples in the block + } + filteredData.push(sum / blockSize) // divide the sum by the block size to get the average + } + return filteredData +} + +/** + * Normalizes the audio data to make a cleaner illustration + * @param {Array} filteredData the data from filterData() + * @returns {Array} an normalized array of floating point numbers + */ +const normalizeData = (filteredData) => { + const multiplier = Math.pow(Math.max(...filteredData), -1) + return filteredData.map((n) => n * multiplier) +} + interface SoundwaveProps { - url: String + url: string context: AudioContext } export const Soundwave = (props: SoundwaveProps) => { let canvasRef: HTMLCanvasElement - /** - * A utility function for drawing our line segments - * @param {AudioContext} ctx the audio context - * @param {number} x the x coordinate of the beginning of the line segment - * @param {number} height the desired height of the line segment - * @param {number} width the desired width of the line segment - * @param {boolean} isEven whether or not the segmented is even-numbered - */ - const drawLineSegment = (ctx, x, height, width, isEven) => { - ctx.lineWidth = 1 // how thick the line is - ctx.strokeStyle = '#fff' // what color our line is - ctx.beginPath() - const h = isEven ? height : -height - ctx.moveTo(x, 0) - ctx.lineTo(x, h) - ctx.arc(x + width / 2, h, width / 2, Math.PI, 0, isEven) - ctx.lineTo(x + width, 0) - ctx.stroke() - } /** * Draws the audio file into a canvas element. @@ -58,37 +90,6 @@ export const Soundwave = (props: SoundwaveProps) => { } } - /** - * Filters the AudioBuffer retrieved from an external source - * @param {AudioBuffer} audioBuffer the AudioBuffer from drawAudio() - * @returns {Array} an array of floating point numbers - */ - const filterData = (audioBuffer) => { - const rawData = audioBuffer.getChannelData(0) // We only need to work with one channel of data - const samples = 70 // Number of samples we want to have in our final data set - const blockSize = Math.floor(rawData.length / samples) // the number of samples in each subdivision - const filteredData = [] - for (let i = 0; i < samples; i++) { - const blockStart = blockSize * i // the location of the first sample in the block - let sum = 0 - for (let j = 0; j < blockSize; j++) { - sum = sum + Math.abs(rawData[blockStart + j]) // find the sum of all the samples in the block - } - filteredData.push(sum / blockSize) // divide the sum by the block size to get the average - } - return filteredData - } - - /** - * Normalizes the audio data to make a cleaner illustration - * @param {Array} filteredData the data from filterData() - * @returns {Array} an normalized array of floating point numbers - */ - const normalizeData = (filteredData) => { - const multiplier = Math.pow(Math.max(...filteredData), -1) - return filteredData.map((n) => n * multiplier) - } - /** * Retrieves audio from an external source, the initializes the drawing function * @param {AudioContext} audioContext the audio context diff --git a/src/components/Inbox/DialogAvatar.tsx b/src/components/Inbox/DialogAvatar.tsx index 7d3788d8..dbc63282 100644 --- a/src/components/Inbox/DialogAvatar.tsx +++ b/src/components/Inbox/DialogAvatar.tsx @@ -25,10 +25,10 @@ const colors = [ ] const getById = (letter: string) => - colors[Math.abs(Number(BigInt(letter.toLowerCase().charCodeAt(0) - 97) % BigInt(colors.length)))] + colors[Math.abs(Number(BigInt(letter.toLowerCase().codePointAt(0) - 97) % BigInt(colors.length)))] const DialogAvatar = (props: Props) => { - const nameFirstLetter = props.name.substring(0, 1) + const nameFirstLetter = props.name.slice(0, 1) const randomBg = createMemo(() => { return getById(nameFirstLetter) }) diff --git a/src/components/Inbox/DialogCard.tsx b/src/components/Inbox/DialogCard.tsx index dea0d61d..74d90673 100644 --- a/src/components/Inbox/DialogCard.tsx +++ b/src/components/Inbox/DialogCard.tsx @@ -7,16 +7,17 @@ type Props = { online?: boolean message?: string counter?: number -} & Author + author?: Author +} const DialogCard = (props: Props) => { return (