element-x-ios/ElementX/Sources/Screens/Timeline/View/TimelineItemViews/VideoRoomTimelineView.swift

//
// Copyright 2025 Element Creations Ltd.
// Copyright 2022-2025 New Vector Ltd.
//
// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial.
// Please see LICENSE files in the repository root for full details.
//

import Compound
import SwiftUI

struct VideoRoomTimelineView: View {
    @Environment(\.timelineContext) private var context
    let timelineItem: VideoRoomTimelineItem
    
    @State private var contentScanningFailure: ContentScanningFailure?
    
    private var hasMediaCaption: Bool {
        timelineItem.content.caption != nil
    }
    
    var body: some View {
        TimelineStyler(timelineItem: timelineItem) {
            // The caption sits 8pts below the content scanner failure placeholder, 4pts below the media.
            VStack(alignment: .leading, spacing: contentScanningFailure == nil ? 4 : 8) {
                ContentScanningView(contentScannerService: context?.contentScannerService,
                                    mediaSource: timelineItem.content.videoInfo.source,
                                    thumbnailSource: timelineItem.content.thumbnailInfo?.source) {
                    thumbnail
                        .timelineMediaFrame(imageInfo: timelineItem.content.thumbnailInfo)
                        .accessibilityElement(children: .ignore)
                        .accessibilityLabel(L10n.commonVideo)
                        // This clip shape is distinct from the one in the styler as that one
                        // operates on the entire message so wouldn't round the bottom corners.
                        .clipShape(RoundedRectangle(cornerRadius: hasMediaCaption ? 6 : 0))
                        .onTapGesture {
                            context?.send(viewAction: .mediaTapped(itemID: timelineItem.id))
                        }
                } scanningContent: {
                    placeholder
                        .overlay { ProgressView() }
                        .timelineMediaFrame(imageInfo: timelineItem.content.thumbnailInfo)
                } unsafeContent: { failure in
                    ContentScanningFailureView(failure: failure)
                }
                
                if let attributedCaption = timelineItem.content.formattedCaption {
                    FormattedBodyText(attributedString: attributedCaption,
                                      trailingReservedSize: timelineItem.trailingReservedSize,
                                      boostFontSize: timelineItem.shouldBoost)
                } else if let caption = timelineItem.content.caption {
                    FormattedBodyText(text: caption,
                                      trailingReservedSize: timelineItem.trailingReservedSize,
                                      boostFontSize: timelineItem.shouldBoost)
                }
            }
            .onPreferenceChange(ContentScanningFailurePreferenceKey.self) { contentScanningFailure = $0 }
        }
    }
    
    @ViewBuilder
    var thumbnail: some View {
        if let thumbnailSource = timelineItem.content.thumbnailInfo?.source {
            LoadableImage(mediaSource: thumbnailSource,
                          mediaType: .timelineItem(uniqueID: timelineItem.id.uniqueID),
                          blurhash: timelineItem.content.blurhash,
                          size: timelineItem.content.thumbnailInfo?.size,
                          mediaProvider: context?.mediaProvider) { imageView in
                imageView
                    .overlay { playIcon }
            } placeholder: {
                placeholder
            }
        } else {
            playIcon
        }
    }
    
    var playIcon: some View {
        CompoundIcon(\.playSolid, size: .medium, relativeTo: .compound.headingLG)
            .foregroundStyle(.compound.iconPrimary)
            .padding(13)
            .background {
                ZStack {
                    Circle().fill(.compound.bgSubtleSecondary)
                    Circle().stroke(.compound.borderInteractiveSecondary)
                }
            }
    }
    
    var placeholder: some View {
        Rectangle()
            .foregroundStyle(timelineItem.isOutgoing ? .compound._bgBubbleOutgoing : .compound._bgBubbleIncoming)
            .opacity(0.3)
    }
}

struct VideoRoomTimelineView_Previews: PreviewProvider, TestablePreview {
    static let viewModel = TimelineViewModel.mock
    static let scanningViewModel = TimelineViewModel.mock(contentScannerService: ContentScannerServiceMock(.init(scanResult: nil)))
    static let unsafeViewModel = TimelineViewModel.mock(contentScannerService: ContentScannerServiceMock(.init(scanResult: false)))
    
    static var previews: some View {
        ScrollView {
            VStack(spacing: 20.0) {
                VideoRoomTimelineView(timelineItem: makeTimelineItem())
                VideoRoomTimelineView(timelineItem: makeTimelineItem(isEdited: true))
                
                // Blurhash item?
                
                VideoRoomTimelineView(timelineItem: makeTimelineItem(caption: "This is a great video 😎"))
                VideoRoomTimelineView(timelineItem: makeTimelineItem(caption: "This is a great video with a really long multiline caption",
                                                                     isEdited: true))
            }
        }
        .environmentObject(viewModel.context)
        .environment(\.timelineContext, viewModel.context)
        .previewLayout(.fixed(width: 390, height: 975))
        .padding(.bottom, 20)
        
        VStack(spacing: 20.0) {
            VideoRoomTimelineView(timelineItem: makeTimelineItem())
                .environmentObject(scanningViewModel.context)
                .environment(\.timelineContext, scanningViewModel.context)
            VideoRoomTimelineView(timelineItem: makeTimelineItem(caption: "This is an unsafe video."))
                .environmentObject(unsafeViewModel.context)
                .environment(\.timelineContext, unsafeViewModel.context)
        }
        .environmentObject(viewModel.context)
        .previewDisplayName("Content Scanner")
    }
    
    private static func makeTimelineItem(caption: String? = nil, isEdited: Bool = false) -> VideoRoomTimelineItem {
        VideoRoomTimelineItem(id: .randomEvent,
                              timestamp: .mock,
                              isOutgoing: false,
                              isEditable: false,
                              canBeRepliedTo: true,
                              sender: .init(id: "Bob"),
                              content: .init(filename: "video.mp4",
                                             caption: caption,
                                             videoInfo: .mockVideo,
                                             thumbnailInfo: .mockVideoThumbnail,
                                             blurhash: "L%KUc%kqS$RP?Ks,WEf8OlrqaekW"),
                              properties: .init(isEdited: isEdited))
    }
}