Update templates/index.html

templates/index.html

@@ -562,127 +562,18 @@
             return <img {...props} src="https://placehold.co/600x400?text=Loading" />;
         };
 
-        const Video = ({ video }) => {
-
-            const [showPreview, setShowPreview] = useState(null);
-            const [holdPreviews, setHoldPreviews] = useState([]);
-            const videoRef = useRef(null);
-
-
-            const clickPreview = (id) => {
-                if (!holdPreviews.includes(id)) {
-                    setHoldPreviews((prev) => [...prev, id]);
-                    playPreview(id);
-                }
-            };
-
-            const playPreview = (id) => {
-                const preview = document.getElementById(`preview-${id}`);
-
-                if (!preview.getAttribute("src")) {
-                    preview.addEventListener("loadedmetadata", (event) => {
-                        event.target.play();
-                        setShowPreview(id);
-                    });
-
-                    preview.setAttribute("src", preview.getAttribute("data-src"));
-                } else {
-                    preview.play();
-                    setShowPreview(id);
-                }
-            };
-
-
-            const { mutateAsync: favoriteMutation } = useMutation({
-                mutationKey: ["switch-favorite"],
-                mutationFn: async (favorite) => {
-                    showLoading();
-                    return await axios.post("/favorite", favorite)
-                },
-                onSuccess: async (data, variables, context) => {
-                    hideLoading();
-                    layer.msg('操作成功', { time: 2000, icon: 6 });
-                },
-                onError: () => {
-                    hideLoading();
-                    layer.msg('操作失败', { time: 2000, icon: 5 });
-                }
-            })
-
-            return (
-                <Card>
-                    <a href={video.poster} target="_blank" data-fancybox="gallery" className={holdPreviews.includes(video.id) ? 'd-none' : 'd-block'}
-                        data-download-src={video.src} data-caption={createCaption(video)}>
-                        <AsyncImage className="card-img-top" src={video.poster} />
-                    </a>
-                    <video
-                        className={holdPreviews.includes(video.id) ? 'd-block' : 'd-none'}
-                        id={`preview-${video.id}`}
-                        ref={videoRef}
-                        data-src={`https://fourhoi.com/${video.code.toLowerCase()}/preview.mp4`}
-                        controls
-                        autoPlay
-                        webkit-playsinline="true"
-                        playsinline="true"
-                        style={{ width: "100%", height: "100%", objectFit: "cover" }}
-                    />
-
-                    <Card.Body>
-                        <Card.Title>{`${video.code} ${video.title}`}</Card.Title>
-                        <Card.Text>
-                            {video.tags.map((tag, index) => (
-                                <a target="_blank" href={`#/tags/${encodeURIComponent(tag)}`} className="badge bg-secondary text-wrap m-1">{tag}</a>
-                            ))}
-                        </Card.Text>
-
-                        <Dropdown className="float-start">
-                            <Dropdown.Toggle variant="primary" id="dropdown-basic">
-                                播放
-                            </Dropdown.Toggle>
-                            <Dropdown.Menu>
-                                <Dropdown.Item href={video.src} target="_blank">网页</Dropdown.Item>
-                                <Dropdown.Item href={`vlc://${video.src}`} target="_blank">VLC</Dropdown.Item>
-                                <Dropdown.Item href={`videoplayerapp://open?url=${encodeURIComponent(video.src)}`} target="_blank">Video Player</Dropdown.Item>
-                            </Dropdown.Menu>
-                        </Dropdown>
-
-
-                        <Button variant="primary" onClick={() => clickPreview(video.id)}><Icon
-                            icon="video"
-                            size="8"
-                            className="text-text-primary"
-                        /></Button>
-
-
-                        <Button className={`btn float-end ${video.favorite ? 'btn-danger' : 'btn-secondary'}`} onClick={async () => {
-                            layer.confirm('确定要进行操作？不可撤销！', {
-                                btn: ['确定', '取消'] //按钮
-                            }, async function () {
-                                await favoriteMutation({ id: video.id, favorite: !video.favorite })
-                            }, async function () {
-
-                            });
-
-                        }}><Icon
-                                icon="star"
-                                size="8"
-                                className="text-text-primary"
-                            /></Button>
-
-
-
-                    </Card.Body>
-                </Card>
-            )
-        }
-
         //设置框
         const SettingModal = (props) => {
             const settings = [
-                { "alist": [{ "label": "Alist地址", "key": "alist_host", "show": true }, { "label": "Alist令牌", "key": "alist_token", "show": false }] },
+                { "thunderx": [{ "label": "登陆令牌", "key": "secret_token", "show": false },{ "label": "代理地址", "key": "cf_proxy", "show": true }] },
                 { "github": [{ "label": "Actions地址", "key": "github_host", "show": true }, { "label": "Github令牌", "key": "github_token", "show": false }] },
                 { "directus": [{ "label": "Directus地址", "key": "directus_host", "show": true }, { "label": "Directus令牌", "key": "directus_token", "show": false }] }
             ]
+            // const settings = [
+            //     { "thunderx": [{ "label": "代理地址", "key": "cf_proxy", "show": true }, { "label": "登陆令牌", "key": "secret_token", "show": false }] },
+            //     { "github": [{ "label": "Actions地址", "key": "github_host", "show": true }, { "label": "Github令牌", "key": "github_token", "show": false }] },
+            //     { "directus": [{ "label": "Directus地址", "key": "directus_host", "show": true }, { "label": "Directus令牌", "key": "directus_token", "show": false }] }
+            // ]
             const [setting, setSetting] = useState({});
             // useEffect(() => {
             // 	localStorage.setItem('settings', JSON.stringify(setting));
@@ -856,16 +747,12 @@
             const [response, error, loading, fetchData] = useAxios();
 
             const fetchDataByPage = async (setting, query) => {
-                var host = setting.alist_host;
-                if (!host.endsWith("/")) {
-                    host = host + '/'
-                }
                 fetchData({
-                    url: host + 'api/fs/list',
+                    url: '/files',
                     method: "POST",
                     data: query,
                     headers: {
-                        'Authorization': setting.alist_token,
+                        'Authorization': setting.secret_token,
                         'Content-Type': 'application/json'
                     },
                 });
@@ -873,9 +760,25 @@
             return [response, error, loading, fetchDataByPage];
         };
 
-        const paginateLinksGet = async (limit, page, keyword) => {
-            const url = `/video?size=${limit}&page=${page}&kw=${keyword}`;
-            const { data } = await axios.get(url)
+        const paginateLinksGet = async (page_token, keyword) => {
+            //const url = `/files?size=${limit}&page=${page}&kw=${keyword}`;
+            console.log("======fuck========");
+            const url = `/files`;
+
+            const { data } = await axios.post(url,
+                 {
+                    "size": 100,
+                    "parent_id": "",
+                    "next_page_token": page_token,
+                    "additional_filters": {},
+                    "additionalProp1": {}
+                },
+                {
+                headers: {
+                    'Authorization': setting.secret_token,
+                    'Content-Type': 'application/json'
+                },
+            })
             return data
         }
 
@@ -938,7 +841,7 @@
                                         to="/"
                                         className="text-white"
                                     >
-                                        收藏
+                                        文件列表
                                     </Navbar.Brand>
                                 </div>
                                 <div className="d-flex">
@@ -1008,26 +911,11 @@
                                                     }
                                                 >
                                                     <Icon
-                                                        icon="plus"
-                                                        size="6"
-                                                        className="me-2"
-                                                    />
-                                                    收藏
-                                                </Nav.Link>
-                                                <Nav.Link
-                                                    as={Link}
-                                                    className="nav-link text-dark"
-                                                    to="/videos"
-                                                    onClick={
-                                                        handleSidebarClose
-                                                    }
-                                                >
-                                                    <Icon
-                                                        icon="movie"
+                                                        icon="file"
                                                         size="6"
                                                         className="me-2"
                                                     />
-                                                    视频
+                                                    文件列表
                                                 </Nav.Link>
                                             </Nav>
                                         </Container>
@@ -1089,151 +977,121 @@
 
         const Videos = () => {
             const [reload, setReload] = useState(false);
-            const { limit, onPaginationChange, skip, pagination } = usePagination();
-            const [meta, setMeta] = useState({ filter_count: 0 })
+            const [pageToken,setPageToken] = useState('');
             const [keyword, setKeyword] = useState("")
             const [search, setSearch] = useState("")
             const [videos, setVideos] = useState([])
-            const { data: linksData, refetch: linksRefetch, isLoading: linksLoading, error: linksError } = useQuery({
-                queryKey: ['get_paginate_links', limit, pagination.pageIndex, search],
-                queryFn: () => paginateLinksGet(limit, pagination.pageIndex, search),
-                enabled: false,
+            const setting = STORE.getState().settings;
+            const { id } = useParams();
+            const columns = [
+				{ title: "文件名称", dataIndex: "name" },
+				{ title: "大小", dataIndex: "size", render: (row) => (bytesToSize(Number(row.size))) },
+				{ title: "日期", dataIndex: "created_time", render: (row) => (formatDate(row.created_time)) },
+				{
+					title: "操作",
+					dataIndex: "name",
+					render: (row) => (
+						row.kind=="drive#folder" ? <Nav.Link
+							as={Link}
+							className="nav-link text-dark"
+							to={`/videos/${row.id}`}
+							target="_blank"
+						>
+							<Icon
+								icon="open-in-new"
+								size="6"
+								className="me-2"
+							/>
+						</Nav.Link> :
+							<Icon
+								icon="download-outline"
+								size="6"
+								className="me-2"
+								onClick={async () => {
+									let data = { "id": row.id }
+									await downloadMutation(data);
+								}}
+							/>
+					),
+				},
+			];
+            const authorization = 'Bearer '+setting.secret_token;
+            const { data: fileData, mutateAsync: downloadMutation } = useMutation({
+				mutationKey: ["get-download"],
+				mutationFn: async (fileinfo) => {
+					showLoading();
+					var url = '/files/'+fileinfo.id;
+					return await axios.get(url, {
+						headers: {
+							'Authorization': authorization,
+							'Content-Type': 'application/json'
+						},
+					})
+				},
+				onSuccess: async (data, variables, context) => {
+					hideLoading();
+				},
+				onError: () => {
+					hideLoading();
+				}
+			})
+            const { data: linksData, mutateAsync: filesMutation,error:linksError,isPending:linksLoading } = useMutation({
+                mutationKey: ["get-files",pageToken],
+                mutationFn: async (query) => {
+                    showLoading();
+                    var url = '/files';
+                    return await axios.post(url, query, {
+                        headers: {
+                            'Authorization': authorization,
+                            'Content-Type': 'application/json'
+                        },
+                    })
+                },
+                onSuccess: async (data, variables, context) => {
+                    hideLoading();
+                },
+                onError: () => {
+                    hideLoading();
+                }
             })
+
             useEffect(() => {
-                linksRefetch()
-            }, [pagination, reload, search]);
+            }, [pageToken, reload, search]);
             useEffect(() => {
-                linksRefetch()
+                if (!setting.secret_token || setting.secret_token.length < 5) {
+					layer.alert("请先正确配置登陆令牌，最少5位", { icon: 5 });
+					return
+				}
+
+                let data = {
+                    "size": 100,
+                    "parent_id": id,
+                    "next_page_token": pageToken,
+                    "additional_filters": {},
+                    "additionalProp1": {}
+                }
+                
+                filesMutation(data);
             }, []);
             useEffect(() => {
                 if (linksData) {
-                    setMeta({ filter_count: linksData.total })
-                    setVideos([...linksData.items])
+                    setPageToken(linksData.data.next_page_token)
+                    setVideos([...linksData.data.files])
                 }
             }, [linksData]);
 
-            const handleSearchClick = () => {
-                setSearch(keyword)
-                onPaginationChange({ pageSize: 36, pageIndex: 1 })
-            };
-
-
-
-            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>
-                    )}
-
-                    <Container fluid className="p-2">
-                        <InputGroup className="mb-3">
-                            <Form.Control
-                                placeholder="关键词"
-                                aria-label="关键词"
-                                aria-describedby="关键词"
-                                onChange={e => setKeyword(e.target.value)}
-                            />
-                            <Button variant="outline-secondary" id="button-addon2" onClick={() => { handleSearchClick() }}>
-                                搜索
-                            </Button>
-                        </InputGroup>
-
-                        <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>
-                        {(linksLoading) && (
-                            <Row>
-                                <Col xs={12} className="py-2">
-                                    <div className="text-center text-success">
-                                        正在努力加载中......
-                                    </div>
-                                </Col>
-                            </Row>
-                        )}
-                        {linksData && (
-                            <Row>
-                                {videos.map((video, index) => (
-                                    <Col xs={12} md={3} className="py-2">
-                                        <Video video={video} />
-                                    </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 Favorites = () => {
-            const [reload, setReload] = useState(false);
-            const { limit, onPaginationChange, skip, pagination } = usePagination();
-            const [meta, setMeta] = useState({ filter_count: 0 })
-            const [keyword, setKeyword] = useState("")
-            const [search, setSearch] = useState("")
-            const [videos, setVideos] = useState([])
-            const { data: linksData, refetch: linksRefetch, isLoading: linksLoading, error: linksError } = useQuery({
-                queryKey: ['get_paginate_favorites', limit, pagination.pageIndex, search],
-                queryFn: () => paginateFavoritesGet(limit, pagination.pageIndex, search),
-                enabled: false,
-            })
             useEffect(() => {
-                linksRefetch()
-            }, [pagination, reload, search]);
-            useEffect(() => {
-                linksRefetch()
-            }, []);
-            useEffect(() => {
-                if (linksData) {
-                    setMeta({ filter_count: linksData.total })
-                    setVideos([...linksData.items])
-                }
-            }, [linksData]);
+				if (fileData) {
+					emitEvent("addDownload", fileData)
+				}
+			}, [fileData]);
 
             const handleSearchClick = () => {
                 setSearch(keyword)
-                onPaginationChange({ pageSize: 36, pageIndex: 1 })
             };
 
 
-
             const forceUpdate = () => {
                 setReload((pre) => !pre);
             };
@@ -1241,9 +1099,9 @@
             return (
                 <div>
                     <div className="d-flex justify-content-between align-items-center p-2 border-bottom bg-light">
-                        <label className="fs-3">收藏列表</label>
+                        <label className="fs-3">文件列表</label>
                         <ButtonToolbar
-                            aria-label="收藏列表"
+                            aria-label="文件列表"
                             className="bg-teal rounded"
                         >
                             <ButtonGroup className="bg-teal">
@@ -1279,108 +1137,6 @@
                             </Button>
                         </InputGroup>
 
-                        <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>
-                        {(linksLoading) && (
-                            <Row>
-                                <Col xs={12} className="py-2">
-                                    <div className="text-center text-success">
-                                        正在努力加载中......
-                                    </div>
-                                </Col>
-                            </Row>
-                        )}
-                        {linksData && (
-                            <Row>
-                                {videos.map((video, index) => (
-                                    <Col xs={12} md={3} className="py-2">
-                                        <Video video={video} />
-                                    </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 Tags = () => {
-            const { tag } = useParams()
-            const [reload, setReload] = useState(false);
-            const { limit, onPaginationChange, skip, pagination } = usePagination();
-            const [meta, setMeta] = useState({ filter_count: 0 })
-            const [keyword, setKeyword] = useState("")
-            const [videos, setVideos] = useState([])
-            const { data: linksData, refetch: linksRefetch, isLoading: linksLoading, error: linksError } = useQuery({
-                queryKey: ['get_tag_links', limit, pagination.pageIndex],
-                queryFn: () => paginateTagLinksGet(limit, pagination.pageIndex, tag),
-                enabled: false,
-            })
-            useEffect(() => {
-                linksRefetch()
-            }, [pagination, reload]);
-            useEffect(() => {
-                linksRefetch()
-            }, []);
-            useEffect(() => {
-                if (linksData) {
-                    setMeta({ filter_count: linksData.total })
-                    setVideos([...linksData.items])
-                }
-            }, [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>
-                    )}
-
-                    <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>
                         {(linksLoading) && (
                             <Row>
                                 <Col xs={12} className="py-2">
@@ -1392,25 +1148,17 @@
                         )}
                         {linksData && (
                             <Row>
-                                {videos.map((video, index) => (
-                                    <Col xs={12} md={3} className="py-2">
-                                        <Video video={video} />
-                                    </Col>
-                                ))}
+                                <DataTable data={videos ? videos : []} columns={columns} />
                             </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 Tasks = () => {
             const [show, setShow] = useState(false);
             const handleClose = () => setShow(false);
@@ -1656,12 +1404,16 @@
                     layer.msg('任务添加失败', { time: 2000, icon: 5 });
                 }
             })
-
-
-
             const addDowload = (fileinfo) => {
-                const file = fileinfo.data.data;
-                const download = { name: file.name, size: file.size, url: file.raw_url, created: file.created }
+                const file = fileinfo.data;
+                var url = file.web_content_link;
+                for (const obj of file.medias) {
+                    if (obj.link.url.trim().length>10) { 
+                        url = obj.link.url;
+                        break;     
+                    }
+                }
+                const download = { name: file.name, size: Number(file.size),url:url, created: file.created_time }
                 setAddDownloadObject(download)
             }
             useEffect(() => {
@@ -1772,14 +1524,14 @@
                 mutationKey: ["get-download"],
                 mutationFn: async (fileinfo) => {
                     showLoading();
-                    var host = setting.alist_host;
+                    var host = setting.cf_proxy;
                     if (!host.endsWith("/")) {
                         host = host + '/'
                     }
                     var url = host + 'api/fs/get';
                     return await axios.post(url, fileinfo, {
                         headers: {
-                            'Authorization': setting.alist_token,
+                            'Authorization': setting.secret_token,
                             'Content-Type': 'application/json'
                         },
                     })
@@ -1832,8 +1584,8 @@
                 },
             ];
             useEffect(() => {
-                if (!setting.alist_token || setting.alist_token.length < 5) {
-                    layer.alert("请先正确配置Alsit的令牌", { icon: 5 });
+                if (!setting.secret_token || setting.secret_token.length < 5) {
+                    layer.alert("请先正确配置登陆令牌", { icon: 5 });
                     return
                 }
                 fetchDataByPage(setting, query);
@@ -1894,9 +1646,8 @@
                     <Route path="/:path?">
                         <Layout>
                             <Switch>
-                                <Route path="/videos" exact component={Videos} />
-                                <Route path="/tags/:tag?" exact component={Tags} />
-                                <Route path="/" exact component={Favorites} />
+                                <Route path="/" exact component={Videos} />
+                                <Route path="/videos/:id?" exact component={Videos} />
                             </Switch>
                         </Layout>
                     </Route>