@crispcode/shimmer 5.0.3 → 5.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -26,6 +26,7 @@ In order to support older versions of browsers, you can use [polyfill.io](https:
26
26
  | Element | `import { Element } from 'shimmer'` | The base class for all Shimmer objects |
27
27
  | Shimmer | `import { Shimmer } from 'shimmer'` | The Shimmer component class, check Modux/Component for more information |
28
28
  | Tween | `import { Tween } from 'shimmer'` | A class used to create animation tweens in Element or Shimmer |
29
+ | Video | `import { Video } from 'shimmer'` | A Video class which extends the Element class |
29
30
  | Sprite | `import { Sprite } from 'shimmer'` | PIXI.JS Sprite class |
30
31
  | AnimatedSprite | `import { AnimatedSprite } from 'shimmer'` | PIXI.JS AnimatedSprite class |
31
32
  | Text | `import { Text } from 'shimmer'` | PIXI.JS Text class |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crispcode/shimmer",
3
- "version": "5.0.3",
3
+ "version": "5.1.1",
4
4
  "description": "A PIXI.JS wrapper plugin for MODUX",
5
5
  "author": "Crisp Code ( contact@crispcode.ro )",
6
6
  "access": "public",
@@ -49,7 +49,7 @@
49
49
  "@pixi/utils": "^6.5.1"
50
50
  },
51
51
  "peerDependencies": {
52
- "@crispcode/modux": "^5.1.1"
52
+ "@crispcode/modux": "^5.1.5"
53
53
  },
54
54
  "devDependencies": {
55
55
  "esdoc": "^1.1.0",
package/scripts/index.js CHANGED
@@ -5,6 +5,7 @@ import { Shimmer } from './shimmer.js'
5
5
  import { Button } from './button.js'
6
6
  import { Element } from './element.js'
7
7
  import { Tween } from './tween.js'
8
+ import { Video } from './video.js'
8
9
 
9
10
  import { Sprite } from '@pixi/sprite'
10
11
  import { AnimatedSprite } from '@pixi/sprite-animated'
@@ -18,6 +19,7 @@ export {
18
19
  Button,
19
20
  Element,
20
21
  Tween,
22
+ Video,
21
23
 
22
24
  Sprite,
23
25
  AnimatedSprite,
@@ -2,7 +2,7 @@
2
2
 
3
3
  'use strict'
4
4
 
5
- import { Component, extend, loop, logger } from '@crispcode/modux'
5
+ import { Component, extend, logger } from '@crispcode/modux'
6
6
 
7
7
  import { autoDetectRenderer, BatchRenderer } from '@pixi/core'
8
8
  import { Assets } from '@pixi/assets'
@@ -0,0 +1,79 @@
1
+ /* globals document */
2
+
3
+ 'use strict'
4
+
5
+ import { VideoResource, Texture } from '@pixi/core'
6
+ import { Sprite } from '@pixi/sprite'
7
+
8
+ import { Element } from './element.js'
9
+
10
+ /**
11
+ * This class is used to create video elements for shimmer
12
+ * @param {Video|String} video The source Video element or url
13
+ * @param {Object} options The options for the video
14
+ */
15
+ export class Video extends Element {
16
+ /**
17
+ * Creates an instance of Video
18
+ */
19
+ constructor ( source, options = {} ) {
20
+ super()
21
+
22
+ if ( typeof source === Video ) {
23
+ this.__source = document.createElement( 'video' )
24
+ this.__source.playsInline = true
25
+ this.__source.preload = 'auto'
26
+ this.__source.autoplay = false
27
+ this.__source.muted = ( options.muted !== undefined ) ? options.muted : false
28
+ this.__source.loop = ( options.loop !== undefined ) ? options.loop : true
29
+ this.__source.src = source
30
+ } else {
31
+ this.__source = source
32
+ }
33
+
34
+ this.__resource = new VideoResource( this.__source, {
35
+ autoPlay: ( options.autoPlay !== undefined ) ? options.autoPlay : false,
36
+ autoLoad: ( options.autoLoad !== undefined ) ? options.autoLoad : true,
37
+ updateFPS: ( options.updateFPS !== undefined ) ? options.updateFPS : 0,
38
+ crossorigin: ( options.crossorigin !== undefined ) ? options.crossorigin : true
39
+ } )
40
+
41
+ let texture = Texture.from( this.__resource )
42
+ let sprite = new Sprite( texture )
43
+
44
+ this.addChild( sprite )
45
+ }
46
+
47
+ /**
48
+ * Loads the video file
49
+ */
50
+ load () {
51
+ return this.__resource.load()
52
+ }
53
+
54
+ /**
55
+ * Plays the video at a specific rate, or default if nothing is specified
56
+ * @param {Number} playbackRate
57
+ */
58
+ play ( playbackRate ) {
59
+ if ( playbackRate ) {
60
+ this.__source.playbackRate = playbackRate
61
+ }
62
+ this.__source.play()
63
+ }
64
+
65
+ /**
66
+ * Pause the video
67
+ */
68
+ pause () {
69
+ this.__source.pause()
70
+ }
71
+
72
+ /**
73
+ * Mutes or unmutes the video
74
+ * @param {boolean} muted
75
+ */
76
+ muted ( muted ) {
77
+ this.__source.muted = !!muted
78
+ }
79
+ }
Binary file
@@ -2,7 +2,7 @@
2
2
 
3
3
  import { approx, rnd, loop } from '@crispcode/modux'
4
4
 
5
- import { Shimmer } from './../../../../scripts'
5
+ import { Shimmer, Video } from './../../../../scripts'
6
6
 
7
7
  import { ButtonMain } from './buttonMain.js'
8
8
  import { Moon } from './moon.js'
@@ -37,6 +37,9 @@ export class ShimmerComponent extends Shimmer {
37
37
  'image2': '/image2.png'
38
38
  } )
39
39
  .then( ( resources ) => {
40
+ this.__background = new Video( '/movie.mp4', { loop: false, autoPlay: true, muted: true } )
41
+ this.stage.addElementChild( 'background', this.__background )
42
+
40
43
  this.__button = new ButtonMain( resources[ 'image1' ] )
41
44
  this.stage.addElementChild( 'button', this.__button )
42
45