preview audio/video

src/main/webapp/assets/css/rb-page.css

@@ -2382,12 +2382,12 @@ form {
 }
 
 .preview-modal .preview-body .unsupports {
-    max-width: 360px;
+    max-width: 400px;
     margin: 0 auto;
-    margin-top: 10%;
-    height: 91px;
+    margin-top: 15%;
     text-align: center;
-    padding-top: 12px;
+    padding: 30px;
+    height: auto;
 }
 
 .repeated-table {

src/main/webapp/assets/js/file-preview.jsx

@@ -3,6 +3,8 @@
 
 const TYPE_DOCS = ['.doc', '.docx', '.rtf', '.xls', '.xlsx', '.ppt', '.pptx', '.pdf']
 const TYPE_IMGS = ['.jpg', '.jpeg', '.gif', '.png', '.bmp']
+const TYPE_AUDIOS = ['.mp3', '.wav', '.ogg', '.acc']
+const TYPE_VIDEOS = ['.mp4', '.webm']
 
 // eslint-disable-next-line no-unused-vars
 class RbPreview extends React.Component {
@@ -17,14 +19,16 @@ class RbPreview extends React.Component {
     let downloadUrl = `${rb.baseUrl}/filex/download/${currentUrl}?attname=${fileName}`
 
     let previewContent = null
-    if (this.__isimg(currentUrl)) previewContent = this.renderImgs()
-    else if (this.__isdoc(currentUrl)) previewContent = this.renderDocs()
+    if (this.__isImg(currentUrl)) previewContent = this.renderImgs()
+    else if (this.__isDoc(currentUrl)) previewContent = this.renderDoc()
+    else if (this.__isAudio(currentUrl)) previewContent = this.renderAudio()
+    else if (this.__isVideo(currentUrl)) previewContent = this.renderVideo()
 
     // Has error
     if (this.state.errorMsg || !previewContent) {
       previewContent = <div className="unsupports shadow-lg rounded bg-light" onClick={this.__stopEvent}>
-        <h4>{this.state.errorMsg || '暂不支持此类型文件的预览'}</h4>
-        <a className="link" target="_blank" rel="noopener noreferrer" href={downloadUrl}>下载此文件</a>
+        <h4 className="mt-0">{this.state.errorMsg || '暂不支持此类型文件的预览'}</h4>
+        <a className="link" target="_blank" rel="noopener noreferrer" href={downloadUrl}>下载文件</a>
       </div>
     }
 
@@ -33,6 +37,7 @@ class RbPreview extends React.Component {
         <div className="preview-header">
           <div className="float-left"><h5>{fileName}</h5></div>
           <div className="float-right">
+            <a><i className="zmdi zmdi-share fs-16"></i></a>
             <a target="_blank" rel="noopener noreferrer" href={downloadUrl}><i className="zmdi zmdi-download"></i></a>
             <a onClick={this.hide}><i className="zmdi zmdi-close"></i></a>
           </div>
@@ -45,14 +50,6 @@ class RbPreview extends React.Component {
     </React.Fragment>
   }
 
-  renderDocs() {
-    return (<div className="container">
-      <div className="iframe" onClick={this.__stopEvent}>
-        <iframe frameBorder="0" scrolling="no" src={this.state.previewUrl || ''}></iframe>
-      </div>
-    </div>)
-  }
-
   renderImgs() {
     return (<React.Fragment>
       <div className="img-zoom">
@@ -69,13 +66,45 @@ class RbPreview extends React.Component {
     </React.Fragment>)
   }
 
+  renderDoc() {
+    return (<div className="container">
+      <div className="iframe" onClick={this.__stopEvent}>
+        <iframe frameBorder="0" scrolling="no" src={this.state.previewUrl || ''}></iframe>
+      </div>
+    </div>)
+  }
+
+  renderAudio() {
+    let url = this.props.urls[this.state.currentIndex]
+    url = `${rb.baseUrl}/filex/download/${url}`
+    return (<div className="container">
+      <div className="audio must-center" onClick={this.__stopEvent}>
+        <audio src={url} controls>
+          您的浏览器不支持此功能
+        </audio>
+      </div>
+    </div>)
+  }
+
+  renderVideo() {
+    let url = this.props.urls[this.state.currentIndex]
+    url = `${rb.baseUrl}/filex/download/${url}`
+    return (<div className="container">
+      <div className="video must-center" onClick={this.__stopEvent}>
+        <video src={url} height="500" controls>
+          您的浏览器不支持此功能
+        </video >
+      </div>
+    </div>)
+  }
+
   componentDidMount() {
     this.__modalOpen = $(document.body).hasClass('modal-open')
     if (!this.__modalOpen) $(document.body).addClass('modal-open')
     this.setState({ inLoad: false })
 
     let currentUrl = this.props.urls[this.state.currentIndex]
-    if (this.__isdoc(currentUrl)) {
+    if (this.__isDoc(currentUrl)) {
       $.get(`${rb.baseUrl}/filex/make-url?url=${currentUrl}`, (res) => {
         if (res.error_code > 0) {
           this.setState({ errorMsg: res.error_msg })
@@ -97,20 +126,26 @@ class RbPreview extends React.Component {
     if (!this.__modalOpen) $(document.body).removeClass('modal-open')
   }
 
-  __isimg(url) {
+  __isImg(url) {
+    return this.__isType(url, TYPE_IMGS)
+  }
+  __isDoc(url) {
+    return this.__isType(url, TYPE_DOCS)
+  }
+  __isAudio(url) {
+    return this.__isType(url, TYPE_AUDIOS)
+  }
+  __isVideo(url) {
+    return this.__isType(url, TYPE_VIDEOS)
+  }
+  __isType(url, types) {
     url = url.toLowerCase()
-    for (let i = 0; i < TYPE_IMGS.length; i++) {
-      if (url.endsWith(TYPE_IMGS[i])) return true
-    }
-    return false
-  }
-  __isdoc(url) {
-    url = url.toLowerCase()
-    for (let i = 0; i < TYPE_DOCS.length; i++) {
-      if (url.endsWith(TYPE_DOCS[i])) return true
+    for (let i = 0; i < types.length; i++) {
+      if (url.endsWith(types[i])) return true
     }
     return false
   }
+
   __previmg = (e) => {
     this.__stopEvent(e)
     let ci = this.state.currentIndex