Реалізація функції повноекранного перегляду відео у SwiftUI

5 Березня 2024 в 21:54 24

У сучасних мобільних застосунках перегляд відео є однією з ключових функцій, яка вимагає від розробників створення зручного та інтуїтивно зрозумілого інтерфейсу. Важливою частиною є можливість перегляду відео на повний екран, особливо коли відео вбудоване в складні ієрархічні структури інтерфейсу, такі як прокручувані списки або вкладені відображення. SwiftUI надає могутній набір інструментів для створення динамічних UI, але деякі завдання, такі як реалізація повноекранного режиму для відео, можуть вимагати додаткових зусиль та інтеграції з UIKit.

Ця стаття розглядає кроки необхідні для реалізації функції перегляду відео на повний екран у SwiftUI. Ми розглянемо, як використовувати UIViewControllerRepresentable для інтеграції AVPlayerViewController з SwiftUI та як управляти станом відтворення, щоб забезпечити плавний перехід між звичайним та повноекранним режимами.

Створення базового відеоплеєра у SwiftUI

Перш за все, необхідно створити базову структуру відеоплеєра, яка буде відтворювати відео з заданого URL. Для цього ми використовуємо AVPlayer та AVPlayerLayer з бібліотеки AVFoundation. SwiftUI не має вбудованого віджета для відеоплеєра, тому ми створимо власний за допомогою UIViewRepresentable або UIViewControllerRepresentable.

struct VideoPlayerView: View {
    let url: URL
    @State private var player = AVPlayer(url: URL(string: "https://www.example.com")!)
    @State private var isFullScreen = false
    var body: some View {
        VideoPlayer(player: $player)
            .onTapGesture {
                self.isFullScreen.toggle()
                // Код для переходу у повноекранний режим
            }
        .onAppear() {
            self.player.play()
        }
        .aspectRatio(contentMode: .fit)
        .fullScreenCover(isPresented: $isFullScreen) {
            // Компонент для повноекранного відтворення
        }
    }
}

struct VideoPlayerView: View {

let url: URL

@State private var player = AVPlayer(url: URL(string: "https://www.example.com")!)

@State private var isFullScreen = false

var body: some View {

VideoPlayer(player: $player)

.onTapGesture {

self.isFullScreen.toggle()

// Код для переходу у повноекранний режим

}

.onAppear() {

self.player.play()

}

.aspectRatio(contentMode: .fit)

.fullScreenCover(isPresented: $isFullScreen) {

// Компонент для повноекранного відтворення

}

Інтеграція з UIKit для повноекранного режиму

Для реалізації повноекранного режиму необхідно інтегрувати AVPlayerViewController з SwiftUI за допомогою UIViewControllerRepresentable. Цей протокол дозволяє використовувати контролери виду UIKit безпосередньо у SwiftUI. Ми реалізуємо методи makeUIViewController та updateUIViewController для управління життєвим циклом контролера виду.

struct FullScreenVideoPlayer: UIViewControllerRepresentable {
    var player: AVPlayer
    func makeUIViewController(context: Context) -> AVPlayerViewController {
        let controller = AVPlayerViewController()
        controller.player = player
        return controller
    }
    
    func updateUIViewController(_ uiViewController: AVPlayerViewController, context: Context) {
        // Оновлення, якщо потрібно
    }
}

struct FullScreenVideoPlayer: UIViewControllerRepresentable {

var player: AVPlayer

func makeUIViewController(context: Context) -> AVPlayerViewController {

let controller = AVPlayerViewController()

controller.player = player

return controller

}

func updateUIViewController(_ uiViewController: AVPlayerViewController, context: Context) {

// Оновлення, якщо потрібно

}

Тепер ми можемо використовувати FullScreenVideoPlayer у .fullScreenCover модифікаторі для показу відео на повний екран. Перемикання між повноекранним та нормальним режимами можна контролювати через змінну стану isFullScreen.

Управління станом відтворення

Для забезпечення плавного переходу між режимами і збереження стану відтворення (наприклад, часу відтворення) між звичайним та повноекранним відображенням, можна використовувати спостерігачі стану в AVPlayer. Це дозволяє зберігати позицію відтворення та автоматично відновлювати відтворення після повернення з повноекранного режиму.

Використання onDisappear модифікатора в SwiftUI дозволяє призупинити відтворення, коли користувач виходить з повноекранного режиму, а onAppear — відновити відтворення з того місця, де воно було призупинено.

Висновок

Інтеграція повноекранного режиму відтворення відео у SwiftUI вимагає використання елементів UIKit через UIViewControllerRepresentable. Такий підхід дозволяє не тільки розширити можливості SwiftUI, але й забезпечити високий рівень кастомізації відеоплеєра. Правильна реалізація повноекранного режиму підвищує зручність користування застосунками, що відтворюють медіаконтент, та забезпечує користувачам максимально занурювальний досвід перегляду відео.