cty-mui-core 1.0.0

package/components/cty-video.js

@@ -0,0 +1,1381 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as getElementRect, b as getEventPageCoords, g as getEventClientCoords } from './dom.js';
+import { a as secondsToVehicle, s as statusBar } from './status-bar.js';
+import { f as fromEvent } from './merge.js';
+import { n as network } from './network.js';
+import { d as deviceInfo } from './device-info2.js';
+import { c as config } from './config2.js';
+import { v as volumeMuteOutline, o as volumeOffOutline, q as volumeLowOutline, u as volumeMediumOutline, w as volumeHighOutline, k as chevronBackOutline } from './index4.js';
+import './gesture-controller.js';
+import { i as isPlatform } from './platform.js';
+import { d as defineCustomElement$9 } from './icon.js';
+import { d as defineCustomElement$8 } from './button.js';
+import { d as defineCustomElement$7 } from './col.js';
+import { d as defineCustomElement$6 } from './grid.js';
+import { d as defineCustomElement$5 } from './icon2.js';
+import { d as defineCustomElement$4 } from './range.js';
+import { d as defineCustomElement$3 } from './ripple-effect.js';
+import { d as defineCustomElement$2 } from './row.js';
+
+class CTYScreenOrientation {
+    constructor() {
+        var _a;
+        this._orientationPlugin = (_a = window === null || window === void 0 ? void 0 : window.screen) === null || _a === void 0 ? void 0 : _a.orientation;
+    }
+    async lock(orientation) {
+        try {
+            this._orientationPlugin.lock(orientation);
+        }
+        catch (error) { }
+    }
+    async unlock() {
+        try {
+            this._orientationPlugin.unlock();
+        }
+        catch (error) { }
+    }
+    get type() {
+        try {
+            return this._orientationPlugin.type;
+        }
+        catch (error) { }
+        return '';
+    }
+    get change() {
+        return fromEvent(window, 'orientationchange');
+    }
+}
+const screenOrientation = new CTYScreenOrientation();
+
+class CTYVolumeControl {
+    constructor() {
+        var _a, _b;
+        this._volumeControlPlugin = (_b = (_a = window === null || window === void 0 ? void 0 : window.cordova) === null || _a === void 0 ? void 0 : _a.plugins) === null || _b === void 0 ? void 0 : _b.VolumeControl;
+    }
+    get isAvailable() {
+        return !!this._volumeControlPlugin;
+    }
+    getVolume() {
+        return new Promise((resolve, reject) => {
+            var _a;
+            if (this.isAvailable) {
+                (_a = this._volumeControlPlugin) === null || _a === void 0 ? void 0 : _a.getVolume((volume) => {
+                    resolve(volume * 100);
+                }, (error) => {
+                    reject(error);
+                });
+            }
+            else {
+                reject('VolumeControl plugin is not available');
+            }
+        });
+    }
+    setVolume(volume) {
+        return new Promise((resolve, reject) => {
+            var _a;
+            if (this.isAvailable) {
+                (_a = this._volumeControlPlugin) === null || _a === void 0 ? void 0 : _a.setVolume(+(Math.min(100, Math.max(0, volume)) / 100).toFixed(2), () => {
+                    resolve();
+                }, (error) => {
+                    reject(error);
+                });
+            }
+            else {
+                reject('VolumeControl plugin is not available');
+            }
+        });
+    }
+    isMuted() {
+        return new Promise((resolve, reject) => {
+            var _a;
+            if (this.isAvailable) {
+                (_a = this._volumeControlPlugin) === null || _a === void 0 ? void 0 : _a.isMuted((volume) => {
+                    resolve(volume === 0);
+                }, (error) => {
+                    reject(error);
+                });
+            }
+            else {
+                reject('VolumeControl plugin is not available');
+            }
+        });
+    }
+    toggleMute() {
+        return new Promise((resolve, reject) => {
+            var _a;
+            if (this.isAvailable) {
+                (_a = this._volumeControlPlugin) === null || _a === void 0 ? void 0 : _a.toggleMute((volume) => {
+                    resolve(volume === 0);
+                }, (error) => {
+                    reject(error);
+                });
+            }
+            else {
+                reject('VolumeControl plugin is not available');
+            }
+        });
+    }
+}
+const volumeControl = new CTYVolumeControl();
+
+const videoCss = "*{-webkit-box-sizing:border-box;box-sizing:border-box}p,h1,h2,h3,h4,h5,h6{margin:0;padding:0}.flex{display:-ms-flexbox;display:flex}.flex-wrap{display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap}.flex-align-start{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.flex-align-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.flex-align-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}.flex-justify-start{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}.flex-justify-center{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.flex-justify-end{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.flex-align-end-start{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.flex-align-end-center{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.flex-align-end-end{display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}.flex-center{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-center-justify-end{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.flex-between{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.flex-center-between{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.flex-column{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column}.flex-column-align-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center}.flex-column-justify-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:center;justify-content:center}.flex-column-center{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.flex-column-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:justify;justify-content:space-between}.flex-column-center-between{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.cty-ellipsis[class]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:normal}.cty-ellipsis2[class]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-all;word-wrap:break-word}.cty-ellipsis3[class]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;word-break:break-all;word-wrap:break-word}.cty-ellipsis4[class]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;word-break:break-all;word-wrap:break-word}ion-button{--background-activated:transparent;--background-focused:transparent;--background-hover:transparent;--box-shadow:none}ion-grid{padding:0}ion-row{padding:0}ion-col{padding:0}ion-item{--padding-bottom:0;--padding-end:0;--padding-start:0;--padding-top:0;--inner-padding-top:0;--inner-padding-start:0;--inner-padding-end:0;--inner-padding-bottom:0;--inner-border-width:0;--border-width:0;--min-height:0;--background:none;overflow:initial}ion-toast{--width:84%;--height:36px;--color:var(--cty-color-white);--background:rgba(0, 0, 0, 0.7);--border-radius:100px;line-height:1.2;font-size:var(--cty-font-size-base);text-align:center}.plt-hybrid .safe-area-bottom-border{-webkit-box-sizing:content-box;box-sizing:content-box;border-bottom:var(--ion-safe-area-bottom, 0) solid var(--cty-color-white)}.plt-hybrid .safe-area-bottom-border-color{-webkit-box-sizing:content-box;box-sizing:content-box;border-bottom:var(--ion-safe-area-bottom, 0) solid currentColor}.plt-hybrid .safe-area-bottom-padding{padding-bottom:var(--ion-safe-area-bottom, 0)}:host{--cty-video-width:100vw;--cty-video-height:100vh;--cty-video-half-width:calc(var(--cty-video-width) / 2);--cty-video-fit:fill;--cty-video-header-height:50px;--cty-video-header-background:var(--cty-overlay-color-lighter);--cty-video-header-unfullscreen-background:transparent;--cty-video-header-unfullscreen-height:30px;--cty-video-header-padding-top:0px;--cty-video-header-padding-bottom:0px;--cty-video-header-padding-start:0px;--cty-video-header-padding-end:0px;--cty-video-header-back-display:flex;--cty-video-header-back-background:transparent;--cty-video-header-back-height:36px;--cty-video-header-back-width:36px;--cty-video-header-back-radius:var(--cty-border-radius-circle);--cty-video-header-back-offset-start:2px;--cty-video-header-back-offset-end:0px;--cty-video-header-back-size:25px;--cty-video-header-back-color:var(--cty-color-white);--cty-video-header-title-size:var(--cty-font-size-medium);--cty-video-header-title-color:var(--cty-color-white);--cty-video-header-title-display:flex;--cty-video-footer-height:50px;--cty-video-footer-background:var(--cty-overlay-color-lighter);--cty-video-footer-unfullscreen-background:transparent;--cty-video-footer-unfullscreen-height:35px;--cty-video-footer-progress-height:0px;--cty-video-footer-padding-start:0px;--cty-video-footer-padding-end:0px;--cty-video-footer-progress-size:var(--cty-font-size-medium);--cty-video-footer-icon-size:24px;--cty-video-footer-fullscreen-icon-size:20px;--cty-video-play-size:80px;--cty-video-play-border:5px solid rgba(238, 238, 238, 0.8);--cty-video-play-icon-size:40px;--cty-video-unfullscreen-play-size:40px;--cty-video-unfullscreen-play-border:4px solid rgba(238, 238, 238, 0.8);--cty-video-unfullscreen-play-icon-size:26px;--cty-video-range-bar-height:2px;--cty-video-bar-size:12px;--cty-video-bar-color:var(--cty-color-white);--cty-video-range-knob-background:var(--cty-color-white);--cty-video-range-background:rgba(255,255,255,0.5);--cty-video-range-background-active:var(--cty-color-primary);--cty-video-loading-background-color:rgba(0,0,0,0.9);--cty-video-loading-img-width:100px;--cty-video-half-screen-height:56vw;--cty-video-dot-size:7px;--cty-video-dot-padding:9px;--cty-video-dot-active-color:var(--cty-color-primary);--cty-video-progress-vertical-padding:0 15px;--cty-video-progress-horizongtal-padding:0px;--cty-video-rate-active-color:var(--cty-color-primary);--cty-video-toast-width:calc(var(--cty-video-width) * 0.4);--cty-video-toast-height:40px;--cty-video-opn-toast-icon-size:20px;display:block;position:relative;width:var(--cty-video-width);height:var(--cty-video-height);background:var(--cty-color-black)}ion-row{height:100%}ion-col{overflow:hidden}ion-button{margin:0;min-height:auto}.cty-video__wrapper{position:relative;width:100%;height:100%}.cty-video__player{display:none;position:absolute;top:0;left:0;margin:0;width:var(--cty-video-height);height:var(--cty-video-width);transform-origin:var(--cty-video-half-width) var(--cty-video-half-width);-webkit-transform-origin:var(--cty-video-half-width) var(--cty-video-half-width);-webkit-transform:rotate(90deg) translate(0, -100%);transform:rotate(90deg);-o-object-fit:var(--cty-video-fit);object-fit:var(--cty-video-fit)}.cty-video__controls{position:absolute;top:0;left:0;width:100%;height:100%}.cty-video__header{position:absolute;z-index:6;background:var(--cty-video-header-background);top:0;left:0;width:calc(var(--cty-video-height) - var(--cty-video-header-padding-start) - var(--cty-video-header-padding-end));height:var(--cty-video-header-height);padding-left:var(--cty-video-header-padding-start);padding-right:var(--cty-video-header-padding-end);padding-top:var(--cty-video-header-padding-top);padding-bottom:var(--cty-video-header-padding-bottom);-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transform-origin:var(--cty-video-half-width) var(--cty-video-half-width);transform-origin:var(--cty-video-half-width) var(--cty-video-half-width);-webkit-box-sizing:content-box;box-sizing:content-box}.cty-video__header-back{display:var(--cty-video-header-back-display);width:auto;-ms-flex-positive:0;flex-grow:0;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.cty-video__header-back ion-button{width:var(--cty-video-header-back-width);height:var(--cty-video-header-back-height);border-radius:var(--cty-video-header-back-radius);--background:var(--cty-video-header-back-background);--padding-start:5px;--padding-end:5px;--padding-top:0;--padding-bottom:0;margin-left:var(--cty-video-header-back-offset-start);margin-right:var(--cty-video-header-back-offset-end)}.cty-video__header-back cty-icon{font-size:var(--cty-video-header-back-size);color:var(--cty-video-header-back-color)}.cty-video__title[class]{display:var(--cty-video-header-title-display);font-size:var(--cty-video-header-title-size);color:var(--cty-video-header-title-color);line-height:var(--cty-video-header-height)}.cty-video__footer{position:absolute;top:0;left:0;z-index:6;width:var(--cty-video-height);height:var(--cty-video-footer-height);background:var(--cty-video-footer-background);padding-left:var(--cty-video-footer-padding-start);padding-right:var(--cty-video-footer-padding-end);transform:rotate(90deg);-webkit-transform:rotate(90deg);transform-origin:calc(var(--cty-video-footer-height) / 2) calc(var(--cty-video-footer-height) / 2);-webkit-transform-origin:calc(var(--cty-video-footer-height) / 2) calc(var(--cty-video-footer-height) / 2);-webkit-box-sizing:border-box;box-sizing:border-box}.cty-video__footer ion-button{height:100%;--background:transparent;--padding-start:12px;--padding-end:12px;--padding-top:0;--padding-bottom:0;--color:var(--cty-color-white)}.cty-video__footer ion-row{height:calc(var(--cty-video-footer-height) - var(--cty-video-footer-progress-height))}.cty-video__footer .cty-video__footer-progress__top{height:var(--cty-video-footer-progress-height);-webkit-transform:translateY(calc(var(--cty-video-footer-progress-height) / 2));transform:translateY(calc(var(--cty-video-footer-progress-height) / 2))}.cty-video__footer-controls{background:transparent}.cty-video__footer-controls ion-col:not(.cty-video__footer-progress){opacity:0}.cty-video__footer-controls .cty-video__time{opacity:0}.cty-video__footer-toggle-play{width:auto;-ms-flex-positive:0;flex-grow:0;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.cty-video__footer-toggle-play cty-icon{font-size:var(--cty-video-footer-icon-size)}.cty-video__footer-flex{-ms-flex:1;flex:1}.cty-video__footer-time-label{margin-left:8px;color:var(--cty-color-white);font-size:var(--cty-video-footer-progress-size);letter-spacing:0.2px}.cty-video__footer-time-label span{margin:0 1px;-webkit-transform:translateY(-1px);transform:translateY(-1px)}.cty-video__footer-progress{overflow:auto;-ms-flex:1;flex:1}.cty-video__time{color:var(--cty-color-white);font-size:var(--cty-video-footer-progress-size)}.cty-video__time:nth-child(1){margin-right:12px}.cty-video__time:nth-child(2),.cty-video__time:last-child{margin-left:12px}.cty-video__footer-range{--height:100%;--knob-size:var(--cty-video-bar-size);--bar-height:var(--cty-video-range-bar-height);padding:0;--knob-background:var(--cty-video-range-knob-background);--bar-background:var(--cty-video-range-background);--bar-background-active:var(--cty-video-range-background-active);color:var(--cty-video-bar-color);font-size:var(--cty-font-size-medium);opacity:1}.cty-video__footer-bar{position:relative;-ms-flex:1;flex:1;height:80%;cursor:pointer}.cty-video__footer-progress__top{position:relative;z-index:2;padding:var(--cty-video-progress-horizongtal-padding)}.cty-video__footer-progress__top .cty-video__footer-bar{height:100%}.cty-video__footer-dot{position:absolute;top:50%;padding:var(--cty-video-dot-padding);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.cty-video__footer-dot::after{display:block;width:var(--cty-video-dot-size);height:var(--cty-video-dot-size);background:var(--cty-video-dot-active-color);content:\"\";border-radius:var(--cty-border-radius-circle)}.cty-video__footer-rate{width:auto;-ms-flex-positive:0;flex-grow:0;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.cty-video__footer-rate ion-button{--padding-start:5px;--padding-end:5px;--padding-top:4px;--padding-bottom:4px;width:36px;height:auto;margin-left:12px;border-radius:var(--cty-border-radius-base);border:1px solid var(--cty-color-white);font-size:var(--cty-font-size-extra-small);font-weight:bold;white-space:nowrap}.cty-video__footer-volume{width:auto;-ms-flex-positive:0;flex-grow:0;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.cty-video__footer-volume cty-icon{font-size:var(--cty-video-footer-icon-size)}.cty-video__footer-fullscreen{width:auto;-ms-flex-positive:0;flex-grow:0;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.cty-video__footer-fullscreen ion-button{--padding-start:0px}.cty-video__footer-fullscreen cty-icon{font-size:var(--cty-video-footer-fullscreen-icon-size)}.cty-video__toggle-play{position:absolute;left:50%;top:50%;z-index:8;font-weight:bold;width:var(--cty-video-play-size);height:var(--cty-video-play-size);margin:calc(var(--cty-video-play-size) / -2) 0px 0px calc(var(--cty-video-play-size) / -2);border-radius:var(--cty-border-radius-circle);border:var(--cty-video-play-border);text-align:center;--background:transparent;--padding-top:0;--padding-end:0;--padding-start:0;--padding-bottom:0}.cty-video__toggle-play cty-icon{color:rgba(238, 238, 238, 0.9);font-size:var(--cty-video-play-icon-size);text-align:center;transform:rotate(90deg);-webkit-transform:rotate(90deg)}.cty-video__opn-toast{position:absolute;z-index:4;top:50%;left:50%;width:var(--cty-video-toast-width);max-width:150px;height:var(--cty-video-toast-height);background:var(--cty-overlay-color-light);border-radius:var(--cty-border-radius-round);-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg);font-size:var(--cty-font-size-medium);font-weight:bold;color:var(--cty-color-white)}.cty-video__opn-toast cty-icon{margin-right:10px;font-size:var(--cty-video-opn-toast-icon-size)}.cty-video__opn-panel{position:absolute;z-index:5;top:50%;left:50%;width:var(--cty-video-height);height:calc(var(--cty-video-width) - var(--cty-video-header-height) - var(--cty-video-footer-height) - var(--cty-video-header-padding-top) - var(--cty-video-header-padding-bottom));margin:0 0 0 calc((var(--cty-video-footer-height) - var(--cty-video-header-height) - var(--cty-video-header-padding-top) - var(--cty-video-header-padding-bottom)) / 2);-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg)}.cty-video__dot-panel{position:absolute;z-index:6;background:var(--cty-overlay-color);padding:5px 11px 5px 8px;margin-left:calc(var(--cty-video-footer-height) + 13px + 46px);border-radius:var(--cty-border-radius-base);-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.cty-video__dot-panel .cty-video__dot-label{position:relative;max-width:160px;padding-right:17px;font-size:var(--cty-font-size-small);line-height:1.38;color:var(--cty-color-white)}.cty-video__dot-panel .cty-video__dot-label::after{position:absolute;top:0;right:7px;height:100%;width:1px;background-color:rgba(255, 255, 255, 0.3);content:\"\";-webkit-transform:scaleX(1.5);transform:scaleX(1.5)}.cty-video__dot-panel ion-button{height:36px;--padding-start:0;--padding-end:0;--background:transparent;--border-radius:0;--color:var(--cty-video-dot-active-color);font-weight:bold;font-size:var(--cty-font-size-small)}.cty-video__dot-panel cty-icon{margin-right:4px;font-size:var(--cty-font-size-medium)}.cty-video__dot-panel .cty-video__dot-triangle{position:absolute;bottom:-18px;left:20px;border-width:9px 8px;border-style:solid;border-color:transparent;border-top-color:var(--cty-overlay-color)}.cty-video__dot-panel-ex{margin-left:calc(var(--cty-video-footer-height) + 46px)}.cty-video__toast[class]{position:absolute;top:50%;z-index:7;font-weight:bold;min-width:300px;max-width:96vw;padding:0 15px;margin:0px 0px 0px -60px;background:var(--cty-overlay-color);border-radius:var(--cty-border-radius-large);color:rgba(238, 238, 238, 0.9);font-size:var(--cty-font-size-extra-small);line-height:30px;text-align:center;pointer-events:none;transform:rotate(90deg);-webkit-transform:rotate(90deg)}.cty-video__rate{position:absolute;top:0;left:0;z-index:9;width:var(--cty-video-height);height:var(--cty-video-width);-webkit-transform-origin:var(--cty-video-half-width) var(--cty-video-half-width);transform-origin:var(--cty-video-half-width) var(--cty-video-half-width);-webkit-transform:rotate(90deg);transform:rotate(90deg)}.cty-video__rate-mask{position:absolute;top:0;right:0;width:40%;height:100%;background-image:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.9)), color-stop(rgba(0, 0, 0, 0.8)), color-stop(rgba(0, 0, 0, 0.5)), to(transparent));background-image:linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5), transparent)}.cty-video__rate-list-item{display:block;width:112px;min-height:50px;background-color:transparent;outline:none;border:none;color:var(--cty-color-white);font-size:var(--cty-font-size-base);text-align:center}.cty-video__rate-list-item.active{color:var(--cty-video-rate-active-color)}.cty-video__interactive{display:none;z-index:101;background-color:transparent;background-size:100% 100%;background-repeat:no-repeat}:host(.cty-video__vertical) cty-loading{--cty-loading-transform:rotate(0deg)}:host(.cty-video__vertical) .cty-video__player{top:50%;width:var(--cty-video-width);height:auto;max-height:100%;-webkit-transform:rotate(0deg) translateY(-50%);transform:rotate(0deg) translateY(-50%)}:host(.cty-video__vertical) .cty-video__toggle-play cty-icon{-webkit-transform:rotate(0deg);transform:rotate(0deg)}:host(.cty-video__vertical) .cty-video__toast{left:50%;top:80%;margin:0;-webkit-transform:rotate(0deg) translateX(-50%);transform:rotate(0deg) translateX(-50%)}:host(.cty-video__vertical) .cty-video__header{width:calc(var(--cty-video-width) - var(--cty-video-header-padding-start) - var(--cty-video-header-padding-end));-webkit-transform:rotate(0deg);transform:rotate(0deg)}:host(.cty-video__vertical) .cty-video__opn-panel{width:var(--cty-video-width);height:calc(var(--cty-video-height) - var(--cty-video-header-height) - var(--cty-video-footer-height) - var(--cty-video-header-padding-top) - var(--cty-video-header-padding-bottom));margin:calc((var(--cty-video-footer-height) - var(--cty-video-header-height) - var(--cty-video-header-padding-top) - var(--cty-video-header-padding-bottom)) / -2) 0 0;-webkit-transform:translate(-50%, -50%) rotate(0);transform:translate(-50%, -50%) rotate(0)}:host(.cty-video__vertical) .cty-video__opn-toast{top:50%;-webkit-transform:translate(-50%, 0) rotate(0deg);transform:translate(-50%, 0) rotate(0deg)}:host(.cty-video__vertical) .cty-video__footer{width:var(--cty-video-width);-webkit-transform:rotate(0);transform:rotate(0);top:auto;bottom:0}:host(.cty-video__vertical) .cty-video__footer-progress__top{padding:var(--cty-video-progress-vertical-padding)}:host(.cty-video__vertical) .cty-video__time{font-size:var(--cty-font-size-small)}:host(.cty-video__vertical) .cty-video__footer-time-label{margin-left:0}:host(.cty-video__vertical) .cty-video__rate{width:var(--cty-video-width);height:var(--cty-video-height);-webkit-transform:rotate(0deg);transform:rotate(0deg)}:host(.cty-video__vertical) .cty-video__dot-panel{margin-left:0;-webkit-transform:rotate(0deg);transform:rotate(0deg);bottom:calc(var(--footer-height) + 13px)}:host(.cty-video__vertical) .cty-video__dot-panel-ex{bottom:var(--footer-height)}:host(.cty-video__unfullscreen){height:var(--cty-video-half-screen-height)}:host(.cty-video__unfullscreen) .cty-video__wrapper{background-color:var(--cty-color-black)}:host(.cty-video__unfullscreen) .cty-video__player{top:0;height:var(--cty-video-half-screen-height);max-height:initial;-webkit-transform:rotate(0deg);transform:rotate(0deg)}:host(.cty-video__unfullscreen) .cty-video__toggle-play{width:var(--cty-video-unfullscreen-play-size);height:var(--cty-video-unfullscreen-play-size);margin:calc(var(--cty-video-unfullscreen-play-size) / -2) 0px 0px calc(var(--cty-video-unfullscreen-play-size) / -2);border:var(--cty-video-unfullscreen-play-border)}:host(.cty-video__unfullscreen) .cty-video__toggle-play cty-icon{font-size:var(--cty-video-unfullscreen-play-icon-size)}:host(.cty-video__unfullscreen) .cty-video__header{height:var(--cty-video-header-unfullscreen-height);background:var(--cty-video-header-unfullscreen-background)}:host(.cty-video__unfullscreen) .cty-video__title{line-height:var(--cty-video-header-unfullscreen-height)}:host(.cty-video__unfullscreen) .cty-video__header-back ion-button{width:30px;height:100%}:host(.cty-video__unfullscreen) .cty-video__footer{height:var(--cty-video-footer-unfullscreen-height);background:var(--cty-video-footer-unfullscreen-background)}:host(.cty-video__unfullscreen) .cty-video__footer ion-row{height:calc(var(--cty-video-footer-unfullscreen-height) - var(--cty-video-footer-progress-height))}:host(.cty-video__unfullscreen) .cty-video__footer .cty-video__footer-progress__top{height:var(--cty-video-footer-progress-height)}:host(.cty-video__unfullscreen) .cty-video__footer ion-button{--padding-start:8px;--padding-end:8px}:host(.cty-video__unfullscreen) .cty-video__footer-fullscreen ion-button{--padding-start:0px}:host(.cty-video__unfullscreen) .cty-video__opn-panel{height:calc(var(--cty-video-half-screen-height) - var(--cty-video-header-unfullscreen-height) - var(--cty-video-footer-unfullscreen-height) - var(--cty-video-header-padding-top) - var(--cty-video-header-padding-bottom))}:host(.cty-video__unfullscreen) .cty-video__opn-toast{top:40%;height:30px}:host(.cty-video__unfullscreen) .cty-video__toast{top:70%}:host(.cty-video__unfullscreen) cty-loading{--cty-loading-overlay-height:var(--cty-video-half-screen-height)}:host(.cty-video__large-screen) .cty-video__player{width:auto;max-width:100%;height:100%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}";
+const CtyVideoStyle0 = videoCss;
+
+const Video = /*@__PURE__*/ proxyCustomElement(class Video extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.ctyDismiss = createEvent(this, "ctyDismiss", 7);
+        this.ctyVideoCanplay = createEvent(this, "ctyVideoCanplay", 7);
+        this.ctyVideoTimeupdate = createEvent(this, "ctyVideoTimeupdate", 7);
+        this.ctyVideoPlaying = createEvent(this, "ctyVideoPlaying", 7);
+        this.ctyVideoPlay = createEvent(this, "ctyVideoPlay", 7);
+        this.ctyVideoPause = createEvent(this, "ctyVideoPause", 7);
+        this.ctyVideoStalled = createEvent(this, "ctyVideoStalled", 7);
+        this.ctyVideoWaiting = createEvent(this, "ctyVideoWaiting", 7);
+        this.ctyVideoEnded = createEvent(this, "ctyVideoEnded", 7);
+        this.ctyVideoError = createEvent(this, "ctyVideoError", 7);
+        this.ctyVideoChangeVolume = createEvent(this, "ctyVideoChangeVolume", 7);
+        this.ctyVideoProgress = createEvent(this, "ctyVideoProgress", 7);
+        this.ctyVideoScreenChange = createEvent(this, "ctyVideoScreenChange", 7);
+        this.ctyVideoIAEnter = createEvent(this, "ctyVideoIAEnter", 7);
+        this.ctyVideoIAAction = createEvent(this, "ctyVideoIAAction", 7);
+        this.ctyVideoCtrlChange = createEvent(this, "ctyVideoCtrlChange", 7);
+        this.ctyVideoRateChange = createEvent(this, "ctyVideoRateChange", 7);
+        this.touchState = {
+            isTouching: false,
+            right: 0,
+            height: 0,
+            top: 0,
+            bottom: 0,
+            currentY: 0
+        };
+        this.isMoving = false; /*有没有移动*/
+        this.opnStartTime = 0; // 开始滑动时间
+        this.opnMoveTime = 0; // 正在滑动时间
+        this.opnLx = 0; // x向滑动开始位置
+        this.opnLy = 0; // y向滑动开始位置
+        this.opnNx = 0; // x向滑动时位置
+        this.opnNy = 0; // y向滑动时位置
+        this.isMouseMove = false; /*鼠标可以移动*/
+        this.isMicroMessager = deviceInfo.isMicroMessager; // 公众号
+        this.isPC = deviceInfo.isPC; // 桌面设备
+        this.isIOS = deviceInfo.isIos; // 是不是IOS
+        this.isIpad = deviceInfo.isIpad; // 是不是ipad
+        this.isWifi = network.isWifi; // 网络有没有wifi
+        this.isHybrid = deviceInfo.isHybrid; // 是不是Hybrid
+        this.lastTapScreenTime = Date.now(); // 判断是不是双击
+        this.footerPrgtime = 0; // 底部视频进度拖动控制时间（类似节流作用）
+        this._curIsFullscreen = true; // 视频当前是否是全屏
+        this.showInteractiveLayer = false;
+        this.interactiving_action = null;
+        this.ctrlTimer = 0;
+        this.warningMsgTimer = 0;
+        this.touchMoveTimer = 0;
+        this._rates = [];
+        this.markerList = [];
+        this.isRealWaiting = true;
+        this.isSeeking = false;
+        this.canScreenOrientation = false; //能不能旋转
+        this._doCanplay = () => {
+            setTimeout(() => {
+                this.showTogglePlay = true;
+            }, this.togglePlayTimer);
+            if (this.isLoading) {
+                this.videoEl.style.display = 'block';
+            }
+            if ((!this.isWifi || this.isMicroMessager || !this.autoplay || !this.loading) && this.isLoading) {
+                this.isLoading = false;
+            }
+            this.durationLabel = secondsToVehicle(this.videoEl.duration);
+            this.ctyVideoCanplay.emit();
+            this.markerList = this.markers.map((item) => {
+                return Object.assign(Object.assign({}, item), { position: +(item.breakpoint / this.videoEl.duration * 100).toFixed(3) });
+            });
+        };
+        this._doTimeupdate = () => {
+            const currTime = this.videoEl.currentTime;
+            // if is android,
+            if (!this.isPlaying && currTime > 0) {
+                if (this.isLoading) {
+                    this.isLoading = false;
+                }
+                if (!this.videoEl.paused) {
+                    this.isPlaying = true;
+                }
+            }
+            if (!this.touchState.isTouching) {
+                // 正在拖改进度时不更新,以防同时修改的冲突
+                this._updateVideoProgress();
+                // 检查交互式
+                this.interactiveCheck(currTime);
+            }
+            this.ctyVideoTimeupdate.emit(currTime);
+        };
+        this._doPlay = () => {
+            this.ctyVideoPlay.emit();
+        };
+        this._doPause = () => {
+            this.isPlaying = false;
+            this.ctyVideoPause.emit();
+        };
+        this._doEnded = () => {
+            this.isPlaying = false;
+            this._updateVideoProgress();
+            this.interactiveReset();
+            this.ctyVideoEnded.emit();
+        };
+        this._doPlaying = () => {
+            if (!isPlatform('android')) {
+                if (this.isLoading) {
+                    this.isLoading = false;
+                }
+                // IOS调些表明已开始播放, Android则还没有.
+                this.isPlaying = true;
+            }
+            this.ctyVideoPlaying.emit();
+        };
+        this._doChangeVolume = () => {
+            this.playVolume = Math.round(this.videoEl.volume * 100);
+            this.ctyVideoChangeVolume.emit();
+        };
+        this._doError = () => {
+            if (!this.isLoading && this.showVideoError) {
+                this.warningMsg = this.errorMsg;
+                this.clearWarningMsg();
+                this.ctyVideoError.emit(true);
+                return;
+            }
+            if (this.isLoading) {
+                this.isLoading = false;
+                this.showTogglePlay = true;
+            }
+            this.ctyVideoError.emit(false);
+        };
+        this._doStalled = () => {
+            this.ctyVideoStalled.emit();
+        };
+        this._doWaiting = () => {
+            if (this.isRealWaiting && !this.isSeeking) {
+                this.ctyVideoWaiting.emit(this.videoEl.currentTime);
+            }
+        };
+        this._doSeeked = () => {
+            if (this.isSeeking = false) {
+                this.isRealWaiting = true;
+            }
+        };
+        this._dismiss = () => {
+            if (!this.fullscreenOnly && this.curIsFullscreen) {
+                this.curIsFullscreen = false;
+                if (this.isHybrid) {
+                    statusBar.toggleStatusBar(true);
+                }
+                if (this.canScreenOrientation) {
+                    screenOrientation.lock('portrait').catch(() => { });
+                }
+                this.ctyDismiss.emit(false);
+                return;
+            }
+            if (!this.videoEl.paused) {
+                // 播放状态按回退,先暂停
+                this.pause();
+                this.ctyDismiss.emit(false);
+                return;
+            }
+            if (this.isHybrid) {
+                statusBar.toggleStatusBar(true);
+            }
+            if (this.canScreenOrientation) {
+                if (this.landscapeLeaveTimer > 0) {
+                    setTimeout(() => {
+                        screenOrientation.lock('portrait').catch(() => { });
+                    }, this.landscapeLeaveTimer);
+                }
+                else {
+                    screenOrientation.lock('portrait').catch(() => { });
+                }
+            }
+            this.ctyDismiss.emit(true);
+        };
+        this._doSetRate = () => {
+            if (!this.allowForward) {
+                this.warningMsg = this.unAllowRateMsg;
+                this.clearWarningMsg();
+                return;
+            }
+            if (this.direction != 'L' || this.directRate) {
+                let nIndex = this.rates.findIndex(p => p == this.rate) + 1;
+                if (nIndex == this.rates.length) {
+                    nIndex = 0;
+                }
+                this.setPlayRate(this.rates[nIndex]);
+                return;
+            }
+            this.showCtrl = false;
+            this.showPlayRate = true;
+            this._resetDot();
+            this.ctyVideoCtrlChange.emit(this.showCtrl);
+        };
+        this._toggleFullScreen = (fullscreen) => {
+            this.curIsFullscreen = fullscreen;
+            if (this.isHybrid) {
+                statusBar.toggleStatusBar(!fullscreen);
+            }
+            if (this.canScreenOrientation) {
+                screenOrientation.lock(fullscreen ? 'landscape' : 'portrait').catch(() => { });
+            }
+            this.ctyVideoScreenChange.emit(fullscreen);
+        };
+        this._doPrgTouchstart = (event) => {
+            var _a;
+            if (event.type == 'mousedown') {
+                this.isMouseMove = true;
+            }
+            this.isRealWaiting = false;
+            if ((!this.allowForward && !this.allowBackward) || ((_a = event.touches) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+                return true;
+            }
+            this.isSeeking = true;
+            const currect = getElementRect(event.currentTarget);
+            this.touchState.top = currect.top; // custom slider 的启始位置
+            this.touchState.height = currect.bottom - this.touchState.top; // custom slider的高度
+            this.touchState.right = currect.right;
+            this.touchState.bottom = currect.bottom;
+            this.touchState.isTouching = true;
+            // 屏幕旋转
+            if (this.deviceIsPORTRAIT) {
+                this.touchState.top = currect.left; // custom slider 的启始位置
+                this.touchState.height = currect.right - this.touchState.top; // custom slider的高度
+                this.touchState.right = currect.bottom;
+                this.touchState.bottom = currect.right;
+            }
+            this.touchState.currentY = this._getPoint(event).x;
+            // 记录最大播放位置
+            this.maxPlayProgress = Math.max(this.playProgress, this.maxPlayProgress);
+            // 更新位置
+            this._changeProgressByTouch();
+            // 每次拖放延迟6秒隐藏状态栏.
+            this.clearCtrlTimeout();
+            return true;
+        };
+        this._doPrgTouchmove = (event) => {
+            var _a;
+            if (!this.isMouseMove && event.type == 'mousemove') {
+                return;
+            }
+            if (((_a = event.touches) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+                return true;
+            }
+            // 50ms 处理一次
+            const now = Date.now();
+            if (this.footerPrgtime + 50 > now) {
+                return true;
+            }
+            this.footerPrgtime = now;
+            const curY = this._getPoint(event).x;
+            const deltaY = (Math.abs(curY - this.touchState.currentY) * 100) / this.touchState.height;
+            this.touchState.currentY = curY;
+            if ((deltaY > 1 || event.type == 'mousemove')) {
+                this._changeProgressByTouch(this.updateNow);
+            }
+            return true;
+        };
+        this._doPrgTouchend = (event) => {
+            if (event.type == 'mouseleave' && !this.isMouseMove) {
+                return;
+            }
+            if (event.type == 'mouseup' || event.type == 'mouseleave') {
+                this.isMouseMove = false;
+            }
+            if (this.touchState.isTouching) {
+                this._changeProgressByTouch();
+            }
+            this.touchState.isTouching = false;
+            this.isSeeking = false;
+            return true;
+        };
+        this._doOpnStart = (event) => {
+            if (event.type == 'mousedown') {
+                this.isMouseMove = true;
+            }
+            this.isSeeking = true;
+            this.isRealWaiting = false;
+            const currect = getElementRect(event.currentTarget);
+            this.touchState.top = currect.top; // custom slider 的启始位置
+            this.touchState.height = currect.bottom - this.touchState.top; // custom slider的高度
+            this.touchState.right = currect.right;
+            this.touchState.bottom = currect.bottom;
+            this.touchState.isTouching = true;
+            if (this.deviceIsPORTRAIT) {
+                this.touchState.top = currect.left; // custom slider 的启始位置
+                this.touchState.height = currect.right - this.touchState.top; // custom slider的高度
+                this.touchState.right = currect.bottom;
+                this.touchState.bottom = currect.right;
+            }
+            const { x, y } = this._getPoint(event);
+            this.opnLx = x;
+            this.opnLy = y;
+            // 记录最大播放位置
+            this.maxPlayProgress = Math.max(this.playProgress, this.maxPlayProgress);
+            this.opnStartTime = new Date().getTime();
+            return true;
+        };
+        this._doOpnMove = (event) => {
+            if (!this.isMouseMove && event.type == 'mousemove') {
+                return;
+            }
+            if (this.opnMoveTime === 0) {
+                this.opnMoveTime = new Date().getTime();
+            }
+            if (this.opnMoveTime - this.opnStartTime < 1500) {
+                this.showCtrl = true;
+                this.clearCtrlTimeout();
+                this.isMoving = true;
+                const { x, y } = this._getPoint(event);
+                this.opnNx = x;
+                this.opnNy = y;
+                if (!this.controlType) {
+                    if (Math.abs(this.opnNx - this.opnLx) >= Math.abs(this.opnNy - this.opnLy)) {
+                        this.controlType = 'P';
+                        this.controlLabel = this.currentTimeLabel;
+                    }
+                    else {
+                        if (!this.isIOS) {
+                            if (this.opnLx > this.touchState.height * 0.5) {
+                                this.controlType = 'V';
+                                this.controlIcon = 'cty-volume-high';
+                                this.controlLabel = this.playVolume + '%';
+                            }
+                            else {
+                                this.controlType = 'B';
+                                this.controlIcon = 'cty-brightness';
+                                this.controlLabel = this.playBrightness + '%';
+                            }
+                        }
+                        else {
+                            this.controlType = 'B';
+                            this.controlIcon = 'cty-brightness';
+                            this.controlLabel = this.playBrightness + '%';
+                        }
+                    }
+                }
+                if (this.controlType == 'P') {
+                    this.controlIcon = this.opnNx - this.opnLx > 0 ? 'cty-forward' : 'cty-backward';
+                }
+                switch (this.controlType) {
+                    case 'B':
+                        if ((this.opnNy - this.opnLy < 0 && !this.deviceIsPORTRAIT) || (this.opnNy - this.opnLy > 0 && this.deviceIsPORTRAIT)) {
+                            this.playBrightness -= 2;
+                            this.playBrightness = Math.max(this.playBrightness, 0);
+                            if (this.updateNow) {
+                                this._updateBrightness();
+                            }
+                        }
+                        else if ((this.opnNy - this.opnLy > 0 && !this.deviceIsPORTRAIT) || (this.opnNy - this.opnLy < 0 && this.deviceIsPORTRAIT)) {
+                            this.playBrightness += 2;
+                            this.playBrightness = Math.min(this.playBrightness, 100);
+                            if (this.updateNow) {
+                                this._updateBrightness();
+                            }
+                        }
+                        this.controlLabel = this.playBrightness + '%';
+                        break;
+                    case 'V':
+                        if ((this.opnNy - this.opnLy < 0 && !this.deviceIsPORTRAIT) || (this.opnNy - this.opnLy > 0 && this.deviceIsPORTRAIT)) {
+                            this.playVolume -= 2;
+                            this.playVolume = Math.max(this.playVolume, 0);
+                            if (this.updateNow) {
+                                this._updateVolume();
+                            }
+                        }
+                        else if ((this.opnNy - this.opnLy > 0 && !this.deviceIsPORTRAIT) || (this.opnNy - this.opnLy < 0 && this.deviceIsPORTRAIT)) {
+                            this.playVolume += 2;
+                            this.playVolume = Math.min(this.playVolume, 100);
+                            if (this.updateNow) {
+                                this._updateVolume();
+                            }
+                        }
+                        this.controlLabel = this.playVolume + '%';
+                        break;
+                    case 'P':
+                        if (this.opnNx - this.opnLx > 0) {
+                            if (!this.allowForward && this.playProgress >= this.maxPlayProgress) {
+                                this.isMoving = false;
+                                this.unAllowForward();
+                                // 禁止拖放到曾经的最大播放记录
+                                return;
+                            }
+                            this.playProgress += 1;
+                            this.playProgress = Math.min(this.playProgress, 1000);
+                            if (this.updateNow) {
+                                this.videoEl.currentTime = (this.playProgress / 1000.0) * this.videoEl.duration;
+                                this._updateVideoProgress();
+                            }
+                            this.controlLabel = secondsToVehicle((this.playProgress / 1000.0) * this.videoEl.duration);
+                        }
+                        else if (this.opnNx - this.opnLx < 0) {
+                            this.playProgress -= 1;
+                            this.playProgress = Math.max(0, this.playProgress);
+                            if (this.updateNow) {
+                                this.videoEl.currentTime = (this.playProgress / 1000.0) * this.videoEl.duration;
+                                this._updateVideoProgress();
+                            }
+                            this.controlLabel = secondsToVehicle((this.playProgress / 1000.0) * this.videoEl.duration);
+                        }
+                        else {
+                            this.interactiveReset();
+                        }
+                        break;
+                }
+                this.lastControlType = this.controlType;
+                this.opnLx = this.opnNx;
+                this.opnLy = this.opnNy;
+            }
+        };
+        this._doOpnEnd = (event) => {
+            if (event.type == 'mouseleave' && !this.isMouseMove) {
+                return;
+            }
+            if (event.type == 'mouseup' || event.type == 'mouseleave') {
+                this.isMouseMove = false;
+            }
+            if (!this.isMoving) {
+                this.showCtrl = !this.showCtrl;
+                this.ctyVideoCtrlChange.emit(this.showCtrl);
+                this._resetDot();
+                const curdt = Date.now();
+                if (curdt - this.lastTapScreenTime < 400) { // 双击
+                    this.lastTapScreenTime = this.lastTapScreenTime - 1000; // 没有三击, 防止双击被同时触发多次, 比如用户三击,四击
+                    this.toggleVideo(null); // 暂停或开始
+                }
+                else {
+                    this.lastTapScreenTime = curdt;
+                }
+            }
+            if (!this.updateNow) {
+                switch (this.controlType) {
+                    case 'B':
+                        this._updateBrightness();
+                        break;
+                    case 'V':
+                        this._updateVolume();
+                        break;
+                    case 'P':
+                        this.videoEl.currentTime = (this.playProgress / 1000.0) * this.videoEl.duration;
+                        this._updateVideoProgress();
+                        break;
+                }
+            }
+            this.controlType = '';
+            this.clearCtrlTimeout();
+            this.touchState.isTouching = false;
+            this.opnMoveTime = 0;
+            this._clearTouchMoveToast();
+            this.isSeeking = false;
+        };
+        this._doDot = (e, item) => {
+            e.stopPropagation();
+            this.clearCtrlTimeout();
+            if (this.currentMarker.breakpoint > 0 && item.breakpoint == this.currentMarker.breakpoint) {
+                this.setVideoCurrentTime(this.currentMarker.breakpoint, () => {
+                    this._resetDot();
+                    this.play();
+                });
+                return;
+            }
+            this.showDotPanel = true;
+            this.currentMarker = item;
+            const currect = getElementRect(e.target);
+            const top = currect.top + currect.height / 2;
+            const left = currect.left + currect.width / 2;
+            this.reallyShowDot = false;
+            window.setTimeout(() => {
+                const dotPanelEl = this.dotPanelEl;
+                const parentH = dotPanelEl.parentNode.offsetHeight;
+                const parentW = dotPanelEl.parentNode.offsetWidth;
+                const dotPanelW = dotPanelEl.offsetWidth;
+                const triangle = dotPanelEl.children[dotPanelEl.children.length - 1];
+                const dotTop = (top - triangle.offsetLeft - triangle.offsetWidth / 2 + this.triangleMargin);
+                const dotLeft = (left - triangle.offsetLeft - triangle.offsetWidth / 2 + this.triangleMargin);
+                this.dotDotPanelTop = dotTop + 'px';
+                this.dotDotPanelLeft = dotLeft + 'px';
+                const maxTop = parentH - dotPanelW - 20; // 20是与右边的间距
+                const maxLeft = parentW - dotPanelW - 20; //20是与右边的间距
+                if (this.canScreenOrientation) {
+                    if (dotLeft > maxLeft) {
+                        this.triangleMargin = dotLeft - maxLeft;
+                        this.dotDotPanelLeft = maxLeft + 'px';
+                    }
+                    else if (dotLeft < 5) {
+                        this.triangleMargin = dotLeft - 5;
+                        this.dotDotPanelLeft = '5px';
+                    }
+                    else {
+                        this.triangleMargin = 0;
+                    }
+                    this.dotDotPanelTop = 'auto';
+                }
+                else {
+                    if (dotTop > maxTop) {
+                        this.triangleMargin = dotTop - maxTop;
+                        this.dotDotPanelTop = maxTop + 'px';
+                    }
+                    else if (dotTop < 5) {
+                        this.triangleMargin = dotTop - 5;
+                        this.dotDotPanelTop = '5px';
+                    }
+                    else {
+                        this.triangleMargin = 0;
+                    }
+                    this.dotDotPanelLeft = 'auto';
+                }
+                window.setTimeout(() => {
+                    this.reallyShowDot = true;
+                }, 10);
+            }, 100);
+        };
+        this._toPoint = () => {
+            this.clearCtrlTimeout();
+            this.setVideoCurrentTime(this.currentMarker.breakpoint, () => {
+                this._resetDot();
+                this.play();
+            });
+        };
+        this.url = '';
+        this.poster = `${config.get('resUrlPrefix', '')}assets/cty_res/img/poster.jpg`;
+        this.startTime = 0;
+        this.preload = 'metadata';
+        this.allowForward = true;
+        this.allowBackward = true;
+        this.unAllowForwardMsg = '首次学习不允许快进哦~';
+        this.unAllowRateMsg = '首次学习不允许设置播放倍速';
+        this.trafficMsg = '当前是非WIFI网络, 可能消耗流量, 点击继续~';
+        this.errorMsg = '视频播放异常或网络故障, 请稍后重试。';
+        this.orientation = true;
+        this.autoplay = true;
+        this.trafficAutoplay = false;
+        this.fullscreenOnly = true;
+        this.defaultFullscreen = true;
+        this.fullscreenIcon = 'cty-fullscreen';
+        this.exitFullscreenIcon = 'cty-exit-fullscreen';
+        this.direction = 'L';
+        this.controls = true;
+        this.headerCtrl = true;
+        this.footerCtrl = true;
+        this.title = '';
+        this.rates = [.7, 1, 1.25, 1.5];
+        this.rate = 1;
+        this.directRate = false;
+        this.loading = false;
+        this.loadingImg = '';
+        this.updateNow = true;
+        this.markers = [];
+        this.landscapeEnterTimer = 20;
+        this.landscapeLeaveTimer = 420;
+        this.togglePlayTimer = 150;
+        this.progressPosition = 'center';
+        this.player = 'video';
+        this.interactiveActions = [];
+        this.playProgress = 0;
+        this.maxPlayProgress = 0;
+        this.currentTimeLabel = '00:00:00';
+        this.durationLabel = '00:00:00';
+        this.isPlaying = false;
+        this.isMute = false;
+        this.showCtrl = true;
+        this.showPlayRate = false;
+        this.showVideoError = true;
+        this.warningMsg = '';
+        this.isLoading = true;
+        this.showTogglePlay = false;
+        this.playVolume = 100;
+        this.playBrightness = 100;
+        this.controlIcon = '';
+        this.controlLabel = '';
+        this.controlType = '';
+        this.lastControlType = '';
+        this.hasInteractive = false;
+        this.currentMarker = {
+            description: '',
+            breakpoint: 0,
+            position: 0
+        };
+        this.showDotPanel = false;
+        this.dotDotPanelTop = 'auto';
+        this.dotDotPanelLeft = 'auto';
+        this.triangleMargin = 0;
+        this.reallyShowDot = false;
+        this.deviceIsPORTRAIT = false;
+    }
+    get curIsFullscreen() {
+        return this._curIsFullscreen;
+    }
+    set curIsFullscreen(val) {
+        this._curIsFullscreen = val;
+        this.deviceIsPORTRAIT = this.direction == 'P' || !val || this.isPC || this.isIpad || (this.canScreenOrientation && val);
+    }
+    async componentWillLoad() {
+        if (!this.isIOS && !this.isMicroMessager && volumeControl.isAvailable) {
+            try {
+                this.playVolume = await volumeControl.getVolume();
+                this.isMute = await volumeControl.isMuted();
+            }
+            catch (e) { }
+        }
+        if (!this.defaultFullscreen && !this.fullscreenOnly) {
+            this.curIsFullscreen = false;
+        }
+        let _rates = this.rates.map(p => p);
+        this._rates = _rates;
+        this.hasInteractive = Array.isArray(this.interactiveActions) && this.interactiveActions.length > 0;
+        this.interactiveReset();
+        this.showTogglePlay = !this.autoplay;
+    }
+    componentDidLoad() {
+        this.canScreenOrientation = this.orientation && this.direction == 'L' && this.isHybrid && isPlatform('mobile') && !this.isIpad;
+        this.deviceIsPORTRAIT = this.direction == 'P' || !this.curIsFullscreen || this.isPC || this.isIpad || this.canScreenOrientation;
+        if (this.canScreenOrientation && this.curIsFullscreen) {
+            if (this.landscapeEnterTimer > 0) {
+                setTimeout(() => {
+                    screenOrientation.lock('landscape').catch(() => { });
+                }, this.landscapeEnterTimer);
+            }
+            else {
+                screenOrientation.lock('landscape').catch(() => { });
+            }
+        }
+        else if (this.isHybrid && isPlatform('mobile')) {
+            screenOrientation.lock('portrait').catch(() => { });
+        }
+        if (+this.startTime > 0) {
+            this.videoEl.currentTime = Number(this.startTime);
+        }
+        this.videoEl.controls = false;
+        this.videoEl.playbackRate = this.rate;
+        if (this.isMicroMessager) {
+            window.setTimeout(() => {
+                this.isLoading = false;
+                this.showTogglePlay = true;
+                this.videoEl.style.display = 'block';
+            }, 2500);
+        }
+        else if (!this.isWifi) {
+            window.setTimeout(() => {
+                this.isLoading = false;
+                this.showTogglePlay = true;
+                this.videoEl.style.display = 'block';
+            }, 1500);
+        }
+        else if (+this.startTime > 0) {
+            this.videoEl.style.display = 'block';
+        }
+    }
+    disconnectedCallback() {
+        clearTimeout(this.ctrlTimer);
+        clearTimeout(this.warningMsgTimer);
+        clearTimeout(this.touchMoveTimer);
+    }
+    _getVolumeIconName() {
+        if (this.isMute) {
+            return volumeMuteOutline;
+        }
+        if (this.playVolume == 0) {
+            return volumeOffOutline;
+        }
+        else if (this.playVolume < 30) {
+            return volumeLowOutline;
+        }
+        else if (this.playVolume < 70) {
+            return volumeMediumOutline;
+        }
+        else {
+            return volumeHighOutline;
+        }
+    }
+    unAllowForward() {
+        this.warningMsg = this.unAllowForwardMsg;
+        this.clearWarningMsg();
+    }
+    async play() {
+        if (this.videoEl.paused) {
+            this.videoEl.play();
+        }
+        this.isPlaying = true;
+    }
+    async setCtrlShow(show = false) {
+        this.showCtrl = show;
+        this._resetDot();
+        this.ctyVideoCtrlChange.emit(show);
+    }
+    async pause() {
+        if (!this.videoEl.paused) {
+            this.videoEl.pause();
+        }
+        this.isPlaying = false;
+    }
+    async setVideoCurrentTime(curTime, cb) {
+        this.maxPlayProgress = Math.max(this.maxPlayProgress, this.playProgress);
+        const curMaxTIme = this.videoEl.duration * this.maxPlayProgress / 1000;
+        if (curTime > curMaxTIme && !this.allowForward) {
+            this.unAllowForward();
+            return;
+        }
+        this.videoEl.currentTime = curTime;
+        cb && cb();
+    }
+    _clearTouchMoveToast() {
+        clearTimeout(this.touchMoveTimer);
+        this.touchMoveTimer = window.setTimeout(() => {
+            this.isMoving = false;
+        }, 2000);
+    }
+    clearCtrlTimeout() {
+        if (this.showCtrl) {
+            clearTimeout(this.ctrlTimer);
+            this.ctrlTimer = window.setTimeout(() => {
+                this.showCtrl = false;
+                // 防未知异常, 未正常结束拖放
+                this.touchState.isTouching = false;
+                this._resetDot();
+                this.ctyVideoCtrlChange.emit(false);
+            }, 4000); // 4秒后自动隐藏Controls
+        }
+    }
+    clearWarningMsg() {
+        if (this.warningMsg != '') {
+            clearTimeout(this.warningMsgTimer);
+            this.warningMsgTimer = window.setTimeout(() => {
+                this.warningMsg = '';
+            }, 2000);
+        }
+    }
+    async toggleVideo(event) {
+        if (this.isLoading) {
+            return;
+        }
+        if (this.videoEl.paused) {
+            this.play();
+        }
+        else {
+            this.pause();
+        }
+        if (event) {
+            this.clearCtrlTimeout();
+            event.stopPropagation();
+        }
+    }
+    async toggleVolume() {
+        if (!this.isIOS && !this.isMicroMessager && volumeControl.isAvailable) {
+            try {
+                await volumeControl.toggleMute();
+                this.isMute = await volumeControl.isMuted();
+            }
+            catch (e) {
+                if (this.isMute) {
+                    volumeControl.setVolume(this.playVolume);
+                }
+                else {
+                    volumeControl.setVolume(0);
+                }
+                this.isMute = !this.isMute;
+            }
+        }
+        else {
+            this.videoEl.muted = !this.videoEl.muted;
+            this.isMute = this.videoEl.muted;
+        }
+        this.clearCtrlTimeout();
+    }
+    async setPlayRate(rate) {
+        this.rate = rate;
+        this.videoEl.playbackRate = this.rate;
+        this.showPlayRate = false;
+        this.ctyVideoRateChange.emit(rate);
+    }
+    _getPoint(event) {
+        const { x, y } = getEventPageCoords(event);
+        try {
+            // 屏幕旋转
+            if (this.deviceIsPORTRAIT) {
+                return { x: x, y: y };
+            }
+            return { x: y, y: x };
+        }
+        catch (e) {
+            return { x: 0, y: 0 };
+        }
+    }
+    _changeProgressByTouch(updateNow = true) {
+        if (!this.allowForward && !this.allowBackward) {
+            return;
+        } // 更新位置
+        const prg = Math.round(((this.touchState.currentY - this.touchState.top) / this.touchState.height) * 1000);
+        if (!this.allowBackward && prg < this.playProgress) {
+            return; // 不允许后退的使用场合一般不会有
+        }
+        if (!this.allowForward && prg > this.maxPlayProgress) {
+            this.unAllowForward();
+            // 禁止拖放到曾经的最大播放记录
+            return;
+        }
+        this.lastControlType = 'P';
+        this.isMoving = true;
+        if (this.playProgress > prg) {
+            this.controlIcon = 'play-back-outline';
+        }
+        else if (this.playProgress < prg) {
+            this.controlIcon = 'play-forward-outline';
+        }
+        this.playProgress = prg;
+        if (prg == 0) {
+            this.interactiveReset();
+            this.isMoving = false;
+        }
+        if (updateNow) {
+            this.videoEl.currentTime = (this.playProgress / 1000.0) * this.videoEl.duration;
+            this._updateVideoProgress();
+        }
+        else {
+            this.controlLabel = secondsToVehicle((this.playProgress / 1000.0) * this.videoEl.duration);
+        }
+        this._clearTouchMoveToast();
+    }
+    _updateVideoProgress() {
+        const currTime = this.videoEl.currentTime; //当前播放时间
+        const duration = this.videoEl.duration; //视频总时长
+        //百分比
+        this.playProgress = duration > 0 ? Math.round((currTime / duration) * 1000) : 0;
+        this.ctyVideoProgress.emit(this.playProgress / 10);
+        this.currentTimeLabel = secondsToVehicle(currTime);
+        this.durationLabel = secondsToVehicle(duration);
+        if (this.lastControlType == 'P') {
+            this.controlLabel = this.currentTimeLabel;
+        }
+    }
+    _updateBrightness() {
+        let backgroundColor = 'rgba(0,0,0, ' + (100 - this.playBrightness) / 1.6 / 100 + ')';
+        this.videoCtrlEl.style.backgroundColor = backgroundColor;
+    }
+    async _updateVolume() {
+        if (!this.isIOS && !this.isMicroMessager && volumeControl.isAvailable) {
+            try {
+                await volumeControl.setVolume(this.playVolume);
+                this.isMute = await volumeControl.isMuted();
+            }
+            catch (error) { }
+        }
+        else {
+            this.videoEl.volume = this.playVolume / 100.0;
+        }
+        this.videoEl.volume = this.playVolume / 100.0;
+        if (this.playVolume > 0 && this.isMute) {
+            this.toggleVolume();
+        }
+    }
+    _resetDot() {
+        this.showDotPanel = false;
+        this.currentMarker = {
+            description: '',
+            breakpoint: 0,
+            position: 0
+        };
+    }
+    getVideoElement() {
+        return Promise.resolve().then(() => {
+            return this.videoEl;
+        });
+    }
+    interactiveCheck(currentTime) {
+        var _a;
+        if (!this.hasInteractive || this.showInteractiveLayer) {
+            return;
+        }
+        for (const action of this.interactiveActions) {
+            if (this.checkActionTriggerCond(action, currentTime, 'play')) {
+                this.showInteractiveLayer = true;
+                this.interactiving_action = action;
+                action.status.entercount++;
+                for (const btn of action.buttons) {
+                    if (btn.type == 'optbtn') {
+                        btn.val = btn.defaultval;
+                    }
+                }
+                let isAutoAction = false;
+                if (((_a = action.autoactions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    for (const act of action.autoactions) {
+                        if (this.calcTriggerCond(this.interactiving_action, act.condtrigger)) {
+                            this.pause();
+                            this.doInteractiveAction(act);
+                            isAutoAction = true;
+                            break;
+                        }
+                    }
+                }
+                if (!isAutoAction && action.buttons.length > 0) {
+                    this.pause();
+                    this.showInteractiveActionUI(action);
+                }
+                break;
+            }
+        }
+    }
+    changeInteractiveAction(newaction) {
+        if (!this.hasInteractive && !this.showInteractiveLayer) {
+            return;
+        }
+        this.clearInteractiveActionUI();
+        this.interactiving_action = newaction;
+        newaction.status.entercount++;
+        for (let btn of newaction.buttons) {
+            if (btn.type == 'optbtn') {
+                btn.val = btn.defaultval;
+            }
+        }
+        this.showInteractiveActionUI(newaction);
+    }
+    checkActionTriggerCond(action, currentTime, triggerType) {
+        let playtrigger = action.playtrigger;
+        if (triggerType == 'play' && (currentTime < playtrigger.min || currentTime >= playtrigger.max)) {
+            return false;
+        }
+        // check condtrigger
+        if (this.calcTriggerCond(action, action.condtrigger)) {
+            return true;
+        }
+        return false;
+    }
+    calcTriggerCond(action, condtrigger) {
+        let ret = true;
+        for (let cond of condtrigger) {
+            let curval = true;
+            let condaction = null;
+            switch (cond.type) {
+                case 'entercount':
+                    condaction = this.findInteractiveAction(cond.actionid, action);
+                    if (condaction != null) {
+                        let entercnt = condaction.status.entercount;
+                        curval = entercnt >= cond.min && (entercnt < cond.max || cond.max == '');
+                    }
+                    break;
+                case 'optbtn':
+                    condaction = this.findInteractiveAction(cond.actionid, action);
+                    if (condaction != null) {
+                        for (let btn of condaction.buttons) {
+                            if (btn.type == 'optbtn' && btn.id == cond.btnid) {
+                                curval = btn.val == cond.val;
+                                break;
+                            }
+                        }
+                    }
+                    break;
+                case 'group':
+                    curval = this.calcTriggerCond(action, cond.subs);
+                    break;
+            }
+            if (cond.op == 'or') {
+                ret = ret || curval;
+            }
+            else {
+                ret = ret && curval;
+            }
+        }
+        return ret;
+    }
+    findInteractiveAction(actionid, curaction) {
+        if (actionid.trim() == '') {
+            return curaction;
+        }
+        for (let act of this.interactiveActions) {
+            if (act.id == actionid) {
+                return act;
+            }
+        }
+        return null;
+    }
+    interactiveAction(event) {
+        event.stopPropagation();
+        if (this.interactiving_action == null) {
+            return;
+        }
+        let imgW = this.interactiving_action.imgW;
+        let imgH = this.interactiving_action.imgH;
+        for (let btn of this.interactiving_action.buttons) {
+            let rect = { x: btn.x, y: btn.y, width: btn.w, height: btn.h };
+            if (this.interactiveClickHitCheck(event, rect, imgW, imgH)) {
+                switch (btn.type) {
+                    case 'optbtn':
+                        //选项Button, 暂只支持CheckBox, 将来可扩展
+                        btn.val = btn.val == 1 ? '0' : '1';
+                        this.refreshInteractiveActionBtnStatus(this.interactiving_action);
+                        break;
+                    /*交互新增内容*/
+                    case 'link':
+                    case 'input':
+                        this.doInteractiveAction(btn);
+                        break;
+                    case 'action':
+                    default:
+                        //动作Button, 打开Action或者定点播放
+                        for (let act of btn.actions) {
+                            if (this.calcTriggerCond(this.interactiving_action, act.condtrigger)) {
+                                this.doInteractiveAction(act);
+                                break;
+                            }
+                        }
+                        break;
+                }
+                break;
+            }
+        }
+    }
+    doInteractiveAction(act) {
+        if (act.type == 'action') {
+            //打开其他action
+            this.changeInteractiveAction(this.findInteractiveAction(act.actionid, this.interactiving_action));
+        }
+        else if (act.type == 'play') {
+            //关掉action, 开始播放
+            this.videoEl.currentTime = act.startTime;
+            this.play();
+            //关掉action
+            this.clearInteractiveActionUI();
+            window.setTimeout(() => {
+                this.interactiving_action = null;
+                this.hideInteractiveActionUI();
+            }, 100);
+        }
+        else if (act.type == 'link') {
+            if (!act.link) {
+                this.play();
+                //关掉action
+                this.clearInteractiveActionUI();
+                window.setTimeout(() => {
+                    this.interactiving_action = null;
+                    this.hideInteractiveActionUI();
+                }, 100);
+                return;
+            }
+            this.ctyVideoIAAction.emit(act);
+        }
+    }
+    interactiveClickHitCheck(e, targetRect, imgWidth, imgHeight) {
+        //e = e.srcEvent;
+        let canvasHeight = imgHeight;
+        let canvasWidth = imgWidth;
+        let interactDiv = this.interactiveEl;
+        let y = (targetRect.y * canvasHeight) / imgHeight;
+        let x = (targetRect.x * canvasWidth) / imgWidth;
+        let w = (targetRect.width * canvasWidth) / imgWidth;
+        let h = (targetRect.height * canvasHeight) / imgHeight;
+        const { x: cx, y: cy } = getEventClientCoords(e);
+        let sx = ((cx - interactDiv.offsetLeft) * canvasWidth) / interactDiv.clientWidth;
+        let sy = ((cy - interactDiv.offsetTop) * canvasHeight) / interactDiv.clientHeight;
+        if (sx >= x && sx <= x + w && sy >= y && sy <= y + h) {
+            return true;
+        }
+        return false;
+    }
+    showInteractiveActionUI(action) {
+        this.interactiveEl.style.display = 'block';
+        if (action.img != '') {
+            this.interactiveEl.style.backgroundImage = 'url(' + action.img + ')';
+        }
+        this.refreshInteractiveActionBtnStatus(action);
+        this.ctyVideoIAEnter.emit();
+    }
+    hideInteractiveActionUI() {
+        this.showInteractiveLayer = false;
+        this.clearInteractiveActionUI();
+        this.interactiveEl.style.display = 'none';
+    }
+    refreshInteractiveActionBtnStatus(action) {
+        let el = this.interactiveEl;
+        let html = '';
+        for (let btn of action.buttons) {
+            if (btn.type == 'optbtn') {
+                html += btn.htmls[btn.val] || '';
+            }
+        }
+        el.innerHTML = html;
+    }
+    clearInteractiveActionUI() {
+        this.interactiveEl.innerHTML = '';
+    }
+    interactiveReset() {
+        if (!this.hasInteractive) {
+            return;
+        }
+        this.showInteractiveLayer = false;
+        //重置所有action状态
+        for (let action of this.interactiveActions) {
+            action.status.entercount = 0;
+            for (let btn of action.buttons) {
+                if (btn.type == 'optbtn') {
+                    btn.val = btn.defaultval;
+                }
+            }
+        }
+    }
+    renderPlayer() {
+        return (h("div", { class: "cty-video__wrapper", "data-tap-disable": "true" }, h("video", { ref: (el) => (this.videoEl = el), class: "cty-video__player", poster: this.poster, preload: this.preload, "x5-video-player-type": "h5", "x5-video-player-fullscreen": "true", playsinline: true, "webkit-playsinline": true, autoplay: (this.isWifi || this.isMicroMessager || this.trafficAutoplay) && this.autoplay, onCanPlay: this._doCanplay, onTimeUpdate: this._doTimeupdate, onPlay: this._doPlay, onPause: this._doPause, onEnded: this._doEnded, onPlaying: this._doPlaying, onVolumeChange: this._doChangeVolume, onError: this._doError, onStalled: this._doStalled, onWaiting: this._doWaiting, onSeeked: this._doSeeked, src: this.url, typeof: "video/mp4" })));
+    }
+    renderControls() {
+        return (h("div", { class: "cty-video__controls", ref: (el) => (this.videoCtrlEl = el) }, h("slot", { name: "header" }), this.showCtrl && this.headerCtrl && (h("ion-grid", { class: "cty-video__header" }, h("ion-row", null, h("ion-col", { class: "flex-align-center cty-video__header-back" }, h("ion-button", { onClick: this._dismiss }, h("cty-icon", { name: chevronBackOutline }))), h("ion-col", { size: "6", class: "cty-video__title flex-align-center cty-ellipsis" }, this.title), h("ion-col", null, h("slot", { name: "headerCol" }))))), h("slot", { name: "footer" }), this.showCtrl && this.footerCtrl && (h("ion-grid", { class: {
+                'cty-video__footer': true,
+                'safe-area-bottom-border-color': this.direction == 'P' && this.curIsFullscreen
+            } }, this.progressPosition == 'top' && (h("ion-row", { class: "cty-video__footer-progress__top" }, h("ion-range", { mode: "ios", class: "cty-video__footer-range", debounce: "300", max: "1000", value: this.playProgress, disabled: "true", ticks: "false" }))), h("ion-row", null, h("ion-col", { class: {
+                'flex-align-center cty-video__footer-toggle-play': true,
+                'cty-video__footer-flex': this.progressPosition == 'top'
+            } }, h("ion-button", { onClick: (e) => { this.toggleVideo(e); } }, h("cty-icon", { name: this.isPlaying ? 'cty-pause' : 'cty-play' })), this.progressPosition == 'top' && (h("div", { class: "flex-align-center cty-video__footer-time-label" }, this.currentTimeLabel, h("span", null, "/"), this.durationLabel))), this.progressPosition == 'center' && (h("ion-col", { class: "cty-video__footer-progress flex-center" }, h("ion-range", { mode: "ios", class: "cty-video__footer-range", debounce: "300", max: "1000", value: this.playProgress, disabled: "true", ticks: "false" }, h("span", { class: 'cty-video__time', slot: "start" }, this.currentTimeLabel), h("span", { class: 'cty-video__time', slot: "end" }, this.durationLabel)))), this.curIsFullscreen && (h("ion-col", { class: "cty-video__footer-rate flex-align-center" }, h("ion-button", { onClick: this._doSetRate }, this.rate == 1 ? '倍速' : this.rate + "X"))), h("ion-col", { class: "cty-video__footer-volume flex-align-center" }, h("ion-button", { onClick: () => this.toggleVolume() }, h("cty-icon", { name: this._getVolumeIconName() }))), !this.fullscreenOnly && !this.curIsFullscreen && this.fullscreenIcon && (h("ion-col", { class: "cty-video__footer-fullscreen flex-align-center" }, h("ion-button", { onClick: () => this._toggleFullScreen(true) }, h("cty-icon", { name: this.fullscreenIcon })))), !this.fullscreenOnly && this.curIsFullscreen && this.exitFullscreenIcon && (h("ion-col", { class: "cty-video__footer-fullscreen flex-align-center" }, h("ion-button", { onClick: () => this._toggleFullScreen(false) }, h("cty-icon", { name: this.exitFullscreenIcon })))), h("slot", { name: "footerCol" })))), (this.allowForward || this.allowBackward) && this.showCtrl && this.footerCtrl && (h("ion-grid", { class: {
+                'cty-video__footer cty-video__footer-controls': true,
+                'safe-area-bottom-border-color': this.direction == 'P' && this.curIsFullscreen
+            } }, this.progressPosition == 'top' && (h("ion-row", { class: "cty-video__footer-progress__top", onClick: (event) => event.stopPropagation() }, !this.isPC && (h("div", { class: "cty-video__footer-bar", onTouchStart: this._doPrgTouchstart, onTouchMove: this._doPrgTouchmove, onTouchEnd: this._doPrgTouchend }, this.direction == 'L' && this.curIsFullscreen && (this.markerList.map((item) => (h("span", { onTouchStart: (event) => this._doDot(event, item), class: "cty-video__footer-dot", style: { left: item.position + '%' } })))))), this.isPC && (h("div", { class: "cty-video__footer-bar", onMouseDown: this._doPrgTouchstart, onMouseMove: this._doPrgTouchmove, onMouseUp: this._doPrgTouchend, onMouseLeave: this._doPrgTouchend }, this.direction == 'L' && this.curIsFullscreen && (this.markerList.map((item) => (h("span", { onTouchStart: (event) => this._doDot(event, item), class: "cty-video__footer-dot", style: { left: item.position + '%' } })))))))), h("ion-row", null, h("ion-col", { class: {
+                'flex-align-center cty-video__footer-toggle-play': true,
+                'cty-video__footer-flex': this.progressPosition == 'top'
+            } }, h("ion-button", { onClick: (e) => { this.toggleVideo(e); } }, h("cty-icon", { name: this.isPlaying ? 'cty-pause' : 'cty-play' })), this.progressPosition == 'top' && (h("div", { class: "flex-align-center cty-video__footer-time-label" }, this.currentTimeLabel, h("span", null, "/"), this.durationLabel))), this.progressPosition == 'center' && (h("ion-col", { class: "cty-video__footer-progress flex-center" }, h("span", { class: 'cty-video__time' }, this.currentTimeLabel), !this.isPC && (h("div", { class: "cty-video__footer-bar", onTouchStart: this._doPrgTouchstart, onTouchMove: this._doPrgTouchmove, onTouchEnd: this._doPrgTouchend }, this.direction == 'L' && this.curIsFullscreen && (this.markerList.map((item) => (h("span", { onTouchStart: (event) => this._doDot(event, item), class: "cty-video__footer-dot", style: { left: item.position + '%' } })))))), this.isPC && (h("div", { class: "cty-video__footer-bar", onMouseDown: this._doPrgTouchstart, onMouseMove: this._doPrgTouchmove, onMouseUp: this._doPrgTouchend, onMouseLeave: this._doPrgTouchend }, this.direction == 'L' && this.curIsFullscreen && (this.markerList.map((item) => (h("span", { onTouchStart: (event) => this._doDot(event, item), class: "cty-video__footer-dot", style: { left: item.position + '%' } })))))), h("span", { class: 'cty-video__time' }, this.durationLabel))), this.curIsFullscreen && (h("ion-col", { class: "cty-video__footer-rate flex-align-center" }, h("ion-button", { onClick: this._doSetRate }, this.rate == 1 ? '倍速' : this.rate + "X"))), h("ion-col", { class: "cty-video__footer-volume flex-align-center" }, h("ion-button", { onClick: () => this.toggleVolume() }, h("cty-icon", { name: this._getVolumeIconName() }))), !this.fullscreenOnly && !this.curIsFullscreen && this.fullscreenIcon && (h("ion-col", { class: "cty-video__footer-fullscreen flex-align-center" }, h("ion-button", { onClick: () => this._toggleFullScreen(true) }, h("cty-icon", { name: this.fullscreenIcon })))), !this.fullscreenOnly && this.curIsFullscreen && this.exitFullscreenIcon && (h("ion-col", { class: "cty-video__footer-fullscreen flex-align-center" }, h("ion-button", { onClick: () => this._toggleFullScreen(false) }, h("cty-icon", { name: this.exitFullscreenIcon })))), h("slot", { name: "footerCol" })))), this.isMoving && (h("div", { class: "cty-video__opn-toast flex-center" }, h("cty-icon", { name: this.controlIcon }), h("span", null, this.controlLabel))), h("slot", { name: "controls" }), !this.isPC && this.controls && (h("div", { class: "cty-video__opn-panel", onTouchStart: this._doOpnStart, onTouchMove: this._doOpnMove, onTouchEnd: this._doOpnEnd, onClick: (event) => event.stopPropagation() })), this.isPC && this.controls && (h("div", { class: "cty-video__opn-panel", onMouseDown: this._doOpnStart, onMouseMove: this._doOpnMove, onMouseUp: this._doOpnEnd, onMouseLeave: this._doOpnEnd, onClick: (event) => event.stopPropagation() })), this.showCtrl && this.showDotPanel && (h("div", { ref: (el) => { this.dotPanelEl = el; }, class: {
+                'cty-video__dot-panel flex-center': true,
+                'cty-video__dot-panel-ex': this.progressPosition == 'top'
+            }, onClick: (event) => event.stopPropagation(), style: { top: this.dotDotPanelTop, left: this.dotDotPanelLeft, opacity: this.reallyShowDot ? '1' : '0' } }, h("span", { class: "cty-video__dot-label cty-ellipsis2" }, this.currentMarker.description), h("ion-button", { onClick: this._toPoint }, h("cty-icon", { name: "cty-play-ex" }), "\u77E5\u8BC6\u70B9"), h("span", { class: "cty-video__dot-triangle", style: { 'margin-left': this.triangleMargin + 'px' } }))), h("slot", { name: "ctrl" })));
+    }
+    render() {
+        return (h(Host, { key: 'd229b03c503078d0d290df0792eb98d2651e1770', class: {
+                'cty-video': true,
+                'cty-video__vertical': this.deviceIsPORTRAIT,
+                'cty-video__unfullscreen': !this.curIsFullscreen,
+                'cty-video__large-screen': this.direction == 'P' && this.curIsFullscreen && (this.isPC || this.isIpad)
+            } }, this.renderPlayer(), this.renderControls(), (!this.isLoading || this.isMicroMessager) && !this.isPlaying && !this.showInteractiveLayer && this.showTogglePlay && (h("ion-button", { key: 'e1f609daf9d5135497cc1ba095b1d6c02f4232e0', class: "cty-video__toggle-play flex-center", onClick: (e) => { this.toggleVideo(e); } }, h("cty-icon", { key: '20d69b4ffc9ebbea85c9bea9fe206ee5912c97f0', name: "cty-play" }))), !this.isWifi && !this.isPlaying && !this.isLoading && !this.isMicroMessager && this.trafficMsg && (h("div", { key: '2cb30c6bad63a32af29be5cde3dd9f4956871de4', class: "cty-video__toast cty-ellipsis" }, this.trafficMsg)), this.warningMsg != '' && (h("div", { key: 'a8f0c02262f633def0545d13a31faea5cbd65217', class: "cty-video__toast cty-ellipsis" }, this.warningMsg)), this.showPlayRate && (h("div", { key: '3325cbfa03208441a78416d2c450f239240fb97e', class: "cty-video__rate", onClick: () => this.showPlayRate = false }, h("div", { key: 'dabace46247c330b38cf2e0ec31db75d209d165b', class: "cty-video__rate-mask flex-center-justify-end" }, h("div", { key: 'c81ce643743a92814257d5c1e61281c2a7f03cea', class: "cty-video__rate-list" }, this._rates.map((item) => (h("button", { onClick: () => this.setPlayRate(item), class: { active: this.rate == item, 'cty-video__rate-list-item': true } }, h("span", null, item, "X")))))))), this.hasInteractive && this.curIsFullscreen && (h("div", { key: '98a56f361728c99abba9f2782bdb2fed2e983464', class: "cty-video__player cty-video__interactive", onClick: () => { }, ref: (el) => this.interactiveEl = el }))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return this; }
+    static get style() { return CtyVideoStyle0; }
+}, [1, "cty-video", {
+        "url": [1],
+        "poster": [1],
+        "startTime": [8, "start-time"],
+        "preload": [1],
+        "allowForward": [4, "allow-forward"],
+        "allowBackward": [4, "allow-backward"],
+        "unAllowForwardMsg": [1, "un-allow-forward-msg"],
+        "unAllowRateMsg": [1, "un-allow-rate-msg"],
+        "trafficMsg": [1, "traffic-msg"],
+        "errorMsg": [1, "error-msg"],
+        "orientation": [4],
+        "autoplay": [4],
+        "trafficAutoplay": [4, "traffic-autoplay"],
+        "fullscreenOnly": [4, "fullscreen-only"],
+        "defaultFullscreen": [4, "default-fullscreen"],
+        "fullscreenIcon": [1, "fullscreen-icon"],
+        "exitFullscreenIcon": [1, "exit-fullscreen-icon"],
+        "direction": [1],
+        "controls": [4],
+        "headerCtrl": [4, "header-ctrl"],
+        "footerCtrl": [4, "footer-ctrl"],
+        "title": [1],
+        "rates": [16],
+        "rate": [1026],
+        "directRate": [4, "direct-rate"],
+        "loading": [1028],
+        "loadingImg": [1, "loading-img"],
+        "updateNow": [4, "update-now"],
+        "markers": [16],
+        "landscapeEnterTimer": [2, "landscape-enter-timer"],
+        "landscapeLeaveTimer": [2, "landscape-leave-timer"],
+        "togglePlayTimer": [2, "toggle-play-timer"],
+        "progressPosition": [1, "progress-position"],
+        "player": [1],
+        "interactiveActions": [16],
+        "playProgress": [32],
+        "maxPlayProgress": [32],
+        "currentTimeLabel": [32],
+        "durationLabel": [32],
+        "isPlaying": [32],
+        "isMute": [32],
+        "showCtrl": [32],
+        "showPlayRate": [32],
+        "showVideoError": [32],
+        "warningMsg": [32],
+        "isLoading": [32],
+        "showTogglePlay": [32],
+        "playVolume": [32],
+        "playBrightness": [32],
+        "controlIcon": [32],
+        "controlLabel": [32],
+        "controlType": [32],
+        "lastControlType": [32],
+        "hasInteractive": [32],
+        "currentMarker": [32],
+        "showDotPanel": [32],
+        "dotDotPanelTop": [32],
+        "dotDotPanelLeft": [32],
+        "triangleMargin": [32],
+        "reallyShowDot": [32],
+        "deviceIsPORTRAIT": [32],
+        "play": [64],
+        "setCtrlShow": [64],
+        "pause": [64],
+        "setVideoCurrentTime": [64],
+        "toggleVideo": [64],
+        "toggleVolume": [64],
+        "setPlayRate": [64],
+        "getVideoElement": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cty-video", "cty-icon", "ion-button", "ion-col", "ion-grid", "ion-icon", "ion-range", "ion-ripple-effect", "ion-row"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cty-video":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Video);
+            }
+            break;
+        case "cty-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "ion-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "ion-col":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ion-grid":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ion-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ion-range":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ion-ripple-effect":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ion-row":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const CtyVideo = Video;
+const defineCustomElement = defineCustomElement$1;
+
+export { CtyVideo, defineCustomElement };