视频预览

2025-12-25 19:52:48 +00:00 · 2019-12-14 16:01:47 +08:00 · 2019-12-14 16:01:47 +08:00 · d06b191090
parent 5981bfacc1
commit d06b191090
18 changed files with 412 additions and 183 deletions
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
    "react-dnd": "^9.5.1",
    "react-dnd-html5-backend": "^9.5.1",
    "react-dom": "^16.12.0",
+    "react-dplayer": "^0.3.3",
    "react-hotkeys": "^2.0.0",
    "react-image-lightbox": "^5.1.1",
    "react-lazy-load-image-component": "^1.3.2",
--- a/src/App.js
+++ b/src/App.js
@ -13,10 +13,12 @@ import {
 } from "react-router-dom";
 import Auth from "./middleware/Auth";
 import { CssBaseline, makeStyles, ThemeProvider } from "@material-ui/core";
+import PageLoading from "./component/Placeholder/PageLoading.js"

 // Lazy loads
 const LoginForm = React.lazy(() => import("./component/Login/LoginForm"));
 const FileManager = React.lazy(() => import ("./component/FileManager/FileManager.js" ));
+const VideoPreview = React.lazy(() => import ("./component/Viewer/Video.js" ));

 export default function App() {
    const themeConfig = useSelector(state => state.siteConfig.theme);
@ -63,13 +65,13 @@ export default function App() {
                                我是私有页面
                            </AuthRoute>
 							<AuthRoute path={`${path}home`}>
-								<Suspense fallback={<div>Loading...</div>}>
+								<Suspense fallback={<PageLoading/>}>
                               		<FileManager/>
 								</Suspense>
                            </AuthRoute>
-                            <Route path={`${path}login`}>
-                                <Suspense fallback={<div>Loading...</div>}>
-                                    <LoginForm />
+                            <Route path={`${path}video/*`}>
+                                <Suspense fallback={<PageLoading/>}>
+                                    <VideoPreview />
                                </Suspense>
                            </Route>
                        </Switch>
--- a/src/component/FileManager/ContextMenu.js
+++ b/src/component/FileManager/ContextMenu.js
@ -17,7 +17,7 @@ import {
    openTorrentDownloadDialog,
    openGetSourceDialog,
    openCopyDialog,
-    openLoadingDialog
+    openLoadingDialog, setSelectedTarget
 } from "../../actions/index";
 import { isPreviewable, isTorrent } from "../../config";
 import { allowSharePreview } from "../../untils/index";
@ -73,6 +73,9 @@ const mapDispatchToProps = dispatch => {
        setNavigatorLoadingStatus: status => {
            dispatch(setNavigatorLoadingStatus(status));
        },
+        setSelectedTarget: targets => {
+            dispatch(setSelectedTarget(targets));
+        },
        navitateTo: path => {
            dispatch(navitateTo(path));
        },
@ -216,6 +219,7 @@ class ContextMenuCompoment extends Component {
                );
                return;
            case "video":
+                this.props.setSelectedTarget([]);
                if (pathHelper.isSharePage(this.props.location.pathname)) {
                    window.location.href =
                        "/Viewer/Video?share=true&shareKey=" +
@ -224,8 +228,7 @@ class ContextMenuCompoment extends Component {
                        encodeURIComponent(previewPath);
                    return;
                }
-                window.location.href =
-                    "/Viewer/Video?&path=" + encodeURIComponent(previewPath);
+                this.props.history.push("/video" + previewPath);
                return;
            case "edit":
                if (pathHelper.isSharePage(this.props.location.pathname)) {
--- a/src/component/FileManager/ImgPreview.js
+++ b/src/component/FileManager/ImgPreview.js
@ -47,7 +47,7 @@ class ImgPreviewCompoment extends Component {
                        title: value.name,
                        src:
                            baseURL +
-                            "/file/redirect" +
+                            "/file/preview" +
                            (value.path === "/"
                                ? value.path + value.name
                                : value.path + "/" + value.name)
--- a/src/component/FileManager/Modals.js
+++ b/src/component/FileManager/Modals.js
@ -11,7 +11,7 @@ import {
 } from "../../actions/index";
 import PathSelector from "./PathSelector";
 import axios from "axios";
-import API from "../../middleware/Api";
+import API, {baseURL} from "../../middleware/Api";
 import {
    withStyles,
    Button,
@ -990,16 +990,13 @@ class ModalsCompoment extends Component {
                                <audio
                                    controls
                                    src={
-                                        previewApi +
-                                        "?action=preview&path=" +
+                                        baseURL +
+                                        "/file/preview" +
                                        (this.props.selected[0].path === "/"
-                                            ? this.props.selected[0].path +
-                                              this.props.selected[0].name
-                                            : this.props.selected[0].path +
-                                              "/" +
-                                              this.props.selected[0].name)
+                                            ? this.props.selected[0].path + this.props.selected[0].name
+                                            : this.props.selected[0].path + "/" + this.props.selected[0].name)
                                    }
-                                ></audio>
+                                />
                            )}
                        </DialogContentText>
                    </DialogContent>
--- a/src/component/FileManager/ObjectIcon.js
+++ b/src/component/FileManager/ObjectIcon.js
@ -24,8 +24,9 @@ import { useDrag } from "react-dnd";
 import { getEmptyImage } from 'react-dnd-html5-backend'
 import DropWarpper from "./DnD/DropWarpper"
 import {
+    useHistory,
    useLocation
-  } from "react-router-dom";
+} from "react-router-dom";
 import ClickAwayListener from "@material-ui/core/ClickAwayListener";

 const useStyles = makeStyles(theme => ({
@ -47,6 +48,7 @@ export default function ObjectIcon(props) {
        state => state.viewUpdate.explorerViewMethod
    );
    let location = useLocation();
+    let history = useHistory();

    const dispatch = useDispatch();
    const ContextMenu = useCallback(
@ -171,16 +173,11 @@ export default function ObjectIcon(props) {
                );
                return;
            case "video":
-                if (window.isSharePage) {
-                    window.location.href =
-                        "/Viewer/Video?share=true&shareKey=" +
-                        window.shareInfo.shareId +
-                        "&path=" +
-                        encodeURIComponent(previewPath);
+                SetSelectedTarget([]);
+                if (statusHelper.isSharePage(location.pathname)) {
                    return;
                }
-                window.location.href =
-                    "/Viewer/Video?path=" + encodeURIComponent(previewPath);
+                history.push("/video" + previewPath);
                return;
            case "edit":
                if (window.isSharePage) {
--- a/src/component/Login/LoginForm.js
+++ b/src/component/Login/LoginForm.js
@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
 import { makeStyles } from "@material-ui/core";
 import { toggleSnackbar, applyThemes } from "../../actions/index";
-import Placeholder from "../Placeholder/captcha";
+import Placeholder from "../Placeholder/Captcha";
 import { useHistory } from "react-router-dom";
 import API from "../../middleware/Api";
 import Auth from "../../middleware/Auth";
--- a/src/component/Navbar/Navbar.js
+++ b/src/component/Navbar/Navbar.js
@ -363,16 +363,11 @@ class NavbarCompoment extends Component {
                );
                return;
            case "video":
+                this.props.setSelectedTarget([]);
                if (pathHelper.isSharePage(this.props.location.pathname)) {
-                    window.location.href =
-                        "/Viewer/Video?share=true&shareKey=" +
-                        window.shareInfo.shareId +
-                        "&path=" +
-                        encodeURIComponent(previewPath);
                    return;
                }
-                window.location.href =
-                    "/Viewer/Video?path=" + encodeURIComponent(previewPath);
+                this.props.history.push("/video" + previewPath);
                return;
            case "edit":
                if (pathHelper.isSharePage(this.props.location.pathname)) {
--- a/src/component/Navbar/StorageBar.js
+++ b/src/component/Navbar/StorageBar.js
@ -1,151 +1,219 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types';
-import StorageIcon from '@material-ui/icons/Storage'
-import { connect } from 'react-redux'
-import API from "../../middleware/Api"
-import {sizeToString} from "../../untils"
-import {
-    toggleSnackbar,
-}from "../../actions"
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import StorageIcon from "@material-ui/icons/Storage";
+import { connect } from "react-redux";
+import API from "../../middleware/Api";
+import { sizeToString } from "../../untils";
+import { toggleSnackbar } from "../../actions";

-import { withStyles, LinearProgress, Typography, Divider, Tooltip } from '@material-ui/core';
+import {
+    withStyles,
+    LinearProgress,
+    Typography,
+    Divider,
+    Tooltip
+} from "@material-ui/core";

 const mapStateToProps = state => {
    return {
-        refresh:state.viewUpdate.storageRefresh,
-    }
-}
+        refresh: state.viewUpdate.storageRefresh
+    };
+};

 const mapDispatchToProps = dispatch => {
    return {
-        toggleSnackbar:(vertical,horizontal,msg,color)=>{
-            dispatch(toggleSnackbar(vertical,horizontal,msg,color))
-        },
-    }
-}
+        toggleSnackbar: (vertical, horizontal, msg, color) => {
+            dispatch(toggleSnackbar(vertical, horizontal, msg, color));
+        }
+    };
+};

 const styles = theme => ({
-    iconFix:{
+    iconFix: {
        marginLeft: "32px",
        marginRight: "17px",
        color: theme.palette.text.secondary,
-        marginTop: "2px",
+        marginTop: "2px"
    },
-    textFix:{
-        "padding":" 0 0 0 16px",
+    textFix: {
+        padding: " 0 0 0 16px"
    },
-    storageContainer:{
-        display:"flex",
+    storageContainer: {
+        display: "flex",
        marginTop: "15px",
-   
-        marginBottom: "20px",
+
+        marginBottom: "20px"
    },
-    detail:{
+    detail: {
        width: "100%",
-        marginRight: "35px",
+        marginRight: "35px"
    },
-    info:{
-        width:"131px",
-        marginTop:"5px",
+    info: {
+        width: "131px",
+        marginTop: "5px"
    },
-    bar:{
-        marginTop: "5px",
+    bar: {
+        marginTop: "5px"
    },
-    stickFooter:{
+    stickFooter: {
        bottom: "0px",
        position: "fixed",
-        backgroundColor:theme.palette.background.paper,
-    },
-})
+        backgroundColor: theme.palette.background.paper
+    }
+});

 class StorageBarCompoment extends Component {
-
-    state={
-        percent:0,
-        used:null,
-        total:null,
-    }
+    state = {
+        percent: 0,
+        used: null,
+        total: null
+    };

    firstLoad = true;

-    componentDidMount = ()=>{
-        if(this.firstLoad){
+    componentDidMount = () => {
+        if (this.firstLoad) {
            this.firstLoad = !this.firstLoad;
            this.updateStatus();
        }
-        
-    }
+    };

-    componentWillReceiveProps = (nextProps)=>{
-        if(this.props.refresh!==nextProps.refresh){
+    componentWillReceiveProps = nextProps => {
+        if (this.props.refresh !== nextProps.refresh) {
            this.updateStatus();
        }
-    }
+    };

-    updateStatus = ()=>{
+    updateStatus = () => {
        let percent = 0;
-        API.get('/user/storage')
-        .then( (response)=> {
-            if((response.data.used / response.data.total)>=100){
-                percent = 100;
-                this.props.toggleSnackbar("top","right","您的已用容量已超过容量配额，请尽快删除多余文件或购买容量","warning");
-            }else{
-                percent = (response.data.used / response.data.total);
-            }
-            this.setState({
-                percent:percent,
-                used:sizeToString(response.data.used),
-                total:sizeToString(response.data.total),
-            });
-        })
-        .catch((error) =>{
-            
-        });
-    }
+        API.get("/user/storage")
+            .then(response => {
+                if (response.data.used / response.data.total >= 100) {
+                    percent = 100;
+                    this.props.toggleSnackbar(
+                        "top",
+                        "right",
+                        "您的已用容量已超过容量配额，请尽快删除多余文件或购买容量",
+                        "warning"
+                    );
+                } else {
+                    percent = response.data.used / response.data.total * 100;
+                }
+                this.setState({
+                    percent: percent,
+                    used: sizeToString(response.data.used),
+                    total: sizeToString(response.data.total)
+                });
+            })
+            .catch(error => {});
+    };

    render() {
-        const { classes} = this.props;
-        if(!window.isMobile){
+        const { classes } = this.props;
+        if (!window.isMobile) {
            return (
-                <div className={classes.stickFooter}><Divider/>  
-            <div className={classes.storageContainer}>
-                <StorageIcon className={classes.iconFix} />    
-                <div className={classes.detail}>
-                    存储空间
-                    <LinearProgress className={classes.bar} color="secondary" variant="determinate" value={this.state.percent} />
-                    <div className={classes.info}>
-                    <Tooltip title={"已使用"+((this.state.used===null)?" -- ":this.state.used)+"，共"+((this.state.total===null)?" -- ":this.state.total)} placement="top">
-                    <Typography variant="caption" noWrap color="textSecondary">已使用{(this.state.used===null)?" -- ":this.state.used}，共{(this.state.total===null)?" -- ":this.state.total}</Typography></Tooltip>
+                <div className={classes.stickFooter}>
+                    <Divider />
+                    <div className={classes.storageContainer}>
+                        <StorageIcon className={classes.iconFix} />
+                        <div className={classes.detail}>
+                            存储空间
+                            <LinearProgress
+                                className={classes.bar}
+                                color="secondary"
+                                variant="determinate"
+                                value={this.state.percent}
+                            />
+                            <div className={classes.info}>
+                                <Tooltip
+                                    title={
+                                        "已使用" +
+                                        (this.state.used === null
+                                            ? " -- "
+                                            : this.state.used) +
+                                        "，共" +
+                                        (this.state.total === null
+                                            ? " -- "
+                                            : this.state.total)
+                                    }
+                                    placement="top"
+                                >
+                                    <Typography
+                                        variant="caption"
+                                        noWrap
+                                        color="textSecondary"
+                                    >
+                                        已使用
+                                        {this.state.used === null
+                                            ? " -- "
+                                            : this.state.used}
+                                        ，共
+                                        {this.state.total === null
+                                            ? " -- "
+                                            : this.state.total}
+                                    </Typography>
+                                </Tooltip>
+                            </div>
+                        </div>
                    </div>
                </div>
-            </div>
-                  </div>
            );
-        }else{
+        } else {
            return (
                <div className={classes.storageContainer}>
-                <StorageIcon className={classes.iconFix} />    
-                <div className={classes.detail}>
-                    存储空间
-                    <LinearProgress className={classes.bar} color="secondary" variant="determinate" value={this.state.percent} />
-                    <div className={classes.info}>
-                    <Tooltip title={"已使用"+((this.state.used===null)?" -- ":this.state.used)+"，共"+((this.state.total===null)?" -- ":this.state.total)} placement="top">
-                    <Typography variant="caption" noWrap color="textSecondary">已使用{(this.state.used===null)?" -- ":this.state.used}，共{(this.state.total===null)?" -- ":this.state.total}</Typography></Tooltip>
+                    <StorageIcon className={classes.iconFix} />
+                    <div className={classes.detail}>
+                        存储空间
+                        <LinearProgress
+                            className={classes.bar}
+                            color="secondary"
+                            variant="determinate"
+                            value={this.state.percent}
+                        />
+                        <div className={classes.info}>
+                            <Tooltip
+                                title={
+                                    "已使用" +
+                                    (this.state.used === null
+                                        ? " -- "
+                                        : this.state.used) +
+                                    "，共" +
+                                    (this.state.total === null
+                                        ? " -- "
+                                        : this.state.total)
+                                }
+                                placement="top"
+                            >
+                                <Typography
+                                    variant="caption"
+                                    noWrap
+                                    color="textSecondary"
+                                >
+                                    已使用
+                                    {this.state.used === null
+                                        ? " -- "
+                                        : this.state.used}
+                                    ，共
+                                    {this.state.total === null
+                                        ? " -- "
+                                        : this.state.total}
+                                </Typography>
+                            </Tooltip>
+                        </div>
                    </div>
                </div>
-            </div>
            );
        }
    }
 }

 StorageBarCompoment.propTypes = {
-    classes: PropTypes.object.isRequired,
+    classes: PropTypes.object.isRequired
 };

 const StorageBar = connect(
    mapStateToProps,
    mapDispatchToProps
-)( withStyles(styles)(StorageBarCompoment))
+)(withStyles(styles)(StorageBarCompoment));

-export default StorageBar
+export default StorageBar;
--- a/src/component/Placeholder/Captcha.js
+++ b/src/component/Placeholder/Captcha.js
--- a/src/component/Placeholder/PageLoading.js
+++ b/src/component/Placeholder/PageLoading.js
@ -0,0 +1,20 @@
+import React from "react"
+import ContentLoader from "react-content-loader"
+
+const MyLoader = () => (
+    <ContentLoader
+        height={160}
+        width={400}
+        speed={2}
+        primaryColor="#f3f3f3"
+        secondaryColor="#e4e4e4"
+    >
+        <rect x="4" y="4" rx="7" ry="7" width="392" height="116" />
+    </ContentLoader>
+)
+
+function PageLoading (){
+    return (<MyLoader />)
+}
+
+export default PageLoading
--- a/src/component/Viewer/Markdown.js
+++ b/src/component/Viewer/Markdown.js
--- a/src/component/Viewer/Video.js
+++ b/src/component/Viewer/Video.js
@ -0,0 +1,44 @@
+import React from "react";
+import DPlayer from "react-dplayer";
+import { Paper } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import { useRouteMatch } from "react-router";
+import { getBaseURL } from "../../middleware/Api";
+import Typography from "@material-ui/core/Typography";
+
+const useStyles = makeStyles(theme => ({
+    layout: {
+        width: "auto",
+        marginTop: "30px",
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
+            width: 1100,
+            marginLeft: "auto",
+            marginRight: "auto"
+        },
+        marginBottom:50,
+    },
+    player: {
+        borderRadius: "4px"
+    }
+}));
+
+export default function VideoViewer(props) {
+    const math = useRouteMatch();
+
+
+    const classes = useStyles();
+    return (
+        <div className={classes.layout}>
+            <Paper className={classes.root} elevation={1}>
+                <DPlayer
+                    className={classes.player}
+                    options={{
+                        video: {url: getBaseURL() + "/file/preview/" + math.params[0]},
+                    }}
+                />
+            </Paper>
+        </div>
+    );
+}
--- a/src/component/Viewer/video.js
+++ b/src/component/Viewer/video.js
@ -1,44 +0,0 @@
-import React, { Component } from 'react'
-import DPlayer from "react-dplayer";
-
-
-import { Paper, withStyles } from '@material-ui/core';
-
-
-const styles = theme => ({
-    layout: {
-        width: 'auto',
-        marginTop:'30px',
-        marginLeft: theme.spacing(3),
-        marginRight: theme.spacing(3),
-        [theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
-          width: 1100,
-          marginLeft: 'auto',
-          marginRight: 'auto',
-        },
-      },
-      player:{
-        borderRadius: "4px", 
-      }
-})
-
-class VideoViewer extends Component {
-
-    render() {
-        const { classes } = this.props;
-        return (
-             <div className={classes.layout}>
-                <Paper className={classes.root} elevation={1}>
-                   
-                <DPlayer className={classes.player} video={{url: window.videoInfo.url}}/>
-                </Paper>
-             </div>
-        );
-    }
-
-}
-
-VideoViewer.propTypes = {
-};
-
-export default withStyles(styles)(VideoViewer);
--- a/src/middleware/Api.js
+++ b/src/middleware/Api.js
@ -1,10 +1,14 @@
 import axios from "axios";
 import Auth from "./Auth"

-export const baseURL = "/api/v3";
+export let baseURL = "/api/v3";
+
+export const getBaseURL = ()=>{
+    return baseURL;
+};

 const instance = axios.create({
-    baseURL: baseURL,
+    baseURL: getBaseURL(),
    withCredentials: true,
    crossDomain: true,
 });
--- a/src/pages/markdown.app.js
+++ b/src/pages/markdown.app.js
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';

 import Navbar from "../component/Navbar/Navbar.js"
 import AlertBar from "../component/Snackbar"
-import MarkdownViewer from "../component/Viewer/markdown"
+import MarkdownViewer from "../component/Viewer/Markdown"
 import { createMuiTheme } from '@material-ui/core/styles';

 import { CssBaseline, withStyles, MuiThemeProvider } from '@material-ui/core';
--- a/src/pages/video.app.js
+++ b/src/pages/video.app.js
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';

 import Navbar from "../component/Navbar/Navbar.js"
 import AlertBar from "../component/Snackbar"
-import VideoViewer from "../component/Viewer/video"
+import VideoViewer from "../component/Viewer/Video"
 import { createMuiTheme } from '@material-ui/core/styles';

 import { CssBaseline, withStyles, MuiThemeProvider } from '@material-ui/core';
--- a/yarn.lock
+++ b/yarn.lock
@ -1333,6 +1333,11 @@
  dependencies:
    "@babel/types" "^7.3.0"

+"@types/dplayer@^1.25.0":
+  version "1.25.0"
+  resolved "https://registry.yarnpkg.com/@types/dplayer/-/dplayer-1.25.0.tgz#54b4ea84c1aa05cca4803088b74c2c3e273cac6b"
+  integrity sha512-QjWZ+ucauVn7y/7dkHc29kh2u/zs9S3OXILmIR/zQBDFx5rfxAUNa24LYgEuiuIrO+KAHyOTiSDYl1WE2hElnw==
+
 "@types/eslint-visitor-keys@^1.0.0":
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@ -1965,6 +1970,14 @@ aws4@^1.8.0:
  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
  integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==

+axios@0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
+  integrity sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=
+  dependencies:
+    follow-redirects "^1.3.0"
+    is-buffer "^1.1.5"
+
 axios@^0.19.0:
  version "0.19.0"
  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
@ -2117,7 +2130,7 @@ babel-preset-react-app@^9.0.2:
    babel-plugin-macros "2.6.1"
    babel-plugin-transform-react-remove-prop-types "0.4.24"

-babel-runtime@^6.26.0:
+babel-runtime@^6.23.0, babel-runtime@^6.26.0:
  version "6.26.0"
  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@ -2135,6 +2148,11 @@ balanced-match@^1.0.0:
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=

+balloon-css@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/balloon-css/-/balloon-css-0.5.2.tgz#9e2163565a136c9d4aa20e8400772ce3b738d3ff"
+  integrity sha512-zheJpzwyNrG4t39vusA67v3BYg1HTVXOF8cErPEHzWK88PEOFwgo6Ea9VHOgOWNMgeuOtFVtB73NE2NWl9uDyQ==
+
 base64-js@^1.0.2:
  version "1.3.1"
  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
@ -3265,7 +3283,7 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
  dependencies:
    ms "^2.1.1"

-decamelize@^1.2.0:
+decamelize@^1.1.1, decamelize@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
@ -3564,6 +3582,17 @@ dotenv@6.2.0:
  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
  integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==

+dplayer@^1.25.0:
+  version "1.25.0"
+  resolved "https://registry.yarnpkg.com/dplayer/-/dplayer-1.25.0.tgz#10afb3416b42125b8926d9b157aae594c84945fb"
+  integrity sha512-TG2IKT4IXH5trE3DKeeOqmGlewheHT5R30ya4jhMrjysc1rrCPMJYnmsBfiTS8h6613YZeriFIDHZHEEi/rs3Q==
+  dependencies:
+    axios "0.18.0"
+    balloon-css "^0.5.0"
+    mini-css-extract-plugin "0.4.0"
+    promise-polyfill "8.0.0"
+    webpack-cli "3.0.4"
+
 duplexer@^0.1.1:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
@ -3639,6 +3668,15 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
  dependencies:
    once "^1.4.0"

+enhanced-resolve@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz#2937e2b8066cd0fe7ce0990a98f0d71a35189f66"
+  integrity sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.5.0"
+    tapable "^1.0.0"
+
 enhanced-resolve@^4.1.0:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
@ -4321,7 +4359,7 @@ follow-redirects@1.5.10:
  dependencies:
    debug "=3.1.0"

-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.3.0:
  version "1.9.0"
  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.9.0.tgz#8d5bcdc65b7108fe1508649c79c12d732dcedb4f"
  integrity sha512-CRcPzsSIbXyVDl0QI01muNDu69S8trU4jArW9LpOt2WtC6LyUJetcIrmfHsRBx7/Jb6GHJUiuqyYxPooFfNt6A==
@ -4550,6 +4588,11 @@ glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
    once "^1.3.0"
    path-is-absolute "^1.0.0"

+global-modules-path@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/global-modules-path/-/global-modules-path-2.3.1.tgz#e541f4c800a1a8514a990477b267ac67525b9931"
+  integrity sha512-y+shkf4InI7mPRHSo2b/k6ix6+NLDtyccYv86whhxrSGX9wjPX1VMITmrDbE1eh7zkzhiWtW2sHklJYoQ62Cxg==
+
 global-modules@2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
@ -5023,6 +5066,14 @@ import-from@^2.1.0:
  dependencies:
    resolve-from "^3.0.0"

+import-local@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-1.0.0.tgz#5e4ffdc03f4fe6c009c6729beb29631c2f8227bc"
+  integrity sha512-vAaZHieK9qjGo58agRBg+bhHX3hoTZU/Oa3GESWLz7t1U62fk63aHuDJJEteXoDeTCcPmUT+z38gkHPZkkmpmQ==
+  dependencies:
+    pkg-dir "^2.0.0"
+    resolve-cwd "^2.0.0"
+
 import-local@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
@ -5093,7 +5144,7 @@ inquirer@6.5.0:
    strip-ansi "^5.1.0"
    through "^2.3.6"

-inquirer@^6.4.1:
+inquirer@^6.0.0, inquirer@^6.4.1:
  version "6.5.2"
  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.2.tgz#ad50942375d036d327ff528c08bd5fab089928ca"
  integrity sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==
@ -5120,6 +5171,11 @@ internal-ip@^4.2.0:
    default-gateway "^4.2.0"
    ipaddr.js "^1.9.0"

+interpret@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
+  integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
+
 invariant@^2.2.2, invariant@^2.2.4:
  version "2.2.4"
  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@ -6449,6 +6505,14 @@ memory-fs@^0.4.0, memory-fs@^0.4.1:
    errno "^0.1.3"
    readable-stream "^2.0.1"

+memory-fs@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
+  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
 merge-deep@^3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2"
@ -6564,6 +6628,14 @@ mini-create-react-context@^0.3.0:
    gud "^1.0.0"
    tiny-warning "^1.0.2"

+mini-css-extract-plugin@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.0.tgz#ff3bf08bee96e618e177c16ca6131bfecef707f9"
+  integrity sha512-2Zik6PhUZ/MbiboG6SDS9UTPL4XXy4qnyGjSdCIWRrr8xb6PwLtHE+AYOjkXJWdF0OG8vo/yrJ8CgS5WbMpzIg==
+  dependencies:
+    loader-utils "^1.1.0"
+    webpack-sources "^1.1.0"
+
 mini-css-extract-plugin@0.8.0:
  version "0.8.0"
  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz#81d41ec4fe58c713a96ad7c723cdb2d0bd4d70e1"
@ -7072,6 +7144,13 @@ obuf@^1.0.0, obuf@^1.1.2:
  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
  integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==

+omit.js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/omit.js/-/omit.js-1.0.2.tgz#91a14f0eba84066dfa015bf30e474c47f30bc858"
+  integrity sha512-/QPc6G2NS+8d4L/cQhbk6Yit1WTB6Us2g84A7A/1+w9d/eRGHyEqC5kkQtHVoHZ5NFWGG7tUGgrhVZwgZanKrQ==
+  dependencies:
+    babel-runtime "^6.23.0"
+
 on-finished@~2.3.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@ -7157,7 +7236,7 @@ os-homedir@^1.0.0:
  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=

-os-locale@^3.0.0:
+os-locale@^3.0.0, os-locale@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
  integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==
@ -8224,6 +8303,11 @@ promise-inflight@^1.0.1:
  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=

+promise-polyfill@8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.0.0.tgz#b47c7fc74052cc5b2132b703cca144f1a5eb56ef"
+  integrity sha512-QGmPnw2hDEaRS6freHynJ7nfS1nDg0/P0c/CGglA43utoJjYQMiY9ojEpK0HaJ4wbUztdmwqQRlEfGWdsEQ5uQ==
+
 promise@8.0.3:
  version "8.0.3"
  resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.3.tgz#f592e099c6cddc000d538ee7283bb190452b0bf6"
@ -8494,6 +8578,17 @@ react-dom@^16.12.0:
    prop-types "^15.6.2"
    scheduler "^0.18.0"

+react-dplayer@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/react-dplayer/-/react-dplayer-0.3.3.tgz#972b73d47e4300ad856d3f456114ba56b8332d8a"
+  integrity sha512-aDMdYljS7FJEKKWAELAofwqQWO3XJQWsKvC2DNB+mCi1fO0vU60GkZ9/u7wa74bUYTWYh3vrS1BC+/9vC7cMwA==
+  dependencies:
+    "@types/dplayer" "^1.25.0"
+    classnames "^2.2.6"
+    dplayer "^1.25.0"
+    omit.js "^1.0.2"
+    prop-types "^15.6.2"
+
 react-error-overlay@^6.0.3:
  version "6.0.3"
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.3.tgz#c378c4b0a21e88b2e159a3e62b2f531fd63bf60d"
@ -9750,7 +9845,7 @@ supports-color@^2.0.0:
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=

-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.4.0:
  version "5.5.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@ -10251,7 +10346,7 @@ uuid@^3.0.1, uuid@^3.3.2:
  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
  integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==

-v8-compile-cache@^2.0.3:
+v8-compile-cache@^2.0.0, v8-compile-cache@^2.0.3:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
  integrity sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==
@ -10344,6 +10439,23 @@ webidl-conversions@^4.0.2:
  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
  integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==

+webpack-cli@3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.0.4.tgz#55d6ad2cdd608de8c0f757dde5bc4bf5bd2dec68"
+  integrity sha512-r5R0hMck4GxUS6a3TXClwi1KhQfnHZRtIfXqsSytQZG4kawKMhTtd5//uNZGoGks/h61Zv5jMnR6jwx15Qf8dA==
+  dependencies:
+    chalk "^2.4.1"
+    cross-spawn "^6.0.5"
+    enhanced-resolve "^4.0.0"
+    global-modules-path "^2.1.0"
+    import-local "^1.0.0"
+    inquirer "^6.0.0"
+    interpret "^1.1.0"
+    loader-utils "^1.1.0"
+    supports-color "^5.4.0"
+    v8-compile-cache "^2.0.0"
+    yargs "^11.1.0"
+
 webpack-dev-middleware@^3.5.1:
  version "3.7.2"
  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
@ -10745,6 +10857,11 @@ xtend@^4.0.0, xtend@~4.0.1:
  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==

+y18n@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+  integrity sha1-bRX7qITAhnnA136I53WegR4H+kE=
+
 "y18n@^3.2.1 || ^4.0.0", y18n@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
@ -10770,6 +10887,13 @@ yargs-parser@^13.1.1:
    camelcase "^5.0.0"
    decamelize "^1.2.0"

+yargs-parser@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-9.0.2.tgz#9ccf6a43460fe4ed40a9bb68f48d43b8a68cc077"
+  integrity sha1-nM9qQ0YP5O1Aqbto9I1DuKaMwHc=
+  dependencies:
+    camelcase "^4.1.0"
+
 yargs@12.0.2:
  version "12.0.2"
  resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.2.tgz#fe58234369392af33ecbef53819171eff0f5aadc"
@ -10788,6 +10912,24 @@ yargs@12.0.2:
    y18n "^3.2.1 || ^4.0.0"
    yargs-parser "^10.1.0"

+yargs@^11.1.0:
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.1.1.tgz#5052efe3446a4df5ed669c995886cc0f13702766"
+  integrity sha512-PRU7gJrJaXv3q3yQZ/+/X6KBswZiaQ+zOmdprZcouPYtQgvNU35i+68M4b1ZHLZtYFT5QObFLV+ZkmJYcwKdiw==
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^1.1.1"
+    find-up "^2.1.0"
+    get-caller-file "^1.0.1"
+    os-locale "^3.1.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^9.0.2"
+
 yargs@^13.3.0:
  version "13.3.0"
  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"