From 25de13eb85dc70a0db3e10c0d8264d6ff572e80f Mon Sep 17 00:00:00 2001 From: callmeyan Date: Mon, 25 Nov 2024 11:52:43 +0800 Subject: [PATCH] update --- src/components/video/player.tsx | 75 ++++++++++++------- src/pages/create/index.tsx | 40 +--------- src/pages/library/components/search-form.tsx | 8 +- src/pages/library/components/video-detail.tsx | 19 +++-- 4 files changed, 66 insertions(+), 76 deletions(-) diff --git a/src/components/video/player.tsx b/src/components/video/player.tsx index f186b6f..26fcce9 100644 --- a/src/components/video/player.tsx +++ b/src/components/video/player.tsx @@ -1,39 +1,60 @@ import ReactPlayer from 'react-player' -import {useSetState} from "ahooks"; -import {PauseOutlined, PlayCircleOutlined, FullscreenOutlined, FullscreenExitOutlined} from "@ant-design/icons" -import {Progress} from "antd"; +import { useSetState } from "ahooks"; +import { PauseOutlined, PlayCircleOutlined, FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons" +import { Progress } from "antd"; -export function Player({url, cover}: { url: string; cover?: string }) { +export function Player({ url, cover, simple, showControls }: { url: string; cover?: string; simple?: boolean; showControls?: boolean }) { const [state, setState] = useSetState({ playing: false, muted: false, // 是否全屏 fullscreen: false, - progress: 30 + progress: 0, + playedSeconds: 0, + duration: 0 }) return
- -
- -
- 00:00 - / - 00:00 + {simple ?
+ +
: <> + setState({ playing: true })} + onEnded={() => setState({ playing: false })} + onPause={() => setState({ playing: false })} + onReady={(_player) => { + setState({ duration: _player.getDuration() }) + }} + onProgress={(_) => { + setState((_prev) => { + return { + ..._prev, + playedSeconds: _.playedSeconds, + progress: Math.floor(_.playedSeconds / _prev.duration * 100) + } + }) + }} + /> +
+ +
+ 00:00 + / + 00:00 +
+
+ +
+
-
- -
- -
+ }
} \ No newline at end of file diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx index 2b54f36..1361e31 100644 --- a/src/pages/create/index.tsx +++ b/src/pages/create/index.tsx @@ -2,46 +2,12 @@ import ArticleGroup from "@/components/article/group.tsx"; import {Input, Modal} from "antd"; import {useState} from "react"; +import { ArticleGroupList } from "@/_local/mock-data"; + -const GroupList: ArticleContentGroup[] = [ - { - groupId: 1, - blocks: [ - { - type: "image", - content: "//www.81.cn/yw_208727/_attachment/2024/11/21/16353257_1f06b18bee0ab586e4775aec26490544.jpg" - }, - { - type: "text", - content: "新华社巴西利亚11月20日电（记者杨依军　周永穗）当地时间11月20日上午，国家主席习近平同巴西总统卢拉在巴西利亚总统官邸黎明宫会谈后共同会见记者。" - }, - { - type: "text", - content: "习近平指出，这是我时隔5年再次踏上这片“充满爱和希望的土地”。启程前夕，我收到多封巴西各界友好人士的来信，信中洋溢着巴西人民对中巴友谊的珍视和对深化两国友好的期盼，令我深受感动。刚才，我同卢拉总统举行了亲切友好、富有成果的会谈。我们共同回顾中巴关系50年发展历程，一致认为两国关系正处于历史最好时期，日益彰显全球性、战略性、长远性影响，成为发展中大国携手共进、团结合作的典范。" - } - ] - }, - { - groupId: 2, - blocks: [ - { - type: "image", - content: "https://s3.cdnjson.com/images/2024/11/19/54419747-6fe5-4358-9fa8-d41d786e9f16.jpg" - }, - { - type: "text", - content: "我们就中巴关系未来发展达成新的战略共识，其中最重要的是，我们共同决定将双边关系提升为携手构建更公正世界和更可持续星球的中巴命运共同体，同时将共建“一带一路”倡议同巴西发展战略对接。在世界格局加速演变的背景下，这体现了中巴两个发展中大国识变、应变、求变的决心，必将推动两国关系继往开来、开启下一个“黄金50年”，同时为全球南方国家团结自强树立榜样，为提升发展中国家在全球治理中的代表性和发言权作出新的贡献。" - }, - { - type: "text", - content: "hello world" - } - ] - }, -] export default function CreateIndex() { const [visible, setVisible] = useState(true) - const [groups, setGroups] = useState(GroupList); + const [groups, setGroups] = useState(ArticleGroupList); return (

create index

({ keywords: "", searching: false, timeRange: "" }) - // 二级分类 - const [subOptions, setSubOptions] = useState([]) const onFinish = (values: any) => { setState({searching: true}) onSearch?.({ @@ -37,7 +33,7 @@ export default function SearchForm({onSearch, onBtnStartClick}: Props) {
- + diff --git a/src/pages/library/components/video-detail.tsx b/src/pages/library/components/video-detail.tsx index b48b7a7..2603e6f 100644 --- a/src/pages/library/components/video-detail.tsx +++ b/src/pages/library/components/video-detail.tsx @@ -2,6 +2,9 @@ import {Button, Modal} from "antd"; import {Player} from "@/components/video/player.tsx"; +import { ArticleGroupList } from "@/_local/mock-data"; +import ArticleGroup from "@/components/article/group"; + type Props = { video?: VideoInfo; onClose?: () => void @@ -13,19 +16,23 @@ export default function VideoDetail({video, onClose}: Props) { } return (<> - +
- +
-
+
创建时间: 5小时前
-
-
-
+
+
+ 标题: xxxxxxxx +
+
+ +