Circle Story (iOS)
Use CircleStoryView
import UIKit
import FireworkVideo
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.addVideoFeedView()
}
func addVideoFeedView() {
let channelID = "<Encoded Channel ID>"
let playlistID = "<Encoded Playlist ID>"
let source = VideoFeedContentSource.channelPlaylist(
channelID: channelID,
playlistID: playlistID
)
let circleStoryView = CircleStoryView(source: source)
circleStoryView.isPictureInPictureEnabled = true
circleStoryView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(circleStoryView)
NSLayoutConstraint.activate([
circleStoryView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
circleStoryView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
circleStoryView.heightAnchor.constraint(equalToConstant: 240),
circleStoryView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
])
}
}
Use CircleStorySwiftUIView
Content Source
Please refer to Video Feed Content Source (iOS).
Autoplay
Autoplay lets the circle story automatically start playing the first eligible item without requiring user interaction. To enable it, set:
All behavior described below assumes this prerequisite is met. Which item is picked as "eligible" depends on the visibility threshold (viewConfiguration.itemView.autoplay.triggerVisibilityPercentage).
Viewport-based autoplay (default)
Autoplay is viewport-based by default, which delivers a seamless experience when the component is embedded in a ScrollView, TableView, or CollectionView. Visibility is measured against the viewport rather than the component's own bounds:
The first item whose visibility within the viewport is greater than or equal to
triggerVisibilityPercentagestarts playing automatically.When the circle story is embedded in your own scroll container, the viewport is clipped to that container automatically — a circle story scrolled out of it correctly pauses, with no extra configuration.
The viewport itself is customizable via
safeAreaEdges(see below).
Customize viewport
The default viewport is defined as the screen bounds minus the safe area insets—such as the status bar, top navigation bar, bottom tab bar, and bottom home indicator.
The viewport is then clipped to whatever your own layout hides. The SDK walks up from the circle story and intersects the bounds of every ancestor view that clips its content, so a circle story scrolled out of your scroll container — or hidden behind a header stacked above that container — is measured as not visible. This is automatic and needs no configuration.
If you want only some safe-area edges excluded, narrow them with safeAreaEdges.
Last updated
Was this helpful?