ad-manage/src/pages/launchSystemV3/components/VideoFrameSelect/index.tsx

import { videoUrlMessage } from "@/utils/compress"
import { ScissorOutlined } from "@ant-design/icons"
import { Button, Popover, Image } from "antd"
import React, { useState } from "react"
import style from './index.less'
import Lazyimg from "react-lazyimg-component"

interface Props {
    url: string,
    onChange?: (url: string) => void
}
/**
 * 获取oo视频帧序列
 * @returns 
 */
const VideoFrameSelect: React.FC<Props> = ({ url, onChange }) => {

    /************************************/
    const [urlList, setUrlList] = useState<string[]>([])
    const [urlNum, seturlNum] = useState<number>(30)
    const [open, setOpen] = useState(false);
    const [selectUrl, setSelectUrl] = useState<string>()
    const [visible, setVisible] = useState<boolean>(false)
    const [lookUrl, setLookUrl] = useState<string>()
    /************************************/

    const handleOk = () => {
        if (selectUrl) {
            console.log(selectUrl)
            onChange?.(selectUrl)
            setTimeout(() => setOpen(false), 100)
        }
    };

    const onVisibleChange = async (newOpen: boolean) => {
        if (newOpen && url && url.includes('.mp4')) {
            let data = await videoUrlMessage(url)
            let duration = data.videoLength
            let gap = duration / urlNum
            setUrlList(Array(urlNum).fill('').map((item, index) => url + `?x-oss-process=video/snapshot,t_${(index * gap * 1000).toFixed(0)}`))
        }
        setOpen(newOpen);
    };

    const selectHandle = (url: string) => {
        setSelectUrl(url)
    }

    return <Popover
        content={<div className={style.popover}>
            {open && <>
                <div className={style.content}>
                    {urlList.map((url, index) => <div className={`${style.imgBox} ${selectUrl === url ? style.select : ''}`} key={index}>
                        <Lazyimg onClick={() => { selectHandle(url) }} className={`lazy`} src={url} />
                        <span className={style.look} onClick={() => { setLookUrl(url); setVisible(true) }}>查看</span>
                    </div>)}
                </div>
                <Image width={200} style={{ display: 'none' }} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
                    preview={{
                        visible,
                        src: lookUrl,
                        onVisibleChange: (value) => {
                            setVisible(value);
                        },
                    }}
                />
                <Button type="primary" style={{ backgroundColor: '#00b96b', borderColor: '#00b96b' }} onClick={handleOk} disabled={!selectUrl} size="small">确定</Button>
            </>}
        </div>}
        destroyTooltipOnHide={true}
        trigger="click"
        open={open}
        onOpenChange={onVisibleChange}
    >
        <Button type="link" icon={<ScissorOutlined />}>视频截帧更换封面</Button>
    </Popover>
}

export default React.memo(VideoFrameSelect)