diff --git a/package-lock.json b/package-lock.json index b713fb22718..6ba15afcc35 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4138,6 +4138,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@borewit/text-codec": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@borewit/text-codec/-/text-codec-0.2.2.tgz", + "integrity": "sha512-DDaRehssg1aNrH4+2hnj1B7vnUGEjU6OIlyRdkMd0aUdIUvKXrJfXsy8LVtXAy7DRvYVluWbMspsRhz2lcW0mQ==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Borewit" + } + }, "node_modules/@bravemobile/react-native-code-push": { "version": "12.3.2", "resolved": "https://registry.npmjs.org/@bravemobile/react-native-code-push/-/react-native-code-push-12.3.2.tgz", @@ -5511,7 +5521,6 @@ }, "node_modules/@clack/prompts/node_modules/is-unicode-supported": { "version": "1.3.0", - "extraneous": true, "inBundle": true, "license": "MIT", "engines": { @@ -35974,6 +35983,101 @@ } } }, + "node_modules/@tokenizer/inflate": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@tokenizer/inflate/-/inflate-0.5.2.tgz", + "integrity": "sha512-3AZIuReWQ7i916s/UWAzy4V4k2wrkAZLW2sTi448W3w7Hz5uoc+Y7h+cnwzr0cwrwf3PsC5xKsH8MOl0NRltlg==", + "license": "MIT", + "dependencies": { + "debug": "^4.4.3", + "strtok3": "^10.6.2", + "token-types": "^6.1.2" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Borewit" + } + }, + "node_modules/@tokenizer/inflate/node_modules/debug": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/@tokenizer/inflate/node_modules/ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "BSD-3-Clause" + }, + "node_modules/@tokenizer/inflate/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "license": "MIT" + }, + "node_modules/@tokenizer/inflate/node_modules/strtok3": { + "version": "10.6.2", + "resolved": "https://registry.npmjs.org/strtok3/-/strtok3-10.6.2.tgz", + "integrity": "sha512-BkdixFFUt7r7LsX6aGNPVyYMLjW+M1USLlKPNbZsrZEmLFh5tGqhdfckKo6xgsZIJqdDD0CZGkeCJJwNWQIKQA==", + "license": "MIT", + "dependencies": { + "@tokenizer/token": "^0.3.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Borewit" + } + }, + "node_modules/@tokenizer/inflate/node_modules/token-types": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/token-types/-/token-types-6.1.2.tgz", + "integrity": "sha512-dRXchy+C0IgK8WPC6xvCHFRIWYUbqqdEIKPaKo/AcTUNzwLTK6AH7RjdLWsEZcAN/TBdtfUw3PYEgPr5VPr6ww==", + "license": "MIT", + "dependencies": { + "@borewit/text-codec": "^0.2.1", + "@tokenizer/token": "^0.3.0", + "ieee754": "^1.2.1" + }, + "engines": { + "node": ">=14.16" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Borewit" + } + }, "node_modules/@tokenizer/token": { "version": "0.3.0", "license": "MIT" @@ -38432,11 +38536,6 @@ "parse5": "^7.0.0" } }, - "node_modules/@types/jsmediatags": { - "version": "3.9.1", - "dev": true, - "license": "MIT" - }, "node_modules/@types/json-schema": { "version": "7.0.15", "dev": true, @@ -68880,16 +68979,6 @@ "node": ">=6" } }, - "node_modules/jsmediatags": { - "version": "3.8.1", - "license": "BSD-3-Clause", - "dependencies": { - "xhr2": "^0.1.4" - }, - "engines": { - "node": ">=4.0.0" - } - }, "node_modules/json-bigint": { "version": "1.0.0", "license": "MIT", @@ -77796,6 +77885,158 @@ "node": ">=8.0.0" } }, + "node_modules/music-metadata": { + "version": "12.3.2", + "resolved": "https://registry.npmjs.org/music-metadata/-/music-metadata-12.3.2.tgz", + "integrity": "sha512-U+Wu8c/7xa8wP331oVuRTAJSHcEWQIkLjpuyRJG+CAIszGYhpr5CRDv6PqkkVHDoX3ndjmdJlB6S49AaLq8SbQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/Borewit" + }, + { + "type": "buymeacoffee", + "url": "https://buymeacoffee.com/borewit" + } + ], + "license": "MIT", + "dependencies": { + "@borewit/text-codec": "^0.2.2", + "@tokenizer/token": "^0.3.0", + "content-type": "^3.1.1", + "debug": "^4.4.3", + "file-type": "^22.2.0", + "media-typer": "^2.0.0", + "strtok3": "^10.6.2", + "token-types": "^6.1.2", + "uint8array-extras": "^1.6.0", + "win-guid": "^0.2.1" + }, + "engines": { + "node": ">=22" + } + }, + "node_modules/music-metadata/node_modules/content-type": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-3.1.1.tgz", + "integrity": "sha512-GW4qUsfFo59d0HbUibDlWv5wPz+vAAcaTWbKIuKCf0JkC7wWkSyf8f13IpXn5JkeMlB2P8iTSSIjwXljorg2vA==", + "license": "MIT", + "engines": { + "node": ">=22" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/music-metadata/node_modules/debug": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/music-metadata/node_modules/file-type": { + "version": "22.2.0", + "resolved": "https://registry.npmjs.org/file-type/-/file-type-22.2.0.tgz", + "integrity": "sha512-XmEVJsRpQMVYC+sWFW+FKAVo2P7/lPctDdWH4UQ1r6oxhdrTobnowdM3z+ZJ93a4J8D3yDpxX0bEvRuFev0vUQ==", + "license": "MIT", + "dependencies": { + "@tokenizer/inflate": "^0.5.1", + "strtok3": "^10.5.0", + "token-types": "^6.1.2", + "uint8array-extras": "^1.6.0" + }, + "engines": { + "node": ">=22" + }, + "funding": { + "url": "https://github.com/sindresorhus/file-type?sponsor=1" + } + }, + "node_modules/music-metadata/node_modules/ieee754": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "BSD-3-Clause" + }, + "node_modules/music-metadata/node_modules/media-typer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-2.0.0.tgz", + "integrity": "sha512-kOy3OxT2HH39N70UnKgu4NWDZjLOz8W/mfyvniHjRH/DrL3f2pOfvWQ4p60offbbtDAnXWp0v9LfMIqMec269Q==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/music-metadata/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "license": "MIT" + }, + "node_modules/music-metadata/node_modules/strtok3": { + "version": "10.6.2", + "resolved": "https://registry.npmjs.org/strtok3/-/strtok3-10.6.2.tgz", + "integrity": "sha512-BkdixFFUt7r7LsX6aGNPVyYMLjW+M1USLlKPNbZsrZEmLFh5tGqhdfckKo6xgsZIJqdDD0CZGkeCJJwNWQIKQA==", + "license": "MIT", + "dependencies": { + "@tokenizer/token": "^0.3.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Borewit" + } + }, + "node_modules/music-metadata/node_modules/token-types": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/token-types/-/token-types-6.1.2.tgz", + "integrity": "sha512-dRXchy+C0IgK8WPC6xvCHFRIWYUbqqdEIKPaKo/AcTUNzwLTK6AH7RjdLWsEZcAN/TBdtfUw3PYEgPr5VPr6ww==", + "license": "MIT", + "dependencies": { + "@borewit/text-codec": "^0.2.1", + "@tokenizer/token": "^0.3.0", + "ieee754": "^1.2.1" + }, + "engines": { + "node": ">=14.16" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Borewit" + } + }, "node_modules/mustache": { "version": "4.2.0", "dev": true, @@ -99385,6 +99626,18 @@ "node": ">=0.8.0" } }, + "node_modules/uint8array-extras": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/uint8array-extras/-/uint8array-extras-1.6.0.tgz", + "integrity": "sha512-8iAasVS4wUx0gPLjH8Xtz2PeDzTSiy8QiLGu2DT3X5GU+egFEQhpnbtkehbAwjvDcxIERmCYcysiODFmE3Ud0Q==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/uint8arrays": { "version": "3.1.1", "license": "MIT", @@ -106208,6 +106461,12 @@ "dev": true, "license": "MIT" }, + "node_modules/win-guid": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/win-guid/-/win-guid-0.2.1.tgz", + "integrity": "sha512-gEIQU4mkgl2OPeoNrWflcJFJ3Ae2BPd4eCsHHA/XikslkIVms/nHhvnvzIZV7VLmBvtFlDOzLt9rrZT+n6D67A==", + "license": "MIT" + }, "node_modules/wkx": { "version": "0.4.8", "license": "MIT", @@ -107100,13 +107359,6 @@ "node": ">=0.10.0" } }, - "node_modules/xhr2": { - "version": "0.1.4", - "license": "MIT", - "engines": { - "node": ">= 0.6" - } - }, "node_modules/xhr2-cookies": { "version": "1.1.0", "license": "MIT", @@ -126921,13 +127173,13 @@ "jimp": "0.6.8", "js-sha3": "0.8.0", "js-yaml": "3.13.1", - "jsmediatags": "3.8.1", "linkify-react": "4.1.0", "linkifyjs": "4.1.0", "localforage": "1.10.0", "lodash": "4.17.21", "lottie-react": "2.4.0", "markdown-to-jsx": "7.4.3", + "music-metadata": "12.3.2", "numeral": "2.0.6", "persona": "5.5.0", "prop-types": "15.7.2", @@ -126987,7 +127239,6 @@ "@types/eth-sig-util": "2.1.1", "@types/history": "^4.7.11", "@types/js-yaml": "3.12.4", - "@types/jsmediatags": "3.9.1", "@types/linkifyjs": "2.1.3", "@types/lodash": "4.14.149", "@types/node": "12.12.35", diff --git a/packages/web/package.json b/packages/web/package.json index 0ecebc2eabc..1e2df5a9565 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -122,13 +122,13 @@ "jimp": "0.6.8", "js-sha3": "0.8.0", "js-yaml": "3.13.1", - "jsmediatags": "3.8.1", "linkify-react": "4.1.0", "linkifyjs": "4.1.0", "localforage": "1.10.0", "lodash": "4.17.21", "lottie-react": "2.4.0", "markdown-to-jsx": "7.4.3", + "music-metadata": "12.3.2", "numeral": "2.0.6", "persona": "5.5.0", "prop-types": "15.7.2", @@ -192,7 +192,6 @@ "@types/eth-sig-util": "2.1.1", "@types/history": "^4.7.11", "@types/js-yaml": "3.12.4", - "@types/jsmediatags": "3.9.1", "@types/linkifyjs": "2.1.3", "@types/lodash": "4.14.149", "@types/node": "12.12.35", diff --git a/packages/web/src/pages/upload-page/store/utils/fixtures/cover.mp3 b/packages/web/src/pages/upload-page/store/utils/fixtures/cover.mp3 new file mode 100644 index 00000000000..ee4309bfbd5 Binary files /dev/null and b/packages/web/src/pages/upload-page/store/utils/fixtures/cover.mp3 differ diff --git a/packages/web/src/pages/upload-page/store/utils/fixtures/cover.opus b/packages/web/src/pages/upload-page/store/utils/fixtures/cover.opus new file mode 100644 index 00000000000..60e964a06ed Binary files /dev/null and b/packages/web/src/pages/upload-page/store/utils/fixtures/cover.opus differ diff --git a/packages/web/src/pages/upload-page/store/utils/fixtures/cover.png b/packages/web/src/pages/upload-page/store/utils/fixtures/cover.png new file mode 100644 index 00000000000..29a28460e66 Binary files /dev/null and b/packages/web/src/pages/upload-page/store/utils/fixtures/cover.png differ diff --git a/packages/web/src/pages/upload-page/store/utils/fixtures/no-cover.wav b/packages/web/src/pages/upload-page/store/utils/fixtures/no-cover.wav new file mode 100644 index 00000000000..34d3d5c482b Binary files /dev/null and b/packages/web/src/pages/upload-page/store/utils/fixtures/no-cover.wav differ diff --git a/packages/web/src/pages/upload-page/store/utils/processFiles.test.ts b/packages/web/src/pages/upload-page/store/utils/processFiles.test.ts new file mode 100644 index 00000000000..4b47dfed8f2 --- /dev/null +++ b/packages/web/src/pages/upload-page/store/utils/processFiles.test.ts @@ -0,0 +1,100 @@ +import { readFileSync } from 'fs' + +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + +import { resizeImage } from 'utils/imageProcessingUtil' + +import { processFiles } from './processFiles' + +vi.mock('@audius/common/schemas', () => ({ + newTrackMetadata: vi.fn((metadata) => metadata) +})) +vi.mock( + '@audius/common/utils', + () => import('@audius/common/src/utils/uploadConstants') +) +vi.mock('utils/imageProcessingUtil', () => ({ resizeImage: vi.fn() })) + +// Original 440 Hz tones generated with FFmpeg. cover.mp3 contains an ID3v2.3 +// front cover and title; cover.opus contains METADATA_BLOCK_PICTURE artwork. +const fixtureDirectory = 'src/pages/upload-page/store/utils/fixtures' +const fixture = (name: string, type: string) => + new File([readFileSync(`${fixtureDirectory}/${name}`)], name, { + type + }) + +const upload = async (file: File) => { + const handleInvalid = vi.fn() + const [track] = await Promise.all(processFiles([file], handleInvalid)) + expect(handleInvalid).not.toHaveBeenCalled() + return track! +} + +describe('processFiles artwork', () => { + beforeEach(() => { + vi.mocked(resizeImage).mockReset() + vi.mocked(resizeImage).mockResolvedValue( + new File(['resized artwork'], 'resized.png', { type: 'image/png' }) + ) + vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:artwork') + vi.spyOn(console, 'warn').mockImplementation(() => {}) + }) + + afterEach(() => { + vi.restoreAllMocks() + }) + + it.each([ + ['cover.opus', 'audio/ogg'], + ['cover.mp3', 'audio/mpeg'] + ])( + 'extracts embedded artwork from %s through the resize pipeline', + async (name, type) => { + const file = fixture(name, type) + const track = await upload(file) + + expect(resizeImage).toHaveBeenCalledOnce() + const image = vi.mocked(resizeImage).mock.calls[0][0] + expect(image.type).toBe('image/png') + expect(new Uint8Array(await image.arrayBuffer())).toEqual( + new Uint8Array(readFileSync(`${fixtureDirectory}/cover.png`)) + ) + expect(track.file).toBe(file) + expect(track.metadata.title).toBe(name.replace(/\.[^.]+$/, '')) + expect(track.metadata.orig_filename).toBe(name) + expect(track.metadata.artwork.url).toBe('blob:artwork') + expect(await track.metadata.artwork.file!.text()).toBe('resized artwork') + expect(console.warn).not.toHaveBeenCalled() + } + ) + + it('continues without artwork when the audio has no cover', async () => { + const track = await upload(fixture('no-cover.wav', 'audio/wav')) + + expect(track.metadata.artwork).toEqual({ file: null, url: '' }) + expect(resizeImage).not.toHaveBeenCalled() + expect(console.warn).not.toHaveBeenCalled() + }) + + it('continues uploading when metadata parsing fails', async () => { + const file = new File(['not audio'], 'broken.tsv', { + type: 'audio/unknown' + }) + const track = await upload(file) + + expect(track.file).toBe(file) + expect(track.metadata.artwork).toEqual({ file: null, url: '' }) + expect(resizeImage).not.toHaveBeenCalled() + expect(console.warn).toHaveBeenCalledOnce() + }) + + it('continues uploading when resizing the embedded cover fails', async () => { + vi.mocked(resizeImage).mockRejectedValue( + new Error('Unable to resize image') + ) + const track = await upload(fixture('cover.opus', 'audio/ogg')) + + expect(track.metadata.artwork).toEqual({ file: null, url: '' }) + expect(console.warn).toHaveBeenCalledOnce() + }) +}) diff --git a/packages/web/src/pages/upload-page/store/utils/processFiles.ts b/packages/web/src/pages/upload-page/store/utils/processFiles.ts index 75c1b8eb196..c055b9c7bad 100644 --- a/packages/web/src/pages/upload-page/store/utils/processFiles.ts +++ b/packages/web/src/pages/upload-page/store/utils/processFiles.ts @@ -4,26 +4,10 @@ import { ALLOWED_AUDIO_FILE_EXTENSIONS, ALLOWED_AUDIO_FILE_MIME } from '@audius/common/utils' -import jsmediatags from 'jsmediatags' import { resizeImage } from 'utils/imageProcessingUtil' -const readMediaTags = (file: File): Promise => { - return new Promise(function (resolve, reject) { - jsmediatags.read(file, { - onSuccess: function (tag: any) { - let tags - if (tag && tag.tags) { - tags = tag.tags - } - resolve(tags) - }, - onError: function (error) { - reject(error) - } - }) - }) -} +let musicMetadataPromise: Promise | undefined const createArtwork = async (selectedFiles: File[]) => { const file = selectedFiles[0] @@ -68,13 +52,18 @@ export const processFiles = ( const title = file.name.replace(/\.[^/.]+$/, '') // strip file extension let artwork = { file: null as File | null, url: '' } try { - const tags = await readMediaTags(file) - if (tags && tags.picture) { - const dataArray = new Uint8Array(tags.picture.data) - const blob = new window.Blob([dataArray]) - const artworkFile = new File([blob], 'Artwork', { - type: tags.picture.format - }) + musicMetadataPromise ??= import('music-metadata') + const { parseBlob, selectCover } = await musicMetadataPromise + const { common } = await parseBlob(file) + const picture = selectCover(common.picture) + if (picture) { + const artworkFile = new File( + [new Uint8Array(picture.data)], + 'Artwork', + { + type: picture.format + } + ) artwork = await createArtwork([artworkFile]) } } catch (error) {