faders done

jgentes · Dec 29, 2023 · 0972bd8 · 0972bd8
1 parent e968be3
commit 0972bd8
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 102 deletions.
diff --git a/app/components/icons.tsx b/app/components/icons.tsx
@@ -69,10 +69,10 @@ const PreviousIcon = createIcon(
 	'M6.73 16.615v-9.23h1v9.23zm10.54 0L10.345 12l6.923-4.615z'
 )
 const RevertIcon = createIcon(
-	'M11.962 13q-.402 0-.701-.299q-.3-.3-.3-.701t.3-.701q.299-.299.7-.299t.702.299q.299.3.299.701t-.3.701q-.299.299-.7.299m0 7q-3.052 0-5.314-1.999q-2.261-2-2.617-5.001h1.011q.408 2.58 2.359 4.29t4.56 1.71q2.926 0 4.963-2.037T18.962 12q0-2.925-2.038-4.963T11.962 5q-1.552 0-2.918.656q-1.365.656-2.41 1.806h2.481v1H4.962V4.308h1v2.388q1.16-1.273 2.718-1.984Q10.238 4 11.962 4q1.665 0 3.119.626q1.454.626 2.541 1.713t1.714 2.542q.626 1.453.626 3.118q0 1.664-.626 3.12q-.626 1.454-1.714 2.542q-1.087 1.087-2.541 1.713q-1.454.626-3.12.626'
+	'M12 21q-3.15 0-5.575-1.912T3.275 14.2q-.1-.375.15-.687t.675-.363q.4-.05.725.15t.45.6q.6 2.25 2.475 3.675T12 19q2.925 0 4.963-2.037T19 12q0-2.925-2.037-4.962T12 5q-1.725 0-3.225.8T6.25 8H8q.425 0 .713.288T9 9q0 .425-.288.713T8 10H4q-.425 0-.712-.288T3 9V5q0-.425.288-.712T4 4q.425 0 .713.288T5 5v1.35q1.275-1.6 3.113-2.475T12 3q1.875 0 3.513.713t2.85 1.924q1.212 1.213 1.925 2.85T21 12q0 1.875-.712 3.513t-1.925 2.85q-1.213 1.212-2.85 1.925T12 21m0-7q-.825 0-1.412-.587T10 12q0-.825.588-1.412T12 10q.825 0 1.413.588T14 12q0 .825-.587 1.413T12 14'
 )
 const SetMixpointIcon = createIcon(
-	'M12 14q.846 0 1.423-.577Q14 12.846 14 12q0-.846-.577-1.423Q12.846 10 12 10q-.846 0-1.423.577Q10 11.154 10 12q0 .846.577 1.423Q11.154 14 12 14m.003 7q-1.866 0-3.51-.708q-1.643-.709-2.859-1.924q-1.216-1.214-1.925-2.856Q3 13.87 3 12.003q0-1.866.708-3.51q.709-1.643 1.924-2.859q1.214-1.216 2.856-1.925Q10.13 3 11.997 3q1.866 0 3.51.708q1.643.709 2.859 1.924q1.216 1.214 1.925 2.856Q21 10.13 21 11.997q0 1.866-.708 3.51q-.709 1.643-1.924 2.859q-1.214 1.216-2.856 1.925Q13.87 21 12.003 21M12 20q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20m0-8'
+	'M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15m0 7q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12q0-3.35-2.325-5.675T12 4Q8.65 4 6.325 6.325T4 12q0 3.35 2.325 5.675T12 20m0-8'
 )
 const PauseIcon = createIcon('M14 18V6h3.5v12zm-7.5 0V6H10v12z')
 const PlayIcon = createIcon('M9 17.192V6.808L17.154 12z')

diff --git a/app/components/layout/DarkModeButton.tsx b/app/components/layout/DarkModeButton.tsx
@@ -8,6 +8,7 @@ const DarkMode = () => {
 	return (
 		<Tooltip
 			color="primary"
+			size="sm"
 			content={theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
 		>
 			<Button

diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
@@ -9,7 +9,7 @@ const Header = () => (
 		<Logo />
 		<div className="flex flex-row gap-x-2">
 			<LoginButton />
-			<Tooltip color="primary" content="Discuss on GitHub">
+			<Tooltip color="primary" size="sm" content="Discuss on GitHub">
 				<Button
 					isIconOnly
 					variant="light"

diff --git a/app/components/mixes/MixView.tsx b/app/components/mixes/MixView.tsx
@@ -12,7 +12,7 @@ const MixView = ({ tracks }: { tracks: MixPrefs['tracks'] }) => {
 	return (
 		<div className="flex justify-between m-4">
 			<MixCard trackId={tracks[0]} trackSlot={0} />
-			<div className="flex flex-col mt-4">
+			<div className="flex flex-col mt-2">
 				<CrossfaderControl />
 				<MixControl tracks={tracks} />
 				<StemsCrossfaders />

diff --git a/app/components/tracks/Controls.tsx b/app/components/tracks/Controls.tsx
@@ -1,13 +1,4 @@
-import {
-	Box,
-	Card,
-	Radio,
-	RadioGroup,
-	Slider,
-	Typography,
-	radioClasses
-} from '@mui/joy'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { Key, useCallback, useEffect, useRef, useState } from 'react'
 import { audioEvents } from '~/api/audioEvents'
 import {
 	MixPrefs,
@@ -26,6 +17,7 @@ import {
 	Link,
 	Select,
 	SelectItem,
+	Slider,
 	Tab,
 	Tabs,
 	Tooltip
@@ -103,7 +95,7 @@ const NumberControl = ({
 	}
 
 	const ResetValLink = () => (
-		<Tooltip color="default" content={title} isDisabled={!valDiff}>
+		<Tooltip color="default" content={title} size="sm" isDisabled={!valDiff}>
 			<Link
 				underline="none"
 				onClick={() => adjustVal()}
@@ -277,7 +269,7 @@ const BeatResolutionControl = ({
 		useLiveQuery(() => getTrackPrefs(trackId), [trackId]) || {}
 
 	return (
-		<Tooltip color="default" content="Beat Resolution">
+		<Tooltip color="default" size="sm" content="Beat Resolution">
 			<Tabs
 				selectedKey={beatResolution}
 				aria-label="Beat Resolution"
@@ -340,12 +332,12 @@ const TrackNavControl = ({ trackId = 0 }: { trackId: TrackPrefs['id'] }) => {
 				},
 				{
 					val: 'Go to Mixpoint',
-					icon: <RevertIcon className="text-2xl" />
+					icon: <RevertIcon className="text-xl" />
 				},
 
 				{
 					val: 'Set Mixpoint',
-					icon: <SetMixpointIcon className="text-2xl" />
+					icon: <SetMixpointIcon className="text-xl" />
 				},
 				{
 					val: isPlaying ? 'Pause' : 'Play',
@@ -363,7 +355,7 @@ const TrackNavControl = ({ trackId = 0 }: { trackId: TrackPrefs['id'] }) => {
 				const noNudge = item.val.includes('Nudge') && !isPlaying
 
 				return (
-					<Tooltip key={item.val} color="default" content={item.val}>
+					<Tooltip key={item.val} color="default" size="sm" content={item.val}>
 						<Button
 							isIconOnly
 							variant="light"
@@ -387,7 +379,7 @@ const TrackNavControl = ({ trackId = 0 }: { trackId: TrackPrefs['id'] }) => {
 const MixControl = ({ tracks }: { tracks: MixPrefs['tracks'] }) => {
 	if (!tracks?.length) return null
 
-	const navEvent = (nav: string) => {
+	const navEvent = (nav: Key) => {
 		switch (nav) {
 			case 'Play':
 				audioEvents.play()
@@ -401,18 +393,20 @@ const MixControl = ({ tracks }: { tracks: MixPrefs['tracks'] }) => {
 		}
 	}
 
-	const radioSize = 28
-
 	return (
-		<RadioGroup
-			orientation={'horizontal'}
-			name="mixControl"
-			variant="outlined"
-			sx={{ height: radioSize, my: 1, backgroundColor: 'background.surface' }}
-			onClick={e => {
-				const el = e.target as HTMLInputElement
-				navEvent(el.value)
+		<Tabs
+			aria-label="Mix Controls"
+			variant="solid"
+			classNames={{
+				base: 'border-1 border-primary-300 rounded',
+				tabList: 'rounded h-7 bg-primary px-0 gap-.5',
+				tab: 'rounded px-3 h-auto',
+				tabContent:
+					'group-data-[selected=true]:text-primary-700 text-primary-700',
+				cursor:
+					'group-data-[selected=true]:bg-transparent group-data-[selected=true]:rounded p-2'
 			}}
+			onSelectionChange={navEvent}
 		>
 			{[
 				{
@@ -421,67 +415,16 @@ const MixControl = ({ tracks }: { tracks: MixPrefs['tracks'] }) => {
 				},
 				{
 					val: 'Pause',
-					icon: <PauseIcon className="text-lg" />
+					icon: <PauseIcon className="text-2xl" />
 				},
 				{
 					val: 'Play',
-					icon: <PlayIcon className="text-lg" />
+					icon: <PlayIcon className="text-2xl" />
 				}
 			].map(item => (
-				<Box
-					key={item.val}
-					sx={theme => {
-						return {
-							position: 'relative',
-							display: 'flex',
-							justifyContent: 'center',
-							alignItems: 'center',
-							width: radioSize * 2,
-							height: radioSize,
-							'&:not([data-first-child])': {
-								borderLeft: '1px solid',
-								borderColor: `${theme.palette.divider} !important`,
-								height: '99%'
-							},
-							[`&[data-first-child] .${radioClasses.action}`]: {
-								borderTopLeftRadius: `calc(${theme.vars.radius.sm} - 1px)`,
-								borderBottomLeftRadius: `calc(${theme.vars.radius.sm} - 1px)`,
-								bottom: '2px',
-								left: '-1px'
-							},
-							[`&[data-last-child] .${radioClasses.action}`]: {
-								borderTopRightRadius: `calc(${theme.vars.radius.sm} - 1px)`,
-								borderBottomRightRadius: `calc(${theme.vars.radius.sm} - 1px)`,
-								height: '101%'
-							}
-						}
-					}}
-				>
-					<Radio
-						value={item.val}
-						disableIcon
-						overlay
-						label={item.icon}
-						variant="plain"
-						color="primary"
-						slotProps={{
-							root: {
-								sx: {
-									'--Icon-fontSize': `${radioSize - 8}px`
-								}
-							},
-							action: {
-								sx: {
-									borderRadius: 0,
-									transition: 'none'
-								}
-							},
-							label: { sx: { lineHeight: 0 } }
-						}}
-					/>
-				</Box>
+				<Tab key={item.val} aria-label={item.val} title={item.icon} />
 			))}
-		</RadioGroup>
+		</Tabs>
 	)
 }
 
@@ -597,33 +540,31 @@ const StemControl = ({
 }
 
 const StemsCrossfaders = () => (
-	<Box sx={{ my: 1, lineHeight: 1.2 }}>
+	<div className="mt-4">
 		{STEMS.map(stem => (
 			<CrossfaderControl key={stem} stemType={stem as Stem} />
 		))}
-	</Box>
+	</div>
 )
 
 const CrossfaderControl = ({ stemType }: { stemType?: Stem }) => (
 	<Slider
 		aria-label="crossfader"
+		color="foreground"
 		defaultValue={50}
-		min={0}
-		max={100}
+		radius="sm"
+		minValue={0}
+		maxValue={100}
+		fillOffset={50}
 		step={2}
-		track={false}
-		marks={[0, 50, 100].map(v => ({ value: v }))}
-		valueLabelDisplay="off"
-		variant="soft"
-		size="md"
-		onChange={(_, val) => audioEvents.crossfade(val as number, stemType)}
-		sx={{
-			padding: '15px 0',
-			'& .MuiSlider-thumb': {
-				width: '10px',
-				height: '20px',
-				borderRadius: '3px'
-			}
+		marks={[0, 50, 100].map(value => ({ value, label: '' }))}
+		hideValue
+		size="sm"
+		onChange={val => audioEvents.crossfade(val as number, stemType)}
+		classNames={{
+			base: 'mb-3',
+			filler: 'bg-transparent',
+			thumb: 'h-4 w-5 bg-primary-600 border-1 border-primary-700'
 		}}
 	/>
 )