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

package/lib/ctx/ctx.composition.js

@@ -4,7 +4,7 @@ const _excluded = ["title", "duration"];
 import { getCameraConfigInfo } from '@ray-js/ray-ipc-utils';
 import { IntercomMode, MuteMode, ClarityType } from '@ray-js/ray-ipc-utils/lib/interface';
 import { createUseCtx } from './ctx';
-import { FullSmallIntercom, VerticalSmallIntercom, BatteryFull, Battery, Screenshot, TempHumidity, Signal4G, RecordVideo, FullScreen, VideoBitKBP, Muted, Resolution, Ptz, MultiPtz, TileTip, PtzMoveableTip, LandscapeTip, TileActions, MoveablePtzControl, SwitchLayout, ToggleVerticalFull, RealTimeMagnification } from '../widgets';
+import { FullSmallIntercom, VerticalSmallIntercom, BatteryFull, Battery, Screenshot, TempHumidity, Signal4G, RecordVideo, FullScreen, VideoBitKBP, Muted, Floodlight, Siren, Resolution, Ptz, MultiPtz, TileTip, PtzMoveableTip, LandscapeTip, TileActions, MoveablePtzControl, SwitchLayout, ToggleVerticalFull, RealTimeMagnification } from '../widgets';
 import { authorizeStatus } from '../utils/authorize';
 import { landscapeTipId, moveablePtzControlId, multiPtzId, ptzMoveableTipId, tileActionsId, tileTipId } from '../ui/constant';
 import { multiPrefix } from '../widgets/multiCamera/constants';
@@ -41,6 +41,12 @@ export const defaultBottomLeftContent = [{
 }, {
   id: 'Muted',
   content: Muted
+}, {
+  id: 'Floodlight',
+  content: Floodlight
+}, {
+  id: 'Siren',
+  content: Siren
 }, {
   id: 'VerticalSmallIntercom',
   content: VerticalSmallIntercom

package/lib/interface.d.ts

@@ -11,7 +11,7 @@ export type IpcContext = {
 };
 export type RetAtom<T> = PrimitiveAtom<T> & WithInitialValue<T>;
 export type ScreenType = 'full' | 'vertical';
-export type WidgetId = 'BatteryFull' | 'TempHumidity' | 'VideoBitKBP' | 'FullSmallIntercom' | 'Screenshot' | 'RecordVideo' | 'Muted' | 'VerticalSmallIntercom' | 'Ptz' | 'Resolution' | 'FullScreen' | 'moveablePtzControlId';
+export type WidgetId = 'BatteryFull' | 'TempHumidity' | 'VideoBitKBP' | 'FullSmallIntercom' | 'Screenshot' | 'RecordVideo' | 'Muted' | 'Floodlight' | 'Siren' | 'VerticalSmallIntercom' | 'Ptz' | 'Resolution' | 'FullScreen' | 'moveablePtzControlId';
 export declare const enum PlayerStreamStatus {
     UnknownException = -1000,
     ConnectSuccess = 1001,

package/lib/ui/constant.d.ts

@@ -28,6 +28,8 @@ export declare const widgetLabs: {
     readonly RESOLUTION: "Resolution";
     readonly FULL_RESOLUTION_CONTROL: "FullResolutionControl";
     readonly MUTED: "Muted";
+    readonly FLOODLIGHT: "Floodlight";
+    readonly SIREN: "Siren";
     readonly PTZ: "Ptz";
     readonly PTZ_CONTROL_TIP: "PtzControlTip";
     readonly MOVE_INTERACTIVE_CONTROL: "MoveInteractiveControl";

package/lib/ui/constant.js

@@ -29,6 +29,8 @@ export const widgetLabs = {
   RESOLUTION: 'Resolution',
   FULL_RESOLUTION_CONTROL: 'FullResolutionControl',
   MUTED: 'Muted',
+  FLOODLIGHT: 'Floodlight',
+  SIREN: 'Siren',
   PTZ: 'Ptz',
   PTZ_CONTROL_TIP: 'PtzControlTip',
   MOVE_INTERACTIVE_CONTROL: 'MoveInteractiveControl',

package/lib/ui/ui.d.ts

@@ -37,6 +37,7 @@ type Props = {
     showFlowLowTip?: boolean;
     extend?: Record<string, any>;
     refreshElement?: boolean;
+    autoWakeUp?: boolean;
 };
 export declare const IPCPlayerIntegration: React.MemoExoticComponent<(props: Props) => React.JSX.Element>;
 export {};

package/lib/ui/ui.js

@@ -67,7 +67,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     limitFlow = false,
     showFlowLowTip = false,
     extend = {},
-    refreshElement = false
+    refreshElement = false,
+    autoWakeUp = false
   } = props;
   const {
     event
@@ -918,6 +919,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
     playerRoute: playerRoute,
     defaultAutoPlay: defaultAutoPlay,
     limitFlow: limitFlow,
+    autoWakeUp: autoWakeUp,
     extend: _objectSpread(_objectSpread({
       backgroundColor: '#262626'
     }, instance.multiCameraCtx.extendProps), extend)

package/lib/widgets/floodlight/floodlight.d.ts

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

package/lib/widgets/floodlight/floodlight.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 './floodlight.less';
+const FLOODLIGHT_SWITCH_DP_CODE = 'floodlight_switch';
+export const Floodlight = 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: [FLOODLIGHT_SWITCH_DP_CODE]
+  });
+  const supported = !!(dpSchema !== null && dpSchema !== void 0 && dpSchema[FLOODLIGHT_SWITCH_DP_CODE]);
+  const enabled = !!state[FLOODLIGHT_SWITCH_DP_CODE];
+  if (screenType !== 'full' || !supported) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(className),
+    onClick: () => {
+      event.emit(widgetClick, {
+        widgetId: widgetLabs.FLOODLIGHT
+      });
+      event.emit(pauseTimeToHideAllComponent);
+      sendDp({
+        [FLOODLIGHT_SWITCH_DP_CODE]: !enabled
+      });
+      event.emit(startTimeToHideAllComponent);
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: clsx('icon-panel', 'icon-panel-deng', 'ipc-player-plugin-floodlight-text-icon'),
+    style: {
+      color: enabled ? brandColor : undefined
+    }
+  }));
+};

package/lib/widgets/floodlight/floodlight.less

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

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

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

package/lib/widgets/floodlight/index.js

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

package/lib/widgets/index.d.ts

@@ -8,6 +8,8 @@ export * from './fullScreen';
 export * from './videoBitKBP';
 export * from './voiceIntercom';
 export * from './muted';
+export * from './floodlight';
+export * from './siren';
 export * from './ptz';
 export * from './resolution';
 export * from './fullSmallIntercom';

package/lib/widgets/index.js

@@ -8,6 +8,8 @@ export * from './fullScreen';
 export * from './videoBitKBP';
 export * from './voiceIntercom';
 export * from './muted';
+export * from './floodlight';
+export * from './siren';
 export * from './ptz';
 export * from './resolution';
 export * from './fullSmallIntercom';

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

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

package/lib/widgets/siren/index.js

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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ipc-player-integration",
-  "version": "0.0.34",
+  "version": "0.0.35-beta.1",
   "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.1",
     "@ray-js/ray-ipc-utils": "^1.1.15",
     "@ray-js/svg": "0.2.0",
     "clsx": "^1.2.1",