| 1 | import { |
| 2 | ForwardedRef, |
| 3 | forwardRef, |
| 4 | memo, |
| 5 | useImperativeHandle, |
| 6 | useState, |
| 7 | } from 'react'; |
| 8 | import { Avatar, Button, Drawer, Spin, Tooltip } from 'antd'; |
| 9 | import styles from '../pubRecord.module.scss'; |
| 10 | import { AccountPlatInfoMap } from '../../../../account/comment'; |
| 11 | import { formatTime } from '../../../../../utils'; |
| 12 | import { getVideoFile } from '../../../../../components/Choose/VideoChoose'; |
| 13 | import { PlatType } from '../../../../../../commont/AccountEnum'; |
| 14 | import { IExamineVideo, ImageView } from '../page'; |
| 15 | import { PubRecordModel } from '../../../comment'; |
| 16 | import { useAccountStore } from '../../../../../store/account'; |
| 17 | import { useShallow } from 'zustand/react/shallow'; |
| 18 | import { useVideoPageStore } from '../../videoPage/useVideoPageStore'; |
| 19 | import { useNavigate } from 'react-router-dom'; |
| 20 | import { WorkData } from '../../../../../../electron/db/models/workData'; |
| 21 | import { VideoModel } from '../../../../../../electron/db/models/video'; |
| 22 | import { PubType } from '../../../../../../commont/publish/PublishEnum'; |
| 23 | import { |
| 24 | icpGetImgTextList, |
| 25 | icpGetPubVideoRecord, |
| 26 | PubStatusCnMap, |
| 27 | } from '../../../../../icp/publish'; |
| 28 | |
| 29 | export interface IPubRecordDetailsRef { |
| 30 | // 打开详情 |
| 31 | oepnPubRecordDetails: (pubRecordModel: PubRecordModel) => void; |
| 32 | } |
| 33 | |
| 34 | export interface IPubRecordDetailsProps { |
| 35 | onExamineVideoClick: (examineVideo: IExamineVideo) => void; |
| 36 | } |
| 37 | |
| 38 | const PubRecordDetails = memo( |
| 39 | forwardRef( |
| 40 | ( |
| 41 | { onExamineVideoClick }: IPubRecordDetailsProps, |
| 42 | ref: ForwardedRef<IPubRecordDetailsRef>, |
| 43 | ) => { |
| 44 | const [recordLoaidng, setRecordLoaidng] = useState(false); |
| 45 | const [currPubRecordModel, setCurrPubRecordModel] = |
| 46 | useState<PubRecordModel>(); |
| 47 | const [open, setOpen] = useState(false); |
| 48 | // 视频发布记录列表 |
| 49 | const [pubRecordList, setPubRecordList] = useState<WorkData[]>([]); |
| 50 | const { accountMap } = useAccountStore( |
| 51 | useShallow((state) => ({ |
| 52 | accountMap: state.accountMap, |
| 53 | })), |
| 54 | ); |
| 55 | const { restartPub } = useVideoPageStore( |
| 56 | useShallow((state) => ({ |
| 57 | restartPub: state.restartPub, |
| 58 | })), |
| 59 | ); |
| 60 | const navigate = useNavigate(); |
| 61 | |
| 62 | const imperativeHandle: IPubRecordDetailsRef = { |
| 63 | async oepnPubRecordDetails(pubRecordModel) { |
| 64 | setCurrPubRecordModel(pubRecordModel); |
| 65 | setRecordLoaidng(true); |
| 66 | if (pubRecordModel.type === PubType.VIDEO) { |
| 67 | const res = await icpGetPubVideoRecord(pubRecordModel.id); |
| 68 | setPubRecordList(res); |
| 69 | } else if (pubRecordModel.type === PubType.ImageText) { |
| 70 | const res = await icpGetImgTextList(pubRecordModel.id); |
| 71 | setPubRecordList(res); |
| 72 | } |
| 73 | setRecordLoaidng(false); |
| 74 | setOpen(true); |
| 75 | }, |
| 76 | }; |
| 77 | useImperativeHandle(ref, () => imperativeHandle); |
| 78 | |
| 79 | return ( |
| 80 | <> |
| 81 | <Drawer |
| 82 | title="发布记录" |
| 83 | onClose={() => { |
| 84 | setOpen(false); |
| 85 | onExamineVideoClick({ |
| 86 | open: false, |
| 87 | jsCode: '', |
| 88 | url: '', |
| 89 | account: undefined, |
| 90 | }); |
| 91 | }} |
| 92 | closeIcon={false} |
| 93 | open={open} |
| 94 | width={600} |
| 95 | > |
| 96 | <Spin spinning={recordLoaidng}> |
| 97 | <div className={styles.pubRecord} style={{ padding: '0' }}> |
| 98 | <ImageView |
| 99 | prm={currPubRecordModel!} |
| 100 | width="auto" |
| 101 | height={150} |
| 102 | /> |
| 103 | |
| 104 | <ul className="pubRecord-record"> |
| 105 | {pubRecordList?.map((v) => { |
| 106 | const account = accountMap.get(v.accountId); |
| 107 | const plat = AccountPlatInfoMap.get(v.type); |
| 108 | const statusText = PubStatusCnMap[v.status]; |
| 109 | let className = ''; |
| 110 | let tooltipText = ''; |
| 111 | if (v.status === 1) { |
| 112 | className = 'pubRecord-record-item--success'; |
| 113 | } else if (v.status === 0) { |
| 114 | className = 'pubRecord-record-item--processing'; |
| 115 | } else if (v.status === 2) { |
| 116 | className = 'pubRecord-record-item--fail'; |
| 117 | } else if (v.status === 4) { |
| 118 | tooltipText = |
| 119 | '快手需要几十秒时间审核您的作品，等待几十秒后刷新数据即可'; |
| 120 | className = 'pubRecord-record-item--processing'; |
| 121 | } |
| 122 | |
| 123 | return ( |
| 124 | <li className="pubRecord-record-item" key={v.id}> |
| 125 | <Tooltip title={tooltipText || undefined}> |
| 126 | <div |
| 127 | className={[ |
| 128 | 'pubRecord-record-item-status', |
| 129 | className, |
| 130 | ].join(' ')} |
| 131 | > |
| 132 | {statusText} |
| 133 | </div> |
| 134 | </Tooltip> |
| 135 | <div className="pubRecord-record-item-con"> |
| 136 | <div className="pubRecord-record-item-con-avatar"> |
| 137 | <Avatar size="large" src={account?.avatar} /> |
| 138 | <img src={plat?.icon} /> |
| 139 | </div> |
| 140 | <div className="pubRecord-record-item-userinfo"> |
| 141 | <b>{account?.nickname}</b> |
| 142 | {v.failMsg ? ( |
| 143 | <Tooltip title={v.failMsg}> |
| 144 | <div className="pubRecord-record-item-failMsg"> |
| 145 | {v.failMsg} |
| 146 | </div> |
| 147 | </Tooltip> |
| 148 | ) : ( |
| 149 | <p className="pubRecord-record-item-userinfo-time"> |
| 150 | {formatTime(v.publishTime!)} |
| 151 | </p> |
| 152 | )} |
| 153 | </div> |
| 154 | </div> |
| 155 | <div className="pubRecord-record-item-btns"> |
| 156 | {v.status === 2 && ( |
| 157 | <Button |
| 158 | type="link" |
| 159 | onClick={async () => { |
| 160 | if ( |
| 161 | currPubRecordModel?.type === PubType.VIDEO |
| 162 | ) { |
| 163 | setRecordLoaidng(true); |
| 164 | const prl = pubRecordList.filter( |
| 165 | (v) => v.status === 2, |
| 166 | ); |
| 167 | await restartPub( |
| 168 | prl as VideoModel[], |
| 169 | prl.map( |
| 170 | (k) => accountMap.get(k.accountId)!, |
| 171 | ), |
| 172 | currPubRecordModel, |
| 173 | ); |
| 174 | setRecordLoaidng(false); |
| 175 | navigate('/publish/video'); |
| 176 | } else if ( |
| 177 | currPubRecordModel?.type === PubType.ImageText |
| 178 | ) { |
| 179 | } |
| 180 | }} |
| 181 | > |
| 182 | 重新发布 |
| 183 | </Button> |
| 184 | )} |
| 185 | |
| 186 | {v.status === 1 && ( |
| 187 | <Button |
| 188 | type="link" |
| 189 | onClick={async () => { |
| 190 | if (!v.dataId) return; |
| 191 | const newState: IExamineVideo = { |
| 192 | jsCode: '', |
| 193 | open: true, |
| 194 | url: '', |
| 195 | account, |
| 196 | }; |
| 197 | if (account?.type === PlatType.WxSph) { |
| 198 | const videoFile = await getVideoFile( |
| 199 | (v as VideoModel).videoPath!, |
| 200 | ); |
| 201 | newState['videoSrc'] = videoFile.videoUrl; |
| 202 | } else { |
| 203 | newState['url'] = v.previewVideoLink || ''; |
| 204 | } |
| 205 | onExamineVideoClick(newState); |
| 206 | }} |
| 207 | > |
| 208 | 查看 |
| 209 | </Button> |
| 210 | )} |
| 211 | </div> |
| 212 | </li> |
| 213 | ); |
| 214 | })} |
| 215 | </ul> |
| 216 | </div> |
| 217 | </Spin> |
| 218 | </Drawer> |
| 219 | </> |
| 220 | ); |
| 221 | }, |
| 222 | ), |
| 223 | ); |
| 224 | PubRecordDetails.displayName = 'PubRecordDetails'; |
| 225 | |
| 226 | export default PubRecordDetails; |
| 227 |