Skip to main content

Full Screen Integration

The most common pattern: the channel takes the entire screen with native video playback.

Basic Setup​

import SwiftUI
import BBChannelSwiftUI
import BBNativePlayerKit_SwiftUI

struct ChannelScreen: View {
    @StateObject private var playerVM = BBChannelWithPlayerViewModel()

    var body: some View {
        BBChannelWithPlayerView(
            channelUrl: "https://demo.bbvms.com/ch/channel_name.json",
            viewModel: playerVM,
            callbacks: BBChannelCallbacks(
                onReady: { print("Channel loaded") }
            )
        )
        .ignoresSafeArea(edges: .bottom)
    }
}

BBChannelWithPlayerView renders the channel with a native inline player at the top. When the user taps a video, it plays in the native player with hardware-accelerated playback and Chromecast support.

Loading State​

Show a loading overlay while the channel initializes:

struct ChannelScreen: View {
    @StateObject private var playerVM = BBChannelWithPlayerViewModel()
    @State private var isLoading = true

    var body: some View {
        ZStack {
            BBChannelWithPlayerView(
                channelUrl: "https://demo.bbvms.com/ch/channel_name.json",
                viewModel: playerVM,
                callbacks: BBChannelCallbacks(
                    onReady: { isLoading = false }
                )
            )

            if isLoading {
                Color.black
                ProgressView()
                    .progressViewStyle(.circular)
                    .tint(.white)
            }
        }
    }
}

Embed within a NavigationStack:

struct ContentView: View {
    var body: some View {
        NavigationStack {
            ChannelListView()
        }
    }
}

struct ChannelListView: View {
    var body: some View {
        List {
            NavigationLink("Sports Channel") {
                ChannelScreen(url: "https://demo.bbvms.com/ch/sports.json")
                    .navigationBarTitleDisplayMode(.inline)
            }
            NavigationLink("News Channel") {
                ChannelScreen(url: "https://demo.bbvms.com/ch/news.json")
                    .navigationBarTitleDisplayMode(.inline)
            }
        }
        .navigationTitle("Channels")
    }
}

Key Points​

  • Background color — Set the container background to black to avoid white flashes during load.
  • Orientation — The channel is responsive and adapts to portrait and landscape. Lock orientation at the app level if needed.
  • Safe areas — The channel handles its own top safe area. Use .ignoresSafeArea(edges: .bottom) if you want it to extend under the home indicator.