diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js index 9ed91e3..b7401b3 100644 --- a/frontend/src/Call/CallPlayer.js +++ b/frontend/src/Call/CallPlayer.js @@ -18,7 +18,9 @@ import { Message, MessageHeader, Button, - ButtonContent + ButtonContent, + GridColumn, Grid, + GridRow, } from "semantic-ui-react"; import "./CallPlayer.css"; import queryString from '../query-string'; @@ -203,8 +205,31 @@ function CallPlayer(props) { - - handleAutoPlay(autoPlay)}>Autoplay + +
+
handleAutoPlay(autoPlay)}>Autoplay
+
+ +
+ +
+ + Donate + + + } />
+
+ Download +
+
+ + Link +
+ +
+ + + {/* handleAutoPlay(autoPlay)}>Autoplay @@ -215,7 +240,7 @@ function CallPlayer(props) { } /> Download Link - + */} diff --git a/frontend/src/Call/components/MediaPlayer.css b/frontend/src/Call/components/MediaPlayer.css new file mode 100644 index 0000000..d880b06 --- /dev/null +++ b/frontend/src/Call/components/MediaPlayer.css @@ -0,0 +1,42 @@ +.mediaplayer-container { + /* We first create a flex layout context */ + display: flex; + + + + padding: 0; + margin: 0; + list-style: none; + } + .item-container { + /* We first create a flex layout context */ + display: flex; + + + + padding: 0; + margin: 0; + list-style: none; + } + + .label-item { + padding: 5px; + width: 150px; + color: white; + font-weight: bold; + text-align: center; + } + .mediaplayer-item { + padding: 5px; + flex-grow: 1; + color: white; + font-weight: bold; + text-align: center; + } + .button-item { + padding: 5px; + width: 100px; + color: white; + font-weight: bold; + text-align: center; + } diff --git a/frontend/src/Call/components/MediaPlayer.js b/frontend/src/Call/components/MediaPlayer.js index e01682e..f88ed7d 100644 --- a/frontend/src/Call/components/MediaPlayer.js +++ b/frontend/src/Call/components/MediaPlayer.js @@ -3,116 +3,49 @@ import { Menu, Icon, Progress, - Label + Label, + Grid, + GridRow, + GridColumn, + LabelGroup, + Button } from "semantic-ui-react"; import ReactAudioPlayer from 'react-audio-player' import WavesurferPlayer from '@wavesurfer/react' import { is } from "date-fns/locale"; +import "./MediaPlayer.css"; const MediaPlayer = (props) => { - + const audioRef = React.createRef(); const call = props.call; const [sourceIndex, setSourceIndex] = useState(0); const [wavesurfer, setWavesurfer] = useState(null) const [isPlaying, setIsPlaying] = useState(false) const [playTime, setPlayTime] = useState(0); const playSilence = props.playSilence; - + const parentHandlePlayPause = props.onPlayPause const onReady = (ws) => { setWavesurfer(ws) setIsPlaying(false) } + const onPlay = () => { + setIsPlaying(true); + parentHandlePlayPause(true); + } + + const onPause = () => { + setIsPlaying(false); + parentHandlePlayPause(false); + } const onPlayPause = () => { - wavesurfer && wavesurfer.playPause() + wavesurfer && wavesurfer.playPause() } - useEffect(() => { - //const audio = audioRef.current.audioEl.current; - - setSourceIndex(0); - if ('mediaSession' in navigator) { - navigator.mediaSession.metadata = new MediaMetadata({ - title: "Waiting for Call...", - album: 'OpenMHz', - artwork: [ - { src: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' }, - { src: '/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' }, - { src: '/android-chrome-192x192.png', sizes: '512x512', type: 'image/png' }, - ] - }); - } - if (wavesurfer) { - var reader = new FileReader(); - - reader.onload = function (evt) { - // Create a Blob providing as first argument a typed array with the file buffer - var blob = new window.Blob([new Uint8Array(evt.target.result)]); - - // Load the blob into Wavesurfer - wavesurfer.loadBlob(blob); - }; - - reader.onerror = function (evt) { - console.error("An error ocurred reading the file: ", evt); - }; - - // Read File as an ArrayBuffer - reader.readAsArrayBuffer("data:audio/mpeg;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbAAqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV////////////////////////////////////////////AAAAAExhdmM1OC4xMwAAAAAAAAAAAAAAACQDkAAAAAAAAAGw9wrNaQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/+MYxAAAAANIAAAAAExBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxDsAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxHYAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV"); - - } - /*const playPromise = audio.play(); - - // In browsers that don’t yet support this functionality, - // playPromise won’t be defined. - if (playPromise !== undefined) { - playPromise.then(function () { - - }).catch(function (error) { - console.log("Automatic playback failed: " + error); - // Show a UI element to let the user manually start playback. - }); - } else { - audio.src = false; - }*/ - - }, [playSilence]); - - - - /* - useEffect(() => { - - const audio = audioRef.current.audioEl.current; - const onEnded = props.onEnded; - setSourceIndex(0); - if (call ) { - audio.src = call.url; - const playPromise = audio.play(); - - // In browsers that don’t yet support this functionality, - // playPromise won’t be defined. - if (playPromise !== undefined) { - playPromise.then(function () { - - }).catch(function (error) { - console.log("Automatic playback failed: " + error); - handlePause(); - //onEnded(); - // Show a UI element to let the user manually start playback. - }); - } else { - audio.src = false; - } - } - }, [call]);*/ - - - const updatePlayProgress = () => { if (wavesurfer && wavesurfer.isPlaying()) { @@ -148,32 +81,39 @@ const MediaPlayer = (props) => { return ( + +
+ - - - - { + +
+ +
+
+ setIsPlaying(true)} - onPause={() => setIsPlaying(false)} + onPlay={onPlay} + onPause={onPause} onAudioprocess={updatePlayProgress} onFinish={props.onEnded} /> - - +
+ +
+ - - +
+
) /* const audioRef = React.createRef();