@ray-js/ray-ipc-player 2.0.25 → 2.0.26-beta-2

package/lib/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import { IProps } from './typings';
+import './index.less';
 declare const Player: (props: IProps) => JSX.Element;
 export default Player;

package/lib/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import "core-js/modules/es.json.stringify.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 /* eslint-disable no-unneeded-ternary */
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useImmer } from 'use-immer';
 import _isEmpty from 'lodash/isEmpty';
 import { IpcPlayer, View, CoverView } from '@ray-js/components';
@@ -10,12 +10,16 @@ import { useMount, useUnmount, useMemoizedFn } from 'ahooks';
 import { setPageOrientation, usePageEvent, getNetworkType, offNetworkStatusChange, onNetworkStatusChange, publishDps, showToast, getSystemInfoSync, onMqttMessageReceived, registerMQTTProtocolListener, offMqttMessageReceived, unregisterMQTTProtocolListener, registerDeviceListListener, onDpDataChange, onDeviceOnlineStatusUpdate, performanceEvent } from '@ray-js/ray';
 import clsx from 'clsx';
 import Strings from './i18n';
-import Styles from './index.module.less';
 import { IpcFailCode } from './constant';
 import { useWakeUpDevice } from './hooks';
 import { getIsConnected, getIsOnPreview, openTargetMinByShortLink, getLanguage, getHomeInfo, getDeviceInfo, getDpIdByDpCode, ipcTTTOperatorLog } from './utils';
 import { getErrCodeDetailDataByCode, codeCoverToInt } from './config/errCodeConfig';
 import { deviceFreezeReasonStore, miniIdLabs } from './config';
+import './index.less';
+const CSS_PREFIX = 'ray-ipc-player';
+
+// 生成带前缀的类名
+const getClassName = className => "".concat(CSS_PREFIX, "-").concat(className);
 const Player = props => {
   const {
     updateLayout = '',
@@ -118,13 +122,13 @@ const Player = props => {
   const retryCount = useRef(0); // 重试次数
   const muteRef = useRef(defaultMute); // 静音
 
-  usePageEvent('onShow', useCallback(async () => {
+  usePageEvent('onShow', useMemoizedFn(async () => {
     // 视图准备就绪
     if (phoneNetworkConnect && playState.initLy && ipcCtx.current && onlineStatus && !privateState) {
       ipcTTTOperatorLog('VID: onShow_event_to_retry');
       retry();
     }
-  }, [phoneNetworkConnect, onlineStatus && playState.connectState, privateState, playState.initLy]));
+  }));
   usePageEvent('onShow', () => {
     getNetworkType({
       success: res => {
@@ -188,6 +192,7 @@ const Player = props => {
   }));
   useMount(() => {
     onNetworkStatusChange(res => {
+      console.log(res, 'res==========onNetworkStatusChange');
       setPhoneNetworkConnect(res.isConnected);
       if (!res.isConnected) {
         // 断网，需要主动调用断流以及断开P2P
@@ -330,6 +335,7 @@ const Player = props => {
           d.errorMsg = Strings.getLang('ipc_player_device_offline');
         });
       } else if (playState.initLy && !privateState) {
+        console.log('sdhjsahdjshajdh');
         ipcTTTOperatorLog("VID: privateState_status_change: ".concat(privateState));
         retry();
       } else if (playState.initLy && privateState) {
@@ -342,8 +348,11 @@ const Player = props => {
 
   // 重试
   const _retry = async () => {
+    console.log('调用了重试');
     const connectState = await getIsConnected(ipcCtx.current);
+    console.log('调用了重试--connectState');
     const isOnPreview = await getIsOnPreview(ipcCtx.current);
+    console.log('调用了重试--isOnPreview');
     setPlayState(d => {
       d.connectState = connectState ? true : false;
       d.errorMsg = '';
@@ -455,8 +464,7 @@ const Player = props => {
       }, 15000);
     }
   });
-  const retry = useCallback(() => {
-    // console.log('retry:', muteRef.current);
+  const retry = useMemoizedFn(() => {
     console.log('重新拉流启动');
     // 任何重试拉流时, 将播放器状态还原为loading状态
     setVideoErrCode('');
@@ -470,7 +478,8 @@ const Player = props => {
     // 低功耗设备隐私模式需单独处理，先进行下发唤醒, 唤醒后再进行下发DP
     phoneNetworkConnect && onlineStatus && privateState && isLowPowerDevice && !isVirtualDevice && handleReWakeCameraLowPowerDevice();
     phoneNetworkConnect && onlineStatus && !privateState && _retry();
-  }, [isLowPowerDevice, phoneNetworkConnect && playState.connectState, privateState, onlineStatus]);
+    // }, [isLowPowerDevice, phoneNetworkConnect && playState.connectState, privateState, onlineStatus]);
+  });
 
   // 创建ipc实例
   const createIpcCtx = () => {
@@ -625,7 +634,7 @@ const Player = props => {
    */
 
   // 异常事件
-  const onError = useCallback(e => {
+  const onError = useMemoizedFn(e => {
     ipcTTTOperatorLog("VID: player_event_on_error: ".concat(JSON.stringify(e)));
     if (playState.errorState) {
       return;
@@ -644,7 +653,7 @@ const Player = props => {
         d.connectState = false;
       });
     }
-  }, [playState.errorState]);
+  });
 
   // 连接状态发生变化
   const connectChange = useMemoizedFn(e => {
@@ -717,14 +726,14 @@ const Player = props => {
   /**
    * 播放器画面点击事件
    */
-  const handleVideoTap = useCallback(() => {
+  const handleVideoTap = useMemoizedFn(() => {
     if (!playState.loadingState && !playState.errorState && onlineStatus && !privateState) {
       ipcTTTOperatorLog('VID: onVideoTap_event_send');
       onPlayerTap && onPlayerTap(devId);
     } else {
       ipcTTTOperatorLog('VID: onVideoTap_event_trigger_not_send');
     }
-  }, [onPlayerTap, playState.loadingState, playState.errorState, onlineStatus, privateState]);
+  });
 
   /**
    * 退出横屏
@@ -757,7 +766,7 @@ const Player = props => {
   /**
    * 获取错误展示内容
    */
-  const getErrorContent = useCallback(() => {
+  const getErrorContent = useMemoizedFn(() => {
     if (!phoneNetworkConnect) {
       return Strings.getLang('ipc_player_network_fail');
     }
@@ -801,12 +810,12 @@ const Player = props => {
       return "".concat(Strings.getLang("ipc_player_error_common"), "(").concat(videoErrCode, ")");
     }
     return playState.errorMsg;
-  }, [phoneNetworkConnect, playState, videoErrCode, privateState, onlineStatus, isLowPowerDevice, lowPowerDeviceOnlineState, device4GIsFreeze, deviceFreezeReason, lowPrivateOutTimeFlag]);
+  });
 
   /**
    * 根据自定义类型获取错误码展示内容
    */
-  const getErrorContentByType = useCallback((errCode, type) => {
+  const getErrorContentByType = useMemoizedFn((errCode, type) => {
     const errContent = getErrCodeDetailDataByCode(String(errCode));
     const contentEmpty = _isEmpty(errContent);
     switch (type) {
@@ -893,12 +902,12 @@ const Player = props => {
       default:
         return false;
     }
-  }, [phoneNetworkConnect, privateState, onlineStatus, isLowPowerDevice, lowPowerDeviceOnlineState, device4GIsFreeze, deviceFreezeReason]);
+  });
 
   /**
    * 跳转帮助小程序
    */
-  const handleGotoHelpMini = useCallback(async () => {
+  const handleGotoHelpMini = useMemoizedFn(async () => {
     if (isLowPowerDevice && !lowPowerDeviceOnlineState || !onlineStatus) {
       const realLanguage = await getLanguage();
       const url = "godzilla://".concat(miniIdLabs.helpMini, "/pages/commonDetails/index?answer=/app-helpcenter/").concat(realLanguage, "/K94ow0gwu9bg2");
@@ -912,19 +921,19 @@ const Player = props => {
     const url = "godzilla://".concat(miniIdLabs.ipcHelpMini, "?errCode=").concat(videoErrCode, "&deviceId=").concat(devId, "&homeId=").concat(homeInfo === null || homeInfo === void 0 ? void 0 : homeInfo.homeId, "&instanceId=").concat(devInfo === null || devInfo === void 0 ? void 0 : devInfo.uuid, "&helpNum=").concat(helpNum, "&helpFeedBack=").concat(helpFeedBack, "&themeColor=").concat(brandColor);
     openTargetMinByShortLink(url);
     return false;
-  }, [onlineStatus, isLowPowerDevice, lowPowerDeviceOnlineState]);
+  });
 
   /**
    * 跳转反馈小程序
    */
 
   return /*#__PURE__*/React.createElement(View, {
-    className: Styles.ipc_player,
+    className: getClassName('ipc-player'),
     onClick: () => {
       onPlayerContainerTap && onPlayerContainerTap(devId);
     }
   }, /*#__PURE__*/React.createElement(IpcPlayer, _extends({
-    className: "".concat(Styles.player, " ").concat(playState.updateLy),
+    className: "".concat(getClassName('player'), " ").concat(playState.updateLy),
     objectFit: objectFit,
     onVideoTap: handleVideoTap,
     onZoomChange: onZoomChange,
@@ -958,51 +967,51 @@ const Player = props => {
     style: {
       borderRadius: "".concat(borderRadius)
     },
-    className: clsx(Styles.load_box, Styles.bg_center, !playState.loadingState && Styles.hide),
+    className: clsx(getClassName('load-box'), getClassName('bg-center'), !playState.loadingState && getClassName('hide')),
     onClick: () => {
       return false;
     }
   }, /*#__PURE__*/React.createElement(View, {
-    className: Styles.load_icon
+    className: getClassName('load-icon')
   }), /*#__PURE__*/React.createElement(View, {
-    className: Styles.load_des
+    className: getClassName('load-des')
   }, loadText || playState.loadingText || Strings.getLang('ipc_player_get_video_stream'))), /*#__PURE__*/React.createElement(CoverView, {
     style: {
       borderRadius: "".concat(borderRadius)
     },
-    className: clsx(Styles.bg_center, Styles.errorContainer, !playState.errorState && Styles.hide),
+    className: clsx(getClassName('bg-center'), getClassName('error-container'), !playState.errorState && getClassName('hide')),
     onClick: () => {
       return false;
     }
   }, /*#__PURE__*/React.createElement(View, {
-    className: clsx(Styles.errIconContainer)
+    className: clsx(getClassName('err-icon-container'))
   }, renderErrIcon ? renderErrIcon() : /*#__PURE__*/React.createElement(View, {
-    className: clsx(Styles.errIcon)
+    className: clsx(getClassName('err-icon'))
   })), /*#__PURE__*/React.createElement(View, {
-    className: clsx(Styles.errTextContainer)
+    className: clsx(getClassName('err-text-container'))
   }, /*#__PURE__*/React.createElement(View, {
-    className: clsx(Styles.errContent)
+    className: clsx(getClassName('err-content'))
   }, getErrorContent()), getErrorContentByType(videoErrCode, 'suggestedFlag') && /*#__PURE__*/React.createElement(View, {
-    className: clsx(Styles.errDesc)
+    className: clsx(getClassName('err-desc'))
   }, getErrorContentByType(videoErrCode, 'suggestedText'))), /*#__PURE__*/React.createElement(View, {
-    className: clsx(Styles.errOperatorContainer)
+    className: clsx(getClassName('err-operator-container'))
   }, getErrorContentByType(videoErrCode, 'retry') && /*#__PURE__*/React.createElement(View, {
-    className: clsx(Styles.operatorBtn, Styles.operatorRetry),
+    className: clsx(getClassName('operator-btn'), getClassName('operator-retry')),
     style: {
       backgroundColor: "".concat(brandColor)
     },
     onClick: retry
   }, getErrorContentByType(videoErrCode, 'retryText')), getErrorContentByType(videoErrCode, 'help') && /*#__PURE__*/React.createElement(View, {
-    className: clsx(Styles.operatorBtn, Styles.operatorHelp),
+    className: clsx(getClassName('operator-btn'), getClassName('operator-help')),
     onClick: handleGotoHelpMini
   }, Strings.getLang('ipc_player_help')), getErrorContentByType(videoErrCode, 'feedBack') && /*#__PURE__*/React.createElement(View, {
-    className: clsx(Styles.operatorBtn, Styles.operatorFeedBack),
+    className: clsx(getClassName('operator-btn'), getClassName('operator-feedback')),
     onClick: () => {
       const url = "godzilla://".concat(miniIdLabs.helpMini, "/pages/v2/problemSubmit/index");
       openTargetMinByShortLink(url);
     }
   }, Strings.getLang('ipc_player_feedback')))), screenType === 'landscape' && (playState.loadingState || playState.errorState) && /*#__PURE__*/React.createElement(CoverView, {
-    className: clsx(Styles.load_full_back_container),
+    className: clsx(getClassName('load-full-back-container')),
     onClick: () => {
       setScreenType('portrait');
       setPageOrientation({

package/lib/{index.module.less → index.less}

@@ -1,21 +1,23 @@
-.player {
+@prefix: ray-ipc-player;
+
+.@{prefix}-player {
   width: 100%;
   height: 100%;
 }
 
-.ipc_player {
+.@{prefix}-ipc-player {
   width: 100%;
   height: 100%;
   position: relative;
 }
 
-.load_box {
+.@{prefix}-load-box {
   color: #ffffff;
-  font-size: 0.3rem;
+  font-size: 24px;
   z-index: 350;
 }
 
-.bg_center {
+.@{prefix}-bg-center {
   position: absolute;
   top: 0;
   width: 100%;
@@ -36,10 +38,10 @@
   --video-bg: #0d0d0d;
 }
 
-.load_icon {
+.@{prefix}-load-icon {
   display: block;
-  height: 0.38rem;
-  width: 0.38rem;
+  height: 20px;
+  width: 20px;
   vertical-align: middle;
   animation: spin 1s linear 0s infinite;
   background: #ffffff;
@@ -48,8 +50,9 @@
   -webkit-mask-repeat: no-repeat;
 }
 
-.load_des {
-  margin-top: 0.34rem;
+.@{prefix}-load-des {
+  margin-top: 16px;
+  font-size: 14px;
 }
 
 @keyframes spin {
@@ -61,7 +64,7 @@
   }
 }
 
-.hide {
+.@{prefix}-hide {
   display: none !important;
 }
 
@@ -76,11 +79,11 @@
 
 .iconfont {
   font-family: 'iconfont' !important;
-  font-size: 0.44rem;
+  font-size: 30px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  margin-bottom: 0.3rem;
+  margin-bottom: 10px;
 }
 
 .icon_tishi:before {
@@ -88,56 +91,56 @@
   color: #fff;
 }
 
-.msg {
+.@{prefix}-msg {
   width: 100%;
 }
 
-.msg,
-.retry,
-.device_sleep,
-.re_wake_camera {
-  font-size: 0.25rem;
+.@{prefix}-msg,
+.@{prefix}-retry,
+.@{prefix}-device-sleep,
+.@{prefix}-re-wake-camera {
+  font-size: 12px;
   display: inline-block;
   color: #fff;
 }
 
-.retry,
-.re_wake_camera {
+.@{prefix}-retry,
+.@{prefix}-re-wake-camera {
   color: #5583f5;
 }
 
-.retry {
+.@{prefix}-retry {
   display: block;
 }
 
-.err_container {
+.@{prefix}-err-container {
   width: 100%;
   text-align: center;
   padding: 0 30px;
 }
 
-.device_sleep,
-.re_wake_camera {
+.@{prefix}-device-sleep,
+.@{prefix}-re-wake-camera {
   width: 100%;
 }
 
-.re_wake_camera {
-  margin-top: 0.05rem;
+.@{prefix}-re-wake-camera {
+  margin-top: 2px;
   text-decoration: underline;
 }
 
-.ellipsis {
+.@{prefix}-ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.err_msg {
+.@{prefix}-err-msg {
   text-align: center;
   width: 100%;
 }
 
-.load_full_back_container {
+.@{prefix}-load-full-back-container {
   position: absolute;
   left: 25px;
   top: 16px;
@@ -150,13 +153,13 @@
   -webkit-mask-repeat: no-repeat;
 }
 
-.errorContainer {
+.@{prefix}-error-container {
   text-align: center;
   font-size: 12px;
   padding: 0 16px;
 
-  .errIconContainer {
-    .errIcon {
+  .@{prefix}-err-icon-container {
+    .@{prefix}-err-icon {
       background-image: url('./svg/errIcon.svg');
       width: 38px;
       height: 38px;
@@ -173,13 +176,13 @@
     }
   }
 
-  .errTextContainer {
-    .errContent {
+  .@{prefix}-err-text-container {
+    .@{prefix}-err-content {
       color: #ffffff;
       font-size: 12px;
       font-weight: 400;
     }
-    .errDesc {
+    .@{prefix}-err-desc {
       margin-top: 5px;
       color: rgba(255, 255, 255, 0.7);
       font-size: 12px;
@@ -187,12 +190,12 @@
     }
   }
 
-  .errOperatorContainer {
+  .@{prefix}-err-operator-container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     margin-top: 15px;
-    .operatorBtn {
+    .@{prefix}-operator-btn {
       font-size: 14px;
       font-weight: 400;
       min-height: 36px;
@@ -209,30 +212,30 @@
       text-overflow: ellipsis;
       padding: 8px 16px;
     }
-    .operatorBtn:hover {
+    .@{prefix}-operator-btn:hover {
       opacity: 0.9;
     }
-    .operatorBtn:active {
+    .@{prefix}-operator-btn:active {
       opacity: 1;
     }
-    .operatorBtn:first-of-type {
+    .@{prefix}-operator-btn:first-of-type {
       margin-right: 4px;
       margin-left: 0;
     }
-    .operatorBtn:last-of-type {
+    .@{prefix}-operator-btn:last-of-type {
       margin-left: 4px;
       margin-right: 0;
     }
-    .operatorBtn:only-of-type {
+    .@{prefix}-operator-btn:only-of-type {
       margin: 0;
     }
-    .operatorRetry {
+    .@{prefix}-operator-retry {
       background-color: #ff592a;
     }
-    .operatorHelp {
+    .@{prefix}-operator-help {
       background-color: #252525;
     }
-    .operatorFeedBack {
+    .@{prefix}-operator-feedback {
       background-color: #252525;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ray-ipc-player",
-  "version": "2.0.25",
+  "version": "2.0.26-beta-2",
   "description": "ray小程序播放器",
   "keywords": [
     "tuya-miniapp",