Architecture

Introduction

Clappr is an open source, event based, plugin oriented extensible media player.

This architecture is currently implemented on multiple platforms: Android, Web (partial implementation) and iOS (partial implementation).

Clappr main components are:

• Player : Main external interface.
• Core : Manage the Clappr global state, including other components lifecycle. Is also responsible for the main display area.
• Container : Handle a display area where a media can be played.
• Playback : The actual media playback.

We favor event based components communication, both internally as well as for external interface. Thus all Clappr classes shall be derived from the BaseObject classes:

Clappr is plugin oriented:

Follows the main components relation with base classes:

Kotlin Specific

As Kotlin does not support multiple inheritance, UIPlugin uses delegation:

Swift Specific

As Swift does not support multiple inheritance, UIPlugin uses delegation:

Main components

Player

Player states:

Core

Basic interface:

• State [idle, ready]
• Plugins [add/remove]
• Load (source)

Container

Basic interface:

• State [idle, ready]
• Interaction events
• Plugins [add/remove]
• Load (source)

Playback

Playback must provide support querying based on media source and mime type.

Playback states:

The Player has yet some events that don't change its state:

1. requestFullscreen and exitFullscreen that can be called in any player state.
2. requestPosterUpdate, willUpdatePoster and didUpdatePoster that can be called in Stalled player state.
3. mediaOptionsSelected that can be called in the states Idle, Playing or Pause.

Plugin

A plugin is only valid with an associated scope (e.g.: Core or Container).

A plugin name must be unique in its scope.

Plugin lifecycle (managed by its scope):

1. Create (associate scope)
2. Bind events
3. Render
4. ...
5. Destroy (scope destroyed or plugin removed from scope)
6. Unbind events

Media Control

Clappr media controls are a Core Plugin.

• Name: MEDIA_CONTROL
• Render
• Layers / Panels
• Add controls (Core plugins)
• Layout controls

Loader

Loader is responsible to manage the start and configuration of all components, including playback selection.