Merge pull request #63 from contacto-io/CNTO-7149/recording-in-vc

Added the option to show Audio player speeds upfront

package.json

@@ -4,7 +4,7 @@
     "registry": "https://npm.pkg.github.com"
   },
   "repository": "git://github.com/contacto-io/contacto-console",
-  "version": "0.5.37",
+  "version": "0.5.40",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [

src/components/AudioPlayer/components/PlaybackSpeed.js

@@ -1,42 +1,23 @@
+/* eslint-disable no-unused-vars */
 import React, { useEffect, useState } from 'react'
-import { Popover } from 'antd'
-import { Button } from '../../Button/index'
+import { RenderButtons } from '../helpers/utils'
+
+const speeds = [0.5, 1, 1.5, 2]
 
-const speeds = [0.8, 1, 1.2, 1.5, 1.7, 2, 2.5]
 export default function PlaybackSpeed({ waveSurfer }) {
   const [speed, setSpeed] = useState(waveSurfer?.getPlaybackRate())
 
-  const handleSpeedChange = (speed) => {
-    setSpeed(speed)
-    waveSurfer?.setPlaybackRate(speed)
-  }
-
   useEffect(() => {
     setSpeed(waveSurfer?.getPlaybackRate())
   }, [waveSurfer])
 
   return (
-    <Popover
-      overlayClassName="contacto-player-speed"
-      title="Playback Speed"
-      content={() => (
-        <div>
-          {speeds.map((speed) => (
-            <Button
-              key={speed}
-              className="contacto-player-speed"
-              type={speed === waveSurfer?.getPlaybackRate() ? 'secondary' : 'table-action-link'}
-              onClick={() => handleSpeedChange(speed)}
-            >
-              {speed}x
-            </Button>
-          ))}
-        </div>
-      )}
-    >
-      <Button className="contacto-player-speed-trigger" type="secondary">
-        {speed}x
-      </Button>
-    </Popover>
+    <RenderButtons
+      speeds={speeds}
+      waveSurfer={waveSurfer}
+      setSpeed={setSpeed}
+      parentClassName="contacto-player-speed"
+      buttonClassName="contacto-player-speed-buttons"
+    />
   )
 }

src/components/AudioPlayer/components/PlaybackSpeedPopup.js

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react'
+import { Popover } from 'antd'
+import { Button } from '../../Button/index'
+import { RenderButtons } from '../helpers/utils'
+
+const speeds = [0.8, 1, 1.2, 1.5, 1.7, 2, 2.5]
+export default function PlaybackSpeedPopup({ waveSurfer }) {
+  const [speed, setSpeed] = useState(waveSurfer?.getPlaybackRate())
+
+  useEffect(() => {
+    setSpeed(waveSurfer?.getPlaybackRate())
+  }, [waveSurfer])
+
+  return (
+    <Popover
+      overlayClassName="contacto-player-speed-popup"
+      title="Playback Speed"
+      content={() => (
+        <RenderButtons
+          speeds={speeds}
+          waveSurfer={waveSurfer}
+          setSpeed={setSpeed}
+          parentClassName="contacto-player-speed-popup"
+          buttonClassName="contacto-player-speed-popup"
+        />
+      )}
+    >
+      <Button className="contacto-player-speed-trigger" type="secondary">
+        {speed}x
+      </Button>
+    </Popover>
+  )
+}

src/components/AudioPlayer/helpers/utils.js

@@ -1,3 +1,6 @@
+import React from 'react'
+import { Button } from '../../Button/index'
+
 export const getDisplayTime = (seconds) => {
   const int = +seconds / 60
   let minutes = parseInt(int)
@@ -10,3 +13,35 @@ export const getDisplayTime = (seconds) => {
 export const generateId = (prefix) => {
   return `${prefix}${Math.random().toString(36).slice(2)}`
 }
+
+export const handleSpeedChange = (speed, waveSurfer, setSpeed) => {
+  setSpeed(speed)
+  waveSurfer?.setPlaybackRate(speed)
+}
+
+export const getType = (speed, waveSurfer) => {
+  return speed === waveSurfer?.getPlaybackRate() ? 'secondary' : 'table-action-link'
+}
+
+export const RenderButtons = ({
+  speeds,
+  waveSurfer,
+  setSpeed,
+  parentClassName,
+  buttonClassName,
+}) => {
+  return (
+    <div className={parentClassName}>
+      {speeds.map((speed) => (
+        <Button
+          key={speed}
+          className={buttonClassName}
+          type={getType(speed, waveSurfer)}
+          onClick={() => handleSpeedChange(speed, waveSurfer, setSpeed)}
+        >
+          {speed}x
+        </Button>
+      ))}
+    </div>
+  )
+}

src/components/AudioPlayer/index.js

@@ -4,14 +4,15 @@ import { forwardRef, useState, useLayoutEffect } from 'react'
 import PlayPauseIcon from './components/PlayPauseIcon'
 import useWaveSurfer from './helpers/useWaveSurfer'
 import PlaybackSpeed from './components/PlaybackSpeed'
+import PlaybackSpeedPopup from './components/PlaybackSpeedPopup'
 import { Button } from '../Button/index'
 import { Icon } from '../Icon/index'
 import { getDisplayTime } from './helpers/utils'
 import './styles.scss'
 
 // TODO: @Ritik Add Error Boundaries
 const AudioPlayer = forwardRef((props, ref) => {
-  const { className, url } = props
+  const { className, url, showSpeedInPopup = true } = props
   const { playerConfig, durationConfig, waveSurferRef } = useWaveSurfer(url)
 
   const { isPlaying, loading } = playerConfig
@@ -52,7 +53,11 @@ const AudioPlayer = forwardRef((props, ref) => {
         <div className="audio-controls-time right">
           <Text type="caption">{getDisplayTime(totalDuration)}</Text>
         </div>
-        <PlaybackSpeed waveSurfer={waveSurferInstance} />
+        {showSpeedInPopup ? (
+          <PlaybackSpeedPopup waveSurfer={waveSurferInstance} />
+        ) : (
+          <PlaybackSpeed waveSurfer={waveSurferInstance} />
+        )}
       </div>
     </div>
   )

src/components/AudioPlayer/index.stories.js

@@ -12,3 +12,9 @@ export const Default = Template.bind({})
 Default.args = {
   url: 'https://wavesurfer-js.org/wavesurfer-code/examples/audio/mono.mp3',
 }
+
+export const WithSpeed = Template.bind({})
+WithSpeed.args = {
+  url: 'https://wavesurfer-js.org/wavesurfer-code/examples/audio/mono.mp3',
+  showSpeedInPopup: false,
+}

src/components/AudioPlayer/styles.scss

@@ -17,7 +17,7 @@
   }
 
   &.contacto-button--table-action-link {
-    background-color: var(--background-highlight-color);
+    background-color: var(--background-highlight-color) !important;
 
     &:hover {
       background-color: var(--background-highlight-color) !important;
@@ -90,7 +90,7 @@
   }
 }
 
-.contacto-player-speed {
+.contacto-player-speed-popup {
   padding-top: 8px;
 
   .ant-popover-arrow {
@@ -119,10 +119,22 @@
         align-items: center;
         gap: 8px;
 
-        .contacto-player-speed {
+        .contacto-player-speed-popup {
           @include playback-speed-button;
         }
       }
     }
   }
 }
+
+.contacto-player-speed {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin-left: 24px;
+
+  .contacto-player-speed-buttons {
+    @include playback-speed-button;
+  }
+}