Update visualization toggle logic

Use native inputs instead of React for state management.

packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx

@@ -57,8 +57,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
     startSeek,
     endSeek,
     setSeek,
-    visualizationMode,
-    handleVisualizationModeChange,
+    visualizationId,
   } = useMediaControls<HTMLAudioElement>({
     controllerRef: forwardedRef,
     visualizationMode: 'waveform',
@@ -115,91 +114,103 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
                 </audio>
                 {enhanced && (
                   <>
-                    <WaveformCanvas
-                      className={clsx(
-                        'absolute w-full sm:h-full top-0 left-0 block object-center object-contain flex-auto aspect-video sm:aspect-auto bg-primary/10 cursor-text',
-                        visualizationMode !== 'waveform' && 'opacity-0',
-                      )}
-                      ref={mediaControllerRef}
-                      data-testid="preview"
-                      barWidth={1}
-                      barGap={1}
-                      progressColor={`rgb(${theme['color-primary']})`}
-                      waveColor={`rgb(${theme['color-primary'].split(' ').map((c) => Math.floor(Number(c) / 2)).join(' ')})`}
-                      interact
-                      // waveColor={`rgb(${theme.primary})`}
-                      // barHeight={4}
-                      // minPxPerSec={20000}
-                      // hideScrollbar
-                      // autoCenter
-                      // autoScroll
-                    />
-                    <SpectrogramCanvas
-                      className={clsx(
-                        'absolute w-full sm:h-full top-0 left-0 block object-center object-contain flex-auto aspect-video sm:aspect-auto bg-primary/10 pointer-events-none',
-                        visualizationMode !== 'spectrum' && 'opacity-0',
-                      )}
-                      ref={mediaControllerRef}
-                      data-testid="preview"
-                      barWidth={1}
-                      barGap={1}
-                      waveColor={`rgb(${theme['color-primary']})`}
-                      cursorWidth={2}
-                      minPxPerSec={20000}
-                      hideScrollbar
-                      autoCenter
-                      autoScroll
-                    />
-                    <div className="flex gap-4 absolute top-0 right-0 z-[5] px-4">
-                      <label
-                        className={clsx(
-                          'h-12 flex items-center justify-center leading-none gap-4 select-none',
-                        )}
-                      >
+                    <div className="flex justify-end w-full h-full gap-4 absolute top-0 right-0 z-[5] px-4">
+                      <div className="contents">
                         <input
                           type="radio"
                           name="visualizationMode"
                           value="waveform"
                           className="sr-only peer/waveform"
-                          onChange={handleVisualizationModeChange}
                           defaultChecked
+                          id={`${visualizationId}-waveform`}
                         />
-                        <span
+                        <label
+                          htmlFor={`${visualizationId}-waveform`}
                           className={clsx(
-                            'flex items-center uppercase font-bold h-full w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded text-primary cursor-pointer',
+                            'relative z-[5]',
+                            'h-12 flex items-center justify-center leading-none gap-4 select-none',
+                            'text-primary cursor-pointer',
                             'peer-focus/waveform:text-secondary',
                             'peer-active/waveform:text-tertiary',
                             'peer-checked/waveform:text-tertiary',
                             'peer-disabled/waveform:text-primary peer-disabled/waveform:cursor-not-allowed peer-disabled/waveform:opacity-50',
                           )}
                         >
-                        Waveform
-                      </span>
-                      </label>
-                      <label
-                        className={clsx(
-                          'h-12 flex items-center justify-center leading-none gap-4 select-none',
-                        )}
+                          <span
+                            className={clsx(
+                              'flex items-center uppercase font-bold h-full w-full whitespace-nowrap overflow-hidden text-ellipsis',
+                            )}
+                          >
+                            Waveform
+                          </span>
+                        </label>
+                        <WaveformCanvas
+                          className={clsx(
+                            'absolute w-full sm:h-full top-0 left-0 block object-center object-contain flex-auto aspect-video sm:aspect-auto bg-primary/10 cursor-text opacity-0',
+                            'peer-checked/waveform:opacity-100',
+                          )}
+                          ref={mediaControllerRef}
+                          data-testid="preview"
+                          barWidth={1}
+                          barGap={1}
+                          progressColor={`rgb(${theme['color-primary']})`}
+                          waveColor={`rgb(${theme['color-primary'].split(' ').map((c) => Math.floor(Number(c) / 2)).join(' ')})`}
+                          interact
+                          // waveColor={`rgb(${theme.primary})`}
+                          // barHeight={4}
+                          // minPxPerSec={20000}
+                          // hideScrollbar
+                          // autoCenter
+                          // autoScroll
+                        />
+                      </div>
+                      <div
+                        className="contents"
                       >
                         <input
                           type="radio"
                           name="visualizationMode"
                           value="spectrum"
                           className="sr-only peer/waveform"
-                          onChange={handleVisualizationModeChange}
+                          id={`${visualizationId}-spectrum`}
                         />
-                        <span
+                        <label
+                          htmlFor={`${visualizationId}-spectrum`}
                           className={clsx(
-                            'flex items-center uppercase font-bold h-full w-full whitespace-nowrap overflow-hidden text-ellipsis font-semi-expanded text-primary cursor-pointer',
+                            'relative z-[5]',
+                            'h-12 flex items-center justify-center leading-none gap-4 select-none',
+                            'text-primary cursor-pointer',
                             'peer-focus/waveform:text-secondary',
                             'peer-active/waveform:text-tertiary',
                             'peer-checked/waveform:text-tertiary',
                             'peer-disabled/waveform:text-primary peer-disabled/waveform:cursor-not-allowed peer-disabled/waveform:opacity-50',
                           )}
                         >
-                        Spectrum
-                      </span>
-                      </label>
+                          <span
+                            className={clsx(
+                              'flex items-center uppercase font-bold h-full w-full whitespace-nowrap overflow-hidden text-ellipsis',
+                            )}
+                          >
+                            Spectrum
+                          </span>
+                        </label>
+                        <SpectrogramCanvas
+                          className={clsx(
+                            'absolute w-full sm:h-full top-0 left-0 block object-center object-contain flex-auto aspect-video sm:aspect-auto bg-primary/10 pointer-events-none opacity-0',
+                            'peer-checked/waveform:opacity-100',
+                          )}
+                          ref={mediaControllerRef}
+                          data-testid="preview"
+                          barWidth={1}
+                          barGap={1}
+                          waveColor={`rgb(${theme['color-primary']})`}
+                          cursorWidth={2}
+                          minPxPerSec={20000}
+                          hideScrollbar
+                          autoCenter
+                          autoScroll
+                        />
+                      </div>
                     </div>
                   </>
                 )}
@@ -286,7 +297,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
                       }
                     >
                       <Slider
-                        className="w-full bg-negative text-base"
+                        className="bg-negative text-base flex-auto"
                         ref={seekRef}
                         onMouseDown={startSeek}
                         onMouseUp={endSeek}
@@ -304,6 +315,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
                     className="flex-shrink-0 w-12 flex items-center"
                   >
                     <Slider
+                      className="flex-auto"
                       ref={volumeRef}
                       max={1}
                       min={0}

packages/web-kitchensink-reactnext/src/categories/blob/react/components/VideoFilePreview/index.tsx

@@ -195,7 +195,7 @@ export const VideoFilePreview = React.forwardRef<VideoFilePreviewDerivedComponen
                       }
                     >
                       <Slider
-                        className="w-full bg-negative text-base"
+                        className="flex-auto bg-negative text-base"
                         ref={seekRef}
                         onMouseDown={startSeek}
                         onMouseUp={endSeek}
@@ -217,6 +217,7 @@ export const VideoFilePreview = React.forwardRef<VideoFilePreviewDerivedComponen
                       max={1}
                       min={0}
                       onChange={adjustVolume}
+                      className="flex-auto"
                       step="any"
                       defaultValue="1"
                       title="Volume"

packages/web-kitchensink-reactnext/src/categories/blob/react/hooks/interactive/media.ts

@@ -17,7 +17,7 @@ export const useMediaControls = <T extends HTMLMediaElement>({
   const seekRef = React.useRef<HTMLInputElement>(null);
   const volumeRef = React.useRef<HTMLInputElement>(null);
   const filenameRef = React.useRef<HTMLElement>(null);
-  const [visualizationMode, setVisualizationMode] = React.useState(initialVisualizationMode);
+  const visualizationId = React.useId();
   const [isPlaying, setIsPlaying] = React.useState(false);
   const [isSeeking, setIsSeeking] = React.useState(false);
   const [currentTimeDisplay, setCurrentTimeDisplay] = React.useState<number>();
@@ -128,9 +128,6 @@ export const useMediaControls = <T extends HTMLMediaElement>({
     downloadLink.click();
   }, [ref, filenameRef]);
 
-  const handleVisualizationModeChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback((e) => {
-    setVisualizationMode(e.currentTarget.value);
-  }, []);
 
   const actions = React.useMemo(() => ({
     togglePlayback,
@@ -245,8 +242,7 @@ export const useMediaControls = <T extends HTMLMediaElement>({
     mediaControllerRef: ref,
     handleAction,
     filenameRef,
-    visualizationMode,
-    handleVisualizationModeChange,
+    visualizationId,
   }), [
     refreshControls,
     isPlaying,
@@ -264,7 +260,6 @@ export const useMediaControls = <T extends HTMLMediaElement>({
     ref,
     handleAction,
     filenameRef,
-    visualizationMode,
-    handleVisualizationModeChange,
+    visualizationId,
   ]);
 };

packages/web-kitchensink-reactnext/src/pages/_document.tsx

@@ -3,7 +3,7 @@ import theme from '@/styles/theme'
 
 export default function Document() {
   return (
-    <Html lang="en" className="bg-negative text-positive mt-8 mb-16 md:mt-16 md:mb-32">
+    <Html lang="en" className="bg-negative text-positive mt-8 mb-16 md:mt-16 md:mb-32 tracking-normal font-semi-expanded">
       <Head className="block">
         <style
           dangerouslySetInnerHTML={{