@ray-js/ipc-player-integration 0.0.29-beta.21 → 0.0.29-beta.22

package/lib/iconfont/iconfont.json

@@ -5,6 +5,223 @@
   "css_prefix_text": "icon-panel-",
   "description": "IPC 小程序公版",
   "glyphs": [
+    {
+      "icon_id": "46981006",
+      "name": "tip-right-arrow",
+      "font_class": "tip-right-arrow",
+      "unicode": "e697",
+      "unicode_decimal": 59031
+    },
+    {
+      "icon_id": "46981005",
+      "name": "tip-circle",
+      "font_class": "tip-circle",
+      "unicode": "e698",
+      "unicode_decimal": 59032
+    },
+    {
+      "icon_id": "46872593",
+      "name": "night-light",
+      "font_class": "night-light",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "46869725",
+      "name": "feed-reminder",
+      "font_class": "feed-reminder",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "46869723",
+      "name": "baby-core",
+      "font_class": "baby-core",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "46763588",
+      "name": "door-close-small",
+      "font_class": "door-close-small",
+      "unicode": "e6671",
+      "unicode_decimal": 943729
+    },
+    {
+      "icon_id": "46763563",
+      "name": "door-close-large",
+      "font_class": "door-close-large",
+      "unicode": "e6672",
+      "unicode_decimal": 943730
+    },
+    {
+      "icon_id": "46763122",
+      "name": "door-open-small",
+      "font_class": "door-open-small",
+      "unicode": "e6673",
+      "unicode_decimal": 943731
+    },
+    {
+      "icon_id": "46763015",
+      "name": "door-open-large",
+      "font_class": "door-open-large",
+      "unicode": "e6674",
+      "unicode_decimal": 943732
+    },
+    {
+      "icon_id": "46747422",
+      "name": "common-error",
+      "font_class": "common-error",
+      "unicode": "e696",
+      "unicode_decimal": 59030
+    },
+    {
+      "icon_id": "46747207",
+      "name": "traffic-top-up",
+      "font_class": "traffic-top-up",
+      "unicode": "e693",
+      "unicode_decimal": 59027
+    },
+    {
+      "icon_id": "46744274",
+      "name": "elevator-up",
+      "font_class": "elevator-up",
+      "unicode": "e6666",
+      "unicode_decimal": 943718
+    },
+    {
+      "icon_id": "46744267",
+      "name": "elevator-down",
+      "font_class": "elevator-down",
+      "unicode": "e6667",
+      "unicode_decimal": 943719
+    },
+    {
+      "icon_id": "46744283",
+      "name": "access-elevator",
+      "font_class": "access-elevator",
+      "unicode": "e6668",
+      "unicode_decimal": 943720
+    },
+    {
+      "icon_id": "46744282",
+      "name": "elevator-updown",
+      "font_class": "elevator-updown",
+      "unicode": "e6669",
+      "unicode_decimal": 943721
+    },
+    {
+      "icon_id": "46692674",
+      "name": "traffic-unauthorized",
+      "font_class": "traffic-unauthorized",
+      "unicode": "e692",
+      "unicode_decimal": 59026
+    },
+    {
+      "icon_id": "46692640",
+      "name": "traffic-low-data",
+      "font_class": "traffic-low-data",
+      "unicode": "e691",
+      "unicode_decimal": 59025
+    },
+    {
+      "icon_id": "46692641",
+      "name": "traffic-not-obtain",
+      "font_class": "traffic-not-obtain",
+      "unicode": "e690",
+      "unicode_decimal": 59024
+    },
+    {
+      "icon_id": "46518513",
+      "name": "swimming-anomaly",
+      "font_class": "swimming-anomaly",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "46518507",
+      "name": "feed-fish",
+      "font_class": "feed-fish",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "46518512",
+      "name": "water-temp",
+      "font_class": "water-temp",
+      "unicode": "e67c",
+      "unicode_decimal": 59004
+    },
+    {
+      "icon_id": "46518508",
+      "name": "fun-fish-TV",
+      "font_class": "fun-fish-TV",
+      "unicode": "e67d",
+      "unicode_decimal": 59005
+    },
+    {
+      "icon_id": "46518510",
+      "name": "fish-care-expert",
+      "font_class": "fish-care-expert",
+      "unicode": "e67e",
+      "unicode_decimal": 59006
+    },
+    {
+      "icon_id": "46518511",
+      "name": "water-quality",
+      "font_class": "water-quality",
+      "unicode": "e68b",
+      "unicode_decimal": 59019
+    },
+    {
+      "icon_id": "46518509",
+      "name": "swimming-issue",
+      "font_class": "swimming-issue",
+      "unicode": "e68d",
+      "unicode_decimal": 59021
+    },
+    {
+      "icon_id": "46518506",
+      "name": "fish-anomaly",
+      "font_class": "fish-anomaly",
+      "unicode": "e68e",
+      "unicode_decimal": 59022
+    },
+    {
+      "icon_id": "46518505",
+      "name": "AI-fish-health-check",
+      "font_class": "a-AI-fish-healthcheck",
+      "unicode": "e68f",
+      "unicode_decimal": 59023
+    },
+    {
+      "icon_id": "46514652",
+      "name": "favorites",
+      "font_class": "favorites1",
+      "unicode": "e69f",
+      "unicode_decimal": 59039
+    },
+    {
+      "icon_id": "46514654",
+      "name": "belly-up",
+      "font_class": "belly-up1",
+      "unicode": "e6a0",
+      "unicode_decimal": 59040
+    },
+    {
+      "icon_id": "46514664",
+      "name": "favorite",
+      "font_class": "favorite1",
+      "unicode": "e694",
+      "unicode_decimal": 59028
+    },
+    {
+      "icon_id": "46514661",
+      "name": "replay",
+      "font_class": "replay1",
+      "unicode": "e695",
+      "unicode_decimal": 59029
+    },
     {
       "icon_id": "45928176",
       "name": "gun-ball",
@@ -12,13 +229,6 @@
       "unicode": "e68c",
       "unicode_decimal": 59020
     },
-    {
-      "icon_id": "45928027",
-      "name": "gun-ball-2",
-      "font_class": "gun-ball-2",
-      "unicode": "e68b",
-      "unicode_decimal": 59019
-    },
     {
       "icon_id": "45739939",
       "name": "thumbnail",

package/lib/ui/constant.d.ts

@@ -8,6 +8,7 @@ export declare const fullTravelRouteControlId = "fullTravelRouteControl";
 export declare const verticalScreenId = "verticalScreenId";
 export declare const ptzControlId = "ptzControlId";
 export declare const ptzControlTipId = "ptzControlTipId";
+export declare const showFlowLowTipId = "showFlowLowTipId";
 export declare const fullResolutionId = "fullResolutionId";
 export declare const batteryId = "Battery";
 export declare const fullSmallIntercomId = "FullSmallIntercom";

package/lib/ui/constant.js

@@ -8,6 +8,7 @@ export const fullTravelRouteControlId = 'fullTravelRouteControl';
 export const verticalScreenId = 'verticalScreenId';
 export const ptzControlId = 'ptzControlId';
 export const ptzControlTipId = 'ptzControlTipId';
+export const showFlowLowTipId = 'showFlowLowTipId';
 export const fullResolutionId = 'fullResolutionId';
 export const batteryId = 'Battery';
 export const fullSmallIntercomId = 'FullSmallIntercom';

package/lib/ui/ui.d.ts

@@ -34,6 +34,7 @@ type Props = {
     onPlayerTap?: (data: any) => void;
     defaultAutoPlay?: boolean;
     limitFlow?: boolean;
+    showFlowLowTip?: boolean;
     extend?: Record<string, any>;
 };
 export declare const IPCPlayerIntegration: React.MemoExoticComponent<(props: Props) => React.JSX.Element>;

package/lib/ui/ui.js

@@ -11,11 +11,12 @@ import { PlayState, PlayerStreamStatus, MultiCameraScreenMode } from '../interfa
 import { useCtx } from '../ctx/ctx.composition';
 import { useStore, updateAtom } from '../ctx/store';
 import { UIEventContext } from './context';
-import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent, decodeClarityDic, changeIgnoreHideStopPreview, moveablePtzControlId, tileActionsId, tileTipId, landscapeTipId, multiPtzId, ptzMoveableTipId } from './constant';
+import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent, decodeClarityDic, changeIgnoreHideStopPreview, moveablePtzControlId, tileActionsId, tileTipId, landscapeTipId, multiPtzId, ptzMoveableTipId, showFlowLowTipId } from './constant';
 import BottomLeftContent from './bottomLeftContent';
 import BottomRightContent from './bottomRightContent';
 import TopLeftContent from './topLeftContent';
 import TopRightContent from './topRightContent';
+import { FlowLowTip } from '../widgets';
 import { useMemoizedFn } from '../hooks';
 import { Storage } from '../utils/storage';
 import './ui.less';
@@ -64,6 +65,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     playerRoute = 'pages/home/index',
     defaultAutoPlay = true,
     limitFlow = false,
+    showFlowLowTip = false,
     extend = {}
   } = props;
   const {
@@ -422,6 +424,25 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     event.current.emit(playerTap);
   };
 
+  /** 标记流量不足提示是否已添加过，只允许 addContent 一次 */
+  const flowLowTipAddedRef = useRef(false);
+
+  /**
+   * 监听显示流量不足200MB的提示
+   */
+  useEffect(() => {
+    if (playState !== PlayState.PLAYING || !showFlowLowTip || flowLowTipAddedRef.current) return;
+    if (!instance.hasContent('absolute', showFlowLowTipId)) {
+      instance.addContent('absolute', {
+        id: showFlowLowTipId,
+        content: props => /*#__PURE__*/React.createElement(FlowLowTip, props),
+        absoluteContentClassName: 'ipc-player-plugin-flow-low-tip-wrap',
+        initProps: _objectSpread({}, props)
+      });
+      flowLowTipAddedRef.current = true;
+    }
+  }, [instance, playState, showFlowLowTip]);
+
   /**
    * 监听播放器实例创建完成
    */

package/lib/widgets/flowLowTip/flowLowTip.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './flowLowTip.less';
+type Props = ComponentConfigProps & {
+    className?: string;
+};
+export declare const FlowLowTip: (props: Props) => React.JSX.Element;
+export {};

package/lib/widgets/flowLowTip/flowLowTip.js

@@ -0,0 +1,62 @@
+import { View, Text } from '@ray-js/ray';
+import clsx from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
+import { getServiceUrl } from '@ray-js/ray-ipc-utils';
+import { useMemoizedFn } from 'ahooks';
+import Strings from '../../i18n';
+import { useStore } from '../../ctx/store';
+import { showFlowLowTipId } from '../../ui/constant';
+import './flowLowTip.less';
+// 5秒后自动隐藏
+const AUTO_HIDE_MS = 5000;
+export const FlowLowTip = props => {
+  const {
+    screenType: screenTypeAtom,
+    hideContent,
+    className,
+    brandColor: brandColorProp,
+    devId
+  } = props;
+  const {
+    screenType,
+    brandColor
+  } = useStore({
+    screenType: screenTypeAtom,
+    brandColor: brandColorProp
+  });
+  const [hideFlowLowTip, setHideFlowLowTip] = useState(false);
+  const timerRef = useRef(null);
+  const handleClose = useMemoizedFn(async function () {
+    let jump = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    setHideFlowLowTip(true);
+    if (jump) {
+      await getServiceUrl(devId, 'traffic_service', {}, true);
+    }
+    hideContent('absolute', showFlowLowTipId);
+  });
+  useEffect(() => {
+    timerRef.current = setTimeout(handleClose, AUTO_HIDE_MS);
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [handleClose]);
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(className, 'ipc-player-plugin-flow-low-tip-content', {
+      'ipc-player-plugin-full-screen-ptz-control-hide': hideFlowLowTip
+    }),
+    onClick: () => handleClose(true)
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-flow-low-tip-text-wrap"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-tip-circle', 'ipc-player-plugin-flow-low-tip-icon')
+  }), /*#__PURE__*/React.createElement(Text, {
+    className: "ipc-player-plugin-flow-low-tip-text"
+  }, Strings.getLang('ipc_player_flow_low_tip'))), /*#__PURE__*/React.createElement(View, {
+    className: "ipc-player-plugin-flow-low-tip-button-wrap"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-tip-right-arrow', 'ipc-player-plugin-flow-low-tip-button-icon')
+  })));
+};

package/lib/widgets/flowLowTip/flowLowTip.less

@@ -0,0 +1,73 @@
+@animation-time: 0.3s;
+
+.ipc-player-plugin-flow-low-tip-wrap {
+  position: absolute;
+  top: calc(10px * var(--ipc-player-size-scale, 1));
+  left: calc(16px * var(--ipc-player-size-scale, 1));
+  right: calc(16px * var(--ipc-player-size-scale, 1));
+  background-color: #262626;
+  z-index: 350;
+  border-radius: calc(8px * var(--ipc-player-size-scale, 1));
+  overflow: hidden;
+  padding: calc(8px * var(--ipc-player-size-scale, 1)) calc(12px * var(--ipc-player-size-scale, 1));
+  font-size: calc(12px * var(--ipc-player-size-scale, 1));
+  color: #ffffff;
+  transform: translate(0, 0);
+  transition: @animation-time ease-in;
+  animation: ipc-player-plugin-flow-low-tip-move-in @animation-time ease-in-out forwards;
+  &.ipc-player-plugin-flow-low-tip-hide {
+    animation: ipc-player-plugin-flow-low-tip-move-out @animation-time ease-in-out forwards;
+  }
+}
+
+.ipc-player-plugin-flow-low-tip-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ipc-player-plugin-flow-low-tip-text-wrap {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ipc-player-plugin-flow-low-tip-icon {
+  color: #ffa000;
+}
+
+.ipc-player-plugin-flow-low-tip-text {
+  flex: 1;
+  min-width: 0;
+  padding: 0 calc(4px * var(--ipc-player-size-scale, 1));
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+}
+
+.ipc-player-plugin-flow-low-tip-button-wrap {
+  width: calc(32px * var(--ipc-player-size-scale, 1));
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+@keyframes ipc-player-plugin-flow-low-tip-move-in {
+  0% {
+    transform: translate(0, -100vh); /* 从上方滑入 */
+  }
+  100% {
+    transform: translate(0, 0); /* 移动到目标位置 */
+  }
+}
+
+@keyframes ipc-player-plugin-flow-low-tip-move-out {
+  0% {
+    transform: translate(0, 0); /* 从当前位置开始 */
+  }
+  100% {
+    transform: translate(0, -100vh); /* 向上滑出，隐藏 */
+  }
+}

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

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

package/lib/widgets/flowLowTip/index.js

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

package/lib/widgets/index.d.ts

@@ -17,3 +17,4 @@ export * from './ptzControlTip';
 export * from './multiCamera';
 export * from './smallIntercom';
 export * from './toggleVerticalFull';
+export * from './flowLowTip';

package/lib/widgets/index.js

@@ -16,4 +16,5 @@ export * from './moveInteractiveControl';
 export * from './ptzControlTip';
 export * from './multiCamera';
 export * from './smallIntercom';
-export * from './toggleVerticalFull';
+export * from './toggleVerticalFull';
+export * from './flowLowTip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.29-beta.21",
+  "version": "0.0.29-beta.22",
   "description": "IPC 融合播放器",
   "main": "lib/index",
   "files": [