@ray-js/ipc-player-integration 0.0.34 → 0.0.35-beta.10

package/lib/widgets/siren/siren.d.ts

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

package/lib/widgets/siren/siren.js

@@ -0,0 +1,55 @@
+import { View, Text } from '@ray-js/ray';
+import React, { useContext } from 'react';
+import clsx from 'clsx';
+import { useDpState } from '../../hooks';
+import { useStore } from '../../ctx/store';
+import { UIEventContext } from '../../ui/context';
+import { widgetLabs, widgetClick, pauseTimeToHideAllComponent, startTimeToHideAllComponent } from '../../ui/constant';
+import './siren.less';
+const SIREN_SWITCH_DP_CODE = 'siren_switch';
+export const Siren = props => {
+  const {
+    devId,
+    screenType: screenTypeAtom,
+    className,
+    event: propsEvent
+  } = props;
+  const {
+    event: ctxEvent
+  } = useContext(UIEventContext);
+  const event = propsEvent !== null && propsEvent !== void 0 ? propsEvent : ctxEvent;
+  const {
+    screenType,
+    brandColor
+  } = useStore({
+    screenType: screenTypeAtom,
+    brandColor: props.brandColor
+  });
+  const [state, dpSchema, sendDp] = useDpState({
+    devId,
+    dpCodes: [SIREN_SWITCH_DP_CODE]
+  });
+  const supported = !!(dpSchema !== null && dpSchema !== void 0 && dpSchema[SIREN_SWITCH_DP_CODE]);
+  const enabled = !!state[SIREN_SWITCH_DP_CODE];
+  if (screenType !== 'full' || !supported) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(className),
+    onClick: () => {
+      event.emit(widgetClick, {
+        widgetId: widgetLabs.SIREN
+      });
+      event.emit(pauseTimeToHideAllComponent);
+      sendDp({
+        [SIREN_SWITCH_DP_CODE]: !enabled
+      });
+      event.emit(startTimeToHideAllComponent);
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-jingdi', 'ipc-player-plugin-siren-text-icon'),
+    style: {
+      color: enabled ? brandColor : undefined
+    }
+  }));
+};

package/lib/widgets/siren/siren.less

@@ -0,0 +1,4 @@
+.ipc-player-plugin-siren-text-icon {
+  color: var(--iconColor);
+  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
+}

package/lib/widgets/trialBadge/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import './index.less';
+type Props = {
+    className?: string;
+    /** 主题色（用于「开通」按钮背景）。默认与 player brandColor 一致 */
+    brandColor?: string;
+    /** 试看倒计时初始秒数，来源于 smartImageQualityState.trialRemainingSec */
+    trialRemainingSec?: number;
+    /** 刷新令牌，变化时重置倒计时状态 */
+    refreshToken?: number;
+    /** 点击「开通」按钮回调 */
+    onSubscribe?: () => void;
+    /** 倒计时归零时触发，本组件保证整个生命周期内只回调一次 */
+    onCountdownEnd?: () => void;
+};
+export declare const TrialBadge: ({ className, brandColor, trialRemainingSec, refreshToken, onSubscribe, onCountdownEnd, }: Props) => React.JSX.Element;
+export { useTrialBadge } from './useTrialBadge';

package/lib/widgets/trialBadge/index.js

@@ -0,0 +1,88 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Image, Text, View } from '@ray-js/ray';
+import clsx from 'clsx';
+import Strings from '../../i18n';
+import tryOpen from '../../res/try/try_open.png';
+import './index.less';
+/** 兜底主题色，与 player ctx 中 brandColor 默认值保持一致 */
+const FALLBACK_BRAND_COLOR = '#FF592A';
+
+/** 将秒数格式化为 mm:ss */
+const formatCountdown = seconds => {
+  const safe = Math.max(0, Math.floor(seconds));
+  const m = Math.floor(safe / 60);
+  return `${String(m).padStart(2, '0')}:${String(safe % 60).padStart(2, '0')}`;
+};
+export const TrialBadge = _ref => {
+  let {
+    className,
+    brandColor = FALLBACK_BRAND_COLOR,
+    trialRemainingSec = 0,
+    refreshToken,
+    onSubscribe,
+    onCountdownEnd
+  } = _ref;
+  const [remainingSec, setRemainingSec] = useState(Math.max(0, Math.floor(trialRemainingSec)));
+  /** 防止 onCountdownEnd 被重复触发；同时持有最新回调，避免依赖变化导致 effect 重跑 */
+  const endedRef = useRef(false);
+  const onCountdownEndRef = useRef(onCountdownEnd);
+  onCountdownEndRef.current = onCountdownEnd;
+  useEffect(() => {
+    endedRef.current = false;
+    setRemainingSec(Math.max(0, Math.floor(trialRemainingSec)));
+  }, [trialRemainingSec, refreshToken]);
+  useEffect(() => {
+    if (remainingSec <= 0) {
+      if (!endedRef.current) {
+        var _onCountdownEndRef$cu;
+        endedRef.current = true;
+        (_onCountdownEndRef$cu = onCountdownEndRef.current) === null || _onCountdownEndRef$cu === void 0 || _onCountdownEndRef$cu.call(onCountdownEndRef);
+      }
+      return undefined;
+    }
+    const timer = setInterval(() => {
+      setRemainingSec(prev => {
+        const next = prev - 1;
+        if (next <= 0) {
+          clearInterval(timer);
+          if (!endedRef.current) {
+            var _onCountdownEndRef$cu2;
+            endedRef.current = true;
+            (_onCountdownEndRef$cu2 = onCountdownEndRef.current) === null || _onCountdownEndRef$cu2 === void 0 || _onCountdownEndRef$cu2.call(onCountdownEndRef);
+          }
+          return 0;
+        }
+        return next;
+      });
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [trialRemainingSec, refreshToken]);
+  const countdownText = formatCountdown(remainingSec);
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx('ipc-player-trial-badge', className)
+  }, /*#__PURE__*/React.createElement(Image, {
+    className: "ipc-player-trial-badge-icon",
+    src: tryOpen,
+    mode: "heightFix"
+  }), /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-trial-badge-status"
+  }, Strings.getLang('ipc_player_trial_in_use')), /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-trial-badge-divider"
+  }, "|"), /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-trial-badge-preview"
+  }, `${countdownText} ${Strings.getLang('ipc_player_trial_preview_text')}`), /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-trial-badge-cta",
+    style: {
+      backgroundColor: brandColor
+    },
+    onClick: e => {
+      if (e && typeof e.stopPropagation === 'function') {
+        e.stopPropagation();
+      }
+      onSubscribe === null || onSubscribe === void 0 || onSubscribe();
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-trial-badge-cta-text"
+  }, Strings.getLang('ipc_player_trial_subscribe'))));
+};
+export { useTrialBadge } from './useTrialBadge';

package/lib/widgets/trialBadge/index.less

@@ -0,0 +1,57 @@
+.ipc-player-trial-badge {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 4px 0 8px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.65);
+  flex-shrink: 0;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.ipc-player-trial-badge-icon {
+  display: block;
+  height: 20px;
+  width: auto;
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+
+.ipc-player-trial-badge-status {
+  font-size: 12px;
+  color: #ffffff;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.ipc-player-trial-badge-divider {
+  margin: 0 6px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.45);
+  line-height: 1;
+}
+
+.ipc-player-trial-badge-preview {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.78);
+  line-height: 1;
+  margin-right: 8px;
+}
+
+.ipc-player-trial-badge-cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 22px;
+  padding: 0 10px;
+  border-radius: 11px;
+  flex-shrink: 0;
+}
+
+.ipc-player-trial-badge-cta-text {
+  font-size: 12px;
+  color: #ffffff;
+  font-weight: 600;
+  line-height: 1;
+}

package/lib/widgets/trialBadge/useTrialBadge.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { EventInstance } from '../../interface';
+export declare const useTrialBadge: (event: EventInstance, devId: string, trialRemainingSec: number) => {
+    showTrialBadge: boolean;
+    setShowTrialBadge: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    handleTrialSubscribe: () => Promise<void>;
+    handleCountdownEnd: () => Promise<void>;
+};

package/lib/widgets/trialBadge/useTrialBadge.js

@@ -0,0 +1,42 @@
+import { useCallback, useEffect, useState } from 'react';
+import { setTrailFinish } from '../../utils/ttt';
+import { gotoSecurityCloudService2 } from '../../utils';
+import { trialCountdownEnd } from '../../ui/constant';
+import Strings from '../../i18n';
+export const useTrialBadge = (event, devId, trialRemainingSec) => {
+  const [showTrialBadge, setShowTrialBadge] = useState(false);
+  useEffect(() => {
+    if (trialRemainingSec > 0 && trialRemainingSec < 300) {
+      setShowTrialBadge(true);
+    }
+  }, [trialRemainingSec]);
+  const handleTrialSubscribe = useCallback(async () => {
+    try {
+      const res = await gotoSecurityCloudService2(devId);
+      console.log('res===gotoSecurityCloudService2', res);
+    } catch (error) {
+      ty.showToast({
+        title: Strings.getLang('ipc_player_fetch_error'),
+        icon: 'none'
+      });
+    }
+  }, [devId]);
+  const handleCountdownEnd = useCallback(async () => {
+    try {
+      setShowTrialBadge(false);
+      event.emit(trialCountdownEnd);
+      await setTrailFinish(devId);
+    } catch (error) {
+      ty.showToast({
+        title: Strings.getLang('ipc_player_fetch_error'),
+        icon: 'none'
+      });
+    }
+  }, [devId, event]);
+  return {
+    showTrialBadge,
+    setShowTrialBadge,
+    handleTrialSubscribe,
+    handleCountdownEnd
+  };
+};

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

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

package/lib/widgets/tryExperience/index.js

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './tryExperience.less';
+type Props = ComponentConfigProps & {
+    className?: string;
+    hideTryExperienceMenu?: boolean;
+    buttonState?: number;
+    trialRemainingSec?: number;
+    isPurchase?: boolean;
+    canOpenSettings?: boolean;
+    isLowPhone?: boolean;
+};
+export declare const TryExperience: (props: Props) => React.JSX.Element | null;
+export {};

package/lib/widgets/tryExperience/tryExperience.js

@@ -0,0 +1,145 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { View, Image, getSystemInfoSync, showToast } from '@ray-js/ray';
+import clsx from 'clsx';
+import React, { useState, useEffect, useCallback } from 'react';
+import { useStore } from '../../ctx/store';
+import Strings from '../../i18n';
+import { getAIFrameFeature, gotoAIDrawMiniProgram, setAIFrameFeature } from '../../utils';
+import { refreshSmartImageQualityEvent } from '../../ui/constant';
+import tryZh from '../../res/try/try_zh.png';
+import tryEn from '../../res/try/try_en.png';
+import tryOpen from '../../res/try/try_open.png';
+import tryClose from '../../res/try/try_close.png';
+import './tryExperience.less';
+/** ty.ipc.test1 返回的体验状态 */
+var TryExperienceStatus = /*#__PURE__*/function (TryExperienceStatus) {
+  TryExperienceStatus[TryExperienceStatus["Default"] = 0] = "Default";
+  TryExperienceStatus[TryExperienceStatus["Open"] = 1] = "Open";
+  TryExperienceStatus[TryExperienceStatus["Close"] = 2] = "Close";
+  return TryExperienceStatus;
+}(TryExperienceStatus || {});
+const ZH_LANG_REGEX = /^zh(_|-|$)/i;
+const getDefaultLangIcon = () => {
+  try {
+    const {
+      language = ''
+    } = getSystemInfoSync() || {};
+    return ZH_LANG_REGEX.test(String(language)) ? tryZh : tryEn;
+  } catch {
+    return tryEn;
+  }
+};
+const pickIconByStatus = buttonState => {
+  switch (buttonState) {
+    case TryExperienceStatus.Open:
+      return tryOpen;
+    case TryExperienceStatus.Close:
+      return tryClose;
+    case TryExperienceStatus.Default:
+      return getDefaultLangIcon();
+    default:
+      return '';
+  }
+};
+export const TryExperience = props => {
+  const {
+    className,
+    hideTryExperienceMenu,
+    buttonState,
+    trialRemainingSec,
+    isPurchase,
+    canOpenSettings,
+    isLowPhone,
+    devId
+  } = props;
+  const {
+    brandColor,
+    recording
+  } = useStore({
+    brandColor: props.brandColor,
+    recording: props.recording
+  });
+  const [imgSrc, setImgSrc] = useState();
+  useEffect(() => {
+    console.log('res===buttonState', buttonState);
+    if (isLowPhone) {
+      setImgSrc(tryClose);
+    } else if (buttonState) {
+      const iconUrl = pickIconByStatus(buttonState);
+      setImgSrc(iconUrl);
+    } else {
+      setImgSrc(undefined);
+    }
+  }, [buttonState]);
+  const onTryExperience = useCallback(async () => {
+    if (isLowPhone) {
+      showToast({
+        title: Strings.getLang('ipc_player_low_phone_not_support'),
+        icon: 'none'
+      });
+      return;
+    }
+    if (recording) {
+      showToast({
+        title: Strings.getLang('ipc_player_recording_now_tip'),
+        icon: 'none'
+      });
+      return;
+    }
+    try {
+      const getAI = await getAIFrameFeature(devId);
+      if (buttonState === TryExperienceStatus.Open) {
+        var _getAI$aiFrameFeature, _getAI$aiFrameFeature2, _getAI$aiFrameFeature3, _props$event;
+        const scope = _objectSpread(_objectSpread({}, (_getAI$aiFrameFeature = getAI.aiFrameFeature) === null || _getAI$aiFrameFeature === void 0 ? void 0 : _getAI$aiFrameFeature.scope), {}, {
+          inPreview: false
+        });
+        await setAIFrameFeature({
+          devId,
+          scene: 'inPreview',
+          // 实时预览场景
+          enabled: getAI.enabled,
+          aiFrameFeature: {
+            scope,
+            feature: (_getAI$aiFrameFeature2 = getAI.aiFrameFeature) === null || _getAI$aiFrameFeature2 === void 0 ? void 0 : _getAI$aiFrameFeature2.feature,
+            exportEnabled: (_getAI$aiFrameFeature3 = getAI.aiFrameFeature) === null || _getAI$aiFrameFeature3 === void 0 ? void 0 : _getAI$aiFrameFeature3.exportEnabled
+          }
+        });
+        (_props$event = props.event) === null || _props$event === void 0 || _props$event.emit(refreshSmartImageQualityEvent);
+      } else if (buttonState === TryExperienceStatus.Close && isPurchase || buttonState === TryExperienceStatus.Close && trialRemainingSec < 300 && trialRemainingSec > 0) {
+        var _getAI$aiFrameFeature4, _getAI$aiFrameFeature5, _getAI$aiFrameFeature6, _props$event2;
+        const scope = _objectSpread(_objectSpread({}, (_getAI$aiFrameFeature4 = getAI.aiFrameFeature) === null || _getAI$aiFrameFeature4 === void 0 ? void 0 : _getAI$aiFrameFeature4.scope), {}, {
+          inPreview: true
+        });
+        await setAIFrameFeature({
+          devId,
+          scene: 'inPreview',
+          // 实时预览场景
+          enabled: getAI.enabled,
+          aiFrameFeature: {
+            scope,
+            feature: (_getAI$aiFrameFeature5 = getAI.aiFrameFeature) === null || _getAI$aiFrameFeature5 === void 0 ? void 0 : _getAI$aiFrameFeature5.feature,
+            exportEnabled: (_getAI$aiFrameFeature6 = getAI.aiFrameFeature) === null || _getAI$aiFrameFeature6 === void 0 ? void 0 : _getAI$aiFrameFeature6.exportEnabled
+          }
+        });
+        (_props$event2 = props.event) === null || _props$event2 === void 0 || _props$event2.emit(refreshSmartImageQualityEvent);
+      } else {
+        gotoAIDrawMiniProgram(devId, brandColor);
+      }
+    } catch (error) {
+      //
+    }
+  }, [buttonState, recording, isPurchase, trialRemainingSec]);
+  if (hideTryExperienceMenu) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, imgSrc && canOpenSettings && /*#__PURE__*/React.createElement(View, {
+    className: clsx(className),
+    onClick: onTryExperience
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "try-experience-box"
+  }, /*#__PURE__*/React.createElement(Image, {
+    className: "try-experience-icon",
+    src: imgSrc,
+    mode: "heightFix"
+  }))));
+};

package/lib/widgets/tryExperience/tryExperience.less

@@ -0,0 +1,13 @@
+.try-experience-box {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-height: calc(var(--iconBoxSize) * var(--ipc-player-size-scale, 1));
+}
+
+.try-experience-icon {
+  display: block;
+  height: calc(var(--iconBoxSize) * var(--ipc-player-size-scale, 1));
+  width: auto;
+  flex-shrink: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.34",
+  "version": "0.0.35-beta.10",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [
@@ -37,7 +37,7 @@
   "dependencies": {
     "@ray-js/direction-control": "^0.0.8",
     "@ray-js/ipc-ptz-zoom": "^0.0.3",
-    "@ray-js/ray-ipc-player": "^2.1.0",
+    "@ray-js/ray-ipc-player": "2.1.1-beta.3",
     "@ray-js/ray-ipc-utils": "^1.1.15",
     "@ray-js/svg": "0.2.0",
     "clsx": "^1.2.1",
@@ -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": {