Add home page route and update navigation to use it

packages/common/src/utils/route.ts

@@ -52,6 +52,7 @@ export const UPLOAD_ALBUM_PAGE = '/upload/album'
 export const UPLOAD_PLAYLIST_PAGE = '/upload/playlist'
 export const SETTINGS_PAGE = '/settings'
 export const HOME_PAGE = '/'
+export const HOMEPAGE_PAGE = '/home'
 export const NOT_FOUND_PAGE = '/404'
 export const SIGN_IN_PAGE = '/signin'
 export const SIGN_IN_CONFIRM_EMAIL_PAGE = '/signin/confirm-email'
@@ -337,6 +338,7 @@ export const orderedRoutes = [
   SALES_PAGE,
   WITHDRAWALS_PAGE,
   NOT_FOUND_PAGE,
+  HOMEPAGE_PAGE,
   HOME_PAGE,
   PLAYLIST_PAGE,
   ALBUM_PAGE,
@@ -350,6 +352,7 @@ export const orderedRoutes = [
 ]
 
 export const staticRoutes = new Set([
+  HOMEPAGE_PAGE,
   FEED_PAGE,
   TRENDING_PAGE,
   EXPLORE_PAGE,

packages/harmony/src/icons/icons.tsx

@@ -12,6 +12,7 @@ export { IconGift } from './individual/IconGift'
 export { IconSettings } from './individual/IconSettings'
 export { IconArrowLeft } from './individual/IconArrowLeft'
 export { IconHeart } from './individual/IconHeart'
+export { IconHome } from './individual/IconHome'
 export { IconShare } from './individual/IconShare'
 export { IconArrowRight } from './individual/IconArrowRight'
 export { IconMoneySend } from './individual/IconMoneySend'

packages/harmony/src/icons/individual/IconHome.ts

@@ -0,0 +1,5 @@
+import { IconComponent } from '~harmony/components'
+
+import IconSVG from '../../assets/icons/Home.svg'
+
+export const IconHome = IconSVG as IconComponent

packages/mobile/ios/AudiusReactNative.xcodeproj/project.pbxproj

@@ -424,7 +424,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\nWITH_ENVIRONMENT=\"${SRCROOT}/../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"${SRCROOT}/../node_modules/react-native/scripts/react-native-xcode.sh\"\n/bin/sh -c \"$WITH_ENVIRONMENT $REACT_NATIVE_XCODE\"\n";
+			shellScript = "export NODE_BINARY=node\nWITH_ENVIRONMENT=\"${SRCROOT}/../node_modules/react-native/scripts/xcode/with-environment.sh\"\nREACT_NATIVE_XCODE=\"${SRCROOT}/../node_modules/react-native/scripts/react-native-xcode.sh\"\n. \"$WITH_ENVIRONMENT\"\n\"$REACT_NATIVE_XCODE\"\n";
 			showEnvVarsInLog = 0;
 		};
 		B73C21C532E1201FEFBAECDA /* [CP] Copy Pods Resources */ = {

packages/mobile/ios/Podfile

@@ -50,9 +50,8 @@ target 'AudiusReactNative' do
 
     def strip_bitcode_from_framework(bitcode_strip_path, framework_relative_path)
       framework_path = File.join(Dir.pwd, framework_relative_path)
-      command = "#{bitcode_strip_path} #{framework_path} -r -o #{framework_path}"
-      puts "Stripping bitcode: #{command}"
-      system(command)
+      puts "Stripping bitcode: #{bitcode_strip_path} #{framework_path} -r -o #{framework_path}"
+      system(bitcode_strip_path, framework_path, "-r", "-o", framework_path)
     end
 
     framework_paths = [
@@ -66,6 +65,53 @@ target 'AudiusReactNative' do
       strip_bitcode_from_framework(bitcode_strip_path, framework_relative_path)
     end
 
+    def patch_react_native_scripts_for_paths_with_spaces(react_native_path)
+      hermes_script_path = File.join(react_native_path, "sdks/hermes-engine/utils/replace_hermes_version.js")
+      hermes_contents = File.read(hermes_script_path)
+      patched_hermes_contents = hermes_contents
+        .gsub(
+          "const {execSync} = require('child_process');",
+          "const {execFileSync} = require('child_process');"
+        )
+        .gsub(
+          '  execSync(`tar -xf ${tarballURLPath} -C ${finalLocation}`);',
+          "  execFileSync('tar', ['-xf', tarballURLPath, '-C', finalLocation]);"
+        )
+
+      if patched_hermes_contents != hermes_contents
+        puts "Patching Hermes replacement script for paths with spaces"
+        File.write(hermes_script_path, patched_hermes_contents)
+      end
+
+      environment_script_path = File.join(react_native_path, "scripts/xcode/with-environment.sh")
+      environment_contents = File.read(environment_script_path)
+      patched_environment_contents = environment_contents.gsub(
+        "if [ -n \"$1\" ]; then\n  $1\nfi",
+        "if [ \"$#\" -gt 0 ]; then\n  \"$@\"\nfi"
+      )
+
+      if patched_environment_contents != environment_contents
+        puts "Patching React Native Xcode environment script for paths with spaces"
+        File.write(environment_script_path, patched_environment_contents)
+      end
+    end
+
+    def patch_script_phase_for_paths_with_spaces(script_phase)
+      return if script_phase.shell_script.nil?
+
+      patched_script = script_phase.shell_script.gsub(
+        '/bin/sh -c "$WITH_ENVIRONMENT $SCRIPT_PHASES_SCRIPT"',
+        '"$WITH_ENVIRONMENT" "$SCRIPT_PHASES_SCRIPT"'
+      )
+
+      if patched_script != script_phase.shell_script
+        puts "Patching #{script_phase.display_name} script phase for paths with spaces"
+        script_phase.shell_script = patched_script
+      end
+    end
+
+    patch_react_native_scripts_for_paths_with_spaces(config[:reactNativePath])
+
     # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
       installer,
@@ -81,6 +127,25 @@ target 'AudiusReactNative' do
 
     # https://github.com/CocoaPods/CocoaPods/issues/11402#issuecomment-1201464693
     installer.pods_project.targets.each do |target|
+      target.shell_script_build_phases.each do |script_phase|
+        patch_script_phase_for_paths_with_spaces(script_phase)
+      end
+
+      target.build_configurations.each do |config|
+        deployment_target = config.build_settings['IPHONEOS_DEPLOYMENT_TARGET']
+        next if deployment_target.nil?
+
+        if Gem::Version.new(deployment_target) < Gem::Version.new('15.5')
+          config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '15.5'
+        end
+      end
+
+      if target.name == "fmt"
+        target.build_configurations.each do |config|
+          config.build_settings['CLANG_CXX_LANGUAGE_STANDARD'] = 'gnu++17'
+        end
+      end
+
       if target.respond_to?(:product_type) and target.product_type == "com.apple.product-type.bundle"
         target.build_configurations.each do |config|
             config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
@@ -101,4 +166,3 @@ target 'AudiusReactNative' do
 
   end
 end
-

packages/mobile/ios/Podfile.lock

@@ -2907,6 +2907,6 @@ SPEC CHECKSUMS:
   TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
   Yoga: eca8dd841b7cd47d82d66be58af8e3aeb819012f
 
-PODFILE CHECKSUM: b77c7dc423273b965d32a03d73fe6277c67877b7
+PODFILE CHECKSUM: e09d6543ec0ac3bf17229efe67e5637bc9ad987b
 
 COCOAPODS: 1.16.2

packages/web/src/app/web-player/WebPlayer.tsx

@@ -154,6 +154,7 @@ const FbSharePage = lazy(() =>
   }))
 )
 const FeedPage = lazy(() => import('pages/feed-page/FeedPage'))
+const HomePage = lazy(() => import('pages/home-page/HomePage'))
 const FollowersPage = lazy(() => import('pages/followers-page/FollowersPage'))
 const FollowingPage = lazy(() => import('pages/following-page/FollowingPage'))
 const HistoryPage = lazy(() => import('pages/history-page/HistoryPage'))
@@ -245,6 +246,7 @@ const {
   UPLOAD_PLAYLIST_PAGE,
   SETTINGS_PAGE,
   HOME_PAGE,
+  HOMEPAGE_PAGE,
   NOT_FOUND_PAGE,
   SEARCH_PAGE,
   PLAYLIST_PAGE,
@@ -427,17 +429,21 @@ const CoinExclusiveTracksLegacyRedirect = () => {
 
 type HomePageRedirectProps = {
   isGuestAccount: boolean
+  target?: string
 }
 
-const HomePageRedirect = ({ isGuestAccount }: HomePageRedirectProps) => {
+const HomePageRedirect = ({
+  isGuestAccount,
+  target = TRENDING_PAGE
+}: HomePageRedirectProps) => {
   const location = useLocation()
   const currentPath = getPathname(location)
   const to = {
     pathname:
       currentPath === HOME_PAGE
         ? isGuestAccount
           ? LIBRARY_PAGE
-          : TRENDING_PAGE
+          : target
         : currentPath,
     search: includeSearch(location.search) ? location.search : ''
   }
@@ -1282,9 +1288,15 @@ const WebPlayer = (props: WebPlayerProps) => {
                   path={PROFILE_PAGE}
                   element={<ProfilePageRoute mainContentRef={mainContentRef} />}
                 />
+                <Route path={HOMEPAGE_PAGE} element={<HomePage />} />
                 <Route
                   path={HOME_PAGE}
-                  element={<HomePageRedirect isGuestAccount={isGuestAccount} />}
+                  element={
+                    <HomePageRedirect
+                      isGuestAccount={isGuestAccount}
+                      target={HOMEPAGE_PAGE}
+                    />
+                  }
                 />
               </AnimatedSwitch>
             ) : (
@@ -1632,9 +1644,15 @@ const WebPlayer = (props: WebPlayerProps) => {
                   path={PROFILE_PAGE}
                   element={<ProfilePageRoute mainContentRef={mainContentRef} />}
                 />
+                <Route path={HOMEPAGE_PAGE} element={<HomePage />} />
                 <Route
                   path={HOME_PAGE}
-                  element={<HomePageRedirect isGuestAccount={isGuestAccount} />}
+                  element={
+                    <HomePageRedirect
+                      isGuestAccount={isGuestAccount}
+                      target={HOMEPAGE_PAGE}
+                    />
+                  }
                 />
               </Routes>
             )}

packages/web/src/components/animated-switch/AnimatedSwitch.tsx

@@ -26,12 +26,14 @@ const {
   FEED_PAGE,
   TRENDING_PAGE,
   EXPLORE_PAGE,
-  LIBRARY_PAGE
+  LIBRARY_PAGE,
+  HOMEPAGE_PAGE
 } = route
 
 const DISABLED_PAGES = new Set([
   SIGN_IN_PAGE,
   SIGN_UP_PAGE,
+  HOMEPAGE_PAGE,
   FEED_PAGE,
   TRENDING_PAGE,
   EXPLORE_PAGE,

packages/web/src/components/bottom-bar/BottomBar.tsx

@@ -6,7 +6,7 @@ import { useLocation } from 'react-router'
 import { RouterContext } from 'components/animated-switch/RouterContextProvider'
 import ExploreButton from 'components/bottom-bar/buttons/ExploreButton'
 import FeedButton from 'components/bottom-bar/buttons/FeedButton'
-import LibraryButton from 'components/bottom-bar/buttons/LibraryButton'
+import HomeButton from 'components/bottom-bar/buttons/HomeButton'
 import NotificationsButton from 'components/bottom-bar/buttons/NotificationsButton'
 import TrendingButton from 'components/bottom-bar/buttons/TrendingButton'
 
@@ -24,28 +24,27 @@ const {
   FEED_PAGE,
   TRENDING_PAGE,
   EXPLORE_PAGE,
-  FAVORITES_PAGE,
-  LIBRARY_PAGE,
+  HOMEPAGE_PAGE,
   NOTIFICATION_PAGE
 } = route
 
 type Props = {
   currentPage: string
+  onClickHome: () => void
   onClickFeed: () => void
   onClickTrending: () => void
   onClickExplore: () => void
-  onClickLibrary: () => void
   onClickNotifications: () => void
   isDarkMode: boolean
   isMatrixMode: boolean
 }
 
 const BottomBar = ({
   currentPage,
+  onClickHome,
   onClickFeed,
   onClickTrending,
   onClickExplore,
-  onClickLibrary,
   onClickNotifications,
   isDarkMode,
   isMatrixMode
@@ -68,6 +67,14 @@ const BottomBar = ({
 
   return window.ReactNativeWebView?.postMessage ? null : (
     <div className={styles.bottomBar}>
+      <HomeButton
+        isActive={currentPage === HOMEPAGE_PAGE}
+        darkMode={isDarkMode}
+        onClick={onClick(onClickHome, HOMEPAGE_PAGE)}
+        href={HOMEPAGE_PAGE}
+        isMatrixMode={isMatrixMode}
+        aria-label='Home Page'
+      />
       <TrendingButton
         isActive={currentPage === TRENDING_PAGE}
         darkMode={isDarkMode}
@@ -92,16 +99,6 @@ const BottomBar = ({
         isMatrixMode={isMatrixMode}
         aria-label='Explore Page'
       />
-      <LibraryButton
-        isActive={
-          currentPage === FAVORITES_PAGE || currentPage === LIBRARY_PAGE
-        }
-        darkMode={isDarkMode}
-        onClick={onClick(onClickLibrary, LIBRARY_PAGE)}
-        href={LIBRARY_PAGE}
-        isMatrixMode={isMatrixMode}
-        aria-label='Library Page'
-      />
       <NotificationsButton
         isActive={currentPage === NOTIFICATION_PAGE}
         darkMode={isDarkMode}

packages/web/src/components/bottom-bar/buttons/HomeButton.tsx

@@ -0,0 +1,58 @@
+import { memo, useCallback, MouseEvent } from 'react'
+
+import { IconHome } from '@audius/harmony'
+
+import { SeoLink } from 'components/link'
+
+import styles from './AnimatedBottomButton.module.css'
+import { ButtonProps } from './types'
+
+const HomeButton = ({
+  onClick,
+  href,
+  isActive,
+  ...buttonProps
+}: ButtonProps) => {
+  const handleClick = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault()
+      onClick()
+    },
+    [onClick]
+  )
+
+  const rootProps = {
+    onClick: handleClick,
+    className: styles.animatedButton
+  }
+
+  const content = (
+    <div
+      className={styles.iconWrapper}
+      style={{
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      <IconHome
+        width={28}
+        height={28}
+        color={isActive ? 'active' : 'default'}
+      />
+    </div>
+  )
+
+  return href ? (
+    <SeoLink to={href} {...rootProps} {...buttonProps}>
+      {content}
+    </SeoLink>
+  ) : (
+    <button {...rootProps} {...buttonProps}>
+      {content}
+    </button>
+  )
+}
+
+export default memo(HomeButton)

packages/web/src/components/nav/desktop/LeftNav.tsx

@@ -16,6 +16,7 @@ import { useNavSidebar } from './NavSidebarContext'
 import { NowPlayingArtworkTile } from './NowPlayingArtworkTile'
 import { RouteNav } from './RouteNav'
 import {
+  HomeNavItem,
   FeedNavItem,
   TrendingNavItem,
   ExploreNavItem,
@@ -128,6 +129,7 @@ export const LeftNav = (props: OwnProps) => {
               flex='1 1 auto'
               css={{ overflow: 'hidden' }}
             >
+              <HomeNavItem />
               <TrendingNavItem />
               <FeedNavItem />
               <ExploreNavItem />