Socket
Socket
Sign inDemoInstall

@contently/videojs-annotation-comments

Package Overview
Dependencies
26
Maintainers
4
Versions
6
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.1.4 to 2.0.0

18

LICENSE.md
Copyright Contently, Inc. 2017
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

49

package.json
{
"name": "@contently/videojs-annotation-comments",
"version": "1.1.4",
"version": "2.0.0",
"description": "A plugin for video.js to add support for timeline moment/range comments and annotations",
"repository": "git@github.com:contently/videojs-annotation-comments.git",
"main": "build/videojs-annotation-comments.cjs.js",
"style": "build/css/annotations.css",
"files": [
"build"
],
"scripts": {
"test": "./node_modules/gulp/bin/gulp.js test"
"test": "gulp test",
"watch": "gulp watch",
"build": "gulp build"
},

@@ -14,3 +20,4 @@ "author": "Evan Carothers (@ecaroth) & Jack Pope (@jackpope)",

"devDependencies": {
"@semantic-release/changelog": "^3.0.2",
"@semantic-release/changelog": "^3.0.5",
"@semantic-release/git": "^7.0.18",
"babel-core": "^6.26.3",

@@ -21,4 +28,4 @@ "babel-plugin-transform-es2015-modules-simple-commonjs": "^0.3.0",

"babelify": "^7.3.0",
"browserify": "^16.2.3",
"chai": "^4.1.2",
"browserify": "^16.5.0",
"chai": "^4.2.0",
"es6-object-assign": "^1.1.0",

@@ -37,3 +44,3 @@ "gulp": "^3.9.1",

"gulp-mocha": "^4.3.1",
"gulp-rename": "^1.2.2",
"gulp-rename": "^1.4.0",
"gulp-replace": "^0.5.4",

@@ -51,8 +58,8 @@ "gulp-sass": "^3.2.1",

"jshint-stylish": "~2.0.1",
"mocha": "^4.0.0",
"moment": "^2.22.1",
"mocha": "^6.2.0",
"moment": "^2.24.0",
"pump": "^1.0.3",
"semantic-release": "^15.13.3",
"underscore": "^1.9.0",
"video.js": "^6.9.0",
"semantic-release": "^15.13.21",
"underscore": "^1.9.1",
"video.js": "^7.6.5",
"vinyl-buffer": "^1.0.1",

@@ -62,2 +69,6 @@ "vinyl-source-stream": "^1.1.2",

},
"peerDependencies": {
"jquery": "^3",
"video.js": "^7"
},
"babel": {

@@ -75,5 +86,19 @@ "presets": [

"@semantic-release/npm",
"@semantic-release/github"
"@semantic-release/github",
[
"@semantic-release/git",
{
"assets": [
"CHANGELOG.md",
"package.json",
"yarn.lock"
],
"message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
}
]
]
},
"dependencies": {
"mitt": "^1.2.0"
}
}

177

README.md
[![CircleCI](https://circleci.com/gh/contently/videojs-annotation-comments/tree/master.svg?style=svg)](https://circleci.com/gh/contently/videojs-annotation-comments/tree/master)
# AnnotationComments : Collaborate in your VideoJS player
# AnnotationComments : Collaborate in your VideoJS player
![AnnotationComments Screenshot1](test/screenshot.png)
![AnnotationComments Screenshot1](test/screenshot.png)
### Background
>## Upgrading v1 -> v2
>Please note that the event based API has changed. In version 1, you can subscribe to plugin events with `pluginInstance.on()`. In version 2, the same functionality is available with `pluginInstance.registerListener()`. The following docs are for the latest version.
Collaboration between videographers and clients can be tedious, with emails and phone calls that waste time trying to reference specific frames and areas of the screen. This plugin enables more efficient collaboration from the browser.
## About
This plugin was conceived and developed as a Hack Week project at [Contently](http://www.contently.com) by [Evan Carothers](http://www.github.com/ecaroth) and [Jack Pope](http://www.github.com/jackpope). Continuing our focus and commitment to multimedia support at Contently, the entire team productized and bulletproofed the plugin as a flexible solution to be used in our product and other open-source use cases.
### Background
Collaboration between videographers and clients can be tedious, with emails and phone calls that waste time trying to reference specific frames and areas of the screen. This plugin enables more efficient collaboration from the browser.
This plugin was conceived and developed as a Hack Week project at [Contently](http://www.contently.com) by [Evan Carothers](http://www.github.com/ecaroth) and [Jack Pope](http://www.github.com/jackpope). Continuing our focus and commitment to multimedia support at Contently, the entire team productized and bulletproofed the plugin as a flexible solution to be used in our product and other open-source use cases.
### Goals
- **Efficient for videographers and clients alike** - Provides useful collaboration features including annotations, comments/replies, ranged time markers, and more, with intuitive controls.
- **Efficient for videographers and clients alike** - Provides useful collaboration features including annotations, comments/replies, ranged time markers, and more, with intuitive controls.
- **SIMPLE & LIGHTWEIGHT** - Everything is contained within the plugin and player element. There is no need to build additional UI components. Just install VideoJS, register the plugin, setup whatever backend storage you wish, and start collaborating.
- **EXTENSIBLE** - The plugin can be integrated with existing commenting systems (as we did within Contently), and makes very few assumptions about how to store annotations. Custom events are available for communicating with external APIs, providing support for on-page interactions and data persistence. Simple CSS overrides can also allow for branding customizations with minimal effort, or completely custom UI/UX.
### VideoJS Plugins
### VideoJS Plugins
[VideoJS](http://videojs.com/) is a popular open-source HTML5 video player library used by 400k+ sites. As of v6, there is an extendable plugin architecture which was used to create this plugin. This plugin is built and tested against [VideoJS v 6.2.0](https://www.npmjs.com/package/video.js/)
[VideoJS](http://videojs.com/) is a popular open-source HTML5 video player library used by 400k+ sites. As of v6, there is an extendable plugin architecture which was used to create this plugin. This plugin is built and tested against [VideoJS v7](https://www.npmjs.com/package/video.js/)
### Add it to your VideoJS player
## Use it!
#### As a script from build
### Install
```javascript
```
yarn add @contently/videojs-annotation-comments
```
OR
```
npm install @contently/videojs-annotation-comments
```
### Add it to your VideoJS player
#### As a script from build
```javascript
// ...videojs & videojs-annotation-comments have been loaded in script tags...
var player = videojs('video-id');
var player = videojs('video-id');
var plugin = player.annotationComments(pluginOptions)
```
#### As a module
#### As a module
```javascript
```javascript
import videojs from 'video.js'
import AnnotationComments from 'videojs-annotation-comments'
import AnnotationComments from '@contently/videojs-annotation-comments'
videojs.registerPlugin('annotationComments', AnnotationComments(videojs))

@@ -43,7 +61,7 @@ var player = videojs('video-id')

### Plugin options / configuration
### Plugin options / configuration
When initializing the plugin, you can pass in an options array to override default options. Any excluded options are set to their default values, listed below:
When initializing the plugin, you can pass in an options array to override default options. Any excluded options are set to their default values, listed below:
```javascript
```javascript
const pluginOptions = {

@@ -71,7 +89,7 @@ // Collection of annotation data to initialize

### Annotation Data Structure
### Annotation Data Structure
To initialize the plugin with the `annotationsObjects` collection, use the following structure:
To initialize the plugin with the `annotationsObjects` collection, use the following structure:
```javascript
const annotationsObjects = [
const annotationsObjects = [{
id: 1,

@@ -88,35 +106,33 @@ range: {

},
comments: [
{
id: 1,
meta: {
datetime: '2017-03-28T19:17:32.238Z',
user_id: 1,
user_name: 'Jack Pope'
},
body: 'The first comment!'
}
]
];
comments: [{
id: 1,
meta: {
datetime: '2017-03-28T19:17:32.238Z',
user_id: 1,
user_name: 'Jack Pope'
},
body: 'The first comment!'
}]
}];
```
### Programmatic Control
### Programmatic Control
If you'd like to drive the plugin or render plugin data through external UI elements, you can configure the plugin to hide the internal components and pass data through custom events. There are two kinds of AnnotationComments API events, _externally fired_ and _internally fired_.
If you'd like to drive the plugin or render plugin data through external UI elements, you can configure the plugin to hide the internal components and pass data through custom events. There are two kinds of AnnotationComments API events, _externally fired_ and _internally fired_.
##### Waiting for Plugin Ready
#### Waiting for Plugin Ready
Before triggering any events on the plugin, you must wait for it to be ready. You can use the `onReady` function on the plugin:
Before triggering any events on the plugin, you must wait for it to be ready. You can use the `onReady` function on the plugin:
```javascript
plugin.onReady(() => {
```javascript
plugin.registerListenerReady(() => {
// do stuff with the plugin, such as fire events or setup listeners
}));
});
```
##### Supported Externally Fired Events:
#### Supported Externally Fired Events:
These events are external actions that can be called from your scripts to trigger events within the plugin:
```javascript
```javascript
// openAnnotation : Opens an annotation within the player given an ID

@@ -135,3 +151,3 @@ plugin.fire('openAnnotation', { id: myAnnotationId });

y2: null
}
},
commentStr: "This is my comment."

@@ -153,8 +169,8 @@ });

##### Supported Internally Fired Events:
These are events that are triggered from within the running plugin and can be listened for by binding to `plugin.on` within your scripts:
#### Supported Internally Fired Events:
These are events that are triggered from within the running plugin and can be listened for by binding to `plugin.registerListener` within your scripts:
```javascript
// annotationOpened : Fired whenever an annotation is opened
plugin.on('annotationOpened', (event) => {
plugin.registerListener('annotationOpened', (event) => {
// event.detail =

@@ -167,3 +183,3 @@ // {

// annotationClosed : Fired whenever an annotation is closed
plugin.on('annotationClosed', (event) => {
plugin.registerListener('annotationClosed', (event) => {
// event.detail = annotation (object) in format {id:.., comments:..., range:..., shape:...}

@@ -175,3 +191,3 @@ });

// 3. the shape is dragged
plugin.on('addingAnnotationDataChanged', (event) => {
plugin.registerListener('addingAnnotationDataChanged', (event) => {
var newRange = event.detail.range; // returns range data if range was changed

@@ -182,3 +198,3 @@ var newShape = event.detail.shape; // returns shape data if shape was changed

// annotationDeleted : Fired when an annotation has been deleted via the UI
plugin.on('annotationDeleted', (event) => {
plugin.registerListener('annotationDeleted', (event) => {
// annotationId = event.detail

@@ -188,3 +204,3 @@ });

// includes initial range data
plugin.on('enteredAddingAnnotation', (event) => {
plugin.registerListener('enteredAddingAnnotation', (event) => {
var startTime = event.detail.range.start;

@@ -195,7 +211,7 @@ // do something when adding annotation state begins

// This is a way to watch global plugin state, as an alternative to watching various annotation events
plugin.on('onStateChanged', (event) => {
plugin.registerListener('onStateChanged', (event) => {
// event.detail = annotation state data
});
// playerBoundsChanged : Fired when the player boundaries change due to window resize or fullscreen mode
plugin.on('playerBoundsChanged', (event) => {
plugin.registerListener('playerBoundsChanged', (event) => {
var bounds = event.detail;

@@ -205,7 +221,7 @@ // do something with the new boundaries

// Entering annotation mode (annotation icon was clicked when previously 'off')
plugin.on('annotationModeEnabled', (event) => {
plugin.registerListener('annotationModeEnabled', (event) => {
// do something
});
// Exiting annotation mode (annotation icon was clicked when previously 'on')
plugin.on('annotationModeDisabled', (event) => {
plugin.registerListener('annotationModeDisabled', (event) => {
// do something

@@ -215,55 +231,54 @@ });

### Develop and Build
## Develop and Build
We're using [npm](https://www.npmjs.com/) for package management and [gulp](https://github.com/gulpjs/gulp) as our build system.
We're using [yarn](https://yarnpkg.com/en/) for package management and [gulp](https://github.com/gulpjs/gulp) as our build system.
The fastest way to get started:
The fastest way to get started:
- Clone the repo
- Run `npm install`
- Run `npm install -g gulp`
- Run `gulp build`
- Run `gulp watch`
- Run `yarn install`
- Run `yarn build`
- Run `yarn watch`
- Visit `http://localhost:3004/test.html` to see the magic happen.
#### Templates
### Templates
We're using the [Handlebars](http://handlebarsjs.com/) templating library to render various components within the plugin. For performance, the templates are pre-compiled into a JS file within the development environment. That way we only need to require the Handlebars runtime, saving nearly 100kb from the minified build! ⚡️
The `gulp templates` task is used to precompile every template to `/src/js/compiled/templates.js`. This file should _not_ be modified directly, but rather the templates themselves in `/src/templates` should be modified if changes are needed. The templates task will run automatically within `gulp watch`.
The `gulp templates` task is used to precompile every template to `/src/js/compiled/templates.js`. This file should _not_ be modified directly, but rather the templates themselves in `/src/templates` should be modified if changes are needed. The templates task will run automatically within `gulp watch`.
#### UI / CSS Customization
### UI / CSS Customization
The plugin uses SASS and all styles are defined in [annotaitons.scss](src/css/annotations.scss). There is extenssive commenting on classes and styles in the file. The plugin uses a deep level of specificity to prevent styles from polluting elements on the page, and all classes are prefixed with `vac-` to prevent classname collisions in the global namespace.
The plugin uses SASS and all styles are defined in [annotaitons.scss](src/css/annotations.scss). There is extenssive commenting on classes and styles in the file. The plugin uses a deep level of specificity to prevent styles from polluting elements on the page, and all classes are prefixed with `vac-` to prevent classname collisions in the global namespace.
You can extend/modify colors and elements quite easily by writing an overrides stylesheet to address the specific elements that you wish to modify. You can also change the variable colors in the stylesheet and compile yourself for more customization.
You can extend/modify colors and elements quite easily by writing an overrides stylesheet to address the specific elements that you wish to modify. You can also change the variable colors in the stylesheet and compile yourself for more customization.
_NOTE_ - our gulp build tasks use an auto-prefixer to make the styles work cross-browser, so be sure to run that yourself if you compile the SASS files with changes.
_NOTE_ - our gulp build tasks use an auto-prefixer to make the styles work cross-browser, so be sure to run that yourself if you compile the SASS files with changes.
#### Testing
### Testing
##### Feature tests
#### Feature tests
Feature tests are currently browser-based and run by visiting `http://localhost:3004/mocha/features/index.html`. Feature tests can be added as files in the `/test/mocha/features/` directory and then included within the `index.html` file as a external scripts.
Feature tests are currently browser-based and run by visiting `http://localhost:3004/mocha/features/index.html`. Feature tests can be added as files in the `/test/mocha/features/` directory and then included within the `index.html` file as a external scripts.
##### Unit tests
#### Unit tests
Unit tests are run through the `gulp test` task. If the `tdd` task is included in `gulp watch`, the tests will run with every change to the test files. Each module should have a corresponding unit test file within the `/test/mocha/modules` directory.
Unit tests are run through the `gulp test` task. If the `tdd` task is included in `gulp watch`, the tests will run with every change to the test files. Each module should have a corresponding unit test file within the `/test/mocha/modules` directory.
#### Gulp commands
### Gulp commands
`gulp watch`: Fires up webserver @ `http://localhost:3004/test.html`, watches for any file changes in `/src`, including js, css (scss), and templates (.hbs), repackages, and transpiles to an unminified file in `/build` on change.
`gulp watch`: Fires up webserver @ `http://localhost:3004/test.html`, watches for any file changes in `/src`, including js, css (scss), and templates (.hbs), repackages, and transpiles to an unminified file in `/build` on change.
`gulp transpile`: Transpiles modules/files to build file in `/build` with JS maps
`gulp transpile`: Transpiles modules/files to build file in `/build` with JS maps
`gulp build`: Runs transpilation, browserify, sass, then minifies to distribution filename in `/build` with attribution
`gulp build`: Runs transpilation, browserify, sass, then minifies to distribution filename in `/build` with attribution
`gulp templates`: Uses Handlebars to pre-compile templates into a javascript file. See Templates section above.
`gulp templates`: Uses Handlebars to pre-compile templates into a javascript file. See Templates section above.
`gulp test`: Runs the mocha unit tests within the `/test/mocha/modules/` directory.
`gulp test`: Runs the mocha unit tests within the `/test/mocha/modules/` directory.
`gulp lint`: Runs jshint linter on javascript files in `/src`
`gulp lint`: Runs jshint linter on javascript files in `/src`
#### License
### License
This plugin is [licensed](license.md) under the Apache License, Version 2.0, which is the same license used by Video.js
This plugin is [licensed](license.md) under the Apache License, Version 2.0, which is the same license used by Video.js
_config.yml
.babelrc
.circleci/config.yml
.jshintrc
build/videojs-annotation-comments.cjs.min.js
build/videojs-annotation-comments.min.js
CHANGELOG.md
CONTRIBUTING.md
docs/_config.yml
docs/_layouts/default.html
docs/_sass/jekyll-theme-cayman.scss
docs/_sass/normalize.scss
docs/_sass/rouge-github.scss
docs/_sass/variables.scss
docs/_site/assets/css/style.css
docs/_site/assets/css/videojs_skin.css
docs/_site/assets/js/demo_annotations.js
docs/_site/assets/js/main.js
docs/_site/build/css/annotations.css
docs/_site/build/videojs-annotation-comments.cjs.min.js
docs/_site/build/videojs-annotation-comments.min.js
docs/_site/index.html
docs/_site/jekyll-theme-cayman.gemspec
docs/_site/script/bootstrap
docs/_site/script/cibuild
docs/_site/script/release
docs/_site/script/server
docs/_site/thumbnail.png
docs/assets/css/style.scss
docs/assets/css/videojs_skin.css
docs/assets/js/demo_annotations.js
docs/assets/js/main.js
docs/build/css/annotations.css
docs/build/videojs-annotation-comments.cjs.min.js
docs/build/videojs-annotation-comments.min.js
docs/Gemfile
docs/Gemfile.lock
docs/index.md
docs/jekyll-theme-cayman.gemspec
docs/script/bootstrap
docs/script/cibuild
docs/script/release
docs/script/server
docs/thumbnail.png
gulpfile.js
license.md
src/css/annotations.scss
src/js/annotation_comments.js
src/js/compiled/templates.js
src/js/components/annotation_state.js
src/js/components/annotation.js
src/js/components/comment_list.js
src/js/components/comment.js
src/js/components/controls.js
src/js/components/draggable_marker.js
src/js/components/marker.js
src/js/components/player_button.js
src/js/components/selectable_shape.js
src/js/components/shape.js
src/js/index.js
src/js/lib/event_dispatcher.js
src/js/lib/logger.js
src/js/lib/player_component.js
src/js/lib/player_ui_component.js
src/js/lib/polyfills.js
src/js/lib/utils.js
src/templates/comment_list.hbs
src/templates/comment.hbs
src/templates/controls.hbs
src/templates/draggable_marker.hbs
src/templates/marker_wrap.hbs
src/templates/marker.hbs
src/templates/new_comment.hbs
src/templates/player_button.hbs
build/videojs-annotation-comments.cjs.js

Sorry, the diff of this file is too big to display

build/videojs-annotation-comments.cjs.js.map

Sorry, the diff of this file is not supported yet

build/videojs-annotation-comments.js

Sorry, the diff of this file is too big to display

build/videojs-annotation-comments.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc