holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix youtube API loading player after initiation

Browse Source
This commit is contained in:
Hadi Nategh 2021-02-25 13:51:20 +01:00
parent 2d4b0b8259
commit 1f41bba904
3 changed files with 124 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
api/js/etemplate/et2_widget_video.js
View File

@ -77,12 +77,15 @@ var et2_video = /** @class */ (function (_super) {
.appendTo(_this.video)
.attr('id', et2_video.youtubePrefixId + _this.id);
_this.video.attr('id', _this.id);
if (!document.getElementById('youtube-api-script')) {
//Load youtube iframe api
var tag = document.createElement('script');
tag.id = 'youtube-api-script';
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) {
if (typeof YT == 'undefined') {
//initiate youtube Api object, it gets called automatically by iframe_api script from the api
// @ts-ignore
window.onYouTubeIframeAPIReady = function () {
// @ts-ignore
self.youtube = new YT.Player(et2_video.youtubePrefixId + self.id, {
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(self._onReady, self),
'onStateChange': jQuery.proxy(self._onStateChangeYoutube, self)
window.onYouTubeIframeAPIReady = this._onYoutubeIframeAPIReady;
}
window.addEventListener('et2_video.onYoutubeIframeAPIReady', function () {
self._createYoutubePlayer(self.options.video_src);
});
};
}
};
/**
@ -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",

77
api/js/etemplate/et2_widget_video.ts
View File

@ -154,13 +154,16 @@ 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');
tag.id = 'youtube-api-script';
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)
{
@ -204,33 +207,17 @@ export class et2_video extends et2_baseWidget implements et2_IDOMNode
}
}
else if(_value)
{
if (typeof YT == 'undefined')
{
//initiate youtube Api object, it gets called automatically by iframe_api script from the api
// @ts-ignore
window.onYouTubeIframeAPIReady = function() {
// @ts-ignore
self.youtube = new YT.Player( et2_video.youtubePrefixId+self.id, {
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(self._onReady, self),
'onStateChange': jQuery.proxy(self._onStateChangeYoutube, self)
window.onYouTubeIframeAPIReady = this._onYoutubeIframeAPIReady;
}
window.addEventListener('et2_video.onYoutubeIframeAPIReady', function(){
self._createYoutubePlayer(self.options.video_src);
});
}
}
}
/**
* Set autoplay option for video
@ -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"]);

4
api/js/jsapi/egw_global.d.ts vendored
View File

@ -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();