Fix youtube API loading player after initiation

api/js/etemplate/et2_widget_video.js

@@ -77,11 +77,14 @@ var et2_video = /** @class */ (function (_super) {
                 .appendTo(_this.video)
                 .attr('id', et2_video.youtubePrefixId + _this.id);
             _this.video.attr('id', _this.id);
-            //Load youtube iframe api
+            if (!document.getElementById('youtube-api-script')) {
-            var tag = document.createElement('script');
+                //Load youtube iframe api
-            tag.src = "https://www.youtube.com/iframe_api";
+                var tag = document.createElement('script');
-            var firstScriptTag = document.getElementsByTagName('script')[0];
+                tag.id = 'youtube-api-script';
-            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+                tag.src = "https://www.youtube.com/iframe_api";
+                var firstScriptTag = document.getElementsByTagName('script')[0];
+                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+            }
         }
         if (!_this._isYoutube() && _this.options.controls) {
             _this.video.attr("controls", 1);
@@ -117,30 +120,13 @@ var et2_video = /** @class */ (function (_super) {
             }
         }
         else if (_value) {
-            //initiate youtube Api object, it gets called automatically by iframe_api script from the api
+            if (typeof YT == 'undefined') {
-            // @ts-ignore
+                //initiate youtube Api object, it gets called automatically by iframe_api script from the api
-            window.onYouTubeIframeAPIReady = function () {
+                window.onYouTubeIframeAPIReady = this._onYoutubeIframeAPIReady;
-                // @ts-ignore
+            }
-                self.youtube = new YT.Player(et2_video.youtubePrefixId + self.id, {
+            window.addEventListener('et2_video.onYoutubeIframeAPIReady', function () {
-                    height: '400',
+                self._createYoutubePlayer(self.options.video_src);
-                    width: '100%',
+            });
-                    playerVars: {
-                        'autoplay': 0,
-                        'controls': 0,
-                        'modestbranding': 1,
-                        'fs': 0,
-                        'disablekb': 1,
-                        'rel': 0,
-                        'iv_load_policy': 0,
-                        'cc_load_policy': 0
-                    },
-                    videoId: _value.match(et2_video.youtubeRegexp)[4],
-                    events: {
-                        'onReady': jQuery.proxy(self._onReady, self),
-                        'onStateChange': jQuery.proxy(self._onStateChangeYoutube, self)
-                    }
-                });
-            };
         }
     };
     /**
@@ -310,6 +296,11 @@ var et2_video = /** @class */ (function (_super) {
                 self._onTimeUpdate();
             });
         }
+        else {
+            // need to create the player after the DOM is ready otherwise player won't show up
+            if (window.YT)
+                this._createYoutubePlayer(this.options.video_src);
+        }
         return false;
     };
     et2_video.prototype.videoLoadnigIsFinished = function () {
@@ -355,6 +346,42 @@ var et2_video = /** @class */ (function (_super) {
         }
         console.log(_data);
     };
+    /**
+     * youtube on IframeAPI ready event
+     */
+    et2_video.prototype._onYoutubeIframeAPIReady = function () {
+        var event = document.createEvent("Event");
+        event.initEvent('et2_video.onYoutubeIframeAPIReady', true, true);
+        window.dispatchEvent(event);
+    };
+    /**
+     * create youtube player
+     *
+     * @param _value
+     */
+    et2_video.prototype._createYoutubePlayer = function (_value) {
+        if (typeof YT != 'undefined') {
+            this.youtube = new YT.Player(et2_video.youtubePrefixId + this.id, {
+                height: this.options.height || '400',
+                width: '100%',
+                playerVars: {
+                    'autoplay': 0,
+                    'controls': 0,
+                    'modestbranding': 1,
+                    'fs': 0,
+                    'disablekb': 1,
+                    'rel': 0,
+                    'iv_load_policy': 0,
+                    'cc_load_policy': 0
+                },
+                videoId: _value.match(et2_video.youtubeRegexp)[4],
+                events: {
+                    'onReady': jQuery.proxy(this._onReady, this),
+                    'onStateChange': jQuery.proxy(this._onStateChangeYoutube, this)
+                }
+            });
+        }
+    };
     et2_video._attributes = {
         "video_src": {
             "name": "Video",

api/js/etemplate/et2_widget_video.ts

@@ -154,12 +154,15 @@ export class et2_video  extends et2_baseWidget implements et2_IDOMNode
                 .attr('id', et2_video.youtubePrefixId+this.id);
 
             this.video.attr('id', this.id);
-
+			if (!document.getElementById('youtube-api-script'))
-            //Load youtube iframe api
+			{
-            let tag = document.createElement('script');
+				//Load youtube iframe api
-            tag.src = "https://www.youtube.com/iframe_api";
+				let tag = document.createElement('script');
-            let firstScriptTag = document.getElementsByTagName('script')[0];
+				tag.id = 'youtube-api-script';
-            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+				tag.src = "https://www.youtube.com/iframe_api";
+				let firstScriptTag = document.getElementsByTagName('script')[0];
+				firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+			}
         }
 
         if (!this._isYoutube() && this.options.controls)
@@ -205,30 +208,14 @@ export class et2_video  extends et2_baseWidget implements et2_IDOMNode
         }
         else if(_value)
         {
-            //initiate youtube Api object, it gets called automatically by iframe_api script from the api
+			if (typeof YT == 'undefined')
-            // @ts-ignore
+			{
-            window.onYouTubeIframeAPIReady = function() {
+				//initiate youtube Api object, it gets called automatically by iframe_api script from the api
-                // @ts-ignore
+				window.onYouTubeIframeAPIReady = this._onYoutubeIframeAPIReady;
-                self.youtube = new YT.Player( et2_video.youtubePrefixId+self.id, {
+			}
-                    height: '400',
+			window.addEventListener('et2_video.onYoutubeIframeAPIReady', function(){
-                    width: '100%',
+				self._createYoutubePlayer(self.options.video_src);
-                    playerVars: {
+			});
-                        'autoplay': 0,
-                        'controls': 0,
-                        'modestbranding': 1,
-                        'fs':0,
-                        'disablekb': 1,
-                        'rel': 0,
-                        'iv_load_policy': 0,
-                        'cc_load_policy': 0
-                    },
-					videoId: _value.match(et2_video.youtubeRegexp)[4],
-                    events: {
-                        'onReady': jQuery.proxy(self._onReady, self),
-                        'onStateChange': jQuery.proxy(self._onStateChangeYoutube, self)
-                    }
-                });
-            }
         }
     }
 
@@ -443,6 +430,11 @@ export class et2_video  extends et2_baseWidget implements et2_IDOMNode
                 self._onTimeUpdate();
             });
         }
+		else
+		{
+			// need to create the player after the DOM is ready otherwise player won't show up
+			if (window.YT) this._createYoutubePlayer(this.options.video_src);
+		}
         return false;
     }
 
@@ -499,5 +491,46 @@ export class et2_video  extends et2_baseWidget implements et2_IDOMNode
         }
         console.log(_data)
     }
+
+	/**
+	 * youtube on IframeAPI ready event
+	 */
+	private _onYoutubeIframeAPIReady()
+	{
+		let event = document.createEvent("Event");
+        event.initEvent('et2_video.onYoutubeIframeAPIReady', true, true);
+        window.dispatchEvent(event);
+	}
+
+	/**
+	 * create youtube player
+	 *
+	 * @param _value
+	 */
+	private _createYoutubePlayer(_value:string)
+	{
+		if (typeof YT != 'undefined')
+		{
+			this.youtube = new YT.Player( et2_video.youtubePrefixId+this.id, {
+				height: this.options.height || '400',
+				width: '100%',
+				playerVars: {
+					'autoplay': 0,
+					'controls': 0,
+					'modestbranding': 1,
+					'fs':0,
+					'disablekb': 1,
+					'rel': 0,
+					'iv_load_policy': 0,
+					'cc_load_policy': 0
+				},
+				videoId: _value.match(et2_video.youtubeRegexp)[4],
+				events: {
+					'onReady': jQuery.proxy(this._onReady, this),
+					'onStateChange': jQuery.proxy(this._onStateChangeYoutube, this)
+				}
+			});
+		}
+	}
 }
 et2_register_widget(et2_video, ["video"]);

api/js/jsapi/egw_global.d.ts

@@ -791,7 +791,7 @@ declare interface IegwWndLocal extends IegwGlobal
 	 * @return Promise
 	 */
 	request(_menuaction: string, param2: any[]): Promise<any>;
-	
+
 	/**
 	 * Registers a new handler plugin.
 	 *
@@ -1295,3 +1295,7 @@ declare function egw_getWindowInnerWidth() : number;
 declare function egw_getWindowInnerHeight() : number;
 declare function egw_getWindowOuterWidth() : number;
 declare function egw_getWindowOuterHeight() : number;
+
+// Youtube API golbal vars
+declare var YT : any;
+declare function onYouTubeIframeAPIReady();