@crispcode/shimmer 5.0.3 → 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.3",
+  "version": "5.1.0",
   "description": "A PIXI.JS wrapper plugin for MODUX",
   "author": "Crisp Code ( contact@crispcode.ro )",
   "access": "public",
@@ -49,7 +49,7 @@
     "@pixi/utils": "^6.5.1"
   },
   "peerDependencies": {
-    "@crispcode/modux": "^5.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,7 +2,7 @@
 
 'use strict'
 
-import { Component, extend, loop, logger } from '@crispcode/modux'
+import { Component, extend, logger } from '@crispcode/modux'
 
 import { autoDetectRenderer, BatchRenderer } from '@pixi/core'
 import { Assets } from '@pixi/assets'

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/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,6 +37,9 @@ export class ShimmerComponent extends Shimmer {
       'image2': '/image2.png'
     } )
       .then( ( resources ) => {
+        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 )