Looking good!

frontend/src/Call/CallPlayer.js

@@ -19,8 +19,10 @@ import {
   MessageHeader,
   Button,
   ButtonContent,
+  Checkbox,
   GridColumn, Grid,
   GridRow,
+  Form
 } from "semantic-ui-react";
 import "./CallPlayer.css";
 import queryString from '../query-string';
@@ -179,6 +181,10 @@ function CallPlayer(props) {
     setStatusVisible(false);
   }
 
+  let autoplayClassName = "button-item";
+  if (autoPlay) {
+    autoplayClassName += " active";
+  }
   return (
     <div ref={positionRef}>
       <Container className="main" >
@@ -207,24 +213,23 @@ function CallPlayer(props) {
 
       <Menu fixed="bottom" inverted vertical fluid>
         <div className="item-container">
-          <div className="button-item" active={autoPlay} onClick={() => handleAutoPlay(autoPlay)}><Icon name="level up" /><span className="desktop-only">Autoplay</span></div>
+          <div className={autoplayClassName}  onClick={() => handleAutoPlay(autoPlay)}><Icon name="level up" /><span className="desktop-only">Autoplay</span></div>
           <div className="mediaplayer-item">
             <MediaPlayer call={currentCall} playSilence={silenceCount} onEnded={callEnded} onPlayPause={handlePlayPause} />
           </div>
 
-          <div className="button-item"><SupportModal trigger={<Button color='grey' animated='fade' size={"small"}>
+          <div className="button-item desktop-only"><SupportModal trigger={<Button color='grey' animated='fade' size={"small"}>
             <ButtonContent visible color="red">
               <Icon name='heart' /> Donate
             </ButtonContent>
             <ButtonContent hidden>Thank You</ButtonContent>
           </Button>} /></div>
-          <div className="button-item">
+          <div className="button-item desktop-only" >
             <a href={callDownload}><Icon name="download" />Download</a>
           </div>
-          <div className="button-item">
+          <div className="button-item desktop-only">
-
             <a href={callLink}><Icon name="at" />Link</a>
-            </div>
+          </div>
 
         </div>
 

frontend/src/Call/components/MediaPlayer.css

@@ -20,23 +20,51 @@
   }
   
   .label-item {
-    padding: 5px;
+    padding: 9px 2px 5px 2px;
-    width: 150px;
+    width: 125px;
     color: white;
     font-weight: bold;
     text-align: center;
   }
   .mediaplayer-item {
-    padding: 5px;
+    
+    padding: 9px 5px 5px 5px;
     flex-grow: 1;
     color: white;
     font-weight: bold;
     text-align: center;
   }
   .button-item {
+    cursor:pointer;
+    display: flex;
+  justify-content: center;
+  align-items: center;
     padding: 5px;
     width: 100px;
     color: white;
     font-weight: bold;
     text-align: center;
   }
+  .active{
+background-color: #5c5c5c;
+  }
+
+.button-item a {
+
+    color: white;
+    text-align: center;
+}
+
+  @media only screen and (max-width: 767px) {
+
+    .button-item {
+
+        width: 50px;
+        color: white;
+
+      }
+      .label-item {
+        width: 50px;
+        color: white;
+      }
+}

frontend/src/Call/components/MediaPlayer.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import {
   Menu,
   Icon,
@@ -12,6 +12,9 @@ import {
 } from "semantic-ui-react";
 import ReactAudioPlayer from 'react-audio-player'
 import WavesurferPlayer from '@wavesurfer/react'
+import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.js';
+
+
 import { is } from "date-fns/locale";
 import "./MediaPlayer.css";
 
@@ -27,15 +30,29 @@ const MediaPlayer = (props) => {
   const [playTime, setPlayTime] = useState(0);
   const playSilence = props.playSilence;
   const parentHandlePlayPause = props.onPlayPause
+  const regionsPlugin = useMemo(() => RegionsPlugin.create(), []);
+  const plugins = useMemo(() => [regionsPlugin], [regionsPlugin]);
 
   const onReady = (ws) => {
     setWavesurfer(ws)
     setIsPlaying(false)
+    regionsPlugin.clearRegions();
+    if (call) {
+      call.srcList.forEach(src => {
+        regionsPlugin.addRegion({
+          start: src.pos,
+          color: "white",
+          drag: false,
+          resize: false
+        });
+      });
+    }
   }
 
   const onPlay = () => {
     setIsPlaying(true);
     parentHandlePlayPause(true);
+
   }
 
   const onPause = () => {
@@ -43,7 +60,7 @@ const MediaPlayer = (props) => {
     parentHandlePlayPause(false);
   }
   const onPlayPause = () => {
-  wavesurfer && wavesurfer.playPause()
+    wavesurfer && wavesurfer.playPause()
   }
 
   const updatePlayProgress = () => {
@@ -53,9 +70,9 @@ const MediaPlayer = (props) => {
         currentTime = wavesurfer.getCurrentTime(),
         remainingTime = totalTime - currentTime;
 
-        if (!isPlaying) {
+      if (!isPlaying) {
-          setIsPlaying(true);
+        setIsPlaying(true);
-        }
+      }
       //console.log("totalTime: " + totalTime + " currentTime: " + currentTime + " remainingTime: " + remainingTime);
 
 
@@ -82,20 +99,20 @@ const MediaPlayer = (props) => {
   return (
 
 
-         <div className="mediaplayer-container">
+    <div className="mediaplayer-container">
 
 
 
-         <div className="button-item">
+      <div className="button-item">
-          <Button onClick={onPlayPause} floated='left'>
+        <Button onClick={onPlayPause} floated='left'>
           {
-          isPlaying
+            isPlaying
-            ? (<Icon name="pause" />)
+              ? (<Icon name="pause" />)
-            : (<Icon name="play" />)
+              : (<Icon name="play" />)
-        }
+          }
-            </Button>
+        </Button>
-            </div> 
+      </div>
-            <div className="mediaplayer-item">
+      <div className="mediaplayer-item">
 
         <WavesurferPlayer
           autoplay={true}
@@ -108,23 +125,23 @@ const MediaPlayer = (props) => {
           onPause={onPause}
           onAudioprocess={updatePlayProgress}
           onFinish={props.onEnded}
-          
+          plugins={plugins}
         />
-        </div>
+      </div>
 
       <div className="label-item">
-      <LabelGroup size="small" >
+        <LabelGroup size="small" >
-        <Label color="black">
+          <Label color="black">
-          {playTime}
+            {playTime}
-          Sec
+            Sec
-        </Label>
+          </Label>
-        <Label color="black" className="desktop-only">
+          <Label color="black" className="desktop-only">
-          {sourceId}
+            {sourceId}
-        </Label>
+          </Label>
         </LabelGroup>
 
-        </div>
+      </div>
-        </div>
+    </div>
   )
   /*
     const audioRef = React.createRef();