ios: interactive media and link previews in the list of chats (#4487)

* ios: interactive media and link previews in the list of chats * commented out voice preview * voice message support and various fixes * changes to video * changes * playing voice in chat list with scrolling * revert This reverts commit 60f57403d1. * prevent feedback loop * version of dependency * voice * fix param * working voice * reacting on messages and chat deletion * fix two videos in a row * video item layout * fix --------- Co-authored-by: Levitating Pineapple <noreply@levitatingpineapple.com> Co-authored-by: Evgeny Poberezkin <evgeny@poberezkin.com>
2026-06-06 12:41:37 +00:00 · 2024-07-24 00:11:42 +07:00
parent e343dd017b
commit 6fca6c22c5
15 changed files with 679 additions and 235 deletions
@@ -354,6 +354,9 @@ final class ChatModel: ObservableObject {
            addChat(Chat(chatInfo: cInfo, chatItems: [cItem]))
            res = true
        }
+        if cItem.isDeletedContent || cItem.meta.itemDeleted != nil {
+            VoiceItemState.stopVoiceInChatView(cInfo, cItem)
+        }
        // update current chat
        return chatId == cInfo.id ? _upsertChatItem(cInfo, cItem) : res
    }
@@ -420,6 +423,7 @@ final class ChatModel: ObservableObject {
                }
            }
        }
+        VoiceItemState.stopVoiceInChatView(cInfo, cItem)
    }

    func nextChatItemData<T>(_ chatItemId: Int64, previous: Bool, map: @escaping (ChatItem) -> T?) -> T? {
@@ -9,6 +9,7 @@ import SwiftUI
 class AnimatedImageView: UIView {
    var image: UIImage? = nil
    var imageView: UIImageView? = nil
+    var cMode: UIView.ContentMode = .scaleAspectFit

    override init(frame: CGRect) {
        super.init(frame: frame)
@@ -18,11 +19,12 @@ class AnimatedImageView: UIView {
        fatalError("Not implemented")
    }

-    convenience init(image: UIImage) {
+    convenience init(image: UIImage, contentMode: UIView.ContentMode) {
        self.init()
        self.image = image
+        self.cMode = contentMode
        imageView = UIImageView(gifImage: image)
-        imageView!.contentMode = .scaleAspectFit
+        imageView!.contentMode = contentMode
        self.addSubview(imageView!)
    }

@@ -35,7 +37,7 @@ class AnimatedImageView: UIView {
        if let subview = self.subviews.first as? UIImageView {
            if image.imageData != subview.gifImage?.imageData {
                imageView = UIImageView(gifImage: image)
-                imageView!.contentMode = .scaleAspectFit
+                imageView!.contentMode = contentMode
                self.addSubview(imageView!)
                subview.removeFromSuperview()
            }
@@ -47,13 +49,15 @@ class AnimatedImageView: UIView {

 struct SwiftyGif: UIViewRepresentable {
    private let image: UIImage
+    private let contentMode: UIView.ContentMode

-    init(image: UIImage) {
+    init(image: UIImage, contentMode: UIView.ContentMode = .scaleAspectFit) {
        self.image = image
+        self.contentMode = contentMode
    }

    func makeUIView(context: Context) -> AnimatedImageView {
-        AnimatedImageView(image: image)
+        AnimatedImageView(image: image, contentMode: contentMode)
    }

    func updateUIView(_ imageView: AnimatedImageView, context: Context) {
@@ -14,39 +14,45 @@ struct CIFileView: View {
    @EnvironmentObject var theme: AppTheme
    let file: CIFile?
    let edited: Bool
+    var smallView: Bool = false

    var body: some View {
-        let metaReserve = edited
-        ? "                           "
-        : "                       "
-        Button(action: fileAction) {
-            HStack(alignment: .bottom, spacing: 6) {
-                fileIndicator()
-                    .padding(.top, 5)
-                    .padding(.bottom, 3)
-                if let file = file {
-                    let prettyFileSize = ByteCountFormatter.string(fromByteCount: file.fileSize, countStyle: .binary)
-                    VStack(alignment: .leading, spacing: 2) {
-                        Text(file.fileName)
-                            .lineLimit(1)
-                            .multilineTextAlignment(.leading)
-                            .foregroundColor(theme.colors.onBackground)
-                        Text(prettyFileSize + metaReserve)
-                            .font(.caption)
-                            .lineLimit(1)
-                            .multilineTextAlignment(.leading)
-                            .foregroundColor(theme.colors.secondary)
+        if smallView {
+            fileIndicator()
+            .onTapGesture(perform: fileAction)
+        } else {
+            let metaReserve = edited
+            ? "                           "
+            : "                       "
+            Button(action: fileAction) {
+                HStack(alignment: .bottom, spacing: 6) {
+                    fileIndicator()
+                        .padding(.top, 5)
+                        .padding(.bottom, 3)
+                    if let file = file {
+                        let prettyFileSize = ByteCountFormatter.string(fromByteCount: file.fileSize, countStyle: .binary)
+                        VStack(alignment: .leading, spacing: 2) {
+                            Text(file.fileName)
+                                .lineLimit(1)
+                                .multilineTextAlignment(.leading)
+                                .foregroundColor(theme.colors.onBackground)
+                            Text(prettyFileSize + metaReserve)
+                                .font(.caption)
+                                .lineLimit(1)
+                                .multilineTextAlignment(.leading)
+                                .foregroundColor(theme.colors.secondary)
+                        }
+                    } else {
+                        Text(metaReserve)
                    }
-                } else {
-                    Text(metaReserve)
                }
+                .padding(.top, 4)
+                .padding(.bottom, 6)
+                .padding(.leading, 10)
+                .padding(.trailing, 12)
            }
-            .padding(.top, 4)
-            .padding(.bottom, 6)
-            .padding(.leading, 10)
-            .padding(.trailing, 12)
+            .disabled(!itemInteractive)
        }
-        .disabled(!itemInteractive)
    }

    private var itemInteractive: Bool {
@@ -199,17 +205,17 @@ struct CIFileView: View {
            Image(systemName: icon)
                .resizable()
                .aspectRatio(contentMode: .fit)
-                .frame(width: 30, height: 30)
+                .frame(width: smallView ? 36 : 30, height: smallView ? 36 : 30)
                .foregroundColor(color)
            if let innerIcon = innerIcon,
-               let innerIconSize = innerIconSize {
+               let innerIconSize = innerIconSize, (!smallView || file?.showStatusIconInSmallView == true) {
                Image(systemName: innerIcon)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(maxHeight: 16)
                    .frame(width: innerIconSize, height: innerIconSize)
                    .foregroundColor(.white)
-                    .padding(.top, 12)
+                    .padding(.top, smallView ? 15 : 12)
            }
        }
    }
@@ -15,13 +15,14 @@ struct CIImageView: View {
    var preview: UIImage?
    let maxWidth: CGFloat
    var imgWidth: CGFloat?
-    @State private var showFullScreenImage = false
+    var smallView: Bool = false
+    @Binding var showFullScreenImage: Bool

    var body: some View {
        let file = chatItem.file
        VStack(alignment: .center, spacing: 6) {
            if let uiImage = getLoadedImage(file) {
-                imageView(uiImage)
+                Group { if smallView { smallViewImageView(uiImage) } else { imageView(uiImage) } }
                .fullScreenCover(isPresented: $showFullScreenImage) {
                    FullScreenMediaView(chatItem: chatItem, image: uiImage, showView: $showFullScreenImage)
                }
@@ -30,7 +31,7 @@ struct CIImageView: View {
                    showFullScreenImage = false
                }
            } else if let preview {
-                imageView(preview)
+                Group { if smallView { smallViewImageView(preview) } else { imageView(preview) } }
                    .onTapGesture {
                        if let file = file {
                            switch file.fileStatus {
@@ -83,6 +84,9 @@ struct CIImageView: View {
                    }
            }
        }
+        .onDisappear {
+            showFullScreenImage = false
+        }
    }

    private func imageView(_ img: UIImage) -> some View {
@@ -102,6 +106,23 @@ struct CIImageView: View {
        }
    }

+    private func smallViewImageView(_ img: UIImage) -> some View {
+        ZStack(alignment: .topTrailing) {
+            if img.imageData == nil {
+                Image(uiImage: img)
+                    .resizable()
+                    .aspectRatio(contentMode: .fill)
+                    .frame(width: maxWidth, height: maxWidth)
+            } else {
+                SwiftyGif(image: img, contentMode: .scaleAspectFill)
+                    .frame(width: maxWidth, height: maxWidth)
+            }
+            if chatItem.file?.showStatusIconInSmallView == true {
+                loadingIndicator()
+            }
+        }
+    }
+
    @ViewBuilder private func loadingIndicator() -> some View {
        if let file = chatItem.file {
            switch file.fileStatus {
@@ -20,45 +20,43 @@ struct CIVideoView: View {
    @State private var videoPlaying: Bool = false
    private let maxWidth: CGFloat
    private var videoWidth: CGFloat?
+    private let smallView: Bool
    @State private var player: AVPlayer?
    @State private var fullPlayer: AVPlayer?
    @State private var url: URL?
    @State private var urlDecrypted: URL?
    @State private var decryptionInProgress: Bool = false
-    @State private var showFullScreenPlayer = false
+    @Binding private var showFullScreenPlayer: Bool
    @State private var timeObserver: Any? = nil
    @State private var fullScreenTimeObserver: Any? = nil
    @State private var publisher: AnyCancellable? = nil
+    private var sizeMultiplier: CGFloat { smallView ? 0.38 : 1 }

-    init(chatItem: ChatItem, preview: UIImage?, duration: Int, maxWidth: CGFloat, videoWidth: CGFloat?) {
+    init(chatItem: ChatItem, preview: UIImage?, duration: Int, maxWidth: CGFloat, videoWidth: CGFloat?, smallView: Bool = false, showFullscreenPlayer: Binding<Bool>) {
        self.chatItem = chatItem
        self.preview = preview
        self._duration = State(initialValue: duration)
        self.maxWidth = maxWidth
        self.videoWidth = videoWidth
-        if let url = getLoadedVideo(chatItem.file) {
-            let decrypted = chatItem.file?.fileSource?.cryptoArgs == nil ? url : chatItem.file?.fileSource?.decryptedGet()
-            self._urlDecrypted = State(initialValue: decrypted)
-            if let decrypted = decrypted {
-                self._player = State(initialValue: VideoPlayerView.getOrCreatePlayer(decrypted, false))
-                self._fullPlayer = State(initialValue: AVPlayer(url: decrypted))
-            }
-            self._url = State(initialValue: url)
-        }
+        self.smallView = smallView
+        self._showFullScreenPlayer = showFullscreenPlayer
    }

    var body: some View {
        let file = chatItem.file
-        ZStack {
+        ZStack(alignment: smallView ? .topLeading : .center) {
            ZStack(alignment: .topLeading) {
-                if let file = file, let preview = preview, let player = player, let decrypted = urlDecrypted {
+                if let file = file, let preview = preview, let decrypted = urlDecrypted, smallView {
+                    smallVideoView(decrypted, file, preview)
+                } else if let file = file, let preview = preview, let player = player, let decrypted = urlDecrypted {
                    videoView(player, decrypted, file, preview, duration)
+                } else if let file = file, let defaultPreview = preview, file.loaded && urlDecrypted == nil, smallView {
+                    smallVideoViewEncrypted(file, defaultPreview)
                } else if let file = file, let defaultPreview = preview, file.loaded && urlDecrypted == nil {
                    videoViewEncrypted(file, defaultPreview, duration)
-                } else if let preview {
-                    imageView(preview)
-                    .onTapGesture {
-                        if let file = file {
+                } else if let preview, let file {
+                    Group { if smallView { smallViewImageView(preview, file) } else { imageView(preview) } }
+                        .onTapGesture {
                            switch file.fileStatus {
                            case .rcvInvitation, .rcvAborted:
                                receiveFileIfValidSize(file: file, receiveFile: receiveFile)
@@ -82,18 +80,59 @@ struct CIVideoView: View {
                            default: ()
                            }
                        }
-                    }
                }
-                durationProgress()
+                if !smallView {
+                    durationProgress()
+                }
            }
-            if let file = file, showDownloadButton(file.fileStatus) {
+            if !smallView, let file = file, showDownloadButton(file.fileStatus) {
                Button {
                    receiveFileIfValidSize(file: file, receiveFile: receiveFile)
                } label: {
                    playPauseIcon("play.fill")
                }
+            } else if let file = file, showDownloadButton(file.fileStatus) && !file.showStatusIconInSmallView {
+                playPauseIcon("play.fill")
+                    .onTapGesture {
+                        receiveFileIfValidSize(file: file, receiveFile: receiveFile)
+                    }
            }
        }
+        .fullScreenCover(isPresented: $showFullScreenPlayer) {
+            if let decrypted = urlDecrypted {
+                fullScreenPlayer(decrypted)
+            }
+        }
+        .onAppear {
+            setupPlayer(chatItem.file)
+        }
+        .onChange(of: chatItem.file) { file in
+            // ChatItem can be changed in small view on chat list screen
+            setupPlayer(file)
+        }
+        .onDisappear {
+            showFullScreenPlayer = false
+        }
+    }
+
+    private func setupPlayer(_ file: CIFile?) {
+        let newUrl = getLoadedVideo(file)
+        if newUrl == url {
+            return
+        }
+        url = nil
+        urlDecrypted = nil
+        player = nil
+        fullPlayer = nil
+        if let newUrl {
+            let decrypted = file?.fileSource?.cryptoArgs == nil ? newUrl : file?.fileSource?.decryptedGet()
+            urlDecrypted = decrypted
+            if let decrypted = decrypted {
+                player = VideoPlayerView.getOrCreatePlayer(decrypted, false)
+                fullPlayer = AVPlayer(url: decrypted)
+            }
+            url = newUrl
+        }
    }

    private func showDownloadButton(_ fileStatus: CIFileStatus) -> Bool {
@@ -109,11 +148,6 @@ struct CIVideoView: View {
            ZStack(alignment: .center) {
                let canBePlayed = !chatItem.chatDir.sent || file.fileStatus == CIFileStatus.sndComplete || (file.fileStatus == .sndStored && file.fileProtocol == .local)
                imageView(defaultPreview)
-                .fullScreenCover(isPresented: $showFullScreenPlayer) {
-                    if let decrypted = urlDecrypted {
-                        fullScreenPlayer(decrypted)
-                    }
-                }
                .onTapGesture {
                    decrypt(file: file) {
                        showFullScreenPlayer = urlDecrypted != nil
@@ -154,9 +188,6 @@ struct CIVideoView: View {
                        videoPlaying = false
                    }
                }
-                .fullScreenCover(isPresented: $showFullScreenPlayer) {
-                    fullScreenPlayer(url)
-                }
                .onTapGesture {
                    switch player.timeControlStatus {
                    case .playing:
@@ -194,14 +225,53 @@ struct CIVideoView: View {
        }
    }

+    private func smallVideoViewEncrypted(_ file: CIFile, _ preview: UIImage) -> some View {
+        return ZStack(alignment: .topLeading) {
+            let canBePlayed = !chatItem.chatDir.sent || file.fileStatus == CIFileStatus.sndComplete || (file.fileStatus == .sndStored && file.fileProtocol == .local)
+            smallViewImageView(preview, file)
+                .onTapGesture {
+                    decrypt(file: file) {
+                        showFullScreenPlayer = urlDecrypted != nil
+                    }
+                }
+                .onChange(of: m.activeCallViewIsCollapsed) { _ in
+                    showFullScreenPlayer = false
+                }
+            if file.showStatusIconInSmallView {
+                // Show nothing
+            } else if !decryptionInProgress {
+                playPauseIcon(canBePlayed ? "play.fill" : "play.slash")
+            } else {
+                videoDecryptionProgress()
+            }
+        }
+    }
+
+    private func smallVideoView(_ url: URL, _ file: CIFile, _ preview: UIImage) -> some View {
+        return ZStack(alignment: .topLeading) {
+            smallViewImageView(preview, file)
+                .onTapGesture {
+                    showFullScreenPlayer = true
+                }
+                .onChange(of: m.activeCallViewIsCollapsed) { _ in
+                    showFullScreenPlayer = false
+                }
+
+            if !file.showStatusIconInSmallView {
+                playPauseIcon("play.fill")
+            }
+        }
+    }
+
+
    private func playPauseIcon(_ image: String, _ color: Color = .white) -> some View {
        Image(systemName: image)
        .resizable()
        .aspectRatio(contentMode: .fit)
-        .frame(width: 12, height: 12)
+        .frame(width: smallView ? 12 * sizeMultiplier * 1.6 : 12, height: smallView ? 12 * sizeMultiplier * 1.6 : 12)
        .foregroundColor(color)
-        .padding(.leading, 4)
-        .frame(width: 40, height: 40)
+        .padding(.leading, smallView ? 0 : 4)
+        .frame(width: 40 * sizeMultiplier, height: 40 * sizeMultiplier)
        .background(Color.black.opacity(0.35))
        .clipShape(Circle())
    }
@@ -209,9 +279,9 @@ struct CIVideoView: View {
    private func videoDecryptionProgress(_ color: Color = .white) -> some View {
        ProgressView()
            .progressViewStyle(.circular)
-            .frame(width: 12, height: 12)
+            .frame(width: smallView ? 12 * sizeMultiplier : 12, height: smallView ? 12 * sizeMultiplier : 12)
            .tint(color)
-            .frame(width: 40, height: 40)
+            .frame(width: smallView ? 40 * sizeMultiplier * 0.9 : 40, height: smallView ? 40 * sizeMultiplier * 0.9 : 40)
            .background(Color.black.opacity(0.35))
            .clipShape(Circle())
    }
@@ -251,6 +321,19 @@ struct CIVideoView: View {
        }
    }

+    private func smallViewImageView(_ img: UIImage, _ file: CIFile) -> some View {
+        ZStack(alignment: .center) {
+            Image(uiImage: img)
+                .resizable()
+                .aspectRatio(contentMode: .fill)
+                .frame(width: maxWidth, height: maxWidth)
+            if file.showStatusIconInSmallView {
+                fileStatusIcon()
+                    .allowsHitTesting(false)
+            }
+        }
+    }
+
    @ViewBuilder private func fileStatusIcon() -> some View {
        if let file = chatItem.file {
            switch file.fileStatus {
@@ -322,7 +405,7 @@ struct CIVideoView: View {
            .aspectRatio(contentMode: .fit)
            .frame(width: size, height: size)
            .foregroundColor(.white)
-            .padding(padding)
+            .padding(smallView ? 0 : padding)
    }

    private func progressView() -> some View {
@@ -330,7 +413,7 @@ struct CIVideoView: View {
        .progressViewStyle(.circular)
        .frame(width: 16, height: 16)
        .tint(.white)
-        .padding(11)
+        .padding(smallView ? 0 : 11)
    }

    private func progressCircle(_ progress: Int64, _ total: Int64) -> some View {
@@ -342,7 +425,7 @@ struct CIVideoView: View {
        )
        .rotationEffect(.degrees(-90))
        .frame(width: 16, height: 16)
-        .padding([.trailing, .top], 11)
+        .padding([.trailing, .top], smallView ? 0 : 11)
    }

    // TODO encrypt: where file size is checked?
@@ -382,7 +465,8 @@ struct CIVideoView: View {
            )
            .onAppear {
                DispatchQueue.main.asyncAfter(deadline: .now()) {
-                    m.stopPreviousRecPlay = url
+                    // Prevent feedback loop - setting `ChatModel`s property causes `onAppear` to be called on iOS17+
+                    if m.stopPreviousRecPlay != url { m.stopPreviousRecPlay = url }
                    if let player = fullPlayer {
                        player.play()
                        var played = false
@@ -419,10 +503,12 @@ struct CIVideoView: View {
            urlDecrypted = await file.fileSource?.decryptedGetOrCreate(&ChatModel.shared.filesToDelete)
            await MainActor.run {
                if let decrypted = urlDecrypted {
-                    player = VideoPlayerView.getOrCreatePlayer(decrypted, false)
+                    if !smallView {
+                        player = VideoPlayerView.getOrCreatePlayer(decrypted, false)
+                    }
                    fullPlayer = AVPlayer(url: decrypted)
                }
-                decryptionInProgress = true
+                decryptionInProgress = false
                completed?()
            }
        }
@@ -15,15 +15,26 @@ struct CIVoiceView: View {
    var chatItem: ChatItem
    let recordingFile: CIFile?
    let duration: Int
-    @Binding var audioPlayer: AudioPlayer?
-    @Binding var playbackState: VoiceMessagePlaybackState
-    @Binding var playbackTime: TimeInterval?
+    @State var audioPlayer: AudioPlayer? = nil
+    @State var playbackState: VoiceMessagePlaybackState = .noPlayback
+    @State var playbackTime: TimeInterval? = nil
+
    @Binding var allowMenu: Bool
+    var smallView: Bool = false
    @State private var seek: (TimeInterval) -> Void = { _ in }

    var body: some View {
        Group {
-            if chatItem.chatDir.sent {
+            if smallView {
+                HStack(spacing: 10) {
+                    player()
+                    playerTime()
+                        .allowsHitTesting(false)
+                    if .playing == playbackState || (playbackTime ?? 0) > 0 || !allowMenu {
+                        playbackSlider()
+                    }
+                }
+            } else if chatItem.chatDir.sent {
                VStack (alignment: .trailing, spacing: 6) {
                    HStack {
                        if .playing == playbackState || (playbackTime ?? 0) > 0 || !allowMenu {
@@ -55,6 +66,7 @@ struct CIVoiceView: View {

    private func player() -> some View {
        VoiceMessagePlayer(
+            chat: chat,
            chatItem: chatItem,
            recordingFile: recordingFile,
            recordingTime: TimeInterval(duration),
@@ -63,7 +75,8 @@ struct CIVoiceView: View {
            audioPlayer: $audioPlayer,
            playbackState: $playbackState,
            playbackTime: $playbackTime,
-            allowMenu: $allowMenu
+            allowMenu: $allowMenu,
+            sizeMultiplier: smallView ? voiceMessageSizeBasedOnSquareSize(36) / 56 : 1
        )
    }

@@ -119,6 +132,7 @@ struct VoiceMessagePlayerTime: View {
 }

 struct VoiceMessagePlayer: View {
+    @ObservedObject var chat: Chat
    @EnvironmentObject var chatModel: ChatModel
    @EnvironmentObject var theme: AppTheme
    var chatItem: ChatItem
@@ -130,7 +144,9 @@ struct VoiceMessagePlayer: View {
    @Binding var audioPlayer: AudioPlayer?
    @Binding var playbackState: VoiceMessagePlaybackState
    @Binding var playbackTime: TimeInterval?
+
    @Binding var allowMenu: Bool
+    var sizeMultiplier: CGFloat

    var body: some View {
        ZStack {
@@ -190,49 +206,113 @@ struct VoiceMessagePlayer: View {
            }
        }
        .onAppear {
+            if audioPlayer == nil {
+                let small = sizeMultiplier != 1
+                audioPlayer = small ? VoiceItemState.smallView[VoiceItemState.id(chat, chatItem)]?.audioPlayer : VoiceItemState.chatView[VoiceItemState.id(chat, chatItem)]?.audioPlayer
+                playbackState = (small ? VoiceItemState.smallView[VoiceItemState.id(chat, chatItem)]?.playbackState : VoiceItemState.chatView[VoiceItemState.id(chat, chatItem)]?.playbackState) ?? .noPlayback
+                playbackTime = small ? VoiceItemState.smallView[VoiceItemState.id(chat, chatItem)]?.playbackTime : VoiceItemState.chatView[VoiceItemState.id(chat, chatItem)]?.playbackTime
+            }
            seek = { to in audioPlayer?.seek(to) }
-            audioPlayer?.onTimer = { playbackTime = $0 }
+            let audioPath: URL? = if let recordingSource = getLoadedFileSource(recordingFile) {
+                getAppFilePath(recordingSource.filePath)
+            } else {
+                nil
+            }
+            let chatId = chatModel.chatId
+            let userId = chatModel.currentUser?.userId
+            audioPlayer?.onTimer = {
+                playbackTime = $0
+                notifyStateChange()
+                // Manual check here is needed because when this view is not visible, SwiftUI don't react on stopPreviousRecPlay, chatId and current user changes and audio keeps playing when it should stop
+                if (audioPath != nil && chatModel.stopPreviousRecPlay != audioPath) || chatModel.chatId != chatId || chatModel.currentUser?.userId != userId {
+                    stopPlayback()
+                }
+            }
            audioPlayer?.onFinishPlayback = {
                playbackState = .noPlayback
                playbackTime = TimeInterval(0)
+                notifyStateChange()
+            }
+            // One voice message was paused, then scrolled far from it, started to play another one, drop to stopped state
+            if let audioPath, chatModel.stopPreviousRecPlay != audioPath {
+                stopPlayback()
            }
        }
        .onChange(of: chatModel.stopPreviousRecPlay) { it in
            if let recordingFileName = getLoadedFileSource(recordingFile)?.filePath,
               chatModel.stopPreviousRecPlay != getAppFilePath(recordingFileName) {
-                audioPlayer?.stop()
-                playbackState = .noPlayback
-                playbackTime = TimeInterval(0)
+                stopPlayback()
            }
        }
        .onChange(of: playbackState) { state in
            allowMenu = state == .paused || state == .noPlayback
+            // Notify activeContentPreview in ChatPreviewView that playback is finished
+            if state == .noPlayback, let recordingFileName = getLoadedFileSource(recordingFile)?.filePath,
+               chatModel.stopPreviousRecPlay == getAppFilePath(recordingFileName) {
+                chatModel.stopPreviousRecPlay = nil
+            }
+        }
+        .onChange(of: chatModel.chatId) { _ in
+            stopPlayback()
+        }
+        .onDisappear {
+            if sizeMultiplier == 1 && chatModel.chatId == nil {
+                stopPlayback()
+            }
        }
    }

    @ViewBuilder private func playbackButton() -> some View {
-        switch playbackState {
-        case .noPlayback:
-            Button {
-                if let recordingSource = getLoadedFileSource(recordingFile) {
-                    startPlayback(recordingSource)
-                }
-            } label: {
+        if sizeMultiplier != 1 {
+            switch playbackState {
+            case .noPlayback:
                playPauseIcon("play.fill", theme.colors.primary)
-            }
-        case .playing:
-            Button {
-                audioPlayer?.pause()
-                playbackState = .paused
-            } label: {
+                    .onTapGesture {
+                        if let recordingSource = getLoadedFileSource(recordingFile) {
+                            startPlayback(recordingSource)
+                        }
+                    }
+            case .playing:
                playPauseIcon("pause.fill", theme.colors.primary)
-            }
-        case .paused:
-            Button {
-                audioPlayer?.play()
-                playbackState = .playing
-            } label: {
+                    .onTapGesture {
+                        audioPlayer?.pause()
+                        playbackState = .paused
+                        notifyStateChange()
+                    }
+            case .paused:
                playPauseIcon("play.fill", theme.colors.primary)
+                    .onTapGesture {
+                        audioPlayer?.play()
+                        playbackState = .playing
+                        notifyStateChange()
+                    }
+            }
+        } else {
+            switch playbackState {
+            case .noPlayback:
+                Button {
+                    if let recordingSource = getLoadedFileSource(recordingFile) {
+                        startPlayback(recordingSource)
+                    }
+                } label: {
+                    playPauseIcon("play.fill", theme.colors.primary)
+                }
+            case .playing:
+                Button {
+                    audioPlayer?.pause()
+                    playbackState = .paused
+                    notifyStateChange()
+                } label: {
+                    playPauseIcon("pause.fill", theme.colors.primary)
+                }
+            case .paused:
+                Button {
+                    audioPlayer?.play()
+                    playbackState = .playing
+                    notifyStateChange()
+                } label: {
+                    playPauseIcon("play.fill", theme.colors.primary)
+                }
            }
        }
    }
@@ -242,28 +322,49 @@ struct VoiceMessagePlayer: View {
            Image(systemName: image)
                .resizable()
                .aspectRatio(contentMode: .fit)
-                .frame(width: 20, height: 20)
+                .frame(width: 20 * sizeMultiplier, height: 20 * sizeMultiplier)
                .foregroundColor(color)
                .padding(.leading, image == "play.fill" ? 4 : 0)
-                .frame(width: 56, height: 56)
+                .frame(width: 56 * sizeMultiplier, height: 56 * sizeMultiplier)
                .background(showBackground ? chatItemFrameColor(chatItem, theme) : .clear)
                .clipShape(Circle())
            if recordingTime > 0 {
                ProgressCircle(length: recordingTime, progress: $playbackTime)
-                    .frame(width: 53, height: 53) // this + ProgressCircle lineWidth = background circle diameter
+                    .frame(width: 53 * sizeMultiplier, height: 53 * sizeMultiplier) // this + ProgressCircle lineWidth = background circle diameter
            }
        }
    }

    private func downloadButton(_ recordingFile: CIFile, _ icon: String) -> some View {
-        Button {
-            Task {
-                if let user = chatModel.currentUser {
-                    await receiveFile(user: user, fileId: recordingFile.fileId)
+        Group {
+            if sizeMultiplier != 1 {
+                playPauseIcon(icon, theme.colors.primary)
+                    .onTapGesture {
+                        Task {
+                            if let user = chatModel.currentUser {
+                                await receiveFile(user: user, fileId: recordingFile.fileId)
+                            }
+                        }
+                    }
+            } else {
+                Button {
+                    Task {
+                        if let user = chatModel.currentUser {
+                            await receiveFile(user: user, fileId: recordingFile.fileId)
+                        }
+                    }
+                } label: {
+                    playPauseIcon(icon, theme.colors.primary)
                }
            }
-        } label: {
-            playPauseIcon(icon, theme.colors.primary)
+        }
+    }
+
+    func notifyStateChange() {
+        if sizeMultiplier != 1 {
+            VoiceItemState.smallView[VoiceItemState.id(chat, chatItem)] = VoiceItemState(audioPlayer: audioPlayer, playbackState: playbackState, playbackTime: playbackTime)
+        } else {
+            VoiceItemState.chatView[VoiceItemState.id(chat, chatItem)] = VoiceItemState(audioPlayer: audioPlayer, playbackState: playbackState, playbackTime: playbackTime)
        }
    }

@@ -288,33 +389,96 @@ struct VoiceMessagePlayer: View {
        Image(systemName: image)
            .resizable()
            .aspectRatio(contentMode: .fit)
-            .frame(width: size, height: size)
+            .frame(width: size * sizeMultiplier, height: size * sizeMultiplier)
            .foregroundColor(Color(uiColor: .tertiaryLabel))
-            .frame(width: 56, height: 56)
+            .frame(width: 56 * sizeMultiplier, height: 56 * sizeMultiplier)
            .background(showBackground ? chatItemFrameColor(chatItem, theme) : .clear)
            .clipShape(Circle())
    }

    private func loadingIcon() -> some View {
        ProgressView()
-            .frame(width: 30, height: 30)
-            .frame(width: 56, height: 56)
+            .frame(width: 30 * sizeMultiplier, height: 30 * sizeMultiplier)
+            .frame(width: 56 * sizeMultiplier, height: 56 * sizeMultiplier)
            .background(showBackground ? chatItemFrameColor(chatItem, theme) : .clear)
            .clipShape(Circle())
    }

    private func startPlayback(_ recordingSource: CryptoFile) {
-        chatModel.stopPreviousRecPlay = getAppFilePath(recordingSource.filePath)
+        let audioPath = getAppFilePath(recordingSource.filePath)
+        let chatId = chatModel.chatId
+        let userId = chatModel.currentUser?.userId
+        chatModel.stopPreviousRecPlay = audioPath
        audioPlayer = AudioPlayer(
-            onTimer: { playbackTime = $0 },
+            onTimer: {
+                playbackTime = $0
+                notifyStateChange()
+                // Manual check here is needed because when this view is not visible, SwiftUI don't react on stopPreviousRecPlay, chatId and current user changes and audio keeps playing when it should stop
+                if chatModel.stopPreviousRecPlay != audioPath || chatModel.chatId != chatId || chatModel.currentUser?.userId != userId {
+                    stopPlayback()
+                }
+            },
            onFinishPlayback: {
                playbackState = .noPlayback
                playbackTime = TimeInterval(0)
+                notifyStateChange()
            }
        )
        audioPlayer?.start(fileSource: recordingSource, at: playbackTime)
        playbackState = .playing
+        notifyStateChange()
    }
+
+    private func stopPlayback() {
+        audioPlayer?.stop()
+        playbackState = .noPlayback
+        playbackTime = TimeInterval(0)
+        notifyStateChange()
+    }
+}
+
+func voiceMessageSizeBasedOnSquareSize(_ squareSize: CGFloat) -> CGFloat {
+    let squareToCircleRatio = 0.935
+    return squareSize + squareSize * (1 - squareToCircleRatio)
+}
+
+class VoiceItemState {
+    var audioPlayer: AudioPlayer?
+    var playbackState: VoiceMessagePlaybackState
+    var playbackTime: TimeInterval?
+
+    init(audioPlayer: AudioPlayer? = nil, playbackState: VoiceMessagePlaybackState, playbackTime: TimeInterval? = nil) {
+        self.audioPlayer = audioPlayer
+        self.playbackState = playbackState
+        self.playbackTime = playbackTime
+    }
+
+    static func id(_ chat: Chat, _ chatItem: ChatItem) -> String {
+        "\(chat.id) \(chatItem.id)"
+    }
+
+    static func id(_ chatInfo: ChatInfo, _ chatItem: ChatItem) -> String {
+        "\(chatInfo.id) \(chatItem.id)"
+    }
+
+    static func stopVoiceInSmallView(_ chatInfo: ChatInfo, _ chatItem: ChatItem) {
+        let id = id(chatInfo, chatItem)
+        if let item = smallView[id] {
+            item.audioPlayer?.stop()
+            ChatModel.shared.stopPreviousRecPlay = nil
+        }
+    }
+
+    static func stopVoiceInChatView(_ chatInfo: ChatInfo, _ chatItem: ChatItem) {
+        let id = id(chatInfo, chatItem)
+        if let item = chatView[id] {
+            item.audioPlayer?.stop()
+            ChatModel.shared.stopPreviousRecPlay = nil
+        }
+    }
+
+    static var smallView: [String: VoiceItemState] = [:]
+    static var chatView: [String: VoiceItemState] = [:]
 }

 struct CIVoiceView_Previews: PreviewProvider {
@@ -339,15 +503,12 @@ struct CIVoiceView_Previews: PreviewProvider {
                chatItem: ChatItem.getVoiceMsgContentSample(),
                recordingFile: CIFile.getSample(fileName: "voice.m4a", fileSize: 65536, fileStatus: .rcvComplete),
                duration: 30,
-                audioPlayer: .constant(nil),
-                playbackState: .constant(.playing),
-                playbackTime: .constant(TimeInterval(20)),
                allowMenu: Binding.constant(true)
            )
-            ChatItemView(chat: Chat.sampleData, chatItem: sentVoiceMessage, revealed: Binding.constant(false), allowMenu: .constant(true), playbackState: .constant(.noPlayback), playbackTime: .constant(nil))
-            ChatItemView(chat: Chat.sampleData, chatItem: ChatItem.getVoiceMsgContentSample(), revealed: Binding.constant(false), allowMenu: .constant(true), playbackState: .constant(.noPlayback), playbackTime: .constant(nil))
-            ChatItemView(chat: Chat.sampleData, chatItem: ChatItem.getVoiceMsgContentSample(fileStatus: .rcvTransfer(rcvProgress: 7, rcvTotal: 10)), revealed: Binding.constant(false), allowMenu: .constant(true), playbackState: .constant(.noPlayback), playbackTime: .constant(nil))
-            ChatItemView(chat: Chat.sampleData, chatItem: voiceMessageWtFile, revealed: Binding.constant(false), allowMenu: .constant(true), playbackState: .constant(.noPlayback), playbackTime: .constant(nil))
+            ChatItemView(chat: Chat.sampleData, chatItem: sentVoiceMessage, revealed: Binding.constant(false), allowMenu: .constant(true))
+            ChatItemView(chat: Chat.sampleData, chatItem: ChatItem.getVoiceMsgContentSample(), revealed: Binding.constant(false), allowMenu: .constant(true))
+            ChatItemView(chat: Chat.sampleData, chatItem: ChatItem.getVoiceMsgContentSample(fileStatus: .rcvTransfer(rcvProgress: 7, rcvTotal: 10)), revealed: Binding.constant(false), allowMenu: .constant(true))
+            ChatItemView(chat: Chat.sampleData, chatItem: voiceMessageWtFile, revealed: Binding.constant(false), allowMenu: .constant(true))
        }
        .previewLayout(.fixed(width: 360, height: 360))
    }
@@ -13,21 +13,23 @@ import SimpleXChat

 struct FramedCIVoiceView: View {
    @EnvironmentObject var theme: AppTheme
+    @ObservedObject var chat: Chat
    var chatItem: ChatItem
    let recordingFile: CIFile?
    let duration: Int
-    
+
+    @State var audioPlayer: AudioPlayer? = nil
+    @State var playbackState: VoiceMessagePlaybackState = .noPlayback
+    @State var playbackTime: TimeInterval? = nil
+
    @Binding var allowMenu: Bool
-    
-    @Binding var audioPlayer: AudioPlayer?
-    @Binding var playbackState: VoiceMessagePlaybackState
-    @Binding var playbackTime: TimeInterval?
-    
+
    @State private var seek: (TimeInterval) -> Void = { _ in }
    
    var body: some View {
        HStack {
            VoiceMessagePlayer(
+                chat: chat,
                chatItem: chatItem,
                recordingFile: recordingFile,
                recordingTime: TimeInterval(duration),
@@ -36,7 +38,8 @@ struct FramedCIVoiceView: View {
                audioPlayer: $audioPlayer,
                playbackState: $playbackState,
                playbackTime: $playbackTime,
-                allowMenu: $allowMenu
+                allowMenu: $allowMenu,
+                sizeMultiplier: 1
            )
            VoiceMessagePlayerTime(
                recordingTime: TimeInterval(duration),
@@ -16,28 +16,20 @@ struct ChatItemView: View {
    var maxWidth: CGFloat = .infinity
    @Binding var revealed: Bool
    @Binding var allowMenu: Bool
-    @Binding var audioPlayer: AudioPlayer?
-    @Binding var playbackState: VoiceMessagePlaybackState
-    @Binding var playbackTime: TimeInterval?
+
    init(
        chat: Chat,
        chatItem: ChatItem,
        showMember: Bool = false,
        maxWidth: CGFloat = .infinity,
        revealed: Binding<Bool>,
-        allowMenu: Binding<Bool> = .constant(false),
-        audioPlayer: Binding<AudioPlayer?> = .constant(nil),
-        playbackState: Binding<VoiceMessagePlaybackState> = .constant(.noPlayback),
-        playbackTime: Binding<TimeInterval?> = .constant(nil)
+        allowMenu: Binding<Bool> = .constant(false)
    ) {
        self.chat = chat
        self.chatItem = chatItem
        self.maxWidth = maxWidth
        _revealed = revealed
        _allowMenu = allowMenu
-        _audioPlayer = audioPlayer
-        _playbackState = playbackState
-        _playbackTime = playbackTime
    }

    var body: some View {
@@ -48,7 +40,7 @@ struct ChatItemView: View {
            if let mc = ci.content.msgContent, mc.isText && isShortEmoji(ci.content.text) {
                EmojiItemView(chat: chat, chatItem: ci)
            } else if ci.content.text.isEmpty, case let .voice(_, duration) = ci.content.msgContent {
-                CIVoiceView(chat: chat, chatItem: ci, recordingFile: ci.file, duration: duration, audioPlayer: $audioPlayer, playbackState: $playbackState, playbackTime: $playbackTime, allowMenu: $allowMenu)
+                CIVoiceView(chat: chat, chatItem: ci, recordingFile: ci.file, duration: duration, allowMenu: $allowMenu)
            } else if ci.content.msgContent == nil {
                ChatItemContentView(chat: chat, chatItem: chatItem, revealed: $revealed, msgContentView: { Text(ci.text) }) // msgContent is unreachable branch in this case
            } else {
@@ -84,10 +76,7 @@ struct ChatItemView: View {
            maxWidth: maxWidth,
            imgWidth: adjustedMaxWidth,
            videoWidth: adjustedMaxWidth,
-            allowMenu: $allowMenu,
-            audioPlayer: $audioPlayer,
-            playbackState: $playbackState,
-            playbackTime: $playbackTime
+            allowMenu: $allowMenu
        )
    }
 }
@@ -96,6 +96,7 @@ struct ChatView: View {
        }
        .onChange(of: chatModel.chatId) { cId in
            showChatInfoSheet = false
+            stopAudioPlayer()
            if let cId {
                if let c = chatModel.getChat(cId) {
                    chat = c
@@ -117,6 +118,7 @@ struct ChatView: View {
        .environmentObject(scrollModel)
        .onDisappear {
            VideoPlayerView.players.removeAll()
+            stopAudioPlayer()
            if chatModel.chatId == cInfo.id && !presentationMode.wrappedValue.isPresented {
                chatModel.chatId = nil
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.35) {
@@ -589,6 +591,11 @@ struct ChatView: View {
        }
    }

+    func stopAudioPlayer() {
+        VoiceItemState.chatView.values.forEach { $0.audioPlayer?.stop() }
+        VoiceItemState.chatView = [:]
+    }
+
    @ViewBuilder private func chatItemView(_ ci: ChatItem, _ maxWidth: CGFloat) -> some View {
        ChatItemWithMenu(
            chat: chat,
@@ -620,10 +627,6 @@ struct ChatView: View {

        @State private var allowMenu: Bool = true

-        @State private var audioPlayer: AudioPlayer?
-        @State private var playbackState: VoiceMessagePlaybackState = .noPlayback
-        @State private var playbackTime: TimeInterval?
-
        var revealed: Bool { chatItem == revealedChatItem }

        var body: some View {
@@ -742,10 +745,7 @@ struct ChatView: View {
                    chatItem: ci,
                    maxWidth: maxWidth,
                    revealed: .constant(revealed),
-                    allowMenu: $allowMenu,
-                    audioPlayer: $audioPlayer,
-                    playbackState: $playbackState,
-                    playbackTime: $playbackTime
+                    allowMenu: $allowMenu
                )
                .modifier(ChatItemClipped(ci))
                .contextMenu { menu(ci, range, live: composeState.liveMessage != nil) }
@@ -772,14 +772,6 @@ struct ChatView: View {
                }
                .frame(maxWidth: maxWidth, maxHeight: .infinity, alignment: alignment)
                .frame(minWidth: 0, maxWidth: .infinity, alignment: alignment)
-                .onDisappear {
-                    if ci.content.msgContent?.isVoice == true {
-                        allowMenu = true
-                        audioPlayer?.stop()
-                        playbackState = .noPlayback
-                        playbackTime = TimeInterval(0)
-                    }
-                }
                .sheet(isPresented: $showChatItemInfoSheet, onDismiss: {
                    chatItemInfo = nil
                }) {
@@ -21,6 +21,7 @@ struct ChatListView: View {
    @State private var newChatMenuOption: NewChatMenuOption? = nil
    @State private var userPickerVisible = false
    @State private var showConnectDesktop = false
+
    @AppStorage(DEFAULT_SHOW_UNREAD_AND_FAVORITES) private var showUnreadAndFavorites = false

    var body: some View {
@@ -162,6 +163,10 @@ struct ChatListView: View {
                    chatModel.chatToTop = nil
                    chatModel.popChat(chatId)
                }
+                stopAudioPlayer()
+            }
+            .onChange(of: chatModel.currentUser?.userId) { _ in
+                stopAudioPlayer()
            }
            if cs.isEmpty && !chatModel.chats.isEmpty {
                Text("No filtered chats").foregroundColor(theme.colors.secondary)
@@ -217,6 +222,11 @@ struct ChatListView: View {
        }
    }

+    func stopAudioPlayer() {
+        VoiceItemState.smallView.values.forEach { $0.audioPlayer?.stop() }
+        VoiceItemState.smallView = [:]
+    }
+
    private func filteredChats() -> [Chat] {
        if let linkChatId = searchChatFilteredBySimplexLink {
            return chatModel.chats.filter { $0.id == linkChatId }
@@ -16,6 +16,8 @@ struct ChatPreviewView: View {
    @Binding var progressByTimeout: Bool
    @State var deleting: Bool = false
    var darkGreen = Color(red: 0, green: 0.5, blue: 0)
+    @State private var activeContentPreview: ActiveContentPreview? = nil
+    @State private var showFullscreenGallery: Bool = false

    @AppStorage(DEFAULT_PRIVACY_SHOW_CHAT_PREVIEWS) private var showChatPreviews = true

@@ -43,11 +45,38 @@ struct ChatPreviewView: View {
                .padding(.horizontal, 8)

                ZStack(alignment: .topTrailing) {
-                    chatMessagePreview(cItem)
+                    let chat = activeContentPreview?.chat ?? chat
+                    let ci = activeContentPreview?.ci ?? chat.chatItems.last
+                    let mc = ci?.content.msgContent
+                    HStack(alignment: .top) {
+                        let deleted = ci?.isDeletedContent == true || ci?.meta.itemDeleted != nil
+                        let showContentPreview = (showChatPreviews && chatModel.draftChatId != chat.id && !deleted) || activeContentPreview != nil
+                        if let ci, showContentPreview {
+                            chatItemContentPreview(chat, ci)
+                        }
+                        let mcIsVoice = switch mc { case .voice: true; default: false }
+                        if !mcIsVoice || !showContentPreview || mc?.text != "" || chatModel.draftChatId == chat.id {
+                            let hasFilePreview = if case .file = mc { true } else { false }
+                            chatMessagePreview(cItem, hasFilePreview)
+                        } else {
+                            Spacer()
+                            chatInfoIcon(chat).frame(minWidth: 37, alignment: .trailing)
+                        }
+                    }
+                    .onChange(of: chatModel.stopPreviousRecPlay?.path) { _ in
+                        checkActiveContentPreview(chat, ci, mc)
+                    }
+                    .onChange(of: activeContentPreview) { _ in
+                        checkActiveContentPreview(chat, ci, mc)
+                    }
+                    .onChange(of: showFullscreenGallery) { _ in
+                        checkActiveContentPreview(chat, ci, mc)
+                    }
                    chatStatusImage()
                        .padding(.top, 26)
                        .frame(maxWidth: .infinity, alignment: .trailing)
                }
+                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.trailing, 8)
                
                Spacer()
@@ -57,6 +86,33 @@ struct ChatPreviewView: View {
        .padding(.bottom, -8)
        .onChange(of: chatModel.deletedChats.contains(chat.chatInfo.id)) { contains in
            deleting = contains
+            // Stop voice when deleting the chat
+            if contains, let ci = activeContentPreview?.ci {
+                VoiceItemState.stopVoiceInSmallView(chat.chatInfo, ci)
+            }
+        }
+
+        func checkActiveContentPreview(_ chat: Chat, _ ci: ChatItem?, _ mc: MsgContent?) {
+            let playing = chatModel.stopPreviousRecPlay
+            if case .voice = activeContentPreview?.mc, playing == nil {
+                activeContentPreview = nil
+            } else if activeContentPreview == nil {
+                if case .image = mc, let ci, let mc, showFullscreenGallery {
+                    activeContentPreview = ActiveContentPreview(chat: chat, ci: ci, mc: mc)
+                }
+                if case .video = mc, let ci, let mc, showFullscreenGallery {
+                    activeContentPreview = ActiveContentPreview(chat: chat, ci: ci, mc: mc)
+                }
+                if case .voice = mc, let ci, let mc, let fileSource = ci.file?.fileSource, playing?.path.hasSuffix(fileSource.filePath) == true {
+                    activeContentPreview = ActiveContentPreview(chat: chat, ci: ci, mc: mc)
+                }
+            } else if case .voice = activeContentPreview?.mc {
+                if let playing, let fileSource = ci?.file?.fileSource, !playing.path.hasSuffix(fileSource.filePath) {
+                    activeContentPreview = nil
+                }
+            } else if !showFullscreenGallery {
+                activeContentPreview = nil
+            }
        }
    }

@@ -113,39 +169,46 @@ struct ChatPreviewView: View {
            .kerning(-2)
    }

-    private func chatPreviewLayout(_ text: Text, draft: Bool = false) -> some View {
+    private func chatPreviewLayout(_ text: Text?, draft: Bool = false, _ hasFilePreview: Bool = false) -> some View {
        ZStack(alignment: .topTrailing) {
            let t = text
                .lineLimit(2)
                .multilineTextAlignment(.leading)
                .frame(maxWidth: .infinity, alignment: .topLeading)
-                .padding(.leading, 8)
-                .padding(.trailing, 36)
+                .padding(.leading, hasFilePreview ? 0 : 8)
+                .padding(.trailing, hasFilePreview ? 38 : 36)
+                .offset(x: hasFilePreview ? -2 : 0)
            if !showChatPreviews && !draft {
                t.privacySensitive(true).redacted(reason: .privacy)
            } else {
                t
            }
-            let s = chat.chatStats
-            if s.unreadCount > 0 || s.unreadChat {
-                unreadCountText(s.unreadCount)
-                    .font(.caption)
-                    .foregroundColor(.white)
-                    .padding(.horizontal, 4)
-                    .frame(minWidth: 18, minHeight: 18)
-                    .background(chat.chatInfo.ntfsEnabled || chat.chatInfo.chatType == .local ? theme.colors.primary : theme.colors.secondary)
-                    .cornerRadius(10)
-            } else if !chat.chatInfo.ntfsEnabled && chat.chatInfo.chatType != .local {
-                Image(systemName: "speaker.slash.fill")
-                    .foregroundColor(theme.colors.secondary)
-            } else if chat.chatInfo.chatSettings?.favorite ?? false {
-                Image(systemName: "star.fill")
-                    .resizable()
-                    .scaledToFill()
-                    .frame(width: 18, height: 18)
-                    .padding(.trailing, 1)
-                    .foregroundColor(.secondary.opacity(0.65))
-            }
+            chatInfoIcon(chat).frame(minWidth: 37, alignment: .trailing)
+        }
+    }
+
+    @ViewBuilder private func chatInfoIcon(_ chat: Chat) -> some View {
+        let s = chat.chatStats
+        if s.unreadCount > 0 || s.unreadChat {
+            unreadCountText(s.unreadCount)
+                .font(.caption)
+                .foregroundColor(.white)
+                .padding(.horizontal, 4)
+                .frame(minWidth: 18, minHeight: 18)
+                .background(chat.chatInfo.ntfsEnabled || chat.chatInfo.chatType == .local ? theme.colors.primary : theme.colors.secondary)
+                .cornerRadius(10)
+        } else if !chat.chatInfo.ntfsEnabled && chat.chatInfo.chatType != .local {
+            Image(systemName: "speaker.slash.fill")
+                .foregroundColor(theme.colors.secondary)
+        } else if chat.chatInfo.chatSettings?.favorite ?? false {
+            Image(systemName: "star.fill")
+                .resizable()
+                .scaledToFill()
+                .frame(width: 18, height: 18)
+                .padding(.trailing, 1)
+                .foregroundColor(.secondary.opacity(0.65))
+        } else {
+            Color.clear.frame(width: 0)
        }
    }

@@ -172,7 +235,7 @@ struct ChatPreviewView: View {
    func chatItemPreview(_ cItem: ChatItem) -> Text {
        let itemText = cItem.meta.itemDeleted == nil ? cItem.text : markedDeletedText()
        let itemFormattedText = cItem.meta.itemDeleted == nil ? cItem.formattedText : nil
-        return messageText(itemText, itemFormattedText, cItem.memberDisplayName, icon: attachment(), preview: true, showSecrets: false, secondaryColor: theme.colors.secondary)
+        return messageText(itemText, itemFormattedText, cItem.memberDisplayName, icon: nil, preview: true, showSecrets: false, secondaryColor: theme.colors.secondary)

        // same texts are in markedDeletedText in MarkedDeletedItemView, but it returns LocalizedStringKey;
        // can be refactored into a single function if functions calling these are changed to return same type
@@ -196,11 +259,11 @@ struct ChatPreviewView: View {
        }
    }

-    @ViewBuilder private func chatMessagePreview(_ cItem: ChatItem?) -> some View {
+    @ViewBuilder private func chatMessagePreview(_ cItem: ChatItem?, _ hasFilePreview: Bool = false) -> some View {
        if chatModel.draftChatId == chat.id, let draft = chatModel.draft {
-            chatPreviewLayout(messageDraft(draft), draft: true)
+            chatPreviewLayout(messageDraft(draft), draft: true, hasFilePreview)
        } else if let cItem = cItem {
-            chatPreviewLayout(itemStatusMark(cItem) + chatItemPreview(cItem))
+            chatPreviewLayout(itemStatusMark(cItem) + chatItemPreview(cItem), hasFilePreview)
        } else {
            switch (chat.chatInfo) {
            case let .direct(contact):
@@ -225,6 +288,54 @@ struct ChatPreviewView: View {
        }
    }

+    @ViewBuilder func chatItemContentPreview(_ chat: Chat, _ ci: ChatItem) -> some View {
+        let mc = ci.content.msgContent
+        switch mc {
+        case let .link(_, preview):
+            smallContentPreview(
+                ZStack(alignment: .topTrailing) {
+                    Image(uiImage: UIImage(base64Encoded: preview.image) ?? UIImage(systemName: "arrow.up.right")!)
+                        .resizable()
+                        .aspectRatio(contentMode: .fill)
+                        .frame(width: 36, height: 36)
+                    ZStack {
+                        Image(systemName: "arrow.up.right")
+                            .resizable()
+                            .foregroundColor(Color.white)
+                            .font(.system(size: 15, weight: .black))
+                            .frame(width: 8, height: 8)
+                    }
+                    .frame(width: 16, height: 16)
+                    .background(Color.black.opacity(0.25))
+                    .cornerRadius(8)
+                }
+                .onTapGesture {
+                    UIApplication.shared.open(preview.uri)
+                }
+            )
+        case let .image(_, image):
+            smallContentPreview(
+                CIImageView(chatItem: ci, preview: UIImage(base64Encoded: image), maxWidth: 36, smallView: true, showFullScreenImage: $showFullscreenGallery)
+                    .environmentObject(ReverseListScrollModel<ChatItem>())
+            )
+        case let .video(_,image, duration):
+            smallContentPreview(
+                CIVideoView(chatItem: ci, preview: UIImage(base64Encoded: image), duration: duration, maxWidth: 36, videoWidth: nil, smallView: true, showFullscreenPlayer: $showFullscreenGallery)
+                    .environmentObject(ReverseListScrollModel<ChatItem>())
+            )
+        case let .voice(_, duration):
+            smallContentPreviewVoice(
+                CIVoiceView(chat: chat, chatItem: ci, recordingFile: ci.file, duration: duration, allowMenu: Binding.constant(true), smallView: true)
+            )
+        case .file:
+            smallContentPreviewFile(
+                CIFileView(file: ci.file, edited: ci.meta.itemEdited, smallView: true)
+            )
+        default: EmptyView()
+        }
+    }
+
+
    @ViewBuilder private func groupInvitationPreviewText(_ groupInfo: GroupInfo) -> some View {
        groupInfo.membership.memberIncognito
        ? chatPreviewInfoText("join as \(groupInfo.membership.memberProfile.displayName)")
@@ -294,10 +405,50 @@ struct ChatPreviewView: View {
    }
 }

+func smallContentPreview(_ view: some View) -> some View {
+    ZStack {
+        view
+        .frame(width: 36, height: 36)
+    }
+    .cornerRadius(8)
+    .overlay(RoundedRectangle(cornerSize: CGSize(width: 8, height: 8))
+        .strokeBorder(.secondary, lineWidth: 0.3, antialiased: true))
+    .padding([.top, .leading], 3)
+    .offset(x: 6)
+}
+
+func smallContentPreviewVoice(_ view: some View) -> some View {
+    ZStack {
+        view
+        .frame(height: voiceMessageSizeBasedOnSquareSize(36))
+    }
+    .padding(.leading, 8)
+    .padding(.top, 6)
+}
+
+func smallContentPreviewFile(_ view: some View) -> some View {
+    ZStack {
+        view
+        .frame(width: 36, height: 36)
+    }
+    .padding(.top, 2)
+    .padding(.leading, 5)
+}
+
 func unreadCountText(_ n: Int) -> Text {
    Text(n > 999 ? "\(n / 1000)k" : n > 0 ? "\(n)" : "")
 }

+private struct ActiveContentPreview: Equatable {
+    var chat: Chat
+    var ci: ChatItem
+    var mc: MsgContent
+
+    static func == (lhs: ActiveContentPreview, rhs: ActiveContentPreview) -> Bool {
+        lhs.chat.id == rhs.chat.id && lhs.ci.id == rhs.ci.id && lhs.mc == rhs.mc
+    }
+}
+
 struct ChatPreviewView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
@@ -1977,8 +1977,8 @@
 			isa = XCRemoteSwiftPackageReference;
 			repositoryURL = "https://github.com/twostraws/CodeScanner";
 			requirement = {
-				kind = upToNextMajorVersion;
-				minimumVersion = 2.0.0;
+				kind = exactVersion;
+				version = 2.1.1;
 			};
 		};
 		8C73C1162C21E17B00892670 /* XCRemoteSwiftPackageReference "Yams" */ = {
@@ -2001,8 +2001,8 @@
 			isa = XCRemoteSwiftPackageReference;
 			repositoryURL = "https://github.com/kirualex/SwiftyGif";
 			requirement = {
-				branch = master;
-				kind = branch;
+				kind = revision;
+				revision = 5e8619335d394901379c9add5c4c1c2f420b3800;
 			};
 		};
 		D7F0E33729964E7D0068AF69 /* XCRemoteSwiftPackageReference "lzstring-swift" */ = {
@@ -1,5 +1,4 @@
 {
-  "originHash" : "e2611d1e91fd8071abc106776ba14ee2e395d2ad08a78e073381294abc10f115",
  "pins" : [
    {
      "identity" : "codescanner",
@@ -23,7 +22,6 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/kirualex/SwiftyGif",
      "state" : {
-        "branch" : "master",
        "revision" : "5e8619335d394901379c9add5c4c1c2f420b3800"
      }
    },
@@ -45,5 +43,5 @@
      }
    }
  ],
-  "version" : 3
+  "version" : 2
 }
@@ -3294,6 +3294,28 @@ public struct CIFile: Decodable, Hashable {
            }
        }
    }
+
+    public var showStatusIconInSmallView: Bool {
+        get {
+            switch fileStatus {
+            case .sndStored: fileProtocol != .local
+            case .sndTransfer: true
+            case .sndComplete: false
+            case .sndCancelled: true
+            case .sndError: true
+            case .sndWarning: true
+            case .rcvInvitation: false
+            case .rcvAccepted: true
+            case .rcvTransfer: true
+            case .rcvAborted: true
+            case .rcvCancelled: true
+            case .rcvComplete: false
+            case .rcvError: true
+            case .rcvWarning: true
+            case .invalid: true
+            }
+        }
+    }
 }

 public struct CryptoFile: Codable, Hashable {