wishpal_ironfan
/
tiefen_space_op
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

视频播放添加倍数

This commit is contained in:
al 2024-08-06 17:50:49 +08:00
parent 3e1860e88f
commit 4142e6faf8
18 changed files with 94 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
package-lock.json generated
View File

@ -21,6 +21,7 @@
"react": "^18.2.0",
"react-cookie": "^6.1.1",
"react-dom": "^18.2.0",
"react-player": "^2.16.0",
"react-router-dom": "^6.14.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
@ -14552,6 +14553,11 @@
"resolved": "https://registry.npmmirror.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
},
"node_modules/load-script": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/load-script/-/load-script-1.0.0.tgz",
"integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
},
"node_modules/loader-runner": {
"version": "4.3.0",
"resolved": "https://registry.npmmirror.com/loader-runner/-/loader-runner-4.3.0.tgz",
@ -14703,6 +14709,11 @@
"node": ">= 4.0.0"
}
},
"node_modules/memoize-one": {
"version": "5.2.1",
"resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-5.2.1.tgz",
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
},
"node_modules/merge-descriptors": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@ -17760,11 +17771,31 @@
"resolved": "https://registry.npmmirror.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"node_modules/react-fast-compare": {
"version": "3.2.2",
"resolved": "https://registry.npmmirror.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
},
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/react-player": {
"version": "2.16.0",
"resolved": "https://registry.npmmirror.com/react-player/-/react-player-2.16.0.tgz",
"integrity": "sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==",
"dependencies": {
"deepmerge": "^4.0.0",
"load-script": "^1.0.0",
"memoize-one": "^5.1.1",
"prop-types": "^15.7.2",
"react-fast-compare": "^3.0.1"
},
"peerDependencies": {
"react": ">=16.6.0"
}
},
"node_modules/react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.11.0.tgz",
@ -19977,16 +20008,16 @@
}
},
"node_modules/typescript": {
"version": "5.5.4",
"resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.5.4.tgz",
"integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
"version": "4.9.5",
"resolved": "https://registry.npmmirror.com/typescript/-/typescript-4.9.5.tgz",
"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
"node": ">=4.2.0"
}
},
"node_modules/unbox-primitive": {

1
package.json
View File

@ -16,6 +16,7 @@
"react": "^18.2.0",
"react-cookie": "^6.1.1",
"react-dom": "^18.2.0",
"react-player": "^2.16.0",
"react-router-dom": "^6.14.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"

17
src/components/VideoPlayer/index.js Normal file
View File

@ -0,0 +1,17 @@
import React, { useState } from "react";
import { Select } from "antd";
import ReactPlayer from "react-player";
export default function VideoPlayer({url,key,style}) {
const [rate, setRate] = useState(1);
return (
<div key={key} >
<ReactPlayer playbackRate={rate} url={url} width={150} controls style={style}/>
<Select onChange={(e) => setRate(e)} value={rate}>
<Select.Option value={1}>1x</Select.Option>
<Select.Option value={2}>2x</Select.Option>
<Select.Option value={3}>3x</Select.Option>
<Select.Option value={5}>5x</Select.Option>
</Select>
</div>
);
}

11
src/components/VideoUploader/index.jsx
View File

@ -1,6 +1,6 @@
import React, { useState } from "react";
import { uploadVideo } from "../../utils/upload";
import VideoPlayer from '../VideoPlayer';
const VideoUploader = ({ setIds }) => {
const [selectedVideos, setSelectedVideos] = useState([]);
const [uploading, setUploading] = useState(false);
@ -64,17 +64,12 @@ const VideoUploader = ({ setIds }) => {
<div style={{ display: "flex", flexWrap: "wrap" }}>
{selectedVideos.map((video, index) => (
<div key={index} style={{ margin: "5px" }} className="relative">
<video
controls
src={video.videoUrl}
alt={`视频 ${index + 1}`}
style={{
<VideoPlayer url={video.videoUrl} style={{
width: "100px",
height: "100px",
objectFit: "cover",
borderRadius: "8px",
}}
/>
}}/>
{video.uploadStatus === "success" && (
<p className="absolute top-0 left-0 text-green-400 font-bold bg-black/50 flex w-full h-full items-center justify-center rounded-lg">
上传成功

4
src/pages/CommentsReview/index.jsx
View File

@ -7,7 +7,7 @@ import {
useNavigate,
useLocation,
} from "react-router-dom";
import VideoPlayer from '../../components/VideoPlayer';
const CommentsReviewContent = (props) => {
const current = props.current;
//表头
@ -58,7 +58,7 @@ const CommentsReviewContent = (props) => {
style={{ marginBottom: 10 }}
/>
) : (
<video key={item.url} src={item.url} width={150} controls />
<VideoPlayer url={item.url}/>
)
)
: "无"}

13
src/pages/CreateAndEditPost/index.jsx
View File

@ -3,7 +3,7 @@ import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
import baseRequest from "../../utils/baseRequest";
import ImageUploader from "../../components/ImageUploader";
import VideoUploader from "../../components/VideoUploader";
import VideoPlayer from '../../components/VideoPlayer';
const CreateAndEditPostContent = (props) => {
const { TextArea } = Input;
//表头
@ -46,7 +46,7 @@ const CreateAndEditPostContent = (props) => {
/>
))}
{data?.videos?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls />
<VideoPlayer key={index} url={item.urls[0]}/>
))}
</div>
),
@ -541,12 +541,9 @@ const CreateAndEditPostContent = (props) => {
{defaultMedia.video_ids.length !== 0 && (
<div className="flex flex-row mt-4">
<div className="relative">
<video
src={defaultMedia.videos[0].urls[0]}
width={150}
controls
className="mr-auto"
/>
<div className="mr-auto">
<VideoPlayer url={defaultMedia.videos[0].urls[0]}/>
</div>
<Button
className="absolute top-0 left-0 w-full"
danger

4
src/pages/DeletedPostReview/index.jsx
View File

@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer';
export default function DeletedPostReview() {
//表头
const columns = [
@ -43,7 +43,7 @@ export default function DeletedPostReview() {
/>
))}
{data?.videos?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls />
<VideoPlayer key={index} url={item.urls[0]}/>
))}
</div>
),

13
src/pages/EditSpacePost/index.jsx
View File

@ -4,7 +4,7 @@ import baseRequest from "../../utils/baseRequest";
import ImageUploader from "../../components/ImageUploader";
import VideoUploader from "../../components/VideoUploader";
import { useSearchParams } from "react-router-dom";
import VideoPlayer from '../../components/VideoPlayer';
const EditSpacePostContent = (props) => {
const { TextArea } = Input;
const [searchParams, setSearchParams] = useSearchParams();
@ -59,7 +59,7 @@ const EditSpacePostContent = (props) => {
<Image key={index} src={item.urls[0]} width={100} />
))}
{data.media.videos.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls />
<VideoPlayer key={index} url={item.urls[0]}/>
))}
</div>
</div>
@ -509,12 +509,9 @@ const EditSpacePostContent = (props) => {
{defaultMedia.video_ids.length !== 0 && (
<div className="flex flex-row mt-4">
<div className="relative">
<video
src={defaultMedia.videos[0].urls[0]}
width={150}
controls
className="mr-auto"
/>
<div className="mr-auto" >
<VideoPlayer url={defaultMedia.videos[0].urls[0]}/>
</div>
<Button
className="absolute top-0 left-0 w-full"
danger

4
src/pages/Feedback/index.jsx
View File

@ -8,7 +8,7 @@ import {
useLocation,
} from "react-router-dom";
import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer';
const FeedbackContent = (props) => {
const { TextArea } = Input;
const current = props.current;
@ -44,7 +44,7 @@ const FeedbackContent = (props) => {
/>
))}
{data.videos?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls />
<VideoPlayer key={index} url={item.urls[0]}/>
))}
</div>
),

4
src/pages/GoodsReview/index.jsx
View File

@ -7,7 +7,7 @@ import {
useNavigate,
useLocation,
} from "react-router-dom";
import VideoPlayer from '../../components/VideoPlayer';
const GoodsReviewContent = (props) => {
const { TextArea } = Input;
const current = props.current;
@ -49,7 +49,7 @@ const GoodsReviewContent = (props) => {
style={{ marginBottom: 10 }}
/>
) : (
<video key={item.url} src={item.url} width={150} controls />
<VideoPlayer key={item.url} url={item.url} width={150} />
)
)
: "无"}

4
src/pages/MediaReview/index.jsx
View File

@ -7,7 +7,7 @@ import {
useNavigate,
useLocation,
} from "react-router-dom";
import VideoPlayer from '../../components/VideoPlayer';
const MediaReviewContent = (props) => {
const { TextArea } = Input;
const current = props.current;
@ -59,7 +59,7 @@ const MediaReviewContent = (props) => {
style={{ marginBottom: 10 }}
/>
) : (
<video key={item.url} src={item.url} width={150} controls />
<VideoPlayer key={item.url} url={item.url} width={150} />
)
)
: "无"}

6
src/pages/PostMachineReview/index.jsx
View File

@ -8,7 +8,7 @@ import {
useLocation,
} from "react-router-dom";
import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer';
const PostMachineReviewContent = (props) => {
const { TextArea } = Input;
const current = props.current;
@ -47,7 +47,7 @@ const PostMachineReviewContent = (props) => {
<Image key={index} src={item.urls[0]} width={100} />
))}
{data.media?.videos?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls />
<VideoPlayer key={index} url={item.urls[0]} width={150} />
))}
</div>
</div>
@ -68,7 +68,7 @@ const PostMachineReviewContent = (props) => {
<Image key={index} src={item.urls[0]} width={100} />
))}
{data.media?.videos?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls />
<VideoPlayer key={index} url={item.urls[0]} width={150} />
))}
</div>
</div>

10
src/pages/StreamerInformation/index.jsx
View File

@ -13,7 +13,7 @@ import Modal from "../../components/Modal";
import VideoUploader from "../../components/VideoUploader";
import ImageUploader from "../../components/ImageUploader";
import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer';
//tab内容
const StreamerInformationContent = () => {
const { TextArea } = Input;
@ -120,7 +120,7 @@ const StreamerInformationContent = () => {
dataIndex: "displayVideo",
key: "displayVideo",
render: (data) => (
<video src={data[0].urls[0]} width={150} controls />
<VideoPlayer url={data[0].urls[0]} width={150} />
),
};
case "displayGallery":
@ -753,11 +753,7 @@ const StreamerInformationContent = () => {
</p>
{defaultMedia.displayVideo.length !== 0 && (
<div className="relative">
<video
src={defaultMedia.displayVideo[0].urls[0]}
width={150}
controls
/>
<VideoPlayer url={defaultMedia.displayVideo[0].urls[0]} width={150} />
<Button
className="absolute top-0 left-0 w-full"
danger

4
src/pages/StreamerInformationCompleteNew/index.jsx
View File

@ -8,7 +8,7 @@ import {
useLocation,
} from "react-router-dom";
import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer';
const JoinContent = (props) => {
const { TextArea } = Input;
const current = props.current;
@ -104,7 +104,7 @@ const JoinContent = (props) => {
title: "封面视频",
dataIndex: "displayVideo",
key: "displayVideo",
render: (data) => <video src={data[0].urls[0]} width={150} controls />,
render: (data) => <VideoPlayer url={data[0].urls[0]} width={150} />,
},
{
title: "相册",

6
src/pages/StreamerJoin/index.jsx
View File

@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from "react";
import { Form, Input, Button, Space, Table, Menu, Image } from "antd";
import { Form, Input, Button, Space, Table, Menu, Image, Select } from "antd";
import {
Routes,
Route,
@ -8,7 +8,7 @@ import {
useLocation,
} from "react-router-dom";
import baseRequest from "../../utils/baseRequest";
import VideoPlayer from "../../components/VideoPlayer"
const JoinContent = (props) => {
const { TextArea } = Input;
const current = props.current;
@ -133,7 +133,7 @@ const JoinContent = (props) => {
title: "封面视频",
dataIndex: "displayVideo",
key: "displayVideo",
render: (data) => <video src={data} width={150} controls />,
render: (data) => <VideoPlayer url={data}/>,
},
{
title: "相册",

6
src/pages/StreamerVideoMachineReview/index.jsx
View File

@ -8,7 +8,7 @@ import {
useLocation,
} from "react-router-dom";
import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer';
const StreamerVideoMachineReviewContent = (props) => {
const { TextArea } = Input;
const current = props.current;
@ -48,7 +48,7 @@ const StreamerVideoMachineReviewContent = (props) => {
render: (data) => (
<div className="flex flex-wrap gap-1">
{data?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls />
<VideoPlayer url={item.urls[0]}width={150}/>
))}
</div>
),
@ -60,7 +60,7 @@ const StreamerVideoMachineReviewContent = (props) => {
render: (data) => (
<div className="flex flex-wrap gap-1">
{data?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls />
<VideoPlayer key={index} url={item.urls[0]} width={150} />
))}
</div>
),

4
src/pages/TopPosts/index.jsx
View File

@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react";
import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer';
const TopPostsContent = (props) => {
//表头
const columns = [
@ -43,7 +43,7 @@ const TopPostsContent = (props) => {
/>
))}
{data?.videos?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls />
<VideoPlayer key={index} url={item.urls[0]} width={150} />
))}
</div>
),

4
src/pages/ZonePostMachineReview/index.jsx
View File

@ -8,7 +8,7 @@ import {
useLocation,
} from "react-router-dom";
import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer';
const ZonePostMachineReviewContent = (props) => {
const { TextArea } = Input;
const current = props.current;
@ -52,7 +52,7 @@ const ZonePostMachineReviewContent = (props) => {
<Image key={index} src={item.urls[0]} width={100} />
))}
{data.media.videos.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls />
<VideoPlayer key={index} url={item.urls[0]} width={150} />
))}
</div>
</div>