update
This commit is contained in:
parent
dfdcbf7d65
commit
25de13eb85
@ -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 <div className="video-player">
|
||||
<ReactPlayer
|
||||
url={url}
|
||||
controls={true}
|
||||
light={cover}
|
||||
width="100%"
|
||||
height="250px"
|
||||
/>
|
||||
<div className="video-control p-2 flex items-center gap-2">
|
||||
<button>
|
||||
{state.playing ? <PauseOutlined/> : <PlayCircleOutlined/>}
|
||||
</button>
|
||||
<div className="whitespace-nowrap flex items-center text-sm">
|
||||
<span>00:00</span>
|
||||
<span>/</span>
|
||||
<span>00:00</span>
|
||||
{simple ? <div>
|
||||
<video src={url} poster={cover} controls={showControls}></video>
|
||||
</div> : <>
|
||||
<ReactPlayer
|
||||
url={url}
|
||||
controls={true}
|
||||
light={cover}
|
||||
width="100%"
|
||||
height="250px"
|
||||
onPlay={() => 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)
|
||||
}
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<div className="video-control p-2 flex items-center gap-2">
|
||||
<button>
|
||||
{state.playing ? <PauseOutlined /> : <PlayCircleOutlined />}
|
||||
</button>
|
||||
<div className="whitespace-nowrap flex items-center text-sm">
|
||||
<span>00:00</span>
|
||||
<span>/</span>
|
||||
<span>00:00</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<Progress size="small" percent={state.progress} showInfo={false} />
|
||||
</div>
|
||||
<button>
|
||||
{state.fullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<Progress size="small" percent={state.progress} showInfo={false}/>
|
||||
</div>
|
||||
<button>
|
||||
{state.fullscreen ? <FullscreenExitOutlined/> : <FullscreenOutlined/>}
|
||||
</button>
|
||||
</div>
|
||||
</>}
|
||||
</div>
|
||||
}
|
||||
@ -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<ArticleContentGroup[]>(GroupList);
|
||||
const [groups, setGroups] = useState<ArticleContentGroup[]>(ArticleGroupList);
|
||||
return (<div>
|
||||
<h1>create index</h1>
|
||||
<Modal
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import {Button, DatePicker, Form, Input, Select, Space} from "antd";
|
||||
import {Button, DatePicker, Form, Input, Space} from "antd";
|
||||
import {useSetState} from "ahooks";
|
||||
import {ListTimes, NewsSources} from "@/pages/news/components/news-source.ts";
|
||||
import {useState} from "react";
|
||||
|
||||
type SearchParams = {
|
||||
keywords?: string;
|
||||
@ -20,8 +18,6 @@ export default function SearchForm({onSearch, onBtnStartClick}: Props) {
|
||||
}>({
|
||||
keywords: "", searching: false, timeRange: ""
|
||||
})
|
||||
// 二级分类
|
||||
const [subOptions, setSubOptions] = useState<OptionItem[]>([])
|
||||
const onFinish = (values: any) => {
|
||||
setState({searching: true})
|
||||
onSearch?.({
|
||||
@ -37,7 +33,7 @@ export default function SearchForm({onSearch, onBtnStartClick}: Props) {
|
||||
<div className="search-form">
|
||||
<Form className={""} layout="inline" onFinish={onFinish}>
|
||||
<Form.Item name="keywords">
|
||||
<Input placeholder={'请输入搜索信息'}/>
|
||||
<Input className="w-[250px]" placeholder={'请输入搜索信息'}/>
|
||||
</Form.Item>
|
||||
<Form.Item label={'更新时间'} name="timeRange">
|
||||
<DatePicker.RangePicker />
|
||||
|
||||
@ -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 (<>
|
||||
<Modal open={!!video} title="新闻视频详情" width={900} footer={null}>
|
||||
<Modal open={!!video} title="新闻视频详情" width={1000} footer={null} onCancel={onClose}>
|
||||
<div className="flex gap-2 my-5">
|
||||
<div className="news-video w-[350px]">
|
||||
<div className="video-container bg-gray-100 rounded overflow-hidden">
|
||||
<Player url={'http://[2409:8087:74d9:21::6]:80/270000001128/9900000025/index.m3u8'} />
|
||||
<Player url={'http://localhost:10020/ymca.mp4'} simple showControls />
|
||||
</div>
|
||||
<div className="video-info text-right text-sm text-gray-600">
|
||||
<div className="video-info text-right text-sm text-gray-600 mt-3">
|
||||
<span>创建时间: 5小时前</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="detail">
|
||||
<div className="title"></div>
|
||||
<div className="content-container"></div>
|
||||
<div className="detail flex-1 ml-5">
|
||||
<div className="title">
|
||||
<span>标题: xxxxxxxx</span>
|
||||
</div>
|
||||
<div className="content-container max-h-[500px] overflow-auto pr-1 mt-4">
|
||||
<ArticleGroup groups={ArticleGroupList}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer flex justify-between">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user