@ray-js/ipc-player-integration 0.0.1-beta-9 → 0.0.1-beta-11

package/lib/ctx/ctx.composition.js

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["title", "duration"];
 import { createUseCtx } from './ctx';
-import { Battery, Screenshot, TempHumidity, RecordVideo, FullScreen, VideoBitKbps, Muted } from '../plugins';
+import { Battery, Screenshot, TempHumidity, RecordVideo, FullScreen, VideoBitKbps, Muted, Resolution } from '../plugins';
 import { authorizeStatus } from '../utils/authorize';
 const createPlayContext = ty.createIpcPlayerContext;
 // const createPlayContext = () => null;
@@ -27,6 +27,9 @@ const bottomContent = [{
 }, {
   id: 'Muted',
   content: Muted
+}, {
+  id: 'Resolution',
+  content: Resolution
 }, {
   id: 'FullScreen',
   content: FullScreen

package/lib/ctx/ctx.js

@@ -28,6 +28,9 @@ export const createUseCtx = _ref => {
     // 静音
     const mute = useAtom(false);
 
+    // 清晰度
+    const resolution = useAtom('HD');
+
     // 对讲中
     const intercom = useAtom(false);
     const playState = useAtom(PlayState.CONNECTING);
@@ -41,12 +44,19 @@ export const createUseCtx = _ref => {
     if (!IPCPlayerInstance.current) {
       IPCPlayerInstance.current = createPlayContext(devId);
     }
+
+    /**
+     * 设置清晰度
+     *
+     */
+
     return {
       devId,
       saveToAlbum,
       screenType,
       recording,
       mute,
+      resolution,
       intercom,
       playState,
       setPlayState,
@@ -104,6 +114,24 @@ export const createUseCtx = _ref => {
           });
         });
       },
+      setResolution: async target => {
+        console.log('执行清晰度方法');
+        return new Promise((resolve, reject) => {
+          IPCPlayerInstance.current.setClarity({
+            clarity: target,
+            success: () => {
+              console.log('setClarity success');
+              updateAtom(resolution, target === 'hd' ? 'HD' : 'SD');
+              resolve(true);
+            },
+            fail: err => {
+              console.log('setClarity err');
+              // updateAtom(mute, !target);
+              reject(err);
+            }
+          });
+        });
+      },
       setRecording: async target => {
         const store = getDefaultStore();
         const _recording = store.get(recording);

package/lib/plugins/index.d.ts

@@ -6,3 +6,4 @@ export * from './fullScreen';
 export * from './videoBitKbps';
 export * from './voiceIntercom';
 export * from './muted';
+export * from './resolution';

package/lib/plugins/index.js

@@ -5,4 +5,5 @@ export * from './recordVideo';
 export * from './fullScreen';
 export * from './videoBitKbps';
 export * from './voiceIntercom';
-export * from './muted';
+export * from './muted';
+export * from './resolution';

package/lib/plugins/resolution/index.d.ts

@@ -0,0 +1 @@
+export * from './resolution';

package/lib/plugins/resolution/index.js

@@ -0,0 +1 @@
+export * from './resolution';

package/lib/plugins/resolution/resolution.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './resolution.less';
+export declare const Resolution: (props: ComponentConfigProps) => React.JSX.Element;

package/lib/plugins/resolution/resolution.js

@@ -0,0 +1,42 @@
+import { View, Text } from '@ray-js/ray';
+import React, { useEffect } from 'react';
+import { useStore } from '../../ctx/store';
+import './resolution.less';
+export const Resolution = props => {
+  console.log(props, 'props');
+  const {
+    IPCPlayerContext,
+    resolution,
+    setResolution
+  } = props;
+  const {
+    currentResolution
+  } = useStore({
+    currentResolution: resolution
+  });
+  // const setIsMuted = (value: typeof currentResolution) => {
+  //   // updateAtom(mute, value);
+  // };
+
+  useEffect(() => {
+    // init();
+  }, []);
+  return /*#__PURE__*/React.createElement(View, {
+    onClick: () => {
+      console.log('_____');
+      setResolution(currentResolution === 'HD' ? 'normal' : 'hd');
+      // // IPCPlayerContext.setMuted({
+      // //   mute: !isMuted,
+      // //   success: res => {
+      // //     setIsMuted(!isMuted);
+      // //   },
+      // //   fail: res => {
+      // //     console.log('res===setMuted err', res);
+      // //   },
+      // // });
+    },
+    className: "resolutionWrapper"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "resolutionText"
+  }, currentResolution));
+};

package/lib/plugins/resolution/resolution.less

@@ -0,0 +1,15 @@
+.resolutionWrapper {
+  background-color: rgba(255,255,255,0.2);
+  padding: 2px 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8rpx;
+  backdrop-filter: blur(8rpx);
+  .resolutionText {
+    color: #ffffff;
+    font-weight: 600;
+    font-size: 24rpx;
+    
+  }
+}

package/lib/ui/ui.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useRef, useMemo, useEffect, useCallback } from 'react';
-import { View, CoverView, getSystemInfoSync } from '@ray-js/ray';
+import { View, CoverView, getSystemInfoSync, usePageEvent } from '@ray-js/ray';
 import clsx from 'clsx';
 import IPCPlayer from '@ray-js/ray-ipc-player';
 import { PlayState, PlayerStreamStatus } from '../interface';
@@ -31,6 +31,7 @@ const defaultCSSVariable = {
 };
 const HIDE_COMPONENT_TIME = 5000;
 export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
+  console.log(props, 'props');
   const {
     className,
     devId,
@@ -38,8 +39,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     CSSVariable = defaultCSSVariable
   } = props;
   const instance = getCtxInstance(props.instance, devId);
+  console.log(instance, 'instance');
   const {
-    setPlayState
+    setPlayState,
+    setScreenType
   } = instance;
   const prevTriggerEvent = useRef();
   const eventRef = useRef();
@@ -47,6 +50,17 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   if (!eventRef.current) {
     eventRef.current = getEventInstance();
   }
+
+  /**
+   * 监听屏幕布局变化
+   */
+  usePageEvent('onResize', sizeData => {
+    const {
+      type
+    } = sizeData;
+    console.log('监听到屏幕布局变化', type);
+    setScreenType(type);
+  });
   const systemInfo = useRef(null);
   if (!systemInfo.current) {
     systemInfo.current = getSystemInfoSync();
@@ -175,17 +189,32 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     // onCtx={getIpcPlayer}
     // onPlayerTap={handlePlayerClick}
     ,
-    onZoomChange: () => {
-      console.log('res===onZoomChange');
-    },
-    onSessionDidDisconnected: () => {
-      console.log('res===onSessionDidDisconnected');
+    onZoomChange: data => {
+      console.log(`zoomChange事件: ${JSON.stringify(data)}`);
+      ty.showToast({
+        title: `zoomChange事件: ${JSON.stringify(data)}`
+      });
+      setTimeout(() => {
+        ty.hideToast();
+      }, 3000);
     },
-    onCameraPreviewFailure: () => {
-      console.log('res===onCameraPreviewFailure');
+    onCameraPreviewFailure: data => {
+      console.log(`onCameraPreviewFailure事件: ${JSON.stringify(data)}`);
+      ty.showToast({
+        title: `onCameraPreviewFailure事件: ${JSON.stringify(data)}`
+      });
+      setTimeout(() => {
+        ty.hideToast();
+      }, 3000);
     },
-    onCameraNotifyWeakNetwork: () => {
-      console.log('res===onCameraNotifyWeakNetwork');
+    onCameraNotifyWeakNetwork: data => {
+      console.log(`onCameraNotifyWeakNetwork: ${JSON.stringify(data)}`);
+      ty.showToast({
+        title: `onCameraNotifyWeakNetwork: ${JSON.stringify(data)}`
+      });
+      setTimeout(() => {
+        ty.hideToast();
+      }, 3000);
     },
     clarity: "hd",
     privateState: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.1-beta-9",
+  "version": "0.0.1-beta-11",
   "description": "IPC 播放器功能集成",
   "main": "lib/index",
   "files": [