@wordpress/block-library 9.26.1-next.719a03cbe.0 → 9.27.0

package/src/video/tracks-editor.js

@@ -24,9 +24,8 @@ import {
 	MediaUploadCheck,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { store as noticesStore } from '@wordpress/notices';
 import { upload, media } from '@wordpress/icons';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { getFilename } from '@wordpress/url';
 
@@ -49,11 +48,19 @@ const KIND_OPTIONS = [
 	{ label: __( 'Metadata' ), value: 'metadata' },
 ];
 
+const DEFAULT_TRACK = {
+	src: '',
+	label: '',
+	srcLang: 'en',
+	kind: DEFAULT_KIND,
+	default: false,
+};
+
 function TrackList( { tracks, onEditPress } ) {
 	const content = tracks.map( ( track, index ) => {
 		return (
 			<HStack
-				key={ track.src }
+				key={ track.id ?? track.src }
 				className="block-library-video-tracks-editor__track-list-track"
 			>
 				<span>{ track.label }</span>
@@ -93,13 +100,12 @@ function SingleTrackEditor( {
 	onRemove,
 	allowSettingDefault,
 } ) {
-	const {
-		src = '',
-		label = '',
-		srcLang = '',
-		kind = DEFAULT_KIND,
-		default: isDefaultTrack = false,
-	} = track;
+	const [ trackState, setTrackState ] = useState( {
+		...DEFAULT_TRACK,
+		...track,
+	} );
+
+	const { src, label, srcLang, kind, default: isDefaultTrack } = trackState;
 	const fileName = src.startsWith( 'blob:' ) ? '' : getFilename( src ) || '';
 	return (
 		<VStack
@@ -117,10 +123,10 @@ function SingleTrackEditor( {
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					onChange={ ( newLabel ) =>
-						onChange( {
-							...track,
+						setTrackState( ( prevTrackState ) => ( {
+							...prevTrackState,
 							label: newLabel,
-						} )
+						} ) )
 					}
 					label={ __( 'Label' ) }
 					value={ label }
@@ -130,10 +136,10 @@ function SingleTrackEditor( {
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					onChange={ ( newSrcLang ) =>
-						onChange( {
-							...track,
+						setTrackState( ( prevTrackState ) => ( {
+							...prevTrackState,
 							srcLang: newSrcLang,
-						} )
+						} ) )
 					}
 					label={ __( 'Source language' ) }
 					value={ srcLang }
@@ -148,12 +154,12 @@ function SingleTrackEditor( {
 					options={ KIND_OPTIONS }
 					value={ kind }
 					label={ __( 'Kind' ) }
-					onChange={ ( newKind ) => {
-						onChange( {
-							...track,
+					onChange={ ( newKind ) =>
+						setTrackState( ( prevTrackState ) => ( {
+							...prevTrackState,
 							kind: newKind,
-						} );
-					} }
+						} ) )
+					}
 				/>
 				<ToggleControl
 					__next40pxDefaultSize
@@ -161,12 +167,12 @@ function SingleTrackEditor( {
 					label={ __( 'Set as default track' ) }
 					checked={ isDefaultTrack }
 					disabled={ ! allowSettingDefault }
-					onChange={ ( defaultTrack ) => {
-						onChange( {
-							...track,
+					onChange={ ( defaultTrack ) =>
+						setTrackState( ( prevTrackState ) => ( {
+							...prevTrackState,
 							default: defaultTrack,
-						} );
-					} }
+						} ) )
+					}
 				/>
 				<HStack className="block-library-video-tracks-editor__single-track-editor-buttons-container">
 					<Button
@@ -181,26 +187,7 @@ function SingleTrackEditor( {
 						__next40pxDefaultSize
 						variant="primary"
 						onClick={ () => {
-							const changes = {};
-							let hasChanges = false;
-							if ( label === '' ) {
-								changes.label = __( 'English' );
-								hasChanges = true;
-							}
-							if ( srcLang === '' ) {
-								changes.srcLang = 'en';
-								hasChanges = true;
-							}
-							if ( track.kind === undefined ) {
-								changes.kind = DEFAULT_KIND;
-								hasChanges = true;
-							}
-							if ( hasChanges ) {
-								onChange( {
-									...track,
-									...changes,
-								} );
-							}
+							onChange( trackState );
 							onClose();
 						} }
 					>
@@ -213,27 +200,60 @@ function SingleTrackEditor( {
 }
 
 export default function TracksEditor( { tracks = [], onChange } ) {
-	const { createNotice } = useDispatch( noticesStore );
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
 	const [ trackBeingEdited, setTrackBeingEdited ] = useState( null );
 	const dropdownPopoverRef = useRef();
 
-	const handleTrackSelect = ( { title, url } ) => {
-		if ( tracks.some( ( track ) => track.src === url ) ) {
-			createNotice( 'error', __( 'This track already exists.' ), {
-				isDismissible: true,
-				type: 'snackbar',
-			} );
+	const handleTrackSelect = ( selectedTracks = [], appendTracks = false ) => {
+		const existingTracksMap = new Map(
+			tracks.map( ( track ) => [ track.id, track ] )
+		);
+		const tracksToAdd = selectedTracks.map( ( { id, title, url } ) => {
+			// Reuse existing tracks to preserve user-configured metadata.
+			if ( existingTracksMap.has( id ) ) {
+				return existingTracksMap.get( id );
+			}
+
+			return {
+				...DEFAULT_TRACK,
+				id,
+				label: title || '',
+				src: url,
+			};
+		} );
+
+		if ( tracksToAdd.length === 0 ) {
 			return;
 		}
 
-		const trackIndex = tracks.length;
-		onChange( [ ...tracks, { label: title || '', src: url } ] );
-		setTrackBeingEdited( trackIndex );
+		onChange( [ ...( appendTracks ? tracks : [] ), ...tracksToAdd ] );
 	};
 
+	function uploadFiles( event ) {
+		const files = event.target.files;
+		mediaUpload( {
+			allowedTypes: ALLOWED_TYPES,
+			filesList: files,
+			onFileChange: ( selectedTracks ) => {
+				if ( ! Array.isArray( selectedTracks ) ) {
+					return;
+				}
+
+				// Wait until the track has been uploaded.
+				const uploadedTracks = selectedTracks.filter(
+					( track ) => !! track?.id
+				);
+
+				if ( ! uploadedTracks.length ) {
+					return;
+				}
+				handleTrackSelect( uploadedTracks, true );
+			},
+		} );
+	}
+
 	useEffect( () => {
 		dropdownPopoverRef.current?.focus();
 	}, [ trackBeingEdited ] );
@@ -321,60 +341,30 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 								className="block-library-video-tracks-editor__add-tracks-container"
 								label={ __( 'Add tracks' ) }
 							>
-								<MediaUpload
-									onSelect={ handleTrackSelect }
-									allowedTypes={ ALLOWED_TYPES }
-									render={ ( { open } ) => (
-										<MenuItem
-											icon={ media }
-											onClick={ open }
-										>
-											{ __( 'Open Media Library' ) }
-										</MenuItem>
-									) }
-								/>
 								<MediaUploadCheck>
+									<MediaUpload
+										onSelect={ handleTrackSelect }
+										allowedTypes={ ALLOWED_TYPES }
+										value={ tracks.map( ( { id } ) => id ) }
+										multiple
+										render={ ( { open } ) => (
+											<MenuItem
+												icon={ media }
+												onClick={ open }
+											>
+												{ __( 'Open Media Library' ) }
+											</MenuItem>
+										) }
+									/>
 									<FormFileUpload
-										onChange={ ( event ) => {
-											const files = event.target.files;
-											const trackIndex = tracks.length;
-											mediaUpload( {
-												allowedTypes: ALLOWED_TYPES,
-												filesList: files,
-												onFileChange: ( [
-													{ url },
-												] ) => {
-													const newTracks = [
-														...tracks,
-													];
-													if (
-														! newTracks[
-															trackIndex
-														]
-													) {
-														newTracks[
-															trackIndex
-														] = {};
-													}
-													newTracks[ trackIndex ] = {
-														...tracks[ trackIndex ],
-														src: url,
-													};
-													onChange( newTracks );
-													setTrackBeingEdited(
-														trackIndex
-													);
-												},
-											} );
-										} }
+										onChange={ uploadFiles }
 										accept=".vtt,text/vtt"
+										multiple
 										render={ ( { openFileDialog } ) => {
 											return (
 												<MenuItem
 													icon={ upload }
-													onClick={ () => {
-														openFileDialog();
-													} }
+													onClick={ openFileDialog }
 												>
 													{ _x( 'Upload', 'verb' ) }
 												</MenuItem>

package/src/video/tracks.js

@@ -1,5 +1,6 @@
 export default function Tracks( { tracks = [] } ) {
 	return tracks.map( ( track ) => {
-		return <track key={ track.src } { ...track } />;
+		const { id, ...trackAttrs } = track;
+		return <track key={ id ?? trackAttrs.src } { ...trackAttrs } />;
 	} );
 }