From fb94b13a89dc893a88d77865774be0511c4b48f4 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Tue, 21 Jan 2020 16:14:45 +0100
Subject: [PATCH] Convert et2_video widget to TS

---
 api/js/etemplate/et2_widget_video.js | 286 +++++++++++++--------------
 api/js/etemplate/et2_widget_video.ts | 188 ++++++++++++++++++
 2 files changed, 325 insertions(+), 149 deletions(-)
 create mode 100644 api/js/etemplate/et2_widget_video.ts

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 @@
  * <video [attributes...]/>
  * </code>
  */
-
 /**
  * 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 <hn[at]stylite.de>
+ * @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:
+ * <code>
+ * 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,
+ * });
+ * </code>
+ * Or by adding XET-tag in your template (.xet) file:
+ * <code>
+ * <video [attributes...]/>
+ * </code>
+ */
+
+/**
+ * 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