veplayer-mp-wechat - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2-alpha.0

dist/behaviors/videoBehavior.js

@@ -62,10 +62,30 @@ "use strict";
         },
-        showPlayBtn: {
+        /**
+         * @description 起播之前是否显示中间播放按钮，只在起播之前生效
+         */
+        showCenterPlayBtn: {
             type: Boolean,
-            value: false
+            value: true
         },
-        showCenterPlayBtn: {
+        /**
+         * @description 起播之后播放按钮的位置
+         *   center: 居中;
+         *   bottom: 控制栏左侧
+         *   bottom-center: 底部居中（扩展态）
+         */
+        playBtnPosition: {
+            type: String,
+            value: 'center'
+        },
+        /**
+         * @description 播放过程中是否显示播放按钮，如果为false, 则播放过程中一直不展示播放按钮
+         */
+        showPlayBtn: {
             type: Boolean,
             value: true
         },
+        showMuteBtn: {
+            type: Boolean,
+            value: false
+        },
         enableProgressGesture: {
@@ -84,11 +104,3 @@ type: Boolean,
         poster: String,
-        showMuteBtn: {
-            type: Boolean,
-            value: false
-        },
         title: String,
-        playBtnPosition: {
-            type: String,
-            value: 'center'
-        },
         enablePlayGesture: {
@@ -95,0 +107,0 @@ type: Boolean,

dist/enums/events.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediaEvents = void 0;
+exports.ExtendsEvents = exports.MediaEvents = void 0;
 var MediaEvents;
@@ -21,1 +21,5 @@ (function (MediaEvents) {
 })(MediaEvents = exports.MediaEvents || (exports.MediaEvents = {}));
+var ExtendsEvents;
+(function (ExtendsEvents) {
+    ExtendsEvents["USER_ACTION"] = "useraction";
+})(ExtendsEvents = exports.ExtendsEvents || (exports.ExtendsEvents = {}));

dist/enums/index.js

@@ -17,3 +17,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlayerModes = void 0;
+exports.ControlsStateClass = exports.ControlsStates = exports.PlayerModes = void 0;
 __exportStar(require("./errorCode"), exports);
@@ -26,1 +26,13 @@ __exportStar(require("./events"), exports);
 })(PlayerModes = exports.PlayerModes || (exports.PlayerModes = {}));
+var ControlsStates;
+(function (ControlsStates) {
+    ControlsStates["FOCUS"] = "focus";
+    ControlsStates["BLUR"] = "blur";
+    ControlsStates["IMMERSE"] = "immerse";
+})(ControlsStates = exports.ControlsStates || (exports.ControlsStates = {}));
+var ControlsStateClass;
+(function (ControlsStateClass) {
+    ControlsStateClass["FOCUS"] = "xg-state-focus";
+    ControlsStateClass["BLUR"] = "xg-state-blur";
+    ControlsStateClass["IMMERSE"] = "xg-state-immerse";
+})(ControlsStateClass = exports.ControlsStateClass || (exports.ControlsStateClass = {}));

dist/index.js

@@ -58,2 +58,11 @@ "use strict";
             value: 10000
+        },
+        interactiveConfig: {
+            type: Object,
+            value: {
+                initState: "focus" /* ControlsStates.FOCUS */,
+                immersive: false,
+                delay: 3000,
+                playFocusDelay: 0, // 起播进入focus状态延迟
+            }
         }
@@ -89,2 +98,3 @@ },
         isFocus: true,
+        controlsState: '',
         customControls: false // 控制栏初始状态
@@ -156,2 +166,11 @@ },
             }
+        },
+        'controlsState': function () {
+            const { controlsState } = this.data;
+            const data = {
+                show: controlsState !== "blur" /* ControlsStates.BLUR */,
+                state: controlsState
+            };
+            this.media.emit(index_1.MediaEvents.CONTROLSTOGGLE, data);
+            this.triggerEvent(index_1.MediaEvents.CONTROLSTOGGLE, data);
         }
@@ -206,6 +225,7 @@ },
         ready() {
-            const { controls } = this.properties;
             this.updateStatusOfShowLoading();
             // console.log(`!!!!!Player${this.data.videoId} ready`, `controls:${controls}`, `data.controls:${this.data.controls}`)
-            !!controls && this.focusPlayer();
+            this.initControls();
+            const { controls, showCenterPlayBtn, showPlayBtn, playBtnPosition, interactiveConfig } = this.properties;
+            console.log('>>>ready', interactiveConfig);
         },
@@ -240,25 +260,44 @@ /**
         },
-        focusPlayer(needAutoHide = true) {
-            const { autoBlurTime, controls } = this.properties;
-            const { isFocus, videoId } = this.data;
+        initControls() {
+            const { customControls } = this.data;
+            if (!customControls) {
+                return;
+            }
+            const { initState, delay } = this.properties.interactiveConfig;
+            // !!controls && this.focusPlayer();
+            console.log('>>>initControls', initState);
+            this.switchControls(initState);
+        },
+        switchControls(state, needAutoHide = true) {
+            const { controlsState, customControls, videoId } = this.data;
+            if (!customControls) {
+                return;
+            }
+            const { delay, immersive } = this.properties.interactiveConfig;
+            console.log(`!!!!!switchControls ${videoId} focusPlayer`, `stateChange>> from: ${controlsState}: to :${state}, immersive:${immersive}`);
             if (this.fTimer) {
+                state;
                 clearTimeout(this.fTimer);
                 this.fTimer = null;
             }
-            // console.log(`!!!!!Player ${videoId} focusPlayer`, `isFocus:${isFocus}, controls:${controls}`)
-            needAutoHide && (this.fTimer = setTimeout(() => {
-                this.blurPlayer();
-            }, autoBlurTime));
-            !isFocus && this.setData({
-                isFocus: true
+            if (state === "focus" /* ControlsStates.FOCUS */) {
+                needAutoHide && (this.fTimer = setTimeout(() => {
+                    if (immersive) {
+                        this.switchControls("immerse" /* ControlsStates.IMMERSE */);
+                    }
+                    else {
+                        this.switchControls("blur" /* ControlsStates.BLUR */);
+                    }
+                }, delay));
+            }
+            state !== controlsState && this.setData({
+                controlsState: state,
+                isFocus: state !== "blur" /* ControlsStates.BLUR */,
             });
         },
+        focusPlayer(needAutoHide = true) {
+            this.switchControls("focus" /* ControlsStates.FOCUS */, needAutoHide);
+        },
         blurPlayer() {
-            const { isFocus, videoId } = this.data;
-            // console.log(`!!!!!Player${videoId} blurPlayer`, `isFocus:${isFocus}  controls:${this.properties.controls}`)
-            if (isFocus) {
-                this.setData({
-                    isFocus: false
-                });
-            }
+            this.switchControls("blur" /* ControlsStates.BLUR */);
         },
@@ -277,18 +316,32 @@ /**
         onTap(e) {
-            const { mode, loadedMeta, paused, isFocus, ended, videoId } = this.data;
-            const { controls, enablePlayGesture } = this.properties;
-            if (enablePlayGesture && mode === "portrait" /* PlayerModes.PORTRAIT */) {
-                if (loadedMeta) {
-                    if (paused || ended) {
-                        this.media.play();
-                    }
-                    else {
-                        this.media.pause();
-                    }
-                }
+            const { mode, loadedMeta, paused, isFocus, ended, videoId, customControls, controlsState } = this.data;
+            const { controls, enablePlayGesture, interactiveConfig } = this.properties;
+            if (!customControls) {
+                return;
             }
+            // if (enablePlayGesture && mode === PlayerModes.PORTRAIT) {
+            //   if (loadedMeta) {
+            //     if (paused || ended) {
+            //       this.media.play();
+            //     } else {
+            //       this.media.pause();
+            //     }
+            //   }
+            // }
             // console.log(`!!!!!Player${videoId} onTap`, `controls:${controls}, data.controls:${this.data.controls}, isFocus:${isFocus}`);
-            if (!isFocus && controls) {
-                this.focusPlayer();
+            let nextState = '';
+            if (!interactiveConfig.immerse) {
+                if (controlsState === "focus" /* ControlsStates.FOCUS */) {
+                    nextState = "blur" /* ControlsStates.BLUR */;
+                }
+                else {
+                    nextState = "focus" /* ControlsStates.FOCUS */;
+                }
             }
+            else {
+                if (controlsState === "immerse" /* ControlsStates.IMMERSE */) {
+                    nextState = "focus" /* ControlsStates.FOCUS */;
+                }
+            }
+            this.switchControls(nextState);
         },
@@ -329,3 +382,3 @@ onError(e) {
             const { firstPlay, videoId, isFocus } = this.data;
-            const { controls } = this.properties;
+            const { playFocusDelay } = this.properties.interactiveConfig;
             const obj = {
@@ -341,3 +394,13 @@ paused: false,
             // console.log(`!!!!!Player${videoId} onPlay`, `isFocus:${isFocus}, controls:${controls}, data.controls:${this.data.controls}`)
-            !!controls && this.focusPlayer();
+            if (playFocusDelay > 0 && !firstPlay) {
+                if (this._pTime) {
+                    clearTimeout(this._pTime);
+                }
+                this._pTime = setTimeout(() => {
+                    this.switchControls("focus" /* ControlsStates.FOCUS */);
+                }, playFocusDelay);
+            }
+            else {
+                this.switchControls("focus" /* ControlsStates.FOCUS */);
+            }
         },
@@ -414,3 +477,8 @@ onPause(e) {
         onControlsToggle(e) {
-            this._emitEvt(index_1.MediaEvents.CONTROLSTOGGLE, e);
+            const { customControls } = this.data;
+            if (customControls) {
+                return;
+            }
+            this.media.emit(index_1.MediaEvents.CONTROLSTOGGLE, e.detail);
+            this.triggerEvent(index_1.MediaEvents.CONTROLSTOGGLE, e.detail);
         },
@@ -425,2 +493,7 @@ onEnterPIP(e) {
         },
+        onUserAction(e) {
+            console.log('handleUserAction', e.detail);
+            this.media.emit(index_1.ExtendsEvents.USER_ACTION, e.detail);
+            this.triggerEvent(index_1.ExtendsEvents.USER_ACTION, e.detail);
+        },
         handleTap() {
@@ -427,0 +500,0 @@ console.log('>>>>>Index handleTap');

dist/plugins/controls/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const index_1 = require("../../utils/index");
+const userActionBehavior_1 = require("../../behaviors/userActionBehavior");
 (0, index_1.XgComponent)({
-    behaviors: [],
+    behaviors: [userActionBehavior_1.default],
     properties: {
@@ -7,0 +8,0 @@ hide: {

dist/plugins/progress/index.js

@@ -60,2 +60,3 @@ "use strict";
         ready: function () {
+            this.dragStartTime = -1;
             // console.log('!!!![progress]>>>ready', this.properties.videoId)
@@ -120,2 +121,4 @@ this.addMediaEvents(index_1.default);
             const { value } = e.detail;
+            console.log('onProgressChange', this.dragStartTime);
+            this.dragStartTime = -1;
             const { duration } = this.data;
@@ -134,4 +137,8 @@ if (!duration) {
         onProgressChanging: function (e) {
+            console.log('onProgressChanging', e);
             const { value } = e.detail;
             const cTime = value * this.data.duration / 100;
+            if (this.dragStartTime < 0) {
+                this.dragStartTime = cTime;
+            }
             this.setData({
@@ -138,0 +145,0 @@ isActive: true,

dist/plugins/xg-play-button/xg-play-button.js

@@ -5,5 +5,6 @@ "use strict";
 const videoEventsBehavior_1 = require("../../behaviors/videoEventsBehavior");
+const userActionBehavior_1 = require("../../behaviors/userActionBehavior");
 const index_2 = require("../../tool/index");
 (0, index_1.XgComponent)({
-    behaviors: [videoEventsBehavior_1.default],
+    behaviors: [videoEventsBehavior_1.default, userActionBehavior_1.default],
     /**
@@ -48,3 +49,3 @@ * 组件的属性列表
         className: 'xg-icon-play',
-        sizeClassName: 'xg-icon-middle'
+        sizeClassName: 'xg-icon-middle',
     },
@@ -83,4 +84,11 @@ lifetimes: {
     methods: {
-        onClick() {
+        onClick(e) {
             const { paused } = this.data;
+            const data = {
+                actionType: 'switch_play_pause',
+                props: 'paused',
+                from: paused,
+                to: !paused
+            };
+            this.triggerUserAction('playbtn', e, data);
             if (this.media) {
@@ -95,3 +103,3 @@ if (paused) {
         }
-    }
+    },
 });

package.json

 {
   "name": "veplayer-mp-wechat",
-  "version": "1.0.1",
+  "version": "1.0.2-alpha.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "miniprogram": "dist",

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

136369

5.5%

Number of package files

58

1.75%

Lines of code

2226

7.54%

Worsened metrics

Number of low quality alerts

2

100%

No dependency changes