@ray-js/ipc-player-integration 0.0.49 → 0.0.50-beta.0

package/lib/widgets/zoomTurntable/lensSkill.js

@@ -0,0 +1,332 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
+/* eslint-disable camelcase -- P2P 回包字段名由设备端定义，不做转换 */
+/**
+ * 镜头能力解析与镜头切换下发。协议相关的不确定性都收敛在本文件。
+ *
+ * 协议来源：《面板小程序 V1.6.0_零散优化+多目变焦》§4
+ *
+ * 能力取自 ipc_multi_zoom DP 的 string 值，cnt <= 1 不出现转盘入口：
+ *   {"cnt":2,"thresholds":[1,3,6],"lenses":[{"id":0,"type":0,"step":0.1,"basicRatio":1},…]}
+ * 切镜头走 ty.ipc.switchChannel({ deviceId, channel })，channel 即上报的子镜头 id。
+ * 出流后用 ty.ipc.queryCurrentChannel 回读当前镜头；
+ * 设备侧 / 其他端切镜头由 ty.ipc.onChannelChange 事件通知。
+ */
+
+import { QUERY_LENS_TIMEOUT } from './constants';
+
+/** channelChange 事件载荷 */
+
+/** 能力 DP：其 string 值即镜头能力描述，解析出的 cnt > 1 才显示入口 */
+export { MULTI_ZOOM as MULTI_ZOOM_DP_CODE } from '../../utils/content/dpCode';
+
+/** MOCK 数据：与协议参考上报值一致的双目定焦（短焦 1.0x / 临界 3.0x / 上限 6.0x） */
+export const MOCK_ZOOM_SKILL = {
+  cnt: 2,
+  thresholds: [1.0, 3.0, 6.0],
+  lenses: [{
+    id: 0,
+    type: 0,
+    step: 0.1,
+    basicRatio: 1.0
+  }, {
+    id: 1,
+    type: 1,
+    step: 0.1,
+    basicRatio: 3.0
+  }]
+};
+
+/**
+ * 镜头数量。以 cnt 为判定字段；
+ * 固件漏填时回落到 lenses.length，两者不一致时告警（协议保证一致）。
+ */
+export const lensCount = skill => {
+  var _skill$lenses, _skill$cnt;
+  if (!(skill !== null && skill !== void 0 && (_skill$lenses = skill.lenses) !== null && _skill$lenses !== void 0 && _skill$lenses.length)) return 0;
+  if (skill.cnt != null && skill.cnt !== skill.lenses.length) {
+    console.warn('[zoomTurntable] cnt 与 lenses.length 不一致', JSON.stringify(skill));
+  }
+  return (_skill$cnt = skill.cnt) !== null && _skill$cnt !== void 0 ? _skill$cnt : skill.lenses.length;
+};
+
+/** 校验数据自洽性。半套数据画出的刻度是错的，比不显示更糟，故不做部分降级 */
+export const isZoomSkillValid = skill => {
+  const count = lensCount(skill);
+  if (!skill || count <= 0) return false;
+  const {
+    thresholds,
+    lenses
+  } = skill;
+  if (!Array.isArray(thresholds) || thresholds.length !== count + 1) {
+    console.error('[zoomTurntable] thresholds 长度应为 cnt + 1', JSON.stringify(skill));
+    return false;
+  }
+  for (let i = 1; i < thresholds.length; i++) {
+    if (!(thresholds[i] > thresholds[i - 1])) {
+      console.error('[zoomTurntable] thresholds 必须严格升序', JSON.stringify(thresholds));
+      return false;
+    }
+  }
+  if (lenses.length < count) {
+    console.error('[zoomTurntable] lenses 长度小于 cnt', JSON.stringify(skill));
+    return false;
+  }
+  for (let i = 0; i < count; i++) {
+    const lens = lenses[i];
+    if (!lens || typeof lens.basicRatio !== 'number' || lens.id == null) {
+      console.error('[zoomTurntable] lens 字段缺失', JSON.stringify(lens));
+      return false;
+    }
+    if (i > 0 && !(lens.basicRatio >= lenses[i - 1].basicRatio)) {
+      console.error('[zoomTurntable] lenses 必须按 basicRatio 升序', JSON.stringify(lenses));
+      return false;
+    }
+  }
+  return true;
+};
+
+/**
+ * 解析 ipc_multi_zoom DP 上报的 string 值为镜头能力。
+ * @param value DP 值；调试注入的对象（mockZoomSkill）直接透传，两条来源共用同一校验链路
+ */
+export const parseZoomSkill = value => {
+  if (value == null || value === '') return null;
+  if (typeof value === 'object') return value;
+  if (typeof value !== 'string') {
+    console.warn('[zoomTurntable] ipc_multi_zoom 非 string 值', value);
+    return null;
+  }
+  try {
+    const parsed = JSON.parse(value);
+    if (!parsed || typeof parsed !== 'object') return null;
+    return parsed;
+  } catch (err) {
+    console.error('[zoomTurntable] ipc_multi_zoom 解析失败', value, err);
+    return null;
+  }
+};
+
+/** ty.ipc.switchChannel 的最小签名：ty 类型包尚未收录，本地声明避免调用点退化成 any */
+
+/**
+ * 切换物理镜头。channel 取上报的子镜头 id 而非数组下标 —— 固件可上报非连续 id。
+ * 返回 false（不支持 / 失败）时由 useLensZoom 回滚读数，无回调另有 SWITCH_LENS_TIMEOUT 兜底。
+ */
+export const switchLens = (devId, lens) => {
+  var _ty;
+  const switchChannel = (_ty = ty) === null || _ty === void 0 || (_ty = _ty.ipc) === null || _ty === void 0 ? void 0 : _ty.switchChannel;
+  // 入参与回调结果都打出来：真机上「切没切成」只能靠这条链路判断
+  const params = {
+    deviceId: devId,
+    channel: lens.id
+  };
+  console.log('[zoomTurntable] switchChannel 调用', JSON.stringify(params), `lens={id:${lens.id},type:${lens.type},basicRatio:${lens.basicRatio}}`);
+  if (typeof switchChannel !== 'function') {
+    console.warn('[zoomTurntable] 宿主不支持 ty.ipc.switchChannel，无法切换镜头');
+    return Promise.resolve(false);
+  }
+  const startAt = Date.now();
+  return new Promise(resolve => {
+    try {
+      switchChannel(_objectSpread(_objectSpread({}, params), {}, {
+        success: res => {
+          console.log('[zoomTurntable] switchChannel success', `channel=${lens.id}`, `${Date.now() - startAt}ms`, JSON.stringify(res !== null && res !== void 0 ? res : null));
+          resolve(true);
+        },
+        fail: err => {
+          console.warn('[zoomTurntable] switchChannel fail', `channel=${lens.id}`, `${Date.now() - startAt}ms`, JSON.stringify(err !== null && err !== void 0 ? err : null));
+          resolve(false);
+        }
+      }));
+    } catch (err) {
+      console.error('[zoomTurntable] switchChannel 调用异常', JSON.stringify(params), err);
+      resolve(false);
+    }
+  });
+};
+
+/**
+ * 顺原型链收集对象上的属性名并标出类型；方法常挂在原型上，只看自有属性会漏。
+ * @param keyword 只保留名字含该关键词的（小写匹配），空串则全列
+ */
+const describeApis = function (obj) {
+  let keyword = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  const keys = new Set();
+  for (let cur = obj; cur && cur !== Object.prototype; cur = Object.getPrototypeOf(cur)) {
+    Object.getOwnPropertyNames(cur).forEach(k => keys.add(k));
+  }
+  return [...keys].filter(k => !keyword || k.toLowerCase().includes(keyword.toLowerCase())).sort().map(k => {
+    try {
+      return `${k}:${typeof obj[k]}`;
+    } catch (err) {
+      return `${k}:<throw:${err === null || err === void 0 ? void 0 : err.message}>`;
+    }
+  });
+};
+
+/** 打印播放器实例上的方法名；方法名对不上时用来确认实例究竟提供了什么 */
+export const dumpPlayerApis = function (IPCPlayerInstance) {
+  let keyword = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  if (!IPCPlayerInstance) {
+    console.warn('[zoomTurntable] 播放器实例不存在');
+    return;
+  }
+  const matched = describeApis(IPCPlayerInstance, keyword);
+  console.log(`[zoomTurntable] 播放器实例方法${keyword ? `（含 ${keyword}）` : ''}(${matched.length})`, matched.join(', '));
+};
+
+/**
+ * IPCPlayerInstance.showSmallMonitor 的最小签名（与 startRecord 同级的播放器方法）。
+ * IpcContext 是 Record<string, any>，本地声明一份免得调用点退化成 any。
+ */
+
+/**
+ * 开关全景小窗（小窗画面为当前镜头的全景）。
+ *
+ * 画面停在镜头光学正倍数上时不需要小窗，在镜头区间内数字放大后才需要。
+ * 调用方（useLensZoom）已按 devId 做过去重，这里只管下发，不判重。
+ */
+export const showSmallMonitor = (IPCPlayerInstance, show) => {
+  console.log(IPCPlayerInstance, 'IPCPlayerInstance=====');
+  const api = IPCPlayerInstance === null || IPCPlayerInstance === void 0 ? void 0 : IPCPlayerInstance.showSmallMonitor;
+  if (typeof api !== 'function') {
+    // 方法名没对上时，把实例上现有的方法名打出来，省得来回猜
+    console.warn('[zoomTurntable] 播放器实例上没有 showSmallMonitor，小窗未切换', show);
+    dumpPlayerApis(IPCPlayerInstance, 'monitor');
+    return;
+  }
+  console.log('[zoomTurntable] showSmallMonitor 调用', show);
+  try {
+    api({
+      show,
+      success: res => console.log('[zoomTurntable] showSmallMonitor success', show, JSON.stringify(res !== null && res !== void 0 ? res : null)),
+      fail: err => console.warn('[zoomTurntable] showSmallMonitor fail', show, JSON.stringify(err !== null && err !== void 0 ? err : null))
+    });
+  } catch (err) {
+    console.error('[zoomTurntable] showSmallMonitor 调用异常', show, err);
+  }
+};
+
+/** 回包 / 事件载荷里的镜头通道，非数字视为无效 */
+const pickChannel = payload => {
+  const num = Number(payload === null || payload === void 0 ? void 0 : payload.channel);
+  return Number.isFinite(num) ? num : null;
+};
+
+/** ty.ipc.queryCurrentChannel 的最小签名，同 switchChannel 一样本地声明 */
+
+/**
+ * 查询当前镜头与本地缩放，用于出流后 / 重连后同步。
+ * 返回 null（不支持 / 失败 / 超时）时调用方保持现状，不重置镜头。
+ */
+export const queryCurrentLens = devId => {
+  var _ty2;
+  const queryCurrentChannel = (_ty2 = ty) === null || _ty2 === void 0 || (_ty2 = _ty2.ipc) === null || _ty2 === void 0 ? void 0 : _ty2.queryCurrentChannel;
+  if (typeof queryCurrentChannel !== 'function') {
+    console.warn('[zoomTurntable] 宿主不支持 ty.ipc.queryCurrentChannel');
+    return Promise.resolve(null);
+  }
+  return new Promise(resolve => {
+    // 宿主始终不回调时不能把同步流程一直挂着；Promise 只结算一次，后到的忽略
+    const timer = setTimeout(() => {
+      console.warn('[zoomTurntable] queryCurrentChannel 超时', `${QUERY_LENS_TIMEOUT}ms`);
+      resolve(null);
+    }, QUERY_LENS_TIMEOUT);
+    const finish = value => {
+      clearTimeout(timer);
+      resolve(value);
+    };
+    try {
+      queryCurrentChannel({
+        deviceId: devId,
+        success: res => {
+          const channel = pickChannel(res);
+          if (channel == null) {
+            console.warn('[zoomTurntable] 回包里取不到 channel');
+            finish(null);
+            return;
+          }
+          // multiple 缺失 / 脏值按 1.0 兜底，否则会带进换算算出离谱倍率
+          const multiple = Number(res === null || res === void 0 ? void 0 : res.multiple);
+          finish({
+            lens_id: channel,
+            multiple: multiple > 0 ? multiple : 1.0
+          });
+        },
+        fail: err => {
+          console.warn('[zoomTurntable] queryCurrentChannel fail', JSON.stringify(err !== null && err !== void 0 ? err : null));
+          finish(null);
+        }
+      });
+    } catch (err) {
+      console.error('[zoomTurntable] queryCurrentChannel 调用异常', err);
+      finish(null);
+    }
+  });
+};
+
+/**
+ * 宿主是否支持镜头切换事件。
+ * 切镜头的收尾（画面归 1 倍 + 刷读数）以该事件为准，不支持时只能退回「switchChannel 成功即收尾」。
+ */
+export const isChannelChangeSupported = () => {
+  var _ty3;
+  return typeof ((_ty3 = ty) === null || _ty3 === void 0 || (_ty3 = _ty3.ipc) === null || _ty3 === void 0 ? void 0 : _ty3.onChannelChange) === 'function';
+};
+
+/**
+ * 打印 ty.ipc 上与 channel 相关的方法名（顺原型链收集，方法可能挂在原型上）。
+ * 真机上「事件为什么不来」第一步就是确认宿主到底提供了哪个名字。
+ */
+export const dumpChannelApis = () => {
+  var _ty4;
+  const ipc = (_ty4 = ty) === null || _ty4 === void 0 ? void 0 : _ty4.ipc;
+  if (!ipc) {
+    console.warn('[zoomTurntable] ty.ipc 不存在', `typeof ty=${typeof ty}`);
+    return;
+  }
+  const matched = describeApis(ipc, 'channel');
+  console.log(`[zoomTurntable] ty.ipc 上 channel 相关方法(${matched.length})`, matched.join(', '));
+};
+
+/** 订阅镜头切换事件（自己下发 / 设备侧 / 其他端切镜头都会上报），返回取消订阅函数 */
+export const subscribeChannelChange = (devId, handler) => {
+  if (!isChannelChangeSupported()) {
+    console.warn('[zoomTurntable] 宿主不支持 ty.ipc.onChannelChange，切镜头只能按下发结果收尾');
+    dumpChannelApis();
+    return () => undefined;
+  }
+  const listener = payload => {
+    console.log('[zoomTurntable] channelChange 事件到达', JSON.stringify(payload !== null && payload !== void 0 ? payload : null));
+    const channel = pickChannel(payload);
+    if (channel == null) {
+      console.warn('[zoomTurntable] channelChange 缺少 channel');
+      return;
+    }
+    // 一页多设备时只认自己的；宿主没带 deviceId 就不过滤
+    const deviceId = payload === null || payload === void 0 ? void 0 : payload.deviceId;
+    if (deviceId && deviceId !== devId) {
+      // 不打日志的话，事件被这里吞掉与「事件根本没来」在日志上长得一样
+      console.warn('[zoomTurntable] channelChange 非本设备，已忽略', `${deviceId} != ${devId}`);
+      return;
+    }
+    handler({
+      deviceId,
+      channel
+    });
+  };
+  console.log('[zoomTurntable] 已订阅 ty.ipc.onChannelChange', devId);
+  ty.ipc.onChannelChange(listener);
+  return () => {
+    var _ty5;
+    console.log('[zoomTurntable] 解绑 channelChange 监听', devId);
+    if (typeof ((_ty5 = ty) === null || _ty5 === void 0 || (_ty5 = _ty5.ipc) === null || _ty5 === void 0 ? void 0 : _ty5.offChannelChange) === 'function') {
+      ty.ipc.offChannelChange(listener);
+    } else {
+      console.warn('[zoomTurntable] 宿主无 offChannelChange，监听无法解绑');
+    }
+  };
+};

package/lib/widgets/zoomTurntable/measureVisible.d.ts

@@ -0,0 +1,22 @@
+export type AnchorRect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    right: number;
+    bottom: number;
+};
+/**
+ * 判断入口图标是否真正落在左下角滚动容器的可视范围内。
+ *
+ * 左下角是横向 ScrollView，元素过多时后面的入口会被裁掉，或被右边缘淡出遮罩盖住 ——
+ * 这种情况下画圈没有意义（圈到的是看不见的位置），所以返回 null。
+ *
+ * 测量策略与 ui/bottomLeftContent.tsx 同源：首测 60ms，随后 400ms 轮询兜底
+ * （左下角子元素异步加载后宽度会「长大」，一次测不准）。
+ *
+ * @returns 可见时返回入口相对视口的 rect，不可见 / 测不到返回 null
+ */
+export declare const measureEntryVisible: () => Promise<AnchorRect | null>;
+/** 播放器容器 rect，用于把入口的视口坐标换算成容器内坐标 */
+export declare const measurePlayerRect: () => Promise<AnchorRect | null>;

package/lib/widgets/zoomTurntable/measureVisible.js

@@ -0,0 +1,76 @@
+import { FADE_SAFE_PADDING } from './constants';
+import { ZOOM_ENTRY_ANCHOR_CLS } from './entryAnchor';
+/** 首次测量延时：等布局沉降 */
+const FIRST_DELAY = 60;
+/** 轮询间隔 */
+const POLL_INTERVAL = 400;
+/** 最多轮询次数（约 6s），兜底异步内容撑开导致的尺寸变化 */
+const MAX_ATTEMPTS = 15;
+const queryRect = selector => new Promise(resolve => {
+  try {
+    const query = ty.createSelectorQuery();
+    query.select(selector).boundingClientRect();
+    query.exec(res => {
+      var _res$;
+      return resolve((_res$ = res === null || res === void 0 ? void 0 : res[0]) !== null && _res$ !== void 0 ? _res$ : null);
+    });
+  } catch (err) {
+    console.warn('[zoomTurntable] measure 失败', err);
+    resolve(null);
+  }
+});
+const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+/**
+ * 判断入口图标是否真正落在左下角滚动容器的可视范围内。
+ *
+ * 左下角是横向 ScrollView，元素过多时后面的入口会被裁掉，或被右边缘淡出遮罩盖住 ——
+ * 这种情况下画圈没有意义（圈到的是看不见的位置），所以返回 null。
+ *
+ * 测量策略与 ui/bottomLeftContent.tsx 同源：首测 60ms，随后 400ms 轮询兜底
+ * （左下角子元素异步加载后宽度会「长大」，一次测不准）。
+ *
+ * @returns 可见时返回入口相对视口的 rect，不可见 / 测不到返回 null
+ */
+export const measureEntryVisible = async () => {
+  await wait(FIRST_DELAY);
+  for (let attempt = 0; attempt < MAX_ATTEMPTS; attempt++) {
+    // eslint-disable-next-line no-await-in-loop
+    const entry = await queryRect(`.${ZOOM_ENTRY_ANCHOR_CLS}`);
+    // eslint-disable-next-line no-await-in-loop
+    const scroll = await queryRect('.ipc-player-bottom-left-content-wrap');
+    if ((entry === null || entry === void 0 ? void 0 : entry.width) > 0 && (scroll === null || scroll === void 0 ? void 0 : scroll.width) > 0) {
+      const visible = entry.left >= scroll.left - 1 && entry.left + entry.width <= scroll.right - FADE_SAFE_PADDING;
+      if (visible) {
+        var _entry$right, _entry$bottom;
+        return {
+          left: entry.left,
+          top: entry.top,
+          width: entry.width,
+          height: entry.height,
+          right: (_entry$right = entry.right) !== null && _entry$right !== void 0 ? _entry$right : entry.left + entry.width,
+          bottom: (_entry$bottom = entry.bottom) !== null && _entry$bottom !== void 0 ? _entry$bottom : entry.top + entry.height
+        };
+      }
+      // 测到了但不可见：不再重试，也不写「已读」标记，留待下次（例如用户横滑把入口滑出来）
+      return null;
+    }
+
+    // eslint-disable-next-line no-await-in-loop
+    await wait(POLL_INTERVAL);
+  }
+  return null;
+};
+
+/** 播放器容器 rect，用于把入口的视口坐标换算成容器内坐标 */
+export const measurePlayerRect = () => queryRect('.ipc-player-content').then(rect => {
+  var _rect$right, _rect$bottom;
+  return (rect === null || rect === void 0 ? void 0 : rect.width) > 0 ? {
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height,
+    right: (_rect$right = rect.right) !== null && _rect$right !== void 0 ? _rect$right : rect.left + rect.width,
+    bottom: (_rect$bottom = rect.bottom) !== null && _rect$bottom !== void 0 ? _rect$bottom : rect.top + rect.height
+  } : null;
+});

package/lib/widgets/zoomTurntable/turntable/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ZoomTurntableProps } from './type';
+import './index.less';
+/**
+ * 焦距转盘渲染层。
+ * 内嵌自 ray-zoom-turntable，实际绘制与手势在 rjs（render 线程）内完成，
+ * 拖动不过桥，保证跟手。
+ */
+declare const ZoomTurntable: React.FC<ZoomTurntableProps>;
+export default ZoomTurntable;

package/lib/widgets/zoomTurntable/turntable/index.js

@@ -0,0 +1,76 @@
+import React, { useRef } from 'react';
+// @ts-ignore rjs 原生组件，无类型声明
+import Component from './rjs/index.js';
+import './index.less';
+let canvasIdCounter = 0;
+
+/**
+ * 焦距转盘渲染层。
+ * 内嵌自 ray-zoom-turntable，实际绘制与手势在 rjs（render 线程）内完成，
+ * 拖动不过桥，保证跟手。
+ */
+const ZoomTurntable = props => {
+  const {
+    min = 1,
+    max = 6,
+    step = 0.1,
+    defaultValue = 1.0,
+    value: controlledValue,
+    scale = 1,
+    orientation = 'bottom',
+    cropRatio = 0.2,
+    onChange,
+    onChangeEnd,
+    onTouchStart,
+    onTouchEnd,
+    marks,
+    ticks,
+    curve = 1,
+    activeColor = '#FFFFFF',
+    styleOptions = {}
+  } = props;
+  const canvasId = useRef(`ipc-zoom-turntable-${++canvasIdCounter}`).current;
+  console.log('[zoomTurntable/logic] render', JSON.stringify({
+    canvasId,
+    min,
+    max,
+    step,
+    orientation,
+    cropRatio,
+    scale,
+    value: controlledValue
+  }));
+  return /*#__PURE__*/React.createElement(Component, {
+    canvasId: canvasId,
+    min: min,
+    max: max,
+    step: step,
+    defaultValue: defaultValue,
+    value: controlledValue,
+    scale: scale,
+    orientation: orientation,
+    cropRatio: cropRatio,
+    marks: marks,
+    ticks: ticks,
+    curve: curve,
+    activeColor: activeColor,
+    styleOptions: styleOptions,
+    bindchange: e => {
+      console.log('[zoomTurntable/logic] change', JSON.stringify(e === null || e === void 0 ? void 0 : e.detail));
+      onChange === null || onChange === void 0 || onChange(e.detail);
+    },
+    bindchangeEnd: e => {
+      console.log('[zoomTurntable/logic] changeEnd', JSON.stringify(e === null || e === void 0 ? void 0 : e.detail));
+      onChangeEnd === null || onChangeEnd === void 0 || onChangeEnd(e.detail);
+    },
+    bindturntableTouchStart: () => {
+      console.log('[zoomTurntable/logic] turntableTouchStart');
+      onTouchStart === null || onTouchStart === void 0 || onTouchStart();
+    },
+    bindturntableTouchEnd: () => {
+      console.log('[zoomTurntable/logic] turntableTouchEnd');
+      onTouchEnd === null || onTouchEnd === void 0 || onTouchEnd();
+    }
+  });
+};
+export default ZoomTurntable;

package/lib/widgets/zoomTurntable/turntable/index.less

@@ -0,0 +1,11 @@
+.ipc-player-plugin-zoom-turntable {
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  background-color: transparent;
+  user-select: none;
+  -webkit-user-select: none;
+}