[RNMobile] Ensure uploaded audio is always visible within Audio block (…

…#55627)

Ensure the Audio block is always visible when media's been uploaded to it.

packages/components/src/index.native.js

@@ -141,4 +141,5 @@ export {
 	getGlobalStyles,
 	getColorsAndGradients,
 	useMobileGlobalStylesColors,
+	useEditorColorScheme,
 } from './mobile/global-styles-context/utils';

packages/components/src/mobile/audio-player/index.native.js

@@ -14,7 +14,7 @@ import { default as VideoPlayer } from 'react-native-video';
  * WordPress dependencies
  */
 import { View } from '@wordpress/primitives';
-import { Icon } from '@wordpress/components';
+import { Icon, useEditorColorScheme } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { audio, warning } from '@wordpress/icons';
@@ -34,7 +34,6 @@ import { parseAudioUrl } from './audio-url-parser.native';
 const isIOS = Platform.OS === 'ios';
 
 function Player( {
-	getStylesFromColorScheme,
 	isUploadInProgress,
 	isUploadFailed,
 	attributes,
@@ -70,14 +69,14 @@ function Player( {
 		}
 	};
 
-	const containerStyle = getStylesFromColorScheme(
+	const containerStyle = useEditorColorScheme(
 		styles.container,
 		styles.containerDark
 	);
 
-	const iconStyle = getStylesFromColorScheme( styles.icon, styles.iconDark );
+	const iconStyle = useEditorColorScheme( styles.icon, styles.iconDark );
 
-	const iconDisabledStyle = getStylesFromColorScheme(
+	const iconDisabledStyle = useEditorColorScheme(
 		styles.iconDisabled,
 		styles.iconDisabledDark
 	);
@@ -89,7 +88,7 @@ function Player( {
 		...( isDisabled && iconDisabledStyle ),
 	};
 
-	const iconContainerStyle = getStylesFromColorScheme(
+	const iconContainerStyle = useEditorColorScheme(
 		styles.iconContainer,
 		styles.iconContainerDark
 	);
@@ -99,17 +98,14 @@ function Player( {
 		...( isIOS ? styles.titleContainerIOS : styles.titleContainerAndroid ),
 	};
 
-	const titleStyle = getStylesFromColorScheme(
-		styles.title,
-		styles.titleDark
-	);
+	const titleStyle = useEditorColorScheme( styles.title, styles.titleDark );
 
-	const uploadFailedStyle = getStylesFromColorScheme(
+	const uploadFailedStyle = useEditorColorScheme(
 		styles.uploadFailed,
 		styles.uploadFailedDark
 	);
 
-	const subtitleStyle = getStylesFromColorScheme(
+	const subtitleStyle = useEditorColorScheme(
 		styles.subtitle,
 		styles.subtitleDark
 	);
@@ -119,7 +115,7 @@ function Player( {
 		...( isUploadFailed && uploadFailedStyle ),
 	};
 
-	const buttonBackgroundStyle = getStylesFromColorScheme(
+	const buttonBackgroundStyle = useEditorColorScheme(
 		styles.buttonBackground,
 		styles.buttonBackgroundDark
 	);

packages/components/src/mobile/global-styles-context/utils.native.js

@@ -3,6 +3,7 @@
  */
 import { camelCase } from 'change-case';
 import { Dimensions } from 'react-native';
+import { colord } from 'colord';
 
 /**
  * WordPress dependencies
@@ -13,6 +14,12 @@ import {
 	useMultipleOriginColorsAndGradients,
 	SETTINGS_DEFAULTS,
 } from '@wordpress/block-editor';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { useGlobalStyles } from './index.native';
 
 export const BLOCK_STYLE_ATTRIBUTES = [
 	'textColor',
@@ -441,3 +448,40 @@ export function getGlobalStyles( rawStyles, rawFeatures ) {
 		__experimentalGlobalStylesBaseStyles: globalStyles,
 	};
 }
+
+/**
+ * Determine and apply appropriate color scheme based on global styles or device's light/dark mode.
+ *
+ * The function first attempts to retrieve the editor's background color from global styles.
+ * If the detected background color is light, light styles are applied, and dark styles otherwise.
+ * If no custom background color is defined, styles are applied using the device's dark/light setting.
+ *
+ * @param {Object} baseStyle - An object representing the base (light theme) styles for the editor.
+ * @param {Object} darkStyle - An object representing the additional styles to apply when the editor is in dark mode.
+ *
+ * @return {Object} - The combined style object that should be applied to the editor.
+ */
+export const useEditorColorScheme = ( baseStyle, darkStyle ) => {
+	const globalStyles = useGlobalStyles();
+
+	const deviceColorScheme = usePreferredColorSchemeStyle(
+		baseStyle,
+		darkStyle
+	);
+
+	const editorColors = globalStyles?.baseColors?.color;
+	const editorBackgroundColor = editorColors?.background;
+
+	const isBackgroundColorDefined =
+		typeof editorBackgroundColor !== 'undefined' &&
+		editorBackgroundColor !== 'undefined';
+
+	if ( isBackgroundColorDefined ) {
+		const isEditorBackgroundDark = colord( editorBackgroundColor ).isDark();
+		return isEditorBackgroundDark
+			? { ...baseStyle, ...darkStyle }
+			: baseStyle;
+	}
+
+	return deviceColorScheme;
+};

packages/react-native-editor/CHANGELOG.md

@@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [*] Audio block: Improve legibility of audio file details on various background colors [#55627]
 
 ## 1.108.0
 -   [*] Fix error when pasting deeply nested structure content [#55613]