videocontext - npm Package Compare versions

Comparing version 0.53.1 to 0.54.0

CHANGELOG.md

@@ -0,1 +1,7 @@
+### 0.54.0 (2019-11-28)
+
+##### Other Changes
+
+*  working headless but not accurate enough ([3ed7b163](https://github.com/bbc/VideoContext/commit/3ed7b1633f5e2ab1e9edeb338eaeef185cc38a1a))
+
 #### 0.53.1 (2019-07-05)
@@ -2,0 +8,0 @@

package.json

 {
   "name": "videocontext",
-  "version": "0.53.1",
+  "version": "0.54.0",
   "description": "A WebGL & HTML5 graph based video composition library",
@@ -33,11 +33,20 @@ "repository": {
     "test-coverage": "jest test/unit/*.js --coverage --collectCoverageFrom 'src/**/*.js'",
-    "test-regression": "jest test/regression/*.js",
+    "test-ci:cypress": "yarn _server_cy_then _cy:run",
+    "cypress": "./cypress-run.sh docker",
+    "cypress:update-snapshots": "./cypress-run.sh docker-update-snapshots",
+    "cypress:gui": "yarn _server_cy_then _cy:open",
+    "cypress:gui-update-snapshots": "yarn _server_cy_then _cy:local-update-snapshots",
+    "_cy:local-update-snapshots": "./cypress-run.sh local-update-snapshots",
+    "_cy:open": "./cypress-run.sh local",
+    "_cy:run": "./cypress-run.sh",
+    "_cy-server": "concurrently \"yarn dev\" \"ws -p 3001\"",
+    "_server_cy_then": "start-server-and-test _cy-server http://localhost:3001",
     "docs": "bash ./build-docs.sh",
-    "docs-commit": "npm run docs && git add docs && git diff-index --quiet HEAD || git commit -m 'update docs in preparation for release'",
+    "docs-commit": "yarn docs && git add docs && git diff-index --quiet HEAD || git commit -m 'update docs in preparation for release'",
     "format": "prettier --write '{src,test}/**/*.js'",
     "lint": "eslint '{src,test}/**/*.js'",
-    "precommit": "npm run lint && npm run format && npm run test-unit",
-    "release:major": "npm run docs-commit && changelog -M && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version --new-version major",
-    "release:minor": "npm run docs-commit && changelog -m && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version --new-version minor",
-    "release:patch": "npm run docs-commit && changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version --new-version patch",
+    "precommit": "yarn lint && yarn format && yarn test-unit",
+    "release:major": "yarn docs-commit && changelog -M && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && yarn version --new-version major",
+    "release:minor": "yarn docs-commit && changelog -m && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && yarn version --new-version minor",
+    "release:patch": "yarn docs-commit && changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && yarn version --new-version patch",
     "postversion": "git push -u origin HEAD --follow-tags"
@@ -53,9 +62,11 @@ },
     "babel-loader": "^7.1.4",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
+    "babel-plugin-add-module-exports": "^1.0.0",
     "babel-preset-env": "^1.7.0",
+    "concurrently": "^4.1.1",
+    "cypress": "3.5.0",
+    "cypress-image-snapshot": "^3.1.1",
     "eslint": "^4.18.2",
     "eslint-loader": "^2.0.0",
+    "eslint-plugin-cypress": "^2.2.0",
     "generate-changelog": "^1.7.1",
-    "http-server": "^0.11.1",
     "husky": "^0.14.3",
@@ -66,7 +77,7 @@ "jest": "^24.3.1",
     "jsdoc": "^3.4.3",
-    "path": "^0.12.7",
+    "local-web-server": "^2.6.1",
     "prettier": "^1.13.2",
-    "puppeteer": "1.11.0",
     "raw-loader": "^0.5.1",
     "sinon": "^7.2.7",
+    "start-server-and-test": "^1.7.11",
     "webgl-mock": "^0.1.7",
@@ -81,5 +92,8 @@ "webpack": "^4.10.2",
     "moduleNameMapper": {
-      "\\.(frag|vert)$": "<rootDir>/__mocks__/glsl.js"
-    }
+      "\\.(frag|vert)$": "<rootDir>/test/__mocks__/glsl.js"
+    },
+    "testMatch": [
+      "**/test/(integration|unit)/?(*.)+(spec|test).js?(x)"
+    ]
   }
 }

README.md

@@ -20,2 +20,3 @@ # VideoContext
   - [VideoNode](#videonode)
+  - [AudioNode](#audionode)
   - [ImageNode](#imagenode)
@@ -36,3 +37,3 @@ - [CanvasNode](#canvasnode)
 
-> View on [CodeSandbox](https://codesandbox.io/embed/nostalgic-meitner-08sh2).
+> View on [CodeSandbox](https://codesandbox.io/embed/videocontext-demo-65t8v).
 
@@ -97,4 +98,4 @@ ```JavaScript
 ```
-npm install
-npm run doc
+yarn install
+yarn doc
 ```
@@ -121,3 +122,3 @@
 
-> View on [CodeSandbox](https://codesandbox.io/embed/naughty-sea-dv0x1)
+> View on [CodeSandbox](https://codesandbox.io/embed/videocontext-videonode-qmuzz).
 
@@ -137,2 +138,15 @@ ```JavaScript
 
+### AudioNode
+
+An audio source node.
+
+> View on [CodeSandbox](https://codesandbox.io/embed/videocontext-audionode-lbqrs).
+
+```JavaScript
+var audioNode = videoCtx.audio("./audio.mp3");
+audioNode.connect(videoCtx.destination);
+audioNode.start(0);
+audioNode.stop(4);
+```
+
 ### ImageNode
@@ -142,3 +156,3 @@
 
-> View on [CodeSandbox](https://codesandbox.io/embed/crazy-bas-6m7r7)
+> View on [CodeSandbox](https://codesandbox.io/embed/videocontext-imagenode-twy48).
 
@@ -156,3 +170,3 @@ ```JavaScript
 
-> View on [CodeSandbox](https://codesandbox.io/embed/peaceful-meninsky-jkscs)
+> View on [CodeSandbox](https://codesandbox.io/embed/videocontext-canvasnode-5myep).
 
@@ -169,39 +183,61 @@ ```JavaScript
 
-Sometimes using the pre-built node is just not enough.
-You can create your own source nodes that host more logic and let you hook into the VideoContext Node API easily.
+Sometimes using the pre-built node is just not enough. You can create your own source nodes that host more logic and let you hook into the VideoContext Node API easily.
 
-View below a custom source node that can now play an HLS VOD.
+The following example shows how to create a custom source node that can play a HLS VOD:
 
+> View on [CodeSandbox](https://codesandbox.io/embed/videocontext-customsourcenode-ijzh8)
+
 ```JavaScript
 import Hls from "hls.js";
 
-class HLSNode extends VideoNode {
-    constructor(src, gl, renderGraph, currentTime, playbackRate, sourceOffset, preloadTime, hlsOptions = {}) {
+class HLSNode extends VideoContext.NODES.VideoNode {
+  constructor(src, gl, renderGraph, currentTime, playbackRate, sourceOffset, preloadTime, hlsOptions = {}) {
+    //Create a video element.
+    const video = document.createElement("video");
 
-        this._src = src;
-        const video = document.createElement("video");
-        this.hls = new Hls(hlsOptions);
-        this.hls.attachVideo(video);
+    super(video, gl, renderGraph, currentTime, playbackRate, sourceOffset, preloadTime);
 
-        super(video, gl, renderGraph, currentTime, playbackRate, sourceOffset, preloadTime);
+    //Create a HLS object.
+    this.hls = new Hls(hlsOptions);
 
-        this._displayName = "HLSNode";
-        this._elementType = "hls";
-    }
+    //Bind the video element.
+    this.hls.attachMedia(video);
 
-    _load() {
-        this.hls.loadSource(this._src);
-        this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
-            this._ready = true;
-            this._triggerCallbacks("loaded");
-        });
+    //Set the source path.
+    this._src = src;
+
+    this._displayName = "HLSNode";
+    this._elementType = "hls";
+  }
+
+  _load() {
+    //Load the video source on first load.
+    if (!this._loadTriggered) {
+      this.hls.loadSource(this._src);
     }
+    super._load();
+  }
 
-    destroy() {
-        if (this.hls) {
-            this.hls.destroy();
-        }
-        super.destroy();
+  destroy() {
+    if (this.hls) {
+      this.hls.destroy();
     }
+    super.destroy();
+  }
 }
+
+//Setup the video context.
+const canvas = document.getElementById("canvas");
+const ctx = new VideoContext(canvas);
+
+//Create a custom HLS source node and play it for 60 seconds.
+const hlsNode = ctx.customSourceNode(HLSNode, "https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8");
+hlsNode.start(0);
+hlsNode.stop(60);
+
+//Set-up the processing chain.
+hlsNode.connect(ctx.destination);
+
+//start playback.
+ctx.play();
 ```
@@ -219,3 +255,3 @@
 
-> View on [CodeSandbox](https://codesandbox.io/embed/hopeful-shtern-q6lvy)
+> View on [CodeSandbox](https://codesandbox.io/embed/videocontext-effectnode-ysc7w).
 
@@ -291,3 +327,3 @@ ```JavaScript
 
-> View on [CodeSandbox](https://codesandbox.io/embed/modest-sutherland-gp2c5)
+> View on [CodeSandbox](https://codesandbox.io/embed/videocontext-transitionnode-gp2c5).
 
@@ -395,3 +431,3 @@ ```JavaScript
 
-> View on [CodeSandbox](https://codesandbox.io/embed/sweet-bartik-6cz3d).
+> View on [CodeSandbox](https://codesandbox.io/embed/videocontext-compositingnode-6cz3d).
 
@@ -486,16 +522,21 @@ ```JavaScript
 
-```
+```sh
 # install build and development dependencies
-npm install
+yarn install
 
 # run a dev server with automatic reload
-npm run dev
+yarn dev
 
 # watch unit and integration tests
-npm run test-watch
+yarn test-watch
 
-# run regression tests in headless browser
-npm run test-regression
+# run the end-to-end regression tests in a headless browser
+yarn cypress
 ```
 
+For more information on writing, running and debugging the end-to-end cypress tests
+see [./test/cypress#readme](./test/cypress#readme).
+
+For an overview of all testing see [./test#readme](./test#readme)
+
 ### Gitflow
@@ -511,5 +552,5 @@
 ```
-npm run release:major
-npm run release:minor
-npm run release:patch
+yarn release:major
+yarn release:minor
+yarn release:patch
 ```
@@ -528,9 +569,11 @@
 4. tag and push using script
-    - `npm run release:patch|minor|major`
+   - `yarn release:patch|minor|major`
 5. open pull request against master
 6. merge when tests have passed
 7. merge master back in to develop:
-    - `git pull`
-    - `git checkout develop`
-    - `git merge master`
+   - `git checkout master`
+   - `git pull`
+   - `git checkout develop`
+   - `git merge master`
+   - `git push`
 
@@ -549,7 +592,7 @@ There is one housekeeping task (this will be automated at some point):
 ```
-npm run build     # build dist packages
-npm run doc       # create documentation
-npm run build_all # do all of the above
+yarn build     # build dist packages
+yarn doc       # create documentation
+yarn build_all # do all of the above
 ```
 
 The library is written in es6 and cross-compiled using babel.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

584

increased by7.95%

Worsened metrics

Total package byte prevSize

639835

decreased by-2.38%

Dev dependency count

26

increased by8.33%

Lines of code

6030

decreased by-6.64%

No dependency changes