Editor: Make mime type config less confusing

includes/Admin/Dashboard.php

@@ -410,6 +410,8 @@ public function get_dashboard_settings(): array {
 		if ( ! $max_upload_size ) {
 			$max_upload_size = 0;
 		}
+		$mime_types               = $this->types->get_allowed_mime_types();
+		$allowed_image_mime_types = $mime_types['image'];
 
 		$settings = [
 			'isRTL'                   => is_rtl(),
@@ -419,7 +421,7 @@ public function get_dashboard_settings(): array {
 			'archiveURL'              => $this->story_post_type->get_archive_link(),
 			'defaultArchiveURL'       => $this->story_post_type->get_archive_link( true ),
 			'cdnURL'                  => trailingslashit( WEBSTORIES_CDN_URL ),
-			'allowedImageMimeTypes'   => $this->types->get_allowed_image_mime_types(),
+			'allowedImageMimeTypes'   => $allowed_image_mime_types,
 			'version'                 => WEBSTORIES_VERSION,
 			'encodeMarkup'            => $this->decoder->supports_decoding(),
 			'api'                     => [

includes/Admin/Editor.php

@@ -346,9 +346,6 @@ public function get_editor_settings(): array {
 		/** This filter is documented in wp-admin/includes/post.php */
 		$show_locked_dialog = apply_filters( 'show_post_locked_dialog', true, $post, $user );
 		$nonce              = wp_create_nonce( 'wp_rest' );
-		$mime_types         = $this->types->get_allowed_mime_types();
-		$image_mime_types   = $this->types->get_allowed_image_mime_types();
-		$audio_mime_types   = $this->types->get_allowed_audio_mime_types();
 
 		$story = new Story();
 		$story->load_from_post( $post );
@@ -357,12 +354,7 @@ public function get_editor_settings(): array {
 			'autoSaveInterval'        => \defined( 'AUTOSAVE_INTERVAL' ) ? AUTOSAVE_INTERVAL : null,
 			'isRTL'                   => is_rtl(),
 			'locale'                  => $this->locale->get_locale_settings(),
-			'allowedFileTypes'        => $this->types->get_allowed_file_types(),
-			'allowedImageFileTypes'   => $this->types->get_file_type_exts( $image_mime_types ),
-			'allowedImageMimeTypes'   => $image_mime_types,
-			'allowedAudioFileTypes'   => $this->types->get_file_type_exts( $audio_mime_types ),
-			'allowedAudioMimeTypes'   => $audio_mime_types,
-			'allowedMimeTypes'        => $mime_types,
+			'allowedMimeTypes'        => $this->types->get_allowed_mime_types(),
 			'postType'                => $this->story_post_type->get_slug(),
 			'storyId'                 => $story_id,
 			'dashboardLink'           => $dashboard_url,

includes/Media/SVG.php

@@ -163,7 +163,7 @@ public function mime_types_add_svg( array $mime_types ): array {
 	 * @return array
 	 */
 	public function web_stories_allowed_mime_types( array $mime_types ): array {
-		$mime_types['image'][] = self::MIME_TYPE;
+		$mime_types['vector'][] = self::MIME_TYPE;
 
 		return $mime_types;
 	}

includes/Media/Types.php

@@ -30,27 +30,6 @@
  * Class Types
  */
 class Types {
-	/**
-	 * Returns a list of allowed file types.
-	 *
-	 * @since 1.0.0
-	 *
-	 * @return array List of allowed file types.
-	 */
-	public function get_allowed_file_types(): array {
-		$allowed_mime_types = $this->get_allowed_mime_types();
-		$mime_types         = [];
-
-		foreach ( $allowed_mime_types as $mimes ) {
-			// Otherwise this throws a warning on PHP < 7.3.
-			if ( ! empty( $mimes ) ) {
-				array_push( $mime_types, ...$mimes );
-			}
-		}
-
-		return $this->get_file_type_exts( $mime_types );
-	}
-
 	/**
 	 * Returns a list of allowed file types.
 	 *
@@ -82,16 +61,22 @@ public function get_file_type_exts( array $mime_types = [] ): array {
 	 */
 	public function get_allowed_mime_types(): array {
 		$default_allowed_mime_types = [
-			'image' => [
+			'image'   => [
 				'image/webp',
 				'image/png',
 				'image/jpeg',
 				'image/jpg',
 				'image/gif',
 			],
-			// TODO: Update once audio elements are supported.
-			'audio' => [],
-			'video' => [
+			'audio'   => [
+				'audio/mpeg',
+				'audio/aac',
+				'audio/wav',
+				'audio/ogg',
+			],
+			'caption' => [ 'text/vtt' ],
+			'vector'  => [],
+			'video'   => [
 				'video/mp4',
 				'video/webm',
 			],
@@ -120,55 +105,4 @@ public function get_allowed_mime_types(): array {
 
 		return $allowed_mime_types;
 	}
-
-	/**
-	 * Returns a list of image mime types.
-	 *
-	 * @since 1.4.0
-	 *
-	 * @return array List of allowed mime types.
-	 */
-	public function get_allowed_image_mime_types(): array {
-		$mime_type         = $this->get_allowed_mime_types();
-		$allowed_mime_type = $mime_type['image'];
-		$image_mime_type   = [
-			'image/webp',
-			'image/png',
-			'image/jpeg',
-			'image/jpg',
-			'image/gif',
-		];
-
-		/**
-		 * Filter list of allowed poster image mime types.
-		 *
-		 * @since 1.4.0
-		 *
-		 * @param array $image_mime_type   List of allowed mime types. Defaults to 'image/png', 'image/jpeg', 'image/jpg','image/gif'.
-		 * @param array $allowed_mime_type Allowed mime types from get_allowed_mime_types.
-		 */
-		$image_mime_type = apply_filters( 'web_stories_allowed_image_mime_types', $image_mime_type, $allowed_mime_type );
-
-		return array_values( array_intersect( $allowed_mime_type, $image_mime_type ) );
-	}
-
-	/**
-	 * Returns a list of audio mime types.
-	 *
-	 * Used for the allowlist when adding background audio.
-	 *
-	 * @since 1.11.0
-	 *
-	 * @return array List of allowed mime types.
-	 */
-	public function get_allowed_audio_mime_types(): array {
-		$allowed_mime_types = [
-			'audio/mpeg',
-			'audio/aac',
-			'audio/wav',
-			'audio/ogg',
-		];
-
-		return array_values( array_intersect( $allowed_mime_types, get_allowed_mime_types() ) );
-	}
 }

includes/REST_API/Hotlinking_Controller.php

@@ -231,7 +231,7 @@ public function parse_url( $request ) {
 			$ext = end( $exts );
 		}
 
-		$allowed_mime_types = $this->types->get_allowed_mime_types();
+		$allowed_mime_types = $this->get_allowed_mime_types();
 		$type               = '';
 		foreach ( $allowed_mime_types as $key => $mime_types ) {
 			if ( \in_array( $mime_type, $mime_types, true ) ) {
@@ -429,7 +429,7 @@ public function get_item_schema(): array {
 			return $this->add_additional_fields_schema( $this->schema );
 		}
 
-		$allowed_mime_types = $this->types->get_allowed_mime_types();
+		$allowed_mime_types = $this->get_allowed_mime_types();
 		$types              = array_keys( $allowed_mime_types );
 		$allowed_mime_types = array_merge( ...array_values( $allowed_mime_types ) );
 		$exts               = $this->types->get_file_type_exts( $allowed_mime_types );
@@ -570,4 +570,23 @@ public function stream_headers( $handle, $header ): int {
 
 		return \strlen( $header );
 	}
+
+	/**
+	 * Returns a list of allowed mime types per media type (image, audio, video).
+	 *
+	 * @since 1.19.0
+	 *
+	 * @return array<string, array> List of allowed mime types.
+	 */
+	protected function get_allowed_mime_types(): array {
+		$mime_type = $this->types->get_allowed_mime_types();
+		// TODO: Update once audio elements are supported.
+		$mime_type['audio'] = [];
+		// TODO: Add support hotlinking vvt files.
+		unset( $mime_type['caption'] );
+		// Do not support hotlinking SVGs for security reasons.
+		unset( $mime_type['vector'] );
+
+		return $mime_type;
+	}
 }

includes/REST_API/Stories_Media_Controller.php

@@ -427,6 +427,11 @@ public function get_item_schema(): array {
 	 * @return array Array of supported media types.
 	 */
 	protected function get_media_types(): array {
-		return $this->types->get_allowed_mime_types();
+		$mime_type = $this->types->get_allowed_mime_types();
+		// TODO: Update once audio elements are supported.
+		$mime_type['audio'] = [];
+		unset( $mime_type['caption'] );
+
+		return $mime_type;
 	}
 }

packages/media/src/index.js

@@ -28,7 +28,7 @@ export { default as formatMsToHMS } from './formatMsToHMS';
 export { default as generateVideoStrip } from './generateVideoStrip';
 export { default as getFileNameFromUrl } from './getFileNameFromUrl';
 export { default as getFileNameWithExt } from './getFileNameWithExt';
-export { default as getExtensionFromMimeType } from './getExtensionFromMimeType';
+export * from './mimeTypes';
 export { default as getFirstFrameOfVideo } from './getFirstFrameOfVideo';
 export { default as getImageDimensions } from './getImageDimensions';
 export { default as getMsFromHMS } from './getMsFromHMS';

packages/media/src/mimeTypes.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import mime from 'mime/lite';
+
+/**
+ * Get the file extension for a given mime type.
+ *
+ * @param {string} mimeType Mime type.
+ * @return {string} File extension.
+ */
+export function getExtensionFromMimeType(mimeType) {
+  return mime.getExtension(mimeType);
+}
+
+/**
+ * Get all possible file extensions for a given mime type.
+ *
+ * Some mime types can map to multiple file extensions, but
+ * the mime package does not offer a way to retrieve all of them.
+ *
+ * Since this is only needed for user-facing error messages
+ * (e.g. "You can upload jpeg, png, mp4, ..."), this function
+ * contains a simple, opinionated, hardcoded list of extensions for the
+ * most relevant mime types as used in the story editor.
+ *
+ * @see https://github.com/broofa/mime/issues/254
+ * @param {string} mimeType Mime type.
+ * @return {string[]} File extension.
+ */
+export function getExtensionsFromMimeType(mimeType) {
+  switch (mimeType) {
+    case 'audio/mpeg':
+      return ['mp3', 'm3a'];
+    case 'audio/aac':
+      return ['aac'];
+    case 'audio/ogg':
+      return ['oga', 'ogg'];
+    case 'image/jpeg':
+      return ['jpg', 'jpeg'];
+    default:
+      return [getExtensionFromMimeType(mimeType)].filter(Boolean);
+  }
+}

packages/media/src/test/mimeTypes.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Internal dependencies
+ */
+import { getExtensionsFromMimeType } from '../mimeTypes';
+
+describe('getExtensionsFromMimeType', () => {
+  it('returns an array of file extensions', () => {
+    expect(getExtensionsFromMimeType('audio/mpeg')).toStrictEqual([
+      'mp3',
+      'm3a',
+    ]);
+    expect(getExtensionsFromMimeType('audio/mp3')).toStrictEqual(['mp3']);
+    expect(getExtensionsFromMimeType('audio/aac')).toStrictEqual(['aac']);
+    expect(getExtensionsFromMimeType('audio/ogg')).toStrictEqual([
+      'oga',
+      'ogg',
+    ]);
+    expect(getExtensionsFromMimeType('video/mp4')).toStrictEqual(['mp4']);
+    expect(getExtensionsFromMimeType('invalid/type')).toStrictEqual([]);
+  });
+});

packages/story-editor/src/app/highlights/quickActions/test/useQuickActions.js

@@ -363,9 +363,9 @@ describe('useQuickActions', () => {
     useStoryTriggersDispatch.mockReturnValue(mockDispatchStoryEvent);
 
     mockUseConfig.mockReturnValue({
-      allowedFileTypes: [],
       allowedMimeTypes: {
         image: [],
+        vector: [],
         video: [],
       },
       capabilities: { hasUploadMediaAction: true },
@@ -1004,9 +1004,9 @@ describe('MediaPicker', () => {
     });
 
     mockUseConfig.mockReturnValue({
-      allowedFileTypes: ['pepperoni', 'cheese'],
       allowedMimeTypes: {
         image: ['image/gif'],
+        vector: [],
         video: ['muted'],
       },
       capabilities: { hasUploadMediaAction: true },