Media gallery - support for files and voice messages (#3605)

* Move the voice message views to where they belong
* Add separate struct for each media events timeline view
* Add support for all the different media gallery message types and get the files section working

ElementX.xcodeproj/project.pbxproj

@@ -58,6 +58,7 @@
 		077CB230153E072C94B1E6C3 /* AppAppearance.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3D65BCC659FD9087E49B3C25 /* AppAppearance.swift */; };
 		07CC13C5729C24255348CBBD /* ElementCallWidgetDriver.swift in Sources */ = {isa = PBXBuildFile; fileRef = 309AD8BAE6437C31BA7157BF /* ElementCallWidgetDriver.swift */; };
 		07F6382E29845D235BFA3308 /* DeactivateAccountScreenModels.swift in Sources */ = {isa = PBXBuildFile; fileRef = BE78CAD0B964C66FD06EF83E /* DeactivateAccountScreenModels.swift */; };
+		08547E55DD3686A84550996D /* SeparatorMediaEventsTimelineView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 13F354AD441E2FD83DED89AF /* SeparatorMediaEventsTimelineView.swift */; };
 		086D01E79C8E8D3F004FAF21 /* AudioPlayerProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = AC9104846487244648D32C6D /* AudioPlayerProtocol.swift */; };
 		08CB4BD12CEEDE6AAE4A18DD /* WindowManager.swift in Sources */ = {isa = PBXBuildFile; fileRef = 035177BCD8E8308B098AC3C2 /* WindowManager.swift */; };
 		095C0ACFC234E0550A6404C5 /* AppCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8FC803282F9268D49F4ABF14 /* AppCoordinator.swift */; };
@@ -99,6 +100,7 @@
 		1146E9EDCF8344F7D6E0D553 /* MockCoder.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0376C429FAB1687C3D905F3E /* MockCoder.swift */; };
 		119AE9A3FC6E0606C1146528 /* NotificationSettingsEditScreenRoomCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = C97F8963B14EB0AF3940DDBF /* NotificationSettingsEditScreenRoomCell.swift */; };
 		11A6B8E3CBDBF0A4107FF4CE /* OnboardingFlowCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = C3285BD95B564CA2A948E511 /* OnboardingFlowCoordinator.swift */; };
+		1224084B7E289E0830BA2C54 /* VoiceMessageRoomTimelineView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B6A293D06BAB2B7A17D9314B /* VoiceMessageRoomTimelineView.swift */; };
 		126EE01D8BEAEF26105D83C5 /* RoomDetailsScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = E1A5FEF17ED7E6176D922D4F /* RoomDetailsScreen.swift */; };
 		128FFD8A3D85845F9A927F47 /* PollRoomTimelineView.swift in Sources */ = {isa = PBXBuildFile; fileRef = AF8548D48512127CCC17C520 /* PollRoomTimelineView.swift */; };
 		12C867E85E6D12EEDFD0B127 /* CustomStringConvertible.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96C4762F8D6112E43117DB2F /* CustomStringConvertible.swift */; };
@@ -330,6 +332,7 @@
 		43F35A7E5703D64DB0519C59 /* ServerSelectionScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = CD469F7513574341181F7EAA /* ServerSelectionScreen.swift */; };
 		440123E29E2F9B001A775BBE /* TimelineItemProxy.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2D505843AB66822EB91F0DF0 /* TimelineItemProxy.swift */; };
 		44121202B4A260C98BF615A7 /* RoomMembersListScreenUITests.swift in Sources */ = {isa = PBXBuildFile; fileRef = C5B7A755E985FA14469E86B2 /* RoomMembersListScreenUITests.swift */; };
+		446BCD2D0AE27E0CFD1BDC8F /* ImageMediaEventsTimelineView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1FF584D757E768EA7776A532 /* ImageMediaEventsTimelineView.swift */; };
 		44BDD670FF9095ACE240A3A2 /* VoiceMessageMediaManagerTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = AC4F10BDD56FA77FEC742333 /* VoiceMessageMediaManagerTests.swift */; };
 		44DA28B1E1F9C97C5795F7B3 /* AppLockSetupUITests.swift in Sources */ = {isa = PBXBuildFile; fileRef = E8A1BBEF7318CA6B6ACCF4AE /* AppLockSetupUITests.swift */; };
 		44F0E1B576C7599DF8022071 /* WysiwygComposer in Frameworks */ = {isa = PBXBuildFile; productRef = CA07D57389DACE18AEB6A5E2 /* WysiwygComposer */; };
@@ -416,6 +419,7 @@
 		558F37B1A8F2C4CC9B1ACEDA /* Compound in Frameworks */ = {isa = PBXBuildFile; productRef = 3262F08E1C3483C22A7A319F /* Compound */; };
 		55CDD3968D95D1A820B5491E /* PlaceholderAvatarImage.swift in Sources */ = {isa = PBXBuildFile; fileRef = C705E605EF57C19DBE86FFA1 /* PlaceholderAvatarImage.swift */; };
 		55D18AA4F4A2257642EBDB94 /* GlobalSearchScreenViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 38354164AF59C5006CD05878 /* GlobalSearchScreenViewModel.swift */; };
+		55DF6DEEF2CEEF40F84B53B0 /* VoiceMessageRoomPlaybackView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9E3B41C36800DD4558D7BDA7 /* VoiceMessageRoomPlaybackView.swift */; };
 		562EFB9AB62B38830D9AA778 /* TimelineMediaFrame.swift in Sources */ = {isa = PBXBuildFile; fileRef = 933B074F006F8E930DB98B4E /* TimelineMediaFrame.swift */; };
 		564910A38858306301C1C21E /* DeactivateAccountScreenCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8A1009E4A78F86DA42E1EAF0 /* DeactivateAccountScreenCoordinator.swift */; };
 		564BF06B3E93D6DD55F903B2 /* CreateRoomCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = C618CA2B6C8758B06C88013C /* CreateRoomCoordinator.swift */; };
@@ -440,6 +444,7 @@
 		5BC6C4ADFE7F2A795ECDE130 /* SecureBackupKeyBackupScreenCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4B2D4EEBE8C098BBADD10939 /* SecureBackupKeyBackupScreenCoordinator.swift */; };
 		5C02841B2A86327B2C377682 /* NotificationConstants.swift in Sources */ = {isa = PBXBuildFile; fileRef = C830A64609CBD152F06E0457 /* NotificationConstants.swift */; };
 		5C164551F7D26E24F09083D3 /* StaticLocationScreenViewModelProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = C616D90B1E2F033CAA325439 /* StaticLocationScreenViewModelProtocol.swift */; };
+		5C33976A720B64094CBC56B1 /* VideoMediaEventsTimelineView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2B1FB56520A847DD2532D5C8 /* VideoMediaEventsTimelineView.swift */; };
 		5C61810ED7B7CB48346B1B9D /* portrait_test_video.mp4 in Resources */ = {isa = PBXBuildFile; fileRef = E5E7D4EE7CA295E5039FDA21 /* portrait_test_video.mp4 */; };
 		5C8804B4F25903516E2DAB81 /* RoomInfoProxy.swift in Sources */ = {isa = PBXBuildFile; fileRef = 40A66E8BC8D9AE4A08EFB2DF /* RoomInfoProxy.swift */; };
 		5D27B6537591471A42C89027 /* EmoteRoomTimelineItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 450E04B2A976CC4C8CC1807C /* EmoteRoomTimelineItem.swift */; };
@@ -660,7 +665,6 @@
 		874FEFB9D4A4AF447E0E086E /* AuthenticationStartScreenViewModelProtocol.swift in Sources */ = {isa = PBXBuildFile; fileRef = E0F7CCC4A9D1927223F559D5 /* AuthenticationStartScreenViewModelProtocol.swift */; };
 		877D3CE8680536DB430DE6A2 /* TimelineItemIdentifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = E48C91C8BE55CAE1A3DBC3BC /* TimelineItemIdentifier.swift */; };
 		878070573C7BF19E735707B4 /* RoomTimelineItemProperties.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5DE8D25D6A91030175D52A20 /* RoomTimelineItemProperties.swift */; };
-		87B4E59A4467F8EC75F82372 /* VoiceMessageRoomTimelineView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B70A50C41C5871B4DB905E7E /* VoiceMessageRoomTimelineView.swift */; };
 		87CEA3E07B602705BC2D2A20 /* ClientBuilderHook.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7AC0CD1CAFD3F8B057F9AEA5 /* ClientBuilderHook.swift */; };
 		8810A2A30A68252EBB54EE05 /* HomeScreenModels.swift in Sources */ = {isa = PBXBuildFile; fileRef = 71BC7CA1BC1041E93077BBA1 /* HomeScreenModels.swift */; };
 		88356DE7F2AD243AB10C7B7A /* Signposter.swift in Sources */ = {isa = PBXBuildFile; fileRef = 752A0EB49BF5BCEA37EDF7A3 /* Signposter.swift */; };
@@ -829,7 +833,6 @@
 		A851635B3255C6DC07034A12 /* RoomScreenCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = B8108C8F0ACF6A7EB72D0117 /* RoomScreenCoordinator.swift */; };
 		A8FA7671948E3DF27F320026 /* BugReportFlowCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7367B3B9A8CAF902220F31D1 /* BugReportFlowCoordinator.swift */; };
 		A93661C962B12942C08864B6 /* SwiftOGG in Frameworks */ = {isa = PBXBuildFile; productRef = 391D11F92DFC91666AA1503F /* SwiftOGG */; };
-		A9482B967FC85DA611514D35 /* VoiceMessageRoomPlaybackView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3CCD41CD67DB5DA0D436BFE9 /* VoiceMessageRoomPlaybackView.swift */; };
 		A969147E0EEE0E27EE226570 /* MediaUploadPreviewScreenViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 47F29139BC2A804CE5E0757E /* MediaUploadPreviewScreenViewModel.swift */; };
 		A975D60EA49F6AF73308809F /* RoomMembersListScreenMemberCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = CC03209FDE8CE0810617BFFF /* RoomMembersListScreenMemberCell.swift */; };
 		A9A5801D5EE3D4D91F6DDADB /* AnalyticsSettingsScreenViewModelTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 58C2527813FDAE23E72A9063 /* AnalyticsSettingsScreenViewModelTests.swift */; };
@@ -1397,6 +1400,7 @@
 		136F80A613B55BDD071DCEA5 /* JoinRoomScreenModels.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = JoinRoomScreenModels.swift; sourceTree = "<group>"; };
 		13802897C7AFA360EA74C0B0 /* en */ = {isa = PBXFileReference; lastKnownFileType = text.plist.stringsdict; name = en; path = en.lproj/Localizable.stringsdict; sourceTree = "<group>"; };
 		13BE9781699FB510E9263192 /* AppSettingsHook.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppSettingsHook.swift; sourceTree = "<group>"; };
+		13F354AD441E2FD83DED89AF /* SeparatorMediaEventsTimelineView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SeparatorMediaEventsTimelineView.swift; sourceTree = "<group>"; };
 		1423AB065857FA546444DB15 /* NotificationManager.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NotificationManager.swift; sourceTree = "<group>"; };
 		1454CF3AABD242F55C8A2615 /* InviteUsersScreenModels.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InviteUsersScreenModels.swift; sourceTree = "<group>"; };
 		1511B1DCECC0DC75EB267328 /* KnockRequestsListScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = KnockRequestsListScreen.swift; sourceTree = "<group>"; };
@@ -1455,6 +1459,7 @@
 		1F7C6DDBB5D12F6EF6A3D6E1 /* CollapsibleReactionLayout.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CollapsibleReactionLayout.swift; sourceTree = "<group>"; };
 		1FAF8C2226A57B9AB7446B31 /* AppLockSetupPINScreenCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppLockSetupPINScreenCoordinator.swift; sourceTree = "<group>"; };
 		1FD51B4D5173F7FC886F5360 /* NoticeRoomTimelineItemContent.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NoticeRoomTimelineItemContent.swift; sourceTree = "<group>"; };
+		1FF584D757E768EA7776A532 /* ImageMediaEventsTimelineView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ImageMediaEventsTimelineView.swift; sourceTree = "<group>"; };
 		200626E8353AB2729444F991 /* preview_image.jpg */ = {isa = PBXFileReference; lastKnownFileType = image.jpeg; path = preview_image.jpg; sourceTree = "<group>"; };
 		201305507D7DFD16E544563A /* EmojiLoaderProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EmojiLoaderProtocol.swift; sourceTree = "<group>"; };
 		203D1ACC20287F8986C959D3 /* target.yml */ = {isa = PBXFileReference; lastKnownFileType = text.yaml; path = target.yml; sourceTree = "<group>"; };
@@ -1518,6 +1523,7 @@
 		2AE807361805463F5AEDD1CA /* VoiceMessagePreviewComposer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VoiceMessagePreviewComposer.swift; sourceTree = "<group>"; };
 		2AE83A3DD63BCFBB956FE5CB /* nl */ = {isa = PBXFileReference; lastKnownFileType = text.plist.stringsdict; name = nl; path = nl.lproj/Localizable.stringsdict; sourceTree = "<group>"; };
 		2AF715D4FD4710EBB637D661 /* SettingsScreenViewModelProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SettingsScreenViewModelProtocol.swift; sourceTree = "<group>"; };
+		2B1FB56520A847DD2532D5C8 /* VideoMediaEventsTimelineView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VideoMediaEventsTimelineView.swift; sourceTree = "<group>"; };
 		2BA894BC09972DC45E497D37 /* TimelineInteractionHandler.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TimelineInteractionHandler.swift; sourceTree = "<group>"; };
 		2BB385E148DE55C85C0A02D6 /* SoftLogoutScreenModels.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SoftLogoutScreenModels.swift; sourceTree = "<group>"; };
 		2BDB3E65A79779EDA5D33D8A /* AudioPlayerState.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AudioPlayerState.swift; sourceTree = "<group>"; };
@@ -1589,7 +1595,6 @@
 		3C368CAB3063EF275357ECD4 /* LoginScreenViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoginScreenViewModel.swift; sourceTree = "<group>"; };
 		3C3ADF21BE301D0DA48F2A7E /* ShareExtensionView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShareExtensionView.swift; sourceTree = "<group>"; };
 		3C3E67E09FE5A35D73818C39 /* AppLockScreenModels.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppLockScreenModels.swift; sourceTree = "<group>"; };
-		3CCD41CD67DB5DA0D436BFE9 /* VoiceMessageRoomPlaybackView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VoiceMessageRoomPlaybackView.swift; sourceTree = "<group>"; };
 		3CCE3636E3D01477C8B2E9D0 /* ReportContentScreenModels.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ReportContentScreenModels.swift; sourceTree = "<group>"; };
 		3CFD5EB0B0EEA4549FB49784 /* SettingsScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SettingsScreen.swift; sourceTree = "<group>"; };
 		3D1D4A6D451F43A03CACD01D /* PINTextField.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PINTextField.swift; sourceTree = "<group>"; };
@@ -2030,6 +2035,7 @@
 		9C7F7DE62D33C6A26CBFCD72 /* IntegrationTests.xctest */ = {isa = PBXFileReference; includeInIndex = 0; lastKnownFileType = wrapper.cfbundle; path = IntegrationTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		9CE3C90E487B255B735D73C8 /* RoomScreenViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomScreenViewModel.swift; sourceTree = "<group>"; };
 		9CF1EE0AA78470C674554262 /* PillTextAttachment.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PillTextAttachment.swift; sourceTree = "<group>"; };
+		9E3B41C36800DD4558D7BDA7 /* VoiceMessageRoomPlaybackView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VoiceMessageRoomPlaybackView.swift; sourceTree = "<group>"; };
 		9E6D88E8AFFBF2C1D589C0FA /* UIConstants.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UIConstants.swift; sourceTree = "<group>"; };
 		9E8F4D7D61B80EBD5CB92F8A /* KnockedRoomProxyMock.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = KnockedRoomProxyMock.swift; sourceTree = "<group>"; };
 		9EB9BA2F30EB8C33226D8FF1 /* UserSessionStoreMock.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserSessionStoreMock.swift; sourceTree = "<group>"; };
@@ -2148,9 +2154,9 @@
 		B63B69F9A2BC74DD40DC75C8 /* AdvancedSettingsScreenViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AdvancedSettingsScreenViewModel.swift; sourceTree = "<group>"; };
 		B6404166CBF5CC88673FF9E2 /* RoomDetails.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomDetails.swift; sourceTree = "<group>"; };
 		B655A536341D2695158C6664 /* AuthenticationClientBuilderFactory.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AuthenticationClientBuilderFactory.swift; sourceTree = "<group>"; };
+		B6A293D06BAB2B7A17D9314B /* VoiceMessageRoomTimelineView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VoiceMessageRoomTimelineView.swift; sourceTree = "<group>"; };
 		B6E4AB573FAEBB7B853DD04C /* AppHooks.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppHooks.swift; sourceTree = "<group>"; };
 		B6E89E530A8E92EC44301CA1 /* Bundle.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Bundle.swift; sourceTree = "<group>"; };
-		B70A50C41C5871B4DB905E7E /* VoiceMessageRoomTimelineView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VoiceMessageRoomTimelineView.swift; sourceTree = "<group>"; };
 		B73587C2E3CF5998361AE516 /* HomeScreenRoomTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HomeScreenRoomTests.swift; sourceTree = "<group>"; };
 		B746EFA112532A7B701FB914 /* RoomNotificationSettingsCustomSectionView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RoomNotificationSettingsCustomSectionView.swift; sourceTree = "<group>"; };
 		B7884BD256C091EB511B2EDF /* AppLockSetupPINScreenViewModelProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppLockSetupPINScreenViewModelProtocol.swift; sourceTree = "<group>"; };
@@ -3305,15 +3311,6 @@
 			path = Helpers;
 			sourceTree = "<group>";
 		};
-		3A542DF1C3BB67D829DFDC40 /* VoiceMessages */ = {
-			isa = PBXGroup;
-			children = (
-				3CCD41CD67DB5DA0D436BFE9 /* VoiceMessageRoomPlaybackView.swift */,
-				B70A50C41C5871B4DB905E7E /* VoiceMessageRoomTimelineView.swift */,
-			);
-			path = VoiceMessages;
-			sourceTree = "<group>";
-		};
 		3AD37D7DDF9904587601239D /* AppLockScreen */ = {
 			isa = PBXGroup;
 			children = (
@@ -3677,6 +3674,16 @@
 			path = ItemMenu;
 			sourceTree = "<group>";
 		};
+		50D53998001EC408A51D6509 /* TimelineViews */ = {
+			isa = PBXGroup;
+			children = (
+				1FF584D757E768EA7776A532 /* ImageMediaEventsTimelineView.swift */,
+				13F354AD441E2FD83DED89AF /* SeparatorMediaEventsTimelineView.swift */,
+				2B1FB56520A847DD2532D5C8 /* VideoMediaEventsTimelineView.swift */,
+			);
+			path = TimelineViews;
+			sourceTree = "<group>";
+		};
 		52AA75722911233E40A3B366 /* Scripts */ = {
 			isa = PBXGroup;
 			children = (
@@ -4468,7 +4475,6 @@
 				F348B5F2C12F9D4F4B4D3884 /* VideoRoomTimelineItem.swift */,
 				8C8616254EE40CA8BA5E9BC2 /* VideoRoomTimelineItemContent.swift */,
 				D529B976F8B2AA654D923422 /* VoiceMessageRoomTimelineItem.swift */,
-				3A542DF1C3BB67D829DFDC40 /* VoiceMessages */,
 			);
 			path = Messages;
 			sourceTree = "<group>";
@@ -5310,6 +5316,7 @@
 				44ECC9D66400727DFFEE12E8 /* TimelineStartRoomTimelineView.swift */,
 				C9E535B3388755B65C34CD10 /* UnsupportedRoomTimelineView.swift */,
 				ED0CBEAB5F796BEFBAF7BB6A /* VideoRoomTimelineView.swift */,
+				B6A293D06BAB2B7A17D9314B /* VoiceMessageRoomTimelineView.swift */,
 			);
 			path = TimelineItemViews;
 			sourceTree = "<group>";
@@ -5435,6 +5442,7 @@
 			isa = PBXGroup;
 			children = (
 				002399C6CB875C4EBB01CBC0 /* MediaEventsTimelineScreen.swift */,
+				50D53998001EC408A51D6509 /* TimelineViews */,
 			);
 			path = View;
 			sourceTree = "<group>";
@@ -5832,6 +5840,7 @@
 				D53FCCE44F96E0BC411A6CF0 /* TimelineSenderAvatarView.swift */,
 				93C713D124FE915ABF47A6B7 /* TimelineView.swift */,
 				81F0325E252B057FAEEE1B2D /* TypingIndicatorView.swift */,
+				9E3B41C36800DD4558D7BDA7 /* VoiceMessageRoomPlaybackView.swift */,
 				505AE6F89590187813390D12 /* ItemMenu */,
 				C13DBC8C4A879A5A9C781BBD /* Polls */,
 				B470504BE2DC95FAC94FDD79 /* ReadReceipts */,
@@ -6927,6 +6936,7 @@
 				AADE7C2497A7B55D8BED7BD6 /* IdentityConfirmedScreenViewModelProtocol.swift in Sources */,
 				FFD52DCDA6962055A363CC8F /* IdentityResetHandleSDKMock.swift in Sources */,
 				BA31448FBD9697F8CB9A83CD /* ImageCache.swift in Sources */,
+				446BCD2D0AE27E0CFD1BDC8F /* ImageMediaEventsTimelineView.swift in Sources */,
 				7CD16990BA843BE9ED639129 /* ImageRoomTimelineItem.swift in Sources */,
 				B796A25F282C0A340D1B9C12 /* ImageRoomTimelineItemContent.swift in Sources */,
 				E2D57361B835E4D2230960E6 /* ImageRoomTimelineView.swift in Sources */,
@@ -7304,6 +7314,7 @@
 				DA7E867F5EAFF8E20B2EE3B6 /* SecureBackupScreenModels.swift in Sources */,
 				7BF368A78E6D9AFD222F25AF /* SecureBackupScreenViewModel.swift in Sources */,
 				AC90434798E7894370E80E66 /* SecureBackupScreenViewModelProtocol.swift in Sources */,
+				08547E55DD3686A84550996D /* SeparatorMediaEventsTimelineView.swift in Sources */,
 				14E99D27628B1A6F0CB46FEA /* SeparatorRoomTimelineItem.swift in Sources */,
 				5341D48F833E3E30F16FA2A3 /* SeparatorRoomTimelineView.swift in Sources */,
 				2E8C6672D0EE7D5B1BEDB8E2 /* ServerConfirmationScreen.swift in Sources */,
@@ -7472,6 +7483,7 @@
 				7E91BAC17963ED41208F489B /* UserSessionStore.swift in Sources */,
 				79D57E9AE03A2DC689D14EA2 /* UserSessionStoreMock.swift in Sources */,
 				AC69B6DF15FC451AB2945036 /* UserSessionStoreProtocol.swift in Sources */,
+				5C33976A720B64094CBC56B1 /* VideoMediaEventsTimelineView.swift in Sources */,
 				F07D88421A9BC4D03D4A5055 /* VideoRoomTimelineItem.swift in Sources */,
 				1A83DD22F3E6F76B13B6E2F9 /* VideoRoomTimelineItemContent.swift in Sources */,
 				2CA61BB208CD82EBDB58CD13 /* VideoRoomTimelineView.swift in Sources */,
@@ -7488,9 +7500,9 @@
 				C405528EB4BBEA93579050EE /* VoiceMessageRecordingButton.swift in Sources */,
 				E0C167D41A48EDB30B447DE3 /* VoiceMessageRecordingComposer.swift in Sources */,
 				756EA0D663261889EF64E6D4 /* VoiceMessageRecordingView.swift in Sources */,
-				A9482B967FC85DA611514D35 /* VoiceMessageRoomPlaybackView.swift in Sources */,
+				55DF6DEEF2CEEF40F84B53B0 /* VoiceMessageRoomPlaybackView.swift in Sources */,
 				024E70451A7CD9E4E034D8A9 /* VoiceMessageRoomTimelineItem.swift in Sources */,
-				87B4E59A4467F8EC75F82372 /* VoiceMessageRoomTimelineView.swift in Sources */,
+				1224084B7E289E0830BA2C54 /* VoiceMessageRoomTimelineView.swift in Sources */,
 				CA12AE0DCD57D49CD96C699A /* WaveformCursorView.swift in Sources */,
 				63CDC201A5980F304F6D0A1C /* WaveformInteractionModifier.swift in Sources */,
 				B773ACD8881DB18E876D950C /* WaveformSource.swift in Sources */,

ElementX/Sources/Screens/MediaEventsTimelineScreen/MediaEventsTimelineScreenModels.swift

@@ -24,6 +24,8 @@ struct MediaEventsTimelineScreenViewState: BindableState {
     var isBackPaginating = false
     var groups = [MediaEventsTimelineGroup]()
     
+    var activeTimelineContextProvider: (() -> TimelineViewModel.Context)!
+    
     var bindings: MediaEventsTimelineScreenViewStateBindings
 }
 

ElementX/Sources/Screens/MediaEventsTimelineScreen/MediaEventsTimelineScreenViewModel.swift

@@ -42,6 +42,12 @@ class MediaEventsTimelineScreenViewModel: MediaEventsTimelineScreenViewModelType
         
         super.init(initialViewState: .init(bindings: .init(screenMode: screenMode)), mediaProvider: mediaProvider)
         
+        state.activeTimelineContextProvider = { [weak self] in
+            guard let self else { fatalError() }
+            
+            return activeTimelineViewModel.context
+        }
+        
         mediaTimelineViewModel.context.$viewState.sink { [weak self] timelineViewState in
             guard let self, state.bindings.screenMode == .media else {
                 return

ElementX/Sources/Screens/MediaEventsTimelineScreen/View/MediaEventsTimelineScreen.swift

@@ -12,7 +12,7 @@ struct MediaEventsTimelineScreen: View {
     @ObservedObject var context: MediaEventsTimelineScreenViewModel.Context
     
     var body: some View {
-        content
+        mainContent
             .navigationBarTitleDisplayMode(.inline)
             .background(.compound.bgCanvasDefault)
             // Doesn't play well with the transformed scrollView
@@ -31,6 +31,8 @@ struct MediaEventsTimelineScreen: View {
                 }
             }
             .timelineMediaQuickLook(viewModel: $context.mediaPreviewViewModel)
+            .environmentObject(context.viewState.activeTimelineContextProvider())
+            .environment(\.timelineContext, context.viewState.activeTimelineContextProvider())
     }
     
     // The scale effects do the following:
@@ -39,32 +41,16 @@ struct MediaEventsTimelineScreen: View {
     // * flip the grid vertically to counteract the scroll view
     // but also horizontally to preserve the corect item order
     // * flip the items on both axes have them render correctly
-    @ViewBuilder
-    private var content: some View {
+    private var mainContent: some View {
         ScrollView {
             Group {
-                let columns = [GridItem(.adaptive(minimum: 80, maximum: 150), spacing: 1)]
-                LazyVGrid(columns: columns, alignment: .center, spacing: 1) {
-                    ForEach(context.viewState.groups) { group in
-                        Section(footer: sectionFooterForGroup(group)) {
-                            ForEach(group.items) { item in
-                                Button {
-                                    context.send(viewAction: .tappedItem(item))
-                                } label: {
-                                    Color.clear // Let the image aspect fill in place
-                                        .aspectRatio(1, contentMode: .fill)
-                                        .overlay {
-                                            viewForTimelineItem(item)
-                                        }
-                                        .clipped()
-                                        .scaleEffect(.init(width: -1, height: -1))
-                                }
-                            }
-                        }
-                    }
+                switch context.viewState.bindings.screenMode {
+                case .media:
+                    mediaContent
+                case .files:
+                    filesContent
                 }
-                .scaleEffect(.init(width: -1, height: 1))
-                
+            
                 header
             }
         }
@@ -74,6 +60,61 @@ struct MediaEventsTimelineScreen: View {
         }
     }
     
+    @ViewBuilder
+    private var mediaContent: some View {
+        let columns = [GridItem(.adaptive(minimum: 80, maximum: 150), spacing: 1)]
+        LazyVGrid(columns: columns, alignment: .center, spacing: 1) {
+            ForEach(context.viewState.groups) { group in
+                Section {
+                    ForEach(group.items) { item in
+                        Button {
+                            context.send(viewAction: .tappedItem(item))
+                        } label: {
+                            Color.clear // Let the image aspect fill in place
+                                .aspectRatio(1, contentMode: .fill)
+                                .overlay {
+                                    viewForTimelineItem(item)
+                                }
+                                .clipped()
+                                .scaleEffect(.init(width: -1, height: -1))
+                        }
+                    }
+                } footer: {
+                    // Use a footer as the header because the scrollView is flipped
+                    SeparatorMediaEventsTimelineView(group: group)
+                        .scaleEffect(.init(width: -1, height: -1))
+                }
+            }
+        }
+        .scaleEffect(.init(width: -1, height: 1))
+    }
+    
+    @ViewBuilder
+    private var filesContent: some View {
+        LazyVStack(alignment: .center, spacing: 16) {
+            ForEach(context.viewState.groups) { group in
+                Section {
+                    ForEach(group.items) { item in
+                        viewForTimelineItem(item)
+                            .scaleEffect(.init(width: 1, height: -1))
+                            .onTapGesture {
+                                context.send(viewAction: .tappedItem(item))
+                            }
+                            .accessibilityActions {
+                                Button(L10n.actionShow) {
+                                    context.send(viewAction: .tappedItem(item))
+                                }
+                            }
+                    }
+                } footer: {
+                    // Use a footer as the header because the scrollView is flipped
+                    SeparatorMediaEventsTimelineView(group: group)
+                        .scaleEffect(.init(width: 1, height: -1))
+                }
+            }
+        }
+    }
+    
     private var header: some View {
         // Needs to be wrapped in a LazyStack otherwise appearance calls don't trigger
         LazyVStack(spacing: 0) {
@@ -93,71 +134,25 @@ struct MediaEventsTimelineScreen: View {
         }
     }
     
-    @ViewBuilder
-    func sectionFooterForGroup(_ group: MediaEventsTimelineGroup) -> some View {
-        Text(group.title)
-            .font(.compound.bodySMSemibold)
-            .foregroundColor(.compound.textPrimary)
-            .frame(alignment: .center)
-            .scaleEffect(.init(width: -1, height: -1))
-            .padding(.vertical, 16)
-    }
-    
     @ViewBuilder
     func viewForTimelineItem(_ item: RoomTimelineItemViewState) -> some View {
         switch item.type {
         case .image(let timelineItem):
-            #warning("Make this work for gifs")
-            LoadableImage(mediaSource: timelineItem.content.thumbnailInfo?.source ?? timelineItem.content.imageInfo.source,
-                          mediaType: .timelineItem(uniqueID: timelineItem.id.uniqueID.id),
-                          blurhash: timelineItem.content.blurhash,
-                          size: timelineItem.content.thumbnailInfo?.size ?? timelineItem.content.imageInfo.size,
-                          mediaProvider: context.mediaProvider) {
-                placeholder
-            }
-            .mediaItemAspectRatio(imageInfo: timelineItem.content.thumbnailInfo ?? timelineItem.content.imageInfo)
+            ImageMediaEventsTimelineView(timelineItem: timelineItem)
         case .video(let timelineItem):
-            if let thumbnailSource = timelineItem.content.thumbnailInfo?.source {
-                LoadableImage(mediaSource: thumbnailSource,
-                              mediaType: .timelineItem(uniqueID: timelineItem.id.uniqueID.id),
-                              blurhash: timelineItem.content.blurhash,
-                              size: timelineItem.content.thumbnailInfo?.size,
-                              mediaProvider: context.mediaProvider) { imageView in
-                    imageView
-                        .overlay { playIcon }
-                } placeholder: {
-                    placeholder
-                }
-                .mediaItemAspectRatio(imageInfo: timelineItem.content.thumbnailInfo)
-            } else {
-                playIcon
-            }
+            VideoMediaEventsTimelineView(timelineItem: timelineItem)
+        case .file(let timelineItem):
+            FileRoomTimelineView(timelineItem: timelineItem)
+        case .audio(let timelineItem):
+            AudioRoomTimelineView(timelineItem: timelineItem)
+        case .voice(let timelineItem):
+            let defaultPlayerState = AudioPlayerState(id: .timelineItemIdentifier(timelineItem.id), title: L10n.commonVoiceMessage, duration: 0)
+            let playerState = context.viewState.activeTimelineContextProvider().viewState.audioPlayerStateProvider?(timelineItem.id) ?? defaultPlayerState
+            VoiceMessageRoomTimelineView(timelineItem: timelineItem, playerState: playerState)
         default:
             EmptyView()
         }
     }
-    
-    private var playIcon: some View {
-        Image(systemName: "play.circle.fill")
-            .resizable()
-            .frame(width: 50, height: 50)
-            .background(.ultraThinMaterial, in: Circle())
-            .foregroundColor(.white)
-    }
-    
-    private var placeholder: some View {
-        Rectangle()
-            .foregroundColor(.compound._bgBubbleIncoming)
-            .opacity(0.3)
-    }
-}
-
-extension View {
-    /// Constrains the max height of a media item in the timeline, whilst preserving its aspect ratio.
-    @ViewBuilder
-    func mediaItemAspectRatio(imageInfo: ImageInfoProxy?) -> some View {
-        aspectRatio(imageInfo?.aspectRatio, contentMode: .fill)
-    }
 }
 
 // MARK: - Previews

ElementX/Sources/Screens/MediaEventsTimelineScreen/View/TimelineViews/ImageMediaEventsTimelineView.swift

@@ -0,0 +1,83 @@
+//
+// Copyright 2022-2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import Compound
+import SwiftUI
+
+struct ImageMediaEventsTimelineView: View {
+    @Environment(\.timelineContext) private var context
+    let timelineItem: ImageRoomTimelineItem
+    
+    var body: some View {
+        loadableImage
+            .accessibilityElement(children: .ignore)
+            .accessibilityLabel(L10n.commonImage)
+    }
+    
+    @ViewBuilder
+    private var loadableImage: some View {
+        if timelineItem.content.contentType == .gif {
+            LoadableImage(mediaSource: timelineItem.content.imageInfo.source,
+                          mediaType: .timelineItem(uniqueID: timelineItem.id.uniqueID.id),
+                          blurhash: timelineItem.content.blurhash,
+                          size: timelineItem.content.imageInfo.size,
+                          mediaProvider: context?.mediaProvider) {
+                placeholder
+            }
+            .mediaGalleryTimelineAspectRatio(imageInfo: timelineItem.content.imageInfo)
+        } else {
+            LoadableImage(mediaSource: timelineItem.content.thumbnailInfo?.source ?? timelineItem.content.imageInfo.source,
+                          mediaType: .timelineItem(uniqueID: timelineItem.id.uniqueID.id),
+                          blurhash: timelineItem.content.blurhash,
+                          size: timelineItem.content.thumbnailInfo?.size ?? timelineItem.content.imageInfo.size,
+                          mediaProvider: context?.mediaProvider) {
+                placeholder
+            }
+            .mediaGalleryTimelineAspectRatio(imageInfo: timelineItem.content.thumbnailInfo ?? timelineItem.content.imageInfo)
+        }
+    }
+        
+    private var placeholder: some View {
+        Rectangle()
+            .foregroundColor(.compound.bgSubtleSecondary)
+            .opacity(0.3)
+    }
+}
+
+private extension View {
+    @ViewBuilder
+    func mediaGalleryTimelineAspectRatio(imageInfo: ImageInfoProxy?) -> some View {
+        aspectRatio(imageInfo?.aspectRatio, contentMode: .fill)
+    }
+}
+
+struct ImageMediaEventsTimelineView_Previews: PreviewProvider, TestablePreview {
+    static let viewModel = TimelineViewModel.mock
+    
+    static var previews: some View {
+        ImageMediaEventsTimelineView(timelineItem: makeTimelineItem())
+            .frame(width: 100, height: 100)
+            .environmentObject(viewModel.context)
+            .environment(\.timelineContext, viewModel.context)
+            .previewLayout(.sizeThatFits)
+            .background(.black)
+    }
+    
+    private static func makeTimelineItem() -> ImageRoomTimelineItem {
+        ImageRoomTimelineItem(id: .randomEvent,
+                              timestamp: .mock,
+                              isOutgoing: false,
+                              isEditable: false,
+                              canBeRepliedTo: true,
+                              isThreaded: false,
+                              sender: .init(id: "Bob"),
+                              content: .init(filename: "image.jpg",
+                                             imageInfo: .mockImage,
+                                             thumbnailInfo: .mockThumbnail,
+                                             contentType: .jpeg))
+    }
+}

ElementX/Sources/Screens/MediaEventsTimelineScreen/View/TimelineViews/SeparatorMediaEventsTimelineView.swift

@@ -0,0 +1,32 @@
+//
+// Copyright 2022-2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import Compound
+import SwiftUI
+
+struct SeparatorMediaEventsTimelineView: View {
+    let group: MediaEventsTimelineGroup
+    
+    var body: some View {
+        Text(group.title)
+            .font(.compound.bodySMSemibold)
+            .foregroundColor(.compound.textPrimary)
+            .frame(alignment: .center)
+            .padding(.vertical, 16)
+    }
+}
+
+struct SeparatorMediaEventsTimelineView_Previews: PreviewProvider, TestablePreview {
+    static var previews: some View {
+        let item = SeparatorRoomTimelineItem(id: .virtual(uniqueID: .init(id: "Separator")),
+                                             timestamp: .mock)
+        
+        SeparatorMediaEventsTimelineView(group: .init(id: item.id.uniqueID.id,
+                                                      title: "Group",
+                                                      items: []))
+    }
+}

ElementX/Sources/Screens/MediaEventsTimelineScreen/View/TimelineViews/VideoMediaEventsTimelineView.swift

@@ -0,0 +1,78 @@
+//
+// Copyright 2022-2024 New Vector Ltd.
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+// Please see LICENSE in the repository root for full details.
+//
+
+import Compound
+import SwiftUI
+
+struct VideoMediaEventsTimelineView: View {
+    @Environment(\.timelineContext) private var context
+    let timelineItem: VideoRoomTimelineItem
+    
+    var body: some View {
+        thumbnail
+            .accessibilityElement(children: .ignore)
+            .accessibilityLabel(L10n.commonVideo)
+    }
+    
+    @ViewBuilder
+    var thumbnail: some View {
+        if let thumbnailSource = timelineItem.content.thumbnailInfo?.source {
+            LoadableImage(mediaSource: thumbnailSource,
+                          mediaType: .timelineItem(uniqueID: timelineItem.id.uniqueID.id),
+                          blurhash: timelineItem.content.blurhash,
+                          size: timelineItem.content.thumbnailInfo?.size,
+                          mediaProvider: context?.mediaProvider) { imageView in
+                imageView
+                    .overlay { playIcon }
+            } placeholder: {
+                placeholder
+            }
+        } else {
+            playIcon
+        }
+    }
+    
+    var playIcon: some View {
+        Image(systemName: "play.circle.fill")
+            .resizable()
+            .frame(width: 50, height: 50)
+            .background(.ultraThinMaterial, in: Circle())
+            .foregroundColor(.white)
+    }
+    
+    var placeholder: some View {
+        Rectangle()
+            .foregroundColor(.compound.bgSubtleSecondary)
+            .opacity(0.3)
+    }
+}
+
+struct VideoMediaEventsTimelineView_Previews: PreviewProvider, TestablePreview {
+    static let viewModel = TimelineViewModel.mock
+    
+    static var previews: some View {
+        VideoMediaEventsTimelineView(timelineItem: makeTimelineItem())
+            .frame(width: 100, height: 100)
+            .environmentObject(viewModel.context)
+            .environment(\.timelineContext, viewModel.context)
+            .previewLayout(.sizeThatFits)
+            .background(.black)
+    }
+    
+    private static func makeTimelineItem(caption: String? = nil, isEdited: Bool = false) -> VideoRoomTimelineItem {
+        VideoRoomTimelineItem(id: .randomEvent,
+                              timestamp: .mock,
+                              isOutgoing: false,
+                              isEditable: false,
+                              canBeRepliedTo: true,
+                              isThreaded: false,
+                              sender: .init(id: "Bob"),
+                              content: .init(filename: "video.mp4",
+                                             videoInfo: .mockVideo,
+                                             thumbnailInfo: .mockVideoThumbnail))
+    }
+}

PreviewTests/Sources/GeneratedPreviewTests.swift

@@ -281,6 +281,12 @@ extension PreviewTests {
         }
     }
 
+    func test_imageMediaEventsTimelineView() {
+        for preview in ImageMediaEventsTimelineView_Previews._allPreviews {
+            assertSnapshots(matching: preview)
+        }
+    }
+
     func test_imageRoomTimelineView() {
         for preview in ImageRoomTimelineView_Previews._allPreviews {
             assertSnapshots(matching: preview)
@@ -767,6 +773,12 @@ extension PreviewTests {
         }
     }
 
+    func test_separatorMediaEventsTimelineView() {
+        for preview in SeparatorMediaEventsTimelineView_Previews._allPreviews {
+            assertSnapshots(matching: preview)
+        }
+    }
+
     func test_separatorRoomTimelineView() {
         for preview in SeparatorRoomTimelineView_Previews._allPreviews {
             assertSnapshots(matching: preview)
@@ -995,6 +1007,12 @@ extension PreviewTests {
         }
     }
 
+    func test_videoMediaEventsTimelineView() {
+        for preview in VideoMediaEventsTimelineView_Previews._allPreviews {
+            assertSnapshots(matching: preview)
+        }
+    }
+
     func test_videoRoomTimelineView() {
         for preview in VideoRoomTimelineView_Previews._allPreviews {
             assertSnapshots(matching: preview)