@ray-js/ipc-player-integration 0.0.34 → 0.0.35-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/ctx/ctx.composition.js +11 -1
- package/lib/features/initPlayerWidgets/index.d.ts +1 -0
- package/lib/features/initPlayerWidgets/index.js +8 -0
- package/lib/i18n/index.d.ts +24 -0
- package/lib/i18n/strings.d.ts +12 -0
- package/lib/i18n/strings.js +14 -2
- package/lib/interface.d.ts +1 -1
- package/lib/res/try/try_close.png +0 -0
- package/lib/res/try/try_en.png +0 -0
- package/lib/res/try/try_open.png +0 -0
- package/lib/res/try/try_zh.png +0 -0
- package/lib/ui/bottomLeftContent.d.ts +4 -1
- package/lib/ui/bottomLeftContent.js +93 -8
- package/lib/ui/bottomRightContent.d.ts +3 -1
- package/lib/ui/bottomRightContent.js +11 -4
- package/lib/ui/constant.d.ts +9 -0
- package/lib/ui/constant.js +10 -0
- package/lib/ui/index.d.ts +1 -1
- package/lib/ui/index.js +1 -1
- package/lib/ui/ui.d.ts +1 -0
- package/lib/ui/ui.js +106 -57
- package/lib/ui/ui.less +5 -1
- package/lib/utils/index.d.ts +2 -1
- package/lib/utils/index.js +3 -11
- package/lib/utils/navigation.d.ts +7 -0
- package/lib/utils/navigation.js +23 -0
- package/lib/utils/ttt.d.ts +42 -0
- package/lib/utils/ttt.js +123 -0
- package/lib/widgets/floodlight/floodlight.d.ts +4 -0
- package/lib/widgets/floodlight/floodlight.js +55 -0
- package/lib/widgets/floodlight/floodlight.less +4 -0
- package/lib/widgets/floodlight/index.d.ts +1 -0
- package/lib/widgets/floodlight/index.js +1 -0
- package/lib/widgets/index.d.ts +4 -0
- package/lib/widgets/index.js +4 -0
- package/lib/widgets/siren/index.d.ts +1 -0
- package/lib/widgets/siren/index.js +1 -0
- package/lib/widgets/siren/siren.d.ts +4 -0
- package/lib/widgets/siren/siren.js +55 -0
- package/lib/widgets/siren/siren.less +4 -0
- package/lib/widgets/trialBadge/index.d.ts +17 -0
- package/lib/widgets/trialBadge/index.js +88 -0
- package/lib/widgets/trialBadge/index.less +57 -0
- package/lib/widgets/trialBadge/useTrialBadge.d.ts +8 -0
- package/lib/widgets/trialBadge/useTrialBadge.js +42 -0
- package/lib/widgets/tryExperience/index.d.ts +1 -0
- package/lib/widgets/tryExperience/index.js +1 -0
- package/lib/widgets/tryExperience/tryExperience.d.ts +14 -0
- package/lib/widgets/tryExperience/tryExperience.js +145 -0
- package/lib/widgets/tryExperience/tryExperience.less +13 -0
- package/package.json +3 -3
package/lib/ui/ui.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
2
|
import "core-js/modules/esnext.iterator.constructor.js";
|
|
3
|
+
import "core-js/modules/esnext.iterator.filter.js";
|
|
3
4
|
import "core-js/modules/esnext.iterator.map.js";
|
|
4
5
|
import React, { useContext, useState, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
|
|
5
6
|
import { View, CoverView, getSystemInfoSync, usePageEvent, setNavigationBarBack, setPageOrientation, getCurrentPages } from '@ray-js/ray';
|
|
@@ -11,7 +12,7 @@ import { PlayState, PlayerStreamStatus, MultiCameraScreenMode } from '../interfa
|
|
|
11
12
|
import { useCtx } from '../ctx/ctx.composition';
|
|
12
13
|
import { useStore, updateAtom } from '../ctx/store';
|
|
13
14
|
import { UIEventContext } from './context';
|
|
14
|
-
import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent, decodeClarityDic, changeIgnoreHideStopPreview, moveablePtzControlId, tileActionsId, tileTipId, landscapeTipId, multiPtzId, ptzMoveableTipId, showFlowLowTipId, zoomLevelChange, setScaleMultipleEvent } from './constant';
|
|
15
|
+
import { showAllComponent, hideAllComponent, playerTap, startTimeToHideAllComponent, pauseTimeToHideAllComponent, decodeClarityDic, changeIgnoreHideStopPreview, moveablePtzControlId, tileActionsId, tileTipId, landscapeTipId, multiPtzId, ptzMoveableTipId, showFlowLowTipId, zoomLevelChange, setScaleMultipleEvent, trialCountdownEnd, refreshSmartImageQualityEvent } from './constant';
|
|
15
16
|
import BottomLeftContent from './bottomLeftContent';
|
|
16
17
|
import BottomRightContent from './bottomRightContent';
|
|
17
18
|
import TopLeftContent from './topLeftContent';
|
|
@@ -21,7 +22,7 @@ import { useMemoizedFn } from '../hooks';
|
|
|
21
22
|
import { Storage } from '../utils/storage';
|
|
22
23
|
import './ui.less';
|
|
23
24
|
import { updatePlayerWidgetProps } from '../features';
|
|
24
|
-
import {
|
|
25
|
+
import { getSmartImageQualityState, isLowPhone } from '../utils/ttt';
|
|
25
26
|
function getCtxInstance(instance, devId) {
|
|
26
27
|
if (instance) return instance;
|
|
27
28
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
@@ -67,7 +68,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
67
68
|
limitFlow = false,
|
|
68
69
|
showFlowLowTip = false,
|
|
69
70
|
extend = {},
|
|
70
|
-
refreshElement = false
|
|
71
|
+
refreshElement = false,
|
|
72
|
+
autoWakeUp = false
|
|
71
73
|
} = props;
|
|
72
74
|
const {
|
|
73
75
|
event
|
|
@@ -101,8 +103,10 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
101
103
|
useImperativeHandle(eventRefProp, () => eventRef.current, [eventRef.current]);
|
|
102
104
|
const timer = useRef();
|
|
103
105
|
const reGetOrientationTimer = useRef(null);
|
|
104
|
-
|
|
105
|
-
const [
|
|
106
|
+
// 统一调整为1倍缩放,保证画面展示完全
|
|
107
|
+
const [scaleMultiple, setScaleMultiple] = useState(1);
|
|
108
|
+
// 统一调整为1倍缩放,保证画面展示完全
|
|
109
|
+
const [currentZoomLevel, setCurrentZoomLevel] = useState(1);
|
|
106
110
|
const [createCtx, setCreateCtx] = useState(false);
|
|
107
111
|
// 是否需要忽略进入后台停止预览
|
|
108
112
|
const [ignoreStopOnHide, setIgnoreStopOnHide] = useState(ignoreHideStopPreview);
|
|
@@ -110,9 +114,29 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
110
114
|
// const [verticalCoverZoom, setVerticalCoverZoom] = useState(-2);
|
|
111
115
|
// const [verticalZoomLevel, setVerticalZoomLevel] = useState(playerFit === 'contain' ? 1 : -2);
|
|
112
116
|
|
|
117
|
+
const isLowPhoneRef = useRef(false);
|
|
118
|
+
useEffect(() => {
|
|
119
|
+
isLowPhone().then(res => {
|
|
120
|
+
isLowPhoneRef.current = !!res;
|
|
121
|
+
});
|
|
122
|
+
}, []);
|
|
123
|
+
|
|
113
124
|
// 展示顶部内容
|
|
114
125
|
const [showTopContent, setShowTopContent] = useState(true);
|
|
115
126
|
|
|
127
|
+
// pad / 折叠屏小窗口展示面板的情况;getSystemInfoSync 在 onLoad 之后才有准确值,
|
|
128
|
+
// 这里给安全默认 false,由 onLoad / onResize 实际计算并更新
|
|
129
|
+
const [isSmallScreen, setIsSmallScreen] = useState(false);
|
|
130
|
+
const computeIsSmallScreen = useMemoizedFn(() => {
|
|
131
|
+
const {
|
|
132
|
+
windowWidth,
|
|
133
|
+
screenWidth,
|
|
134
|
+
windowHeight
|
|
135
|
+
} = getSystemInfoSync();
|
|
136
|
+
// 取小屏值判断是最准确的 pad / 折叠屏小窗口情况
|
|
137
|
+
return !(screenWidth === windowWidth || screenWidth === windowHeight);
|
|
138
|
+
});
|
|
139
|
+
|
|
116
140
|
// 外部传入的ignoreHideStopPreview变化时,同步更新
|
|
117
141
|
useEffect(() => {
|
|
118
142
|
setIgnoreStopOnHide(ignoreHideStopPreview);
|
|
@@ -404,8 +428,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
404
428
|
eventRef.current.emit(showAllComponent);
|
|
405
429
|
eventRef.current.emit('disablePlayerTap', true);
|
|
406
430
|
eventRef.current.emit(pauseTimeToHideAllComponent);
|
|
407
|
-
//
|
|
408
|
-
setScaleMultiple(
|
|
431
|
+
// 按宽填充,保证播放流宽度为屏幕宽度,高度自适应设为1倍
|
|
432
|
+
setScaleMultiple(1);
|
|
409
433
|
} else {
|
|
410
434
|
// 短屏或横屏时,恢复自动隐藏
|
|
411
435
|
eventRef.current.emit('disablePlayerTap', false);
|
|
@@ -414,14 +438,32 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
414
438
|
}, [isVerticalFullLayout, screenType, playerFit]);
|
|
415
439
|
useEffect(() => {
|
|
416
440
|
if (createCtx) {
|
|
417
|
-
|
|
418
|
-
|
|
441
|
+
// 统一调整为1倍缩放,保证画面展示完全
|
|
442
|
+
setScaleMultiple(1);
|
|
443
|
+
setCurrentZoomLevel(1);
|
|
419
444
|
}
|
|
420
445
|
}, [playerFit, createCtx]);
|
|
421
446
|
useEffect(() => {
|
|
422
447
|
setBrandColor(brandColor);
|
|
423
448
|
setVerticalMic(verticalMic);
|
|
424
449
|
}, [brandColor, verticalMic]);
|
|
450
|
+
const refreshSmartImageQuality = useMemoizedFn(async () => {
|
|
451
|
+
const res = await getSmartImageQualityState(devId);
|
|
452
|
+
if (res === undefined) return;
|
|
453
|
+
updatePlayerWidgetProps(instance, 'bottomLeft', 'TryExperience', {
|
|
454
|
+
isPurchase: res.isPurchase,
|
|
455
|
+
buttonState: res.buttonState,
|
|
456
|
+
trialRemainingSec: res.trialRemainingSec,
|
|
457
|
+
canOpenSettings: res.canOpenSettings,
|
|
458
|
+
isLowPhone: isLowPhoneRef.current,
|
|
459
|
+
refreshToken: Date.now()
|
|
460
|
+
});
|
|
461
|
+
});
|
|
462
|
+
useEffect(() => {
|
|
463
|
+
if (playState === PlayState.PLAYING) {
|
|
464
|
+
refreshSmartImageQuality();
|
|
465
|
+
}
|
|
466
|
+
}, [instance, playState]);
|
|
425
467
|
const refreshBottomLeft = () => {
|
|
426
468
|
event.current.emit(startTimeToHideAllComponent);
|
|
427
469
|
event.current.emit(showAllComponent);
|
|
@@ -451,6 +493,13 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
451
493
|
* 监听播放器实例创建完成
|
|
452
494
|
*/
|
|
453
495
|
|
|
496
|
+
/**
|
|
497
|
+
* 页面 onLoad 后才能拿到准确的 systemInfo,这里第一次确定小屏状态
|
|
498
|
+
*/
|
|
499
|
+
usePageEvent('onLoad', () => {
|
|
500
|
+
setIsSmallScreen(computeIsSmallScreen());
|
|
501
|
+
});
|
|
502
|
+
|
|
454
503
|
/**
|
|
455
504
|
* 监听屏幕布局变化
|
|
456
505
|
*/
|
|
@@ -464,8 +513,13 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
464
513
|
const {
|
|
465
514
|
type
|
|
466
515
|
} = sizeData;
|
|
516
|
+
|
|
517
|
+
// 折叠屏展开/收起、pad 多窗口拖拽等场景,需要重新计算并同步
|
|
518
|
+
const small = computeIsSmallScreen();
|
|
519
|
+
setIsSmallScreen(small);
|
|
520
|
+
|
|
467
521
|
// 针对pad 和折叠屏展开的情况暂不支持横屏,且在ios pad模式下 会触发onResize事件, 待解决
|
|
468
|
-
if (
|
|
522
|
+
if (small) {
|
|
469
523
|
setScreenType('vertical');
|
|
470
524
|
} else {
|
|
471
525
|
setScreenType(type === 'landscape' ? 'full' : 'vertical');
|
|
@@ -480,19 +534,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
480
534
|
}
|
|
481
535
|
triggerEvent(showAllComponent);
|
|
482
536
|
}
|
|
483
|
-
//
|
|
484
|
-
|
|
485
|
-
console.log(scaleMultiple, '===========fill');
|
|
486
|
-
setScaleMultiple(-1);
|
|
487
|
-
} else if (type === 'landscape' && landscapeMode === 'standard') {
|
|
488
|
-
console.log(scaleMultiple, '===========landscape');
|
|
489
|
-
setScaleMultiple(-2);
|
|
490
|
-
} else {
|
|
491
|
-
// 竖屏时 将屏幕播放比例设为按宽按高
|
|
492
|
-
|
|
493
|
-
console.log(scaleMultiple, '===========landscape');
|
|
494
|
-
setScaleMultiple(playerFit === 'contain' ? scaleMultiple === 1 ? -1 : 1 : -2);
|
|
495
|
-
}
|
|
537
|
+
// 横屏(fill/standard)与竖屏均统一调整为 1 倍缩放,保证画面完整展示
|
|
538
|
+
setScaleMultiple(1);
|
|
496
539
|
} catch (err) {
|
|
497
540
|
console.log(err, 'err');
|
|
498
541
|
}
|
|
@@ -621,7 +664,18 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
621
664
|
// 添加通用变量单独组件类名
|
|
622
665
|
className: clsx('bottom-right-item-container')
|
|
623
666
|
})));
|
|
624
|
-
}, [
|
|
667
|
+
}, [bottomRightContent, instance]);
|
|
668
|
+
|
|
669
|
+
/**
|
|
670
|
+
* 右下角可见按钮数 → 右下角组件宽度(左下角同时用作右侧预留宽度)
|
|
671
|
+
* 1 个按钮: 115px / 2 个按钮: 132px / 0 个按钮: 0
|
|
672
|
+
*/
|
|
673
|
+
const bottomRightWidth = useMemo(() => {
|
|
674
|
+
const visibleCount = (bottomRightContent || []).filter(item => !item.hidden).length;
|
|
675
|
+
if (visibleCount <= 0) return 0;
|
|
676
|
+
if (visibleCount === 1) return 115;
|
|
677
|
+
return 132;
|
|
678
|
+
}, [bottomRightContent]);
|
|
625
679
|
|
|
626
680
|
/**
|
|
627
681
|
* 视频流加载状态封装
|
|
@@ -645,10 +699,12 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
645
699
|
}
|
|
646
700
|
}
|
|
647
701
|
if (playState === PlayState.PLAYING) {
|
|
648
|
-
// 仅在第一次播放成功时,针对竖屏并且为cover模式时,设置为-2
|
|
702
|
+
// 仅在第一次播放成功时,针对竖屏并且为cover模式时,设置为-2 修改为只针对第一次播放成功时
|
|
649
703
|
console.log('Playing状态');
|
|
650
|
-
if (screenType === 'vertical' && playerFit === 'cover' && !hasPlayedRef.current) {
|
|
651
|
-
|
|
704
|
+
// if (screenType === 'vertical' && playerFit === 'cover' && !hasPlayedRef.current) {
|
|
705
|
+
if (!hasPlayedRef.current) {
|
|
706
|
+
// 统一调整为1倍缩放,保证画面展示完全
|
|
707
|
+
setScaleMultiple(1);
|
|
652
708
|
hasPlayedRef.current = true;
|
|
653
709
|
}
|
|
654
710
|
}
|
|
@@ -725,6 +781,11 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
725
781
|
const onSetScaleMultiple = value => {
|
|
726
782
|
setScaleMultiple(value);
|
|
727
783
|
};
|
|
784
|
+
const onTrialCountdownEnd = useMemoizedFn(() => {
|
|
785
|
+
updatePlayerWidgetProps(instance, 'bottomLeft', 'TryExperience', {
|
|
786
|
+
buttonState: 2
|
|
787
|
+
});
|
|
788
|
+
});
|
|
728
789
|
useEffect(() => {
|
|
729
790
|
eventRef.current.on(startTimeToHideAllComponent, listenStart);
|
|
730
791
|
eventRef.current.on(pauseTimeToHideAllComponent, listenPause);
|
|
@@ -734,6 +795,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
734
795
|
eventRef.current.on('refreshBottomLeft', refreshBottomLeft);
|
|
735
796
|
eventRef.current.on(changeIgnoreHideStopPreview, onChangeIgnoreHideStopPreview);
|
|
736
797
|
eventRef.current.on(setScaleMultipleEvent, onSetScaleMultiple);
|
|
798
|
+
eventRef.current.on(trialCountdownEnd, onTrialCountdownEnd);
|
|
799
|
+
eventRef.current.on(refreshSmartImageQualityEvent, refreshSmartImageQuality);
|
|
737
800
|
return () => {
|
|
738
801
|
eventRef.current.off(startTimeToHideAllComponent, listenStart);
|
|
739
802
|
eventRef.current.off(pauseTimeToHideAllComponent, listenPause);
|
|
@@ -743,6 +806,8 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
743
806
|
eventRef.current.off('refreshBottomLeft', refreshBottomLeft);
|
|
744
807
|
eventRef.current.off(changeIgnoreHideStopPreview, onChangeIgnoreHideStopPreview);
|
|
745
808
|
eventRef.current.off(setScaleMultipleEvent, onSetScaleMultiple);
|
|
809
|
+
eventRef.current.off(trialCountdownEnd, onTrialCountdownEnd);
|
|
810
|
+
eventRef.current.off(refreshSmartImageQualityEvent, refreshSmartImageQuality);
|
|
746
811
|
if (multiTapTimerRef.current) {
|
|
747
812
|
clearTimeout(multiTapTimerRef.current);
|
|
748
813
|
multiTapTimerRef.current = null;
|
|
@@ -757,14 +822,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
757
822
|
/**
|
|
758
823
|
* 监听当前的zoom比例状态
|
|
759
824
|
*/
|
|
760
|
-
// useEffect(() => {
|
|
761
|
-
// if (screenType === 'vertical') {
|
|
762
|
-
// console.log(currentZoomLevel, '竖屏时的缩放比例');
|
|
763
|
-
// setVerticalZoomLevel(currentZoomLevel);
|
|
764
|
-
// // setScaleMultiple(currentZoomLevel);
|
|
765
|
-
// }
|
|
766
|
-
// }, [screenType, currentZoomLevel]);
|
|
767
|
-
|
|
768
825
|
const onZoomChange = useMemoizedFn(data => {
|
|
769
826
|
const {
|
|
770
827
|
zoomLevel,
|
|
@@ -775,30 +832,19 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
775
832
|
if (zoomLevel === 0) {
|
|
776
833
|
return false;
|
|
777
834
|
}
|
|
778
|
-
/**
|
|
779
|
-
* 针对竖屏为cover模式时,横屏为standard模式时,主动设置缩放比例,避免因值不能正常变化
|
|
780
|
-
*/
|
|
781
|
-
if (scaleMode === -2 && playerFit === 'cover' && screenType === 'vertical' && landscapeMode === 'standard') {
|
|
782
|
-
console.log('dsadsadsad----', zoomLevel);
|
|
783
|
-
setScaleMultiple(zoomLevel);
|
|
784
|
-
}
|
|
785
835
|
/**
|
|
786
836
|
* 针对竖屏为contain模式时,横屏为fill模式时,主动设置缩放比例,避免因值不能正常变化
|
|
787
837
|
*/
|
|
788
|
-
if (
|
|
789
|
-
|
|
790
|
-
|
|
838
|
+
// if (
|
|
839
|
+
// scaleMode === -1 &&
|
|
840
|
+
// playerFit === 'contain' &&
|
|
841
|
+
// screenType === 'vertical' &&
|
|
842
|
+
// landscapeMode === 'fill'
|
|
843
|
+
// ) {
|
|
844
|
+
// setVerticalCoverZoom(zoomLevel);
|
|
845
|
+
// }
|
|
791
846
|
|
|
792
|
-
|
|
793
|
-
* 横屏情况下 针对竖屏为contain模式时,横屏为fill模式时,主动设置缩放比例,避免因值不能正常变化
|
|
794
|
-
*/
|
|
795
|
-
if (scaleMode === -2 && playerFit === 'cover' && screenType !== 'vertical' && landscapeMode === 'standard') {
|
|
796
|
-
setScaleMultiple(zoomLevel);
|
|
797
|
-
}
|
|
798
|
-
if (scaleMode === -1 && playerFit === 'contain' && screenType !== 'vertical' && landscapeMode === 'fill') {
|
|
799
|
-
setVerticalCoverZoom(zoomLevel);
|
|
800
|
-
setScaleMultiple(zoomLevel);
|
|
801
|
-
}
|
|
847
|
+
// 直接记录当前缩放比例
|
|
802
848
|
setCurrentZoomLevel(zoomLevel);
|
|
803
849
|
instance.event.emit(zoomLevelChange, zoomLevel);
|
|
804
850
|
return false;
|
|
@@ -918,6 +964,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
918
964
|
playerRoute: playerRoute,
|
|
919
965
|
defaultAutoPlay: defaultAutoPlay,
|
|
920
966
|
limitFlow: limitFlow,
|
|
967
|
+
autoWakeUp: autoWakeUp,
|
|
921
968
|
extend: _objectSpread(_objectSpread({
|
|
922
969
|
backgroundColor: '#262626'
|
|
923
970
|
}, instance.multiCameraCtx.extendProps), extend)
|
|
@@ -943,9 +990,11 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
943
990
|
height: screenType === 'vertical' ? '48px' : '72px'
|
|
944
991
|
}
|
|
945
992
|
}, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BottomLeftContent, {
|
|
946
|
-
ctx: instance
|
|
993
|
+
ctx: instance,
|
|
994
|
+
reservedRight: bottomRightWidth
|
|
947
995
|
}, renderBottomLeftContent), /*#__PURE__*/React.createElement(BottomRightContent, {
|
|
948
|
-
ctx: instance
|
|
996
|
+
ctx: instance,
|
|
997
|
+
width: bottomRightWidth
|
|
949
998
|
}, renderBottomRightContent))), (() => {
|
|
950
999
|
if (!absoluteContent || !(absoluteContent !== null && absoluteContent !== void 0 && absoluteContent.length)) return null;
|
|
951
1000
|
return absoluteContent.map(item => {
|
package/lib/ui/ui.less
CHANGED
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
.ipc-player-bottom-content-hide {
|
|
61
|
-
transform: translate(0,
|
|
61
|
+
transform: translate(0, 100%);
|
|
62
62
|
transition: transform 0.3s ease-in-out;
|
|
63
63
|
}
|
|
64
64
|
|
|
@@ -214,6 +214,9 @@
|
|
|
214
214
|
display: flex;
|
|
215
215
|
justify-content: center;
|
|
216
216
|
align-items: center;
|
|
217
|
+
// 左下角支持横向滚动;不允许子项被压缩,否则在 width:100% 的滚动容器里
|
|
218
|
+
// 子项会被挤而不是触发横滑
|
|
219
|
+
flex-shrink: 0;
|
|
217
220
|
}
|
|
218
221
|
|
|
219
222
|
.bottom-left-item-container:first-of-type {
|
|
@@ -231,6 +234,7 @@
|
|
|
231
234
|
// 左下角全屏子元素容器
|
|
232
235
|
.bottom-left-item-full-container {
|
|
233
236
|
padding: 0 24px !important;
|
|
237
|
+
flex-shrink: 0;
|
|
234
238
|
}
|
|
235
239
|
|
|
236
240
|
.bottom-left-item-full-container:first-of-type {
|
package/lib/utils/index.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
/// <reference types="jest" />
|
|
2
|
-
export declare const isSmallScreen: boolean;
|
|
3
2
|
/**
|
|
4
3
|
* 麦克风对讲按钮径向渐变
|
|
5
4
|
*/
|
|
@@ -15,3 +14,5 @@ export declare const promisify: <TParams extends Record<string, any>, TSuccessRe
|
|
|
15
14
|
complete?: (() => void) | undefined;
|
|
16
15
|
}) => void) => (params: Omit<TParams, "complete" | "success" | "fail">) => Promise<TSuccessResult>;
|
|
17
16
|
export * from './videoSplitHelper';
|
|
17
|
+
export * from './navigation';
|
|
18
|
+
export * from './ttt';
|
package/lib/utils/index.js
CHANGED
|
@@ -1,14 +1,4 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
-
import { getSystemInfoSync } from '@ray-js/ray';
|
|
3
|
-
const {
|
|
4
|
-
windowWidth,
|
|
5
|
-
screenWidth,
|
|
6
|
-
windowHeight
|
|
7
|
-
} = getSystemInfoSync();
|
|
8
|
-
|
|
9
|
-
// pad和折叠屏小窗口展示面板的情况
|
|
10
|
-
export const isSmallScreen = !(screenWidth === windowWidth || screenWidth === windowHeight);
|
|
11
|
-
|
|
12
2
|
/**
|
|
13
3
|
* 麦克风对讲按钮径向渐变
|
|
14
4
|
*/
|
|
@@ -47,4 +37,6 @@ export const promisify = apiFunction => {
|
|
|
47
37
|
});
|
|
48
38
|
};
|
|
49
39
|
};
|
|
50
|
-
export * from './videoSplitHelper';
|
|
40
|
+
export * from './videoSplitHelper';
|
|
41
|
+
export * from './navigation';
|
|
42
|
+
export * from './ttt';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const miniIdLabs: {
|
|
2
|
+
aiDrawMini: string;
|
|
3
|
+
securityCloudService: string;
|
|
4
|
+
};
|
|
5
|
+
export declare function gotoAIDrawMiniProgram(devId: string, brandColor: string): void;
|
|
6
|
+
export declare function gotoSecurityCloudService(homeId: string, uuid: string): Promise<void>;
|
|
7
|
+
export declare function gotoSecurityCloudService2(devId: string): Promise<import("@ray-js/ray-ipc-utils/lib/interface").IRes<unknown>>;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { getServiceUrl, goToMiniProgramByShortLink } from '@ray-js/ray-ipc-utils';
|
|
2
|
+
import Color from 'color';
|
|
3
|
+
|
|
4
|
+
// 小程序ID集合
|
|
5
|
+
export const miniIdLabs = {
|
|
6
|
+
// ai智能画质
|
|
7
|
+
aiDrawMini: 'tyjo8cvir22cc0yech',
|
|
8
|
+
// security_cloud_service, 增值服务商城小程序ID
|
|
9
|
+
securityCloudService: 'tyeavwo0j4oocvdrf1'
|
|
10
|
+
};
|
|
11
|
+
export function gotoAIDrawMiniProgram(devId, brandColor) {
|
|
12
|
+
const color = new Color(brandColor);
|
|
13
|
+
const rgbColor = color.rgb().toString();
|
|
14
|
+
const url = `godzilla://${miniIdLabs.aiDrawMini}${'/pages/home/index'}?deviceId=${devId}&themeColor=${rgbColor}`;
|
|
15
|
+
goToMiniProgramByShortLink(url, 'right');
|
|
16
|
+
}
|
|
17
|
+
export async function gotoSecurityCloudService(homeId, uuid) {
|
|
18
|
+
const url = `godzilla://${miniIdLabs.securityCloudService}${'/pages/serviceList/index'}?homeId=${homeId}&deviceId=${uuid}&categoryCode=${'security_cloud_service'}`;
|
|
19
|
+
goToMiniProgramByShortLink(url, 'right');
|
|
20
|
+
}
|
|
21
|
+
export async function gotoSecurityCloudService2(devId) {
|
|
22
|
+
return getServiceUrl(devId, 'security_cloud_service', {}, true);
|
|
23
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
export type SmartImageQualityResult = {
|
|
2
|
+
isPurchase: boolean;
|
|
3
|
+
buttonState: number;
|
|
4
|
+
trialRemainingSec: number;
|
|
5
|
+
canOpenSettings: boolean;
|
|
6
|
+
};
|
|
7
|
+
export declare function getSmartImageQualityState(devId: string): Promise<SmartImageQualityResult>;
|
|
8
|
+
export type AIFrameFeatureScope = {
|
|
9
|
+
inPreview: boolean;
|
|
10
|
+
inMessage: boolean;
|
|
11
|
+
inPlayback: boolean;
|
|
12
|
+
inCloudData: boolean;
|
|
13
|
+
};
|
|
14
|
+
export type AIFrameFeatureDetail = {
|
|
15
|
+
srModelStatus: number;
|
|
16
|
+
lightModelStatus: number;
|
|
17
|
+
filterStatus: number;
|
|
18
|
+
};
|
|
19
|
+
export type AIFrameFeatureConfig = {
|
|
20
|
+
scope: AIFrameFeatureScope;
|
|
21
|
+
feature: AIFrameFeatureDetail;
|
|
22
|
+
exportEnabled: boolean;
|
|
23
|
+
};
|
|
24
|
+
export type SetAIFrameFeatureParams = {
|
|
25
|
+
devId: string;
|
|
26
|
+
enabled: boolean;
|
|
27
|
+
aiFrameFeature: AIFrameFeatureConfig;
|
|
28
|
+
scene: string;
|
|
29
|
+
};
|
|
30
|
+
export type GetAIFrameFeatureResult = {
|
|
31
|
+
enabled: boolean;
|
|
32
|
+
aiFrameFeature: AIFrameFeatureConfig;
|
|
33
|
+
requestId: string;
|
|
34
|
+
localPath: string;
|
|
35
|
+
thingFileUri: string;
|
|
36
|
+
};
|
|
37
|
+
export declare function getAIFrameFeature(devId: string): Promise<GetAIFrameFeatureResult>;
|
|
38
|
+
export declare function setAIFrameFeature(params: SetAIFrameFeatureParams): Promise<any>;
|
|
39
|
+
export declare function getDeviceInfo(devId: string): Promise<unknown>;
|
|
40
|
+
export declare function getCurrentHomeInfo(): Promise<unknown>;
|
|
41
|
+
export declare function setTrailFinish(devId: string): Promise<unknown>;
|
|
42
|
+
export declare function isLowPhone(): Promise<unknown>;
|
package/lib/utils/ttt.js
ADDED
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
export function getSmartImageQualityState(devId) {
|
|
3
|
+
return new Promise(resolve => {
|
|
4
|
+
try {
|
|
5
|
+
ty.ipc.getSmartImageQualityState({
|
|
6
|
+
devId,
|
|
7
|
+
scene: 'inPreview',
|
|
8
|
+
success: data => {
|
|
9
|
+
console.log('res===getSmartImageQualityState data', data);
|
|
10
|
+
resolve(data);
|
|
11
|
+
},
|
|
12
|
+
fail: () => {
|
|
13
|
+
resolve(undefined);
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
} catch (e) {
|
|
17
|
+
resolve(undefined);
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
export function getAIFrameFeature(devId) {
|
|
22
|
+
return new Promise(resolve => {
|
|
23
|
+
try {
|
|
24
|
+
ty.ipc.getAIFrameFeature({
|
|
25
|
+
devId,
|
|
26
|
+
success: data => {
|
|
27
|
+
console.log('res===getAIFrameFeature data', data);
|
|
28
|
+
resolve(data);
|
|
29
|
+
},
|
|
30
|
+
fail: e => {
|
|
31
|
+
console.warn('res===getAIFrameFeature fail', e);
|
|
32
|
+
resolve(undefined);
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
} catch (e) {
|
|
36
|
+
resolve(undefined);
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
export function setAIFrameFeature(params) {
|
|
41
|
+
return new Promise(resolve => {
|
|
42
|
+
try {
|
|
43
|
+
ty.ipc.setAIFrameFeature(_objectSpread(_objectSpread({}, params), {}, {
|
|
44
|
+
success: data => {
|
|
45
|
+
console.log('res===setAIFrameFeature data', data);
|
|
46
|
+
resolve(data);
|
|
47
|
+
},
|
|
48
|
+
fail: e => {
|
|
49
|
+
console.warn('res===setAIFrameFeature fail', e);
|
|
50
|
+
resolve(undefined);
|
|
51
|
+
}
|
|
52
|
+
}));
|
|
53
|
+
} catch (e) {
|
|
54
|
+
resolve(undefined);
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
export function getDeviceInfo(devId) {
|
|
59
|
+
return new Promise(resolve => {
|
|
60
|
+
try {
|
|
61
|
+
ty.device.getDeviceInfo({
|
|
62
|
+
deviceId: devId,
|
|
63
|
+
success: res => {
|
|
64
|
+
resolve(res);
|
|
65
|
+
},
|
|
66
|
+
fail: () => {
|
|
67
|
+
resolve(undefined);
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
} catch (e) {
|
|
71
|
+
resolve(undefined);
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
export function getCurrentHomeInfo() {
|
|
76
|
+
return new Promise(resolve => {
|
|
77
|
+
try {
|
|
78
|
+
ty.home.getCurrentHomeInfo({
|
|
79
|
+
success: res => {
|
|
80
|
+
resolve(res);
|
|
81
|
+
},
|
|
82
|
+
fail: () => {
|
|
83
|
+
resolve(undefined);
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
} catch (e) {
|
|
87
|
+
resolve(undefined);
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
export function setTrailFinish(devId) {
|
|
92
|
+
return new Promise(resolve => {
|
|
93
|
+
try {
|
|
94
|
+
ty.ipc.setTrailFinish({
|
|
95
|
+
devId,
|
|
96
|
+
success: res => {
|
|
97
|
+
resolve(res);
|
|
98
|
+
},
|
|
99
|
+
fail: () => {
|
|
100
|
+
resolve(undefined);
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
} catch (e) {
|
|
104
|
+
resolve(undefined);
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
export function isLowPhone() {
|
|
109
|
+
return new Promise(resolve => {
|
|
110
|
+
try {
|
|
111
|
+
ty.device.isLowPhone({
|
|
112
|
+
success: res => {
|
|
113
|
+
resolve(res);
|
|
114
|
+
},
|
|
115
|
+
fail: () => {
|
|
116
|
+
resolve(false);
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
} catch (e) {
|
|
120
|
+
resolve(false);
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { View, Text } from '@ray-js/ray';
|
|
2
|
+
import React, { useContext } from 'react';
|
|
3
|
+
import clsx from 'clsx';
|
|
4
|
+
import { useDpState } from '../../hooks';
|
|
5
|
+
import { useStore } from '../../ctx/store';
|
|
6
|
+
import { UIEventContext } from '../../ui/context';
|
|
7
|
+
import { widgetLabs, widgetClick, pauseTimeToHideAllComponent, startTimeToHideAllComponent } from '../../ui/constant';
|
|
8
|
+
import './floodlight.less';
|
|
9
|
+
const FLOODLIGHT_SWITCH_DP_CODE = 'floodlight_switch';
|
|
10
|
+
export const Floodlight = props => {
|
|
11
|
+
const {
|
|
12
|
+
devId,
|
|
13
|
+
screenType: screenTypeAtom,
|
|
14
|
+
className,
|
|
15
|
+
event: propsEvent
|
|
16
|
+
} = props;
|
|
17
|
+
const {
|
|
18
|
+
event: ctxEvent
|
|
19
|
+
} = useContext(UIEventContext);
|
|
20
|
+
const event = propsEvent !== null && propsEvent !== void 0 ? propsEvent : ctxEvent;
|
|
21
|
+
const {
|
|
22
|
+
screenType,
|
|
23
|
+
brandColor
|
|
24
|
+
} = useStore({
|
|
25
|
+
screenType: screenTypeAtom,
|
|
26
|
+
brandColor: props.brandColor
|
|
27
|
+
});
|
|
28
|
+
const [state, dpSchema, sendDp] = useDpState({
|
|
29
|
+
devId,
|
|
30
|
+
dpCodes: [FLOODLIGHT_SWITCH_DP_CODE]
|
|
31
|
+
});
|
|
32
|
+
const supported = !!(dpSchema !== null && dpSchema !== void 0 && dpSchema[FLOODLIGHT_SWITCH_DP_CODE]);
|
|
33
|
+
const enabled = !!state[FLOODLIGHT_SWITCH_DP_CODE];
|
|
34
|
+
if (screenType !== 'full' || !supported) {
|
|
35
|
+
return null;
|
|
36
|
+
}
|
|
37
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
38
|
+
className: clsx(className),
|
|
39
|
+
onClick: () => {
|
|
40
|
+
event.emit(widgetClick, {
|
|
41
|
+
widgetId: widgetLabs.FLOODLIGHT
|
|
42
|
+
});
|
|
43
|
+
event.emit(pauseTimeToHideAllComponent);
|
|
44
|
+
sendDp({
|
|
45
|
+
[FLOODLIGHT_SWITCH_DP_CODE]: !enabled
|
|
46
|
+
});
|
|
47
|
+
event.emit(startTimeToHideAllComponent);
|
|
48
|
+
}
|
|
49
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
50
|
+
className: clsx('icon-panel', 'icon-panel-deng', 'ipc-player-plugin-floodlight-text-icon'),
|
|
51
|
+
style: {
|
|
52
|
+
color: enabled ? brandColor : undefined
|
|
53
|
+
}
|
|
54
|
+
}));
|
|
55
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './floodlight';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './floodlight';
|
package/lib/widgets/index.d.ts
CHANGED
|
@@ -8,6 +8,10 @@ export * from './fullScreen';
|
|
|
8
8
|
export * from './videoBitKBP';
|
|
9
9
|
export * from './voiceIntercom';
|
|
10
10
|
export * from './muted';
|
|
11
|
+
export * from './floodlight';
|
|
12
|
+
export * from './siren';
|
|
13
|
+
export * from './tryExperience';
|
|
14
|
+
export * from './trialBadge';
|
|
11
15
|
export * from './ptz';
|
|
12
16
|
export * from './resolution';
|
|
13
17
|
export * from './fullSmallIntercom';
|
package/lib/widgets/index.js
CHANGED
|
@@ -8,6 +8,10 @@ export * from './fullScreen';
|
|
|
8
8
|
export * from './videoBitKBP';
|
|
9
9
|
export * from './voiceIntercom';
|
|
10
10
|
export * from './muted';
|
|
11
|
+
export * from './floodlight';
|
|
12
|
+
export * from './siren';
|
|
13
|
+
export * from './tryExperience';
|
|
14
|
+
export * from './trialBadge';
|
|
11
15
|
export * from './ptz';
|
|
12
16
|
export * from './resolution';
|
|
13
17
|
export * from './fullSmallIntercom';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './siren';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './siren';
|