Circle Story (iOS)

Currently, we can implement circle story based on video feed.

Use VideoFeedViewController

class ViewController: UIViewController {
    func embedCircleFeedInViewController() {
        let channelID = "<Encoded Channel ID>"
        let playlistID = "<Encoded Playlist ID>"
        let source = VideoFeedContentSource.channelPlaylist(channelID: channelID, playlistID: playlistID)

        let feedHeight: CGFloat = 200
        let paddingTop: CGFloat = 10
        let paddingRight: CGFloat = 10
        let paddingBottom: CGFloat = 10
        let paddingLeft: CGFloat = 10
        let thumbnailHeight = feedHeight - paddingTop - paddingBottom

        let layout = VideoFeedHorizontalLayout()
        layout.contentInsets = UIEdgeInsets(top: paddingTop, left: paddingLeft, bottom: paddingBottom, right: paddingRight)
        layout.itemWidthRatio = 1.0

        let feedVC = VideoFeedViewController(
          layout: layout,
          source: source
        )

        var viewConfiguration = VideoFeedContentConfiguration()
        viewConfiguration.itemView.cornerRadius = thumbnailHeight / 2
        viewConfiguration.itemView.title.isHidden = true
        feedVC.viewConfiguration = viewConfiguration

        self.addChild(feedVC)
        feedVC.view.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(feedVC.view)
        NSLayoutConstraint.activate([
          feedVC.view.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
          feedVC.view.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
          feedVC.view.heightAnchor.constraint(equalToConstant: feedHeight),
          feedVC.view.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
        ])
        feedVC.didMove(toParent: self)
      }
}

Use VideoFeedView

import UIKit
import FireworkVideo
import FireworkVideoUI

public class CircleThumbnailsView: UIView {
    let source: VideoFeedContentSource
    private var videoFeedView: VideoFeedView?
    
    public init(
        source: VideoFeedContentSource = VideoFeedContentSource.channelPlaylist(
            channelID: "<Encoded Channel ID>",
            playlistID: "<Encoded Playlist ID>"
        )
    ) {
        self.source = source
        super.init(frame: .zero)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupView() {
        backgroundColor = .white
        
        let feedHeight: CGFloat = 200
        let paddingTop: CGFloat = 10
        let paddingRight: CGFloat = 10
        let paddingBottom: CGFloat = 10
        let paddingLeft: CGFloat = 10
        let thumbnailHeight = feedHeight - paddingTop - paddingBottom
        
        let layout = VideoFeedHorizontalLayout()
        layout.contentInsets = UIEdgeInsets(top: paddingTop, left: paddingLeft, bottom: paddingBottom, right: paddingRight)
        layout.itemWidthRatio = 1.0
        
        let feedView = VideoFeedView(
            layout: layout,
            source: source
        )

        feedView.viewConfiguration.itemView.cornerRadius = thumbnailHeight / 2
        feedView.viewConfiguration.itemView.title.isHidden = true
        
        self.videoFeedView = feedView
        addSubview(feedView)
        feedView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            feedView.leadingAnchor.constraint(equalTo: leadingAnchor),
            feedView.trailingAnchor.constraint(equalTo: trailingAnchor),
            feedView.centerYAnchor.constraint(equalTo: centerYAnchor),
            feedView.heightAnchor.constraint(equalToConstant: feedHeight),
        ])
    }
}

Use VideoFeedSwiftUIView

import SwiftUI
import FireworkVideo
import FireworkVideoUI

public struct CircleThumbnailsSwiftUIView: View {
    private let source: VideoFeedContentSource
    private let feedHeight: CGFloat = 200
    private let paddingTop: CGFloat = 10
    private let paddingRight: CGFloat = 10
    private let paddingBottom: CGFloat = 10
    private let paddingLeft: CGFloat = 10
    
    public init(
        source: VideoFeedContentSource = VideoFeedContentSource.channelPlaylist(
            channelID: "<Encoded Channel ID>",
            playlistID: "<Encoded Playlist ID>"
        )
    ) {
        self.source = source
    }
    
    public var body: some View {
        VideoFeedSwiftUIView(
            layout: createLayout(),
            source: source,
            viewConfiguration: createViewConfiguration()
        )
        .frame(height: feedHeight)
        .background(Color.white)
    }
    
    private func createLayout() -> VideoFeedHorizontalLayout {
        let layout = VideoFeedHorizontalLayout()
        layout.contentInsets = UIEdgeInsets(top: paddingTop, left: paddingLeft, bottom: paddingBottom, right: paddingRight)
        layout.itemWidthRatio = 1.0
        return layout
    }
    
    private func createViewConfiguration() -> VideoFeedContentConfiguration {
        var config = VideoFeedContentConfiguration()
        let thumbnailHeight = feedHeight - paddingTop - paddingBottom
        config.itemView.cornerRadius = thumbnailHeight / 2
        config.itemView.title.isHidden = true
        return config
    }
}