Skip to content

Commit 6fb0e66

Browse files
Create README.md
1 parent ef226bf commit 6fb0e66

File tree

1 file changed

+74
-0
lines changed

1 file changed

+74
-0
lines changed

README.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# Clappr context menu plugin
2+
![screenshot](screenshot.png)
3+
## Usage
4+
You can use it from JSDelivr:
5+
```
6+
https://cdn.jsdelivr.net/npm/clappr-context-menu-plugin@latest/dist/clappr-context-menu-plugin.js
7+
```
8+
or as a npm package:
9+
```
10+
yarn add clappr-context-menu-plugin
11+
```
12+
Then just add `ContextMenuPlugin` into the list of plugins of your player instance
13+
```javascript
14+
var player = new Clappr.Player({
15+
source: 'http://your.video/here.mp4',
16+
plugins: [ContextMenuPlugin]
17+
});
18+
```
19+
### Options
20+
The options for the plugin go in the `contextMenu` property as shown below.
21+
```javascript
22+
var player = new Clappr.Player({
23+
source: 'http://your.video/here.mp4',
24+
plugins: [ContextMenuPlugin],
25+
contextMenu: {
26+
extraOptions: [
27+
{
28+
name: 'test',
29+
label: 'Test Label',
30+
//optional
31+
callback: function() {
32+
console.log('A absolutely awesome extra context menu item action');
33+
}
34+
}
35+
],
36+
customStyle: {
37+
container: {
38+
'display': 'block'
39+
},
40+
list: {
41+
'background-color': 'gray'
42+
},
43+
itens: {
44+
'color': 'yellow'
45+
}
46+
}
47+
}
48+
});
49+
```
50+
`extraOptions {Array}`: Array of objects to which each object can have the parameters `name`, `label` and `callback`.
51+
52+
`name {String}`: Name of the extra item.
53+
54+
`label {String}`: The label that will be displayed on menu.
55+
56+
`callback {Function}`: Method that will be triggered when clicking on the item label.
57+
58+
`customStyle {Object}`: Object with the parameters `container`, `list` and `itens`.
59+
60+
`container {Object}`: Receive the attributes that will be applied in the main element.
61+
62+
`list {Object}`: Receive the attributes that will be applied in the `<ul>` element.
63+
64+
`itens {Object}`: Receive the attributes that will be applied in each `<li>` element.
65+
66+
# Development
67+
68+
Install dependencies: `yarn`
69+
70+
Run: `yarn start`
71+
72+
Build: `yarn build`
73+
74+
Minified version: `yarn release`

0 commit comments

Comments
 (0)