Browse Source

Update visualization toggle logic

Use native inputs instead of React for state management.
pull/1/head
TheoryOfNekomata 1 year ago
parent
commit
7fb2ff8c39
4 changed files with 78 additions and 70 deletions
  1. +72
    -60
      packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx
  2. +2
    -1
      packages/web-kitchensink-reactnext/src/categories/blob/react/components/VideoFilePreview/index.tsx
  3. +3
    -8
      packages/web-kitchensink-reactnext/src/categories/blob/react/hooks/interactive/media.ts
  4. +1
    -1
      packages/web-kitchensink-reactnext/src/pages/_document.tsx

+ 72
- 60
packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx View File

@@ -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}


+ 2
- 1
packages/web-kitchensink-reactnext/src/categories/blob/react/components/VideoFilePreview/index.tsx View File

@@ -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"


+ 3
- 8
packages/web-kitchensink-reactnext/src/categories/blob/react/hooks/interactive/media.ts View File

@@ -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,
]);
};

+ 1
- 1
packages/web-kitchensink-reactnext/src/pages/_document.tsx View File

@@ -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={{


Loading…
Cancel
Save