Explore typing notifications inspired by web

CHANGES.rst

@@ -4,20 +4,25 @@ Changes to be released in next version
 ✨ Features
  * Composer Update - Typing and sending a message (#4085)
  * Switching composer between text mode & action mode (#4087)
+ * Explore typing notifications inspired by web (#4134)
 
 🙌 Improvements
  * Make the application settings more configurable (#4171)
  * Possibility to lock some room creation parameters from settings (#4181)
  * Enable / disable external friends invite (#4173)
  * Composer update - UI enhancements (#4133)
  * Increase grow/shrink animation speed in new composer (#4187)
+ * Limit typing notifications timeline jumps (#4176)
+ * Consider displaying names in typing notifications (#4175)
 
 🐛 Bugfix
  * if you start typing while the new attachment sending mode is on, the send button appears (#4155)
  * The final frames of the appearance animation of the new composer buttons are missing (#4160)
  * Crash in [RoomViewController setupActions] (#4162)
  * too much vertical whitespace when replying (#4164)
  * Black theme uses dark background for composer (#4192)
+ * Vertical layout of typing notifs can go wonky (#4159)
+ * Crash in [RoomViewController refreshTypingNotification] (#4161)
 
 ⚠️ API Changes
  * 

Riot/Assets/en.lproj/Vector.strings

@@ -406,6 +406,8 @@ Tap the + to start adding people.";
 "external_link_confirmation_title" = "Double-check this link";
 "external_link_confirmation_message" = "The link %@ is taking you to another site: %@\n\nAre you sure you want to continue?";
 
+"room_multiple_typing_notification" = "%@ and others";
+
 // Unknown devices
 "unknown_devices_alert_title" = "Room contains unknown sessions";
 "unknown_devices_alert" = "This room contains unknown sessions which have not been verified.\nThis means there is no guarantee that the sessions belong to the users they claim to.\nWe recommend you go through the verification process for each session before continuing, but you can resend the message without verifying if you prefer.";

Riot/Generated/Strings.swift

@@ -2938,6 +2938,10 @@ internal enum VectorL10n {
   internal static var roomMessageUnableOpenLinkErrorMessage: String { 
     return VectorL10n.tr("Vector", "room_message_unable_open_link_error_message") 
   }
+  /// %@ and others
+  internal static func roomMultipleTypingNotification(_ p1: String) -> String {
+    return VectorL10n.tr("Vector", "room_multiple_typing_notification", p1)
+  }
   /// %d new message
   internal static func roomNewMessageNotification(_ p1: Int) -> String {
     return VectorL10n.tr("Vector", "room_new_message_notification", p1)

Riot/Modules/DotsView/DotsView.swift

@@ -0,0 +1,146 @@
+// 
+// Copyright 2021 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import UIKit
+
+@IBDesignable
+@objcMembers
+class DotsView: UIView {
+    // MARK: - Public properties
+
+    @IBInspectable var highlightedDotColor: UIColor = .darkGray
+
+    @IBInspectable var dotColor: UIColor = .lightGray
+
+    @IBInspectable var dotMaxWidth: CGFloat = 10 {
+        didSet {
+            self.sizeToFit()
+        }
+    }
+
+    @IBInspectable var dotMinWidth: CGFloat = 8 {
+        didSet {
+            self.sizeToFit()
+        }
+    }
+
+    @IBInspectable var numberOfDots: UInt = 3 {
+        didSet {
+            createDotViews()
+        }
+    }
+
+    @IBInspectable var interSpaceMargin: CGFloat = 7 {
+        didSet {
+            self.sizeToFit()
+        }
+    }
+
+    // MARK: - Private members
+
+    private var dotLayers: Array<CALayer> = Array()
+    private var highlightedDotIndex: UInt = 0 {
+        didSet {
+            updateDotViews()
+        }
+    }
+    private let updateInterval: TimeInterval = 0.4
+    private var lastUpdateDate: Date = Date()
+    private var animating: Bool = false {
+        didSet {
+            let displayLink = CADisplayLink(target: self, selector: #selector(fireTimer))
+            displayLink.add(to: .current, forMode: .default)
+        }
+    }
+
+    // MARK: - Lifecycle
+
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        createDotViews()
+    }
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        createDotViews()
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+
+        updateDotViews()
+    }
+
+    override var intrinsicContentSize: CGSize {
+        return CGSize(width: dotMaxWidth + (CGFloat(numberOfDots) - 1) * (dotMinWidth + interSpaceMargin), height: dotMaxWidth)
+    }
+
+    override func didMoveToSuperview() {
+        animating = superview != nil
+    }
+
+    // MARK: - Interface Builder
+
+    override func prepareForInterfaceBuilder() {
+        super.prepareForInterfaceBuilder()
+        createDotViews()
+    }
+
+    // MARK: - Private methods
+
+    private func createDotViews() {
+        while dotLayers.count > numberOfDots {
+            dotLayers.popLast()?.removeFromSuperlayer()
+        }
+
+        while dotLayers.count < numberOfDots {
+            let dotLayer = CALayer()
+            dotLayer.masksToBounds = true
+            layer.addSublayer(dotLayer)
+            dotLayers.append(dotLayer)
+        }
+
+        if highlightedDotIndex >= dotLayers.count {
+            highlightedDotIndex = 0
+            updateDotViews()
+        }
+    }
+
+    private func updateDotViews() {
+        CATransaction.begin()
+        CATransaction.setAnimationDuration(1)
+        var x: CGFloat = 0
+        for (index, dotLayer) in dotLayers.enumerated() {
+            if index == highlightedDotIndex {
+                dotLayer.frame = CGRect(x: x, y: (bounds.height - dotMaxWidth) / 2, width: dotMaxWidth, height: dotMaxWidth)
+                dotLayer.backgroundColor = dotColor.cgColor
+            } else {
+                dotLayer.frame = CGRect(x: x, y: (bounds.height - dotMinWidth) / 2, width: dotMinWidth, height: dotMinWidth)
+                dotLayer.backgroundColor = index == ((highlightedDotIndex + 1) % numberOfDots) ? highlightedDotColor.cgColor : dotColor.cgColor
+            }
+            dotLayer.cornerRadius = dotLayer.bounds.height / 2
+            x = dotLayer.frame.maxX + interSpaceMargin
+        }
+        lastUpdateDate = Date()
+        CATransaction.commit()
+    }
+
+    @objc private func fireTimer() {
+        if Date().timeIntervalSince(lastUpdateDate) >= updateInterval {
+            self.highlightedDotIndex = (self.highlightedDotIndex + 1) % self.numberOfDots
+        }
+    }
+}

Riot/Modules/Room/DataSources/RoomDataSource.h

@@ -21,6 +21,8 @@
 
 #import "MXRoomSummary+Riot.h"
 
+#import "TypingUserInfo.h"
+
 @protocol RoomDataSourceDelegate;
 
 /**
@@ -48,6 +50,11 @@
  */
 @property(nonatomic, readonly) RoomEncryptionTrustLevel encryptionTrustLevel;
 
+/**
+ List of members who are typing in the room.
+ */
+@property(nonatomic, nullable) NSArray<TypingUserInfo *> *currentTypingUsers;
+
 /**
  Check if there is an active jitsi widget in the room and return it.
 
@@ -93,6 +100,8 @@
                                      success:(void(^)(void))success
                                      failure:(void(^)(NSError*))failure;
 
+- (void)resetTypingNotification;
+
 @end
 
 @protocol RoomDataSourceDelegate <MXKDataSourceDelegate>

Riot/Modules/Room/DataSources/RoomDataSource.m

@@ -27,6 +27,7 @@
 
 #import "MXRoom+Riot.h"
 
+const CGFloat kTypingCellHeight = 24;
 
 @interface RoomDataSource() <BubbleReactionsViewModelDelegate>
 {
@@ -53,6 +54,8 @@ @interface RoomDataSource() <BubbleReactionsViewModelDelegate>
 
 @property (nonatomic) BOOL showRoomCreationCell;
 
+@property (nonatomic) NSInteger typingCellIndex;
+
 @end
 
 @implementation RoomDataSource
@@ -185,6 +188,16 @@ - (void)updateCellData:(MXKRoomBubbleCellData*)cellData withReadReceipts:(NSArra
     [self setNeedsUpdateAdditionalContentHeightForCellData:cellData];
 }
 
+- (CGFloat)cellHeightAtIndex:(NSInteger)index withMaximumWidth:(CGFloat)maxWidth
+{
+    if (index == self.typingCellIndex)
+    {
+        return kTypingCellHeight;
+    }
+
+    return [super cellHeightAtIndex:index withMaximumWidth:maxWidth];
+}
+
 - (void)setNeedsUpdateAdditionalContentHeightForCellData:(id<MXKRoomBubbleCellDataStoring>)cellData
 {
     RoomBubbleCellData *roomBubbleCellData;
@@ -261,16 +274,40 @@ - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger
             [self updateStatusInfo];
         }
 
-        //  we may have changed the number of bubbles in this block, consider that change
-        return bubbles.count;
+        if (!self.currentTypingUsers)
+        {
+            self.typingCellIndex = -1;
+
+            //  we may have changed the number of bubbles in this block, consider that change
+            return bubbles.count;
+        }
+
+        self.typingCellIndex = bubbles.count;
+        return bubbles.count + 1;
+    }
+
+    if (!self.currentTypingUsers)
+    {
+        self.typingCellIndex = -1;
+
+        //  leave it as is, if coming as 0 from super
+        return count;
     }
 
-    //  leave it as is, if coming as 0 from super
-    return count;
+    self.typingCellIndex = count;
+    return count + 1;
 }
 
 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
 {
+    if (indexPath.row == self.typingCellIndex)
+    {
+        RoomTypingBubbleCell *cell = [tableView dequeueReusableCellWithIdentifier:RoomTypingBubbleCell.defaultReuseIdentifier forIndexPath:indexPath];
+        [cell updateWithTheme:ThemeService.shared.theme];
+        [cell updateTypingUsers:_currentTypingUsers mediaManager:self.mxSession.mediaManager];
+        return cell;
+    }
+
     // Do cell data customization that needs to be done before [MXKRoomBubbleTableViewCell render]
     RoomBubbleCellData *roomBubbleCellData = [self cellDataAtIndex:indexPath.row];
 
@@ -915,6 +952,10 @@ - (void)declineVerificationRequestForEventId:(NSString*)eventId success:(void(^)
     }];
 }
 
+- (void)resetTypingNotification {
+    self.currentTypingUsers = nil;
+}
+
 #pragma - Accessibility
 
 - (void)setupAccessibilityForCell:(MXKRoomBubbleTableViewCell *)cell withCellData:(RoomBubbleCellData*)cellData

Riot/Modules/Room/DataSources/TypingUserInfo.h

@@ -0,0 +1,34 @@
+// 
+// Copyright 2021 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+#import <Foundation/Foundation.h>
+#import <MatrixSDK/MatrixSDK.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface TypingUserInfo : NSObject
+
+@property (nonatomic, strong) NSString *userId;
+@property (nonatomic, strong, nullable) NSString *displayName;
+@property (nonatomic, strong, nullable) NSString *avatarUrl;
+
+- (instancetype) initWithMember:(MXRoomMember*)member;
+
+- (instancetype) initWithUserId:(NSString*)userId;
+
+@end
+
+NS_ASSUME_NONNULL_END

Riot/Modules/Room/DataSources/TypingUserInfo.m

@@ -0,0 +1,46 @@
+// 
+// Copyright 2021 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+#import "TypingUserInfo.h"
+
+@implementation TypingUserInfo
+
+- (instancetype) initWithMember:(MXRoomMember*)member
+{
+    self = [self initWithUserId:member.userId];
+
+    if (self)
+    {
+        self.displayName = member.displayname;
+        self.avatarUrl = member.avatarUrl;
+    }
+
+    return self;
+}
+
+- (instancetype) initWithUserId:(NSString*)userId
+{
+    self = [super init];
+
+    if (self)
+    {
+        self.userId = userId;
+    }
+
+    return self;
+}
+
+@end