ClipsListView

Table of Contents

1. Attributes
2. Methods
3. StorytellerClipsGridView
4. StorytellerClipsRowView

Note: All of the example code snippets are using the StorytellerClipsRowView type, however, if you are using StorytellerClipsGridView they will work in exactly the same way.

ClipsListView is a base abstract class for views displaying lists of Clips. The Storyteller SDK offers two implementations of this abstract class:

• StorytellerClipsRowView
• StorytellerClipsGridView

Attributes

This sections describes attributes common to ClipsListView. Differences in property interpretation is discussed in the StorytellerClipsGridView and the StorytellerClipsRowView sections.

Notes are used to mark if there is a difference in property interpretation

ClipsListView base class attributes:

Delegate

delegate is the StorytellerListViewDelegate instance for ClipsListView callbacks. See Implementing StorytellerListViewDelegate methods for more information.

Collection ID

collectionId is the the ID that the list view should show to the user. The default value is null.

Theme

The theme is a parameter used to set the Theme for the ClipsListView. If the theme is set to null, then the Storyteller.theme global property is used. The theme determines how the items within the List View are presented as well as various features of the player once it is launched.

Display Limit

The displayLimit is the maximum amount of tiles to be show in a list.

UI Style

The uiStyle adjusts whether ClipsListView renders in light mode, dark mode or follows the system setting.

uiStyle takes the following values:

• UIStyle.auto - default value, the ClipsListView will adjust its color scheme automatically according to the current system UI mode
• UIStyle.light - force the ClipsListView to use the light theme
• UIStyle.dark - force the ClipsListView to use the dark theme

CollectionId

The collectionId property is used to show specific Clips content in the row or grid by supplying a single Collection ID as string. Collection IDs can be defined in the CMS. If no Collection ID is assigned, then no Clips content is displayed.

Example:

let storytellerClipsRow = StorytellerClipsRowView()
storytellerClipsRow.collectionId = "example_collection_id"

Feed Title

The feed title in the Clips player can be configured in the CMS for the Collection. This can be a custom title or image.

Theme

The theme used to render Clips items in the list. It will also be passed to activities launched from the ClipsListView.

Example:

 let storytellerClipsRow = StorytellerClipsRowView()

 let theme = UITheme()
 
 // You can adjust theming here

 storytellerClipsRow.theme = theme

Methods

reloadData

The reloadData method starts loading fresh data for all Clips from the API. On completion, it updates the Clips data, starts prefetching content and updates the read status of the Clips. The onDataLoadStarted and onDataLoadComplete methods on the StorytellerListViewDelegate are called accordingly (the latter with appropriate data depending on the result of the API requests).

let storytellerClipsRow = StorytellerClipsRowView()

storytellerClipsRow.reloadData()

---

StorytellerClipsGridView

The StorytellerClipsGridView inherits from ClipsListView.

GridDelegate

A StorytellerGridViewDelegate has methods for managing StorytellerGridView events.

You can implement these optional methods when responding to the StorytellerGridViewDelegate protocol:

• contentSizeDidChange - this method is called when the size of the grid changes. This can occur after calling reloadData when new Stories are fetched from the server or when a user's device is rotated.

class StorytellerGridViewDelegateImplementation : StorytellerGridViewDelegate {

    func contentSizeDidChange(_ size: CGSize) {
        // calculated size of grid
    }
}

---

StorytellerClipsRowView

The StorytellerClipsRowView inherits from ClipsListView.

Dynamic Scaling

Item tiles will scale dynamically to fit the row view. The base size of the tiles is ratio 2/3 width to height. Width of the tile will adjust to the height constraint set to the row.

Example 1

contentView.addSubview(storytellerClipRow)

storytellerClipsRow.translatesAutoresizingMaskIntoConstraints = false
storytellerClipsRow.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
storytellerClipsRow.leftAnchor.constraint(equalTo: contentView.leftAnchor).isActive = true
storytellerClipsRow.rightAnchor.constraint(equalTo: contentView.rightAnchor).isActive = true
storytellerClipsRow.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true

let rowHeightConstraint = storytellerClipsRow.heightAnchor.constraint(equalToConstant: 200)
rowHeightConstraint?.isActive = true

The final item tile size will be 133dp x 200dp.