Add Attachment3
This commit is contained in:
parent
dd9de256e4
commit
d228d7bcbf
|
|
@ -14939,8 +14939,8 @@
|
|||
},
|
||||
"react-player": {
|
||||
"version": "1.15.3",
|
||||
"resolved": "https://registry.npmjs.org/react-player/-/react-player-1.15.3.tgz",
|
||||
"integrity": "sha512-8fc0R1AipFIy7l4lKgnIg+gMU2IY32ZMxxBlINjXAq/YnN3HUP3hOaE+aQ0lQv+a1/MMZgbekWD86ZGDO7kB8g==",
|
||||
"resolved": "https://registry.npm.taobao.org/react-player/download/react-player-1.15.3.tgz",
|
||||
"integrity": "sha1-0AzxRfnIYYTLCgcaH7+Oy3tomH8=",
|
||||
"requires": {
|
||||
"deepmerge": "^4.0.0",
|
||||
"load-script": "^1.0.0",
|
||||
|
|
@ -14949,8 +14949,8 @@
|
|||
"dependencies": {
|
||||
"deepmerge": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
|
||||
"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
|
||||
"resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-4.2.2.tgz",
|
||||
"integrity": "sha1-RNLqNnm49NT/ujPwPYZfwee/SVU="
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -18762,33 +18762,6 @@
|
|||
"extsprintf": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"video-react": {
|
||||
"version": "0.14.1",
|
||||
"resolved": "https://registry.npm.taobao.org/video-react/download/video-react-0.14.1.tgz",
|
||||
"integrity": "sha1-Sax7GfHQOcCz6+yC+BIkvC+ovfE=",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.4.5",
|
||||
"classnames": "^2.2.6",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"redux": "^4.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.11.2",
|
||||
"resolved": "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.11.2.tgz?cache=0&sync_timestamp=1596637887062&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.11.2.tgz",
|
||||
"integrity": "sha1-9UnBPHVMxAuHZEufqfCaapX+BzY=",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
},
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.7",
|
||||
"resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.7.tgz?cache=0&sync_timestamp=1595456367497&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.13.7.tgz",
|
||||
"integrity": "sha1-ysLazIoepnX+qrrriugziYrkb1U="
|
||||
}
|
||||
}
|
||||
},
|
||||
"vm-browserify": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -107,7 +107,6 @@
|
|||
"styled-components": "^4.4.1",
|
||||
"sw-precache-webpack-plugin": "0.11.4",
|
||||
"url-loader": "0.6.2",
|
||||
"video-react": "^0.14.1",
|
||||
"webpack-cli": "^3.3.11",
|
||||
"webpack-dev-server": "^3.10.3",
|
||||
"webpack-manifest-plugin": "^2.2.0",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { Component } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import { Popconfirm, Modal, Button, Icon } from "antd";
|
||||
import { Popconfirm, Modal, Spin } from "antd";
|
||||
import Videos from "./videos";
|
||||
class Attachment extends Component {
|
||||
constructor(props) {
|
||||
|
|
@ -11,6 +11,8 @@ class Attachment extends Component {
|
|||
show_video: false,
|
||||
video_url: undefined,
|
||||
video_title: undefined,
|
||||
video_id: undefined,
|
||||
move_spin: false,
|
||||
Deleted: [],
|
||||
};
|
||||
}
|
||||
|
|
@ -27,17 +29,42 @@ class Attachment extends Component {
|
|||
|
||||
show_video_modal = (item) => {
|
||||
this.setState({
|
||||
show_video: true,
|
||||
video_url: item.absolute_path,
|
||||
video_title: item.title,
|
||||
move_spin: true,
|
||||
video_id: item.id,
|
||||
});
|
||||
this.move_attachment(item.id, "preview");
|
||||
};
|
||||
hide_video_modal = () => {
|
||||
const { video_id } = this.state;
|
||||
this.setState({
|
||||
show_video: false,
|
||||
video_url: undefined,
|
||||
video_title: undefined,
|
||||
});
|
||||
this.move_attachment(video_id, "close");
|
||||
};
|
||||
|
||||
move_attachment = (id, status) => {
|
||||
axios
|
||||
.post(`/attachments/${id}/preview_attachment`, { status: status })
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
this.setState({
|
||||
show_video: status === "preview",
|
||||
video_url: status === "preview" ? "https://forgeplus.trustie.net" + result.data.url : undefined,
|
||||
move_spin: false,
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
move_spin: false,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.setState({
|
||||
move_spin: false,
|
||||
});
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
is_video = (name) => {
|
||||
|
|
@ -73,6 +100,7 @@ class Attachment extends Component {
|
|||
show_video,
|
||||
video_url,
|
||||
video_title,
|
||||
move_spin,
|
||||
} = this.state;
|
||||
const { attachments } = this.props;
|
||||
return (
|
||||
|
|
@ -92,24 +120,16 @@ class Attachment extends Component {
|
|||
className="pd510 attachment-list-div"
|
||||
>
|
||||
{this.is_video(item.title) ? (
|
||||
<a
|
||||
onClick={() => this.show_video_modal(item)}
|
||||
className="attachment-list-a"
|
||||
>
|
||||
<i className="iconfont icon-fujian mr8 paper-clip-color font-12"></i>
|
||||
<span>{item.title}</span>
|
||||
<span className="ml20">{item.filesize}</span>
|
||||
<Button
|
||||
type="link"
|
||||
shape="round"
|
||||
icon="download"
|
||||
className="ml20"
|
||||
size="small"
|
||||
href={item.url}
|
||||
target="_blank"
|
||||
<Spin spinning={move_spin}>
|
||||
<a
|
||||
onClick={() => this.show_video_modal(item)}
|
||||
className="attachment-list-a"
|
||||
>
|
||||
</Button>
|
||||
</a>
|
||||
<i className="iconfont icon-fujian mr8 paper-clip-color font-12"></i>
|
||||
<span>{item.title}</span>
|
||||
<span className="ml20">{item.filesize}</span>
|
||||
</a>
|
||||
</Spin>
|
||||
) : (
|
||||
<Link
|
||||
to={`${item.url}`}
|
||||
|
|
@ -148,7 +168,7 @@ class Attachment extends Component {
|
|||
<Modal
|
||||
title={video_title}
|
||||
visible={true}
|
||||
width={720}
|
||||
width={690}
|
||||
footer={null}
|
||||
onCancel={this.hide_video_modal}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,41 +1,13 @@
|
|||
import React, { useEffect, useState, Fragment } from "react";
|
||||
import "../../../node_modules/video-react/dist/video-react.css";
|
||||
import {
|
||||
Player,
|
||||
ControlBar,
|
||||
PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled
|
||||
ReplayControl, // 后退按钮
|
||||
ForwardControl, // 前进按钮
|
||||
CurrentTimeDisplay,
|
||||
TimeDivider,
|
||||
PlaybackRateMenuButton, // 倍速播放选项
|
||||
VolumeMenuButton,
|
||||
BigPlayButton,
|
||||
} from "video-react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import ReactPlayer from 'react-player'
|
||||
function videos(video_url) {
|
||||
const [VideUrl, setUrl] = useState(null); //用户的内容
|
||||
useEffect(() => {
|
||||
setUrl(video_url);
|
||||
setUrl(video_url.video_url);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div style={{ width: "100%", maxHeight: 500 }}>
|
||||
<Player>
|
||||
<source src={VideUrl} />
|
||||
<BigPlayButton position="center" />
|
||||
<ControlBar autoHide={false} disableDefaultControls={false}>
|
||||
<ReplayControl seconds={10} order={1.1} />
|
||||
<ForwardControl seconds={30} order={1.2} />
|
||||
<PlayToggle />
|
||||
<CurrentTimeDisplay order={4.1} />
|
||||
<TimeDivider order={4.2} />
|
||||
<PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} />
|
||||
<VolumeMenuButton />
|
||||
</ControlBar>
|
||||
</Player>
|
||||
</div>
|
||||
</Fragment>
|
||||
<ReactPlayer url={VideUrl} controls playing={false}/>
|
||||
);
|
||||
}
|
||||
export default videos;
|
||||
|
|
|
|||
Loading…
Reference in New Issue