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

allow to change video via set_src (and set_src_type)

Browse Source
This commit is contained in:
Ralf Becker 2021-05-15 20:26:28 +02:00
parent a6d7fe9df5
commit e30ff2caa2
2 changed files with 70 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -70,14 +70,23 @@ var et2_video = /** @class */ (function (_super) {
* @private * @private
*/ */
_this._previousTime = 0; _this._previousTime = 0;
_this.set_src_type(_this.options.src_type);
return _this;
}
et2_video.prototype.set_src_type = function (_type) {
this.options.src_type = _type;
if (this.video && this._isYoutube() === (this.video[0].tagName === 'DIV')) {
return;
}
//Create Video tag //Create Video tag
_this.video = jQuery(document.createElement(_this._isYoutube() ? "div" : "video")).addClass('et2_video'); this.video = jQuery(document.createElement(this._isYoutube() ? "div" : "video"))
if (_this._isYoutube()) { .addClass('et2_video')
.attr('id', this.dom_id);
if (this._isYoutube()) {
// this div will be replaced by youtube iframe api when youtube gets ready // this div will be replaced by youtube iframe api when youtube gets ready
_this.youtubeFrame = jQuery(document.createElement('div')) this.youtubeFrame = jQuery(document.createElement('div'))
.appendTo(_this.video) .appendTo(this.video)
.attr('id', et2_video.youtubePrefixId + _this.id); .attr('id', et2_video.youtubePrefixId + this.id);
_this.video.attr('id', _this.id);
if (!document.getElementById('youtube-api-script')) { if (!document.getElementById('youtube-api-script')) {
//Load youtube iframe api //Load youtube iframe api
var tag = document.createElement('script'); var tag = document.createElement('script');
@ -87,24 +96,25 @@ var et2_video = /** @class */ (function (_super) {
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
} }
} }
if (!_this._isYoutube() && _this.options.controls) { if (!this._isYoutube() && this.options.controls) {
_this.video.attr("controls", 1); this.video.attr("controls", 1);
} }
if (!_this._isYoutube() && _this.options.autoplay) { if (!this._isYoutube() && this.options.autoplay) {
_this.video.attr("autoplay", 1); this.video.attr("autoplay", 1);
} }
if (_this.options.muted) { if (this.options.muted) {
_this.video.attr("muted", 1); this.video.attr("muted", 1);
} }
if (_this.options.video_src) { if (this.options.video_src) {
_this.set_src(_this.options.video_src); this.set_src(this.options.video_src);
} }
if (_this.options.loop) { if (this.options.loop) {
_this.video.attr("loop", 1); this.video.attr("loop", 1);
}
_this.setDOMNode(_this.video[0]);
return _this;
} }
this.setDOMNode(this.video[0]);
this.set_width(this.options.width || 'auto');
this.set_height(this.options.height || 'auto');
};
/** /**
* Set video src * Set video src
* *
@ -112,23 +122,25 @@ var et2_video = /** @class */ (function (_super) {
*/ */
et2_video.prototype.set_src = function (_value) { et2_video.prototype.set_src = function (_value) {
var self = this; var self = this;
this.options.video_src = _value;
if (_value && !this._isYoutube()) { if (_value && !this._isYoutube()) {
var source = jQuery(document.createElement('source')) this.video.attr('src', _value);
.attr('src', _value)
.appendTo(this.video);
if (this.options.src_type) { if (this.options.src_type) {
source.attr('type', this.options.src_type); this.video.attr('type', this.options.src_type);
} }
} }
else if (_value) { else if (_value) {
if (typeof YT == 'undefined') { if (typeof YT == 'undefined') {
//initiate youtube Api object, it gets called automatically by iframe_api script from the api //initiate youtube Api object, it gets called automatically by iframe_api script from the api
window.onYouTubeIframeAPIReady = this._onYoutubeIframeAPIReady; window.onYouTubeIframeAPIReady = this._onYoutubeIframeAPIReady;
}
window.addEventListener('et2_video.onYoutubeIframeAPIReady', function () { window.addEventListener('et2_video.onYoutubeIframeAPIReady', function () {
self._createYoutubePlayer(self.options.video_src); self._createYoutubePlayer(self.options.video_src);
}); });
} }
else {
self._createYoutubePlayer(self.options.video_src);
}
}
}; };
/** /**
* Set autoplay option for video * Set autoplay option for video
@ -373,7 +385,8 @@ var et2_video = /** @class */ (function (_super) {
* @param _value * @param _value
*/ */
et2_video.prototype._createYoutubePlayer = function (_value) { et2_video.prototype._createYoutubePlayer = function (_value) {
if (typeof YT != 'undefined') { var matches = _value === null || _value === void 0 ? void 0 : _value.match(et2_video.youtubeRegexp);
if (matches && typeof YT != 'undefined') {
this.youtube = new YT.Player(et2_video.youtubePrefixId + this.id, { this.youtube = new YT.Player(et2_video.youtubePrefixId + this.id, {
height: this.options.height || '400', height: this.options.height || '400',
width: '100%', width: '100%',
@ -387,7 +400,7 @@ var et2_video = /** @class */ (function (_super) {
'iv_load_policy': 0, 'iv_load_policy': 0,
'cc_load_policy': 0 'cc_load_policy': 0
}, },
videoId: _value.match(et2_video.youtubeRegexp)[4], videoId: matches[4],
events: { events: {
'onReady': jQuery.proxy(this._onReady, this), 'onReady': jQuery.proxy(this._onReady, this),
'onStateChange': jQuery.proxy(this._onStateChangeYoutube, this) 'onStateChange': jQuery.proxy(this._onStateChangeYoutube, this)

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

@ -143,8 +143,20 @@ export class et2_video extends et2_baseWidget implements et2_IDOMNode
{ {
super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_video._attributes, _child || {})); super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_video._attributes, _child || {}));
this.set_src_type(this.options.src_type);
}
set_src_type(_type)
{
this.options.src_type = _type;
if (this.video && this._isYoutube() === (this.video[0].tagName === 'DIV'))
{
return;
}
//Create Video tag //Create Video tag
this.video = jQuery(document.createElement(this._isYoutube()?"div":"video")).addClass('et2_video'); this.video = jQuery(document.createElement(this._isYoutube()?"div":"video"))
.addClass('et2_video')
.attr('id', this.dom_id);
if (this._isYoutube()) if (this._isYoutube())
{ {
@ -153,7 +165,6 @@ export class et2_video extends et2_baseWidget implements et2_IDOMNode
.appendTo(this.video) .appendTo(this.video)
.attr('id', et2_video.youtubePrefixId+this.id); .attr('id', et2_video.youtubePrefixId+this.id);
this.video.attr('id', this.id);
if (!document.getElementById('youtube-api-script')) if (!document.getElementById('youtube-api-script'))
{ {
//Load youtube iframe api //Load youtube iframe api
@ -186,6 +197,9 @@ export class et2_video extends et2_baseWidget implements et2_IDOMNode
this.video.attr("loop", 1); this.video.attr("loop", 1);
} }
this.setDOMNode(this.video[0]); this.setDOMNode(this.video[0]);
this.set_width(this.options.width || 'auto');
this.set_height(this.options.height || 'auto');
} }
/** /**
@ -195,15 +209,14 @@ export class et2_video extends et2_baseWidget implements et2_IDOMNode
*/ */
set_src(_value: string) { set_src(_value: string) {
let self = this; let self = this;
this.options.video_src = _value;
if (_value && !this._isYoutube()) if (_value && !this._isYoutube())
{ {
let source = jQuery(document.createElement('source')) this.video.attr('src',_value);
.attr('src',_value)
.appendTo(this.video);
if (this.options.src_type) if (this.options.src_type)
{ {
source.attr('type', this.options.src_type); this.video.attr('type', this.options.src_type);
} }
} }
else if(_value) else if(_value)
@ -212,11 +225,16 @@ export class et2_video extends et2_baseWidget implements et2_IDOMNode
{ {
//initiate youtube Api object, it gets called automatically by iframe_api script from the api //initiate youtube Api object, it gets called automatically by iframe_api script from the api
window.onYouTubeIframeAPIReady = this._onYoutubeIframeAPIReady; window.onYouTubeIframeAPIReady = this._onYoutubeIframeAPIReady;
}
window.addEventListener('et2_video.onYoutubeIframeAPIReady', function(){ window.addEventListener('et2_video.onYoutubeIframeAPIReady', function(){
self._createYoutubePlayer(self.options.video_src); self._createYoutubePlayer(self.options.video_src);
}); });
} }
else
{
self._createYoutubePlayer(self.options.video_src);
}
}
} }
/** /**
@ -521,7 +539,8 @@ export class et2_video extends et2_baseWidget implements et2_IDOMNode
*/ */
private _createYoutubePlayer(_value:string) private _createYoutubePlayer(_value:string)
{ {
if (typeof YT != 'undefined') const matches = _value?.match(et2_video.youtubeRegexp);
if (matches && typeof YT != 'undefined')
{ {
this.youtube = new YT.Player( et2_video.youtubePrefixId+this.id, { this.youtube = new YT.Player( et2_video.youtubePrefixId+this.id, {
height: this.options.height || '400', height: this.options.height || '400',
@ -536,7 +555,7 @@ export class et2_video extends et2_baseWidget implements et2_IDOMNode
'iv_load_policy': 0, 'iv_load_policy': 0,
'cc_load_policy': 0 'cc_load_policy': 0
}, },
videoId: _value.match(et2_video.youtubeRegexp)[4], videoId: matches[4],
events: { events: {
'onReady': jQuery.proxy(this._onReady, this), 'onReady': jQuery.proxy(this._onReady, this),
'onStateChange': jQuery.proxy(this._onStateChangeYoutube, this) 'onStateChange': jQuery.proxy(this._onStateChangeYoutube, this)