fix: video attachments not reproducing on iOS

app/containers/message/components/Attachments/Image/Image.tsx

@@ -12,6 +12,7 @@ import { useUserPreferences } from '../../../../../lib/methods/userPreferences';
 import { AUTOPLAY_GIFS_PREFERENCES_KEY } from '../../../../../lib/constants/keys';
 import ImageBadge from './ImageBadge';
 import log from '../../../../../lib/methods/helpers/log';
+import { encodeAttachmentUrl } from '../../../../../lib/methods/helpers/formatAttachmentUrl';
 
 export const MessageImage = ({ uri, status, encrypted = false, imagePreview, imageType }: IMessageImage) => {
 	const { colors } = useTheme();
@@ -69,7 +70,7 @@ export const MessageImage = ({ uri, status, encrypted = false, imagePreview, ima
 		<>
 			{showImage ? (
 				<View style={[containerStyle, borderStyle]}>
-					<Image autoplay={autoplayGifs} style={imageStyle} source={{ uri: encodeURI(uri) }} contentFit='cover' />
+					<Image autoplay={autoplayGifs} style={imageStyle} source={{ uri: encodeAttachmentUrl(uri) }} contentFit='cover' />
 				</View>
 			) : null}
 			{['loading', 'to-download'].includes(status) || (status === 'downloaded' && !showImage) ? (

app/containers/message/hooks/__tests__/useMediaAutoDownload.test.tsx

@@ -47,19 +47,6 @@ jest.mock('../../../../lib/methods/helpers/emitter', () => {
 	};
 });
 
-// The persisted/localFile logic is covered by useFile.test; here useFile is a plain
-// state cell so setCurrentFile merges are observable through the returned currentFile.
-jest.mock('../useFile', () => {
-	const { useState } = require('react');
-	return {
-		useFile: (file: IAttachment) => {
-			const [current, setCurrent] = useState(file);
-			const manage = (partial: Partial<IAttachment>) => setCurrent((prev: IAttachment) => ({ ...prev, ...partial }));
-			return [current, manage];
-		}
-	};
-});
-
 const mockDownloadMediaFile = downloadMediaFile as jest.Mock;
 const mockGetMediaCache = getMediaCache as jest.Mock;
 const mockIsDownloadActive = isDownloadActive as jest.Mock;
@@ -101,7 +88,14 @@ const renderMediaHook = ({
 			</MessageRoomProvider>
 		</Provider>
 	);
-	return renderHook(() => useMediaAutoDownload({ file, author, showAttachment }), { wrapper });
+	return renderHook(
+		(props: { file: IAttachment; author?: IUserMessage; showAttachment?: (file: IAttachment) => void }) =>
+			useMediaAutoDownload(props),
+		{
+			wrapper,
+			initialProps: { file, author, showAttachment }
+		}
+	);
 };
 
 describe('useMediaAutoDownload', () => {
@@ -172,6 +166,17 @@ describe('useMediaAutoDownload', () => {
 			expect(result.current.currentFile.title_link).toBe('file://cache');
 		});
 
+		it('keeps the local title_link when the file prop changes back to the remote url', async () => {
+			mockGetMediaCache.mockResolvedValue({ exists: true, uri: 'file://cache' });
+			const { result, rerender } = renderMediaHook({ file: { image_url: '/img', title: 'original.png' } });
+			await waitFor(() => expect(result.current.status).toBe('downloaded'));
+
+			rerender({ file: { image_url: '/img', title: 'renamed.png', title_link: '/remote' } });
+
+			expect(result.current.currentFile.title).toBe('renamed.png');
+			expect(result.current.currentFile.title_link).toBe('file://cache');
+		});
+
 		it('resumes an active download by registering the download listener and showing loading', async () => {
 			mockIsDownloadActive.mockReturnValue(true);
 			const { result } = renderMediaHook({ file: { image_url: '/img' } });

app/containers/message/hooks/useMediaAutoDownload.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useReducer } from 'react';
+import { useCallback, useEffect, useReducer, useState } from 'react';
 
 import { type IAttachment, type IUserMessage } from '../../../definitions';
 import { isImageBase64 } from '../../../lib/methods/isImageBase64';
@@ -15,7 +15,6 @@ import { emitter } from '../../../lib/methods/helpers/emitter';
 import { formatAttachmentUrl } from '../../../lib/methods/helpers/formatAttachmentUrl';
 import { useBaseUrl, useMessageUser } from '../stores/MessageRoomStore';
 import { useMessageId } from '../stores/MessageStore';
-import { useFile } from './useFile';
 
 const getFileType = (file: IAttachment): MediaTypes | null => {
 	if (file.image_url) {
@@ -80,7 +79,9 @@ export const useMediaAutoDownload = ({
 	const baseUrl = useBaseUrl();
 	const user = useMessageUser();
 	const [status, dispatchDownloadEvent] = useReducer(downloadStatusReducer, 'to-download');
-	const [currentFile, setCurrentFile] = useFile(file, id ?? '');
+	// Local overrides (downloaded uri, decrypted state) win over the file prop, which may still carry the remote url
+	const [fileOverrides, setFileOverrides] = useState<Partial<IAttachment> | null>(null);
+	const currentFile = fileOverrides ? { ...file, ...fileOverrides } : file;
 	const originalUrl = getOriginalURL(file);
 	const url = formatAttachmentUrl(
 		file.title_link || getFileProperty(currentFile, fileType, 'url'),
@@ -152,17 +153,13 @@ export const useMediaAutoDownload = ({
 	};
 
 	const updateCurrentFile = (uri: string) => {
-		setCurrentFile({
-			title_link: uri
-		});
+		setFileOverrides(prev => ({ ...prev, title_link: uri }));
 		dispatchDownloadEvent('download_succeeded');
 	};
 
 	const setDecrypted = () => {
 		if (isEncrypted) {
-			setCurrentFile({
-				e2e: 'done'
-			});
+			setFileOverrides(prev => ({ ...prev, e2e: 'done' }));
 		}
 	};
 

app/lib/methods/handleMediaDownload.test.ts

@@ -1,4 +1,4 @@
-import { getFilename, matchDownloadUrl, persistMessage } from './handleMediaDownload';
+import { getFilePath, getFilename, matchDownloadUrl, persistMessage } from './handleMediaDownload';
 import database from '../database';
 import { getMessageById } from '../database/services/Message';
 import { getThreadById } from '../database/services/Thread';
@@ -33,6 +33,22 @@ jest.mock('../database/services/ThreadMessage', () => ({
 	getThreadMessageById: jest.fn()
 }));
 
+jest.mock('../store/auxStore', () => ({
+	store: { getState: () => ({ server: { server: 'https://server.com' } }) }
+}));
+
+describe('getFilePath', () => {
+	it('derives the cache filename from the unencoded url', () => {
+		expect(
+			getFilePath({
+				type: 'video',
+				mimeType: 'video/quicktime',
+				urlToCache: 'https://server.com/file-upload/abc/Screen Recording.mov'
+			})
+		).toContain('/Screen_Recording.mov');
+	});
+});
+
 describe('matchDownloadUrl', () => {
 	it('matches when downloadUrl contains image_url', () => {
 		expect(
@@ -67,6 +83,15 @@ describe('matchDownloadUrl', () => {
 			matchDownloadUrl({ image_url: '/file-upload/abc/photo.jpg' }, 'https://server.com/file-upload/abc/audio.mp3')
 		).toBeFalsy();
 	});
+
+	it('matches an attachment url with a space against the download url', () => {
+		expect(
+			matchDownloadUrl(
+				{ video_url: '/file-upload/abc/Screen Recording.mov' },
+				'https://server.com/file-upload/abc/Screen Recording.mov'
+			)
+		).toBeTruthy();
+	});
 });
 
 describe('Test the getFilename', () => {

app/lib/methods/helpers/__tests__/formatAttachmentUrl.test.ts

@@ -0,0 +1,61 @@
+import { encodeAttachmentUrl } from '../formatAttachmentUrl';
+
+describe('encodeAttachmentUrl', () => {
+	it('encodes an unencoded path', () => {
+		expect(encodeAttachmentUrl('https://open.rocket.chat/file-upload/1/Screen Recording.mov')).toBe(
+			'https://open.rocket.chat/file-upload/1/Screen%20Recording.mov'
+		);
+	});
+
+	it('leaves an already-encoded path untouched', () => {
+		expect(encodeAttachmentUrl('https://open.rocket.chat/file-upload/1/Screen%20Recording.mov')).toBe(
+			'https://open.rocket.chat/file-upload/1/Screen%20Recording.mov'
+		);
+	});
+
+	it('leaves an already-escaped reserved character in the path', () => {
+		expect(encodeAttachmentUrl('https://open.rocket.chat/file-upload/1/a%20video%20%232.mov')).toBe(
+			'https://open.rocket.chat/file-upload/1/a%20video%20%232.mov'
+		);
+	});
+
+	// Known limitation, not a regression: `#` is the fragment delimiter per the URL spec, so a raw one ends the
+	// path and the rest becomes the fragment — which HTTP drops, so the server sees a truncated path. The previous
+	// encodeURI behaved identically (it leaves `#` unescaped too). Only reachable if the server sends a raw `#`.
+	it('treats a raw reserved `#` in the path as a fragment', () => {
+		expect(encodeAttachmentUrl('https://open.rocket.chat/file-upload/1/a video #2.mov')).toBe(
+			'https://open.rocket.chat/file-upload/1/a%20video%20#2.mov'
+		);
+	});
+
+	it('preserves the query string', () => {
+		expect(encodeAttachmentUrl('https://open.rocket.chat/file-upload/1/Screen Recording.mov?rc_token=abc&rc_uid=123')).toBe(
+			'https://open.rocket.chat/file-upload/1/Screen%20Recording.mov?rc_token=abc&rc_uid=123'
+		);
+	});
+
+	// WHATWG URL passes a malformed escape through rather than throwing, so this exercises the try branch.
+	it('returns the raw url when it has a malformed escape', () => {
+		expect(encodeAttachmentUrl('https://open.rocket.chat/file-upload/1/%ZZ.mov')).toBe(
+			'https://open.rocket.chat/file-upload/1/%ZZ.mov'
+		);
+	});
+
+	// A non-absolute url is what actually throws — reachable when the server/CDN prefix is empty.
+	it('returns the raw url when it is not absolute', () => {
+		expect(encodeAttachmentUrl('/file-upload/1/Screen Recording.mov')).toBe('/file-upload/1/Screen Recording.mov');
+	});
+
+	// Cache filenames keep unicode letters, so local uris need encoding before they reach the native players.
+	it('encodes unicode letters in a local file uri', () => {
+		expect(encodeAttachmentUrl('file:///var/app/Documents/server/msg1/vídeo.mov')).toBe(
+			'file:///var/app/Documents/server/msg1/v%C3%ADdeo.mov'
+		);
+	});
+
+	it('leaves an already-encoded local file uri untouched', () => {
+		expect(encodeAttachmentUrl('file:///var/app/Documents/server/msg1/v%C3%ADdeo.mov')).toBe(
+			'file:///var/app/Documents/server/msg1/v%C3%ADdeo.mov'
+		);
+	});
+});

app/lib/methods/helpers/formatAttachmentUrl.ts

@@ -10,13 +10,21 @@
 	return urlObj.toString();
 }
 
+export const encodeAttachmentUrl = (url: string): string => {
+	try {
+		return new URL(url).toString();
+	} catch {
+		return url;
+	}
+};
+
 export const formatAttachmentUrl = (
 	attachmentUrl: string | undefined,
 	userId: string,
 	token: string,
 	server: string,
 	_originalUrl?: string | null
 ): string => {
 	const protectFiles = store.getState().settings.FileUpload_ProtectFiles;
 
 	if ((attachmentUrl && isImageBase64(attachmentUrl)) || attachmentUrl?.startsWith('file://')) {
@@ -28,7 +36,7 @@
 		}
 
 		if (attachmentUrl.includes('rc_token')) {
-			return encodeURI(attachmentUrl);
+			return encodeAttachmentUrl(attachmentUrl);
 		}
 
 		if (protectFiles) return setParamInUrl({ url: attachmentUrl, token, userId });

app/views/AttachmentView.test.tsx

@@ -96,6 +96,7 @@ jest.mock('../lib/hooks/useAppSelector', () => ({
 
 jest.mock('../lib/methods/helpers', () => ({
 	formatAttachmentUrl: (url: string) => url,
+	encodeAttachmentUrl: (url: string) => url,
 	isAndroid: false,
 	showErrorAlert: jest.fn()
 }));