player with icons

vocodes/src/App.scss

@@ -230,6 +230,11 @@ nav {
   text-align: center;
 }
 
+.player-buttons {
+  text-align: center;
+  margin: auto;
+}
+
 
 /** RESPONSIVENESS **/
 

vocodes/src/v2/view/_icons/ArrowRightIcon.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
+
+export function ArrowRightIcon() {
+  return (
+      <FontAwesomeIcon icon={faArrowRight} />
+  );
+}
+

vocodes/src/v2/view/_icons/PauseIcon.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPause } from '@fortawesome/free-solid-svg-icons'
+
+export function PauseIcon() {
+  return (
+      <FontAwesomeIcon icon={faPause} />
+  );
+}
+

vocodes/src/v2/view/_icons/PlayIcon.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlay } from '@fortawesome/free-solid-svg-icons'
+
+export function PlayIcon() {
+  return (
+      <FontAwesomeIcon icon={faPlay} />
+  );
+}
+

vocodes/src/v2/view/_icons/RepeatIcon.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faRetweet } from '@fortawesome/free-solid-svg-icons'
+
+export function RepeatIcon() {
+  return (
+      <FontAwesomeIcon icon={faRetweet} />
+  );
+}
+

vocodes/src/v2/view/tts/tts_result_view/TtsResultAudioPlayerFc.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import WaveSurfer from 'wavesurfer.js';
 import { useEffect, useState } from 'react';
 import { BucketConfig } from '../../../../common/BucketConfig';
 import { TtsResult } from '../../../api/tts/GetTtsResult';
+import { PlayIcon } from '../../_icons/PlayIcon';
+import { PauseIcon } from '../../_icons/PauseIcon';
+import { RepeatIcon } from '../../_icons/RepeatIcon';
+import { ArrowRightIcon } from '../../_icons/ArrowRightIcon';
 
 interface Props {
   ttsResult: TtsResult,
@@ -10,12 +14,26 @@ interface Props {
 
 function TtsResultAudioPlayerFc(props: Props) {
   let [isPlaying, setIsPlaying] = useState(false);
+  let [isRepeating, setIsRepeating] = useState(false);
   let [waveSurfer, setWaveSurfer] = useState<WaveSurfer|null>(null);
 
   useEffect(() => {
-    setWaveSurfer(WaveSurfer.create({
-      container: '#waveform'
-    }))
+    const wavesurferInstance = WaveSurfer.create({
+      container: '#waveform', // Previousy I used 'this.ref.current' and React.createRef()
+      height: 200,
+      responsive: true,
+      waveColor: '#777',
+      progressColor:  '#ccc',
+      cursorColor: '#3273dc',
+      cursorWidth: 2,
+      normalize: false,
+    });
+
+    wavesurferInstance.on('pause', () => {
+      setIsPlaying(false);
+    })
+
+    setWaveSurfer(wavesurferInstance);
   }, [])
 
   useEffect(() => {
@@ -27,15 +45,48 @@ function TtsResultAudioPlayerFc(props: Props) {
 
   const togglePlayPause = () => {
     if (waveSurfer) {
-      waveSurfer.playPause()
+      waveSurfer.playPause();
       setIsPlaying(!isPlaying)
     }
   }
 
+  const toggleIsRepeating = () => {
+    setIsRepeating(!isRepeating)
+  }
+
+  const repeatCallback = useCallback((isRepeating) => {
+    if (isRepeating) {
+      waveSurfer!.play();
+    }
+  }, [waveSurfer]);
+
+
+  if (waveSurfer) {
+    waveSurfer.on('finish', () => repeatCallback(isRepeating));
+  }
+  
+  let playButtonText = <><PlayIcon /></>;
+  if (isPlaying) {
+    playButtonText = <><PauseIcon /></>;
+  }
+
+  let repeatButtonText = isRepeating ? <RepeatIcon /> : <ArrowRightIcon />;
+
   return (
     <div>
-      <div id="waveform" ></div>
-      <button onClick={() => togglePlayPause()}>{isPlaying ? '||' : '+'}</button>
+      <div id="waveform"></div>
+      <br />
+      <div className="columns is-centered">
+      <div className="buttons are-medium ">
+        <button 
+          className="button is-primary is-light"
+          onClick={() => togglePlayPause()}>{playButtonText}</button>
+
+        <button 
+          className="button is-info is-light"
+          onClick={() => toggleIsRepeating()}>{repeatButtonText}</button>
+      </div>
+      </div>
     </div>
   )
 }

vocodes/src/v2/view/tts/tts_result_view/TtsResultViewFc.tsx

@@ -176,17 +176,15 @@ function TtsResultViewFc(props: Props) {
       {subtitle}
 
       <TtsResultAudioPlayerFc ttsResult={ttsInferenceResult} />
-      
-      <hr />
 
+      {/* Without wavesurfer, 
       <audio
         controls
         src={audioLink}>
             Your browser does not support the
             <code>audio</code> element.
-      </audio>
+      </audio>*/}
 
-      <br />
       <br />
 
       <a className="button is-large is-primary is-fullwidth"