PlayerView customisation

All components of KinescopePlayerView is partially customisable. You can change colors, fonts, sizes using method KinescopePlayerView.setLayout(with config: KinescopePlayerViewConfiguration).

All properties of KinescopePlayerViewConfiguration have default values included in SDK, so customisation is optional.

You can easily edit these values using builders. For examle to change color of timeline in control panel you can use this code:

playerView.setLayout(with: .builder().setControlPanel(
                .builder()
                    .setTimeline(
                        .builder()
                            .setActiveColor(color)
                            .build()
                    )
                    .build())
)

or you can use predefined configurable configuration accentTimeLineAndPlayButton to change color of timeline and play button in control panel.

Using these builders you can change any property of KinescopePlayerViewConfiguration and apply it to player view. To learn about properties more you should read next chapters of this doc.

Managing of options menu

Options menu is a set of buttons with different actions like AirPlay, Picture in Picture, etc. You can manage this menu by adding or removing some options.

By default, options menu is collapsed, but you can show it by tapping on the options button with dots in the bottom right corner of the player view.

Custom options

To add some custom option you can use method addOption with KinescopePlayerOption enum value.

For example

if let shareIcon = UIImage(systemName: "square.and.arrow.up") {
    player?.addCustomPlayerOption(with: CustomPlayerOption.share, 
                                  and: shareIcon)
}

To handle tap on custom option you should implement KinescopePlayerDelegate protocol and use method player(didSelect option: KinescopePlayerOption).

func player(didSelectCustomOptionWith optionId: AnyHashable, anchoredAt view: UIView) {
        guard let option = optionId as? CustomPlayerOption else {
            return
        }

        switch option {
        case .share:
            // your code here
        }
    }

AnchoredView is button which were tapped. You can use it to show popover or action sheet. It's required on iPad applications.

Hide/disable options

To hide some built-in options which you do not want you can use method disableOptions with array of options you want to hide.

For example, to hide AirPlay option use this code:

player?.disableOptions([.airPlay])

All built-in options are listed in KinescopePlayerOption enum.

Using disableOptions also can disable custom option if id of this option is equal to previously added option.

Configuration parameters

gravity

AVLayerVideoGravity value defines how the video is displayed within a layer’s bounds rectangle.

Possible values are resizeAspect, resizeAspectFill, resize (default is resizeAspect).

previewService

Implementation of service to load posters into imageView.

Set nil to disable previews.

Default implementation is most simple background loader without any external library usage.

You can replace it with your favorite image loading library with caching and loading cancelation.

activityIndicator

Custom indicator view used to indicate process of video downloading.

Default implementation is using native UIActivityIndicatorView with white color and large style.

overlay

Configuration of overlay with tapGesture to play/pause video. This including images, fonts and colors for

fast forward and rewind buttons
play and pause buttons
video title
live indicator

Set nil to hide overlay (usefull for videos collection with autoplaying).