Add support for muted property in Video Block for improved video sound control (#6512)

* Add support for muted property in Video Block for improved video sound control

* fix: minor formatting issue

Author: ankitkoo7

packages/core/src/dom_components/model/ComponentVideo.ts

@@ -26,7 +26,7 @@ export default class ComponentVideo extends ComponentImage {
       viUrl: 'https://player.vimeo.com/video/',
       loop: false,
       poster: '',
-      muted: 0,
+      muted: false,
       autoplay: false,
       controls: true,
       color: '',
@@ -50,12 +50,13 @@ export default class ComponentVideo extends ComponentImage {
 
   updatePropsFromAttr() {
     if (this.get('provider') === defProvider) {
-      const { controls, autoplay, loop } = this.get('attributes')!;
+      const { controls, autoplay, loop, muted } = this.get('attributes')!;
       const toUp: ObjectAny = {};
 
       if (isDef(controls)) toUp.controls = !!controls;
       if (isDef(autoplay)) toUp.autoplay = !!autoplay;
       if (isDef(loop)) toUp.loop = !!loop;
+      if (isDef(muted)) toUp.muted = !!muted; // Update for muted
 
       if (!isEmptyObj(toUp)) {
         this.set(toUp);
@@ -111,6 +112,7 @@ export default class ComponentVideo extends ComponentImage {
         hasParam(qr.color) && this.set('color', qr.color);
         qr.rel === '0' && this.set('rel', 0);
         qr.modestbranding === '1' && this.set('modestbranding', 1);
+        qr.muted === '1' && this.set('muted', true);
         break;
       default:
     }
@@ -157,6 +159,7 @@ export default class ComponentVideo extends ComponentImage {
         attr.loop = !!this.get('loop');
         attr.autoplay = !!this.get('autoplay');
         attr.controls = !!this.get('controls');
+        attr.muted = !!this.get('muted');
     }
 
     return attr;
@@ -206,6 +209,7 @@ export default class ComponentVideo extends ComponentImage {
       this.getAutoplayTrait(),
       this.getLoopTrait(),
       this.getControlsTrait(),
+      this.getMutedTrait(),
     ];
   }
   /**
@@ -237,6 +241,7 @@ export default class ComponentVideo extends ComponentImage {
         name: 'modestbranding',
         changeProp: true,
       },
+      this.getMutedTrait(),
     ];
   }
 
@@ -262,6 +267,7 @@ export default class ComponentVideo extends ComponentImage {
       },
       this.getAutoplayTrait(),
       this.getLoopTrait(),
+      this.getMutedTrait(),
     ];
   }
 
@@ -307,6 +313,20 @@ export default class ComponentVideo extends ComponentImage {
     };
   }
 
+  /**
+   * Return object trait
+   * @return {Object}
+   * @private
+   */
+  getMutedTrait() {
+    return {
+      type: 'checkbox',
+      label: 'Muted',
+      name: 'muted',
+      changeProp: true,
+    };
+  }
+
   /**
    * Returns url to youtube video
    * @return {string}
@@ -318,10 +338,9 @@ export default class ComponentVideo extends ComponentImage {
     const list = this.get('list');
     url += id + (id.indexOf('?') < 0 ? '?' : '');
     url += list ? `&list=${list}` : '';
-    url += this.get('autoplay') ? '&autoplay=1&mute=1' : '';
+    url += this.get('autoplay') ? '&autoplay=1' : '';
+    url += this.get('muted') ? '&mute=1' : '';
     url += !this.get('controls') ? '&controls=0&showinfo=0' : '';
-    // Loop works only with playlist enabled
-    // https://stackoverflow.com/questions/25779966/youtube-iframe-loop-doesnt-work
     url += this.get('loop') ? `&loop=1&playlist=${id}` : '';
     url += this.get('rel') ? '' : '&rel=0';
     url += this.get('modestbranding') ? '&modestbranding=1' : '';
@@ -347,7 +366,8 @@ export default class ComponentVideo extends ComponentImage {
   getVimeoSrc() {
     let url = this.get('viUrl') as string;
     url += this.get('videoId') + '?';
-    url += this.get('autoplay') ? '&autoplay=1&muted=1' : '';
+    url += this.get('autoplay') ? '&autoplay=1' : '';
+    url += this.get('muted') ? '&muted=1' : '';
     url += this.get('loop') ? '&loop=1' : '';
     url += !this.get('controls') ? '&title=0&portrait=0&badge=0' : '';
     url += this.get('color') ? '&color=' + this.get('color') : '';

packages/core/src/dom_components/view/ComponentVideoView.ts

@@ -18,7 +18,7 @@ export default class ComponentVideoView extends ComponentImageView<ComponentVide
     // @ts-ignore
     ComponentView.prototype.initialize.apply(this, arguments);
     const { model } = this;
-    const props = ['loop', 'autoplay', 'controls', 'color', 'rel', 'modestbranding', 'poster'];
+    const props = ['loop', 'autoplay', 'controls', 'color', 'rel', 'modestbranding', 'poster', 'muted'];
     const events = props.map((p) => `change:${p}`).join(' ');
     this.listenTo(model, 'change:provider', this.updateProvider);
     this.listenTo(model, 'change:src', this.updateSrc);
@@ -80,6 +80,7 @@ export default class ComponentVideoView extends ComponentImageView<ComponentVide
           el.autoplay = model.get('autoplay');
           el.controls = model.get('controls');
           el.poster = model.get('poster');
+          el.muted = model.get('muted');
         }
       }
     }