@ray-js/ipc-player-integration 0.0.28 → 0.0.29-beta.1

package/lib/widgets/multiCamera/index.less

@@ -0,0 +1,214 @@
+@prefix: ~'ipc-player-plugin-multi';
+
+.@{prefix} {
+  color: var(--iconColor);
+  font-size: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1)) !important;
+}
+
+.@{prefix}-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.@{prefix}-actions-wrap {
+  position: absolute;
+  bottom: 98px;
+  right: 16px;
+  z-index: 340;
+}
+
+.@{prefix}-action-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(42px * var(--ipc-player-size-scale, 1));
+  height: calc(42px * var(--ipc-player-size-scale, 1));
+  background-color: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+}
+
+.@{prefix}-ptz-control-wrap {
+  position: absolute;
+  bottom: 98px;
+  left: calc(32px * var(--ipc-player-size-scale, 1));
+  z-index: 348;
+}
+
+.@{prefix}-moveable-ptz-control {
+  --ptz-bg-color: rgba(0, 0, 0, 0.4);
+  --ptz-arrow-bg-color: rgba(0, 0, 0, 0.4);
+  --app-native-btn-bg-color: transparent;
+  --ptz-border-color: rgba(255, 255, 255, 0.2);
+  --ptz-arrow-icon-color: #fff;
+  --ptz-circle-inner-bg-color: rgba(255, 255, 255, 0.65);
+}
+
+.@{prefix}-tile-tip-wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  transition: all 0.3 ease;
+  font-size: 14px;
+  color: #fff;
+
+  .@{prefix}-tile-tip-content {
+    position: absolute;
+
+    width: 54px;
+    height: 54px;
+    border-radius: 12px;
+    border: 1px dashed rgba(255, 255, 255, 0.5);
+    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
+
+    &.@{prefix}-step1 {
+      right: 46px;
+      bottom: 0px;
+    }
+
+    &.@{prefix}-step2 {
+      right: 10px;
+      bottom: 91px;
+    }
+
+    &.@{prefix}-ptz-tip {
+      width: 204px;
+      height: 204px;
+      border-radius: 50%;
+      left: 18px;
+      bottom: 75px;
+    }
+
+    &.@{prefix}-landscape-tip {
+      right: 25px;
+      bottom: 18px;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      box-sizing: border-box;
+    }
+
+    &.@{prefix}-step1::after {
+      border-left: 1px dashed rgba(255, 255, 255, 0.5);
+      height: 50px;
+      width: 1px;
+      left: 50%;
+      transform: translateX(-50%) translateY(-100%);
+    }
+
+    &.@{prefix}-step2::after {
+      top: 50%;
+      left: 0;
+      transform: translateX(-100%) translateY(-50%);
+      height: 1px;
+      width: 50px;
+      border-top: 1px dashed rgba(255, 255, 255, 0.5);
+    }
+
+    &.@{prefix}-ptz-tip::after {
+      border-left: 1px dashed rgba(255, 255, 255, 0.5);
+      height: 50px;
+      width: 1px;
+      left: 50%;
+      transform: translateX(-50%) translateY(-100%);
+    }
+
+    &.@{prefix}-landscape-tip::after {
+      border-left: 1px dashed rgba(255, 255, 255, 0.5);
+      height: 50px;
+      width: 1px;
+      left: 50%;
+      transform: translateX(-50%) translateY(-100%);
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      background-color: rgba(255, 255, 255, 0.5);
+      height: 4px;
+      width: 4px;
+      border-radius: 50%;
+    }
+
+    &.@{prefix}-step1::before {
+      left: 50%;
+      transform: translateX(-50%) translateY(-54px);
+    }
+
+    &.@{prefix}-step2::before {
+      top: 50%;
+      left: 0;
+      transform: translateX(-54px) translateY(-50%);
+    }
+
+    &.@{prefix}-ptz-tip::before {
+      left: 50%;
+      transform: translateX(-50%) translateY(-54px);
+    }
+
+    &.@{prefix}-landscape-tip::before {
+      left: 50%;
+      transform: translateX(-50%) translateY(-54px);
+    }
+  }
+
+  .@{prefix}-tile-tip-text {
+    position: absolute;
+    max-width: 200px;
+
+    &.@{prefix}-step1 {
+      right: 60px;
+      bottom: 190px;
+    }
+
+    &.@{prefix}-step2 {
+      right: 130px;
+      bottom: 110px;
+    }
+
+    &.@{prefix}-ptz-tip {
+      left: 75px;
+      bottom: 420px;
+    }
+
+    &.@{prefix}-landscape-tip {
+      right: 20px;
+      bottom: 210px;
+    }
+  }
+
+  .@{prefix}-tile-tip-button {
+    padding: 12px 32px;
+    border-radius: 250px;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    position: absolute;
+
+    &.@{prefix}-step1 {
+      right: 60px;
+      bottom: 120px;
+    }
+
+    &.@{prefix}-step2 {
+      right: 130px;
+      bottom: 50px;
+    }
+
+    &.@{prefix}-ptz-tip {
+      left: 75px;
+      bottom: 360px;
+    }
+
+    &.@{prefix}-landscape-tip {
+      right: 20px;
+      bottom: 140px;
+    }
+  }
+}

package/lib/widgets/multiCamera/landscapeTip.d.ts

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

package/lib/widgets/multiCamera/landscapeTip.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { View, CoverView, Text } from '@ray-js/ray';
+import clsx from 'clsx';
+import { useStore } from '../../ctx/store';
+import { landscapeTipId } from '../../ui/constant';
+import { PlayState } from '../../interface';
+import Strings from '../../i18n';
+import { multiPrefix } from './constants';
+import { Storage } from '../../utils/storage';
+import './index.less';
+export const LandscapeTip = props => {
+  const {
+    devId,
+    deleteContent
+  } = props;
+  const [showTipModal, setShowTipModal] = useState(true);
+  const {
+    playState
+  } = useStore({
+    playState: props.playState
+  });
+  // 获取缓存状态
+  const hideTipModal = () => {
+    setShowTipModal(false);
+    deleteContent('absolute', landscapeTipId);
+    const storage = new Storage(devId);
+    storage.set(landscapeTipId, true);
+  };
+  if (showTipModal && playState === PlayState.PLAYING) {
+    return /*#__PURE__*/React.createElement(CoverView, null, /*#__PURE__*/React.createElement(View, {
+      className: clsx(`${multiPrefix}-tile-tip-content`, `${multiPrefix}-landscape-tip`)
+    }), /*#__PURE__*/React.createElement(Text, {
+      className: clsx(`${multiPrefix}-tile-tip-text`, `${multiPrefix}-landscape-tip`)
+    }, Strings.getLang(`ipc_player_tile_tip_text_step2`)), /*#__PURE__*/React.createElement(View, {
+      className: clsx(`${multiPrefix}-tile-tip-button`, `${multiPrefix}-landscape-tip`),
+      onClick: hideTipModal
+    }, Strings.getLang('ipc_player_tip_confirm')));
+  }
+  return null;
+};

package/lib/widgets/multiCamera/moveView/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface MoveViewProps {
+    instanceId: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export default function MoveView(props: MoveViewProps): React.JSX.Element;
+export {};

package/lib/widgets/multiCamera/moveView/index.js

@@ -0,0 +1,22 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["style", "className", "children"];
+import React from 'react';
+import { style as styleTrans } from './utils';
+// @ts-ignore
+import MoveViewTy from './tyComponent';
+export default function MoveView(props) {
+  const {
+      style = {},
+      className = '',
+      children
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(MoveViewTy, (() => {
+    return _objectSpread({
+      customStyle: styleTrans(style),
+      id: rest.instanceId,
+      customClass: className
+    }, rest);
+  })(), children);
+}

package/lib/widgets/multiCamera/moveView/tyComponent/index.d.ts

@@ -0,0 +1 @@
+import './index.tyss';

package/lib/widgets/multiCamera/moveView/tyComponent/index.js

@@ -0,0 +1,42 @@
+import './index.tyss';
+import { style as styleTrans } from '../utils';
+
+// eslint-disable-next-line no-undef
+Component({
+  properties: {
+    customStyle: {
+      type: String,
+      value: '',
+      observer: function (v) {
+        if (!v) return;
+        this.setData({
+          currStyle: styleTrans(v)
+        });
+      }
+    },
+    customClass: {
+      type: String,
+      value: ''
+    },
+    instanceId: {
+      type: String,
+      value: 'test'
+    }
+  },
+  data: {
+    currStyle: ''
+  },
+  lifetimes: {
+    ready() {
+      //
+    }
+  },
+  methods: {
+    setStyle(value) {
+      if (!value) return;
+      this.setData({
+        currStyle: styleTrans(value)
+      });
+    }
+  }
+});

package/lib/widgets/multiCamera/moveView/tyComponent/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/lib/widgets/multiCamera/moveView/tyComponent/index.tyml

@@ -0,0 +1,8 @@
+<view
+  id="{{instanceId}}" 
+  instanceId="{{instanceId}}" 
+  class="ray-move-view {{customClass}}"
+  style="{{currStyle}}"
+ >
+  <slot></slot>
+ </view>

package/lib/widgets/multiCamera/moveView/tyComponent/index.tyss

@@ -0,0 +1,4 @@
+.ray-move-view {
+  position: relative;
+  z-index: 89;
+}

package/lib/widgets/multiCamera/moveView/utils.d.ts

@@ -0,0 +1 @@
+export declare function style(styles: any): any;

package/lib/widgets/multiCamera/moveView/utils.js

@@ -0,0 +1,29 @@
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.map.js";
+function kebabCase(word) {
+  const newWord = word.replace(RegExp('[A-Z]', 'g'), function (i) {
+    return '-' + i;
+  }).toLowerCase();
+  return newWord;
+}
+export function style(styles) {
+  if (typeof styles === 'string') {
+    return styles;
+  }
+  if (Array.isArray(styles)) {
+    return styles.filter(function (item) {
+      return item != null && item !== '';
+    }).map(function (item) {
+      return style(item);
+    }).join(';');
+  }
+  if (typeof styles === 'object') {
+    return Object.keys(styles).filter(function (key) {
+      return styles[key] != null && styles[key] !== '';
+    }).map(function (key) {
+      return [kebabCase(key), [styles[key]]].join(':');
+    }).join(';');
+  }
+  return styles || '';
+}

package/lib/widgets/multiCamera/moveablePtzControl.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ComponentConfigProps } from '../../interface';
+import './index.less';
+type Props = ComponentConfigProps & {
+    positionLeft?: number;
+    positionBottom?: number;
+    height?: number;
+    onDragStart?: (data: {
+        positionLeft: number;
+        positionBottom: number;
+    }) => void;
+    onDragEnd?: (data: {
+        positionLeft: number;
+        positionBottom: number;
+    }) => void;
+};
+/**
+ * 可移动的 PTZ 控制器，目前仅在多目使用
+ */
+export declare const MoveablePtzControlItem: (props: Props) => React.JSX.Element;
+export declare const MoveablePtzControl: (props: Props) => React.JSX.Element;
+export {};