diff --git a/packages/web/src/components/animated-button/AnimatedIconButton.tsx b/packages/web/src/components/animated-button/AnimatedIconButton.tsx index 4f0bcca43d0..e697711ce5c 100644 --- a/packages/web/src/components/animated-button/AnimatedIconButton.tsx +++ b/packages/web/src/components/animated-button/AnimatedIconButton.tsx @@ -68,8 +68,8 @@ const AnimatedIconButton = ({ isMatrix={isMatrix} onClick={onClick || ((e: MouseEvent) => {})} href={href} - iconLightJSON={() => import(`assets/animations/${light}.json`)} - iconDarkJSON={() => import(`assets/animations/${dark}.json`)} + iconLightJSON={() => import(`../../assets/animations/${light}.json`)} + iconDarkJSON={() => import(`../../assets/animations/${dark}.json`)} activeClassName={activeClassName} disabledClassName={disabledClassName} className={className} diff --git a/packages/web/src/components/bottom-bar/buttons/ExploreButton.tsx b/packages/web/src/components/bottom-bar/buttons/ExploreButton.tsx index 142e09614a3..b6977f225a5 100644 --- a/packages/web/src/components/bottom-bar/buttons/ExploreButton.tsx +++ b/packages/web/src/components/bottom-bar/buttons/ExploreButton.tsx @@ -18,8 +18,12 @@ const ExploreButton = ({ isMatrix={isMatrixMode} onClick={onClick} href={href} - iconLightJSON={() => import('assets/animations/iconExploreLight.json')} - iconDarkJSON={() => import('assets/animations/iconExploreDark.json')} + iconLightJSON={() => + import('../../../assets/animations/iconExploreLight.json') + } + iconDarkJSON={() => + import('../../../assets/animations/iconExploreDark.json') + } /> ) } diff --git a/packages/web/src/components/bottom-bar/buttons/FeedButton.tsx b/packages/web/src/components/bottom-bar/buttons/FeedButton.tsx index 297f294c7cf..6901b8783e7 100644 --- a/packages/web/src/components/bottom-bar/buttons/FeedButton.tsx +++ b/packages/web/src/components/bottom-bar/buttons/FeedButton.tsx @@ -18,8 +18,12 @@ const FeedButton = ({ darkMode={darkMode} onClick={onClick} href={href} - iconLightJSON={() => import('assets/animations/iconFeedLight.json')} - iconDarkJSON={() => import('assets/animations/iconFeedDark.json')} + iconLightJSON={() => + import('../../../assets/animations/iconFeedLight.json') + } + iconDarkJSON={() => + import('../../../assets/animations/iconFeedDark.json') + } /> ) } diff --git a/packages/web/src/components/bottom-bar/buttons/LibraryButton.tsx b/packages/web/src/components/bottom-bar/buttons/LibraryButton.tsx index d5a601152cd..390640fd613 100644 --- a/packages/web/src/components/bottom-bar/buttons/LibraryButton.tsx +++ b/packages/web/src/components/bottom-bar/buttons/LibraryButton.tsx @@ -18,8 +18,12 @@ const LibraryButton = ({ isMatrix={isMatrixMode} onClick={onClick} href={href} - iconLightJSON={() => import('assets/animations/iconFavoriteLight.json')} - iconDarkJSON={() => import('assets/animations/iconFavoriteDark.json')} + iconLightJSON={() => + import('../../../assets/animations/iconFavoriteLight.json') + } + iconDarkJSON={() => + import('../../../assets/animations/iconFavoriteDark.json') + } /> ) } diff --git a/packages/web/src/components/bottom-bar/buttons/ProfileButton.tsx b/packages/web/src/components/bottom-bar/buttons/ProfileButton.tsx index 50aed065da0..6228ed07053 100644 --- a/packages/web/src/components/bottom-bar/buttons/ProfileButton.tsx +++ b/packages/web/src/components/bottom-bar/buttons/ProfileButton.tsx @@ -18,8 +18,12 @@ const ProfileButton = ({ isMatrix={isMatrixMode} onClick={onClick} href={href} - iconLightJSON={() => import('assets/animations/iconProfileLight.json')} - iconDarkJSON={() => import('assets/animations/iconProfileDark.json')} + iconLightJSON={() => + import('../../../assets/animations/iconProfileLight.json') + } + iconDarkJSON={() => + import('../../../assets/animations/iconProfileDark.json') + } /> ) } diff --git a/packages/web/src/components/bottom-bar/buttons/TrendingButton.tsx b/packages/web/src/components/bottom-bar/buttons/TrendingButton.tsx index a8e362a3c29..7feadd57253 100644 --- a/packages/web/src/components/bottom-bar/buttons/TrendingButton.tsx +++ b/packages/web/src/components/bottom-bar/buttons/TrendingButton.tsx @@ -18,8 +18,12 @@ const TrendingButton = ({ isMatrix={isMatrixMode} onClick={onClick} href={href} - iconLightJSON={() => import('assets/animations/iconTrendingLight.json')} - iconDarkJSON={() => import('assets/animations/iconTrendingDark.json')} + iconLightJSON={() => + import('../../../assets/animations/iconTrendingLight.json') + } + iconDarkJSON={() => + import('../../../assets/animations/iconTrendingDark.json') + } /> ) } diff --git a/packages/web/src/components/play-bar/repeat-button/RepeatButtonProvider.tsx b/packages/web/src/components/play-bar/repeat-button/RepeatButtonProvider.tsx index a7a1f9a583b..383ae8cff16 100644 --- a/packages/web/src/components/play-bar/repeat-button/RepeatButtonProvider.tsx +++ b/packages/web/src/components/play-bar/repeat-button/RepeatButtonProvider.tsx @@ -60,13 +60,13 @@ const RepeatButtonProvider = ({ } else { if (!defaultAnimations.current) { const { default: pbIconRepeatAll } = (await import( - 'assets/animations/pbIconRepeatAll.json' + '../../../assets/animations/pbIconRepeatAll.json' )) as any const { default: pbIconRepeatSingle } = (await import( - 'assets/animations/pbIconRepeatSingle.json' + '../../../assets/animations/pbIconRepeatSingle.json' )) as any const { default: pbIconRepeatOff } = (await import( - 'assets/animations/pbIconRepeatOff.json' + '../../../assets/animations/pbIconRepeatOff.json' )) as any defaultAnimations.current = { pbIconRepeatAll, diff --git a/packages/web/src/components/play-bar/shuffle-button/ShuffleButtonProvider.tsx b/packages/web/src/components/play-bar/shuffle-button/ShuffleButtonProvider.tsx index 9368cf4a84a..999489c3dc2 100644 --- a/packages/web/src/components/play-bar/shuffle-button/ShuffleButtonProvider.tsx +++ b/packages/web/src/components/play-bar/shuffle-button/ShuffleButtonProvider.tsx @@ -32,10 +32,10 @@ const ShuffleButtonProvider = ({ if (isMatrix) { if (!matrixAnimations.current) { const { default: pbIconShuffleOff } = (await import( - 'assets/animations/pbIconShuffleOffMatrix.json' + '../../../assets/animations/pbIconShuffleOffMatrix.json' )) as any const { default: pbIconShuffleOn } = (await import( - 'assets/animations/pbIconShuffleOnMatrix.json' + '../../../assets/animations/pbIconShuffleOnMatrix.json' )) as any matrixAnimations.current = { pbIconShuffleOff, @@ -45,8 +45,8 @@ const ShuffleButtonProvider = ({ setAnimations({ ...matrixAnimations.current }) } else if (darkMode) { if (!darkAnimations.current) { - const pbIconShuffleOff = require('assets/animations/pbIconShuffleOffDark.json') - const pbIconShuffleOn = require('assets/animations/pbIconShuffleOnDark.json') + const pbIconShuffleOff = require('../../../assets/animations/pbIconShuffleOffDark.json') + const pbIconShuffleOn = require('../../../assets/animations/pbIconShuffleOnDark.json') darkAnimations.current = { pbIconShuffleOff, pbIconShuffleOn @@ -56,10 +56,10 @@ const ShuffleButtonProvider = ({ } else { if (!defaultAnimations.current) { const { default: pbIconShuffleOff } = (await import( - 'assets/animations/pbIconShuffleOff.json' + '../../../assets/animations/pbIconShuffleOff.json' )) as any const { default: pbIconShuffleOn } = (await import( - 'assets/animations/pbIconShuffleOn.json' + '../../../assets/animations/pbIconShuffleOn.json' )) as any defaultAnimations.current = { pbIconShuffleOff,