Fix the media gallery's empty state showing up at wrong times.

2026-11-03 06:55:59 +00:00 · 2024-12-16 11:12:01 +02:00
parent 3a82b88859
commit f9be39eb4f
19 changed files with 80 additions and 60 deletions
@@ -34,6 +34,9 @@ struct MediaEventsTimelineScreen: View {
            }
            .environmentObject(context.viewState.activeTimelineContextProvider())
            .environment(\.timelineContext, context.viewState.activeTimelineContextProvider())
+            .onChange(of: context.screenMode) { _, _ in
+                context.send(viewAction: .changedScreenMode)
+            }
    }
    
    // The scale effects do the following:
@@ -44,7 +47,7 @@ struct MediaEventsTimelineScreen: View {
    // * flip the items on both axes have them render correctly
    @ViewBuilder
    private var mainContent: some View {
-        if context.viewState.groups.isEmpty, !context.viewState.isBackPaginating {
+        if context.viewState.shouldShowEmptyState {
            emptyState
        } else {
            ScrollView {
@@ -60,9 +63,6 @@ struct MediaEventsTimelineScreen: View {
                }
            }
            .scaleEffect(.init(width: 1, height: -1))
-            .onChange(of: context.screenMode) { _, _ in
-                context.send(viewAction: .changedScreenMode)
-            }
        }
    }
    
@@ -76,12 +76,7 @@ struct MediaEventsTimelineScreen: View {
                        Button {
                            tappedItem(item)
                        } label: {
-                            Color.clear // Let the image aspect fill in place
-                                .aspectRatio(1, contentMode: .fill)
-                                .overlay {
-                                    viewForTimelineItem(item)
-                                }
-                                .clipped()
+                            viewForTimelineItem(item)
                                .scaleEffect(scale(for: item, isGridLayout: true))
                        }
                        .zoomTransitionSource(id: item.identifier, in: zoomTransition)
@@ -260,7 +255,8 @@ struct MediaEventsTimelineScreen_Previews: PreviewProvider, TestablePreview {
        MediaEventsTimelineScreenViewModel(mediaTimelineViewModel: makeTimelineViewModel(timelineKind: timelineKind),
                                           filesTimelineViewModel: makeTimelineViewModel(timelineKind: timelineKind),
                                           mediaProvider: MediaProviderMock(configuration: .init()),
-                                           screenMode: screenMode,
+                                           initialViewState: .init(hasReachedTimelineStart: true,
+                                                                   bindings: .init(screenMode: screenMode)),
                                           userIndicatorController: UserIndicatorControllerMock())
    }
    
@@ -13,7 +13,12 @@ struct ImageMediaEventsTimelineView: View {
    let timelineItem: ImageRoomTimelineItem
    
    var body: some View {
-        loadableImage
+        Color.clear // Let the image aspect fill in place
+            .aspectRatio(1, contentMode: .fill)
+            .overlay {
+                loadableImage
+            }
+            .clipped()
            .accessibilityElement(children: .ignore)
            .accessibilityLabel(L10n.commonImage)
    }
@@ -48,13 +53,6 @@ struct ImageMediaEventsTimelineView: View {
    }
 }

-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
    
@@ -13,7 +13,13 @@ struct VideoMediaEventsTimelineView: View {
    let timelineItem: VideoRoomTimelineItem
    
    var body: some View {
-        thumbnail
+        Color.clear // Let the image aspect fill in place
+            .aspectRatio(1, contentMode: .fill)
+            .overlay {
+                thumbnail
+            }
+            .clipped()
+            .overlay(alignment: .bottom) { overlay }
            .accessibilityElement(children: .ignore)
            .accessibilityLabel(L10n.commonVideo)
    }
@@ -25,23 +31,30 @@ struct VideoMediaEventsTimelineView: View {
                          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: {
+                          mediaProvider: context?.mediaProvider) {
                placeholder
            }
+            .mediaGalleryTimelineAspectRatio(imageInfo: timelineItem.content.thumbnailInfo)
        } else {
-            playIcon
+            overlay
        }
    }
    
-    var playIcon: some View {
-        Image(systemName: "play.circle.fill")
-            .resizable()
-            .frame(width: 50, height: 50)
-            .background(.ultraThinMaterial, in: Circle())
-            .foregroundColor(.white)
+    var overlay: some View {
+        HStack(spacing: 0) {
+            CompoundIcon(\.videoCallSolid)
+            Spacer()
+            Text(Date(timeIntervalSince1970: timelineItem.content.videoInfo.duration).formattedTime())
+        }
+        .padding(8)
+        .background {
+            LinearGradient(stops: [.init(color: .clear, location: 0.0),
+                                   .init(color: .compound.bgCanvasDefault, location: 1.0)],
+                           startPoint: .top,
+                           endPoint: .bottom)
+        }
+        .font(.compound.bodyXSSemibold)
+        .foregroundStyle(.compound.textPrimary)
    }
    
    var placeholder: some View {