vhall-mini-sdk 0.4.4 → 0.4.6

package/lib/components/mall-reward/index.js

@@ -1,4 +1,4 @@
-import { isEmpty, safeJsonParse, sleep, genRandom } from '../../shared/utils.js';
+import { isEmpty, safeJsonParse, sleep, genRandom, safeCustomLog } from '../../shared/utils.js';
 import createLogger from '../../shared/logger.js';
 
 const log = createLogger('mall-reward');
@@ -70,7 +70,7 @@ Component({
         if (!this.webinarType != 1) {
           return;
         }
-        this.sdkInstance.BRSAgent?.customLog('checkAndFetchMallRewardInfo from=push');
+        safeCustomLog(this.sdkInstance, 'checkAndFetchMallRewardInfo from=push');
         this.checkAndFetchMallRewardInfo('push', { reward_id: msg.data?.id });
         // 消息推送
         // const data = {
@@ -121,7 +121,7 @@ Component({
         if (data?.online) {
           // 上线（连接建立成功）：刷新商城奖励数据（与 FOREGROUND_REFRESH 共用防抖，避免重复请求）
           if (this._shouldRefreshByEvent()) {
-            this.sdkInstance.BRSAgent?.customLog('checkAndFetchMallRewardInfo from=refresh, online_state_change');
+            safeCustomLog(this.sdkInstance, 'checkAndFetchMallRewardInfo from=refresh, online_state_change');
             this.checkAndFetchMallRewardInfo('refresh');
           }
         } else {
@@ -135,7 +135,7 @@ Component({
       obj[this.sdkInstance.EVENT.FOREGROUND_REFRESH] = (data) => {
         log.info('mallReward ------handleForegroundRefresh data：', data);
         if (!this.sdkInstance) return;
-        this.sdkInstance.BRSAgent?.customLog('checkAndFetchMallRewardInfo from=refresh, foreground_refresh');
+        safeCustomLog(this.sdkInstance, 'checkAndFetchMallRewardInfo from=refresh, foreground_refresh');
         if (this._shouldRefreshByEvent()) {
           this.checkAndFetchMallRewardInfo('refresh');
         }
@@ -146,7 +146,7 @@ Component({
     onSdkReady() {
       log.info('mall-reward onSdkReady');
       this.setData({ initTime: Date.now() });
-      this.sdkInstance.BRSAgent?.customLog('checkAndFetchMallRewardInfo from=refresh, onSdkReady');
+      safeCustomLog(this.sdkInstance, 'checkAndFetchMallRewardInfo from=refresh, onSdkReady');
       this.checkAndFetchMallRewardInfo('refresh');
     },
     // 事件触发的刷新防抖：JOIN_MSG / FOREGROUND_REFRESH 等共用冷却，避免接口重复触发

package/lib/components/player/components/controls/controls.wxml

@@ -10,11 +10,7 @@
 </view>
 <view wx:if="{{playStatus=='paused'}}" class='center'>
   <!-- <mp-icon icon='play' color='#fff' size='{{60}}' bind:tap='handlePlayPause'></mp-icon> -->
-  <image class="center-image play" mode="aspectFit" src="../../assets/image/play.png" bind:tap='handlePlayPause' />
-</view>
-<view wx:if="{{playStatus=='playing'&&!hiddenFlag}}" class='center'>
-  <!-- <mp-icon icon='play' color='#fff' size='{{60}}' bind:tap='handlePlayPause'></mp-icon> -->
-  <image class="center-image pause" mode="aspectFit" src="../../assets/image/pause_1.png" bind:tap='handlePlayPause' />
+  <image class="center-image" mode="aspectFit" src="../../assets/image/play.png" bind:tap='handlePlayPause' />
 </view>
 <view class="control {{fullscreen?'fullscreen':''}}" wx:if='{{!verticalMode}}' hidden="{{hiddenFlag}}">
   <view class="control-left">

package/lib/components/player/components/main/extensions/methods.js

@@ -33,18 +33,28 @@ export function createMethods() {
       };
       // console.log(`live-player statechange: ${code}, ${STATE_CODE[code.toString()]}`)
       switch (code) {
-        // case 2001:
-        // case 2002:
-        //   this.triggerEvent('loadStart', e.detail);
-        //   break;
+        // 2001/2002：已连接服务器 / 开始拉流。
+        // 网络差时最容易卡在这一段（连接成功但没有数据），必须给出"加载中"反馈，
+        // 否则用户点播放后只能看到封面，没有任何响应
+        case 2001:
+        case 2002:
+          this.triggerEvent('loadStart', e.detail);
+          break;
         case 2004:
           this.triggerEvent('play', e.detail);
           break;
+        // 2005：播放进度。部分场景（如 2007 后恢复）不会再收到 2004，
+        // 用播放进度兜底，确保 loading/封面能被正确收起
+        case 2005:
+          this.triggerEvent('playing', e.detail);
+          break;
         case 2007:
           this.triggerEvent('waiting', e.detail);
           break;
         case 2103:
+          // 网络断连自动重连：同时上报 loadStart，让上层显示加载态而不是停在旧画面
           this.triggerEvent('reconnecting', e.detail);
+          this.triggerEvent('loadStart', e.detail);
           break;
         case -2301:
         case -2302:

package/lib/components/player/extensions/export.js

@@ -25,7 +25,13 @@ export function createExport() {
           component.setData({
             playStatus: "playing",
             pausedFlag: false,
+            // 点击播放立刻给出"加载中"反馈：网络差时 live-player 可能长时间停在
+            // 2001/2002 收不到任何状态码，只等 2007 会让用户以为点了没反应
+            showLoading: component.data.type === 'live',
+            showError: false,
           })
+          // 开启首帧兜底：超时仍未出画面则提示错误，避免一直封面/一直转圈
+          component.startFirstFrameWatchdog && component.startFirstFrameWatchdog();
         }
         catch (error) {
           reject(error);
@@ -111,6 +117,11 @@ export function createExport() {
      * 重新播放
      */
     replay() {
+      // 重试同样要有加载反馈和首帧兜底
+      if (component.data.type === 'live') {
+        component.setData({ showLoading: true });
+        component.startFirstFrameWatchdog && component.startFirstFrameWatchdog();
+      }
       return component.playerMain.replay();
     },
     /**

package/lib/components/player/extensions/methods.js

@@ -1,6 +1,11 @@
 import { getUnixTimeMs, getCurrentTimeZoneOffset, convertTimeZone } from '../../../shared/dateUtil'
 import { safeJsonParse } from '../../../shared/utils'
 
+// 直播首帧兜底时长（ms）：从开始拉流/用户点播放起，超过该时长仍未出画面则判定为加载失败。
+// 直播在网络差时可能长时间停在 2001/2002（连接中）或 2007（loading）而没有后续状态码，
+// 没有兜底就会出现"一直显示封面"或"一直转圈"两种假死状态。
+const LIVE_FIRST_FRAME_TIMEOUT = 15000;
+
 export function createMethods() {
   return {
     async initVhallPlayer(option) {
@@ -174,6 +179,7 @@ export function createMethods() {
     onplay(e) {
       console.log(`播放play事件：`, e);
       this.triggerEvent('play', e.detail);
+      this.clearFirstFrameWatchdog();
       this.setData({
         playStatus: 'playing',
         pausedFlag: false,
@@ -190,10 +196,18 @@ export function createMethods() {
     onpause(e) {
       console.log(`暂停pause事件：`, e.detail);
       this.triggerEvent('pause', e.detail);
+      this.clearFirstFrameWatchdog();
       const data = {
         playStatus: 'paused',
         pausedFlag: true,
       };
+      // 直播：加载过程中被暂停时收掉 loading 并恢复封面，避免一直转圈
+      if (this.data.type === 'live' && this.data.showLoading) {
+        data.showLoading = false;
+        if (this.data.posterUrl) {
+          data.showPoster = true;
+        }
+      }
       // 暖场视频暂停时，只显示大播放按钮（不显示封面）
       if (this.data.warmVideoIds.length > 0) {
         data.showBigPlay = true;
@@ -283,6 +297,7 @@ export function createMethods() {
     onerror(e) {
       console.log(`播放error事件：`, e.detail);
       this.triggerEvent('error', e.detail);
+      this.clearFirstFrameWatchdog();
       this.setData({
         showError: true,
         showLoading: false,
@@ -298,15 +313,56 @@ export function createMethods() {
       this.setData({
         showLoading: true,
       });
+      this.startFirstFrameWatchdog();
     },
     /**
-     * 开始连接事件（仅直播）
+     * 开始连接事件（仅直播）：2001/2002 已连接/开始拉流，2103 自动重连也会触发
      * @param {*} e
      */
     onloadStart(e) {
       this.setData({
         showLoading: true,
       });
+      this.startFirstFrameWatchdog();
+    },
+    /**
+     * 播放进度（直播 2005）：画面确实在推进。
+     * 2007 恢复播放时不一定再收到 2004，这里兜底收掉 loading/封面
+     */
+    onplaying() {
+      this.clearFirstFrameWatchdog();
+      const { showLoading, showPoster, showBigPlay } = this.data;
+      if (showLoading || showPoster || showBigPlay) {
+        this.setData({
+          showLoading: false,
+          showPoster: false,
+          showBigPlay: false,
+        });
+      }
+    },
+    /**
+     * 直播首帧兜底计时：开始拉流/等待/点击播放时启动，超时仍未出画面则切到错误态，
+     * 避免网络差时一直停在封面或一直转圈
+     */
+    startFirstFrameWatchdog() {
+      if (this.data.type !== 'live') return;
+      this.clearFirstFrameWatchdog();
+      this._firstFrameTimer = setTimeout(() => {
+        this._firstFrameTimer = null;
+        // 已经起播（loading 和封面都已被收掉）则不需要兜底
+        if (!this.data.showLoading && !this.data.showPoster) return;
+        console.warn('[player] 直播首帧超时，切换错误态');
+        this.setData({
+          showLoading: false,
+          showError: true,
+        });
+      }, LIVE_FIRST_FRAME_TIMEOUT);
+    },
+    clearFirstFrameWatchdog() {
+      if (this._firstFrameTimer) {
+        clearTimeout(this._firstFrameTimer);
+        this._firstFrameTimer = null;
+      }
     },
     /**
      * 自动重连事件（仅直播）
@@ -501,6 +557,7 @@ export function createMethods() {
       }
     },
     destroy() {
+      this.clearFirstFrameWatchdog();
       this.vhallPlayerCore?.destroy();
     }
   };

package/lib/components/player/player.js

@@ -58,6 +58,7 @@ VeComponent({
     },
     detached() {
       logger.debug('lifetimes detached');
+      this.clearFirstFrameWatchdog && this.clearFirstFrameWatchdog();
       this.vhallPlayerCore?.destroy();
       this.playerMain = null;
       this.setData({
@@ -73,6 +74,8 @@ VeComponent({
   pageLifetimes: {
     hide() {
       logger.debug('pageLifetimes hide');
+      // 切后台时清掉首帧兜底，避免后台期间被误判为加载超时
+      this.clearFirstFrameWatchdog && this.clearFirstFrameWatchdog();
       this.vhallPlayerCore?.destroy();
     },
     show() {

package/lib/components/player/player.json

@@ -8,9 +8,6 @@
     "vhall-player-error": {
       "default": "./components/error/error"
     },
-    "vhall-player-loading": {
-      "default": "./components/loading/loading"
-    },
     "vhall-player-poster": {
       "default": "./components/poster/poster"
     },

package/lib/components/player/player.wxml

@@ -7,7 +7,7 @@
     }
 </wxs>
 <view class='vhall-layout-root' style='{{_style}}'>
-  <player-main catchtap="onToggleControls" wx:if="{{webinarStatus!=3}}" id='{{id}}' class='vhall-player-root' src='{{videoSrc}}' type='{{type}}' autoplay='{{isWarmVideo ? false : autoplay}}' objectFit='{{objectFit}}' muted='{{mutedFlag}}' mode='{{liveDelayMode}}' pictureInPictureMode='{{pictureInPictureMode}}' poster='{{type=="vod" ? "" : posterUrl}}' controls='{{controls}}' show-progress="{{isWarmVideo ? false : showProgress}}" show-bottom-progress="{{isWarmVideo ? false : showBottomProgress}}" show-center-play-btn="{{!isWarmVideo}}" loop="{{loop}}" initialSeekTime='{{initialSeekTime}}' bindfullscreenchange='onfullscreenchange' bindpictureinpicturechange='onpictureinpicturechange' bindtimeupdate='ontimeupdate' bindplay='onplay' bindpause='onpause' bindended='onended' bindloadedmetadata='onloadedmetadata' binderror='onerror' bindwaiting='onwaiting' bindloadStart='onloadStart' bindreconnecting='onreconnecting'>
+  <player-main catchtap="onToggleControls" wx:if="{{webinarStatus!=3}}" id='{{id}}' class='vhall-player-root' src='{{videoSrc}}' type='{{type}}' autoplay='{{isWarmVideo ? false : autoplay}}' objectFit='{{objectFit}}' muted='{{mutedFlag}}' mode='{{liveDelayMode}}' pictureInPictureMode='{{pictureInPictureMode}}' poster='{{type=="vod" ? "" : posterUrl}}' controls='{{controls}}' show-progress="{{isWarmVideo ? false : showProgress}}" show-bottom-progress="{{isWarmVideo ? false : showBottomProgress}}" show-center-play-btn="{{!isWarmVideo}}" loop="{{loop}}" initialSeekTime='{{initialSeekTime}}' bindfullscreenchange='onfullscreenchange' bindpictureinpicturechange='onpictureinpicturechange' bindtimeupdate='ontimeupdate' bindplay='onplay' bindpause='onpause' bindended='onended' bindloadedmetadata='onloadedmetadata' binderror='onerror' bindwaiting='onwaiting' bindloadStart='onloadStart' bindreconnecting='onreconnecting' bindplaying='onplaying'>
     <view wx:if="{{type=='live'}}" class="cover-view" catchtap="onToggleControls">
       <block>
         <!-- 纯音频播放蒙层图片 -->
@@ -28,8 +28,11 @@
         <vhall-player-controls hiddenFlag="{{controlsHiddenFlag}}" wx:if="{{type=='live' && controls && tools.canShow(ignores, 'vhall-player-controls')}}" verticalMode='{{verticalMode}}' playStatus='{{playStatus}}' paused='{{pausedFlag}}' muted='{{mutedFlag}}' fullscreen='{{fullscreenFlag}}' qualityAlias='{{qualityAlias}}' qualitys='{{qualitys}}' currentQuality='{{currentQuality}}' bindcontrolsPlayPause='handleControlsPlayPause' bindcontrolsReplay='handleControlsReplay' bindcontrolsMute='handleControlsMute' bindcontrolsFullScreen='handleControlsFullScreen' bindcontrolsSetQuality='handleControlsSetQuality' />
         <!-- 错误提示组件 -->
         <vhall-player-error wx:if="{{showError && tools.canShow(ignores, 'vhall-player-error')}}" error='{{error}}' binderrorandretry='handleErrorAndRetry' />
-        <!-- loading组件 -->
-        <vhall-player-loading wx:elif="{{type=='live' && showLoading && tools.canShow(ignores, 'vhall-player-loading')}}" />
+        <!-- loading：转圈 + "视频加载中..." 文案 -->
+        <view wx:elif="{{type=='live' && showLoading && tools.canShow(ignores, 'vhall-player-loading')}}" class="vhall-player-loading">
+          <view class="vhall-player-loading__spinner"></view>
+          <view class="vhall-player-loading__text">加载中...</view>
+        </view>
         <!-- 直播：在线人数和热度 -->
         <online-hot wx:if="{{!controlsHiddenFlag}}" fullscreen="{{fullscreenFlag}}" showPerson="{{showPerson}}" personValue="{{personValue}}" showHot="{{showHot}}" hotValue="{{hotValue}}"></online-hot>
       </block>

package/lib/components/player/player.wxss

@@ -1 +1 @@
-.vhall-layout-root{transition:width .3s ease-in-out,height .3s ease-in-out}.cover-view,.vhall-layout-root{height:100%;width:100%}.webinar_not_live{align-items:center;background-color:rgba(0,0,0,.9);bottom:0;color:#fff;display:flex;font-size:14px;height:100%;justify-content:center;left:0;position:relative;right:0;top:0}.webinar_not_live .cover_img{height:100%;position:absolute;width:100%;z-index:1}.webinar_not_live .webinar_status{align-items:center;background-color:rgba(0,0,0,.6);bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:absolute;right:0;text-align:center;top:0;z-index:2}.webinar_not_live .webinar_status .status-img{display:block;margin-left:-10px;width:140rpx}.webinar_not_live .webinar_status .status-text{display:block;font-size:1rem;padding-top:10px}.vhall-player-audio-cover{height:100%;left:0;position:absolute;top:0;width:100%}.vod-poster-play{align-items:center;background:rgba(0,0,0,.45);border-radius:50%;display:flex;height:140rpx;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:140rpx;z-index:3}.vod-poster-play .play-triangle{border-color:transparent transparent transparent #fff;border-style:solid;border-width:30rpx 0 30rpx 48rpx;height:0;margin-left:12rpx;width:0}
+.vhall-layout-root{transition:width .3s ease-in-out,height .3s ease-in-out}.cover-view,.vhall-layout-root{height:100%;width:100%}.webinar_not_live{align-items:center;background-color:rgba(0,0,0,.9);bottom:0;color:#fff;display:flex;font-size:14px;height:100%;justify-content:center;left:0;position:relative;right:0;top:0}.webinar_not_live .cover_img{height:100%;position:absolute;width:100%;z-index:1}.webinar_not_live .webinar_status{align-items:center;background-color:rgba(0,0,0,.6);bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:absolute;right:0;text-align:center;top:0;z-index:2}.webinar_not_live .webinar_status .status-img{display:block;margin-left:-10px;width:140rpx}.webinar_not_live .webinar_status .status-text{display:block;font-size:1rem;padding-top:10px}.vhall-player-audio-cover{height:100%;left:0;position:absolute;top:0;width:100%}.vod-poster-play{align-items:center;background:rgba(0,0,0,.45);border-radius:50%;display:flex;height:140rpx;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:140rpx;z-index:3}.vod-poster-play .play-triangle{border-color:transparent transparent transparent #fff;border-style:solid;border-width:30rpx 0 30rpx 48rpx;height:0;margin-left:12rpx;width:0}.vhall-player-loading{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:5}.vhall-player-loading .vhall-player-loading__spinner{animation:vhall-player-rotate .8s linear infinite;border:1px solid transparent;border-radius:100%;border-top-color:hsla(0,0%,100%,.9);box-sizing:border-box;height:30px;width:30px}.vhall-player-loading .vhall-player-loading__text{color:hsla(0,0%,100%,.9);line-height:20px;margin-top:8px;text-shadow:0 1px 2px rgba(0,0,0,.5)}@keyframes vhall-player-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

package/lib/components/signin/signin-dialog.js

@@ -1,4 +1,4 @@
-import { debounce } from '../../shared/utils';
+import { debounce, safeCustomLog } from '../../shared/utils';
 const DEFAULT_SIGIN_TITLE = '主持人发起了签到';
 const DEFAULT_SIGIN_SUCCESS_TIP = '签到成功';
 const app = getApp();
@@ -126,15 +126,15 @@ Component({
       switch (msgDataType) {
         // 发起签到
         case 'sign_in_push':
-          this.sdkInstance.BRSAgent?.customLog('sign_in_push');
-          this.sdkInstance.get('logReportServer').report('116999', { stage: "sign_in_push" });
+          safeCustomLog(this.sdkInstance, 'sign_in_push');
+          this.sdkInstance.get('logReportServer').report('116998', { stage: "sign_in_push" });
           this.handleSigninPush(msg.data);
           break;
         // 结束签到
         case 'sign_end':
         // 直播结束
         case 'live_over':
-          this.sdkInstance.BRSAgent?.customLog(`${msgDataType}`);
+          safeCustomLog(this.sdkInstance, `${msgDataType}`);
           this.handleSigninEnd(msg.data);
           break;
       }
@@ -262,7 +262,7 @@ Component({
         phone: watchInitData.join_info.phone,
       };
       try {
-        this.sdkInstance.BRSAgent?.customLog('click signin');
+        safeCustomLog(this.sdkInstance, 'click signin');
         this.signed = true; // 标识签到过
         const res = await this.sdkInstance.wxApi.sendPost('/v3/interacts/sign/user-sign', params);
         // 不管成功失败都显示成功（原观看端逻辑如此）
@@ -272,10 +272,10 @@ Component({
         });
         this.closeCountdown();
         if (res?.code != 200) {
-          this.sdkInstance.BRSAgent?.customLog('click signin failed:', JSON.stringify(res));
+          safeCustomLog(this.sdkInstance, 'click signin failed:', JSON.stringify(res));
         }
       } catch (error) {
-        this.sdkInstance.BRSAgent?.customLog('click signin error:', ex?.message);
+        safeCustomLog(this.sdkInstance, 'click signin error:', ex?.message);
         wx.showToast({
           title: '网络异常！',
           icon: 'none',
@@ -298,7 +298,7 @@ Component({
       });
       // 错误处理
       audio.onError((err) => {
-        this.sdkInstance.BRSAgent?.customLog('playSound  error:', err.errMsg);
+        safeCustomLog(this.sdkInstance, 'playSound  error:', err.errMsg);
         console.error('播放签到提示音失败:', err.errMsg);
       });
     },