@ray-js/ray-ipc-player 2.0.26-beta-1 → 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

@@ -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 = '',
@@ -924,12 +928,12 @@ const Player = props => {
    */
 
   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,
@@ -963,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.26-beta-1",
+  "version": "2.0.26-beta-2",
   "description": "ray小程序播放器",
   "keywords": [
     "tuya-miniapp",