add group states

src/lib/controls.js

@@ -73,6 +73,12 @@ export class VideoBackgroundGroup {
     this.videoBackgroundFactoryInstance = videoBackgroundFactoryInstance;
     this.stack = [];
     this.map = new Map();
+    this.current = 0;
+    this.currentElement = null;
+    this.currentInstance = null;
+
+    this.playing = false;
+    this.muted = true;
 
     for (let i = 0; i < this.elements.length; i++) {
       const element = this.elements[i];
@@ -104,7 +110,12 @@ export class VideoBackgroundGroup {
     if (this.stack[this.current] !== event.detail.element) return;
     this.setVideoBackgroundFactoryInstance(event);
     const videoBackground = event.detail;
-    if (videoBackground.currentState !== 'playing' && videoBackground.isIntersecting) videoBackground.softPlay();
+    if (videoBackground.params.muted) this.muted = true;
+    if (!videoBackground.isIntersecting) return;
+    if (!videoBackground.params.autoplay) return;
+    this.playing = true;
+    if (videoBackground.currentState === 'playing') return;
+    videoBackground.softPlay();
   }
 
   onVideoPause(event) {;
@@ -202,6 +213,7 @@ export class VideoBackgroundGroup {
       instance.unmute();
     }
 
+    this.muted = false;
     this.dispatchEvent('video-background-group-umnute');
   }
 
@@ -212,16 +224,19 @@ export class VideoBackgroundGroup {
       instance.mute();
     }
 
+    this.muted = true;
     this.dispatchEvent('video-background-group-mute');
   }
 
   pause() {
     this.currentInstance.pause();
+    this.playing = false;
     this.dispatchEvent('video-background-group-previous');
   }
 
   play() {
     this.currentInstance.play();
+    this.playing = true;
     this.dispatchEvent('video-background-group-previous');
   }