Skip to content

Commit 3fc74fc

Browse files
dylanjeffersdylanjeffers
authored
Fix playbar classic theme (#13787)
1 parent d5dfbb1 commit 3fc74fc

7 files changed

Lines changed: 149 additions & 205 deletions

File tree

‎packages/web/src/components/now-playing/NowPlaying.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ import { LockedStatusBadge } from 'components/locked-status-badge'
4646
import PlayButton from 'components/play-bar/PlayButton'
4747
import NextButtonProvider from 'components/play-bar/next-button/NextButtonProvider'
4848
import PreviousButtonProvider from 'components/play-bar/previous-button/PreviousButtonProvider'
49-
import RepeatButtonProvider from 'components/play-bar/repeat-button/RepeatButtonProvider'
50-
import ShuffleButtonProvider from 'components/play-bar/shuffle-button/ShuffleButtonProvider'
49+
import RepeatButton from 'components/play-bar/repeat-button/RepeatButton'
50+
import ShuffleButton from 'components/play-bar/shuffle-button/ShuffleButton'
5151
import { PlayButtonStatus } from 'components/play-bar/types'
5252
import { GatedConditionsPill } from 'components/track/GatedConditionsPill'
5353
import { TrackDogEar } from 'components/track/TrackDogEar'
@@ -472,7 +472,7 @@ const NowPlaying = g(
472472
</div>
473473
<div className={styles.controls}>
474474
<div className={styles.repeatButton}>
475-
<RepeatButtonProvider
475+
<RepeatButton
476476
onRepeatOff={() => repeat(RepeatMode.OFF)}
477477
onRepeatAll={() => repeat(RepeatMode.ALL)}
478478
onRepeatSingle={() => repeat(RepeatMode.SINGLE)}
@@ -492,7 +492,7 @@ const NowPlaying = g(
492492
<NextButtonProvider isMobile onClick={onNext} />
493493
</div>
494494
<div className={styles.shuffleButton}>
495-
<ShuffleButtonProvider
495+
<ShuffleButton
496496
onShuffleOn={() => shuffle(true)}
497497
onShuffleOff={() => shuffle(false)}
498498
/>

‎packages/web/src/components/play-bar/desktop/PlayBar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ import PlayButton from 'components/play-bar/PlayButton'
1919
import VolumeBar from 'components/play-bar/VolumeBar'
2020
import NextButtonProvider from 'components/play-bar/next-button/NextButtonProvider'
2121
import PreviousButtonProvider from 'components/play-bar/previous-button/PreviousButtonProvider'
22-
import RepeatButtonProvider from 'components/play-bar/repeat-button/RepeatButtonProvider'
23-
import ShuffleButtonProvider from 'components/play-bar/shuffle-button/ShuffleButtonProvider'
22+
import RepeatButton from 'components/play-bar/repeat-button/RepeatButton'
23+
import ShuffleButton from 'components/play-bar/shuffle-button/ShuffleButton'
2424
import { audioPlayer } from 'services/audio-player'
2525
import { push } from 'utils/navigation'
2626

@@ -305,7 +305,7 @@ const PlayBar = () => {
305305
<div className={styles.buttonControls}>
306306
<div className={styles.shuffleButton}>
307307
{isLongFormContent ? null : (
308-
<ShuffleButtonProvider
308+
<ShuffleButton
309309
onShuffleOn={shuffleOn}
310310
onShuffleOff={shuffleOff}
311311
/>
@@ -328,7 +328,7 @@ const PlayBar = () => {
328328
{isLongFormContent ? (
329329
<PlaybackRateButton isMobile={false} />
330330
) : (
331-
<RepeatButtonProvider
331+
<RepeatButton
332332
onRepeatOff={repeatOff}
333333
onRepeatAll={repeatAll}
334334
onRepeatSingle={repeatSingle}

‎packages/web/src/components/play-bar/repeat-button/RepeatButton.tsx‎

Lines changed: 73 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import { useState, useEffect, useCallback, useRef } from 'react'
33
import cn from 'classnames'
44
import Lottie, { LottieRefCurrentProps } from 'lottie-react'
55

6+
import { useIsMobile } from 'hooks/useIsMobile'
7+
import { applyThemeToLottie } from 'utils/lottieTheme'
8+
import { useLottieThemeColors } from 'utils/theme/theme'
9+
610
import styles from '../PlayBarButton.module.css'
711

812
enum RepeatStates {
@@ -28,40 +32,83 @@ const getRepeatState = (defaultState: RepeatStates) => {
2832
}
2933
}
3034

35+
type AnimationStates = {
36+
pbIconRepeatAll: object
37+
pbIconRepeatSingle: object
38+
pbIconRepeatOff: object
39+
}
40+
3141
type RepeatButtonProps = {
32-
animations: {
33-
pbIconRepeatAll: object
34-
pbIconRepeatSingle: object
35-
pbIconRepeatOff: object
36-
}
37-
repeatOff: () => void
38-
repeatSingle: () => void
39-
repeatAll: () => void
40-
isMobile: boolean
42+
onRepeatOff: () => void
43+
onRepeatAll: () => void
44+
onRepeatSingle: () => void
4145
}
4246

4347
const RepeatButton = ({
44-
animations,
45-
repeatOff = () => {},
46-
repeatSingle = () => {},
47-
repeatAll = () => {},
48-
isMobile = false
48+
onRepeatOff = () => {},
49+
onRepeatAll = () => {},
50+
onRepeatSingle = () => {}
4951
}: RepeatButtonProps) => {
52+
const themeColors = useLottieThemeColors()
53+
const isMobile = useIsMobile()
54+
const [animations, setAnimations] = useState<AnimationStates | null>(null)
55+
const baseAnimations = useRef<AnimationStates | null>(null)
56+
5057
const [state, setState] = useState({
5158
repeatState: getRepeatState(RepeatStates.OFF),
5259
isPaused: true,
53-
icon: animations ? animations.pbIconRepeatAll : null
60+
icon: null as object | null
5461
})
5562

63+
useEffect(() => {
64+
const loadAnimations = async () => {
65+
if (!baseAnimations.current) {
66+
const { default: pbIconRepeatAll } = (await import(
67+
'../../../assets/animations/pbIconRepeatAll.json'
68+
)) as { default: object }
69+
const { default: pbIconRepeatSingle } = (await import(
70+
'../../../assets/animations/pbIconRepeatSingle.json'
71+
)) as { default: object }
72+
const { default: pbIconRepeatOff } = (await import(
73+
'../../../assets/animations/pbIconRepeatOff.json'
74+
)) as { default: object }
75+
baseAnimations.current = {
76+
pbIconRepeatAll,
77+
pbIconRepeatSingle,
78+
pbIconRepeatOff
79+
}
80+
}
81+
setAnimations({
82+
pbIconRepeatAll: applyThemeToLottie(
83+
baseAnimations.current.pbIconRepeatAll,
84+
themeColors,
85+
'neutral'
86+
),
87+
pbIconRepeatSingle: applyThemeToLottie(
88+
baseAnimations.current.pbIconRepeatSingle,
89+
themeColors,
90+
'primary'
91+
),
92+
pbIconRepeatOff: applyThemeToLottie(
93+
baseAnimations.current.pbIconRepeatOff,
94+
themeColors,
95+
'primary'
96+
)
97+
})
98+
}
99+
loadAnimations()
100+
}, [themeColors])
101+
56102
const handleChange = useCallback(
57103
(repeatState: RepeatStates) => {
104+
if (!animations) return
58105
const { pbIconRepeatAll, pbIconRepeatSingle, pbIconRepeatOff } =
59106
animations
60-
// Go to the next state.
61-
let icon, isPaused
107+
let icon: object
108+
let isPaused: boolean
62109
switch (repeatState) {
63110
case RepeatStates.OFF:
64-
repeatOff()
111+
onRepeatOff()
65112
icon = pbIconRepeatAll
66113
isPaused = true
67114
break
@@ -70,7 +117,7 @@ const RepeatButton = ({
70117
isPaused = false
71118
break
72119
case RepeatStates.ALL:
73-
repeatAll()
120+
onRepeatAll()
74121
icon = pbIconRepeatSingle
75122
isPaused = true
76123
break
@@ -79,7 +126,7 @@ const RepeatButton = ({
79126
isPaused = false
80127
break
81128
case RepeatStates.SINGLE:
82-
repeatSingle()
129+
onRepeatSingle()
83130
icon = pbIconRepeatOff
84131
isPaused = true
85132
break
@@ -98,15 +145,17 @@ const RepeatButton = ({
98145
repeatState
99146
})
100147
},
101-
[animations, repeatOff, repeatAll, repeatSingle]
148+
[animations, onRepeatOff, onRepeatAll, onRepeatSingle]
102149
)
103150

104151
useEffect(() => {
105152
handleChange(state.repeatState)
106153
}, [handleChange, state.repeatState])
107154

108155
useEffect(() => {
109-
handleChange(state.repeatState)
156+
if (animations) {
157+
handleChange(state.repeatState)
158+
}
110159
}, [animations, handleChange, state.repeatState])
111160

112161
const nextState = () => {
@@ -125,6 +174,8 @@ const RepeatButton = ({
125174
}
126175
}, [lottieRef, state.isPaused])
127176

177+
if (!animations || !state.icon) return null
178+
128179
return (
129180
<button
130181
className={cn(styles.button, {

‎packages/web/src/components/play-bar/repeat-button/RepeatButtonProvider.tsx‎

Lines changed: 0 additions & 83 deletions
This file was deleted.

0 commit comments

Comments
 (0)