Add Attachment Video

2020-09-24 14:55:44 +08:00 · 2020-09-24 14:55:44 +08:00 · 615a4debe5
parent 68a859d1c7
commit 615a4debe5
5 changed files with 219 additions and 68 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -18762,6 +18762,33 @@
        "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",
--- a/package.json
+++ b/package.json
@ -14,7 +14,6 @@
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.2",
-    "code-prettify": "^0.1.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-react-app": "^3.1.1",
    "babel-runtime": "6.26.0",
@ -24,6 +23,7 @@
    "chalk": "1.1.3",
    "classnames": "^2.2.5",
    "clipboard": "^2.0.6",
+    "code-prettify": "^0.1.0",
    "codemirror": "^5.53.0",
    "connected-react-router": "4.4.1",
    "css-loader": "^3.5.2",
@ -107,6 +107,7 @@
    "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",
--- a/src/AppConfig.js
+++ b/src/AppConfig.js
@ -64,8 +64,8 @@ export function initAxiosInterceptors(props) {
  initOnlineOfflineListener()
  // TODO 避免重复的请求 https://github.com/axios/axios#cancellation
  var 
-  proxy = "http://localhost:3000"
-  proxy = "https://testforgeplus.trustie.net"
+  // proxy = "http://localhost:3000"
+  proxy = "https://forgeplus.trustie.net"

  const requestMap = {};
  window.setfalseInRequestMap = function (keyName) {
--- a/src/forge/Upload/attachment.js
+++ b/src/forge/Upload/attachment.js
@ -1,82 +1,164 @@
-import React, { Component } from 'react';
-import {Link} from 'react-router-dom';
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
 import axios from "axios";
-import {Popconfirm} from "antd";
-class Attachment extends Component{
-  constructor(props){
+import { Popconfirm, Modal, Button, Icon } from "antd";
+import Videos from "./videos";
+class Attachment extends Component {
+  constructor(props) {
    super(props);
-    this.state={
+    this.state = {
      canDelete: false,
-      Deleted:[]
-    }
+      show_video: false,
+      video_url: undefined,
+      video_title: undefined,
+      Deleted: [],
+    };
  }

-  componentDidMount=()=>{
+  componentDidMount = () => {
    this.getDetail();
-  }
+  };

-  getDetail=()=>{
+  getDetail = () => {
    this.setState({
-      canDelete: this.props.canDelete
-    })
-  }
+      canDelete: this.props.canDelete,
+    });
+  };
+
+  show_video_modal = (item) => {
+    this.setState({
+      show_video: true,
+      video_url: item.url,
+      video_title: item.title,
+    });
+  };
+  hide_video_modal = () => {
+    this.setState({
+      show_video: false,
+      video_url: undefined,
+      video_title: undefined,
+    });
+  };
+
+  is_video = (name) => {
+    const video_names = ["mp4", "flv", "mkv", "3gp"];
+    return video_names.indexOf(name.split(".").pop()) > -1;
+  };

  deleteAttachment = (id) => {
-    const url = `/attachments/${id}.json`
-    axios.delete(url, {
-    }).then((response) => {
+    const url = `/attachments/${id}.json`;
+    axios
+      .delete(url, {})
+      .then((response) => {
        if (response.data) {
          if (response.data.status === 0) {
            this.setState({
-            Deleted: this.state.Deleted.concat(id)
+              Deleted: this.state.Deleted.concat(id),
            });
-          this.props.showNotification("附件删除成功")
-        }else{
-          this.props.showNotification(response.data.message)
+            this.props.showNotification("附件删除成功");
+          } else {
+            this.props.showNotification(response.data.message);
          }
        }
-    }).catch(function (error) {
+      })
+      .catch(function (error) {
        console.log(error);
      });
-  }
+  };

-  render(){
-    const {  Deleted , canDelete } = this.state;
-    const { attachments }= this.props
-    return(
+  render() {
+    const {
+      Deleted,
+      canDelete,
+      show_video,
+      video_url,
+      video_title,
+    } = this.state;
+    const { attachments } = this.props;
+    return (
      <div>
-        {
-          attachments ?
+        {attachments ? (
          <div className="attachmentsList mt5">
-              {
-                attachments.map((item,key)=>{
-                  return(
-                    <div key= {key} style={{display: (Deleted.length > 0 && Deleted.indexOf(item.id) !== -1) ? "none" : "block"}} className="pd510 attachment-list-div" >
-                      <Link to={`${item.url}`} target="_blank" className="attachment-list-a">
+            {attachments.map((item, key) => {
+              return (
+                <div
+                  key={key}
+                  style={{
+                    display:
+                      Deleted.length > 0 && Deleted.indexOf(item.id) !== -1
+                        ? "none"
+                        : "block",
+                  }}
+                  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"
+                      >
+                      </Button>
+                    </a>
+                  ) : (
+                    <Link
+                      to={`${item.url}`}
+                      target="_blank"
+                      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>
                    </Link>
-                      {
-                        canDelete ?
-                          <Popconfirm placement="bottom" title={'您确定要删除附件吗'}  okText="是" cancelText="否" onConfirm={()=>this.deleteAttachment(item.id)}>
-                            <span className="attachment-list-delete fr" ><i className="iconfont icon-lajitong mr10 color-grey-9 font-14"></i></span>
+                  )}
+
+                  {canDelete ? (
+                    <Popconfirm
+                      placement="bottom"
+                      title={"您确定要删除附件吗"}
+                      okText="是"
+                      cancelText="否"
+                      onConfirm={() => this.deleteAttachment(item.id)}
+                    >
+                      <span className="attachment-list-delete fr">
+                        <i className="iconfont icon-lajitong mr10 color-grey-9 font-14"></i>
+                      </span>
                    </Popconfirm>
-                          :
+                  ) : (
                    ""
-                      }
+                  )}
                </div>
-
-                  )
-                })
-              }
+              );
+            })}
          </div>
-
-            :
+        ) : (
          ""
-        }
+        )}
+        {show_video ? (
+          <Modal
+            title={video_title}
+            visible={true}
+            width={720}
+            footer={null}
+            onCancel={this.hide_video_modal}
+          >
+            <Videos video_url={video_url}></Videos>
+          </Modal>
+        ) : (
+          ""
+        )}
      </div>
-    )
+    );
  }
 }
 export default Attachment;
--- a/src/forge/Upload/videos.js
+++ b/src/forge/Upload/videos.js
@ -0,0 +1,41 @@
+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";
+function videos(video_url) {
+  const [VideUrl, setUrl] = useState(null); //用户的内容
+  useEffect(() => {
+    setUrl(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>
+  );
+}
+export default videos;