[audio file view] fixup & improvements for inner/history/trash/shared file view (#7940)

frontend/src/components/file-content-view/audio.js

@@ -1,18 +1,25 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import AudioPlayer from '../audio-player';
 
 import '../../css/audio-file-view.css';
 
+const propTypes = {
+  src: PropTypes.string
+};
+
 const { rawPath } = window.app.pageOptions;
 
-class FileContent extends React.Component {
+class AudioFileContent extends React.Component {
+
   render() {
+    const { src = rawPath } = this.props;
     const videoJsOptions = {
       autoplay: false,
       controls: true,
       preload: 'auto',
       sources: [{
-        src: rawPath
+        src: src
       }]
     };
     return (
@@ -23,4 +30,6 @@ class FileContent extends React.Component {
   }
 }
 
-export default FileContent;
+AudioFileContent.propTypes = propTypes;
+
+export default AudioFileContent;

frontend/src/css/audio-file-view.css

@@ -1,4 +1,5 @@
 .audio-file-view .video-js {
+  display: block; /* for the current video.js(v8.22.0) */
   width: calc(100% - 40px);
   max-width: 500px;
   height: 3em;

frontend/src/css/file-view.css

@@ -110,7 +110,7 @@ body {
   font-size: .8125rem;
 }
 
-.file-view-content {
+.file-view-body .file-view-content {
   padding: 30px 0;
   background: #f4f4f4;
   border-right: 4px solid transparent;

frontend/src/shared-file-view-audio.js

@@ -2,9 +2,7 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import SharedFileView from './components/shared-file-view/shared-file-view';
 import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
-import AudioPlayer from './components/audio-player';
-
-import './css/audio-file-view.css';
+import Audio from './components/file-content-view/audio';
 
 const { rawPath, err } = window.shared.pageOptions;
 
@@ -20,19 +18,9 @@ class FileContent extends React.Component {
       return <SharedFileViewTip />;
     }
 
-    const videoJsOptions = {
-      autoplay: false,
-      controls: true,
-      preload: 'auto',
-      sources: [{
-        src: rawPath
-      }]
-    };
     return (
       <div className="shared-file-view-body d-flex">
-        <div className="flex-1">
-          <AudioPlayer { ...videoJsOptions } />
-        </div>
+        <Audio src={rawPath} />
       </div>
     );
   }