|
@@ -1,4 +1,4 @@
|
|
|
-import React, { useState, useEffect, useRef, useCallback } from 'react';
|
|
|
|
|
|
|
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
|
|
|
import {
|
|
import {
|
|
|
Drawer,
|
|
Drawer,
|
|
|
Button,
|
|
Button,
|
|
@@ -22,6 +22,8 @@ import http from '@src/http';
|
|
|
import { getVideoContentListApi } from '@src/http/api';
|
|
import { getVideoContentListApi } from '@src/http/api';
|
|
|
import { useVideoCategoryOptions } from '@src/views/publishContent/weGZH/hooks/useVideoCategoryOptions';
|
|
import { useVideoCategoryOptions } from '@src/views/publishContent/weGZH/hooks/useVideoCategoryOptions';
|
|
|
import { WeComPlanType, WeVideoItem, VideoSearchPlanType } from '@src/views/publishContent/weCom/type'
|
|
import { WeComPlanType, WeVideoItem, VideoSearchPlanType } from '@src/views/publishContent/weCom/type'
|
|
|
|
|
+import useLogger from '@src/hooks/useLogger';
|
|
|
|
|
+import { debounce } from '@src/utils/helper';
|
|
|
|
|
|
|
|
const { Text, Paragraph } = Typography;
|
|
const { Text, Paragraph } = Typography;
|
|
|
const IS_NON_PROD = import.meta.env.MODE !== 'production';
|
|
const IS_NON_PROD = import.meta.env.MODE !== 'production';
|
|
@@ -147,6 +149,8 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
|
|
|
const getVideoListRef = useRef<(pageNum: number, mode: LoadMode) => Promise<void>>();
|
|
const getVideoListRef = useRef<(pageNum: number, mode: LoadMode) => Promise<void>>();
|
|
|
const reqIdRef = useRef(0);
|
|
const reqIdRef = useRef(0);
|
|
|
const MAX_SELECTION = 3;
|
|
const MAX_SELECTION = 3;
|
|
|
|
|
+ const { uploadLogVideoPlay, uploadLogVideoPlayEnd, uploadLogVideoCollect, uploadLogVideoListQuery } = useLogger();
|
|
|
|
|
+ const debouncedUploadLogVideoListQuery = useMemo(() => debounce(uploadLogVideoListQuery, 500), [uploadLogVideoListQuery]);
|
|
|
|
|
|
|
|
useEffect(() => { hasMoreRef.current = hasMore; }, [hasMore]);
|
|
useEffect(() => { hasMoreRef.current = hasMore; }, [hasMore]);
|
|
|
useEffect(() => { loadingRef.current = loading; }, [loading]);
|
|
useEffect(() => { loadingRef.current = loading; }, [loading]);
|
|
@@ -165,7 +169,25 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
|
|
|
|
|
|
|
|
const myReqId = reqIdRef.current;
|
|
const myReqId = reqIdRef.current;
|
|
|
const type = planType === WeComPlanType.社群 ? VideoSearchPlanType.企微社群 : VideoSearchPlanType.企微自动回复;
|
|
const type = planType === WeComPlanType.社群 ? VideoSearchPlanType.企微社群 : VideoSearchPlanType.企微自动回复;
|
|
|
- const requestParams = { category, title: searchTerm, sort, type, pageNum, pageSize: PAGE_SIZE, ...(source ? { source } : {}) };
|
|
|
|
|
|
|
+ // 上报视频列表查询日志(使用防抖)
|
|
|
|
|
+ debouncedUploadLogVideoListQuery({
|
|
|
|
|
+ traceId: Date.now(),
|
|
|
|
|
+ planType: type,
|
|
|
|
|
+ subChannel: 'weCom',
|
|
|
|
|
+ category: category ?? '',
|
|
|
|
|
+ title: searchTerm,
|
|
|
|
|
+ sortType: sort,
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const requestParams = {
|
|
|
|
|
+ category,
|
|
|
|
|
+ title: searchTerm,
|
|
|
|
|
+ sort,
|
|
|
|
|
+ type,
|
|
|
|
|
+ pageNum,
|
|
|
|
|
+ pageSize: PAGE_SIZE,
|
|
|
|
|
+ ...(source ? { source } : {}),
|
|
|
|
|
+ };
|
|
|
|
|
|
|
|
const res = await http.post<VideoListResponse>(getVideoContentListApi, requestParams).catch(() => {
|
|
const res = await http.post<VideoListResponse>(getVideoContentListApi, requestParams).catch(() => {
|
|
|
message.error('获取视频列表失败');
|
|
message.error('获取视频列表失败');
|
|
@@ -308,12 +330,28 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
|
|
|
const newSet = new Set(prev);
|
|
const newSet = new Set(prev);
|
|
|
if (newSet.has(videoId)) {
|
|
if (newSet.has(videoId)) {
|
|
|
newSet.delete(videoId);
|
|
newSet.delete(videoId);
|
|
|
|
|
+ // 上报取消收藏日志
|
|
|
|
|
+ uploadLogVideoCollect({
|
|
|
|
|
+ videoId,
|
|
|
|
|
+ traceId: Date.now(),
|
|
|
|
|
+ collect: 0,
|
|
|
|
|
+ planType: planType === WeComPlanType.社群 ? VideoSearchPlanType.企微社群 : VideoSearchPlanType.企微自动回复,
|
|
|
|
|
+ subChannel: 'weCom',
|
|
|
|
|
+ });
|
|
|
} else {
|
|
} else {
|
|
|
if (newSet.size >= MAX_SELECTION) {
|
|
if (newSet.size >= MAX_SELECTION) {
|
|
|
message.warning(`最多只能选择 ${MAX_SELECTION} 条视频`);
|
|
message.warning(`最多只能选择 ${MAX_SELECTION} 条视频`);
|
|
|
return prev;
|
|
return prev;
|
|
|
}
|
|
}
|
|
|
newSet.add(videoId);
|
|
newSet.add(videoId);
|
|
|
|
|
+ // 上报收藏日志
|
|
|
|
|
+ uploadLogVideoCollect({
|
|
|
|
|
+ videoId,
|
|
|
|
|
+ traceId: Date.now(),
|
|
|
|
|
+ collect: 1,
|
|
|
|
|
+ planType: planType === WeComPlanType.社群 ? VideoSearchPlanType.企微社群 : VideoSearchPlanType.企微自动回复,
|
|
|
|
|
+ subChannel: 'weCom',
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
return newSet;
|
|
return newSet;
|
|
|
});
|
|
});
|
|
@@ -330,9 +368,26 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
|
|
|
|
|
|
|
|
const playVideo = (video: WeVideoItem) => {
|
|
const playVideo = (video: WeVideoItem) => {
|
|
|
setPlayingVideo(video);
|
|
setPlayingVideo(video);
|
|
|
|
|
+ // 上报视频播放日志
|
|
|
|
|
+ uploadLogVideoPlay({
|
|
|
|
|
+ videoId: video.videoId,
|
|
|
|
|
+ traceId: Date.now(),
|
|
|
|
|
+ planType: planType === WeComPlanType.社群 ? VideoSearchPlanType.企微社群 : VideoSearchPlanType.企微自动回复,
|
|
|
|
|
+ subChannel: 'weCom',
|
|
|
|
|
+ });
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const closeVideoPlayer = () => {
|
|
const closeVideoPlayer = () => {
|
|
|
|
|
+ if (playingVideo) {
|
|
|
|
|
+ // 上报视频播放结束日志
|
|
|
|
|
+ uploadLogVideoPlayEnd({
|
|
|
|
|
+ videoId: playingVideo.videoId,
|
|
|
|
|
+ playTime: 0, // 实际播放时间可以从视频元素中获取,这里暂时设为0
|
|
|
|
|
+ traceId: Date.now(),
|
|
|
|
|
+ planType: planType === WeComPlanType.社群 ? VideoSearchPlanType.企微社群 : VideoSearchPlanType.企微自动回复,
|
|
|
|
|
+ subChannel: 'weCom',
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
setPlayingVideo(null);
|
|
setPlayingVideo(null);
|
|
|
};
|
|
};
|
|
|
|
|
|