Add Attachment3

2020-09-25 10:53:30 +08:00 · 2020-09-25 10:53:30 +08:00 · d228d7bcbf
parent dd9de256e4
commit d228d7bcbf
4 changed files with 51 additions and 87 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -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",
--- a/package.json
+++ b/package.json
@ -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",
--- a/src/forge/Upload/attachment.js
+++ b/src/forge/Upload/attachment.js
@ -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,6 +120,7 @@ class Attachment extends Component {
                  className="pd510 attachment-list-div"
                >
                  {this.is_video(item.title) ? (
+                    <Spin spinning={move_spin}>
                      <a
                        onClick={() => this.show_video_modal(item)}
                        className="attachment-list-a"
@ -99,17 +128,8 @@ class Attachment extends Component {
                        <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>
+                    </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}
          >
--- a/src/forge/Upload/videos.js
+++ b/src/forge/Upload/videos.js
@ -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;