chore: Merge 4.46.0 into master (#5511)

android/app/build.gradle

@@ -147,7 +147,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode VERSIONCODE as Integer
-        versionName "4.45.0"
+        versionName "4.46.0"
         vectorDrawables.useSupportLibrary = true
         if (!isFoss) {
             manifestPlaceholders = [BugsnagAPIKey: BugsnagAPIKey as String]
@@ -381,6 +381,12 @@ dependencies {
     implementation 'androidx.appcompat:appcompat:1.1.0'
     implementation 'com.facebook.soloader:soloader:0.10.4'
     implementation 'com.facebook.fresco:animated-gif:2.5.0'
+    // react-native-screens was pointing to a newer version of this lib that is currently not supported in our app
+    implementation ('com.google.android.material:material:1.6.0') {
+        version {
+            strictly '1.6.0'
+        }
+    }
 }
 
 if (isNewArchitectureEnabled()) {

app/containers/AudioPlayer/PlayButton.tsx

@@ -20,7 +20,7 @@ const Icon = ({ audioState, disabled }: { audioState: TAudioState; disabled: boo
 	const { colors } = useTheme();
 
 	if (audioState === 'loading') {
-		return <RCActivityIndicator />;
+		return <RCActivityIndicator size={24} color={colors.buttonFontPrimary} />;
 	}
 
 	let customIconName: TCustomIconName = 'arrow-down';

app/containers/AudioPlayer/PlaybackSpeed.tsx

@@ -4,11 +4,10 @@ import { Text } from 'react-native';
 import styles from './styles';
 import { useTheme } from '../../theme';
 import { AUDIO_PLAYBACK_SPEED, AVAILABLE_SPEEDS } from './constants';
-import { TAudioState } from './types';
 import { useUserPreferences } from '../../lib/methods';
 import NativeButton from '../NativeButton';
 
-const PlaybackSpeed = ({ audioState }: { audioState: TAudioState }) => {
+const PlaybackSpeed = () => {
 	const [playbackSpeed, setPlaybackSpeed] = useUserPreferences<number>(AUDIO_PLAYBACK_SPEED, AVAILABLE_SPEEDS[1]);
 	const { colors } = useTheme();
 
@@ -20,7 +19,6 @@ const PlaybackSpeed = ({ audioState }: { audioState: TAudioState }) => {
 
 	return (
 		<NativeButton
-			disabled={audioState !== 'playing'}
 			onPress={onPress}
 			style={[styles.containerPlaybackSpeed, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]}
 		>

app/containers/AudioPlayer/index.tsx

@@ -10,7 +10,8 @@ import styles from './styles';
 import Seek from './Seek';
 import PlaybackSpeed from './PlaybackSpeed';
 import PlayButton from './PlayButton';
-import audioPlayer from '../../lib/methods/audioPlayer';
+import EventEmitter from '../../lib/methods/helpers/events';
+import audioPlayer, { AUDIO_FOCUSED } from '../../lib/methods/audioPlayer';
 import { AUDIO_PLAYBACK_SPEED, AVAILABLE_SPEEDS } from './constants';
 import { TDownloadState } from '../../lib/methods/handleMediaDownload';
 import { TAudioState } from './types';
@@ -39,6 +40,7 @@ const AudioPlayer = ({
 
 	const [playbackSpeed] = useUserPreferences<number>(AUDIO_PLAYBACK_SPEED, AVAILABLE_SPEEDS[1]);
 	const [paused, setPaused] = useState(true);
+	const [focused, setFocused] = useState(false);
 	const duration = useSharedValue(0);
 	const currentTime = useSharedValue(0);
 	const { colors } = useTheme();
@@ -139,6 +141,15 @@ const AudioPlayer = ({
 		};
 	}, [navigation]);
 
+	useEffect(() => {
+		const listener = EventEmitter.addEventListener(AUDIO_FOCUSED, ({ audioFocused }: { audioFocused: string }) => {
+			setFocused(audioFocused === audioUri.current);
+		});
+		return () => {
+			EventEmitter.removeListener(AUDIO_FOCUSED, listener);
+		};
+	}, []);
+
 	let audioState: TAudioState = 'to-download';
 	if (isLoading) {
 		audioState = 'loading';
@@ -154,7 +165,7 @@ const AudioPlayer = ({
 		<View style={[styles.audioContainer, { backgroundColor: colors.surfaceTint, borderColor: colors.strokeExtraLight }]}>
 			<PlayButton disabled={disabled} audioState={audioState} onPress={onPress} />
 			<Seek currentTime={currentTime} duration={duration} loaded={!disabled && isDownloaded} onChangeTime={setPosition} />
-			{audioState === 'playing' ? <PlaybackSpeed audioState={audioState} /> : null}
+			{audioState === 'playing' || focused ? <PlaybackSpeed /> : null}
 		</View>
 	);
 };

app/containers/MessageBox/index.tsx

@@ -73,8 +73,7 @@ const imagePickerConfig = {
 const libraryPickerConfig: Options = {
 	multiple: true,
 	compressVideoPreset: 'Passthrough',
-	mediaType: 'any',
-	forceJpg: true
+	mediaType: 'any'
 };
 
 const videoPickerConfig: Options = {

app/containers/markdown/index.tsx

@@ -16,7 +16,7 @@ import MarkdownTableRow from './TableRow';
 import MarkdownTableCell from './TableCell';
 import mergeTextNodes from './mergeTextNodes';
 import styles from './styles';
-import { isValidURL } from '../../lib/methods/helpers/url';
+import { isValidUrl } from '../../lib/methods/helpers/isValidUrl';
 import NewMarkdown from './new';
 import { formatText } from './formatText';
 import { IUserMention, IUserChannel, TOnLinkPress } from './interfaces';
@@ -246,7 +246,7 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 	};
 
 	renderImage = ({ src }: { src: string }) => {
-		if (!isValidURL(src)) {
+		if (!isValidUrl(src)) {
 			return null;
 		}
 

app/containers/message/Components/BlurComponent/index.tsx → app/containers/message/Components/OverlayComponent/index.tsx

@@ -1,37 +1,30 @@
 import React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
-import { BlurView } from '@react-native-community/blur';
 
 import styles from '../../styles';
 import { useTheme } from '../../../../theme';
 import RCActivityIndicator from '../../../ActivityIndicator';
 import { CustomIcon, TIconsName } from '../../../CustomIcon';
 
-const BlurComponent = ({
+const OverlayComponent = ({
 	loading = false,
 	style = {},
-	iconName,
-	showOverlay = false
+	iconName
 }: {
 	loading: boolean;
 	style: StyleProp<ViewStyle>;
 	iconName: TIconsName;
-	showOverlay?: boolean;
 }) => {
 	const { colors } = useTheme();
 
 	return (
 		<>
-			{!showOverlay ? (
-				<BlurView style={[style, styles.blurView]} blurType={'dark'} blurAmount={2} />
-			) : (
-				<View style={[style, styles.blurView, { backgroundColor: colors.overlayColor }]} />
-			)}
+			<View style={[style, styles.blurView, { backgroundColor: colors.overlayColor }]} />
 			<View style={[style, styles.blurIndicator]}>
 				{loading ? <RCActivityIndicator size={54} /> : <CustomIcon color={colors.buttonText} name={iconName} size={54} />}
 			</View>
 		</>
 	);
 };
 
-export default BlurComponent;
+export default OverlayComponent;

app/containers/message/Image.tsx

@@ -15,7 +15,7 @@ import {
 import { formatAttachmentUrl } from '../../lib/methods/helpers/formatAttachmentUrl';
 import { useTheme } from '../../theme';
 import Markdown from '../markdown';
-import BlurComponent from './Components/BlurComponent';
+import BlurComponent from './Components/OverlayComponent';
 import MessageContext from './Context';
 import Touchable from './Touchable';
 import styles from './styles';
@@ -44,7 +44,7 @@ const Button = React.memo(({ children, onPress, disabled }: IMessageButton) => {
 		<Touchable
 			disabled={disabled}
 			onPress={onPress}
-			style={[styles.imageContainer, styles.mustWrapBlur]}
+			style={styles.imageContainer}
 			background={Touchable.Ripple(colors.bannerBackground)}
 		>
 			{children}

app/containers/message/Video.tsx

@@ -21,11 +21,10 @@ import { useTheme } from '../../theme';
 import sharedStyles from '../../views/Styles';
 import { LISTENER } from '../Toast';
 import Markdown from '../markdown';
-import BlurComponent from './Components/BlurComponent';
+import BlurComponent from './Components/OverlayComponent';
 import MessageContext from './Context';
 import Touchable from './Touchable';
 import { fileDownload } from './helpers/fileDownload';
-import messageStyles from './styles';
 import { DEFAULT_MESSAGE_HEIGHT } from './utils';
 
 const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/3gp', 'video/mkv'])];
@@ -78,12 +77,7 @@ const CancelIndicator = () => {
 const Thumbnail = ({ loading, thumbnailUrl, cached }: { loading: boolean; thumbnailUrl?: string; cached: boolean }) => (
 	<>
 		{thumbnailUrl ? <FastImage style={styles.thumbnailImage} source={{ uri: thumbnailUrl }} /> : null}
-		<BlurComponent
-			iconName={cached ? 'play-filled' : 'arrow-down-circle'}
-			loading={loading}
-			style={styles.button}
-			showOverlay={cached}
-		/>
+		<BlurComponent iconName={cached ? 'play-filled' : 'arrow-down-circle'} loading={loading} style={styles.button} />
 		{loading ? <CancelIndicator /> : null}
 	</>
 );
@@ -230,7 +224,7 @@ const Video = ({ file, showAttachment, getCustomEmoji, style, isReply, msg }: IM
 			<Markdown msg={msg} username={user.username} getCustomEmoji={getCustomEmoji} style={[isReply && style]} theme={theme} />
 			<Touchable
 				onPress={onPress}
-				style={[styles.button, messageStyles.mustWrapBlur, { backgroundColor: themes[theme].videoBackground }]}
+				style={[styles.button, { backgroundColor: themes[theme].videoBackground }]}
 				background={Touchable.Ripple(themes[theme].bannerBackground)}
 			>
 				<Thumbnail loading={loading} cached={cached} />

app/containers/message/styles.ts

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
 
 import sharedStyles from '../../views/Styles';
-import { isAndroid, isTablet } from '../../lib/methods/helpers';
+import { isTablet } from '../../lib/methods/helpers';
 
 export default StyleSheet.create({
 	root: {
@@ -184,9 +184,5 @@ export default StyleSheet.create({
 		position: 'absolute',
 		justifyContent: 'center',
 		alignItems: 'center'
-	},
-	mustWrapBlur: {
-		// https://github.com/Kureev/react-native-blur/issues/520#issuecomment-1378339192 Fix BlurView
-		overflow: isAndroid ? 'hidden' : 'visible'
 	}
 });

app/lib/constants/colors.ts

@@ -103,7 +103,7 @@ export const colors = {
 		n900: '#1F2329',
 		statusBackgroundWarning: '#FFECAD',
 		statusFontOnWarning: '#B88D00',
-		overlayColor: '#1F2329B2',
+		overlayColor: '#1F2329CC',
 		buttonBackgroundPrimaryDefault: '#156FF5',
 		buttonBackgroundSecondaryDefault: '#E4E7EA',
 		buttonFontPrimary: '#FFFFFF',
@@ -191,7 +191,7 @@ export const colors = {
 		n900: '#FFFFFF',
 		statusBackgroundWarning: '#FFECAD',
 		statusFontOnWarning: '#B88D00',
-		overlayColor: '#1F2329B2',
+		overlayColor: '#1F2329CC',
 		buttonBackgroundPrimaryDefault: '#3976D1',
 		buttonBackgroundSecondaryDefault: '#2F343D',
 		buttonFontPrimary: '#FFFFFF',
@@ -279,7 +279,7 @@ export const colors = {
 		n900: '#FFFFFF',
 		statusBackgroundWarning: '#FFECAD',
 		statusFontOnWarning: '#B88D00',
-		overlayColor: '#1F2329B2',
+		overlayColor: '#1F2329CC',
 		buttonBackgroundPrimaryDefault: '#3976D1',
 		buttonBackgroundSecondaryDefault: '#2F343D',
 		buttonFontPrimary: '#FFFFFF',

app/lib/hooks/useVideoConf/StartACallActionSheet.tsx

@@ -1,21 +1,28 @@
 import { Camera, CameraType } from 'expo-camera';
 import React, { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { useDispatch } from 'react-redux';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useDispatch } from 'react-redux';
 
 import { useAppSelector } from '..';
 import { cancelCall, initVideoCall } from '../../../actions/videoConf';
 import AvatarContainer from '../../../containers/Avatar';
 import Button from '../../../containers/Button';
 import { CallHeader } from '../../../containers/CallHeader';
 import Ringer, { ERingerSounds } from '../../../containers/Ringer';
+import { SubscriptionType } from '../../../definitions';
 import i18n from '../../../i18n';
 import { getUserSelector } from '../../../selectors/login';
 import { useTheme } from '../../../theme';
 import useUserData from '../useUserData';
 
-export default function StartACallActionSheet({ rid }: { rid: string }): React.ReactElement {
+export default function StartACallActionSheet({
+	rid,
+	roomType
+}: {
+	rid: string;
+	roomType?: SubscriptionType;
+}): React.ReactElement {
 	const { colors } = useTheme();
 	const [mic, setMic] = useState(true);
 	const [cam, setCam] = useState(false);
@@ -42,7 +49,7 @@ export default function StartACallActionSheet({ rid }: { rid: string }): React.R
 			style={[style.actionSheetContainer, { paddingBottom: bottom }]}
 			onLayout={e => setContainerWidth(e.nativeEvent.layout.width / 2)}
 		>
-			{calling ? <Ringer ringer={ERingerSounds.DIALTONE} /> : null}
+			{calling && roomType === SubscriptionType.DIRECT ? <Ringer ringer={ERingerSounds.DIALTONE} /> : null}
 			<CallHeader
 				title={calling && user.direct ? i18n.t('Calling') : i18n.t('Start_a_call')}
 				cam={cam}

app/lib/hooks/useVideoConf/index.tsx

@@ -31,7 +31,7 @@ export const useVideoConf = (
 	const user = useAppSelector(state => getUserSelector(state));
 	const serverVersion = useAppSelector(state => state.server.version);
 
-	const { callEnabled, disabledTooltip } = useVideoConfCall(rid);
+	const { callEnabled, disabledTooltip, roomType } = useVideoConfCall(rid);
 
 	const [permission, requestPermission] = Camera.useCameraPermissions();
 	const { showActionSheet } = useActionSheet();
@@ -59,7 +59,7 @@ export const useVideoConf = (
 			const canInit = await canInitAnCall();
 			if (canInit) {
 				showActionSheet({
-					children: <StartACallActionSheet rid={rid} />,
+					children: <StartACallActionSheet rid={rid} roomType={roomType} />,
 					snaps: [480]
 				});
 

app/lib/hooks/useVideoConf/useVideoConfCall.ts

@@ -3,15 +3,18 @@ import { useEffect, useState } from 'react';
 import { SubscriptionType } from '../../../definitions';
 import { getUserSelector } from '../../../selectors/login';
 import { getSubscriptionByRoomId } from '../../database/services/Subscription';
+import { isRoomFederated } from '../../methods';
 import { compareServerVersion, isReadOnly } from '../../methods/helpers';
 import { useAppSelector } from '../useAppSelector';
 import { usePermissions } from '../usePermissions';
 import { useSetting } from '../useSetting';
-import { isRoomFederated } from '../../methods';
 
-export const useVideoConfCall = (rid: string): { callEnabled: boolean; disabledTooltip?: boolean } => {
+export const useVideoConfCall = (
+	rid: string
+): { callEnabled: boolean; disabledTooltip?: boolean; roomType?: SubscriptionType } => {
 	const [callEnabled, setCallEnabled] = useState(false);
 	const [disabledTooltip, setDisabledTooltip] = useState(false);
+	const [roomType, setRoomType] = useState<SubscriptionType>();
 
 	// OLD SETTINGS
 	const jitsiEnabled = useSetting('Jitsi_Enabled');
@@ -34,6 +37,7 @@ export const useVideoConfCall = (rid: string): { callEnabled: boolean; disabledT
 	const init = async () => {
 		const room = await getSubscriptionByRoomId(rid);
 		if (room) {
+			setRoomType(room.t);
 			if (isServer5OrNewer) {
 				const isReadyOnly = await isReadOnly(room, user.username);
 				const ownUser = room.uids && room.uids.length === 1;
@@ -64,5 +68,5 @@ export const useVideoConfCall = (rid: string): { callEnabled: boolean; disabledT
 		init();
 	}, []);
 
-	return { callEnabled, disabledTooltip };
+	return { callEnabled, disabledTooltip, roomType };
 };

app/lib/methods/audioPlayer.ts

@@ -1,5 +1,9 @@
 import { AVPlaybackStatus, Audio, InterruptionModeAndroid, InterruptionModeIOS } from 'expo-av';
 
+import EventEmitter from './helpers/events';
+
+export const AUDIO_FOCUSED = 'AUDIO_FOCUSED';
+
 const AUDIO_MODE = {
 	allowsRecordingIOS: false,
 	playsInSilentModeIOS: true,
@@ -42,6 +46,7 @@ class AudioPlayer {
 				try {
 					await this.audioQueue[audioKey]?.stopAsync();
 					this.audioPlaying = '';
+					EventEmitter.emit(AUDIO_FOCUSED, { audioFocused: '' });
 				} catch {
 					// do nothing
 				}
@@ -62,6 +67,7 @@ class AudioPlayer {
 		await Audio.setAudioModeAsync(AUDIO_MODE);
 		await this.audioQueue[audioKey]?.playAsync();
 		this.audioPlaying = audioKey;
+		EventEmitter.emit(AUDIO_FOCUSED, { audioFocused: audioKey });
 	}
 
 	async pauseAudio(audioKey: string) {

app/lib/methods/helpers/events.ts

@@ -12,7 +12,8 @@ type TEventEmitterEmmitArgs =
 	| { visible: boolean; onCancel?: null | Function }
 	| { cancel: () => void }
 	| { submit: (param: string) => void }
-	| IEmitUserInteraction;
+	| IEmitUserInteraction
+	| { audioFocused: string };
 
 class EventEmitter {
 	private events: { [key: string]: any };