@ray-js/ray-ipc-player 2.0.18-beta-2 → 2.0.18-beta-4

package/lib/index.js

@@ -4,7 +4,8 @@ import "core-js/modules/web.dom-collections.iterator.js";
 import React, { useEffect, useRef, useCallback } from 'react';
 import { useImmer } from 'use-immer';
 import { IpcPlayer, View, CoverView } from '@ray-js/components';
-import cx from 'classnames';
+import { setPageOrientation } from '@ray-js/ray';
+import clsx from 'clsx';
 import { usePageEvent } from 'ray';
 import locals from './i18n';
 import Styles from './index.module.less';
@@ -26,7 +27,7 @@ const Player = props => {
     loadText = '',
     rotateZ = 0,
     scalable = true,
-    scaleMultiple = 0,
+    scaleMultiple = 1,
     ptzControllable = true,
     clarity = 'normal',
     ipcPlayerContext,
@@ -62,6 +63,7 @@ const Player = props => {
     deviceOnlineState: true,
     initLy: false
   });
+  const [screenType, setScreenType] = useImmer('portrait');
   const ipcCtx = useRef(null); // ipc实例
   if (!ipcCtx.current) {
     var _ty;
@@ -77,6 +79,12 @@ const Player = props => {
       retry();
     }
   }, [playState.connectState, privateState, playState.initLy]));
+  usePageEvent('onResize', sizeData => {
+    const {
+      type
+    } = sizeData;
+    setScreenType(type);
+  });
   usePageEvent('onHide', async () => {
     setPlayState(d => {
       d.loadingState = true;
@@ -309,6 +317,8 @@ const Player = props => {
 
   // 关闭隐私模式，重新拉流
 
+  // 退出横屏
+
   return /*#__PURE__*/React.createElement(View, {
     className: Styles.ipc_player,
     onClick: handlePlayerClick
@@ -369,7 +379,7 @@ const Player = props => {
     style: {
       borderRadius: "".concat(borderRadius)
     },
-    className: cx(Styles.load_box, Styles.bg_center, !playState.loadingState && Styles.hide)
+    className: clsx(Styles.load_box, Styles.bg_center, !playState.loadingState && Styles.hide)
   }, /*#__PURE__*/React.createElement(View, {
     className: Styles.load_icon
   }), /*#__PURE__*/React.createElement(View, {
@@ -378,7 +388,7 @@ const Player = props => {
     style: {
       borderRadius: "".concat(borderRadius)
     },
-    className: cx(Styles.bg_center, Styles.state_label, !playState.errorState && Styles.hide)
+    className: clsx(Styles.bg_center, Styles.state_label, !playState.errorState && Styles.hide)
   }, privateState ? /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
     className: Styles.device_sleep
   }, locals.getLang('ipc_player_device_sleep')), /*#__PURE__*/React.createElement(View, {
@@ -396,16 +406,26 @@ const Player = props => {
       textAlign: 'center'
     }
   }, /*#__PURE__*/React.createElement(View, {
-    className: cx(Styles.iconfont, Styles.icon_tishi, !playState.deviceOnlineState && Styles.hide)
+    className: clsx(Styles.iconfont, Styles.icon_tishi, !playState.deviceOnlineState && Styles.hide)
   }), /*#__PURE__*/React.createElement(View, {
     className: Styles.err_msg
   }, /*#__PURE__*/React.createElement(View, {
-    className: cx(Styles.msg, Styles.ellipsis)
+    className: clsx(Styles.msg, Styles.ellipsis)
   }, playState.errorMsg), /*#__PURE__*/React.createElement(View
   // @ts-ignore
   , {
     onClick: retry,
-    className: cx(Styles.retry, !playState.deviceOnlineState && Styles.hide)
-  }, locals.getLang('ipc_player_retry'))))));
+    className: clsx(Styles.retry, !playState.deviceOnlineState && Styles.hide)
+  }, locals.getLang('ipc_player_retry'))))), screenType === 'landscape' && (playState.loadingState || playState.errorState) && /*#__PURE__*/React.createElement(CoverView, {
+    className: clsx(Styles.load_full_back_container),
+    onClick: () => {
+      setPageOrientation({
+        pageOrientation: 'portrait',
+        success: () => {
+          setScreenType('portrait');
+        }
+      });
+    }
+  }));
 };
 export default Player;

package/lib/index.module.less

@@ -12,7 +12,7 @@
 .load_box {
   color: #ffffff;
   font-size: 0.3rem;
-  z-index: 200;
+  z-index: 350;
 }
 
 .bg_center {
@@ -25,7 +25,7 @@
   justify-content: center;
   align-items: center;
   background: var(--video-bg);
-  z-index: 200;
+  z-index: 350;
 }
 
 .state_label {
@@ -129,4 +129,17 @@
 .err_msg {
   text-align: center;
   width: 100%;
+}
+
+.load_full_back_container {
+  position: absolute;
+  left: 25px;
+  top: 16px;
+  width: 24px;
+  height: 24px;
+  z-index: 350;
+  background: #ffffff;
+  -webkit-mask-image: url('data:image/png;base64,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');
+  -webkit-mask-size: cover;
+  -webkit-mask-repeat: no-repeat;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ray-ipc-player",
-  "version": "2.0.18-beta-2",
+  "version": "2.0.18-beta-4",
   "description": "ray小程序播放器",
   "keywords": [
     "tuya-miniapp",
@@ -36,7 +36,7 @@
   },
   "peerDependencies": {},
   "dependencies": {
-    "classnames": "^2.3.1",
+    "clsx": "^1.2.1",
     "immer": "^9.0.15",
     "use-immer": "^0.5.1",
     "@ray-js/panel-sdk": "^1.13.1"