@ray-js/ipc-player-integration 0.0.35-beta.5 → 0.0.35-beta.7

package/lib/features/initPlayerWidgets/index.js

@@ -52,7 +52,6 @@ export async function initPlayerWidgets(ctx, options) {
       newDefaultBottomLeftContent[magnificationIndex].hidden = false;
     }
   }
-  console.log('res===1', newDefaultBottomLeftContent);
   ctx.addContent('bottomLeft', newDefaultBottomLeftContent);
   const newDefaultBottomRightContent = _cloneDeep(options.bottomRightContent || defaultBottomRightContent);
   const fullScreenIndex = newDefaultBottomRightContent.findIndex(item => item.id === 'FullScreen');

package/lib/ui/bottomLeftContent.js

@@ -96,6 +96,7 @@ const BottomLeftContent = _ref => {
     style: {
       paddingBottom: screenType === 'vertical' ? '14px' : '32px',
       paddingLeft: `${paddingLeftPx}px`,
+      paddingRight: '16px',
       width: '100%',
       overflowX: 'auto',
       overflowY: 'hidden',

package/lib/ui/ui.js

@@ -22,7 +22,6 @@ import { useMemoizedFn } from '../hooks';
 import { Storage } from '../utils/storage';
 import './ui.less';
 import { updatePlayerWidgetProps } from '../features';
-import { isSmallScreen } from '../utils';
 import { getSmartImageQualityState } from '../utils/ttt';
 function getCtxInstance(instance, devId) {
   if (instance) return instance;
@@ -104,18 +103,31 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   useImperativeHandle(eventRefProp, () => eventRef.current, [eventRef.current]);
   const timer = useRef();
   const reGetOrientationTimer = useRef(null);
-  const [scaleMultiple, setScaleMultiple] = useState(playerFit === 'contain' ? 1 : -2);
-  const [currentZoomLevel, setCurrentZoomLevel] = useState(playerFit === 'contain' ? 1 : -2);
+  // 统一调整为1倍缩放，保证画面展示完全
+  const [scaleMultiple, setScaleMultiple] = useState(1);
+  // 统一调整为1倍缩放，保证画面展示完全
+  const [currentZoomLevel, setCurrentZoomLevel] = useState(1);
   const [createCtx, setCreateCtx] = useState(false);
   // 是否需要忽略进入后台停止预览
   const [ignoreStopOnHide, setIgnoreStopOnHide] = useState(ignoreHideStopPreview);
   const [verticalCoverZoom, setVerticalCoverZoom] = useState(-2);
-  // const [verticalCoverZoom, setVerticalCoverZoom] = useState(-2);
-  // const [verticalZoomLevel, setVerticalZoomLevel] = useState(playerFit === 'contain' ? 1 : -2);
 
   // 展示顶部内容
   const [showTopContent, setShowTopContent] = useState(true);
 
+  // pad / 折叠屏小窗口展示面板的情况；getSystemInfoSync 在 onLoad 之后才有准确值，
+  // 这里给安全默认 false，由 onLoad / onResize 实际计算并更新
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+  const computeIsSmallScreen = useMemoizedFn(() => {
+    const {
+      windowWidth,
+      screenWidth,
+      windowHeight
+    } = getSystemInfoSync();
+    // 取小屏值判断是最准确的 pad / 折叠屏小窗口情况
+    return !(screenWidth === windowWidth || screenWidth === windowHeight);
+  });
+
   // 外部传入的ignoreHideStopPreview变化时，同步更新
   useEffect(() => {
     setIgnoreStopOnHide(ignoreHideStopPreview);
@@ -407,8 +419,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       eventRef.current.emit(showAllComponent);
       eventRef.current.emit('disablePlayerTap', true);
       eventRef.current.emit(pauseTimeToHideAllComponent);
-      // 按宽填充，保证播放流宽度为屏幕宽度，高度自适应
-      setScaleMultiple(-1);
+      // 按宽填充，保证播放流宽度为屏幕宽度，高度自适应设为1倍
+      setScaleMultiple(1);
     } else {
       // 短屏或横屏时，恢复自动隐藏
       eventRef.current.emit('disablePlayerTap', false);
@@ -417,8 +429,9 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   }, [isVerticalFullLayout, screenType, playerFit]);
   useEffect(() => {
     if (createCtx) {
-      setScaleMultiple(playerFit === 'contain' ? 1 : -2);
-      setCurrentZoomLevel(playerFit === 'contain' ? 1 : -2);
+      // 统一调整为1倍缩放，保证画面展示完全
+      setScaleMultiple(1);
+      setCurrentZoomLevel(1);
     }
   }, [playerFit, createCtx]);
   useEffect(() => {
@@ -427,10 +440,14 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   }, [brandColor, verticalMic]);
   const refreshSmartImageQuality = useMemoizedFn(() => {
     getSmartImageQualityState(devId).then(res => {
+      if (res === undefined) return;
       updatePlayerWidgetProps(instance, 'bottomLeft', 'TryExperience', {
+        isPurchase: res.isPurchase,
         buttonState: res.buttonState,
         trialRemainingSec: res.trialRemainingSec,
         refreshToken: Date.now()
+      }).catch(() => {
+        // ignore
       });
     });
   });
@@ -468,6 +485,13 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
    * 监听播放器实例创建完成
    */
 
+  /**
+   * 页面 onLoad 后才能拿到准确的 systemInfo，这里第一次确定小屏状态
+   */
+  usePageEvent('onLoad', () => {
+    setIsSmallScreen(computeIsSmallScreen());
+  });
+
   /**
    * 监听屏幕布局变化
    */
@@ -481,8 +505,13 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       const {
         type
       } = sizeData;
+
+      // 折叠屏展开/收起、pad 多窗口拖拽等场景，需要重新计算并同步
+      const small = computeIsSmallScreen();
+      setIsSmallScreen(small);
+
       //  针对pad 和折叠屏展开的情况暂不支持横屏，且在ios pad模式下 会触发onResize事件, 待解决
-      if (isSmallScreen) {
+      if (small) {
         setScreenType('vertical');
       } else {
         setScreenType(type === 'landscape' ? 'full' : 'vertical');
@@ -497,19 +526,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
         }
         triggerEvent(showAllComponent);
       }
-      // 若为全屏模式并且要求按宽填充，即横屏时充满，主动设置模式为-1即可
-      if (type === 'landscape' && landscapeMode === 'fill') {
-        console.log(scaleMultiple, '===========fill');
-        setScaleMultiple(-1);
-      } else if (type === 'landscape' && landscapeMode === 'standard') {
-        console.log(scaleMultiple, '===========landscape');
-        setScaleMultiple(-2);
-      } else {
-        // 竖屏时 将屏幕播放比例设为按宽按高
-
-        console.log(scaleMultiple, '===========landscape');
-        setScaleMultiple(playerFit === 'contain' ? scaleMultiple === 1 ? -1 : 1 : -2);
-      }
+      // 横屏（fill/standard）与竖屏均统一调整为 1 倍缩放，保证画面完整展示
+      setScaleMultiple(1);
     } catch (err) {
       console.log(err, 'err');
     }
@@ -673,10 +691,12 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
       }
     }
     if (playState === PlayState.PLAYING) {
-      // 仅在第一次播放成功时，针对竖屏并且为cover模式时，设置为-2
+      // 仅在第一次播放成功时，针对竖屏并且为cover模式时，设置为-2 修改为只针对第一次播放成功时
       console.log('Playing状态');
-      if (screenType === 'vertical' && playerFit === 'cover' && !hasPlayedRef.current) {
-        setScaleMultiple(-2);
+      // if (screenType === 'vertical' && playerFit === 'cover' && !hasPlayedRef.current) {
+      if (!hasPlayedRef.current) {
+        // 统一调整为1倍缩放，保证画面展示完全
+        setScaleMultiple(1);
         hasPlayedRef.current = true;
       }
     }
@@ -792,14 +812,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
   /**
    * 监听当前的zoom比例状态
    */
-  // useEffect(() => {
-  //   if (screenType === 'vertical') {
-  //     console.log(currentZoomLevel, '竖屏时的缩放比例');
-  //     setVerticalZoomLevel(currentZoomLevel);
-  //     // setScaleMultiple(currentZoomLevel);
-  //   }
-  // }, [screenType, currentZoomLevel]);
-
   const onZoomChange = useMemoizedFn(data => {
     const {
       zoomLevel,
@@ -810,30 +822,19 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     if (zoomLevel === 0) {
       return false;
     }
-    /**
-     * 针对竖屏为cover模式时，横屏为standard模式时，主动设置缩放比例，避免因值不能正常变化
-     */
-    if (scaleMode === -2 && playerFit === 'cover' && screenType === 'vertical' && landscapeMode === 'standard') {
-      console.log('dsadsadsad----', zoomLevel);
-      setScaleMultiple(zoomLevel);
-    }
     /**
      * 针对竖屏为contain模式时，横屏为fill模式时，主动设置缩放比例，避免因值不能正常变化
      */
-    if (scaleMode === -1 && playerFit === 'contain' && screenType === 'vertical' && landscapeMode === 'fill') {
-      setVerticalCoverZoom(zoomLevel);
-    }
+    // if (
+    //   scaleMode === -1 &&
+    //   playerFit === 'contain' &&
+    //   screenType === 'vertical' &&
+    //   landscapeMode === 'fill'
+    // ) {
+    //   setVerticalCoverZoom(zoomLevel);
+    // }
 
-    /**
-     * 横屏情况下 针对竖屏为contain模式时，横屏为fill模式时，主动设置缩放比例，避免因值不能正常变化
-     */
-    if (scaleMode === -2 && playerFit === 'cover' && screenType !== 'vertical' && landscapeMode === 'standard') {
-      setScaleMultiple(zoomLevel);
-    }
-    if (scaleMode === -1 && playerFit === 'contain' && screenType !== 'vertical' && landscapeMode === 'fill') {
-      setVerticalCoverZoom(zoomLevel);
-      setScaleMultiple(zoomLevel);
-    }
+    // 直接记录当前缩放比例
     setCurrentZoomLevel(zoomLevel);
     instance.event.emit(zoomLevelChange, zoomLevel);
     return false;

package/lib/utils/index.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="jest" />
-export declare const isSmallScreen: boolean;
 /**
  * 麦克风对讲按钮径向渐变
  */

package/lib/utils/index.js

@@ -1,14 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import { getSystemInfoSync } from '@ray-js/ray';
-const {
-  windowWidth,
-  screenWidth,
-  windowHeight
-} = getSystemInfoSync();
-
-// pad和折叠屏小窗口展示面板的情况
-export const isSmallScreen = !(screenWidth === windowWidth || screenWidth === windowHeight);
-
 /**
  * 麦克风对讲按钮径向渐变
  */

package/lib/utils/navigation.d.ts

@@ -4,3 +4,4 @@ export declare const miniIdLabs: {
 };
 export declare function gotoAIDrawMiniProgram(devId: string, brandColor: string): void;
 export declare function gotoSecurityCloudService(homeId: string, uuid: string): Promise<void>;
+export declare function gotoSecurityCloudService2(devId: string): Promise<import("@ray-js/ray-ipc-utils/lib/interface").IRes<unknown>>;

package/lib/utils/navigation.js

@@ -1,4 +1,4 @@
-import { goToMiniProgramByShortLink } from '@ray-js/ray-ipc-utils';
+import { getServiceUrl, goToMiniProgramByShortLink } from '@ray-js/ray-ipc-utils';
 import Color from 'color';
 
 // 小程序ID集合
@@ -17,4 +17,7 @@ export function gotoAIDrawMiniProgram(devId, brandColor) {
 export async function gotoSecurityCloudService(homeId, uuid) {
   const url = `godzilla://${miniIdLabs.securityCloudService}${'/pages/serviceList/index'}?homeId=${homeId}&deviceId=${uuid}&categoryCode=${'security_cloud_service'}`;
   goToMiniProgramByShortLink(url, 'right');
+}
+export async function gotoSecurityCloudService2(devId) {
+  return getServiceUrl(devId, 'security_cloud_service', {}, true);
 }

package/lib/utils/ttt.d.ts

@@ -37,3 +37,4 @@ export declare function getAIFrameFeature(devId: string): Promise<GetAIFrameFeat
 export declare function setAIFrameFeature(params: SetAIFrameFeatureParams): Promise<any>;
 export declare function getDeviceInfoRay(devId: string): Promise<unknown>;
 export declare function getCurrentHomeInfoRay(): Promise<unknown>;
+export declare function setTrailFinish(devId: string): Promise<unknown>;

package/lib/utils/ttt.js

@@ -1,11 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 export function getSmartImageQualityState(devId) {
-  return new Promise((resolve, reject) => {
-    var _ty;
-    if (typeof ((_ty = ty) === null || _ty === void 0 || (_ty = _ty.ipc) === null || _ty === void 0 ? void 0 : _ty.getSmartImageQualityState) !== 'function') {
-      reject(new Error('getSmartImageQualityState is not supported'));
-      return;
-    }
+  return new Promise(resolve => {
     try {
       ty.ipc.getSmartImageQualityState({
         devId,
@@ -14,24 +9,17 @@ export function getSmartImageQualityState(devId) {
           console.log('res===getSmartImageQualityState data', data);
           resolve(data);
         },
-        fail: e => {
-          console.warn('res===getSmartImageQualityState fail', e);
-          reject(e);
+        fail: () => {
+          resolve(undefined);
         }
       });
     } catch (e) {
-      console.warn('res===getSmartImageQualityState exception', e);
-      reject(e);
+      resolve(undefined);
     }
   });
 }
 export function getAIFrameFeature(devId) {
-  return new Promise((resolve, reject) => {
-    var _ty2;
-    if (typeof ((_ty2 = ty) === null || _ty2 === void 0 || (_ty2 = _ty2.ipc) === null || _ty2 === void 0 ? void 0 : _ty2.getAIFrameFeature) !== 'function') {
-      reject(new Error('getAIFrameFeature is not supported'));
-      return;
-    }
+  return new Promise(resolve => {
     try {
       ty.ipc.getAIFrameFeature({
         devId,
@@ -41,22 +29,16 @@ export function getAIFrameFeature(devId) {
         },
         fail: e => {
           console.warn('res===getAIFrameFeature fail', e);
-          reject(e);
+          resolve(undefined);
         }
       });
     } catch (e) {
-      console.warn('res===getAIFrameFeature exception', e);
-      reject(e);
+      resolve(undefined);
     }
   });
 }
 export function setAIFrameFeature(params) {
-  return new Promise((resolve, reject) => {
-    var _ty3;
-    if (typeof ((_ty3 = ty) === null || _ty3 === void 0 || (_ty3 = _ty3.ipc) === null || _ty3 === void 0 ? void 0 : _ty3.setAIFrameFeature) !== 'function') {
-      reject(new Error('setAIFrameFeature is not supported'));
-      return;
-    }
+  return new Promise(resolve => {
     try {
       ty.ipc.setAIFrameFeature(_objectSpread(_objectSpread({}, params), {}, {
         success: data => {
@@ -65,55 +47,61 @@ export function setAIFrameFeature(params) {
         },
         fail: e => {
           console.warn('res===setAIFrameFeature fail', e);
-          reject(e);
+          resolve(undefined);
         }
       }));
     } catch (e) {
-      console.warn('res===setAIFrameFeature exception', e);
-      reject(e);
+      resolve(undefined);
     }
   });
 }
 export function getDeviceInfoRay(devId) {
-  return new Promise((resolve, reject) => {
-    var _ty4;
-    if (typeof ((_ty4 = ty) === null || _ty4 === void 0 || (_ty4 = _ty4.device) === null || _ty4 === void 0 ? void 0 : _ty4.getDeviceInfo) !== 'function') {
-      reject(new Error('getDeviceInfo is not supported'));
-      return;
-    }
+  return new Promise(resolve => {
     try {
       ty.device.getDeviceInfo({
         deviceId: devId,
         success: res => {
           resolve(res);
         },
-        fail: error => {
-          reject(error);
+        fail: () => {
+          resolve(undefined);
         }
       });
     } catch (e) {
-      reject(e);
+      resolve(undefined);
     }
   });
 }
 export function getCurrentHomeInfoRay() {
-  return new Promise((resolve, reject) => {
-    var _ty5;
-    if (typeof ((_ty5 = ty) === null || _ty5 === void 0 || (_ty5 = _ty5.home) === null || _ty5 === void 0 ? void 0 : _ty5.getCurrentHomeInfo) !== 'function') {
-      reject(new Error('getCurrentHomeInfo is not supported'));
-      return;
-    }
+  return new Promise(resolve => {
     try {
       ty.home.getCurrentHomeInfo({
         success: res => {
           resolve(res);
         },
-        fail: error => {
-          reject(error);
+        fail: () => {
+          resolve(undefined);
+        }
+      });
+    } catch (e) {
+      resolve(undefined);
+    }
+  });
+}
+export function setTrailFinish(devId) {
+  return new Promise(resolve => {
+    try {
+      ty.ipc.setTrailFinish({
+        devId,
+        success: res => {
+          resolve(res);
+        },
+        fail: () => {
+          resolve(undefined);
         }
       });
     } catch (e) {
-      reject(e);
+      resolve(undefined);
     }
   });
 }

package/lib/widgets/trialBadge/useTrialBadge.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
-import { getCurrentHomeInfoRay, getDeviceInfoRay } from '../../utils/ttt';
-import { gotoSecurityCloudService } from '../../utils';
+import { setTrailFinish } from '../../utils/ttt';
+import { gotoSecurityCloudService2 } from '../../utils';
 import { trialCountdownEnd } from '../../ui/constant';
 import Strings from '../../i18n';
 export const useTrialBadge = (event, devId, trialRemainingSec) => {
@@ -12,12 +12,14 @@ export const useTrialBadge = (event, devId, trialRemainingSec) => {
   }, [trialRemainingSec]);
   const handleTrialSubscribe = useCallback(async () => {
     try {
-      const homeInfo = await getCurrentHomeInfoRay();
-      const deviceInfo = await getDeviceInfoRay(devId);
-      console.log('res===', deviceInfo, homeInfo);
-      gotoSecurityCloudService(homeInfo.homeId, deviceInfo.uuid);
+      // const homeInfo = await getCurrentHomeInfoRay();
+      // const deviceInfo = await getDeviceInfoRay(devId);
+      // if (homeInfo !== undefined && deviceInfo !== undefined) {
+      // console.log('res===', deviceInfo, homeInfo);
+      // gotoSecurityCloudService(homeInfo.homeId, deviceInfo.uuid);
+      const res = await gotoSecurityCloudService2(devId);
+      console.log('res===gotoSecurityCloudService2', res);
     } catch (error) {
-      console.log('res===handleTrialSubscribe error', error);
       ty.showToast({
         title: Strings.getLang('ipc_player_fetch_error'),
         icon: 'none'
@@ -26,9 +28,9 @@ export const useTrialBadge = (event, devId, trialRemainingSec) => {
   }, [devId]);
   const handleCountdownEnd = useCallback(async () => {
     try {
-      console.log('res===handleCountdownEnd');
       setShowTrialBadge(false);
       event.emit(trialCountdownEnd);
+      await setTrailFinish(devId);
     } catch (error) {
       ty.showToast({
         title: Strings.getLang('ipc_player_fetch_error'),

package/lib/widgets/tryExperience/tryExperience.d.ts

@@ -5,6 +5,8 @@ type Props = ComponentConfigProps & {
     className?: string;
     hideTryExperienceMenu?: boolean;
     buttonState?: number;
+    trialRemainingSec?: number;
+    isPurchase?: boolean;
 };
 export declare const TryExperience: (props: Props) => React.JSX.Element | null;
 export {};

package/lib/widgets/tryExperience/tryExperience.js

@@ -1,6 +1,6 @@
 import { View, Image, getSystemInfoSync } from '@ray-js/ray';
 import clsx from 'clsx';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useStore } from '../../ctx/store';
 import { gotoAIDrawMiniProgram } from '../../utils';
 import tryZh from '../../res/try/try_zh.png';
@@ -41,27 +41,41 @@ export const TryExperience = props => {
   const {
     className,
     hideTryExperienceMenu,
-    buttonState
+    buttonState,
+    trialRemainingSec,
+    isPurchase
   } = props;
   const {
     brandColor
   } = useStore({
     brandColor: props.brandColor
   });
+  const [imgSrc, setImgSrc] = useState();
+  useEffect(() => {
+    const iconUrl = pickIconByStatus(buttonState);
+    setImgSrc(iconUrl);
+  }, [buttonState]);
   if (hideTryExperienceMenu) {
     return null;
   }
-  const iconUrl = pickIconByStatus(buttonState);
   return /*#__PURE__*/React.createElement(View, {
     className: clsx(className),
     onClick: () => {
-      gotoAIDrawMiniProgram(props.devId, brandColor);
+      if (buttonState === TryExperienceStatus.Open) {
+        setImgSrc(tryOpen);
+      } else if (buttonState === TryExperienceStatus.Close && isPurchase) {
+        setImgSrc(tryClose);
+      } else if (buttonState === TryExperienceStatus.Close && trialRemainingSec < 300 && trialRemainingSec > 0) {
+        setImgSrc(tryClose);
+      } else {
+        gotoAIDrawMiniProgram(props.devId, brandColor);
+      }
     }
   }, /*#__PURE__*/React.createElement(View, {
     className: "try-experience-box"
-  }, /*#__PURE__*/React.createElement(Image, {
+  }, imgSrc && /*#__PURE__*/React.createElement(Image, {
     className: "try-experience-icon",
-    src: iconUrl,
+    src: imgSrc,
     mode: "heightFix"
   })));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.35-beta.5",
+  "version": "0.0.35-beta.7",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [
@@ -64,7 +64,7 @@
   "husky": {
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",
-      "pre-commit": "lint-staged"
+      "pre-commit": "node ./scripts/check-protected-files.js && lint-staged"
     }
   },
   "lint-staged": {