Mastodon
/
hyperspace-desktop-client-windows-linux-macos
mirror of https://github.com/hyperspacedev/hyperspace
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge PR #121 (fix HD-16) 

Add a basic audio player [HD-16]
This commit is contained in:
Marquis Kurt 2019-11-11 17:20:23 -05:00 committed by GitHub
parent a13e561f5b 2720d5e774
commit eeb3353a9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 193 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/Attachment/Attachment.tsx
View File

@ -7,6 +7,7 @@ import {
} from "@material-ui/core";
import { styles } from "./Attachment.styles";
import { Attachment } from "../../types/Attachment";
import AudioPlayer from "../AudioPlayer";
import SwipeableViews from "react-swipeable-views";
interface IAttachmentProps {
@ -77,14 +78,7 @@ class AttachmentComponent extends Component<
/>
);
case "audio":
return (
<audio
controls
autoPlay={false}
src={slide.url}
className={classes.mediaObject}
/>
);
return <AudioPlayer src={slide.url} id={slide.id} />;
case "gifv":
return (
<img
@ -115,33 +109,36 @@ class AttachmentComponent extends Component<
);
})}
</SwipeableViews>
<MobileStepper
steps={this.state.totalSteps}
position="static"
activeStep={this.state.currentStep}
className={classes.mobileStepper}
nextButton={
<Button
size="small"
onClick={() => this.moveForward()}
disabled={
this.state.currentStep ===
this.state.totalSteps - 1
}
>
Next
</Button>
}
backButton={
<Button
size="small"
onClick={() => this.moveBack()}
disabled={this.state.currentStep === 0}
>
Back
</Button>
}
/>
{this.state.totalSteps > 1 ? (
<MobileStepper
steps={this.state.totalSteps}
position="static"
activeStep={this.state.currentStep}
className={classes.mobileStepper}
nextButton={
<Button
size="small"
onClick={() => this.moveForward()}
disabled={
this.state.currentStep ===
this.state.totalSteps - 1
}
>
Next
</Button>
}
backButton={
<Button
size="small"
onClick={() => this.moveBack()}
disabled={this.state.currentStep === 0}
>
Back
</Button>
}
/>
) : null}
<br />
<Typography variant="caption">
{mediaItem.description
? mediaItem.description

17
src/components/AudioPlayer/AudioPlayer.styles.tsx Normal file
View File

@ -0,0 +1,17 @@
import { Theme, createStyles } from "@material-ui/core";
export const styles = (theme: Theme) =>
createStyles({
root: {
backgroundColor: theme.palette.background.paper,
borderColor: theme.palette.action.disabledBackground,
borderWidth: 1,
borderStyle: "solid"
},
progressBar: {
width: "100%"
},
download: {
color: `${theme.palette.action.active} !important`
}
});

141
src/components/AudioPlayer/AudioPlayer.tsx Normal file
View File

@ -0,0 +1,141 @@
import React, { Component } from "react";
import {
Toolbar,
IconButton,
withStyles,
LinearProgress,
Tooltip
} from "@material-ui/core";
import { LinkableIconButton } from "../../interfaces/overrides";
import FastRewindIcon from "@material-ui/icons/FastRewind";
import FastForwardIcon from "@material-ui/icons/FastForward";
import PlayArrowIcon from "@material-ui/icons/PlayArrow";
import PauseIcon from "@material-ui/icons/Pause";
import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
import { styles } from "./AudioPlayer.styles";
interface IAudioPlayerProps {
src: string;
id: string;
classes: any;
}
interface IAudioPlayerState {
src: string;
elementId: string;
playing: boolean;
progress: number;
}
class AudioPlayer extends Component<IAudioPlayerProps, IAudioPlayerState> {
constructor(props: any) {
super(props);
this.state = {
src: this.props.src,
elementId: "audioplayer-" + this.props.id,
playing: false,
progress: 0
};
}
componentDidMount() {
let audioPlayerElement = this.getAudioPlayer();
if (audioPlayerElement) {
audioPlayerElement.ontimeupdate = () => {
let music = audioPlayerElement as HTMLAudioElement;
let progress = 100 * (music.currentTime / music.duration);
this.setState({ progress });
};
}
}
getAudioPlayer(): HTMLAudioElement | null {
return document.getElementById(
this.state.elementId
) as HTMLAudioElement | null;
}
toggleAudio() {
let audioPlayerElement = this.getAudioPlayer();
if (audioPlayerElement && this.state.playing) {
audioPlayerElement.pause();
this.setState({ playing: false });
} else if (audioPlayerElement) {
audioPlayerElement.play();
this.setState({ playing: true });
}
}
fastForward() {
let audioPlayerElement = this.getAudioPlayer();
if (audioPlayerElement) {
audioPlayerElement.currentTime += 15.0;
}
}
rewind() {
let audioPlayerElement = this.getAudioPlayer();
if (audioPlayerElement) {
audioPlayerElement.currentTime -= 15.0;
}
}
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<audio
id={this.state.elementId}
src={this.state.src}
autoPlay={false}
/>
<Toolbar>
<Tooltip title="Rewind by 15s">
<IconButton onClick={() => this.rewind()}>
<FastRewindIcon />
</IconButton>
</Tooltip>
<Tooltip title={this.state.playing ? "Pause" : "Play"}>
<IconButton onClick={() => this.toggleAudio()}>
{this.state.playing ? (
<PauseIcon />
) : (
<PlayArrowIcon />
)}
</IconButton>
</Tooltip>
<Tooltip title="Fast-forward by 15s">
<IconButton onClick={() => this.fastForward()}>
<FastForwardIcon />
</IconButton>
</Tooltip>
<LinearProgress
className={classes.progressBar}
variant="determinate"
color={"secondary"}
value={this.state.progress}
/>
<Tooltip title="Download">
<IconButton
href={this.state.src}
target="_blank"
rel="noopener noreferrer nofollower"
className={classes.download}
>
<CloudDownloadIcon />
</IconButton>
</Tooltip>
</Toolbar>
</div>
);
}
}
export default withStyles(styles)(AudioPlayer);

3
src/components/AudioPlayer/index.tsx Normal file
View File

@ -0,0 +1,3 @@
import AudioPlayer from "./AudioPlayer";
export default AudioPlayer;