diff --git a/api/js/etemplate/et2_widget_video.js b/api/js/etemplate/et2_widget_video.js
index 439051cbf1..e142496353 100644
--- a/api/js/etemplate/et2_widget_video.js
+++ b/api/js/etemplate/et2_widget_video.js
@@ -1,3 +1,4 @@
+"use strict";
/**
* EGroupware eTemplate2 - JS Description object
*
@@ -9,13 +10,28 @@
* @copyright Stylite AG
* @version $Id$
*/
-
+var __extends = (this && this.__extends) || (function () {
+ var extendStatics = function (d, b) {
+ extendStatics = Object.setPrototypeOf ||
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+ function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+ return extendStatics(d, b);
+ };
+ return function (d, b) {
+ extendStatics(d, b);
+ function __() { this.constructor = d; }
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+ };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
/*egw:uses
- /vendor/bower-asset/jquery/dist/jquery.js;
- et2_core_interfaces;
- et2_core_baseWidget;
+ /vendor/bower-asset/jquery/dist/jquery.js;
+ et2_core_interfaces;
+ et2_core_baseWidget;
*/
-
+var et2_core_baseWidget_1 = require("./et2_core_baseWidget");
+var et2_core_inheritance_1 = require("./et2_core_inheritance");
+var et2_core_DOMWidget_1 = require("./et2_core_DOMWidget");
/**
* This widget represents the HTML5 video tag with all its optional attributes
*
@@ -38,152 +54,124 @@
*
*
*/
-
/**
* Class which implements the "video" XET-Tag
*
* @augments et2_baseWidget
*/
-var et2_video = (function(){ "use strict"; return et2_baseWidget.extend(et2_IDOMNode,
-{
- attributes: {
- "video_src": {
- "name": "Video",
- "type": "string",
- "description": "Source of video to display"
- },
- "src_type": {
- "name": "Source type",
- "type": "string",
- "description": "Defines the type the stream source provided"
- },
- "muted": {
- "name": "Audio control",
- "type": "boolean",
- "default": false,
- "description": "Defines that the audio output of the video should be muted"
- },
- "autoplay": {
- "name": "Autoply",
- "type": "boolean",
- "default": false,
- "description": "Defines if Video will start playing as soon as it is ready"
- },
- "controls": {
- "name": "Control buttons",
- "type": "boolean",
- "default": false,
- "description": "Defines if Video controls, play/pause buttons should be displayed"
- },
- "poster": {
- "name": "Video Poster",
- "type": "string",
- "default": "",
- "description": "Specifies an image to be shown while video is loading or before user play it"
- },
- loop: {
- "name": "Video loop",
- "type": "boolean",
- "default": false,
- "description": "Defines if the video should be played repeatedly"
- }
- },
-
-
- /**
- * Constructor
- *
- * @memberOf et2_video
- */
- init: function() {
- this._super.apply(this, arguments);
-
- //Create Video tag
- this.video = jQuery(document.createElement("video"));
- if (this.options.controls)
- {
- this.video.attr("controls",true);
- }
- if (this.options.autoplay)
- {
- this.video.attr("autoplay",true);
- }
- if (this.options.muted)
- {
- this.video.attr("muted",true);
- }
- if (this.options.video_src)
- {
- this.set_src(this.options.video_src);
- }
- if (this.options.loop)
- {
- this.video.attr("loop",true);
- }
- this.setDOMNode(this.video[0]);
- },
-
- /**
- * Set video src
- *
- * @param {string} _value url
- */
- set_src: function(_value) {
-
- if (_value)
- {
- var source = jQuery(document.createElement('source'))
- .attr('src',_value)
- .appendTo(this.video);
-
- if (this.options.src_type)
- {
- source.attr('type',this.options.src_type);
- }
- }
- },
-
- /**
- * Set autoplay option for video
- * -If autoplay is set, video would be played automatically after the page is loaded
- *
- * @param {string} _value true set the autoplay and false not to set
- */
- set_autoplay: function (_value)
- {
- if (_value)
- {
- this.video.attr("autoplay",_value);
- }
- },
-
- /**
- * Set controls option for video
- *
- * @param {string} _value true set the autoplay and false not to set
- */
- set_controls: function (_value)
- {
- if (_value)
- {
- this.video.attr("controls",_value);
- }
- },
-
- /**
- * Set poster attribute in order to specify
- * an image to be shown while video is loading or before user play it
- *
- * @param {type} _url
- */
- set_poster: function (_url)
- {
- if (_url)
- {
- this.video.attr("poster", _url);
- }
- }
-
-});}).call(this);
-
-et2_register_widget(et2_video, ["video"]);
+var et2_video = /** @class */ (function (_super) {
+ __extends(et2_video, _super);
+ function et2_video(_parent, _attrs, _child) {
+ var _this = _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_core_DOMWidget_1.et2_DOMWidget._attributes, _child || {})) || this;
+ _this.video = null;
+ //Create Video tag
+ _this.video = jQuery(document.createElement("video"));
+ if (_this.options.controls) {
+ _this.video.attr("controls", 1);
+ }
+ if (_this.options.autoplay) {
+ _this.video.attr("autoplay", 1);
+ }
+ if (_this.options.muted) {
+ _this.video.attr("muted", 1);
+ }
+ if (_this.options.video_src) {
+ _this.set_src(_this.options.video_src);
+ }
+ if (_this.options.loop) {
+ _this.video.attr("loop", 1);
+ }
+ _this.setDOMNode(_this.video[0]);
+ return _this;
+ }
+ /**
+ * Set video src
+ *
+ * @param {string} _value url
+ */
+ et2_video.prototype.set_src = function (_value) {
+ if (_value) {
+ var source = jQuery(document.createElement('source'))
+ .attr('src', _value)
+ .appendTo(this.video);
+ if (this.options.src_type) {
+ source.attr('type', this.options.src_type);
+ }
+ }
+ };
+ /**
+ * Set autoplay option for video
+ * -If autoplay is set, video would be played automatically after the page is loaded
+ *
+ * @param {string} _value true set the autoplay and false not to set
+ */
+ et2_video.prototype.set_autoplay = function (_value) {
+ if (_value) {
+ this.video.attr("autoplay", _value);
+ }
+ };
+ /**
+ * Set controls option for video
+ *
+ * @param {string} _value true set the autoplay and false not to set
+ */
+ et2_video.prototype.set_controls = function (_value) {
+ if (_value) {
+ this.video.attr("controls", _value);
+ }
+ };
+ /**
+ * Set poster attribute in order to specify
+ * an image to be shown while video is loading or before user play it
+ *
+ * @param {string} _url
+ */
+ et2_video.prototype.set_poster = function (_url) {
+ if (_url) {
+ this.video.attr("poster", _url);
+ }
+ };
+ et2_video._attributes = {
+ "video_src": {
+ "name": "Video",
+ "type": "string",
+ "description": "Source of video to display"
+ },
+ "src_type": {
+ "name": "Source type",
+ "type": "string",
+ "description": "Defines the type the stream source provided"
+ },
+ "muted": {
+ "name": "Audio control",
+ "type": "boolean",
+ "default": false,
+ "description": "Defines that the audio output of the video should be muted"
+ },
+ "autoplay": {
+ "name": "Autoply",
+ "type": "boolean",
+ "default": false,
+ "description": "Defines if Video will start playing as soon as it is ready"
+ },
+ "controls": {
+ "name": "Control buttons",
+ "type": "boolean",
+ "default": false,
+ "description": "Defines if Video controls, play/pause buttons should be displayed"
+ },
+ "poster": {
+ "name": "Video Poster",
+ "type": "string",
+ "default": "",
+ "description": "Specifies an image to be shown while video is loading or before user play it"
+ },
+ "loop": {
+ "name": "Video loop",
+ "type": "boolean",
+ "default": false,
+ "description": "Defines if the video should be played repeatedly"
+ }
+ };
+ return et2_video;
+}(et2_core_baseWidget_1.et2_baseWidget));
diff --git a/api/js/etemplate/et2_widget_video.ts b/api/js/etemplate/et2_widget_video.ts
new file mode 100644
index 0000000000..5da11caf65
--- /dev/null
+++ b/api/js/etemplate/et2_widget_video.ts
@@ -0,0 +1,188 @@
+/**
+ * EGroupware eTemplate2 - JS Description object
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link http://www.egroupware.org
+ * @author Hadi Nategh
+ * @copyright Stylite AG
+ * @version $Id$
+ */
+
+/*egw:uses
+ /vendor/bower-asset/jquery/dist/jquery.js;
+ et2_core_interfaces;
+ et2_core_baseWidget;
+*/
+
+import { et2_baseWidget } from './et2_core_baseWidget'
+import {ClassWithAttributes} from "./et2_core_inheritance";
+import {et2_DOMWidget} from "./et2_core_DOMWidget";
+import {WidgetConfig} from "./et2_core_widget";
+
+/**
+ * This widget represents the HTML5 video tag with all its optional attributes
+ *
+ * The widget can be created in the following ways:
+ *
+ * var videoTag = et2_createWidget("video", {
+ * video_src: "../../test.mp4",
+ * src_type: "video/mp4",
+ * muted: true,
+ * autoplay: true,
+ * controls: true,
+ * poster: "../../poster.jpg",
+ * loop: true,
+ * height: 100,
+ * width: 200,
+ * });
+ *
+ * Or by adding XET-tag in your template (.xet) file:
+ *
+ *
+ *
+ */
+
+/**
+ * Class which implements the "video" XET-Tag
+ *
+ * @augments et2_baseWidget
+ */
+class et2_video extends et2_baseWidget implements et2_IDOMNode
+{
+ static readonly _attributes: any = {
+ "video_src": {
+ "name": "Video",
+ "type": "string",
+ "description": "Source of video to display"
+ },
+ "src_type": {
+ "name": "Source type",
+ "type": "string",
+ "description": "Defines the type the stream source provided"
+ },
+ "muted": {
+ "name": "Audio control",
+ "type": "boolean",
+ "default": false,
+ "description": "Defines that the audio output of the video should be muted"
+ },
+ "autoplay": {
+ "name": "Autoply",
+ "type": "boolean",
+ "default": false,
+ "description": "Defines if Video will start playing as soon as it is ready"
+ },
+ "controls": {
+ "name": "Control buttons",
+ "type": "boolean",
+ "default": false,
+ "description": "Defines if Video controls, play/pause buttons should be displayed"
+ },
+ "poster": {
+ "name": "Video Poster",
+ "type": "string",
+ "default": "",
+ "description": "Specifies an image to be shown while video is loading or before user play it"
+ },
+ "loop": {
+ "name": "Video loop",
+ "type": "boolean",
+ "default": false,
+ "description": "Defines if the video should be played repeatedly"
+ }
+ };
+
+ video: JQuery = null;
+
+ constructor(_parent, _attrs? : WidgetConfig, _child? : object)
+ {
+ super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_DOMWidget._attributes, _child || {}));
+
+ //Create Video tag
+ this.video = jQuery(document.createElement("video"));
+ if (this.options.controls)
+ {
+ this.video.attr("controls", 1);
+ }
+ if (this.options.autoplay)
+ {
+ this.video.attr("autoplay", 1);
+ }
+ if (this.options.muted)
+ {
+ this.video.attr("muted", 1);
+ }
+ if (this.options.video_src)
+ {
+ this.set_src(this.options.video_src);
+ }
+ if (this.options.loop)
+ {
+ this.video.attr("loop", 1);
+ }
+ this.setDOMNode(this.video[0]);
+ }
+
+ /**
+ * Set video src
+ *
+ * @param {string} _value url
+ */
+ set_src(_value: string) {
+
+ if (_value)
+ {
+ let source = jQuery(document.createElement('source'))
+ .attr('src',_value)
+ .appendTo(this.video);
+
+ if (this.options.src_type)
+ {
+ source.attr('type', this.options.src_type);
+ }
+ }
+ }
+
+ /**
+ * Set autoplay option for video
+ * -If autoplay is set, video would be played automatically after the page is loaded
+ *
+ * @param {string} _value true set the autoplay and false not to set
+ */
+ set_autoplay(_value: string)
+ {
+ if (_value)
+ {
+ this.video.attr("autoplay", _value);
+ }
+ }
+
+ /**
+ * Set controls option for video
+ *
+ * @param {string} _value true set the autoplay and false not to set
+ */
+ set_controls(_value: string)
+ {
+ if (_value)
+ {
+ this.video.attr("controls", _value);
+ }
+ }
+
+ /**
+ * Set poster attribute in order to specify
+ * an image to be shown while video is loading or before user play it
+ *
+ * @param {string} _url
+ */
+ set_poster(_url: string)
+ {
+ if (_url)
+ {
+ this.video.attr("poster", _url);
+ }
+ }
+}
\ No newline at end of file