[C-4896] [C-4893] [C-4913] BPM precision adjustments (#9349)

sliptype · web-flow · commit 6271d09144e9 · 2024-08-01T16:16:43.000-05:00
diff --git a/packages/common/src/api/search.ts b/packages/common/src/api/search.ts
@@ -34,7 +34,12 @@ const getMinMaxFromBpm = (bpm?: string) => {
   const bpmParts = bpm ? bpm.split('-') : [undefined, undefined]
   const bpmMin = bpmParts[0] ? parseFloat(bpmParts[0]) : undefined
   const bpmMax = bpmParts[1] ? parseFloat(bpmParts[1]) : bpmMin
-  return [bpmMin, bpmMax]
+
+  // Because we round the bpm display to the nearest whole number, we need to add a small buffer
+  const bufferedBpmMin = bpmMin ? Math.round(bpmMin) - 0.5 : undefined
+  const bufferedBpmMax = bpmMax ? Math.round(bpmMax) + 0.5 : undefined
+
+  return [bufferedBpmMin, bufferedBpmMax]
 }
 
 const searchApi = createApi({
diff --git a/packages/common/src/hooks/useTrackMetadata.ts b/packages/common/src/hooks/useTrackMetadata.ts
@@ -45,7 +45,8 @@ export const useTrackMetadata = ({
     mood,
     is_unlisted: isUnlisted,
     musical_key,
-    bpm
+    bpm,
+    is_custom_bpm: isCustomBpm
   } = track
 
   const labels = [
@@ -73,7 +74,7 @@ export const useTrackMetadata = ({
     {
       id: TrackMetadataType.BPM,
       label: 'BPM',
-      value: bpm ? Math.round(bpm ?? 0).toString() : '',
+      value: bpm ? (bpm ?? 0).toFixed(isCustomBpm ? 2 : 0).toString() : '',
       isHidden: !isSearchV2Enabled
     },
     {
diff --git a/packages/common/src/models/Track.ts b/packages/common/src/models/Track.ts
@@ -239,6 +239,7 @@ export type TrackMetadata = {
   producer_copyright_line?: Copyright | null
   parental_warning_type?: string | null
   bpm?: number | null
+  is_custom_bpm?: boolean
   musical_key?: string | null
   audio_analysis_error_count?: number
 
diff --git a/packages/common/src/schemas/metadata.ts b/packages/common/src/schemas/metadata.ts
@@ -64,6 +64,7 @@ const trackMetadataSchema = {
   parental_warning_type: null,
   allowed_api_keys: null,
   bpm: null,
+  is_custom_bpm: false,
   musical_key: null,
   audio_analysis_error_count: 0
 }
diff --git a/packages/common/src/utils/bpm.ts b/packages/common/src/utils/bpm.ts
@@ -1,9 +1,10 @@
+export const BPM_REGEX = /^\d{0,3}(\.\d{0,2})?$/
 /**
  * Check if a bpm is valid
  * It should be a string containing number with up to 3 digits before the decimal and
- * up to 1 digit after the decimal
+ * up to 2 digits after the decimal
  */
 export const isBpmValid = (bpm: string): boolean => {
-  const regex = /^\d{0,3}(\.\d{0,1})?$/
+  const regex = BPM_REGEX
   return regex.test(bpm)
 }
diff --git a/packages/mobile/src/screens/search-screen-v2/screens/FilterBpmScreen.tsx b/packages/mobile/src/screens/search-screen-v2/screens/FilterBpmScreen.tsx
@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
+import { isBpmValid } from '@audius/common/utils'
+
 import { Button, Flex, Text, TextInput, useTheme } from '@audius/harmony-native'
 import { KeyboardAvoidingView, SegmentedControl } from 'app/components/core'
 import { FormScreen } from 'app/screens/form-screen'
@@ -166,9 +168,10 @@ const BpmRangeView = ({ value, setValue }: ViewProps) => {
         helperText={minError}
         aria-errormessage={minError ?? undefined}
         placeholder={messages.minBpm}
-        onChangeText={(text) => {
-          const validated = text.match(/^(\d{0,3}$)/)
-          if (validated) setMinBpm(text)
+        onChangeText={(value) => {
+          if (value === '' || isBpmValid(value)) {
+            setMinBpm(value)
+          }
         }}
       />
       <Text style={{ alignSelf: 'flex-start', paddingVertical: 20 }}>-</Text>
@@ -181,9 +184,10 @@ const BpmRangeView = ({ value, setValue }: ViewProps) => {
         helperText={maxError}
         aria-errormessage={maxError ?? undefined}
         placeholder={messages.maxBpm}
-        onChangeText={(text) => {
-          const validated = text.match(/^(\d{0,3}$)/)
-          if (validated) setMaxBpm(text)
+        onChangeText={(value) => {
+          if (value === '' || isBpmValid(value)) {
+            setMaxBpm(value)
+          }
         }}
       />
     </Flex>
@@ -283,8 +287,9 @@ const BpmTargetView = ({ value, setValue }: ViewProps) => {
         placeholder={messages.bpm}
         value={bpmTarget}
         onChangeText={(text) => {
-          const validated = text.match(/^(\d{0,3}$)/)
-          if (validated) setBpmTarget(text)
+          if (text === '' || isBpmValid(text)) {
+            setBpmTarget(text)
+          }
         }}
       />
       <Flex direction='row' gap='s'>
@@ -309,7 +314,7 @@ const BpmTargetView = ({ value, setValue }: ViewProps) => {
 export const FilterBpmScreen = () => {
   const [bpm, setBpm, clearBpm] = useSearchFilter('bpm')
   const [bpmType, setBpmType] = useSearchBpmType()
-  const [bpmValue, setBpmValue] = useState(bpm)
+  const [bpmValue, setBpmValue] = useState(isBpmValid(bpm ?? '') ? bpm : '')
 
   const handleSubmit = useCallback(() => {
     if (bpmValue) {
diff --git a/packages/web/src/common/store/cache/tracks/sagas.ts b/packages/web/src/common/store/cache/tracks/sagas.ts
@@ -177,12 +177,13 @@ function* editTrackAsync(action: ReturnType<typeof trackActions.editTrack>) {
   const trackForEdit = yield* addPremiumMetadata(action.formFields)
 
   // Format musical key
-  trackForEdit.musical_key = formatMusicalKey(
-    trackForEdit.musical_key || undefined
-  )
+  trackForEdit.musical_key =
+    formatMusicalKey(trackForEdit.musical_key || undefined) ?? null
 
   // Format bpm
-  trackForEdit.bpm = trackForEdit.bpm ? Number(trackForEdit.bpm) : undefined
+  trackForEdit.bpm = trackForEdit.bpm ? Number(trackForEdit.bpm) : null
+  trackForEdit.is_custom_bpm =
+    currentTrack.is_custom_bpm || trackForEdit.bpm !== currentTrack.bpm
 
   yield* call(
     confirmEditTrack,
diff --git a/packages/web/src/components/edit/fields/AdvancedField.tsx b/packages/web/src/components/edit/fields/AdvancedField.tsx
@@ -34,6 +34,7 @@ import { TextField } from 'components/form-fields'
 import { SegmentedControlField } from 'components/form-fields/SegmentedControlField'
 import layoutStyles from 'components/layout/layout.module.css'
 import { Tooltip } from 'components/tooltip'
+import { useBpmMaskedInput } from 'hooks/useBpmMaskedInput'
 import { env } from 'services/env'
 
 import styles from './AdvancedField.module.css'
@@ -256,7 +257,7 @@ export const AdvancedField = ({ isUpload }: AdvancedFieldProps) => {
         ).licenseType
       )
       const bpmValue = get(values, BPM)
-      setBpm(bpmValue ? Number(bpmValue) : bpm)
+      setBpm(typeof bpmValue !== 'undefined' ? Number(bpmValue) : bpm)
       setMusicalKey(get(values, MUSICAL_KEY) ?? musicalKey)
       setReleaseDate(get(values, RELEASE_DATE) ?? releaseDate)
     },
@@ -355,6 +356,12 @@ const AdvancedModalFields = ({ isUpload }: { isUpload?: boolean }) => {
   const [{ value: isHidden }] = useField<boolean>(IS_UNLISTED)
   const [, , { setValue: setBpmValue }] = useField<string>(BPM)
 
+  const bpmMaskedInputProps = useBpmMaskedInput({
+    onChange: (e) => {
+      setBpmValue(e.target.value)
+    }
+  })
+
   const { licenseType, licenseDescription } = computeLicense(
     allowAttribution,
     commercialUse,
@@ -501,15 +508,9 @@ const AdvancedModalFields = ({ isUpload }: { isUpload?: boolean }) => {
                 <TextField
                   name={BPM}
                   type='number'
-                  onChange={(e) => {
-                    const { value } = e.nativeEvent.target as HTMLInputElement
-
-                    if (value === '' || isBpmValid(value)) {
-                      setBpmValue(value)
-                    }
-                  }}
                   label={messages.bpm.label}
                   autoComplete='off'
+                  {...bpmMaskedInputProps}
                 />
               </Flex>
               <Flex direction='column' w='100%'>
diff --git a/packages/web/src/hooks/useBpmMaskedInput.ts b/packages/web/src/hooks/useBpmMaskedInput.ts
@@ -0,0 +1,18 @@
+import { BPM_REGEX } from '@audius/common/utils'
+
+import {
+  UseRegexMaskedInputParams,
+  useRegexMaskedInput
+} from './useRegexMaskedInput'
+
+type UseBpmMaskedInputParams = Omit<UseRegexMaskedInputParams, 'regex'>
+
+/**
+ * Mask BPM input values
+ *
+ * @example
+ * const maskedInputProps = useBpmMaskedInput()
+ * return <input {...maskedInputProps} />
+ */
+export const useBpmMaskedInput = (params?: UseBpmMaskedInputParams) =>
+  useRegexMaskedInput({ regex: BPM_REGEX, onChange: params?.onChange })
diff --git a/packages/web/src/hooks/useRegexMaskedInput.ts b/packages/web/src/hooks/useRegexMaskedInput.ts
@@ -0,0 +1,37 @@
+import { ChangeEvent, useRef } from 'react'
+
+export type UseRegexMaskedInputParams = {
+  regex: RegExp
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void
+}
+
+/**
+ * Mask input values based on a regex pattern.
+ *
+ * @example
+ * const maskedInputProps = useRegexMaskedInput({ regex: /^\d{0,4}$/ })
+ * return <input {...maskedInputProps} />
+ */
+export const useRegexMaskedInput = (params: UseRegexMaskedInputParams) => {
+  const { regex, onChange } = params
+  const ref = useRef<HTMLInputElement>(null)
+  const previousValidValue = useRef('')
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const input = event.target
+    const value = input.value
+
+    if (regex.test(value)) {
+      // If the value matches the regex, update the previous valid value
+      previousValidValue.current = value
+      onChange?.(event)
+    } else {
+      // If the value doesn't match the regex, revert to the previous valid value
+      input.value = previousValidValue.current
+    }
+  }
+  return {
+    ref,
+    onChange: handleChange
+  }
+}
diff --git a/packages/web/src/pages/search-page-v2/BpmFilter.tsx b/packages/web/src/pages/search-page-v2/BpmFilter.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 
 import { useStateDebounced } from '@audius/common/hooks'
+import { isBpmValid } from '@audius/common/utils'
 import {
   Box,
   Button,
@@ -18,15 +19,13 @@ import {
 import { css } from '@emotion/css'
 import { useSearchParams } from 'react-router-dom-v5-compat'
 
+import { useBpmMaskedInput } from 'hooks/useBpmMaskedInput'
+
 import { useUpdateSearchParams } from './utils'
 
 const MIN_BPM = 1
 const MAX_BPM = 999
 
-const stripLeadingZeros = (string: string) => {
-  return Number(string).toString()
-}
-
 type BpmTargetType = 'exact' | 'range5' | 'range10'
 const targetOptions: { label: string; value: BpmTargetType }[] = [
   {
@@ -107,6 +106,20 @@ const BpmRangeView = ({ value, handleChange }: ViewProps) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const onChange = useMemo(() => handleChange, [])
 
+  const minBpmMaskedInputProps = useBpmMaskedInput({
+    onChange: (e) => {
+      setHasChanged(true)
+      setMinBpm(e.target.value)
+    }
+  })
+
+  const maxBpmMaskedInputProps = useBpmMaskedInput({
+    onChange: (e) => {
+      setHasChanged(true)
+      setMaxBpm(e.target.value)
+    }
+  })
+
   useEffect(() => {
     if (!hasChanged) return
 
@@ -189,15 +202,8 @@ const BpmRangeView = ({ value, handleChange }: ViewProps) => {
           aria-errormessage={minError ?? undefined}
           placeholder={messages.minBpm}
           hideLabel
-          onInput={(e) => {
-            const input = e.nativeEvent.target as HTMLInputElement
-            input.value = input.value.slice(0, input.maxLength)
-          }}
-          onChange={(e) => {
-            setHasChanged(true)
-            setMinBpm(stripLeadingZeros(e.target.value))
-          }}
           inputRootClassName={css({ height: '48px !important' })}
+          {...minBpmMaskedInputProps}
         />
         <Box pv='l'>-</Box>
         <TextInput
@@ -210,15 +216,8 @@ const BpmRangeView = ({ value, handleChange }: ViewProps) => {
           aria-errormessage={maxError ?? undefined}
           placeholder={messages.maxBpm}
           hideLabel
-          onInput={(e) => {
-            const input = e.nativeEvent.target as HTMLInputElement
-            input.value = input.value.slice(0, input.maxLength)
-          }}
-          onChange={(e) => {
-            setHasChanged(true)
-            setMaxBpm(stripLeadingZeros(e.target.value))
-          }}
           inputRootClassName={css({ height: '48px !important' })}
+          {...maxBpmMaskedInputProps}
         />
       </Flex>
     </>
@@ -250,6 +249,13 @@ const BpmTargetView = ({ value, handleChange }: ViewProps) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const onChange = useMemo(() => handleChange, [])
 
+  const bpmMaskedInputProps = useBpmMaskedInput({
+    onChange: (e) => {
+      setHasChanged(true)
+      setBpmTarget(e.target.value)
+    }
+  })
+
   useEffect(() => {
     if (!hasChanged) return
 
@@ -304,21 +310,13 @@ const BpmTargetView = ({ value, handleChange }: ViewProps) => {
         defaultValue={initialTargetValue ?? ''}
         label={messages.bpm}
         type='number'
-        maxLength={3}
         error={!!error}
         helperText={error}
         aria-errormessage={error ?? undefined}
         placeholder={messages.bpm}
         hideLabel
-        onInput={(e) => {
-          const input = e.nativeEvent.target as HTMLInputElement
-          input.value = input.value.slice(0, input.maxLength)
-        }}
-        onChange={(e) => {
-          setHasChanged(true)
-          setBpmTarget(stripLeadingZeros(e.target.value))
-        }}
         inputRootClassName={css({ height: '48px !important' })}
+        {...bpmMaskedInputProps}
       />
       <Flex justifyContent='center' alignItems='center' gap='xs'>
         {targetOptions.map((option) => (
@@ -349,6 +347,7 @@ const BpmTargetView = ({ value, handleChange }: ViewProps) => {
 export const BpmFilter = () => {
   const [urlSearchParams] = useSearchParams()
   const bpm = urlSearchParams.get('bpm')
+  const validatedBpm = isBpmValid(bpm ?? '') ? bpm : null
   const updateSearchParams = useUpdateSearchParams('bpm')
   const [bpmFilterType, setBpmFilterType] = useState<'range' | 'target'>(
     'range'
@@ -398,7 +397,7 @@ export const BpmFilter = () => {
                 />
               </Flex>
               <Divider css={{ width: '100%' }} />
-              <InputView value={bpm} handleChange={handleChange} />
+              <InputView value={validatedBpm} handleChange={handleChange} />
             </Flex>
           </Paper>
         </Popup>

Original file line number	Diff line number	Diff line change
`@@ -64,6 +64,7 @@ const trackMetadataSchema = {`
`64`	`64`	`parental_warning_type: null,`
`65`	`65`	`allowed_api_keys: null,`
`66`	`66`	`bpm: null,`
	`67`	`+ is_custom_bpm: false,`
`67`	`68`	`musical_key: null,`
`68`	`69`	`audio_analysis_error_count: 0`
`69`	`70`	`}`