clappr-detach-plugin

Note: this plugin was previously called clappr-detach-plugin, but has changed to @globocom/clappr-detach-plugin.

A Clappr plugin to detach the video.

This project is a fork from https://github.com/team-767/clappr-detach-plugin. We took a different approach that was done in that project.

Installation

npm install -S @globocom/clappr-detach-plugin

Usage

To init the plugin you have to pass it the Clappr object. See bellow the compatibility between this plugin and Clappr versions.

import Clappr from 'clappr'
import initClapprDetachPlugin from '@globocom/clappr-detach-plugin'

const detachPlugin = initClapprDetachPlugin(Clappr)

We did it this way so the plugin will receive the dependency and doesn't have to install it.

Full example:

import Clappr from 'clappr'
import initClapprDetachPlugin from '@globocom/clappr-detach-plugin'

const player = new Clappr.Player({
  source: 'http://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_5mb.mp4',
  plugins: {
    'core': [initClapprDetachPlugin(Clappr)]
  }
})

This plugin exposes the public methods attach and detach that you can call with:

player.getPlugin('detach').detach()
player.getPlugin('detach').attach()

Or using the player configure method:

player.configure({ isDetached: true })
player.configure({ isDetached: false })

Options

import Clappr from 'clappr'
import initClapprDetachPlugin from '@globocom/clappr-detach-plugin'

const player = new Clappr.Player({
  source: 'http://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_5mb.mp4',
  plugins: {
    'core': [initClapprDetachPlugin(Clappr)]
  },
  // these are the default values
  detachOptions: {
    dragEnabled: true,
    height: 180,
    isDetached: false,
    onAttach: () => { },
    onDetach: () => { }
    opacity: 1,
    orientation: 'bottom-right',
    position: {
      bottom: 10,
      right: 10,
    },
    width: 320,
  }
})

| Property | Type | Description | valid values | | ------------------- | ------------- | ------------------------------------------------------- | --------------------------------------------------------------------- | | dragEnabled | bool | wheter drag n drop of detached player should be enabled | - | | height | number | player height on detach | - | | isDetached | bool | whether you want to start the player detached | - | | onAttach | function | callback called when player attach on original place | - | | onDetach | function | callback called when player detach from original place | - | | orientation | string | Where the player will appear on detach | 'bottom-left', 'top-left', 'bottom-right', 'top-right' | | position | object | Force the position where player will appear on detach | {"top": number, "right": number, "bottom": number, "left": number} | | width | number | player width on detach | - |

Compatibility

This table doesn't mean that other versions won't work together.

It does means that we are sure that these versions work together.

| clappr-detach-plugin | clappr | | -------------------- | ------------ | | 0.4.0 | 0.2.73 | | 0.2.0 | 0.2.73 | | 0.1.0 | 0.2.73 |