Validate recording length in React form

This adds an isInvalidLength function that just checks
whether unformatTrackLength returns false.
The error message is not quite precise (the time does not *have*
to be in MM:SS format) but it probably clarifies the easiest
way to enter the length well enough for users, and is only
confusing in edge cases (like a length that is invalid because
it's longer than the max we can store).

Author: reosarevok

root/static/scripts/edit/utility/isInvalidLength.js

@@ -0,0 +1,15 @@
+/*
+ * @flow strict
+ * Copyright (C) 2025 MetaBrainz Foundation
+ *
+ * This file is part of MusicBrainz, the open internet music database,
+ * and is licensed under the GPL version 2, or (at your option) any
+ * later version: http://www.gnu.org/licenses/gpl-2.0.txt
+ */
+
+import unformatTrackLength from '../../common/utility/unformatTrackLength.js';
+
+export default function isInvalidLength(length: string): boolean {
+  // If the unformatted length is false, then it's an unparseable date
+  return unformatTrackLength(length) === false;
+}

root/static/scripts/recording/components/RecordingEditForm.js

@@ -56,6 +56,7 @@ import {
 } from '../../edit/externalLinks.js';
 import guessFeat from '../../edit/utility/guessFeat2.js';
 import isInvalidEditNote from '../../edit/utility/isInvalidEditNote.js';
+import isInvalidLength from '../../edit/utility/isInvalidLength.js';
 import {
   applyAllPendingErrors,
   hasSubfieldErrors,
@@ -70,6 +71,7 @@ type ActionT =
   | {+type: 'show-all-pending-errors'}
   | {+type: 'toggle-bubble', +bubble: string}
   | {+type: 'update-edit-note', +editNote: string}
+  | {+type: 'update-length', +length: string}
   | {+type: 'update-name', +action: NameActionT}
   | {+type: 'update-artist-credit', +action: ArtistCreditActionT};
 /* eslint-enable ft-flow/sort-keys */
@@ -147,6 +149,17 @@ function reducer(state: StateT, action: ActionT): StateT {
         value: editNote,
       });
     }
+    {type: 'update-length', const length} => {
+      const errors = isInvalidLength(length)
+        ? [l('Not a valid time. Must be in the format MM:SS')]
+        : [];
+
+      newStateCtx.set('form', 'field', 'length', {
+        ...newStateCtx.get('form', 'field', 'length').read(),
+        errors,
+        value: length,
+      });
+    }
     {type: 'update-name', const action} => {
       const nameStateCtx = mutate({
         field: state.form.field.name,
@@ -247,6 +260,15 @@ component RecordingEditForm(
     dispatch({type: 'guess-feat'});
   }
 
+  const handleLengthChange = React.useCallback((
+    event: SyntheticEvent<HTMLInputElement>,
+  ) => {
+    dispatch({
+      length: event.currentTarget.value,
+      type: 'update-length',
+    });
+  }, [dispatch]);
+
   function handleLengthFocus() {
     dispatch({bubble: 'length', type: 'toggle-bubble'});
   }
@@ -336,9 +358,9 @@ component RecordingEditForm(
             <FormRowTextLong
               field={state.form.field.length}
               label={addColonText(l('Length'))}
+              onChange={handleLengthChange}
               onFocus={handleLengthFocus}
               rowRef={lengthFieldRef}
-              uncontrolled
             />
           ) : (
             <FormRow>

root/static/scripts/tests/index-web.js

@@ -57,6 +57,7 @@ require('./utility/isDateEmpty.js');
 require('./utility/isDisabledLink.js');
 require('./utility/isFutureDate.js');
 require('./utility/isGuid.js');
+require('./utility/isInvalidLength.js');
 require('./utility/isObjectEmpty.js');
 require('./utility/isShortenedUrl.js');
 require('./utility/isSpecialPurpose.js');

root/static/scripts/tests/utility/isInvalidLength.js

@@ -0,0 +1,65 @@
+/*
+ * @flow strict
+ * Copyright (C) 2025 MetaBrainz Foundation
+ *
+ * This file is part of MusicBrainz, the open internet music database,
+ * and is licensed under the GPL version 2, or (at your option) any
+ * later version: http://www.gnu.org/licenses/gpl-2.0.txt
+ */
+
+import test from 'tape';
+
+import isInvalidLength from '../../edit/utility/isInvalidLength.js';
+
+test('isInvalidLength', function (t) {
+  t.plan(12);
+
+  t.ok(
+    !isInvalidLength(''),
+    'No length is not invalid',
+  );
+  t.ok(
+    !isInvalidLength('?:??'),
+    '?:?? is empty/unknown, but not invalid',
+  );
+  t.ok(
+    !isInvalidLength('23 ms'),
+    'Miliseconds length is valid',
+  );
+  t.ok(
+    !isInvalidLength('00:23'),
+    'MM:SS is valid',
+  );
+  t.ok(
+    !isInvalidLength('00:57'),
+    ':SS is valid',
+  );
+  t.ok(
+    !isInvalidLength('85:23'),
+    'MM:SS is valid with more than 60 minutes',
+  );
+  t.ok(
+    !isInvalidLength('1:00:57'),
+    'HH:MM:SS is valid',
+  );
+  t.ok(
+    isInvalidLength('foo'),
+    'A random string is not valid',
+  );
+  t.ok(
+    isInvalidLength('10:80'),
+    'MM:SS is not valid with more than 60 seconds',
+  );
+  t.ok(
+    isInvalidLength(':80'),
+    ':SS is not valid with more than 60 seconds',
+  );
+  t.ok(
+    isInvalidLength('1:75:10'),
+    'HH:MM:SS is not valid with more than 60 minutes',
+  );
+  t.ok(
+    isInvalidLength('1000:35:10'),
+    'Times longer than the max number of ms we can store are invalid',
+  );
+});