zds-pickers 4.0.5 → 4.0.6

package/lib/other/SoundFontProvider.tsx

@@ -0,0 +1,130 @@
+// See https://github.com/danigb/soundfont-player
+// for more documentation on prop options.
+import { useCallback, useEffect, useState } from 'react'
+import Soundfont from 'soundfont-player'
+// import '../temp/acoustic_grand_piano-mp3'
+
+const isDefined = <T,>(item: T) =>
+  item !== undefined && item !== null && !Number.isNaN(item)
+
+type SoundfontProviderProps = {
+  audioContext: AudioContext
+  format?: 'mp3' | 'ogg'
+  hostname?: string
+  instrumentName: Soundfont.InstrumentName
+  onChange?: (midiNumber: number) => void
+  render: (props: {
+    isLoading: boolean
+    playNote: (midiNumber: number) => void
+    stopNote: (midiNumber: number) => void
+    stopAllNotes: () => void
+  }) => React.ReactNode
+  soundfont?: 'MusyngKite' | 'FluidR3_GM'
+}
+
+const SoundfontProvider = (props: SoundfontProviderProps) => {
+  const {
+    audioContext,
+    format,
+    hostname,
+    instrumentName,
+    onChange,
+    render,
+    soundfont,
+  } = props
+
+  const [isLoading, setIsLoading] = useState(true)
+  const [activeAudioNodes, setActiveAudioNodes] = useState<
+    Record<number, Soundfont.Player>
+  >({})
+  const [instrument, setInstrument] = useState<Soundfont.Player | null>(null)
+
+  const loadInstrument = useCallback(
+    (nm: Soundfont.InstrumentName) => {
+      // Re-trigger loading state
+      setInstrument(null)
+
+      if (isDefined(hostname)) {
+        // pull from an url
+        Soundfont.instrument(audioContext, nm, {
+          format,
+          soundfont,
+          nameToUrl: (name: string, sf: string, fmt: string) =>
+            `${hostname}/${sf}/${name}-${fmt}.js`,
+        }).then(newInstrument => {
+          setInstrument(newInstrument)
+        })
+      } else if (isDefined(instrumentName)) {
+        // the host app has already injected the soundfont into global space
+        Soundfont.instrument(audioContext, instrumentName).then(
+          newInstrument => {
+            setInstrument(newInstrument)
+          },
+        )
+      } else {
+        // sound must be disabled
+        setIsLoading(false)
+      }
+    },
+    [audioContext, format, hostname, instrumentName, soundfont],
+  )
+
+  useEffect(() => {
+    loadInstrument(instrumentName)
+  }, [instrumentName, loadInstrument])
+
+  useEffect(() => {
+    if (isDefined(instrumentName)) {
+      setIsLoading(!instrument)
+    }
+  }, [instrument, instrumentName])
+
+  const playNote = (midiNumber: number) => {
+    if (instrument) {
+      audioContext.resume().then(() => {
+        const audioNode = instrument.play(String(midiNumber))
+        setActiveAudioNodes(prev => ({ ...prev, [midiNumber]: audioNode }))
+      })
+    }
+  }
+
+  const stopNote = (midiNumber: number) => {
+    audioContext.resume().then(() => {
+      if (!activeAudioNodes[midiNumber]) {
+        return
+      }
+      const audioNode = activeAudioNodes[midiNumber]
+      audioNode.stop()
+      setActiveAudioNodes(prev => {
+        const { [midiNumber]: _, ...rest } = prev
+        return rest
+      })
+    })
+    onChange?.(midiNumber)
+  }
+
+  // Clear any residual notes that don't get called with stopNote
+  const stopAllNotes = () => {
+    audioContext.resume().then(() => {
+      const nodes = Object.values(activeAudioNodes)
+      for (const node of nodes) {
+        if (node) {
+          node.stop()
+        }
+      }
+      setActiveAudioNodes(nodes)
+    })
+  }
+
+  return render({
+    isLoading,
+    playNote,
+    stopNote,
+    stopAllNotes,
+  })
+}
+
+// https://gleitz.github.io/midi-js-soundfonts/MusyngKite/acoustic_grand_piano-mp3.js
+// https://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/.js
+
+export default SoundfontProvider

package/lib/pickers/CCPicker.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import ccValues from '../midi/ccValues'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type CCPickerProps = SelectProps<number>
+
+type CCPickerRef = SelectInstance<
+  Option<number>,
+  false,
+  GroupBase<Option<number>>
+>
+
+const CCPicker = forwardRef<
+  SelectInstance<Option<number>, false, GroupBase<Option<number>>>,
+  CCPickerProps
+>((props, ref) => (
+  <Select
+    {...props}
+    options={ccValues}
+    ref={ref}
+  />
+))
+
+export default CCPicker
+
+export type { CCPickerProps, CCPickerRef }

package/lib/pickers/ChannelMappingPicker.tsx

@@ -0,0 +1,135 @@
+import cl from 'classnames'
+import { forwardRef, useCallback, useEffect, useState } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import { arraySequence } from '../utils'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type InternalValue = number | 'separator'
+// type ExternalValue = number
+
+type ChannelMappingOption = Option<InternalValue>
+
+const defaultOptions: ChannelMappingOption[] = arraySequence(16).map(value => ({
+  value,
+  label: value,
+}))
+
+interface ChannelMappingPickerProps extends SelectProps<InternalValue> {
+  channels: Option<number>[]
+  className?: string
+  filterOptions?: (
+    candidate: Option<InternalValue>,
+    inputValue: string,
+  ) => boolean
+  value: number
+  onChange: (value: InternalValue) => void
+}
+
+type ChannelMappingPickerRef = SelectInstance<
+  Option<number>,
+  false,
+  GroupBase<Option<number>>
+>
+
+type FormatOptionLabelFunction = NonNullable<
+  SelectProps<InternalValue>['formatOptionLabel']
+>
+
+const ChannelMappingPicker = forwardRef<
+  SelectInstance<
+    Option<InternalValue>,
+    false,
+    GroupBase<Option<InternalValue>>
+  >,
+  ChannelMappingPickerProps
+>(({ channels, className, ...rest }, ref) => {
+  const [options, setOptions] = useState<Option<InternalValue>[]>([])
+
+  const formatOptionLabel: FormatOptionLabelFunction = useCallback(
+    ({ value, label }, { context }) => {
+      if (value === 'separator') {
+        return <span className="zds-mappings-user-mapping">{label}</span>
+      }
+
+      if (typeof value !== 'number') return null
+
+      const mapping = channels[value]
+
+      return mapping ? (
+        <span className="mapping-entry">
+          <b>
+            {value + 1}
+            {context === 'value' && ' -'}
+          </b>
+          <span className="mapping-entry-label">{mapping.label}</span>
+        </span>
+      ) : (
+        <span className="mapping-entry empty-mapping-entry">
+          <b>
+            {value + 1}
+            {context === 'value' && ' -'}
+          </b>
+          <span className="mapping-entry-label">no mapping</span>
+        </span>
+      )
+    },
+    [channels],
+  )
+
+  useEffect(() => {
+    const result = defaultOptions.sort(
+      (a: ChannelMappingOption, b: ChannelMappingOption) => {
+        if (
+          typeof a.value === 'number' &&
+          typeof b.value === 'number' &&
+          channels[a.value] &&
+          !channels[b.value]
+        ) {
+          return -1
+        }
+
+        if (
+          typeof a.value === 'number' &&
+          typeof b.value === 'number' &&
+          !channels[a.value] &&
+          channels[b.value]
+        ) {
+          return 1
+        }
+
+        if (typeof a.value === 'number' && typeof b.value === 'number') {
+          return a.value - b.value
+        }
+        return 0
+      },
+    )
+
+    const numFilled = result.filter(
+      ({ value }) => typeof value === 'number' && !!channels[value],
+    ).length
+
+    const separatorExists = result.some(({ value }) => value === 'separator')
+
+    if (numFilled && numFilled < 16 && !separatorExists) {
+      // insert a separator after the count of filled items
+      result.splice(numFilled, 0, { label: <hr />, value: 'separator' })
+    }
+
+    setOptions(result)
+  }, [channels])
+
+  return (
+    <Select<InternalValue>
+      {...rest}
+      className={cl(className, 'channel-mapping-picker')}
+      formatOptionLabel={formatOptionLabel}
+      options={options}
+      ref={ref}
+    />
+  )
+})
+
+export default ChannelMappingPicker
+
+export type { ChannelMappingPickerProps, ChannelMappingPickerRef }

package/lib/pickers/ChannelPicker.tsx

@@ -0,0 +1,76 @@
+import cl from 'classnames'
+import { forwardRef } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import { arraySequence } from '../utils'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type Channel =
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+
+interface FormatOptionLabelContext {
+  context: 'menu' | 'value'
+}
+
+type ChannelPickerProps = SelectProps<Channel>
+
+type ChannelPickerRef = SelectInstance<
+  Option<Channel>,
+  false,
+  GroupBase<Option<Channel>>
+>
+
+const options: Option<Channel>[] = arraySequence(16).map(value => ({
+  value: value as Channel,
+  label: `Channel ${value + 1}`,
+}))
+
+const formatOptionLabel = (
+  option: Option<unknown>,
+  { context }: FormatOptionLabelContext,
+) =>
+  context === 'value' ? option.label : Number.parseInt(String(option.value)) + 1 // menu, e.g. the list of options
+
+const filterOptions = (option: Option<Channel>, input: string) => {
+  // console.log(option, input)
+
+  if (input) {
+    return String(option.label).toLowerCase().includes(input.toLowerCase())
+  }
+  return true
+}
+
+const ChannelPicker = forwardRef<
+  SelectInstance<Option<Channel>, false, GroupBase<Option<Channel>>>,
+  ChannelPickerProps
+>(({ className, ...rest }, ref) => {
+  return (
+    <Select
+      {...rest}
+      className={cl(className, 'channel-picker')}
+      filterOptions={filterOptions}
+      formatOptionLabel={formatOptionLabel}
+      options={options}
+      ref={ref}
+    />
+  )
+})
+
+export default ChannelPicker
+
+export type { Channel, ChannelPickerProps, ChannelPickerRef }

package/lib/pickers/Knob.tsx

@@ -0,0 +1,93 @@
+import { useCallback } from 'react'
+import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault'
+import RotaryKnob from '../rotaryKnob'
+import { assertRange } from '../utils'
+import knobSkin10 from './knobSkin10'
+
+type KnobProps = {
+  disabled?: boolean
+  max?: number
+  min?: number
+  onChange?: (value: number) => void
+  value?: number
+  wheelEnabled?: boolean
+  wheelSensitivity?: number
+}
+
+const Knob = (props: KnobProps) => {
+  const {
+    disabled = false,
+    max = 127,
+    min = 0,
+    onChange,
+    value: initialValue = 0,
+    wheelEnabled = false,
+    wheelSensitivity = 0.1,
+    ...rest
+  } = props
+
+  const [value, setValue] = useStateWithDynamicDefault(initialValue)
+
+  const handleChange = (val: number) => {
+    if (disabled) return
+
+    const newValue = assertRange(Number.parseInt(String(val), 10), max, min)
+    setValue(newValue)
+    if (onChange) {
+      onChange(newValue)
+    }
+  }
+
+  const handleWheel = useCallback(
+    (event: React.WheelEvent<HTMLDivElement>) => {
+      if (!wheelEnabled || disabled) return
+
+      event.preventDefault()
+      const delta = -event.deltaY * wheelSensitivity
+      const newValue = assertRange(value + delta, max, min)
+
+      setValue(newValue)
+      if (onChange) {
+        onChange(newValue)
+      }
+    },
+    [
+      wheelEnabled,
+      disabled,
+      wheelSensitivity,
+      value,
+      max,
+      min,
+      onChange,
+      setValue,
+    ],
+  )
+
+  return (
+    <RotaryKnob
+      clampMax={320}
+      clampMin={40}
+      className="zds-pickers__knob-container"
+      disabled={disabled}
+      onChange={handleChange}
+      onWheel={wheelEnabled ? handleWheel : undefined}
+      preciseMode={false}
+      rotateDegrees={180}
+      /**
+       * To see all skins:
+       * http://react-rotary-knob-skins-preview.surge.sh/
+       *
+       * NOTE: we've copied the one we use into this package because the skins
+       * pack package does not work in Electron.
+       */
+      skin={knobSkin10}
+      style={{ opacity: disabled ? 0.4 : 1 }}
+      unlockDistance={0}
+      {...{ defaultValue: value, max, min, value, ...rest }}
+    />
+  )
+}
+
+export default Knob
+
+export type { KnobProps }

package/lib/pickers/KnobPicker.tsx

@@ -0,0 +1,93 @@
+import { forwardRef, useMemo } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import { arraySequence } from '../utils'
+import Knob from './Knob'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type KnobPickerProps = SelectProps<number> & {
+  highToLow?: boolean
+  includeLabel?: boolean
+  includePicker?: boolean
+  knobProps?: Partial<KnobPickerProps>
+  max?: number
+  min?: number
+  wheelEnabled?: boolean
+  wheelSensitivity?: number
+  value: number
+}
+
+type KnobPickerRef = SelectInstance<
+  Option<number>,
+  false,
+  GroupBase<Option<number>>
+>
+
+const KnobPicker = forwardRef<
+  SelectInstance<Option<number>, false, GroupBase<Option<number>>>,
+  KnobPickerProps
+>((props, ref) => {
+  const {
+    disabled,
+    highToLow,
+    includeLabel,
+    includePicker,
+    knobProps,
+    label,
+    max = 127,
+    min = 0,
+    onChange,
+    shrinkLabel,
+    value = 0,
+    wheelEnabled,
+    wheelSensitivity = 0.1,
+    ...rest
+  } = props
+
+  const options = useMemo(() => {
+    const result = arraySequence(max - min + 1)
+      .map(i => min + i)
+      .map((i): Option<number> => ({ value: i, label: String(i) }))
+    return highToLow ? result.reverse() : result
+  }, [highToLow, max, min])
+
+  return (
+    <div className="zds-pickers__container">
+      {Boolean(!shrinkLabel && Boolean(label)) && (
+        <span className="zds-pickers__label">{label}</span>
+      )}
+      <div style={{ display: 'inline-flex', gap: 10, alignItems: 'center' }}>
+        {Boolean(includePicker) && (
+          <Select
+            {...{
+              ...rest,
+              disabled,
+              isDisabled: disabled,
+              onChange,
+              options,
+              ref,
+              value,
+            }}
+          />
+        )}
+
+        <Knob
+          {...{
+            disabled,
+            max,
+            min,
+            onChange,
+            value,
+            wheelEnabled,
+            wheelSensitivity,
+            ...knobProps,
+          }}
+        />
+      </div>
+    </div>
+  )
+})
+
+export default KnobPicker
+
+export type { KnobPickerProps, KnobPickerRef }

package/lib/pickers/LatchPicker.tsx

@@ -0,0 +1,33 @@
+import { forwardRef } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import type { Polarity } from './PolarityPicker'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+const options: Option<Polarity>[] = [
+  { value: 0, label: 'Momentary' },
+  { value: 1, label: 'Latching' },
+]
+
+type LatchPickerProps = SelectProps<Polarity>
+
+type LatchPickerRef = SelectInstance<
+  Option<Polarity>,
+  false,
+  GroupBase<Option<Polarity>>
+>
+
+const LatchPicker = forwardRef<
+  SelectInstance<Option<Polarity>, false, GroupBase<Option<Polarity>>>,
+  LatchPickerProps
+>((props, ref) => (
+  <Select
+    {...props}
+    options={options}
+    ref={ref}
+  />
+))
+
+export default LatchPicker
+
+export type { LatchPickerProps, LatchPickerRef }

package/lib/pickers/MappingPicker.tsx

@@ -0,0 +1,68 @@
+import { forwardRef, useMemo } from 'react'
+import type { GroupBase, SelectInstance } from 'react-select'
+import { getStockNames, getUserMappingNames } from 'zds-mappings'
+import Select from './Select'
+import type { Option, SelectProps } from './Select'
+
+type MappingPickerProps = SelectProps<string> & {
+  allowClearing: boolean
+}
+
+type MappingPickerRef = SelectInstance<
+  Option<string>,
+  false,
+  GroupBase<Option<string>>
+>
+
+const MappingPicker = forwardRef<
+  SelectInstance<Option<string>, false, GroupBase<Option<string>>>,
+  MappingPickerProps
+>(({ allowClearing, ...rest }, ref) => {
+  const stockMappings = getStockNames()
+  const userMappings = getUserMappingNames()
+
+  const options = useMemo(() => {
+    const result = allowClearing
+      ? [
+          {
+            value: 'No Mapping',
+            label: (
+              <span className="zds-mappings-clear-mapping">No Mapping</span>
+            ),
+          },
+        ]
+      : []
+
+    return [
+      ...result,
+
+      {
+        label: allowClearing ? <hr /> : '',
+        options: userMappings.map(label => ({
+          value: label,
+          label: <span className="zds-mappings-user-mapping">{label}</span>,
+        })),
+      },
+
+      {
+        label: userMappings.length ? <hr /> : allowClearing ? <hr /> : '',
+        options: stockMappings.map(label => ({
+          label,
+          value: label,
+        })),
+      },
+    ] as Option<string>[]
+  }, [allowClearing, stockMappings, userMappings])
+
+  return (
+    <Select
+      {...rest}
+      options={options}
+      ref={ref}
+    />
+  )
+})
+
+export default MappingPicker
+
+export type { MappingPickerProps, MappingPickerRef }