first commit

dist/core/ui/.pydio

@@ -0,0 +1 @@
+900aa138-dace-4080-ac1c-261135bfcb71

dist/core/ui/controls.ui.js

@@ -0,0 +1,307 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlsUi = void 0;
+var OptionParams_model_1 = require("../model/OptionParams.model");
+var index_utils_1 = require("../utils/index.utils");
+var Ioc_annotation_1 = require("../annotation/Ioc.annotation");
+var Dom_annotation_1 = require("../annotation/Dom.annotation");
+var ClassName_config_1 = require("../config/ClassName.config");
+/**
+ * 底部控件条的基础功能设置
+ */
+var ControlsUi = /** @class */ (function () {
+    function ControlsUi() {
+    }
+    /**
+     * 播放按钮被点击，播放视频
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventPlay = function () {
+        var _this = this;
+        this.Play.onclick = function () { return __awaiter(_this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!this.Video.paused) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.Video.play()];
+                    case 1:
+                        _a = _b.sent();
+                        return [3 /*break*/, 4];
+                    case 2: return [4 /*yield*/, this.Video.pause()];
+                    case 3:
+                        _a = _b.sent();
+                        _b.label = 4;
+                    case 4:
+                        _a;
+                        this.Play.classList.toggle(ClassName_config_1.ClassName.Stop);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+    };
+    ControlsUi.prototype.BindEventPlayList = function () {
+        var _this = this;
+        var SideMenu = this.Utils.$("." + ClassName_config_1.ClassName.SideMenu);
+        this.playList.onclick = function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                if (SideMenu.style.right == "0px") {
+                    this.Utils.$("." + ClassName_config_1.ClassName.SideMenu).style.right = '-250px';
+                }
+                else {
+                    this.Utils.$("." + ClassName_config_1.ClassName.SideMenu).style.right = '0';
+                }
+                return [2 /*return*/];
+            });
+        }); };
+    };
+    /**
+     * 视频全屏
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventFullScreen = function () {
+        var _this = this;
+        this.FullScreen.onclick = function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!!document.fullscreenElement) return [3 /*break*/, 2];
+                        this.Video.parentElement.style.width = '100%';
+                        this.Video.parentElement.style.height = '100%';
+                        return [4 /*yield*/, document.documentElement.requestFullscreen()];
+                    case 1:
+                        _a.sent();
+                        return [3 /*break*/, 4];
+                    case 2:
+                        if (!document.exitFullscreen) return [3 /*break*/, 4];
+                        this.Video.parentElement.style.width = OptionParams_model_1.default.OptionParams.width;
+                        this.Video.parentElement.style.height = OptionParams_model_1.default.OptionParams.height;
+                        return [4 /*yield*/, document.exitFullscreen()];
+                    case 3:
+                        _a.sent();
+                        _a.label = 4;
+                    case 4:
+                        this.FullScreen.classList.toggle(ClassName_config_1.ClassName.Active);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+    };
+    /**
+     * 截图按钮
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventScreenShot = function () {
+        var _this = this;
+        var scale = 0.65;
+        this.ScreenShot.onclick = function () {
+            var canvas = document.createElement("canvas");
+            canvas.width = _this.Video.videoWidth * scale;
+            canvas.height = _this.Video.videoHeight * scale;
+            canvas.getContext('2d')
+                .drawImage(_this.Video, 0, 0, canvas.width, canvas.height);
+            _this.Utils.downLoadFile(canvas.toDataURL('image/jpeg', 1.0), 'image/jpeg');
+        };
+    };
+    /**
+     * 循环播放的开关
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventLoop = function () {
+        var _this = this;
+        this.Loop.onclick = function () {
+            _this.Video.loop ? _this.Video.loop = false : _this.Video.loop = true;
+            _this.Loop.classList.toggle(ClassName_config_1.ClassName.Active);
+        };
+    };
+    /**
+     * 视频镜像功能
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventImage = function () {
+        var _this = this;
+        // 延迟解决 ondblclick 时候会触发 onclick 的问题
+        var ImageStatus = true, timeId = null; // true rotateY 镜像，false rotateX 镜像
+        // 双击视频恢复
+        this.Image.ondblclick = function () {
+            clearTimeout(timeId);
+            ImageStatus = true;
+            _this.Video.style.cssText = "\n                transform: rotateY(0deg); \n            ";
+        };
+        // 单击镜像
+        this.Image.onclick = function () {
+            clearTimeout(timeId);
+            timeId = setTimeout(function () {
+                if (ImageStatus) {
+                    ImageStatus = false;
+                    _this.Video.style.cssText = "\n                        transform: rotateY(180deg); \n                    ";
+                }
+                else {
+                    ImageStatus = true;
+                    _this.Video.style.cssText = "\n                        transform: rotateX(180deg); \n                    ";
+                }
+            }, 250);
+        };
+    };
+    /**
+     *  TODO 视频倍速的功能 实现中...
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventSpeed = function () {
+        // 默认视频倍速
+        var defaultSpeed = [0.5, 1.0, 1.25, 1.5, 2.0];
+        this.Speed.onclick = function () {
+            // 如果传入的是数组
+            if (Array.isArray(OptionParams_model_1.default.OptionParams.controls.speed)) {
+                defaultSpeed = OptionParams_model_1.default.OptionParams.controls.speed;
+                console.log("如果传入的是数组");
+                // 如果传入的是true，表示开启默认的倍速播放功能
+            }
+            else if (OptionParams_model_1.default.OptionParams.controls.speed == true) {
+                console.log("表示开启默认的倍速播放功能");
+            }
+        };
+    };
+    /**
+     * 画中画
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventPictureInPicture = function () {
+        var _this = this;
+        this.PictureInPicture.onclick = function () {
+            if (document.pictureInPictureElement == null) {
+                _this.Video.requestPictureInPicture();
+                _this.PictureInPicture.classList.add(ClassName_config_1.ClassName.Active);
+            }
+            else {
+                document.exitPictureInPicture();
+                _this.PictureInPicture.classList.remove(ClassName_config_1.ClassName.Active);
+            }
+        };
+        /**
+         * 监听退出画中画功能
+         */
+        this.Video.addEventListener('leavepictureinpicture', function () {
+            _this.PictureInPicture.classList.remove(ClassName_config_1.ClassName.Active);
+            _this.Play.classList.toggle(ClassName_config_1.ClassName.Stop);
+        });
+    };
+    /**
+     * 视频旋转
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventRotate = function () {
+        var _this = this;
+        var currentRotate = 0, RotateNumber = 0;
+        this.Rotate.onclick = function () {
+            if (RotateNumber >= 4) {
+                currentRotate = 0;
+                RotateNumber = 0;
+            }
+            currentRotate += OptionParams_model_1.default.OptionParams.controls.rotate == true
+                ? 90
+                : OptionParams_model_1.default.OptionParams.controls.rotate;
+            RotateNumber++;
+            if (currentRotate == 180 || currentRotate == 360 ||
+                currentRotate == -180 || currentRotate == -360) {
+                _this.Video.style.cssText = "\n                        width: 100%;\n                        left: 50%;\n                        top: 50%;\n                        transform: translate(-50%, -50%) rotate(" + currentRotate + "deg);\n                    ";
+                return false;
+            }
+            else {
+                // 视频旋转 90°，270°后，视频的宽度 等于 父元素的高度
+                _this.Video.style.cssText = "\n                        width: " + OptionParams_model_1.default.OptionParams.height + ";\n                        left: 50%;\n                        top: 50%;\n                        transform: translate(-50%, -50%) rotate(" + currentRotate + "deg);\n                ";
+            }
+        };
+    };
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], ControlsUi.prototype, "Play", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", Object)
+    ], ControlsUi.prototype, "Video", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], ControlsUi.prototype, "Loop", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], ControlsUi.prototype, "PictureInPicture", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], ControlsUi.prototype, "Rotate", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLLIElement)
+    ], ControlsUi.prototype, "Image", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLLIElement)
+    ], ControlsUi.prototype, "ScreenShot", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLLIElement)
+    ], ControlsUi.prototype, "Speed", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLLIElement)
+    ], ControlsUi.prototype, "FullScreen", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLLIElement)
+    ], ControlsUi.prototype, "playList", void 0);
+    __decorate([
+        Ioc_annotation_1.Inject(),
+        __metadata("design:type", index_utils_1.Utils)
+    ], ControlsUi.prototype, "Utils", void 0);
+    return ControlsUi;
+}());
+exports.ControlsUi = ControlsUi;

dist/core/ui/coreSettings.ui.js

@@ -0,0 +1,191 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CoreSettingsUi = void 0;
+var Dom_annotation_1 = require("../annotation/Dom.annotation");
+var OptionParams_model_1 = require("../model/OptionParams.model");
+var ClassName_config_1 = require("../config/ClassName.config");
+var index_utils_1 = require("../utils/index.utils");
+var Ioc_annotation_1 = require("../annotation/Ioc.annotation");
+/**
+ * 视频核心功能设置
+ */
+var CoreSettingsUi = /** @class */ (function () {
+    function CoreSettingsUi() {
+    }
+    /**
+     * 设置视频预览图地址
+     * @constructor
+     */
+    CoreSettingsUi.prototype.BindEventVideoPoster = function () {
+        this.Video.poster = OptionParams_model_1.default.OptionParams.poster;
+    };
+    /**
+     * 渲染视频播放列表
+     * @constructor
+     */
+    CoreSettingsUi.prototype.BindEventPlayVideoList = function () {
+        var _this = this;
+        var SideMenu = document.querySelectorAll("." + ClassName_config_1.ClassName.SideMenu + " .list_item");
+        SideMenu.forEach(function (v, index) {
+            v.onclick = function () {
+                _this.VideoProgress.style.backgroundSize = "0% 100%";
+                setTimeout(function () { return _this.VideoProgress.value = String(0); }, 1);
+                _this.VideoProgress.step = '0.000000000000000001';
+                _this.Video.src = OptionParams_model_1.default.OptionParams.playList[index].url;
+                _this.Play.classList.remove(ClassName_config_1.ClassName.Stop);
+                _this.Play.classList.add(ClassName_config_1.ClassName.Play);
+            };
+        });
+    };
+    /**
+     * 设置视频宽高
+     * @constructor
+     */
+    CoreSettingsUi.prototype.BindEventVideoSize = function () {
+        this.Video.parentElement.style.width = OptionParams_model_1.default.OptionParams.width;
+        this.Video.parentElement.style.height = OptionParams_model_1.default.OptionParams.height;
+    };
+    /**
+     * 设置视频的自动播放 和 是否静音
+     * @constructor
+     */
+    CoreSettingsUi.prototype.BindEventVideoAutoPlayAndMuted = function () {
+        this.Video.autoplay = OptionParams_model_1.default.OptionParams.autoplay;
+        this.Video.muted = OptionParams_model_1.default.OptionParams.muted;
+        // 谷歌等众多浏览器禁止video标签有声的自动播放，所以这里如果想实现有声而且自动播放视频那么需要特殊处理
+        // 前端用户需要开启 autoplay true 自动播放，muted true 静音
+        if (OptionParams_model_1.default.OptionParams.autoplay && OptionParams_model_1.default.OptionParams.muted) {
+            console.log("无声，自动播放");
+            this.Play.classList.toggle(ClassName_config_1.ClassName.Stop);
+        }
+    };
+    /**
+     * 配置单个视频地址 & 多个清晰度视频地址
+     * @constructor
+     */
+    CoreSettingsUi.prototype.BindEventEndedVideoSetUrl = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var UL_1;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(typeof OptionParams_model_1.default.OptionParams.url === "string")) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.Utils.CheckVideoType(OptionParams_model_1.default.OptionParams.url)
+                            // 多清晰度视频的数组
+                        ];
+                    case 1:
+                        _a.sent();
+                        return [3 /*break*/, 4];
+                    case 2: 
+                    // 数组默认第一条视频作为播放视频
+                    return [4 /*yield*/, this.Utils.CheckVideoType(OptionParams_model_1.default.OptionParams.url[0].url)];
+                    case 3:
+                        // 数组默认第一条视频作为播放视频
+                        _a.sent();
+                        UL_1 = document.createElement("ul");
+                        UL_1.className = "high";
+                        OptionParams_model_1.default.OptionParams.url.map(function (val, index) {
+                            var li = document.createElement("li");
+                            li.textContent = val.title;
+                            // 默认第一个显示激活样式
+                            index == 0 ? li.classList.toggle(ClassName_config_1.ClassName.Active) : null;
+                            li.onclick = function () { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0:
+                                            // 清除所有li激活类名
+                                            li.parentElement.childNodes.forEach(function (s) { return s.className = ""; });
+                                            // 为点击的里高亮激活
+                                            li.className = ClassName_config_1.ClassName.Active;
+                                            // 切换视频地址
+                                            return [4 /*yield*/, this.Utils.CheckVideoType(val.url)];
+                                        case 1:
+                                            // 切换视频地址
+                                            _a.sent();
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); };
+                            // 填充li到ul中
+                            UL_1.appendChild(li);
+                        });
+                        // 鼠标悬浮 显示清晰度选择菜单
+                        this.High.onmouseover = function () { return UL_1.style.display = "block"; };
+                        this.High.onmouseout = function () { return UL_1.style.display = "none"; };
+                        // 填充ul到清晰度选择的图标中
+                        this.High.appendChild(UL_1);
+                        _a.label = 4;
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], CoreSettingsUi.prototype, "Play", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLVideoElement)
+    ], CoreSettingsUi.prototype, "Video", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], CoreSettingsUi.prototype, "High", void 0);
+    __decorate([
+        Ioc_annotation_1.Inject(),
+        __metadata("design:type", index_utils_1.Utils)
+    ], CoreSettingsUi.prototype, "Utils", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLInputElement)
+    ], CoreSettingsUi.prototype, "VideoProgress", void 0);
+    return CoreSettingsUi;
+}());
+exports.CoreSettingsUi = CoreSettingsUi;

dist/core/ui/eventListeners.ui.js

@@ -0,0 +1,114 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventListenersUi = void 0;
+var Dom_annotation_1 = require("../annotation/Dom.annotation");
+var OptionParams_model_1 = require("../model/OptionParams.model");
+var ClassName_config_1 = require("../config/ClassName.config");
+var Ioc_annotation_1 = require("../annotation/Ioc.annotation");
+var index_utils_1 = require("../utils/index.utils");
+/**
+ * 视频播放的各种事件监听和处理
+ */
+var EventListenersUi = /** @class */ (function () {
+    function EventListenersUi() {
+    }
+    /**
+     * 监听 视频数据长度发生改变的时候去获取视频的总时间，
+     * 并设置到页面上显示出来
+     * @constructor
+     */
+    EventListenersUi.prototype.BindEventDurationchange = function () {
+        var _this = this;
+        this.Video.addEventListener('durationchange', function () {
+            _this.setVideoTime(_this.Video.duration);
+        });
+    };
+    // 播放按钮被点击，播放视频
+    EventListenersUi.prototype.BindEventEnded = function () {
+        var _this = this;
+        this.Video.addEventListener('ended', function () {
+            // 视频播放完成后，将暂停按钮样式改为播放状态
+            _this.Play.classList.toggle(ClassName_config_1.ClassName.Stop);
+            // 回调用户的事件
+            OptionParams_model_1.default.OptionParams.finish(_this.Video);
+        });
+    };
+    /**
+     * 视频播放过程中时间发生改变设置进度条进度
+     * @constructor
+     */
+    EventListenersUi.prototype.BindEventVideoTimeUpdate = function () {
+        var _this = this;
+        this.Video.ontimeupdate = function () {
+            // 进度条前进值 = 当前时间 / 总视频时间 * 100
+            var w = _this.Video.currentTime / _this.Video.duration * 100;
+            // 设置进度条已播放过的颜色
+            _this.VideoProgress.style.backgroundSize = w + "% 100%";
+            // 设置进度条方块前进值
+            _this.VideoProgress.value = String(w);
+            // 进度条步进值
+            _this.VideoProgress.step = '0.000000000000000001';
+            _this.setVideoTime();
+        };
+    };
+    /**
+     * 进度条被拖动的时候
+     * @constructor
+     */
+    EventListenersUi.prototype.BindEventVideoOnProgress = function () {
+        var _this = this;
+        this.VideoProgress.oninput = function () {
+            // 拿到被拖动滑块的滑动距离
+            var offsetX = _this.VideoProgress.value;
+            // 滑动后对应的视频播放时间  = 滑动距离 / 总距离 * 时间总时间
+            _this.Video.currentTime = offsetX / 100 * _this.Video.duration;
+            // 设置进度条已播放过的颜色
+            _this.VideoProgress.style.backgroundSize = offsetX + "% 100%";
+            // 拖动的时候自动播放了，所以把播放按钮改成暂停按钮
+            _this.Play.classList.add(ClassName_config_1.ClassName.Stop);
+            _this.setVideoTime();
+        };
+    };
+    /**
+     * 设置视频的 当前播放时间 / 视频总时间
+     */
+    EventListenersUi.prototype.setVideoTime = function (time) {
+        if (time === undefined) {
+            this.VideoTime.innerText = this.Utils.formatTime(this.Video.currentTime) + "/" + this.Utils.formatTime(this.Video.duration);
+        }
+        else {
+            this.VideoTime.innerText = this.Utils.formatTime(this.Video.currentTime) + "/" + this.Utils.formatTime(time);
+        }
+    };
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], EventListenersUi.prototype, "Play", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLMediaElement)
+    ], EventListenersUi.prototype, "Video", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLInputElement)
+    ], EventListenersUi.prototype, "VideoProgress", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], EventListenersUi.prototype, "VideoTime", void 0);
+    __decorate([
+        Ioc_annotation_1.Inject(),
+        __metadata("design:type", index_utils_1.Utils)
+    ], EventListenersUi.prototype, "Utils", void 0);
+    return EventListenersUi;
+}());
+exports.EventListenersUi = EventListenersUi;

dist/core/ui/index.ui.js

@@ -0,0 +1,49 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApplicationUI = void 0;
+/// <reference path = "../../types/index.d.ts" />
+var OptionParams_model_1 = require("../model/OptionParams.model");
+var index_utils_1 = require("../utils/index.utils");
+var Ioc_annotation_1 = require("../annotation/Ioc.annotation");
+var controls_ui_1 = require("./controls.ui");
+var eventListeners_ui_1 = require("./eventListeners.ui");
+var coreSettings_ui_1 = require("./coreSettings.ui");
+/**
+ * 生成播放器的Dom树，绑定各种事件处理
+ */
+var ApplicationUI = /** @class */ (function () {
+    function ApplicationUI() {
+    }
+    ApplicationUI.prototype.GenerateDom = function () {
+        // 获取用户传入的最外层父节点
+        this.el = this.Utils.$(OptionParams_model_1.default.OptionParams.el);
+        // 保存视频播放器的DOM树，后面需要操作DOM树，为各个按钮绑定事件处理
+        OptionParams_model_1.default.VideoDom = this.Utils.ParseDom(this.Utils.getLayout());
+        // 自动调用传入类中方法名包含 'BindEventxxx' 的方法
+        // 实现各种点击事件的自动绑定
+        this.Utils.callMethods([
+            coreSettings_ui_1.CoreSettingsUi, controls_ui_1.ControlsUi, eventListeners_ui_1.EventListenersUi
+        ]);
+        // 将模板pug和参数配置渲染后得到html string，转换为dom树，
+        // 然后将已经绑定好各种事件的dom注入到用户传入的 div 中给用户使用！！
+        this.el.appendChild(OptionParams_model_1.default.VideoDom);
+    };
+    __decorate([
+        Ioc_annotation_1.Inject(),
+        __metadata("design:type", index_utils_1.Utils)
+    ], ApplicationUI.prototype, "Utils", void 0);
+    ApplicationUI = __decorate([
+        Ioc_annotation_1.Injectable()
+    ], ApplicationUI);
+    return ApplicationUI;
+}());
+exports.ApplicationUI = ApplicationUI;