[C-2344] Update the web playbar scrubber to respect the playback spee…

…d of podcasts (#3075)
AudiusProject · Mar 21, 2023 · 59862ad · 59862ad
1 parent ffeb0d3
commit 59862ad
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 6 deletions.
diff --git a/packages/stems/src/components/Scrubber/Scrubber.tsx b/packages/stems/src/components/Scrubber/Scrubber.tsx
@@ -34,6 +34,7 @@ export const Scrubber = ({
   includeTimestamps,
   elapsedSeconds,
   totalSeconds,
+  playbackRate,
   onScrub,
   onScrubRelease,
   includeExpandedTargets,
@@ -88,6 +89,7 @@ export const Scrubber = ({
         isMobile={isMobile}
         elapsedSeconds={elapsedSeconds}
         totalSeconds={totalSeconds}
+        playbackRate={playbackRate}
         onScrub={onHandleScrub}
         onScrubRelease={onHandleScrubRelease}
         includeExpandedTargets={includeExpandedTargets}

diff --git a/packages/stems/src/components/Scrubber/Slider.tsx b/packages/stems/src/components/Scrubber/Slider.tsx
@@ -24,6 +24,7 @@ export const Slider = ({
   isDisabled,
   elapsedSeconds,
   totalSeconds,
+  playbackRate,
   onScrub,
   onScrubRelease,
   includeExpandedTargets = true,
@@ -54,7 +55,8 @@ export const Slider = ({
     trackRef,
     handleRef,
     elapsedSeconds,
-    totalSeconds
+    totalSeconds,
+    playbackRate
   )
 
   /**
@@ -219,6 +221,11 @@ export const Slider = ({
     }
   }, [isPlaying, dragPercent, play, pause])
 
+  useEffect(() => {
+    setPercent(elapsedSeconds / totalSeconds)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playbackRate])
+
   // When the key changes, reset the animation
   useEffect(() => {
     if (mediaKey !== previousMediaKey) {

diff --git a/packages/stems/src/components/Scrubber/hooks.ts b/packages/stems/src/components/Scrubber/hooks.ts
@@ -27,18 +27,19 @@ export const useAnimations = (
   trackRef: React.MutableRefObject<HTMLDivElement | null>,
   handleRef: React.MutableRefObject<HTMLDivElement | null>,
   elapsedSeconds: number,
-  totalSeconds: number
+  totalSeconds: number,
+  playbackRate = 1
 ) => {
   /** Animates from the current position to the end over the remaining seconds. */
   const play = useCallback(() => {
-    const timeRemaining = totalSeconds - elapsedSeconds
+    const timeRemaining = (totalSeconds - elapsedSeconds) / playbackRate
     animate(
       trackRef,
       handleRef,
       `transform ${timeRemaining}s linear`,
       'translate(100%)'
     )
-  }, [trackRef, handleRef, elapsedSeconds, totalSeconds])
+  }, [totalSeconds, elapsedSeconds, playbackRate, trackRef, handleRef])
 
   /**
    * Pauses the animation at the current position.

diff --git a/packages/stems/src/components/Scrubber/types.ts b/packages/stems/src/components/Scrubber/types.ts
@@ -41,6 +41,11 @@ export type ScrubberProps = {
    */
   totalSeconds: number
 
+  /**
+   * The speed that the media is being played at
+   */
+  playbackRate: number
+
   /**
    * Fired incrementally as the user drags the scrubber.
    */

diff --git a/packages/web/src/components/play-bar/desktop/PlayBar.js b/packages/web/src/components/play-bar/desktop/PlayBar.js
@@ -15,7 +15,8 @@ import {
   playerActions,
   playerSelectors,
   queueSelectors,
-  FeatureFlags
+  FeatureFlags,
+  playbackRateValueMap
 } from '@audius/common'
 import { Scrubber } from '@audius/stems'
 import { push as pushRoute } from 'connected-react-router'
@@ -48,7 +49,8 @@ const {
   getPlaying,
   getCounter,
   getUid: getPlayingUid,
-  getBuffering
+  getBuffering,
+  getPlaybackRate
 } = playerSelectors
 
 const { seek, reset } = playerActions
@@ -296,6 +298,7 @@ class PlayBar extends Component {
       collectible,
       isPlaying,
       isBuffering,
+      playbackRate,
       userId,
       theme
     } = this.props
@@ -393,6 +396,9 @@ class PlayBar extends Component {
                 isPlaying={isPlaying && !isBuffering}
                 isDisabled={!uid && !collectible}
                 includeTimestamps
+                playbackRate={
+                  isLongFormContent ? playbackRateValueMap[playbackRate] : 1
+                }
                 elapsedSeconds={audioPlayer?.getPosition()}
                 totalSeconds={duration}
                 style={{
@@ -505,6 +511,7 @@ const makeMapStateToProps = () => {
     isPlaying: getPlaying(state),
     isBuffering: getBuffering(state),
     playingUid: getPlayingUid(state),
+    playbackRate: getPlaybackRate(state),
     lineupHasTracks: getLineupHasTracks(
       getLineupSelectorForRoute(state),
       state