Add developer option to hide media in the timeline. (#3366)

ElementX/Resources/Localizations/en.lproj/Localizable.strings

@@ -41,6 +41,7 @@
 "action_create" = "Create";
 "action_create_a_room" = "Create a room";
 "action_deactivate" = "Deactivate";
+"action_deactivate_account" = "Deactivate account";
 "action_decline" = "Decline";
 "action_delete_poll" = "Delete Poll";
 "action_disable" = "Disable";
@@ -64,6 +65,7 @@
 "action_leave" = "Leave";
 "action_leave_conversation" = "Leave conversation";
 "action_leave_room" = "Leave room";
+"action_load_more" = "Load more";
 "action_manage_account" = "Manage account";
 "action_manage_devices" = "Manage devices";
 "action_message" = "Message";
@@ -93,6 +95,7 @@
 "action_send_message" = "Send message";
 "action_share" = "Share";
 "action_share_link" = "Share link";
+"action_show" = "Show";
 "action_sign_in_again" = "Sign in again";
 "action_signout" = "Sign out";
 "action_signout_anyway" = "Sign out anyway";
@@ -108,8 +111,6 @@
 "action_view_in_timeline" = "View in timeline";
 "action_view_source" = "View source";
 "action_yes" = "Yes";
-"action.load_more" = "Load more";
-"action_deactivate_account" = "Deactivate account";
 "banner_migrate_to_native_sliding_sync_action" = "Log Out & Upgrade";
 "banner_migrate_to_native_sliding_sync_description" = "Your server now supports a new, faster protocol. Log out and log back in to upgrade now. Doing this now will help you avoid a forced logout when the old protocol is removed later.";
 "banner_migrate_to_native_sliding_sync_force_logout_title" = "Your homeserver no longer supports the old protocol. Please log out and log back in to continue using the app.";

ElementX/Sources/Application/AppSettings.swift

@@ -12,6 +12,7 @@ import SwiftUI
 protocol CommonSettingsProtocol {
  var logLevel: TracingConfiguration.LogLevel { get }
  var enableOnlySignedDeviceIsolationMode: Bool { get }
+ var hideTimelineMedia: Bool { get }
 }
 
 /// Store Element specific app settings.
@@ -34,6 +35,7 @@ final class AppSettings {
  case appAppearance
  case sharePresence
  case hideUnreadMessagesBadge
+ case hideTimelineMedia
 
  case elementCallBaseURLOverride
  case elementCallEncryptionEnabled
@@ -285,6 +287,9 @@ final class AppSettings {
  /// Configuration to enable only signed device isolation mode for crypto. In this mode only devices signed by their owner will be considered in e2ee rooms.
  @UserPreference(key: UserDefaultsKeys.enableOnlySignedDeviceIsolationMode, defaultValue: false, storageType: .userDefaults(store))
  var enableOnlySignedDeviceIsolationMode
+
+ @UserPreference(key: UserDefaultsKeys.hideTimelineMedia, defaultValue: false, storageType: .userDefaults(store))
+ var hideTimelineMedia
 }
 
 extension AppSettings: CommonSettingsProtocol { }

ElementX/Sources/Generated/Strings.swift

@@ -164,6 +164,8 @@ internal enum L10n {
  internal static var actionLeaveConversation: String { return L10n.tr("Localizable", "action_leave_conversation") }
  /// Leave room
  internal static var actionLeaveRoom: String { return L10n.tr("Localizable", "action_leave_room") }
+ /// Load more
+ internal static var actionLoadMore: String { return L10n.tr("Localizable", "action_load_more") }
  /// Manage account
  internal static var actionManageAccount: String { return L10n.tr("Localizable", "action_manage_account") }
  /// Manage devices
@@ -222,6 +224,8 @@ internal enum L10n {
  internal static var actionShare: String { return L10n.tr("Localizable", "action_share") }
  /// Share link
  internal static var actionShareLink: String { return L10n.tr("Localizable", "action_share_link") }
+ /// Show
+ internal static var actionShow: String { return L10n.tr("Localizable", "action_show") }
  /// Sign in again
  internal static var actionSignInAgain: String { return L10n.tr("Localizable", "action_sign_in_again") }
  /// Sign out
@@ -2396,11 +2400,6 @@ internal enum L10n {
  /// Check UnifiedPush
  internal static var troubleshootNotificationsTestUnifiedPushTitle: String { return L10n.tr("Localizable", "troubleshoot_notifications_test_unified_push_title") }
 
- internal enum Action {
- /// Load more
- internal static var loadMore: String { return L10n.tr("Localizable", "action.load_more") }
- }
-
  internal enum Banner {
  internal enum SetUpRecovery {
  /// Generate a new recovery key that can be used to restore your encrypted message history in case you lose access to your devices.

ElementX/Sources/Other/SwiftUI/Views/LoadableAvatarImage.swift

@@ -50,6 +50,7 @@ struct LoadableAvatarImage: View {
  .frame(width: frameSize, height: frameSize)
  .background(Color.compound.bgCanvasDefault)
  .clipShape(Circle())
+ .environment(\.shouldAutomaticallyLoadImages, true) // We always load avatars.
  }
 
  @ViewBuilder

ElementX/Sources/Other/SwiftUI/Views/LoadableImage.swift

@@ -6,12 +6,17 @@
 //
 
 import Combine
+import Compound
 import Kingfisher
 import SwiftUI
 
 /// Used to configure animations
 enum LoadableImageMediaType {
+ /// An avatar (can be displayed anywhere within the app).
  case avatar
+ /// An image displayed in the timeline.
+ case timelineItem
+ /// Any other media (can be displayed anywhere within the app).
  case generic
 }
 
@@ -79,13 +84,16 @@ struct LoadableImage<TransformerView: View, PlaceholderView: View>: View {
 }
 
 private struct LoadableImageContent<TransformerView: View, PlaceholderView: View>: View, ImageDataProvider {
+ @Environment(\.shouldAutomaticallyLoadImages) private var loadAutomatically
+
  private let mediaSource: MediaSourceProxy
  private let mediaType: LoadableImageMediaType
  private let blurhash: String?
  private let transformer: (AnyView) -> TransformerView
  private let placeholder: () -> PlaceholderView
 
  @StateObject private var contentLoader: ContentLoader
+ @State private var loadManually = false
 
  init(mediaSource: MediaSourceProxy,
  mediaType: LoadableImageMediaType,
@@ -104,36 +112,40 @@ private struct LoadableImageContent<TransformerView: View, PlaceholderView: View
  _contentLoader = StateObject(wrappedValue: ContentLoader(mediaSource: mediaSource, size: size, mediaProvider: mediaProvider))
  }
 
+ var shouldRender: Bool {
+ loadAutomatically || loadManually
+ }
+
  var body: some View {
- // Tried putting this in the body's .task but it randomly
- // decides to not execute the request
- let _ = Task {
- guard contentLoader.content == nil else {
- return
- }
-
- await contentLoader.load()
- }
-
  ZStack {
- switch contentLoader.content {
- case .image(let image):
+ switch (contentLoader.content, shouldRender) {
+ case (.image(let image), true):
  transformer(
  AnyView(Image(uiImage: image).resizable())
  )
- case .gifData:
+ case (.gifData, true):
  transformer(AnyView(KFAnimatedImage(source: .provider(self))))
- case .none:
- if let blurhash,
- // Build a small blurhash image so that it's fast
- let image = UIImage(blurHash: blurhash, size: .init(width: 10.0, height: 10.0)) {
- transformer(AnyView(Image(uiImage: image).resizable()))
+ case (.none, _), (_, false):
+ if let blurHashView {
+ if shouldRender {
+ transformer(blurHashView)
+ } else {
+ blurHashView
+ }
  } else {
- placeholder()
+ placeholder().overlay { placeholderOverlay }
  }
  }
  }
  .animation(mediaType == .avatar ? .noAnimation : .elementDefault, value: contentLoader.content)
+ .animation(.elementDefault, value: loadManually)
+ .task(id: mediaSource.url.absoluteString + "\(shouldRender)") {
+ guard shouldRender, contentLoader.content == nil else {
+ return
+ }
+
+ await contentLoader.load()
+ }
  .onDisappear {
  guard contentLoader.content == nil else {
  return
@@ -143,6 +155,66 @@ private struct LoadableImageContent<TransformerView: View, PlaceholderView: View
  }
  }
 
+ // Note: Returns `AnyView` as this is what `transformer` expects.
+ var blurHashView: AnyView? {
+ if let blurhash,
+ // Build a small blurhash image so that it's fast
+ let image = UIImage(blurHash: blurhash, size: .init(width: 10.0, height: 10.0)) {
+ return AnyView(Image(uiImage: image).resizable().overlay { blurHashOverlay })
+ } else {
+ return nil
+ }
+ }
+
+ // MARK: - Overlays
+
+ @ViewBuilder
+ var placeholderOverlay: some View {
+ switch mediaType {
+ case .avatar, .generic:
+ EmptyView()
+ case .timelineItem:
+ if shouldRender {
+ ProgressView(L10n.commonLoading)
+ .frame(maxWidth: .infinity)
+ } else {
+ loadManuallyButton
+ }
+ }
+ }
+
+ @ViewBuilder
+ var blurHashOverlay: some View {
+ if !shouldRender {
+ loadManuallyButton
+ }
+ }
+
+ var loadManuallyButton: some View {
+ ZStack {
+ Color.black.opacity(0.6)
+ .contentShape(.rect)
+ .onTapGesture { /* Empty gesture to block the itemTapped action */ }
+
+ // Don't use a real Button as it sometimes triggers simultaneously with the long press gesture.
+ Text(L10n.actionShow)
+ .font(.compound.bodyLGSemibold)
+ .foregroundStyle(.compound.textOnSolidPrimary)
+ .padding(.horizontal, 16)
+ .padding(.vertical, 4)
+ .overlay {
+ Capsule()
+ .stroke(lineWidth: 1)
+ .foregroundStyle(.compound.borderInteractiveSecondary)
+ }
+ .contentShape(.capsule)
+ .onTapGesture {
+ loadManually = true
+ }
+ .environment(\.colorScheme, .light)
+ }
+ }
+
  // MARK: - ImageDataProvider
 
  var cacheKey: String {
@@ -222,3 +294,120 @@ private class ContentLoader: ObservableObject {
  mediaSource.mimeType == "image/gif"
  }
 }
+
+extension EnvironmentValues {
+ /// Whether or not images should be loaded inside `LoadableImage` without a user interaction.
+ @Entry var shouldAutomaticallyLoadImages = true
+}
+
+// MARK: - Previews
+
+struct LoadableImage_Previews: PreviewProvider, TestablePreview {
+ static let mediaProvider = makeMediaProvider()
+ static let loadingMediaProvider = makeMediaProvider(isLoading: true)
+
+ static var previews: some View {
+ LazyVGrid(columns: [.init(.adaptive(minimum: 110, maximum: 110))], spacing: 24) {
+ LoadableImage(url: "mxc://wherever/1234",
+ mediaType: .timelineItem,
+ mediaProvider: mediaProvider,
+ placeholder: placeholder)
+ .layout(title: "Loaded")
+
+ LoadableImage(url: "mxc://wherever/2345",
+ mediaType: .timelineItem,
+ blurhash: "KpE4oyayR5|GbHb];3j@of",
+ mediaProvider: mediaProvider,
+ placeholder: placeholder)
+ .layout(title: "Hidden (blurhash)", hideTimelineMedia: true)
+
+ LoadableImage(url: "mxc://wherever/3456",
+ mediaType: .timelineItem,
+ mediaProvider: mediaProvider,
+ placeholder: placeholder)
+ .layout(title: "Hidden (placeholder)", hideTimelineMedia: true)
+
+ LoadableImage(url: "mxc://wherever/4567",
+ mediaType: .timelineItem,
+ blurhash: "KbLM^j]q$jT|EfR-3rtjXk",
+ mediaProvider: loadingMediaProvider,
+ placeholder: placeholder)
+ .layout(title: "Loading (blurhash)")
+
+ LoadableImage(url: "mxc://wherever/5678",
+ mediaType: .timelineItem,
+ mediaProvider: loadingMediaProvider,
+ placeholder: placeholder)
+ .layout(title: "Loading (placeholder)")
+
+ LoadableImage(url: "mxc://wherever/6789",
+ mediaType: .avatar,
+ mediaProvider: loadingMediaProvider,
+ placeholder: placeholder)
+ .layout(title: "Loading (avatar)")
+
+ LoadableImage(url: "mxc://wherever/345",
+ mediaType: .timelineItem,
+ blurhash: "KbLM^j]q$jT|EfR-3rtjXk",
+ mediaProvider: mediaProvider,
+ transformer: transformer,
+ placeholder: placeholder)
+ .layout(title: "Loaded (transformer)")
+
+ LoadableImage(url: "mxc://wherever/345",
+ mediaType: .timelineItem,
+ blurhash: "KbLM^j]q$jT|EfR-3rtjXk",
+ mediaProvider: loadingMediaProvider,
+ transformer: transformer,
+ placeholder: placeholder)
+ .layout(title: "Loading (transformer)")
+
+ LoadableImage(url: "mxc://wherever/234",
+ mediaType: .timelineItem,
+ blurhash: "KbLM^j]q$jT|EfR-3rtjXk",
+ mediaProvider: mediaProvider,
+ transformer: transformer,
+ placeholder: placeholder)
+ .layout(title: "Hidden (transformer)", hideTimelineMedia: true)
+ }
+ }
+
+ static func placeholder() -> some View { Color.compound._bgBubbleIncoming }
+ static func transformer(_ view: AnyView) -> some View {
+ view.overlay {
+ Image(systemSymbol: .playCircleFill)
+ .font(.largeTitle)
+ .foregroundStyle(.compound.iconAccentPrimary)
+ }
+ }
+
+ static func makeMediaProvider(isLoading: Bool = false) -> MediaProviderProtocol {
+ let mediaProvider = MediaProviderMock(configuration: .init())
+
+ if isLoading {
+ mediaProvider.imageFromSourceSizeClosure = { _, _ in nil }
+ mediaProvider.loadFileFromSourceBodyClosure = { _, _ in .failure(.failedRetrievingFile) }
+ mediaProvider.loadImageDataFromSourceClosure = { _ in .failure(.failedRetrievingImage) }
+ mediaProvider.loadImageFromSourceSizeClosure = { _, _ in .failure(.failedRetrievingImage) }
+ mediaProvider.loadThumbnailForSourceSourceSizeClosure = { _, _ in .failure(.failedRetrievingThumbnail) }
+ mediaProvider.loadImageRetryingOnReconnectionSizeClosure = { _, _ in
+ Task { throw MediaProviderError.failedRetrievingImage }
+ }
+ }
+ return mediaProvider
+ }
+}
+
+private extension View {
+ func layout(title: String, hideTimelineMedia: Bool = false) -> some View {
+ aspectRatio(contentMode: .fit)
+ .clipShape(RoundedRectangle(cornerRadius: 20))
+ .overlay(alignment: .bottom) {
+ Text(title)
+ .font(.caption2)
+ .offset(y: 16)
+ .padding(.horizontal, -5)
+ }
+ .environment(\.shouldAutomaticallyLoadImages, !hideTimelineMedia)
+ }
+}

ElementX/Sources/Screens/RoomPollsHistoryScreen/View/RoomPollsHistoryScreen.swift

@@ -91,7 +91,7 @@ struct RoomPollsHistoryScreen: View {
  Button {
  context.send(viewAction: .loadMore)
  } label: {
- Text(L10n.Action.loadMore)
+ Text(L10n.actionLoadMore)
  .font(.compound.bodyLGSemibold)
  .padding(.horizontal, 12)
  }

ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift

@@ -42,6 +42,8 @@ struct RoomScreen: View {
  .background(Color.compound.bgCanvasDefault.ignoresSafeArea())
  .environmentObject(timelineContext)
  .environment(\.timelineContext, timelineContext)
+ // Make sure the reply header honours the hideTimelineMedia setting too.
+ .environment(\.shouldAutomaticallyLoadImages, !timelineContext.viewState.hideTimelineMedia)
  }
  .overlay(alignment: .top) {
  Group {