@crispcode/shimmer 5.0.2 → 5.1.0

package/README.md

@@ -26,6 +26,7 @@ In order to support older versions of browsers, you can use [polyfill.io](https:
   | Element | `import { Element } from 'shimmer'` | The base class for all Shimmer objects |
   | Shimmer | `import { Shimmer } from 'shimmer'` | The Shimmer component class, check Modux/Component for more information |
   | Tween | `import { Tween } from 'shimmer'` | A class used to create animation tweens in Element or Shimmer |
+  | Video | `import { Video } from 'shimmer'` | A Video class which extends the Element class |
   | Sprite | `import { Sprite } from 'shimmer'` | PIXI.JS Sprite class |
   | AnimatedSprite | `import { AnimatedSprite } from 'shimmer'` | PIXI.JS AnimatedSprite class |
   | Text | `import { Text } from 'shimmer'` | PIXI.JS Text class |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crispcode/shimmer",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "A PIXI.JS wrapper plugin for MODUX",
   "author": "Crisp Code ( contact@crispcode.ro )",
   "access": "public",
@@ -17,39 +17,39 @@
     "url": "https://github.com/CrispCode/shimmer/issues"
   },
   "dependencies": {
-    "@pixi/canvas-display": "^6.4.0",
-    "@pixi/canvas-extract": "^6.4.0",
-    "@pixi/canvas-graphics": "^6.4.0",
-    "@pixi/canvas-mesh": "^6.4.0",
-    "@pixi/canvas-particle-container": "^6.4.0",
-    "@pixi/canvas-prepare": "^6.4.0",
-    "@pixi/canvas-renderer": "^6.4.0",
-    "@pixi/canvas-sprite": "^6.4.0",
-    "@pixi/canvas-sprite-tiling": "^6.4.0",
-    "@pixi/canvas-text": "^6.4.0",
-    "@pixi/constants": "^6.4.0",
-    "@pixi/core": "^6.4.0",
-    "@pixi/display": "^6.4.0",
-    "@pixi/graphics": "^6.4.0",
-    "@pixi/interaction": "^6.4.0",
-    "@pixi/loaders": "^6.4.0",
-    "@pixi/math": "^6.4.0",
-    "@pixi/mesh": "^6.4.0",
-    "@pixi/mesh-extras": "^6.4.0",
-    "@pixi/particle-container": "^6.4.0",
-    "@pixi/prepare": "^6.4.0",
-    "@pixi/runner": "^6.4.0",
-    "@pixi/settings": "^6.4.0",
-    "@pixi/sprite": "^6.4.0",
-    "@pixi/sprite-animated": "^6.4.0",
-    "@pixi/sprite-tiling": "^6.4.0",
-    "@pixi/text": "^6.4.0",
-    "@pixi/ticker": "^6.4.0",
-    "@pixi/utils": "^6.4.0",
-    "acorn": "^8.7.1"
+    "@pixi/assets": "^6.5.1",
+    "@pixi/canvas-display": "^6.5.1",
+    "@pixi/canvas-extract": "^6.5.1",
+    "@pixi/canvas-graphics": "^6.5.1",
+    "@pixi/canvas-mesh": "^6.5.1",
+    "@pixi/canvas-particle-container": "^6.5.1",
+    "@pixi/canvas-prepare": "^6.5.1",
+    "@pixi/canvas-renderer": "^6.5.1",
+    "@pixi/canvas-sprite": "^6.5.1",
+    "@pixi/canvas-sprite-tiling": "^6.5.1",
+    "@pixi/canvas-text": "^6.5.1",
+    "@pixi/constants": "^6.5.1",
+    "@pixi/core": "^6.5.1",
+    "@pixi/display": "^6.5.1",
+    "@pixi/extensions": "^6.5.1",
+    "@pixi/graphics": "^6.5.1",
+    "@pixi/interaction": "^6.5.1",
+    "@pixi/math": "^6.5.1",
+    "@pixi/mesh": "^6.5.1",
+    "@pixi/mesh-extras": "^6.5.1",
+    "@pixi/particle-container": "^6.5.1",
+    "@pixi/prepare": "^6.5.1",
+    "@pixi/runner": "^6.5.1",
+    "@pixi/settings": "^6.5.1",
+    "@pixi/sprite": "^6.5.1",
+    "@pixi/sprite-animated": "^6.5.1",
+    "@pixi/sprite-tiling": "^6.5.1",
+    "@pixi/text": "^6.5.1",
+    "@pixi/ticker": "^6.5.1",
+    "@pixi/utils": "^6.5.1"
   },
   "peerDependencies": {
-    "@crispcode/modux": "CrispCode/modux#v5.1.1"
+    "@crispcode/modux": "^5.1.5"
   },
   "devDependencies": {
     "esdoc": "^1.1.0",

package/scripts/index.js

@@ -5,6 +5,7 @@ import { Shimmer } from './shimmer.js'
 import { Button } from './button.js'
 import { Element } from './element.js'
 import { Tween } from './tween.js'
+import { Video } from './video.js'
 
 import { Sprite } from '@pixi/sprite'
 import { AnimatedSprite } from '@pixi/sprite-animated'
@@ -18,6 +19,7 @@ export {
   Button,
   Element,
   Tween,
+  Video,
 
   Sprite,
   AnimatedSprite,

package/scripts/shimmer.js

@@ -2,13 +2,14 @@
 
 'use strict'
 
-import { Component, extend, loop, logger } from '@crispcode/modux'
+import { Component, extend, logger } from '@crispcode/modux'
 
-import { autoDetectRenderer, Renderer, BatchRenderer } from '@pixi/core'
-import { Loader } from '@pixi/loaders'
+import { autoDetectRenderer, BatchRenderer } from '@pixi/core'
+import { Assets } from '@pixi/assets'
 import { Ticker } from '@pixi/ticker'
 import { InteractionManager } from '@pixi/interaction'
 import { skipHello, isWebGLSupported } from '@pixi/utils'
+import { extensions } from '@pixi/extensions'
 
 // Canvas support
 import '@pixi/canvas-display'
@@ -25,15 +26,8 @@ import '@pixi/canvas-text'
 import { Element } from './element.js'
 import { Controls } from './controls.js'
 
-Renderer.registerPlugin( 'interaction', InteractionManager )
-Renderer.registerPlugin( 'batch', BatchRenderer )
-
-CanvasRenderer.registerPlugin( 'interaction', InteractionManager )
-CanvasRenderer.registerPlugin( 'extract', CanvasExtract )
-CanvasRenderer.registerPlugin( 'graphics', CanvasGraphicsRenderer )
-CanvasRenderer.registerPlugin( 'mesh', CanvasMeshRenderer )
-CanvasRenderer.registerPlugin( 'prepare', CanvasPrepare )
-CanvasRenderer.registerPlugin( 'sprite', CanvasSpriteRenderer )
+extensions.add( InteractionManager )
+extensions.add( BatchRenderer )
 
 /**
  * This class is used to create the shimmer component
@@ -66,19 +60,12 @@ export class Shimmer extends Component {
 
   /**
    * This method preloads a colection of assets
-   * @param {Object} assets A collection of assets
+   * @param {Object} bundle A collection of assets
    * @return {Promise} A promise which is resolved upon loading the assets. It resolves the loaded resources.
    */
-  preload ( assets ) {
-    let loader = new Loader()
-    return new Promise( ( resolve ) => {
-      loop( assets, ( data, name ) => {
-        loader.add( name, data )
-      } )
-      loader.load( ( loader, resources ) => {
-        resolve( resources )
-      } )
-    } )
+  preload ( bundle ) {
+    Assets.addBundle( 'bundle', bundle )
+    return Assets.loadBundle( 'bundle' )
   }
 
   /**
@@ -163,7 +150,17 @@ export class Shimmer extends Component {
      * Stores the renderer
      * @type {Renderer}
      */
-    this.renderer = ( isWebGLSupported() && !this.settings.forceCanvas ) ? autoDetectRenderer( rendererSettings ) : new CanvasRenderer( rendererSettings )
+    this.renderer = null
+    if ( isWebGLSupported() && !this.settings.forceCanvas ) {
+      this.renderer = autoDetectRenderer( rendererSettings )
+    } else {
+      extensions.add( CanvasExtract )
+      extensions.add( CanvasGraphicsRenderer )
+      extensions.add( CanvasMeshRenderer )
+      extensions.add( CanvasPrepare )
+      extensions.add( CanvasSpriteRenderer )
+      this.renderer = new CanvasRenderer( rendererSettings )
+    }
 
     this.renderer.resize( this.element.clientWidth, this.element.clientHeight )
 

package/scripts/video.js

@@ -0,0 +1,75 @@
+/* globals document */
+
+'use strict'
+
+import { VideoResource, Texture } from '@pixi/core'
+import { Sprite } from '@pixi/sprite'
+
+import { Element } from './element.js'
+
+/**
+ * This class is used to create video elements for shimmer
+ */
+export class Video extends Element {
+  /**
+   * Creates an instance of Video
+   */
+  constructor ( source, options = {} ) {
+    super()
+
+    this.__source = document.createElement( 'video' )
+    this.__source.playsInline = true
+    this.__source.preload = 'auto'
+    this.__source.autoplay = false
+    this.__source.playbackRate = ( options.playbackRate !== undefined ) ? options.playbackRate : 1
+    this.__source.muted = ( options.muted !== undefined ) ? options.muted : false
+
+    this.__source.loop = ( options.loop !== undefined ) ? options.loop : true
+    this.__source.src = source
+
+    this.__resource = new VideoResource( this.__source, {
+      autoPlay: ( options.autoPlay !== undefined ) ? options.autoPlay : false,
+      autoLoad: ( options.autoLoad !== undefined ) ? options.autoLoad : true,
+      updateFPS: ( options.updateFPS !== undefined ) ? options.updateFPS : 0,
+      crossorigin: ( options.crossorigin !== undefined ) ? options.crossorigin : true
+    } )
+
+    let texture = Texture.from( this.__resource )
+    let sprite = new Sprite( texture )
+
+    this.addChild( sprite )
+  }
+
+  /**
+   * Loads the video file
+   */
+  load () {
+    return this.__resource.load()
+  }
+
+  /**
+   * Plays the video at a specific rate, or default if nothing is specified
+   * @param {Number} playbackRate
+   */
+  play ( playbackRate ) {
+    if ( playbackRate ) {
+      this.__source.playbackRate = playbackRate
+    }
+    this.__source.play()
+  }
+
+  /**
+   * Pause the video
+   */
+  pause () {
+    this.__source.pause()
+  }
+
+  /**
+   * Mutes or unmutes the video
+   * @param {boolean} muted
+   */
+  muted ( muted ) {
+    this.__source.muted = !!muted
+  }
+}

package/test/app.js

@@ -1,4 +1,3 @@
 'use strict'
 
-require( './styles/index.scss' )
 require( './scripts/index.js' )

package/test/scripts/components/layout/index.js

@@ -1,9 +1,10 @@
 'use strict'
 
 import { Component } from '@crispcode/modux'
+import template from './template.html'
 
 export class LayoutComponent extends Component {
   get template () {
-    return require( './template.html' )
+    return template
   }
 }

package/test/scripts/components/shimmer/index.js

@@ -2,7 +2,7 @@
 
 import { approx, rnd, loop } from '@crispcode/modux'
 
-import { Shimmer } from './../../../../scripts'
+import { Shimmer, Video } from './../../../../scripts'
 
 import { ButtonMain } from './buttonMain.js'
 import { Moon } from './moon.js'
@@ -37,13 +37,16 @@ export class ShimmerComponent extends Shimmer {
       'image2': '/image2.png'
     } )
       .then( ( resources ) => {
-        this.__button = new ButtonMain( resources[ 'image1' ].texture )
+        this.__background = new Video( '/movie.mp4', { loop: false, autoPlay: true, muted: true } )
+        this.stage.addElementChild( 'background', this.__background )
+
+        this.__button = new ButtonMain( resources[ 'image1' ] )
         this.stage.addElementChild( 'button', this.__button )
 
         this.__moons = {}
 
         for ( let i = 0; i < 20; i++ ) {
-          let moon = new Moon( resources[ 'image2' ].texture )
+          let moon = new Moon( resources[ 'image2' ] )
           moon.setAngle( rnd( 0, 359 ) )
           moon.setRadius( rnd( 200, 500 ) )
           moon.setSpeed( rnd( 10, 50 ) / 10 )

package/test/scripts/index.js

@@ -7,6 +7,8 @@ import { Module, logger } from '@crispcode/modux'
 import { LayoutComponent } from './components/layout'
 import { ShimmerComponent } from './components/shimmer'
 
+import './../styles/index.scss'
+
 let initialize = () => {
   // Create application
   let app = new Module( 'app' )