MyApp/ParticipantView.swift

1import SwiftUI2import AVKit3 4struct DirectionProbe: UIViewRepresentable {5    let outer: Bool6    let changed: ([String], Bool) -> Void7    final class Coordinator {8        var direction: AVCaptureDeviceDirectionCoordinator?9    }10    func makeCoordinator() -> Coordinator { Coordinator() }11    func makeUIView(context: Context) -> UIView {12        let view = UIView()13        let outer = outer14        let changed = changed15        context.coordinator.direction = AVCaptureDeviceDirectionCoordinator(view: view, deviceTypes: [.builtInWideAngleCamera]) { map in16            let devices = outer ? map.forwardFacingDeviceDescriptors : map.backwardFacingDeviceDescriptors17            changed(devices.map(\.uniqueID), outer)18        }19        return view20    }21    func updateUIView(_ uiView: UIView, context: Context) {}22}23 24struct ParticipantView: View {25    let presentation: ParticipantPresentation26    let image: UIImage?27    let simulated: Bool28    let stop: () -> Void29    let directionChanged: ([String], Bool) -> Void30 31    var cueAppeared: (UUID) -> Void = { _ in }32    var cueDisappeared: (UUID) -> Void = { _ in }33 34    @State private var recDotOn = true35    @Environment(\.accessibilityReduceMotion) private var reduceMotion36 37    var body: some View {38        VStack(spacing: RetroTheme.spaceM) {39            if simulated {40                RetroTag(title: "SIMULATED PARTICIPANT VIEW", color: RetroTheme.pink)41            }42            HStack(spacing: RetroTheme.spaceS) {43                if presentation.recording {44                    Circle().fill(RetroTheme.error).frame(width: 12, height: 12)45                        .opacity(reduceMotion ? 1 : (recDotOn ? 1 : 0.25))46                        .onAppear { if !reduceMotion { withAnimation(.easeInOut(duration: 0.6).repeatForever(autoreverses: true)) { recDotOn.toggle() } } }47                        .accessibilityHidden(true)48                }49                Text(presentation.status.uppercased())50                    .font(RetroTheme.heading(.title))51            }52            PreviewImage(image: image).overlay {53                if let cue = presentation.cue {54                    Text(cue.letter)55                        .font(.system(size: 120, weight: .black, design: .rounded))56                        .foregroundStyle(RetroTheme.ink).frame(width: 160, height: 160)57                        .background(RetroTheme.yellow, in: .rect(cornerRadius: RetroTheme.radius))58                        .overlay(RoundedRectangle(cornerRadius: RetroTheme.radius).stroke(.white, lineWidth: RetroTheme.border))59                        .id(cue.id)60                        .onAppear { if !simulated { cueAppeared(cue.id) } }61                        .onDisappear { if !simulated { cueDisappeared(cue.id) } }62                }63            }64            Text("Keep your head and hands in view. Leave room to move safely.")65                .font(.callout).foregroundStyle(.white.opacity(0.75))66            if let countdown = presentation.countdown {67                Text("\(countdown)").font(.system(size: 64, weight: .black, design: .rounded)).monospacedDigit()68                    .foregroundStyle(RetroTheme.yellow)69            }70            Button("Stop", systemImage: "stop.fill", action: stop)71                .buttonStyle(RetroButtonStyle(color: RetroTheme.pink)).controlSize(.large)72        }73        .padding(.horizontal, RetroTheme.screenPaddingH)74        .padding(.vertical, RetroTheme.spaceL)75        .frame(maxWidth: .infinity, maxHeight: .infinity)76        .background(Color.black).foregroundStyle(.white)77        .overlay(RoundedRectangle(cornerRadius: 0).stroke(RetroTheme.yellow, lineWidth: RetroTheme.border))78        .background { DirectionProbe(outer: true, changed: directionChanged) }79    }80}81 82struct PreviewImage: View {83    let image: UIImage?84    var body: some View {85        ZStack {86            RoundedRectangle(cornerRadius: 4).fill(.black)87            if let image {88                Image(uiImage: image).resizable().scaledToFit().scaleEffect(x: -1, y: 1)89                    .accessibilityLabel("Mirrored participant camera preview")90            } else {91                ContentUnavailableView("Camera preview", systemImage: "camera", description: Text("No live camera image"))92                    .foregroundStyle(.white)93            }94        }.frame(minHeight: 180, idealHeight: 280, maxHeight: 340).clipShape(.rect(cornerRadius: 4)).overlay(RoundedRectangle(cornerRadius: 4).stroke(RetroTheme.yellow, lineWidth: 2))95    }96}