rt/wrolpi
1
0
Fork 0
mirror of https://github.com/lrnselfreliance/wrolpi.git synced 2026-10-26 19:01:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding audio preview for audio files.

Browse source
This commit is contained in:
Roland 2023-02-22 11:48:25 -07:00
parent 977f42529f
commit 272eef400c
No known key found for this signature in database
GPG key ID: 9D6DBD3ACF11AB93
2 changed files with 54 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/src/components/Common.js
View file

@ -643,6 +643,8 @@ export function FileIcon({file, disabled = true, size = 'huge', ...props}) {
props['name'] = 'cube';
} else if (mimetype.startsWith('application/x-dosexec') || mimetype.startsWith('application/x-msi')) {
props['name'] = 'microsoft';
} else if (mimetype.startsWith('audio/')) {
props['name'] = 'file audio';
} else if (mimetype.startsWith('application/octet-stream')) {
if (lowerPath.endsWith('.stl')) {
props['name'] = 'cube';

63
app/src/components/FilePreview.js
View file

@ -1,6 +1,14 @@
import React from "react";
import _ from "lodash";
import {Button as SButton, Image, Modal, ModalActions, ModalContent} from "semantic-ui-react";
import {
Button as SButton,
Header as SHeader,
Image,
Modal,
ModalActions,
ModalContent,
ModalHeader
} from "semantic-ui-react";
function getMediaPathURL(path) {
return `/media/${encodeURIComponent(path['path'])}`;
@ -28,11 +36,16 @@ function getIframeModal(path) {
function getImageModal(path) {
const url = getMediaPathURL(path);
return <ModalContent>
<a href={url}>
<Image src={url}/>
</a>
</ModalContent>
return <React.Fragment>
<ModalHeader>
{path['path']}
</ModalHeader>
<ModalContent>
<a href={url}>
<Image src={url}/>
</a>
</ModalContent>
</React.Fragment>
}
function getEpubModal(path) {
@ -50,16 +63,42 @@ function getEpubModal(path) {
function getVideoModal(path) {
const url = getMediaPathURL(path);
return <ModalContent>
<video controls
const type = path['mimetype'] ? path['mimetype'] : 'video/mp4';
return <React.Fragment>
<ModalHeader>
{path['path']}
</ModalHeader>
<ModalContent>
<SHeader as='h5'>{path['path']}</SHeader>
<video controls
autoPlay={true}
id="player"
playsInline={true}
style={{maxWidth: '100%'}}
>
<source src={url} type={type}/>
</video>
</ModalContent>
</React.Fragment>
}
function getAudioModal(path) {
const url = getMediaPathURL(path);
const type = path['mimetype'] ? path['mimetype'] : 'audio/mpeg';
return <React.Fragment>
<ModalHeader>
{path['path']}
</ModalHeader><ModalContent>
<audio controls
autoPlay={true}
id="player"
playsInline={true}
style={{maxWidth: '100%'}}
style={{width: '90%', maxWidth: '95%'}}
>
<source src={url} type="video/mp4"/>
</video>
<source src={url} type={type}/>
</audio>
</ModalContent>
</React.Fragment>
}
export const FilePreviewContext = React.createContext({
@ -112,6 +151,8 @@ export function FilePreviewWrapper({children}) {
setModalContent(getIframeModal(previewFile), url, downloadURL);
} else if (mimetype.startsWith('video/')) {
setModalContent(getVideoModal(previewFile), url, downloadURL);
} else if (mimetype.startsWith('audio/')) {
setModalContent(getAudioModal(previewFile), url, downloadURL);
} else if (mimetype.startsWith('application/epub')) {
const viewerURL = getEpubViewerURL(previewFile);
setModalContent(getEpubModal(previewFile), viewerURL, downloadURL);