150 lines
4.3 KiB
TypeScript
150 lines
4.3 KiB
TypeScript
import { BaseEventOrig, Image, Input, InputProps, Text } from '@tarojs/components';
|
|
import { navigateTo } from '@/utils/route';
|
|
import Taro from '@tarojs/taro';
|
|
|
|
import { Checkbox } from '@taroify/core';
|
|
import { useCallback } from 'react';
|
|
|
|
import { MaterialVideoInfo } from '@/types/material';
|
|
import { logWithPrefix, isDesktop } from '@/utils/common';
|
|
import { PageUrl } from '@/constants/app';
|
|
|
|
import './index.less';
|
|
|
|
interface IProps {
|
|
isTemp?: boolean;
|
|
videoInfo: MaterialVideoInfo;
|
|
onClickUpload?: () => void;
|
|
onClickDelete?: () => void;
|
|
onClickSetDefault?: () => void;
|
|
onTitleChange?: (newTitle: string) => void;
|
|
}
|
|
|
|
const PREFIX = 'material-video-card';
|
|
const log = logWithPrefix(PREFIX);
|
|
|
|
function MaterialVideoCard(props: IProps) {
|
|
const { videoInfo, isTemp = false, onClickUpload, onClickDelete, onClickSetDefault, onTitleChange } = props;
|
|
const isVideo = videoInfo.type === 'video';
|
|
|
|
const handleInput = useCallback(
|
|
(e: BaseEventOrig<InputProps.inputValueEventDetail>) => {
|
|
const value = e.detail?.value || '';
|
|
log('handleInput value', value);
|
|
onTitleChange?.(value);
|
|
},
|
|
[onTitleChange]
|
|
);
|
|
|
|
// const handleInputBlurOrConfirm = useCallback(() => {
|
|
// log('newVideoTitle', title);
|
|
// if (!title) {
|
|
// return;
|
|
// }
|
|
// onTitleChange?.(videoInfo);
|
|
// // ...
|
|
// }, [title, videoInfo, onTitleChange]);
|
|
|
|
const handleCheckboxChange = useCallback(
|
|
(checked: boolean) => {
|
|
log('handleCheckboxChange', checked);
|
|
if (videoInfo.isDefault) {
|
|
return;
|
|
}
|
|
// ...
|
|
onClickSetDefault?.();
|
|
},
|
|
[videoInfo, onClickSetDefault]
|
|
);
|
|
|
|
const handleClickVideo = useCallback(() => {
|
|
log('handleClickVideo', videoInfo);
|
|
if (!videoInfo.url) {
|
|
return;
|
|
}
|
|
if (isDesktop) {
|
|
navigateTo(PageUrl.MaterialWebview, {
|
|
source: encodeURIComponent(videoInfo.url)
|
|
})
|
|
} else {
|
|
Taro.previewMedia({
|
|
sources: [{ url: videoInfo.url, type: videoInfo.type }],
|
|
});
|
|
}
|
|
|
|
}, [videoInfo]);
|
|
|
|
return (
|
|
<div className={PREFIX}>
|
|
<div className={`${PREFIX}__cover`}>
|
|
{!isTemp && (
|
|
<>
|
|
<Image
|
|
className={`${PREFIX}__cover__image`}
|
|
mode="aspectFit"
|
|
src={videoInfo.coverUrl}
|
|
onClick={handleClickVideo}
|
|
/>
|
|
{isVideo && (
|
|
<Image
|
|
className={`${PREFIX}__cover__preview-video`}
|
|
mode="aspectFit"
|
|
src={require('@/statics/svg/preview_video.svg')}
|
|
onClick={handleClickVideo}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
{isTemp && (
|
|
<div className={`${PREFIX}__cover__placeholder`} onClick={onClickUpload}>
|
|
<Image
|
|
className={`${PREFIX}__cover__placeholder__image`}
|
|
mode="aspectFit"
|
|
src={require('@/statics/svg/add.svg')}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className={`${PREFIX}__info`}>
|
|
{!isTemp && (
|
|
<>
|
|
<div className={`${PREFIX}__info__title`}>
|
|
<Input
|
|
value={videoInfo.title}
|
|
maxlength={20}
|
|
confirmType="done"
|
|
placeholder="请填写直播产品名称"
|
|
onInput={handleInput}
|
|
// onBlur={handleInputBlurOrConfirm}
|
|
// onConfirm={handleInputBlurOrConfirm}
|
|
className={`${PREFIX}__info__title__input`}
|
|
placeholderClass={`${PREFIX}__info__title__placeholder`}
|
|
/>
|
|
</div>
|
|
<div className={`${PREFIX}__info__operate`}>
|
|
<Checkbox
|
|
checked={videoInfo.isDefault}
|
|
onChange={handleCheckboxChange}
|
|
className={`${PREFIX}__info__operate__checkbox`}
|
|
>
|
|
选为封面
|
|
</Checkbox>
|
|
<div className={`${PREFIX}__info__operate__delete`} onClick={onClickDelete}>
|
|
删除
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
{isTemp && (
|
|
<Text className={`${PREFIX}__info__temp-tips`}>
|
|
{`视频不能超过1000M
|
|
视频若太大加载较慢，请耐心等待`}
|
|
</Text>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default MaterialVideoCard;
|