mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-26 07:22:34 +00:00
[audio file view] fixup & improvements for inner/history/trash/shared file view (#7940)
This commit is contained in:
@@ -1,18 +1,25 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
import AudioPlayer from '../audio-player';
|
import AudioPlayer from '../audio-player';
|
||||||
|
|
||||||
import '../../css/audio-file-view.css';
|
import '../../css/audio-file-view.css';
|
||||||
|
|
||||||
|
const propTypes = {
|
||||||
|
src: PropTypes.string
|
||||||
|
};
|
||||||
|
|
||||||
const { rawPath } = window.app.pageOptions;
|
const { rawPath } = window.app.pageOptions;
|
||||||
|
|
||||||
class FileContent extends React.Component {
|
class AudioFileContent extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { src = rawPath } = this.props;
|
||||||
const videoJsOptions = {
|
const videoJsOptions = {
|
||||||
autoplay: false,
|
autoplay: false,
|
||||||
controls: true,
|
controls: true,
|
||||||
preload: 'auto',
|
preload: 'auto',
|
||||||
sources: [{
|
sources: [{
|
||||||
src: rawPath
|
src: src
|
||||||
}]
|
}]
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
@@ -23,4 +30,6 @@ class FileContent extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default FileContent;
|
AudioFileContent.propTypes = propTypes;
|
||||||
|
|
||||||
|
export default AudioFileContent;
|
||||||
|
@@ -1,4 +1,5 @@
|
|||||||
.audio-file-view .video-js {
|
.audio-file-view .video-js {
|
||||||
|
display: block; /* for the current video.js(v8.22.0) */
|
||||||
width: calc(100% - 40px);
|
width: calc(100% - 40px);
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
height: 3em;
|
height: 3em;
|
||||||
|
@@ -110,7 +110,7 @@ body {
|
|||||||
font-size: .8125rem;
|
font-size: .8125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-view-content {
|
.file-view-body .file-view-content {
|
||||||
padding: 30px 0;
|
padding: 30px 0;
|
||||||
background: #f4f4f4;
|
background: #f4f4f4;
|
||||||
border-right: 4px solid transparent;
|
border-right: 4px solid transparent;
|
||||||
|
@@ -2,9 +2,7 @@ import React from 'react';
|
|||||||
import { createRoot } from 'react-dom/client';
|
import { createRoot } from 'react-dom/client';
|
||||||
import SharedFileView from './components/shared-file-view/shared-file-view';
|
import SharedFileView from './components/shared-file-view/shared-file-view';
|
||||||
import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
|
import SharedFileViewTip from './components/shared-file-view/shared-file-view-tip';
|
||||||
import AudioPlayer from './components/audio-player';
|
import Audio from './components/file-content-view/audio';
|
||||||
|
|
||||||
import './css/audio-file-view.css';
|
|
||||||
|
|
||||||
const { rawPath, err } = window.shared.pageOptions;
|
const { rawPath, err } = window.shared.pageOptions;
|
||||||
|
|
||||||
@@ -20,19 +18,9 @@ class FileContent extends React.Component {
|
|||||||
return <SharedFileViewTip />;
|
return <SharedFileViewTip />;
|
||||||
}
|
}
|
||||||
|
|
||||||
const videoJsOptions = {
|
|
||||||
autoplay: false,
|
|
||||||
controls: true,
|
|
||||||
preload: 'auto',
|
|
||||||
sources: [{
|
|
||||||
src: rawPath
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
return (
|
return (
|
||||||
<div className="shared-file-view-body d-flex">
|
<div className="shared-file-view-body d-flex">
|
||||||
<div className="flex-1">
|
<Audio src={rawPath} />
|
||||||
<AudioPlayer { ...videoJsOptions } />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user