Update index.html

index.html

@@ -31,6 +31,8 @@
 	<script src="https://unpkg.com/@tanstack/react-query@4/build/umd/index.production.js"></script>
 	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mitt.umd.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"></script>
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css" />
 
 	<style>
 		.bi {
@@ -233,6 +235,18 @@
 		//事件监听结束
 
 
+		Fancybox.bind("[data-fancybox]", {
+			Toolbar: {
+				display: {
+					right: ["slideshow", "download", "thumbs", "close"],
+				},
+			},
+			Images: {
+				initialSize: "fit",
+			}
+		});
+
+
 		var settingStorage = localforage.createInstance({
 			name: "setting",
 			driver: localforage.LOCALSTORAGE
@@ -660,6 +674,25 @@
 		};
 		//axios封闭结束
 
+		//分页hooks
+		const usePagination = () => {
+			const [pagination, setPagination] = useState({
+				pageSize: 36,
+				pageIndex: 1,
+			});
+			const { pageSize, pageIndex } = pagination;
+
+
+			return {
+				limit: pageSize,
+				onPaginationChange: setPagination,
+				pagination,
+				skip: pageSize * pageIndex,
+			};
+		}
+		//分页结束
+
+
 		//API定义开始
 		const getFiles = () => {
 			const [response, error, loading, fetchData] = useAxios();
@@ -681,6 +714,13 @@
 			};
 			return [response, error, loading, fetchDataByPage];
 		};
+
+		const paginateLinksGet = async (limit, skip) => {
+			const setting = STORE.getState().settings;
+			const url = setting.directus_host + `items/Video?limit=${limit}&offset=${skip}&meta[]=filter_count`;
+			const { data } = await axios.get(url, { headers: { Authorization: "Bearer " + setting.directus_token } })
+			return data
+		}
 		//API定义结束
 
 		const Layout = ({ children }) => {
@@ -794,6 +834,21 @@
 													/>
 													离线管理
 												</Nav.Link>
+												<Nav.Link
+													as={Link}
+													className="nav-link text-dark"
+													to="/videos"
+													onClick={
+														handleSidebarClose
+													}
+												>
+													<Icon
+														icon="movie"
+														size="6"
+														className="me-2"
+													/>
+													视频管理
+												</Nav.Link>
 											</Nav>
 										</Container>
 									</Offcanvas.Body>
@@ -852,6 +907,94 @@
 			);
 		};
 
+		const Videos = () => {
+			const [reload, setReload] = useState(false);
+			const { limit, onPaginationChange, skip, pagination } = usePagination();
+			const [meta, setMeta] = useState({ filter_count: 0 })
+			const [videos, setVideos] = useState([])
+			const { data: linksData, refetch: linksRefetch, isLoading: linksLoading, error: linksError } = useQuery({
+				queryKey: ['get_paginate_links', limit, skip],
+				queryFn: () => paginateLinksGet(limit, skip)
+			})
+
+			useEffect(() => {
+				//linksRefetch()
+			}, [pagination, reload]);
+
+			useEffect(() => {
+				if (linksData) {
+					setMeta(linksData.meta)
+					setVideos([...linksData.data])
+				}
+			}, [linksData]);
+
+
+			const forceUpdate = () => {
+				setReload((pre) => !pre);
+			};
+
+			return (
+				<div>
+					<div className="d-flex justify-content-between align-items-center p-2 border-bottom bg-light">
+						<label className="fs-3">视频列表</label>
+						<ButtonToolbar
+							aria-label="视频列表"
+							className="bg-teal rounded"
+						>
+							<ButtonGroup className="bg-teal">
+								<IconButton
+									onClick={() => {
+										forceUpdate();
+									}}
+									text="刷新"
+									className="bg-teal border-0"
+									icon="reload"
+									iconClassName="me-1 text-white"
+									iconSize="6"
+								/>
+							</ButtonGroup>
+						</ButtonToolbar>
+					</div>
+					{linksError && (
+						<div className="text-center text-danger">
+							发生错误，请稍后重试！！！
+						</div>
+					)}
+					{(linksLoading) && (
+						<div className="text-center text-success">
+							正在努力加载中......
+						</div>
+					)}
+
+					<Container fluid className="p-2">
+						<Row>
+							<Col xs={12} className="py-2">
+								<Paginate page={pagination.pageIndex} onClick={(i) => { onPaginationChange({ pageSize: 36, pageIndex: i }) }} itemsPerPage="36" totalCount={meta.filter_count} />
+							</Col>
+						</Row>
+						{linksData && (
+							<Row>
+								{videos.map((video, index) => (
+									<Col xs={6} md={4} className="py-2">
+										<a href={video.poster} target="_blank" data-fancybox="gallery"
+											data-download-src={video.src} data-caption={video.title}>
+											<img src={video.poster} className="img-fluid rounded" />
+										</a>
+									</Col>
+								))}
+							</Row>
+						)}
+
+						<Row>
+							<Col xs={12} className="py-2">
+								<Paginate page={pagination.pageIndex} onClick={(i) => { onPaginationChange({ pageSize: 36, pageIndex: i }) }} itemsPerPage="36" totalCount={meta.filter_count} />
+							</Col>
+						</Row>
+					</Container>
+				</div>
+			);
+		};
+
 
 
 		const LocalTasks = () => {
@@ -1190,6 +1333,7 @@
 					<Route path="/:path?">
 						<Layout>
 							<Switch>
+								<Route path="/videos" exact component={Videos} />
 								<Route path="/" exact component={App} />
 								<Route path="/:folder?" component={App} />
 							</Switch>