Start implementing FTUE splash screens.

Present splash screens from AuthenticationViewController
2026-04-26 19:34:25 +02:00 · 2021-12-16 11:47:02 +00:00
parent 0035dffb84
commit 4ae76bd861
24 changed files with 5497 additions and 1 deletions
@@ -0,0 +1,66 @@
+//
+// 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
+import UIKit
+import SwiftUI
+
+struct OnboardingSplashScreenCoordinatorParameters { }
+
+final class OnboardingSplashScreenCoordinator: Coordinator, Presentable {
+    
+    // MARK: - Properties
+    
+    // MARK: Private
+    
+    private let parameters: OnboardingSplashScreenCoordinatorParameters
+    private let onboardingSplashScreenHostingController: UIViewController
+    private var onboardingSplashScreenViewModel: OnboardingSplashScreenViewModelProtocol
+    
+    // MARK: Public
+
+    // Must be used only internally
+    var childCoordinators: [Coordinator] = []
+    var completion: ((OnboardingSplashScreenViewModelResult) -> Void)?
+    
+    // MARK: - Setup
+    
+    @available(iOS 14.0, *)
+    init(parameters: OnboardingSplashScreenCoordinatorParameters) {
+        self.parameters = parameters
+        let viewModel = OnboardingSplashScreenViewModel()
+        let view = OnboardingSplashScreen(viewModel: viewModel.context)
+        onboardingSplashScreenViewModel = viewModel
+        onboardingSplashScreenHostingController = VectorHostingController(rootView: view)
+    }
+    
+    // MARK: - Public
+    func start() {
+        MXLog.debug("[OnboardingSplashScreenCoordinator] did start.")
+        onboardingSplashScreenViewModel.completion = { [weak self] result in
+            MXLog.debug("[OnboardingSplashScreenCoordinator] OnboardingSplashScreenViewModel did complete with result: \(result).")
+            guard let self = self else { return }
+            switch result {
+            case .login, .register:
+                self.completion?(result)
+            }
+        }
+    }
+    
+    func toPresentable() -> UIViewController {
+        return self.onboardingSplashScreenHostingController
+    }
+}
@@ -0,0 +1,50 @@
+// 
+// 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
+import SwiftUI
+
+/// Using an enum for the screen allows you define the different state cases with
+/// the relevant associated data for each case.
+@available(iOS 14.0, *)
+enum MockOnboardingSplashScreenScreenState: MockScreenState, CaseIterable {
+    // A case for each state you want to represent
+    // with specific, minimal associated data that will allow you
+    // mock that screen.
+    case standard
+    
+    /// The associated screen
+    var screenType: Any.Type {
+        OnboardingSplashScreen.self
+    }
+    
+    /// A list of screen state definitions
+    static var allCases: [MockOnboardingSplashScreenScreenState] {
+        [.standard]
+    }
+    
+    /// Generate the view struct for the screen state.
+    var screenView: ([Any], AnyView)  {
+        let viewModel = OnboardingSplashScreenViewModel()
+        
+        // can simulate service and viewModel actions here if needs be.
+        
+        return (
+            [false, viewModel],
+            AnyView(OnboardingSplashScreen(viewModel: viewModel.context))
+        )
+    }
+}
@@ -0,0 +1,91 @@
+// 
+// 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 SwiftUI
+
+// MARK: - Coordinator
+
+@available(iOS 13.0, *)
+struct OnboardingSplashScreenPageContent {
+    let title: String
+    let message: String
+    let image: ImageAsset
+    let gradient: Gradient
+}
+
+// MARK: View model
+
+enum OnboardingSplashScreenStateAction {
+    case viewAction(OnboardingSplashScreenViewAction)
+}
+
+enum OnboardingSplashScreenViewModelResult {
+    case register
+    case login
+}
+
+// MARK: View
+
+@available(iOS 13.0, *)
+struct OnboardingSplashScreenViewState: BindableState {
+    let content: [OnboardingSplashScreenPageContent]
+    var bindings: OnboardingSplashScreenBindings
+    
+    init() {
+        self.content = [
+            OnboardingSplashScreenPageContent(title: VectorL10n.onboardingSplashPage1Title,
+                                              message: VectorL10n.onboardingSplashPage1Message,
+                                              image: Asset.Images.onboardingSplashScreenPage1,
+                                              gradient: Gradient(colors: [
+                                                Color(red: 0.73, green: 0.91, blue: 0.81),
+                                                Color(red: 0.45, green: 0.78, blue: 0.85)
+                                              ])),
+            OnboardingSplashScreenPageContent(title: VectorL10n.onboardingSplashPage2Title,
+                                              message: VectorL10n.onboardingSplashPage2Message,
+                                              image: Asset.Images.onboardingSplashScreenPage2,
+                                              gradient: Gradient(colors: [
+                                                Color(red: 0.45, green: 0.78, blue: 0.85),
+                                                Color(red: 0.72, green: 0.45, blue: 0.85)
+                                              ])),
+            OnboardingSplashScreenPageContent(title: VectorL10n.onboardingSplashPage3Title,
+                                              message: VectorL10n.onboardingSplashPage3Message,
+                                              image: Asset.Images.onboardingSplashScreenPage3,
+                                              gradient: Gradient(colors: [
+                                                Color(red: 0.72, green: 0.45, blue: 0.85),
+                                                Color(red: 0.05, green: 0.74, blue: 0.55)
+                                              ])),
+            OnboardingSplashScreenPageContent(title: VectorL10n.onboardingSplashPage4Title,
+                                              message: VectorL10n.onboardingSplashPage4Message,
+                                              image: Asset.Images.onboardingSplashScreenPage4,
+                                              gradient: Gradient(colors: [
+                                                Color(red: 0.05, green: 0.74, blue: 0.55),
+                                                Color(red: 0.73, green: 0.91, blue: 0.81)
+                                              ])),
+        ]
+        self.bindings = OnboardingSplashScreenBindings()
+    }
+}
+
+struct OnboardingSplashScreenBindings {
+    var pageIndex = 0
+}
+
+enum OnboardingSplashScreenViewAction {
+    case register
+    case login
+    case nextPage
+    case hiddenPage
+}
@@ -0,0 +1,84 @@
+//
+// 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 SwiftUI
+import Combine
+
+@available(iOS 14, *)
+typealias OnboardingSplashScreenViewModelType = StateStoreViewModel<OnboardingSplashScreenViewState,
+                                                                    OnboardingSplashScreenStateAction,
+                                                                    OnboardingSplashScreenViewAction>
+
+protocol OnboardingSplashScreenViewModelProtocol {
+    var completion: ((OnboardingSplashScreenViewModelResult) -> Void)? { get set }
+    @available(iOS 14, *)
+    var context: OnboardingSplashScreenViewModelType.Context { get }
+}
+
+
+@available(iOS 14, *)
+class OnboardingSplashScreenViewModel: OnboardingSplashScreenViewModelType, OnboardingSplashScreenViewModelProtocol {
+
+    // MARK: - Properties
+
+    // MARK: Private
+
+    // MARK: Public
+
+    var completion: ((OnboardingSplashScreenViewModelResult) -> Void)?
+
+    // MARK: - Setup
+
+    init() {
+        super.init(initialViewState: OnboardingSplashScreenViewState())
+    }
+
+    // MARK: - Public
+
+    override func process(viewAction: OnboardingSplashScreenViewAction) {
+        switch viewAction {
+        case .register:
+            register()
+        case .login:
+            login()
+        case .nextPage, .hiddenPage:
+            dispatch(action: .viewAction(viewAction))
+        }
+    }
+
+    override class func reducer(state: inout OnboardingSplashScreenViewState, action: OnboardingSplashScreenStateAction) {
+        switch action {
+        case .viewAction(let viewAction):
+            switch viewAction {
+            case .nextPage:
+                state.bindings.pageIndex = (state.bindings.pageIndex + 1) % state.content.count
+            case .hiddenPage:
+                state.bindings.pageIndex = -1
+            case .login, .register:
+                break
+            }
+        }
+        UILog.debug("[OnboardingSplashScreenViewModel] reducer with action \(action) produced state: \(state)")
+    }
+
+    private func register() {
+        completion?(.register)
+    }
+
+    private func login() {
+        completion?(.login)
+    }
+}
@@ -0,0 +1,53 @@
+//
+// 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 XCTest
+import RiotSwiftUI
+
+@available(iOS 14.0, *)
+class OnboardingSplashScreenUITests: MockScreenTest {
+
+    override class var screenType: MockScreenState.Type {
+        return MockOnboardingSplashScreenScreenState.self
+    }
+
+    override class func createTest() -> MockScreenTest {
+        return OnboardingSplashScreenUITests(selector: #selector(verifyOnboardingSplashScreenScreen))
+    }
+
+    func verifyOnboardingSplashScreenScreen() throws {
+        guard let screenState = screenState as? MockOnboardingSplashScreenScreenState else { fatalError("no screen") }
+        switch screenState {
+        case .presence(let presence):
+            verifyOnboardingSplashScreenPresence(presence: presence)
+        case .longDisplayName(let name):
+            verifyOnboardingSplashScreenLongName(name: name)
+        }
+    }
+
+    func verifyOnboardingSplashScreenPresence(presence: OnboardingSplashScreenPresence) {
+        let presenceText = app.staticTexts["presenceText"]
+        XCTAssert(presenceText.exists)
+        XCTAssertEqual(presenceText.label, presence.title)
+    }
+
+    func verifyOnboardingSplashScreenLongName(name: String) {
+        let displayNameText = app.staticTexts["displayNameText"]
+        XCTAssert(displayNameText.exists)
+        XCTAssertEqual(displayNameText.label, name)
+    }
+
+}
@@ -0,0 +1,57 @@
+// 
+// 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 XCTest
+import Combine
+
+@testable import RiotSwiftUI
+
+@available(iOS 14.0, *)
+class OnboardingSplashScreenViewModelTests: XCTestCase {
+    private enum Constants {
+        static let presenceInitialValue: OnboardingSplashScreenPresence = .offline
+        static let displayName = "Alice"
+    }
+    var service: MockOnboardingSplashScreenService!
+    var viewModel: OnboardingSplashScreenViewModelProtocol!
+    var context: OnboardingSplashScreenViewModelType.Context!
+    var cancellables = Set<AnyCancellable>()
+    override func setUpWithError() throws {
+        service = MockOnboardingSplashScreenService(displayName: Constants.displayName, presence: Constants.presenceInitialValue)
+        viewModel = OnboardingSplashScreenViewModel.makeOnboardingSplashScreenViewModel(onboardingSplashScreenService: service)
+        context = viewModel.context
+    }
+
+    func testInitialState() {
+        XCTAssertEqual(context.viewState.displayName, Constants.displayName)
+        XCTAssertEqual(context.viewState.presence, Constants.presenceInitialValue)
+    }
+
+    func testFirstPresenceReceived() throws {
+        let presencePublisher = context.$viewState.map(\.presence).removeDuplicates().collect(1).first()
+        XCTAssertEqual(try xcAwait(presencePublisher), [Constants.presenceInitialValue])
+    }
+
+    func testPresenceUpdatesReceived() throws {
+        let presencePublisher = context.$viewState.map(\.presence).removeDuplicates().collect(3).first()
+        let awaitDeferred = xcAwaitDeferred(presencePublisher)
+        let newPresenceValue1: OnboardingSplashScreenPresence = .online
+        let newPresenceValue2: OnboardingSplashScreenPresence = .idle
+        service.simulateUpdate(presence: newPresenceValue1)
+        service.simulateUpdate(presence: newPresenceValue2)
+        XCTAssertEqual(try awaitDeferred(), [Constants.presenceInitialValue, newPresenceValue1, newPresenceValue2])
+    }
+}
@@ -0,0 +1,111 @@
+// 
+// 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 SwiftUI
+
+@available(iOS 14.0, *)
+struct OnboardingSplashScreen: View {
+
+    // MARK: - Properties
+    
+    // MARK: Private
+    
+    @Environment(\.theme) private var theme: ThemeSwiftUI
+    
+    @State private var overlayFrame: CGRect = .zero
+    @State private var pageTimer: Timer?
+    
+    // MARK: Public
+    
+    @ObservedObject var viewModel: OnboardingSplashScreenViewModel.Context
+    
+    var buttons: some View {
+        VStack {
+            Button { viewModel.send(viewAction: .register) } label: {
+                Text(VectorL10n.onboardingSplashLoginButtonTitle)
+            }
+            .buttonStyle(PrimaryActionButtonStyle())
+            
+            Button { viewModel.send(viewAction: .login) } label: {
+                Text(VectorL10n.onboardingSplashRegisterButtonTitle)
+                    .padding(12)
+            }
+        }
+    }
+    
+    var overlay: some View {
+        VStack {
+            OnboardingSplashScreenPageIndicator(pageCount: viewModel.viewState.content.count,
+                                                pageIndex: viewModel.pageIndex)
+                .padding(.vertical, 20)
+            
+            buttons
+                .padding(.horizontal, 16)
+        }
+    }
+    
+    var body: some View {
+        GeometryReader { geometry in
+            // FIXME: The PageTabViewStyle breaks the safe area - replace with ScrollView or custom offsets
+            TabView(selection: $viewModel.pageIndex) {
+                OnboardingSplashScreenPage(content: viewModel.viewState.content[viewModel.viewState.content.count - 1],
+                                           overlayHeight: overlayFrame.height + geometry.safeAreaInsets.bottom)
+                    .tag(-1)
+                
+                ForEach(0..<viewModel.viewState.content.count, id:\.self) { index in
+                    let pageContent = viewModel.viewState.content[index]
+                    OnboardingSplashScreenPage(content: pageContent,
+                                               overlayHeight: overlayFrame.height + geometry.safeAreaInsets.bottom)
+                        .tag(index)
+                }
+            }
+            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
+            .ignoresSafeArea()
+            .overlay(overlay
+                        .background(ViewFrameReader(frame: $overlayFrame))
+                        .padding(.bottom, geometry.safeAreaInsets.bottom > 0 ? 0 : 16),
+                     alignment: .bottom)
+            .accentColor(theme.colors.accent)
+            .onAppear {
+                pageTimer = Timer.scheduledTimer(withTimeInterval: 5, repeats: true) { timer in
+                    if viewModel.pageIndex == viewModel.viewState.content.count - 1 {
+                        viewModel.send(viewAction: .hiddenPage)
+                        
+                        withAnimation {
+                            viewModel.send(viewAction: .nextPage)
+                        }
+                    } else {
+                        withAnimation {
+                            viewModel.send(viewAction: .nextPage)
+                        }
+                    }
+                }
+            }
+        }
+        .navigationBarHidden(true)
+        .background(theme.colors.background.ignoresSafeArea())
+    }
+}
+
+// MARK: - Previews
+
+@available(iOS 14.0, *)
+struct OnboardingSplashScreen_Previews: PreviewProvider {
+    static let stateRenderer = MockOnboardingSplashScreenScreenState.stateRenderer
+    static var previews: some View {
+        stateRenderer.screenGroup()
+    }
+}
@@ -0,0 +1,84 @@
+// 
+// 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 SwiftUI
+
+@available(iOS 14.0, *)
+struct OnboardingSplashScreenPage: View {
+    
+    // MARK: - Properties
+    
+    // MARK: Private
+    @Environment(\.theme) private var theme
+    
+    // MARK: Public
+    let content: OnboardingSplashScreenPageContent
+    let overlayHeight: CGFloat
+    
+    // MARK: - Views
+    
+    var title: some View {
+        Text(content.title)
+            + Text(".")
+            .foregroundColor(theme.colors.accent)
+    }
+    
+    var backgroundGradient: some View {
+        LinearGradient(gradient: content.gradient, startPoint: .leading, endPoint: .trailing)
+            .opacity(0.2)
+    }
+    
+    var body: some View {
+        VStack {
+            Spacer()
+            
+            Image(content.image.name)
+//                .resizable()
+//                .scaledToFit()
+//                .padding()
+            
+            Spacer()
+            
+            VStack(spacing: 8) {
+                title
+                    .font(theme.fonts.title2B)
+                    .foregroundColor(theme.colors.primaryContent)
+                Text(content.message)
+                    .font(theme.fonts.body)
+                    .foregroundColor(theme.colors.secondaryContent)
+                    .multilineTextAlignment(.center)
+            }
+            
+            Spacer()
+            
+            Spacer()
+                .frame(height: overlayHeight)
+        }
+        .padding(.horizontal, 16)
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .background(backgroundGradient.ignoresSafeArea())
+    }
+}
+
+@available(iOS 14.0, *)
+struct OnboardingSplashScreenPage_Previews: PreviewProvider {
+    static let content = OnboardingSplashScreenViewState().content
+    static var previews: some View {
+        ForEach(0..<content.count, id:\.self) { index in
+            OnboardingSplashScreenPage(content: content[index], overlayHeight: 55)
+        }
+    }
+}
@@ -0,0 +1,35 @@
+// 
+// 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 SwiftUI
+
+@available(iOS 14.0, *)
+struct OnboardingSplashScreenPageIndicator: View {
+    @Environment(\.theme) private var theme
+    
+    let pageCount: Int
+    let pageIndex: Int
+    
+    var body: some View {
+        HStack {
+            ForEach(0..<pageCount) { index in
+                Circle()
+                    .frame(width: 8, height: 8)
+                    .foregroundColor(index == pageIndex ? .accentColor : theme.colors.quarterlyContent)
+            }
+        }
+    }
+}