diff --git a/src/pages/live/index.tsx b/src/pages/live/index.tsx
index f47746b..2577612 100644
--- a/src/pages/live/index.tsx
+++ b/src/pages/live/index.tsx
@@ -1,20 +1,15 @@
import React, {useCallback, useEffect, useMemo, useRef, useState} from "react";
-import {Checkbox, Empty, Modal, Space} from "antd";
-import {SortableContext, arrayMove} from '@dnd-kit/sortable';
-import {DndContext} from "@dnd-kit/core";
+import {Empty, Space} from "antd";
import {VideoListItem} from "@/components/video/video-list-item.tsx";
-import {deleteByIds, getList, modifyOrder, playState} from "@/service/api/live.ts";
+import {getList, playState} from "@/service/api/live.ts";
import {showErrorToast, showToast} from "@/components/message.ts";
-import ButtonBatch from "@/components/button-batch.tsx";
import FlvJs from "flv.js";
import {formatDuration} from "@/util/strings.ts";
import {useSetState} from "ahooks";
import {Player, PlayerInstance} from "@/components/video/player.tsx";
-import {IconDelete, IconLocked, IconUnlock} from "@/components/icons";
import InfiniteScroller, {InfiniteScrollerRef} from "@/components/scoller/infinite-scroller.tsx";
-import ButtonToTop from "@/components/scoller/button-to-top.tsx";
import {useTranslation} from "react-i18next";
const cache: { flvPlayer?: FlvJs.Player, timerPlayNext?: any, timerLoadState?: any, prevUrl?: string } = {}
@@ -23,9 +18,7 @@ export default function LiveIndex() {
const player = useRef
(null)
const [videoData, setVideoData] = useState([])
- const [modal, contextHolder] = Modal.useModal()
const [checkedIdArray, setCheckedIdArray] = useState([])
- const [editable, setEditable] = useState(false)
const scrollerRef = useRef(null)
const [state, setState] = useSetState({
@@ -40,6 +33,7 @@ export default function LiveIndex() {
const activeIndex = useRef(-1)
useEffect(() => {
activeIndex.current = videoData.findIndex(s=>s.id == state.playId)
+ document.querySelector(`.video-item-${state.playId}`)?.scrollIntoView({behavior: 'smooth'})
}, [state.playId,videoData])
// 显示当前播放视频对应 view item
@@ -150,52 +144,6 @@ export default function LiveIndex() {
}
}, [])
- // 删除视频
- const processDeleteVideo = async (ids: Id[]) => {
- deleteByIds(ids).then(() => {
- showToast(t('delete_success'), 'success')
- loadList()
- }).catch(showErrorToast)
- }
- //
- const handleConfirm = () => {
- if (!editable) {
- setEditable(true)
- return;
- }
- const newSort = videoData.map(s => s.id).join(',')
- if (newSort == state.originSort) {
- setEditable(false)
- return;
- }
- modal.confirm({
- title: t('confirm.title'),
- content: t('video.sort_modify_confirm'),
- centered: true,
- onOk: () => {
- //showToast('编辑成功!!!', 'info');
- modifyOrder(videoData.map(s => s.id)).then(() => {
- showToast(t('video.sort_modify_live_success'), 'success')
- setEditable(false)
- }).catch(() => {
- showToast(t('video.sort_modify_failed'), 'warning')
- })
- },
- onCancel: () => {
- showToast(t('video.sort_modify_rollback'), 'info');
- loadList()
- setEditable(false)
- }
- })
- }
- const handleAllCheckedChange = () => {
- if(editable) return;
- setCheckedIdArray(state.checkedAll ? [] : videoData.map(v => v.id))
- setState({
- checkedAll: !state.checkedAll
- })
- }
-
// 视频相关时长
const totalDuration = useMemo(() => {
if (!videoData || videoData.length == 0) return 0;
@@ -222,21 +170,18 @@ export default function LiveIndex() {
// return checkedIdArray.filter(id => currentId.id != id)
// }, [checkedIdArray, state.activeIndex])
- const currentSelectedVideoIds = useMemo(()=>{
- return checkedIdArray.length == 0 ? [] : checkedIdArray.filter(id => id != state.playId)
- },[checkedIdArray, state.playId])
return (
-
+
{formatDuration(totalDuration)}
-
{
setState({playProgress: progress})
@@ -259,21 +204,7 @@ export default function LiveIndex() {
-
- {editable ? t('live.edit_unlock') : t('live.edit_locked')}
-
- {editable ? : }
-
-
-
-
- handleAllCheckedChange()}/>
-
+
@@ -282,7 +213,6 @@ export default function LiveIndex() {
{t('video.title_thumb')}
{t('video.title')}
{t('video.title_generated_time')}
-
{t('video.title_operation')}
@@ -296,66 +226,33 @@ export default function LiveIndex() {
>
{videoData.length == 0 &&
}
- {
- const {active, over} = e;
- if (over && active.id !== over.id) {
- let oldIndex = -1, newIndex = -1;
- setVideoData((items) => {
- oldIndex = items.findIndex(s => s.id == active.id);
- newIndex = items.findIndex(s => s.id == over.id);
- return arrayMove(items, oldIndex, newIndex);
- });
- }
- }}>
-
- {videoData.map((v, index) => (
- {
- const newIdArray = checked ? checkedIdArray.concat(v.id) : checkedIdArray.filter(id => id != v.id);
- setState({checkedAll: newIdArray.length == videoData.length})
- setCheckedIdArray(newIdArray)
- // setCheckedIdArray(idArray => {
- // return checked ? idArray.concat(v.id) : idArray.filter(id => id != v.id);
- // })
- }}
- onRemove={() => processDeleteVideo([v.id])}
- editable={!editable && state.playId != v.id}
- sortable={editable && state.playId != v.id}
- />))}
-
-
+ {videoData.map((v, index) => (
+ }
+ onCheckedChange={(checked) => {
+ const newIdArray = checked ? checkedIdArray.concat(v.id) : checkedIdArray.filter(id => id != v.id);
+ setState({checkedAll: newIdArray.length == videoData.length})
+ setCheckedIdArray(newIdArray)
+ // setCheckedIdArray(idArray => {
+ // return checked ? idArray.concat(v.id) : idArray.filter(id => id != v.id);
+ // })
+ }}
+ editable={false}
+ sortable={false}
+ />))}
-
-
- scrollerRef.current?.scrollToPosition(0)}/>
- {currentSelectedVideoIds.length > 0 && 1?
- t('video.delete_description_count',{count:currentSelectedVideoIds.length})
- :
- t('video.delete_description',{count:currentSelectedVideoIds.length})}
- onSuccess={loadList}
- onProcess={processDeleteVideo}
- >
- {t('delete_batch')}
-
- }
-
- {contextHolder}
)
}
\ No newline at end of file
diff --git a/src/pages/video/index.tsx b/src/pages/video/index.tsx
index 1b91f46..266aeec 100644
--- a/src/pages/video/index.tsx
+++ b/src/pages/video/index.tsx
@@ -1,29 +1,31 @@
-import {Checkbox, Empty, Space} from "antd";
-import React, {useEffect, useMemo, useRef, useState} from "react";
-import {DndContext} from "@dnd-kit/core";
-import {arrayMove, SortableContext} from "@dnd-kit/sortable";
-import {useSetState} from "ahooks";
+import {Empty} from "antd";
+import React, {useCallback, useEffect, useMemo, useRef, useState} from "react";
+import {useGetState, useSetState} from "ahooks";
import {VideoListItem} from "@/components/video/video-list-item.tsx";
-import ArticleEditModal from "@/components/article/edit-modal.tsx";
-import {deleteFromList, getList, modifyOrder, regenerateById, VideoStatus} from "@/service/api/video.ts";
+import {getList, VideoStatus} from "@/service/api/video.ts";
import {formatDuration} from "@/util/strings.ts";
-import ButtonBatch from "@/components/button-batch.tsx";
-import {showErrorToast, showToast} from "@/components/message.ts";
+import {showErrorToast} from "@/components/message.ts";
import {Player, PlayerInstance} from "@/components/video/player.tsx";
-import ButtonPush2Room from "@/pages/video/components/button-push2room.tsx";
import ButtonToTop from "@/components/scoller/button-to-top.tsx";
import InfiniteScroller, {InfiniteScrollerRef} from "@/components/scoller/infinite-scroller.tsx";
-import {IconDelete} from "@/components/icons";
-import {useLocation, useNavigate} from "react-router-dom";
import {useTranslation} from "react-i18next";
+import {useLastState} from "@/hooks/useLastState.ts";
+
+function isFullyInViewport(ele: HTMLElement, container: HTMLElement) {
+ return ele.offsetTop >= container.scrollTop && ele.offsetTop + ele.offsetHeight <= container.scrollTop + container.offsetHeight
+}
+
+function getNormalVideoList(list: VideoInfo[]) {
+ return list?.filter(s => {
+ return s.status != VideoStatus.Generating && s.oss_video_url
+ }) || []
+}
export default function VideoIndex() {
const {t} = useTranslation()
- const [editId, setEditId] = useState(-1)
- const loc = useLocation()
- const navigate = useNavigate()
- const [videoData, setVideoData] = useState([])
+
+ const [videoData, setVideoData, getLastVideoList] = useGetState([])
const player = useRef(null)
const scrollerRef = useRef(null)
const [state, setState] = useSetState({
@@ -35,16 +37,18 @@ export default function VideoIndex() {
current: -1,
total: -1
},
- loading:false,
+ loading: false,
playVideoUrl: ''
})
+ const {lastState} = useLastState(state);
+
const [checkedIdArray, setCheckedIdArray] = useState([])
- const [refreshTimer,setTimer] = useState(0)
+ const [refreshTimer, setTimer] = useState(0)
// 加载列表
- const loadList = (needReset = true) => {
- if(state.loading) return;
- if(refreshTimer) {
+ const loadList = (needReset = true, onLoad = false) => {
+ if (state.loading) return;
+ if (refreshTimer) {
clearTimeout(refreshTimer)
setTimer(0)
}
@@ -59,67 +63,53 @@ export default function VideoIndex() {
// 判断是否有生成中的视频
if (list.filter(s => s.status == VideoStatus.Generating).length > 0) {
// 每5s重新获取一次最新数据
- setTimer(()=>setTimeout(() => loadList(false), 5000) as any);
+ setTimer(() => setTimeout(() => loadList(false), 5000) as any);
+ }
+ if(onLoad){
+ const _list = getNormalVideoList(list)
+ if(_list.length > 0){
+ playVideo(_list[0])
+ }
}
}).catch(showErrorToast)
- .finally(()=>{
- setState({loading: false})
- })
- return ()=>{
- if(refreshTimer){
+ .finally(() => {
+ setState({loading: false})
+ })
+ return () => {
+ if (refreshTimer) {
clearTimeout(refreshTimer)
}
- console.log('go out',refreshTimer)
+ console.log('go out', refreshTimer)
}
}
// 播放视频
const playVideo = (video: VideoInfo) => {
- console.log('play video',video)
if (state.playingId == video.id) {
player.current?.pause();
setState({playingId: -1})
return;
}
if (video.status == VideoStatus.Generating) return;
- // setState({playingIndex})
- // player.current?.play('https://staticplus.gachafun.com/ai-collect/composite_video/2024-12-17/1186196465916190720.flv', 30)
- //
+
if (video.oss_video_url && video.status !== 1) {
setState({playingId: video.id})
player.current?.play(video.oss_video_url, 0)
- }
- }
- // 处理全选
- const handleAllCheckedChange = () => {
- setCheckedIdArray(state.checkedAll ? [] : videoData.filter(s=>s.status == VideoStatus.Generated).map(v => v.id))
- setState({
- checkedAll: !state.checkedAll
- })
- }
- const handleModifySort = (items: VideoInfo[]) => {
-
- modifyOrder(items.map(s => s.id)).then(() => {
- showToast(t('video.sort_modify_success'), 'success')
- }).catch(() => {
- loadList();
- showToast(t('video.sort_modify_failed'), 'warning')
- })
-
- return ()=>{
- try{
- Array.from(document.querySelectorAll('video')).forEach(v => v.pause())
- }catch (e){
- console.log(e)
+ const videoElement = document.querySelector(`.video-item-${video.id}`) as HTMLElement
+ const scroller = document.querySelector('.data-list-container') as HTMLElement;
+ if(videoElement && isFullyInViewport(videoElement, scroller)) {
+ videoElement.scrollIntoView({behavior: 'smooth'})
}
}
}
- //
- useEffect(loadList, [])
+
+ useEffect(() => {
+ loadList(true, true)
+ }, [])
// const totalDuration = useMemo(() => {
// if (!videoData || videoData.length == 0) return 0;
- // const v = state.playingId == -1 ? null : videoData.find(s=>s.id == state.playingId)
+ // const v = state.playingId == -1 ? null : videoData.find(s => s.id == state.playingId)
// if (!v) return 0
// //const v = videoData[state.playingIndex] as VideoInfo;
// return Math.ceil(v.duration / 1000)
@@ -127,48 +117,37 @@ export default function VideoIndex() {
// //return videoData.reduce((sum, v) => sum + Math.ceil(v.duration / 1000), 0);
// }, [videoData, state.playingId])
- useEffect(() => {
- if (loc.state == 'push-success' && !state.showStatePos && videoData.length && scrollerRef.current) {
- const generatingItem = document.querySelector(`.list-item-state-${VideoStatus.Generating}`)
- if (generatingItem) {
- generatingItem.scrollIntoView({behavior: 'smooth'})
- setState({showStatePos: true})
- }
+
+ const handlePlayEnd = () => {
+ const list = getLastVideoList();
+ if (!list?.length) return;
+ const _list = getNormalVideoList(list)
+ if (_list.length > 0) {
+ const _currentIndex = _list.findIndex(s => s.id == lastState.current.playingId)
+ const _next = _currentIndex != -1 && _currentIndex < _list.length - 1 ? _list[_currentIndex + 1] : _list[0];
+ playVideo(_next)
}
- }, [videoData, scrollerRef])
- const processDeleteVideo = async (ids: Id[],action ?: string) => {
- deleteFromList(ids).then(() => {
- showToast(t('delete_success'), 'success')
- if(action == 'rollback'){
- navigate('/edit',{
- state: {action: 'rollback',id: ids[0]},
- })
- }else{
- loadList()
- }
- }).catch(showErrorToast)
- }
- const processGenerateVideo = async (video: VideoInfo) => {
- regenerateById(video.article_id).then(() => {
- //showToast(t('delete_success'), 'success')
- loadList()
- }).catch(showErrorToast)
}
return (
-
+
{t("generating.title")}
-
- {/*videoData[state.playingIndex]?.oss_video_url*/}
+
{
- if (state.end || state.error) setState({playingId: -1})
+ showControls={true}
+ onChange={(_state) => {
+ console.log('onChange', _state)
+ if (_state.end) {
+ handlePlayEnd();
+ return;
+ }
+ if (_state.error) setState({playingId: -1})
}}
onProgress={(current, duration) => {
setState({
@@ -178,26 +157,18 @@ export default function VideoIndex() {
}
})
}}
- className="w-[360px] h-[640px] bg-white"/>
+ className="w-[420px] h-[740px] bg-white"/>
-
{formatDuration(state.playState.current)} / {formatDuration(state.playState.total)}
+
{formatDuration(state.playState.current)} / {formatDuration(state.playState.total)}
-
- {t('select.total',{count:videoData.length || 0})}
- {t('select.selected_some',{count:checkedIdArray.length})}
-
-
- handleAllCheckedChange()}/>
+
@@ -207,102 +178,47 @@ export default function VideoIndex() {
{t('video.title_thumb')}
{t('video.title')}
{t('video.title_generated_time')}
-
{t('video.title_operation')}
setState({showToTop: top > 30})}>
{
videoData.length == 0 ?
:
- {
- const {active, over} = e;
- if (over && active.id !== over.id) {
- let oldIndex = -1, newIndex = -1;
- const originArr = [...videoData]
- console.log(originArr.map(s => s.id))
- setVideoData((items) => {
- oldIndex = items.findIndex(s => s.id == active.id);
- newIndex = items.findIndex(s => s.id == over.id);
- const newSorts = arrayMove(items, oldIndex, newIndex);
- handleModifySort(newSorts)
- return newSorts;
- });
- // modal.confirm({
- // title: '提示',
- // content: '是否要移动到指定位置',
- // onOk: handleModifySort,
- // onCancel: () => {
- // setVideoData(originArr);
- // }
- // })
- }
- }}>
-
- {videoData.map((v, index) => (
- {
- setCheckedIdArray(idArray => {
- const newArr = checked ? idArray.concat(v.id) : idArray.filter(id => id != v.id);
- setState({checkedAll: newArr.length == videoData.length})
- return newArr;
- })
- }}
- onItemClick={() => playVideo(v)}
- onRemove={(action) => processDeleteVideo([v.id],action)}
- onEdit={v.status == VideoStatus.Generated ? () => {
- setEditId(v.article_id)
- }:undefined}
- onRegenerate={v.status != VideoStatus.Generating && v.status != VideoStatus.Generated?()=>{
- processGenerateVideo(v)
- }:undefined}
- hideCheckBox={v.status != VideoStatus.Generating && v.status != VideoStatus.Generated}
- editable={v.status != VideoStatus.Generating}
- sortable={v.status == VideoStatus.Generated}
- />))}
-
-
+ {videoData.map((v, index) => (
+ {
+ setCheckedIdArray(idArray => {
+ const newArr = checked ? idArray.concat(v.id) : idArray.filter(id => id != v.id);
+ setState({checkedAll: newArr.length == videoData.length})
+ return newArr;
+ })
+ }}
+ onItemClick={() => playVideo(v)}
+ operationRender={<>}
+ onEdit={undefined}
+ onRegenerate={v.status != VideoStatus.Generating && v.status != VideoStatus.Generated ? () => {
+ } : undefined}
+ hideCheckBox={v.status != VideoStatus.Generating && v.status != VideoStatus.Generated}
+ editable={v.status != VideoStatus.Generating}
+ sortable={v.status == VideoStatus.Generated}
+ />))}
}
-
scrollerRef.current?.scrollToPosition(0)}/>
- {checkedIdArray.length > 0 && }
- onSuccess={() => {
- showToast(t('delete_success'), 'success')
- loadList()
- }}
- >
- {t('delete_batch')}
-
- }
-
-
setEditId(-1)}/>
)
}
\ No newline at end of file
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 95e1fbb..8df41fe 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -5,18 +5,17 @@ import zhCN from 'antd/locale/zh_CN';
// for date-picker i18n
import dayjs from "dayjs";
import 'dayjs/locale/zh-cn';
-import ErrorBoundary from "./error.tsx";
import Loader from "@/components/loader.tsx";
import routes from "@/routes/routes.tsx";
import {DocumentTitle} from "@/components/document.tsx";
-import useConfig from "@/hooks/useConfig.ts";
import {useTranslation} from "react-i18next";
import useGlobalConfig from "@/hooks/useGlobalConfig.ts";
+import VideoIndex from "@/pages/video";
const router = createBrowserRouter([
...routes,
- {path: '*', element: }
+ {path: '*', element: }
], {
basename: import.meta.env.VITE_APP_BASE_NAME,
future: {
diff --git a/src/routes/layout/dashboard-layout.tsx b/src/routes/layout/dashboard-layout.tsx
index adbc5df..924082a 100644
--- a/src/routes/layout/dashboard-layout.tsx
+++ b/src/routes/layout/dashboard-layout.tsx
@@ -1,81 +1,19 @@
-import {Outlet, useLocation, useNavigate, useSearchParams} from "react-router-dom";
-import {Button, Divider, Dropdown, MenuProps} from "antd";
-import React, {useEffect} from "react";
+import {Outlet, useSearchParams} from "react-router-dom";
+import {Button} from "antd";
+import React from "react";
import AuthGuard from "@/routes/layout/auth-guard.tsx";
import {LogoText} from "@/components/icons/logo.tsx";
-import {UserAvatar} from "@/components/icons/user-avatar.tsx";
import {DashboardNavigation} from "@/routes/layout/dashboard-navigation.tsx";
-import useAuth from "@/hooks/useAuth.ts";
-import {hidePhone} from "@/util/strings.ts";
import {defaultCache} from "@/hooks/useCache.ts";
-import {IconVideo} from "@/components/icons";
import {useTranslation} from "react-i18next";
-import useConfig from "@/hooks/useConfig.ts";
type LayoutProps = {
children: React.ReactNode
}
-
-const NavigationUserContainer = () => {
- const {t } = useTranslation()
- const {logout, user} = useAuth()
- const navigate = useNavigate()
- const handleLogout = ()=>{
- logout().then(() => navigate('/user'))
- }
- const items: MenuProps['items'] = [
- {
- key: 'profile',
- label: navigate('/history')}>
-
- {t('history.text')}
-
,
- },
- // {
- // key: 'logout',
- // label: 退出
,
- // },
- ];
- const UserButton = () => (
-
- {user ? {hidePhone(user.nickname)} : (
- {t('login.title')}
- )}
-
)
- return (
- {user ?
(
-
-
-
-
-
{user?.nickname}
-
ID: {user?.id}
-
-
-
-
- {menu}
-
-
-
-
- :
}
-
{(params.get('lang') == 'yes' || AppConfig.APP_LANG == 'multiple') &&
- {
- i18n.language == 'zh-CN'?(
-
- ):(
-
- )
- }
-
}
-
+ {
+ i18n.language == 'zh-CN' ? (
+
+ ) : (
+
+ )
+ }
+