Migrated from MUI & Emotion to NextUI w/ Tailwind

README.md

@@ -30,9 +30,9 @@ Mixpoint solves a common problem that many "desktop" DJ's face - there are only
 
 The goal of this app is to provide a focused user experience that delivers on the need to lay out a series of tracks, easily tweak the transition from one track to the next (a mix), and save the output as a finished set. Using ai, the software will recommend mixes based on mixes other people have created, and eventually mix tracks together for you.
 
-Huge thanks to the MUI team for creating such a [kickass UI](https://mui.com/joy-ui/getting-started/overview/) freely available.
+Huge thanks to the NextUI team for creating such a [kickass UI](https://nextui.org) freely available.
 
-The project uses [Wavesurfer](https://wavesurfer-js.org/) for waveform analysis and navigation. Also thanks to John Heiner for the fun progress indicator.
+The project uses [Wavesurfer](https://wavesurfer-js.org/) for waveform analysis and navigation.
 
 Open source is more than a licensing strategy. It's a [movement](https://opensource.stackexchange.com/questions/9805/can-i-license-my-project-with-an-open-source-license-but-disallow-commercial-use). This work is made possible only by the labor of many open source contributers and their freely sourced efforts.
 
@@ -48,7 +48,7 @@ The app is built using `Remix` which uses esBuild (now Vite) for really fast hot
 
 - Typescript
 - Remix
-- MUI (Joy)
+- NextUI
 - Teaful for App State
 - Dexie (IndexedDb) for Persistent State
 - WaveSurfer

app/api/audioEvents.ts

@@ -55,22 +55,23 @@ const audioEvents = {
 
 			// Adjust zoom based on previous mixPrefs
 			waveform.zoom(
-				beatResolution === 1 ? 80 : beatResolution === 0.5 ? 40 : 20
+				beatResolution === '1:1' ? 80 : beatResolution === '1:2' ? 40 : 20
 			)
 
 			// Remove analyzing overlay
-			setAppState.analyzing(prev => prev.filter(id => id !== trackId))
+			setAppState.analyzing(prev => {
+				prev.delete(trackId)
+				return prev
+			})
 
 			// Style scrollbar (this is a workaround for https://github.com/katspaugh/wavesurfer.js/issues/2933)
 			const style = document.createElement('style')
 			style.textContent = `::-webkit-scrollbar {
-				background: rgba(4, 146, 247, 0.5);
 				height: 18px;
 			}
 
 			::-webkit-scrollbar-corner, ::-webkit-scrollbar-track {
-				border-top: 1px solid var(--joy-palette-divider);
-				background-color: var(--joy-palette-background-surface);
+				border-top: 1px solid rgba(128,128,128,.3);
 			}
 
 			::-webkit-scrollbar-thumb {
@@ -82,6 +83,9 @@ const audioEvents = {
 			}`
 			waveform.getWrapper().appendChild(style)
 
+			// add classname value to waveform.getWrapper()
+			waveform.getWrapper().classList.add('wrapper')
+
 			// Update time
 			let [time] = getAudioState[trackId].time()
 			if (!time) {
@@ -93,7 +97,10 @@ const audioEvents = {
 			waveform.on('redraw', () => audioEvents.seek(trackId))
 		} else {
 			// Remove from stemsAnalyzing
-			setAppState.stemsAnalyzing(prev => prev.filter(id => id !== trackId))
+			setAppState.stemsAnalyzing(prev => {
+				prev.delete(trackId)
+				return prev
+			})
 		}
 
 		// Update BPM if adjusted
@@ -418,13 +425,13 @@ const audioEvents = {
 
 		// Adjust zoom
 		switch (beatResolution) {
-			case 0.25:
+			case '1:4':
 				waveform.zoom(20)
 				break
-			case 0.5:
+			case '1:2':
 				waveform.zoom(40)
 				break
-			case 1:
+			case '1:1':
 				waveform.zoom(80)
 				break
 		}
@@ -531,9 +538,7 @@ const audioEvents = {
 		stem: TrackPrefs['stemZoom'] | 'all'
 	) => {
 		// add track to analyzing state
-		setAppState.analyzing(prev =>
-			prev.includes(trackId) ? prev : [...prev, trackId]
-		)
+		setAppState.analyzing(prev => prev.add(trackId))
 
 		const [{ waveform }] = getAudioState[trackId]()
 		if (waveform) waveform.destroy()
@@ -575,7 +580,10 @@ const audioEvents = {
 		}
 
 		// Remove from stemsAnalyzing
-		setAppState.stemsAnalyzing(prev => prev.filter(id => id !== trackId))
+		setAppState.stemsAnalyzing(prev => {
+			prev.delete(trackId)
+			return prev
+		})
 	}
 }
 

app/api/audioHandlers.ts

@@ -34,7 +34,10 @@ async function getTracksRecursively(
 	const trackArray: partialTrack[] = []
 
 	// Change sort order to lastModified so new tracks are visible at the top
-	await setPrefs('user', { sortColumn: 'lastModified', sortDirection: 'desc' })
+	await setPrefs('user', {
+		sortColumn: 'lastModified',
+		sortDirection: 'descending'
+	})
 
 	const filesToTracks = async (
 		fileOrDirectoryHandle: FileSystemFileHandle | FileSystemDirectoryHandle,
@@ -96,15 +99,16 @@ async function getTracksRecursively(
 			}
 		})
 		return []
-	} else return addTracksToDb()
+	}
+
+	return addTracksToDb()
 }
 
 const analyzeTracks = async (tracks: Track[]): Promise<Track[]> => {
 	// Set analyzing state now to avoid tracks appearing with 'analyze' button
-	setAppState.analyzing(analyzing => [
-		...analyzing,
-		...tracks.map(track => track.id)
-	])
+	setAppState.analyzing(
+		prev => new Set([...prev, ...tracks.map(track => track.id)])
+	)
 
 	// Return array of updated tracks
 	const updatedTracks: Track[] = []
@@ -115,9 +119,9 @@ const analyzeTracks = async (tracks: Track[]): Promise<Track[]> => {
 			// Change sort order to lastModified so new tracks are visible at the top
 			await setPrefs('user', {
 				sortColumn: 'lastModified',
-				sortDirection: 'desc'
+				sortDirection: 'descending'
 			})
-			setAppState.page(0)
+			setAppState.page(1)
 			sorted = true
 		}
 
@@ -142,7 +146,10 @@ const analyzeTracks = async (tracks: Track[]): Promise<Track[]> => {
 		updatedTracks.push(trackWithId)
 
 		// Remove from analyzing state
-		setAppState.analyzing(analyzing => analyzing.filter(id => id !== track.id))
+		setAppState.analyzing(prev => {
+			prev.delete(track.id)
+			return prev
+		})
 	}
 	return updatedTracks
 }
@@ -160,7 +167,7 @@ const getAudioDetails = async (
 }> => {
 	const file = await getPermission(track)
 	if (!file) {
-		setAppState.analyzing([])
+		setAppState.analyzing(new Set())
 		throw errorHandler('Permission to the file or folder was denied.')
 	}
 
@@ -223,10 +230,10 @@ const calcMarkers = async (trackId: Track['id']): Promise<void> => {
 
 	if (!duration) return errorHandler(`Please try adding ${name} again.`)
 
-	const { beatResolution = 1 } = await getTrackPrefs(trackId)
+	const { beatResolution = '1:4' } = await getTrackPrefs(trackId)
 
 	const beatInterval = 60 / (bpm || 1)
-	const skipLength = beatInterval * (1 / beatResolution)
+	const skipLength = beatInterval * Number(beatResolution.split(':')[1])
 
 	let startPoint = adjustedOffset || offset || 0
 

app/api/db/__dbSchema.ts

@@ -1,6 +1,7 @@
 // This file initializes Dexie (indexDB), defines the schema and creates tables
 
 import Dexie from 'dexie'
+import { Key } from 'react'
 
 // eventually allow the user to change these
 const STATE_ROW_LIMIT = 100
@@ -89,7 +90,7 @@ type MixSet = {
 // disk, which cannot be done without interacting with the page first.
 // Each file is a few megabytes, so the cache must be limited.
 const STEMS = ['drums', 'bass', 'vocals', 'other'] as const
-type Stem = typeof STEMS[number]
+type Stem = (typeof STEMS)[number]
 
 type TrackCache = {
 	id: Track['id']
@@ -103,7 +104,7 @@ type TrackCache = {
 type TrackPrefs = Partial<{
 	id: Track['id']
 	adjustedBpm: Track['bpm']
-	beatResolution: 0.25 | 0.5 | 1
+	beatResolution: '1:1' | '1:2' | '1:4'
 	stemZoom: Stem
 	mixpointTime: number // seconds
 }>
@@ -127,8 +128,9 @@ type SetPrefs = Partial<{
 
 type UserPrefs = Partial<{
 	date: Date
-	sortDirection: 'asc' | 'desc'
-	sortColumn: keyof Track // track table order property
+	sortDirection: 'ascending' | 'descending'
+	sortColumn: Key
+	visibleColumns: Set<Key> // track table visible columns
 	stemsDirHandle: FileSystemDirectoryHandle // local folder on file system to store stems
 }>
 

app/api/db/appState.ts

@@ -1,6 +1,7 @@
 // This file handles application state that is not persisted through page refreshes, therefore not in IndexedDB. appState is different from Prefs in that it isn't persistent.
 
-import { ButtonProps } from '@mui/joy'
+import type { ButtonProps } from '@nextui-org/react'
+import { Key } from 'react'
 import createStore from 'teaful'
 import type WaveSurfer from 'wavesurfer.js'
 import { Stem, Track } from '~/api/db/dbHandlers'
@@ -56,27 +57,27 @@ const {
 	setStore: setAppState
 } = createStore<{
 	search: string | number
-	selected: Track['id'][]
+	selected: Set<Key> // NextUI table uses string keys
 	rowsPerPage: number
 	page: number
 	showButton: number | null
 	openDrawer: boolean
 	processing: boolean
-	analyzing: Track['id'][]
-	stemsAnalyzing: Track['id'][]
+	analyzing: Set<Track['id']>
+	stemsAnalyzing: Set<Track['id']>
 	syncTimer: ReturnType<typeof requestAnimationFrame> | undefined
 	audioContext?: AudioContext
 	loggedIn: string // email address
 }>({
 	search: '',
-	selected: [],
+	selected: new Set(),
 	rowsPerPage: 10,
-	page: 0,
+	page: 1,
 	showButton: null,
 	openDrawer: false,
 	processing: false,
-	analyzing: [],
-	stemsAnalyzing: [],
+	analyzing: new Set(),
+	stemsAnalyzing: new Set(),
 	syncTimer: undefined,
 	loggedIn: ''
 })

app/api/db/dbHandlers.ts

@@ -89,7 +89,7 @@ const putTracks = async (tracks: TrackIdOptional[]): Promise<Track[]> => {
 	return (await db.tracks.bulkGet(updatedTracks)) as Track[]
 }
 
-const removeTracks = async (ids: number[]): Promise<void> => {
+const removeTracks = async (ids: Track['id'][]): Promise<void> => {
 	await db.tracks.bulkDelete(ids)
 
 	// Ensure we delete the file cache when a track is deleted

app/api/fileHandlers.ts

@@ -84,7 +84,7 @@ const browseFile = async (trackSlot?: 0 | 1): Promise<void> => {
 
 	if (files?.length) {
 		const tracks = (await processTracks(files)) || []
-		addToMix(tracks[trackSlot || 0])
+		if (tracks.length === 1) addToMix(tracks[trackSlot || 0])
 	}
 }
 
@@ -198,7 +198,10 @@ const validateTrackStemAccess = async (
 	const state = await checkAccess()
 	if (state === 'ready') {
 		// remove analyzing
-		setAppState.stemsAnalyzing(prev => prev.filter(id => id !== trackId))
+		setAppState.stemsAnalyzing(prev => {
+			prev.delete(trackId)
+			return prev
+		})
 	}
 
 	if (stemState !== state) setAudioState[trackId].stemState(state)