https://github.com/joaopaulovieira/clappr-context-menu-plugin
A context menu for Clappr player.
https://github.com/joaopaulovieira/clappr-context-menu-plugin
clappr clappr-player clappr-plugin clappr-plugins context-menu contextmenu
Last synced: 3 months ago
JSON representation
A context menu for Clappr player.
- Host: GitHub
- URL: https://github.com/joaopaulovieira/clappr-context-menu-plugin
- Owner: joaopaulovieira
- License: bsd-3-clause
- Created: 2017-04-27T15:52:12.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T06:47:15.000Z (over 3 years ago)
- Last Synced: 2025-10-26T03:28:42.696Z (8 months ago)
- Topics: clappr, clappr-player, clappr-plugin, clappr-plugins, context-menu, contextmenu
- Language: JavaScript
- Homepage:
- Size: 18.3 MB
- Stars: 7
- Watchers: 1
- Forks: 3
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.jsdelivr.com/package/npm/clappr-context-menu-plugin)
[](https://npmjs.org/package/clappr-context-menu-plugin)
[](https://npmjs.org/package/clappr-context-menu-plugin)
[](https://bundlephobia.com/result?p=clappr-context-menu-plugin)
[](https://github.com/joaopaulovieira/clappr-context-menu-plugin/blob/master/LICENSE)
# Clappr context menu plugin
## Demo
https://joaopaulovieira.github.io/clappr-context-menu-plugin/
## Table of Contents
- [Features](https://github.com/joaopaulovieira/clappr-context-menu-plugin#Features)
- [Usage](https://github.com/joaopaulovieira/clappr-context-menu-plugin#Usage)
- [Configuration](https://github.com/joaopaulovieira/clappr-context-menu-plugin#Configuration)
- [Development](https://github.com/joaopaulovieira/clappr-context-menu-plugin#Development)
## Features
- Default actions:
- Copy URL of the site where `Clappr` is playing;
- Copy URL with the current time of the video;
- Enable/Disable loop state;
- Default info:
- `Clappr` version;
- Support to add new custom actions;
- Support to add custom style;
## Usage
You can use it from JSDelivr:
```
https://cdn.jsdelivr.net/npm/clappr-context-menu-plugin@latest/dist/clappr-context-menu-plugin.min.js
```
```properties
# Using yarn
yarn add clappr-context-menu-plugin
# Using npm
npm i clappr-context-menu-plugin
```
Then just add `ContextMenuPlugin` into the list of plugins of your player instance
```javascript
var player = new Clappr.Player({
source: 'http://your.video/here.mp4',
plugins: [ContextMenuPlugin]
});
```
## Configuration
The options for the plugin go in the `contextMenu` property as shown below
```javascript
var player = new Clappr.Player({
source: 'http://your.video/here.mp4',
plugins: [ContextMenuPlugin],
contextMenu: {
menuItems: [`copyURL`, `copyURLCurrentTime`, `loop`, `playerVersion`],
extraOptions: [
{
name: 'test',
label: 'Test Label',
//optional
callback: function() {
console.log('A absolutely awesome extra context menu item action')
}
}
],
customStyle: {
container: {
'display': 'block'
},
list: {
'background-color': 'gray'
},
items: {
'color': 'yellow'
}
}
}
});
```
### `menuItems {Array}`
An array where each item is a name that matches one of the default menu items. The valid values are: `['copyURL', 'copyURLCurrentTime', 'loop', 'playerVersion']`
### `extraOptions {Array}`
An array of items to add on the context menu. Each context menu item on this array is an object which contains the parameters `name`, `label`, and `callback`
* #### `name {String}`
Name of the extra item
* #### `label {String}`
The label that will be displayed on the menu
* #### `callback {Function}`
A method that will be triggered when clicking on the item label. This option is not required if your desired menu item not have one action to call on click (like the `playerVersion` default menu item)
### `customStyle {Object}`
Styles to apply to mapped elements on the context menu. This option is an object with the parameters `container`, `list` and `items`
* #### `container {Object}`
Attributes that will be applied in the main element. This option is an object that receives CSS attributes like the options example at the beginning of this section
* #### `list {Object}`
Attributes that will be applied in the `
- ` element. This option is an object that receives CSS attributes like the options example at the beginning of this section
- ` element. This option is an object that receives CSS attributes like the options example at the beginning of this section
## Development
Install dependencies: `npm install`Run: `npm start`
Test: `npm test`
Lint: `npm run lint`
Build: `npm run build`
Minified version: `npm run release`
* #### `items {Object}`
Attributes that will be applied in each `