ThumbView sample

Add the SDK

import JoinStoriesSDK

Init

Call setConfiguration in your AppDelegate method func application(_: didFinishLaunchingWithOptions:)

let configuration = JoinConfiguration(team: "your_join_team")

JoinStories.setConfiguration(configuration)

Layout

Now you need to add your custom ViewController and inherits from StoryTransitionViewController

By using BasicThumbViewController

class YourViewController: UIViewController {
    let thumbView = BasicThumbViewController()

    let config = JoinStoriesThumbConfig(
        alias: "your_alias",
        requestTimeoutInterval: 15,
        containerDimension: 150,
        labelColor: UIColor.white,
        thumbViewSpacing: 32,
        withLabel: false,
        loaderInnerViewColor : [UIColor.black],
        loaderColors : [UIColor.red, UIColor.blue],
        loaderInnerViewWidth: 2,
        loaderWidth: 3,
        storyViewedIndicatorColor: UIColor.gray,
        storyViewedIndicatorAlpha: 0.8,
        thumbViewOverlayColor: UIColor(hex8: 0x4C4C4CBB),
        playerBackgroundColor: UIColor(hex8: 0xFF0000FF),
        playerVerticalAnchor: .center,
        playerShowShareButton: false,
        playerClosingButton: false,
        playerHorizontalMargins:10,
        playerCornerRadius:30,
        playerProgressBarDefaultColor:"#FFFFFF",
        playerProgressBarFillColor:"#026EDA",
        playerProgressBarThickness:4,
        playerProgressBarRadius:8
    )
    
     override func viewDidLoad() {
        super.viewDidLoad()

        firstThumbView.startThumbView(config: config)
     }
}

By subclasssing StoryTransitionViewController

When working with custom widget, we can apply custom transition between stories collectionView (thumbnails) and stories player. To achieve this, you then need to inherits from a class called StoryTransitionViewController

open class StoryTransitionViewController: UIViewController

Because you'll have an inherited CollectionView to display Thumbnails, you will need to implement methods from UICollectionViewDelegateFlowLayout and UICollectionViewDataSource (but UICollectionViewDelegate already being implemented by the parent class)

Your custom ViewController to display Thumbnails will then have an inherited CollectionView. You will then need to implement methods from UICollectionViewDelegateFlowLayout and UICollectionViewDataSource (UICollectionViewDelegate already being implemented by the parent class)

• UICollectionViewDelegateFlowLayout should be implemented to match StoryViewConfig parameters.

public func collectionView(_: collectionViewLayout: sizeForItemAt:)
public func collectionView(_: collectionViewLayout: minimumLineSpacingForSectionAt:) -> CGFloat

• Inside viewDidLoad, add viewController as dataSource of your collectionView`

collectionView.dataSource = self

• UICollectionViewDataSource will provide numberOfItemsInSection and implement func collectionView(_:, cellForItemAt:)

Without subclasssing StoryTransitionViewController

1. Create your custom ViewController and add protocol conformance with CollectionView

class YourViewController: StoryTransitionViewController, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout 
``
 
2. Add `var stories: [StoryValue] = []` variable for stories loading
3. Add `collectionView` variable and register `StoryCollectionViewCell`

```swift
lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.translatesAutoresizingMaskIntoConstraints = false
        cv.showsHorizontalScrollIndicator = false
        cv.showsVerticalScrollIndicator = false
        cv.register(StoryCollectionViewCell.self, forCellWithReuseIdentifier: StoryCollectionViewCell.reuseIdentifier)
        return cv
}()

4. Inside viewDidLoad, add viewController as delegate and datasource of your collectionView`

 override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(collectionView)
        // Add view controller as DataSource of `collectionView`
        collectionView.dataSource = self
        // Add view controller as Delegate of `collectionView`
        collectionView.delegate = self
        collectionView.backgroundColor = .black
        collectionView.topAnchor.constraint(equalTo: view.topAnchor, constant: "your_top_anchor_constant") .isActive = true

5. Implemented UICollectionViewDelegateFlowLayout methods to match storyViewConfig parameters.

public func collectionView(_: collectionViewLayout: sizeForItemAt:)
public func collectionView(_: collectionViewLayout: minimumLineSpacingForSectionAt:) -> CGFloat

6. Implement UICollectionViewDataSource methods to provide numberOfItemsInSection and func collectionView(_:, cellForItemAt:)

7. Implement UICollectionViewDelegate methods to present StoryPlayer by calling custom presentStoryPlayer(stories:beginningAt:animated:)

public func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        presentStoryPlayer(stories: stories, beginningAt: indexPath, animated: true)
    }

8. Conforms to StoryNavigationDelegate and implement markAsSeen fonctionnality

public func storyItemShown(at indexPath: IndexPath) {
        guard let cell = collectionView.cellForItem(at: indexPath) as? StoryCollectionViewCell else {
            return
        }
        let storyAtIndex = stories[indexPath.row]
        cell.storyPersistence.markAsSeen(id: storyAtIndex.id)
        collectionView.reloadItems(at: [indexPath])
    }

Trigger

Inside viewDidLoad:

• Set collectionView as dataSource of your ViewController

collectionView.dataSource = self

• Implement UICollectionViewDelegateFlowLayoutdelegate methods

• Implement methods from UICollectionViewDataSource protocol

• Call startThumbView method to display your stories widget.

override func viewDidLoad() {
    super.viewDidLoad()
    
    let thumbViewConfig = JoinStoriesThumbConfig(alias: "your_join_alias")
    
    JoinStories.startThumbView(config: thumbViewConfig) { [weak self] result in 
        // self?.activityIndicator.stopAnimating()
        switch result {
        case .success(let stories):
            self?.stories = stories
            DispatchQueue.main.async {
             // Assign stories from result (Result<[StoryValue], StoriesAPIError>)
                // self?.collectionView.reloadData()
            }
        case .failure(let error):
         // Handle error by displaying a message for instance
         ...
        }
    }
}

For a complete list of the available configuration parameter, see the Thumb View document of the usage section.