videocontext - npm Package Compare versions

Comparing version 0.51.7 to 0.52.0

package.json

 {
   "name": "videocontext",
-  "version": "0.51.7",
+  "version": "0.52.0",
   "description": "A WebGL & HTML5 graph based video composition library",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -73,2 +73,3 @@ # VideoContext
 * VideoNode - Plays video.
+* AudioNode - Plays audio.
 * ImageNode - Displays images for specified time.
@@ -75,0 +76,0 @@ * CanvasNode - Displays output of canvas for specified time.

src/ProcessingNodes/compositingnode.js

 //Matthew Shotton, R&D User Experience,© BBC 2015
 import ProcessingNode from "./processingnode";
-import { createElementTexutre } from "../utils.js";
+import { createElementTexture } from "../utils.js";
 
@@ -10,3 +10,3 @@ class CompositingNode extends ProcessingNode{
     constructor(gl, renderGraph, definition){
-        let placeholderTexture = createElementTexutre(gl);
+        let placeholderTexture = createElementTexture(gl);
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0,0,0,0]));
@@ -13,0 +13,0 @@ super(gl, renderGraph, definition, definition.inputs, false);

src/ProcessingNodes/effectnode.js

 //Matthew Shotton, R&D User Experience,© BBC 2015
 import ProcessingNode from "./processingnode";
-import { createElementTexutre } from "../utils.js";
+import { createElementTexture } from "../utils.js";
 
@@ -10,3 +10,3 @@ class EffectNode extends ProcessingNode{
     constructor(gl, renderGraph, definition){
-        let placeholderTexture = createElementTexutre(gl);
+        let placeholderTexture = createElementTexture(gl);
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0,0,0,0]));
@@ -13,0 +13,0 @@

src/ProcessingNodes/processingnode.js

 //Matthew Shotton, R&D User Experience,© BBC 2015
 import GraphNode from "../graphnode";
-import { compileShader, createShaderProgram, createElementTexutre, updateTexture } from "../utils.js";
+import { compileShader, createShaderProgram, createElementTexture, updateTexture } from "../utils.js";
 import { RenderException } from "../exceptions.js";
@@ -34,3 +34,3 @@
         this._inputTextureCount = 0;
-        this._texture = createElementTexutre(gl);
+        this._texture = createElementTexture(gl);
         gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, gl.canvas.width, gl.canvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
@@ -58,3 +58,3 @@ //compile the shader
             if (propertyValue instanceof Image){
-                this._properties[propertyName].texture = createElementTexutre(gl);
+                this._properties[propertyName].texture = createElementTexture(gl);
                 this._properties[propertyName].texutreUnit = gl.TEXTURE0 + this._boundTextureUnits;
@@ -61,0 +61,0 @@ this._boundTextureUnits += 1;

src/SourceNodes/sourcenode.js

 //Matthew Shotton, R&D User Experience,© BBC 2015
-import { updateTexture, clearTexture, createElementTexutre } from "../utils.js";
+import { updateTexture, clearTexture, createElementTexture } from "../utils.js";
 import GraphNode from "../graphnode";
@@ -34,3 +34,3 @@
         this._stretchPaused = false;
-        this._texture = createElementTexutre(gl);
+        this._texture = createElementTexture(gl);
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0,0,0,0]));
@@ -37,0 +37,0 @@ this._callbacks = [];

src/SourceNodes/videonode.js

 //Matthew Shotton, R&D User Experience,© BBC 2015
-import SourceNode, { SOURCENODESTATE } from "./sourcenode";
+import MediaNode from "./medianode";
 
-class VideoNode extends SourceNode {
+class VideoNode extends MediaNode {
     /**
@@ -9,211 +9,9 @@ * Initialise an instance of a VideoNode.
     */
-    constructor(src, gl, renderGraph, currentTime, globalPlaybackRate=1.0, sourceOffset=0, preloadTime = 4, videoElementCache=undefined, attributes = {}){
-        super(src, gl, renderGraph, currentTime);
-        this._preloadTime = preloadTime;
-        this._sourceOffset = sourceOffset;
-        this._globalPlaybackRate = globalPlaybackRate;
-        this._videoElementCache = videoElementCache;
-        this._playbackRate = 1.0;
-        this._volume = 1.0;
-        this._playbackRateUpdated = true;
-        this._attributes = attributes;
-        this._loopElement = false;
-        this._isElementPlaying = false;
-        if (this._attributes.loop){
-            this._loopElement = this._attributes.loop;
-        }
+    constructor() {
+        super(...arguments);
         this._displayName = "VideoNode";
+        this._elementType = "video";
     }
-
-    set playbackRate(playbackRate){
-        this._playbackRate = playbackRate;
-        this._playbackRateUpdated = true;
-    }
-
-    set stretchPaused(stretchPaused){
-        super.stretchPaused = stretchPaused;
-        if(this._element){
-            if (this._stretchPaused){
-                this._element.pause();
-            } else{
-                if(this._state === SOURCENODESTATE.playing){
-                    this._element.play();
-                }
-            }
-        }
-    }
-
-    get stretchPaused(){
-        return this._stretchPaused;
-    }
-
-    get playbackRate(){
-        return this._playbackRate;
-    }
-
-    get elementURL(){
-        return this._elementURL;
-    }
-
-    set volume(volume){
-        this._volume = volume;
-        if(this._element !== undefined) this._element.volume = this._volume;
-    }
-
-    _load(){
-        super._load();
-        if (this._element !== undefined){
-
-            for (var key in this._attributes) {
-                this._element[key] = this._attributes[key];
-            }
-
-            if (this._element.readyState > 3 && !this._element.seeking){
-                if(this._loopElement === false){
-                    if (this._stopTime === Infinity || this._stopTime == undefined){
-                        this._stopTime = this._startTime + this._element.duration;
-                        this._triggerCallbacks("durationchange", this.duration);
-                    }
-                }
-                if(this._ready !== true){
-                    this._triggerCallbacks("loaded");
-                    this._playbackRateUpdated = true;
-
-                }
-
-                this._ready = true;
-
-            } else{
-                if(this._state !== SOURCENODESTATE.error){
-                    this._ready = false;
-                }
-            }
-            return;
-        }
-        if (this._isResponsibleForElementLifeCycle){
-            if (this._videoElementCache){
-                this._element = this._videoElementCache.get();
-            }else{
-                this._element = document.createElement("video");
-                this._element.setAttribute("crossorigin", "anonymous");
-                this._element.setAttribute("webkit-playsinline", "");
-                this._element.setAttribute("playsinline", "");
-                this._playbackRateUpdated = true;
-            }
-            this._element.volume = this._volume;
-            if (window.MediaStream !== undefined && this._elementURL instanceof MediaStream){
-                this._element.srcObject = this._elementURL;
-            } else {
-                this._element.src = this._elementURL;
-            }
-
-            for (let key in this._attributes) {
-                this._element[key] = this._attributes[key];
-            }
-        }
-        if (this._element){
-            let currentTimeOffset = 0;
-            if (this._currentTime > this._startTime) currentTimeOffset = this._currentTime - this._startTime;
-            this._element.currentTime = this._sourceOffset + currentTimeOffset;
-            this._element.onerror = () => {
-                if (this._element === undefined) return;
-                console.debug("Error with element", this._element);
-                this._state = SOURCENODESTATE.error;
-                //Event though there's an error ready should be set to true so the node can output transparenn
-                this._ready = true;
-                this._triggerCallbacks("error");
-            };
-        }else{
-            //If the element doesn't exist for whatever reason enter the error state.
-            this._state = SOURCENODESTATE.error;
-            this._ready = true;
-            this._triggerCallbacks("error");
-        }
-    }
-
-    _unload(){
-        super._unload();
-        if (this._isResponsibleForElementLifeCycle && this._element !== undefined){
-            this._element.src = "";
-            this._element.srcObject = undefined;
-            for (let key in this._attributes){
-                this._element.removeAttribute(key);
-            }
-            this._element = undefined;
-            if(!this._videoElementCache) delete this._element;
-        }
-        this._ready = false;
-        this._isElementPlaying = false;
-    }
-
-    _seek(time){
-        super._seek(time);
-        if (this.state === SOURCENODESTATE.playing || this.state === SOURCENODESTATE.paused){
-            if (this._element === undefined) this._load();
-            let relativeTime = this._currentTime - this._startTime + this._sourceOffset;
-            this._element.currentTime = relativeTime;
-            this._ready = false;
-        }
-        if((this._state === SOURCENODESTATE.sequenced || this._state === SOURCENODESTATE.ended) && this._element !== undefined){
-            this._unload();
-        }
-    }
-
-    _update(currentTime){
-        //if (!super._update(currentTime)) return false;
-        super._update(currentTime);
-        //check if the video has ended
-        if(this._element !== undefined){
-            if (this._element.ended){
-                this._state = SOURCENODESTATE.ended;
-                this._triggerCallbacks("ended");
-            }
-        }
-
-        if (this._startTime - this._currentTime <= this._preloadTime && this._state !== SOURCENODESTATE.waiting && this._state !== SOURCENODESTATE.ended)this._load();
-
-        if (this._state === SOURCENODESTATE.playing){
-            if (this._playbackRateUpdated)
-            {
-                this._element.playbackRate = this._globalPlaybackRate * this._playbackRate;
-                this._playbackRateUpdated = false;
-            }
-            if (!this._isElementPlaying){
-                this._element.play();
-                if (this._stretchPaused){
-                    this._element.pause();
-                }
-                this._isElementPlaying = true;
-            }
-            return true;
-        } else if (this._state === SOURCENODESTATE.paused){
-            this._element.pause();
-            this._isElementPlaying = false;
-            return true;
-        }
-        else if (this._state === SOURCENODESTATE.ended && this._element !== undefined){
-            this._element.pause();
-            if (this._isElementPlaying){
-                this._unload();
-            }
-            return false;
-        }
-    }
-
-    clearTimelineState(){
-        super.clearTimelineState();
-        if (this._element !== undefined) {
-            this._element.pause();
-            this._isElementPlaying = false;
-        }
-        this._unload();
-    }
-
-    destroy(){
-        if (this._element) this._element.pause();
-        super.destroy();
-    }
-
 }
 
 export default VideoNode;

src/utils.js

@@ -48,3 +48,3 @@ //Matthew Shotton, R&D User Experience,© BBC 2015
 
-export function createElementTexutre(gl){
+export function createElementTexture(gl){
     let texture = gl.createTexture();
@@ -51,0 +51,0 @@ gl.bindTexture(gl.TEXTURE_2D, texture);

src/videocontext.js

 //Matthew Shotton, R&D User Experience,© BBC 2015
 import VideoNode from "./SourceNodes/videonode.js";
+import AudioNode from "./SourceNodes/audionode.js";
 import ImageNode from "./SourceNodes/imagenode.js";
@@ -467,2 +468,8 @@ import CanvasNode from "./SourceNodes/canvasnode.js";
 
+    audio(src, sourceOffset=0, preloadTime=4, audioElementAttributes={}){
+        let audioNode = new AudioNode(src, this._gl, this._renderGraph, this._currentTime, this._playbackRate, sourceOffset, preloadTime, this._audioElementCache, audioElementAttributes);
+        this._sourceNodes.push(audioNode);
+        return audioNode;
+    }
+
     /**
@@ -469,0 +476,0 @@ * @depricated

No alert changes

Improved metrics

Total package byte prevSize

6290066

increased by0.56%

Number of package files

130

increased by4.84%

Lines of code

21713

increased by0.97%

Number of lines in readme file

401

increased by0.25%

No dependency changes