From 8e26062854e17e0a0a4b66e9cac3c7c3d433efc6 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Fri, 28 Jan 2022 15:51:33 +0100
Subject: [PATCH] Add multi_src option into video widget

---
 api/js/etemplate/CustomHtmlElements/multi-video.ts | 14 +++++++-------
 api/js/etemplate/et2_widget_video.ts               |  9 ++++++++-
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/api/js/etemplate/CustomHtmlElements/multi-video.ts b/api/js/etemplate/CustomHtmlElements/multi-video.ts
index cf5d4b03da..8c49546116 100644
--- a/api/js/etemplate/CustomHtmlElements/multi-video.ts
+++ b/api/js/etemplate/CustomHtmlElements/multi-video.ts
@@ -304,7 +304,7 @@ class multi_video extends HTMLElement {
 	 */
 	get paused()
 	{
-		return this.__getActiveVideo()[0].node.paused;
+		return this.__getActiveVideo()[0]?.node?.paused;
 	}
 
 	/**
@@ -323,7 +323,7 @@ class multi_video extends HTMLElement {
 	 */
 	get muted()
 	{
-		return this.__getActiveVideo()[0].node.muted;
+		return this.__getActiveVideo()[0]?.node?.muted;
 	}
 
 	/**
@@ -331,7 +331,7 @@ class multi_video extends HTMLElement {
 	 */
 	get ended()
 	{
-		return this._videos[this._videos.length-1].node.ended;
+		return this._videos[this._videos.length-1]?.node?.ended;
 	}
 
 	/**
@@ -350,7 +350,7 @@ class multi_video extends HTMLElement {
 	 */
 	get playbackRate()
 	{
-		return this.__getActiveVideo()[0].node.playbackRate;
+		return this.__getActiveVideo()[0]?.node?.playbackRate;
 	}
 
 	/**
@@ -368,7 +368,7 @@ class multi_video extends HTMLElement {
 	 */
 	get volume()
 	{
-		return this.__getActiveVideo()[0].node.volume;
+		return this.__getActiveVideo()[0]?.node?.volume;
 	}
 
 
@@ -380,7 +380,7 @@ class multi_video extends HTMLElement {
 	play()
 	{
 		this.__playing = true;
-		return this.__getActiveVideo()[0].node.play();
+		return this.__getActiveVideo()[0]?.node?.play();
 	}
 
 	/**
@@ -389,7 +389,7 @@ class multi_video extends HTMLElement {
 	pause()
 	{
 		this.__playing = false;
-		this.__getActiveVideo()[0].node.pause();
+		this.__getActiveVideo()[0]?.node?.pause();
 	}
 }
 
diff --git a/api/js/etemplate/et2_widget_video.ts b/api/js/etemplate/et2_widget_video.ts
index cde392eb4e..a284773733 100644
--- a/api/js/etemplate/et2_widget_video.ts
+++ b/api/js/etemplate/et2_widget_video.ts
@@ -19,6 +19,7 @@ import { et2_baseWidget } from './et2_core_baseWidget'
 import {ClassWithAttributes} from "./et2_core_inheritance";
 import {WidgetConfig, et2_register_widget} from "./et2_core_widget";
 import {et2_IDOMNode} from "./et2_core_interfaces";
+import  "./CustomHtmlElements/multi-video";
 
 /**
  * This widget represents the HTML5 video tag with all its optional attributes
@@ -61,6 +62,12 @@ export class et2_video  extends et2_baseWidget implements et2_IDOMNode
             "type": "string",
             "description": "Defines the type the stream source provided"
         },
+        "multi_src": {
+            "name": "Multi Video source",
+            "type": "boolean",
+            "default": false,
+            "description": "creates a multi-video tag in order to render all provided video sources"
+        },
         "muted": {
             "name": "Audio control",
             "type": "boolean",
@@ -167,7 +174,7 @@ export class et2_video  extends et2_baseWidget implements et2_IDOMNode
             return;
         }
         //Create Video tag
-		this.video = jQuery(document.createElement(this._isYoutube()?"div":"video"))
+		this.video = jQuery(document.createElement(this._isYoutube()?"div":(this.options.multi_src ? "multi-video" : "video")))
             .addClass('et2_video')
             .attr('id', this.dom_id);