Fix recently used emojis

ElementX/Sources/Application/AppSettings.swift

@@ -28,6 +28,8 @@ final class AppSettings {
         case hasRunNotificationPermissionsOnboarding
         case hasRunIdentityConfirmationOnboarding
 
+        case frequentlyUsedSystemEmojis
+
         case enableNotifications
         case enableInAppNotifications
         case pusherProfileTag
@@ -40,7 +42,6 @@ final class AppSettings {
         case hideTimelineMedia
 
         case elementCallBaseURLOverride
-        case elementCallEncryptionEnabled
 
         // Feature flags
         case slidingSyncDiscovery
@@ -231,6 +232,9 @@ final class AppSettings {
     @UserPreference(key: UserDefaultsKeys.hasRunIdentityConfirmationOnboarding, defaultValue: false, storageType: .userDefaults(store))
     var hasRunIdentityConfirmationOnboarding
 
+    @UserPreference(key: UserDefaultsKeys.frequentlyUsedSystemEmojis, defaultValue: [FrequentlyUsedEmoji](), storageType: .userDefaults(store))
+    var frequentlyUsedSystemEmojis
+
     // MARK: - Home Screen
 
     @UserPreference(key: UserDefaultsKeys.hideUnreadMessagesBadge, defaultValue: false, storageType: .userDefaults(store))

ElementX/Sources/Other/SwiftUI/Layout/TimelineMediaFrame.swift

@@ -29,4 +29,9 @@ extension View {
             }
         }
     }
+
+    @ViewBuilder
+    func mediaGalleryTimelineAspectRatio(imageInfo: ImageInfoProxy?) -> some View {
+        aspectRatio(imageInfo?.aspectRatio, contentMode: .fill)
+    }
 }

ElementX/Sources/Screens/MediaEventsTimelineScreen/MediaEventsTimelineScreenModels.swift

@@ -23,6 +23,7 @@ struct MediaEventsTimelineGroup: Identifiable {
 }
 
 struct MediaEventsTimelineScreenViewState: BindableState {
+    var hasReachedTimelineStart = false
     var isBackPaginating = false
     var groups = [MediaEventsTimelineGroup]()
 
@@ -31,6 +32,10 @@ struct MediaEventsTimelineScreenViewState: BindableState {
     var bindings: MediaEventsTimelineScreenViewStateBindings
 
     var currentPreviewItemID: TimelineItemIdentifier?
+
+    var shouldShowEmptyState: Bool {
+        groups.isEmpty && hasReachedTimelineStart
+    }
 }
 
 struct MediaEventsTimelineScreenViewStateBindings {

ElementX/Sources/Screens/MediaEventsTimelineScreen/MediaEventsTimelineScreenViewModel.swift

@@ -36,13 +36,13 @@ class MediaEventsTimelineScreenViewModel: MediaEventsTimelineScreenViewModelType
     init(mediaTimelineViewModel: TimelineViewModelProtocol,
          filesTimelineViewModel: TimelineViewModelProtocol,
          mediaProvider: MediaProviderProtocol,
-         screenMode: MediaEventsTimelineScreenMode = .media,
+         initialViewState: MediaEventsTimelineScreenViewState = .init(bindings: .init(screenMode: .media)),
          userIndicatorController: UserIndicatorControllerProtocol) {
         self.mediaTimelineViewModel = mediaTimelineViewModel
         self.filesTimelineViewModel = filesTimelineViewModel
         self.userIndicatorController = userIndicatorController
 
-        super.init(initialViewState: .init(bindings: .init(screenMode: screenMode)), mediaProvider: mediaProvider)
+        super.init(initialViewState: initialViewState, mediaProvider: mediaProvider)
 
         state.activeTimelineContextProvider = { [weak self] in
             guard let self else { fatalError() }
@@ -131,6 +131,7 @@ class MediaEventsTimelineScreenViewModel: MediaEventsTimelineScreenViewModelType
         state.groups = newGroups
 
         state.isBackPaginating = (timelineViewState.timelineState.paginationState.backward == .paginating)
+//        state.hasReachedTimelineStart = (timelineViewState.timelineState.paginationState.backward == .timelineEndReached)
         backPaginateIfNecessary(paginationStatus: timelineViewState.timelineState.paginationState.backward)
     }
 

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

@@ -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())
     }
 

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

@@ -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
 

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

@@ -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(Duration.seconds(timelineItem.content.videoInfo.duration).formatted(.time(pattern: .minuteSecond)))
+        }
+        .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 {

ElementX/Sources/Services/Emojis/EmojiProvider.swift

@@ -7,7 +7,6 @@
 
 import Emojibase
 import Foundation
-import OrderedCollections
 
 class EmojiProvider: EmojiProviderProtocol {
     private let maxFrequentEmojis = 20
@@ -61,31 +60,27 @@ class EmojiProvider: EmojiProviderProtocol {
             return []
         }
 
-        guard let preferences = UserDefaults(suiteName: "com.apple.EmojiPreferences"),
-              let defaults = preferences.dictionary(forKey: "EMFDefaultsKey"),
-              let recents = defaults["EMFRecentsKey"] as? [String]
-        else {
-            return []
-        }
-
-        return recents
+        return appSettings.frequentlyUsedSystemEmojis.map(\.key)
     }
 
     func markEmojiAsFrequentlyUsed(_ emoji: String) {
         guard !ProcessInfo.processInfo.isiOSAppOnMac else {
             return
         }
 
-        guard let preferences = UserDefaults(suiteName: "com.apple.EmojiPreferences"),
-              let defaults = preferences.dictionary(forKey: "EMFDefaultsKey"),
-              let recents = defaults["EMFRecentsKey"] as? [String] else {
-            return
+        let frequentlyUsed = if !frequentlyUsedSystemEmojis().contains(emoji) {
+            appSettings.frequentlyUsedSystemEmojis + [.init(count: 0, key: emoji)]
+        } else {
+            appSettings.frequentlyUsedSystemEmojis.map { frequentlyUsedEmoji in
+                if frequentlyUsedEmoji.key == emoji {
+                    return FrequentlyUsedEmoji(count: frequentlyUsedEmoji.count + 1, key: emoji)
+                }
+
+                return frequentlyUsedEmoji
+            }
         }
 
-        var uniqueOrderedRecents = OrderedSet(recents)
-        uniqueOrderedRecents.insert(emoji, at: 0)
-
-        preferences.setValue(["EMFRecentsKey": Array(uniqueOrderedRecents)], forKey: "EMFDefaultsKey")
+        appSettings.frequentlyUsedSystemEmojis = frequentlyUsed.sorted { $0.count > $1.count }
     }
 
     // MARK: - Private

ElementX/Sources/Services/Emojis/EmojiProviderProtocol.swift

@@ -31,6 +31,15 @@ enum EmojiProviderState {
     case loaded([EmojiCategory])
 }
 
+struct FrequentlyUsedEmoji: Codable, Hashable {
+    let count: UInt
+    let key: String
+
+    static func == (lhs: FrequentlyUsedEmoji, rhs: FrequentlyUsedEmoji) -> Bool {
+        lhs.key == rhs.key
+    }
+}
+
 @MainActor
 protocol EmojiProviderProtocol {
     var state: EmojiProviderState { get }

ElementX/Sources/Services/Timeline/TimelineController/MockRoomTimelineController.swift

@@ -36,18 +36,20 @@ class MockRoomTimelineController: RoomTimelineControllerProtocol {
 
     init(timelineKind: TimelineKind = .live, listenForSignals: Bool = false) {
         self.timelineKind = timelineKind
-        paginationState = PaginationState(backward: .idle, forward: .timelineEndReached)
-        callbacks.send(.isLive(true))
 
         switch timelineKind {
         case .media:
+            paginationState = PaginationState(backward: .timelineEndReached, forward: .timelineEndReached)
             timelineItems = (0..<5).reduce([]) { partialResult, _ in
                 partialResult + [RoomTimelineItemFixtures.separator] + RoomTimelineItemFixtures.mediaChunk
             }
         default:
-            break
+            paginationState = PaginationState(backward: .idle, forward: .timelineEndReached)
         }
 
+        callbacks.send(.paginationState(paginationState))
+        callbacks.send(.isLive(true))
+
         guard listenForSignals else { return }
 
         do {