Skip to content

deividson/clappr-detach-plugin

 
 

Repository files navigation

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.

clappr-detach-plugin

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 94.7%
  • HTML 3.3%
  • CSS 2.0%