xgplayer 2.32.5 → 2.32.6

package/es/plugins/mobile/index.css

@@ -0,0 +1,181 @@
+.xgplayer xg-thumbnail {
+  display: block;
+}
+
+.xgplayer xg-trigger {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.xgplayer xg-trigger .time-preview {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  width: 200px;
+  margin: 0 auto;
+  padding: 0 20px 30px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #fff;
+  text-shadow: 0 0 1px rgba(0, 0, 0, 0.54);
+  font-size: 17px;
+  text-align: center;
+  pointer-events: none;
+}
+
+.xgplayer xg-trigger .time-preview span {
+  line-height: 24px;
+}
+
+.xgplayer xg-trigger .time-preview span.xg-cur {
+  color: #FF0000;
+}
+
+.xgplayer xg-trigger .time-preview .xg-seek-show {
+  transform: translateX(-10px);
+}
+
+.xgplayer xg-trigger .time-preview .xg-seek-show.xg-back .xg-seek-pre {
+  transform: rotate(180deg) translateX(-5px);
+}
+
+.xgplayer xg-trigger .time-preview .xg-seek-show.hide-seek-icon .xg-seek-icon {
+  display: none;
+}
+
+.xgplayer xg-trigger .time-preview .xg-bar {
+  width: 96px;
+  height: 2px;
+  margin: 0 auto;
+  margin-top: 8px;
+  border-radius: 10px;
+  box-sizing: content-box;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.xgplayer xg-trigger .time-preview .xg-bar .xg-curbar {
+  width: 0;
+  height: 100%;
+  background-color: #FF0000;
+}
+
+.xgplayer xg-trigger .time-preview .xg-bar.hide {
+  display: none;
+}
+
+.xgplayer xg-trigger .mobile-thumbnail {
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.xgplayer xg-trigger .xg-top-note {
+  position: absolute;
+  height: 32px;
+  width: 135px;
+  top: 26px;
+  left: 50%;
+  margin-left: -78px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 100px;
+  color: #fff;
+}
+
+.xgplayer xg-trigger .xg-top-note span {
+  display: block;
+  font-size: 13px;
+  line-height: 32px;
+  height: 32px;
+  font-size: 13px;
+  text-align: center;
+}
+
+.xgplayer xg-trigger .xg-top-note i {
+  color: #FF0000;
+  margin: 0 5px;
+}
+
+.xgplayer xg-trigger .xg-playbackrate {
+  display: none;
+}
+
+.xgplayer xg-trigger[data-xg-action=seeking] .time-preview {
+  display: block;
+}
+
+.xgplayer xg-trigger[data-xg-action=playbackrate] .xg-playbackrate {
+  display: block;
+}
+
+.xgplayer .gradient {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  pointer-events: none;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.36) 20%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.24) 77%, rgba(0, 0, 0, 0.36) 83%, rgba(0, 0, 0, 0.6));
+}
+
+.xgplayer .gradient.top {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.36) 20%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 70%);
+}
+
+.xgplayer .gradient.bottom {
+  background-image: linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.24) 77%, rgba(0, 0, 0, 0.36) 83%, rgba(0, 0, 0, 0.6));
+}
+
+.xgplayer .gradient.none {
+  background-image: initial;
+}
+
+.xgplayer-mobile {
+  /**/
+}
+
+.xgplayer-mobile .xgplayer-controls {
+  background-image: initial;
+}
+
+.xgplayer-mobile.xgplayer-playing .gradient {
+  display: block;
+}
+
+.xgplayer-mobile.xgplayer-inactive .gradient {
+  background-image: initial;
+}
+
+.xgplayer-mobile .xgmask {
+  position: absolute;
+  height: 100%;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  width: 100%;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+@media (prefers-color-scheme: dark) {
+  .xgplayer-mobile xg-trigger .time-preview {
+    color: #fff;
+  }
+  .xgplayer-mobile xg-trigger .time-preview span.xg-cur {
+    color: #FF0000;
+  }
+  .xgplayer-mobile xg-trigger .time-preview .xg-bar {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+  .xgplayer-mobile xg-trigger .time-preview .xg-bar.xg-curbar {
+    background-color: #FF0000;
+  }
+}

package/es/plugins/mobile/index.d.ts

@@ -0,0 +1,125 @@
+export default MobilePlugin;
+export type IMobileConfig = {
+    [propName: string]: any;
+    index?: number;
+    disableGesture?: boolean;
+    gestureX?: boolean;
+    gestureY?: boolean;
+    gradient?: 'normal' | 'none' | 'top' | 'bottom';
+    isTouchingSeek?: boolean;
+    miniMoveStep?: number;
+    miniYPer?: number;
+    scopeL?: number;
+    scopeR?: number;
+    pressRate?: number;
+    darkness?: boolean;
+    maxDarkness?: number;
+    disableActive?: boolean;
+    disableTimeProgress?: boolean;
+    hideControlsActive?: boolean;
+    hideControlsEnd?: boolean;
+    moveDuration?: number;
+    closedbClick?: boolean;
+    disablePress?: boolean;
+    disableSeekIcon?: boolean;
+    focusVideoClick?: boolean;
+};
+declare class MobilePlugin extends Plugin {
+    /**
+     * @type IMobileConfig & { [propName: string]: any}
+     */
+    static get defaultConfig(): IMobileConfig & {
+        [propName: string]: any;
+    };
+    constructor(options: any);
+    /**
+     * @readonly
+     */
+    readonly pos: {
+        isStart: boolean;
+        x: number;
+        y: number;
+        time: number;
+        volume: number;
+        rate: number;
+        light: number;
+        width: number;
+        height: number;
+        scopeL: number;
+        scopeR: number;
+        scopeM1: number;
+        scopeM2: number;
+        scope: number;
+    };
+    /**
+     * @private
+     */
+    private timer;
+    get duration(): number;
+    get timeOffset(): number;
+    /**
+     * @private
+     * @returns {[propName: string]: any}
+     */
+    private registerIcons;
+    xgMask: HTMLElement;
+    touch: Touche;
+    registerThumbnail(): void;
+    thumbnail: any;
+    initCustomStyle(): void;
+    resetPos(time?: number): void;
+    changeAction(action: any): void;
+    getTouche(e: any): {
+        pageX: any;
+        pageY: any;
+    };
+    /**
+     * 校验具体的操作范围
+     * @param { number } x 方向位移
+     * @param { number } y 方向位移
+     * @param { number } diffx 方向位移差
+     * @param { number } diffy 方向位移差
+     * @param { any } pos 当前操作区域位置信息 包含{width, height}
+     * @return { number } scope 区域 0=>中间x方向滑动  1=>左侧上下滑动 2=>右侧上下滑动
+     */
+    checkScope(x: number, y: number, diffx: number, diffy: number, pos: any): number;
+    /**
+     * 根据位移和操作类型进行对应处理
+     * @param {number} diffx x方向位移差
+     * @param {number} diffy y方向位移差
+     * @param {number} scope scope 区域 0=>中间x方向滑动  1=>左侧上下滑动 2=>右侧上下滑动
+     * @param {number} width 总体宽度
+     * @param {number} height 总高度
+     */
+    executeMove(diffx: number, diffy: number, scope: number, width: number, height: number): void;
+    /**
+     * 结束手势操作
+     * @param {number} scope 当前手势类型 区域 0=>中间x方向滑动  1=>左侧上下滑动 2=>右侧上下滑动
+     * @param {number} lastScope 上一次手势类型
+     */
+    endLastMove(lastScope: number): void;
+    onTouchStart: (e: any) => void;
+    onTouchMove: (e: any) => void;
+    onTouchEnd: (e: any) => void;
+    checkIsRootTarget(e: any): any;
+    onRootTouchMove: (e: any) => void;
+    onRootTouchEnd: (e: any) => void;
+    sendUseAction(event: any): void;
+    clickHandler(e: any): void;
+    dbClickHandler(e: any): void;
+    onClick(e: any): void;
+    onDbClick(e: any): void;
+    onPress(e: any): void;
+    onPressEnd(e: any): void;
+    updateTime(percent: any): void;
+    updateVolume(percent: any): void;
+    updateBrightness(percent: any): void;
+    activeSeekNote(time: any, isForward?: boolean): void;
+    updateThumbnails(time: any): void;
+    switchPlayPause(): boolean;
+    disableGesture(): void;
+    enableGesture(): void;
+    render(): string;
+}
+import Plugin from "../../plugin";
+import Touche from "./touch";