From 2b9fe4acc861557f98de15d6afa302c74469ee11 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Tue, 17 Jun 2025 18:16:16 +0800
Subject: [PATCH] [audio file view] fixup & improvements for
 inner/history/trash/shared file view (#7940)

---
 .../src/components/file-content-view/audio.js    | 15 ++++++++++++---
 frontend/src/css/audio-file-view.css             |  1 +
 frontend/src/css/file-view.css                   |  2 +-
 frontend/src/shared-file-view-audio.js           | 16 ++--------------
 4 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/file-content-view/audio.js b/frontend/src/components/file-content-view/audio.js
index f3fbcbe190..87bf4071c2 100644
--- a/frontend/src/components/file-content-view/audio.js
+++ b/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;
diff --git a/frontend/src/css/audio-file-view.css b/frontend/src/css/audio-file-view.css
index 74b0eb520a..00270df6ca 100644
--- a/frontend/src/css/audio-file-view.css
+++ b/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;
diff --git a/frontend/src/css/file-view.css b/frontend/src/css/file-view.css
index bd58221b83..9e7f993020 100644
--- a/frontend/src/css/file-view.css
+++ b/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;
diff --git a/frontend/src/shared-file-view-audio.js b/frontend/src/shared-file-view-audio.js
index 35709e50b4..b6f1d040c3 100644
--- a/frontend/src/shared-file-view-audio.js
+++ b/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>
     );
   }