From 7564c1bdeebb971afbba515d9fcb7c8fb840bb46 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Sun, 30 Oct 2022 16:29:56 +1300
Subject: [PATCH] Dynamic basename ('/' or '/iris/') depending on initial path;
 Webpack dev server fully functional

---
 src/index.html                           | 46 ++++++++++++------------
 src/js/components/Icon.js                |  4 +--
 src/js/components/MediaSession.js        |  2 +-
 src/js/components/Track.js               |  1 -
 src/js/index.js                          |  2 +-
 src/js/util/helpers.js                   |  2 +-
 src/js/views/Discover/Recommendations.js |  2 +-
 src/js/views/Library/Browse.js           | 34 +++++++++---------
 src/js/views/Modals/Reset.js             |  2 +-
 src/manifest.json                        | 10 +++---
 webpack.config.js                        |  6 ++++
 11 files changed, 58 insertions(+), 53 deletions(-)

diff --git a/src/index.html b/src/index.html
index e1144923..77c25947 100755
--- a/src/index.html
+++ b/src/index.html
@@ -7,7 +7,7 @@
 	<meta content="width=device-width, initial-scale=1" name="viewport" />
 	<meta name="viewport" content="width=device-width" />
 
-	<link rel="manifest" href="/iris/manifest.json" crossorigin="use-credentials" />
+	<link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
 
 	<!-- App setup -->
 	<meta name="apple-mobile-web-app-capable" content="yes" />
@@ -18,24 +18,24 @@
 	<meta name="theme-color" content="#222222" />
 
 	<!-- Icons -->
-	<link rel="apple-touch-startup-image" href="/iris/assets/app-icon_512.png" />
-	<link rel="apple-touch-icon" sizes="192x192" href="/iris/assets/app-icon_192.png" />
-	<link rel="apple-touch-icon" sizes="512x512" href="/iris/assets/app-icon_512.png" />
-	<link rel="apple-touch-icon" sizes="57x57" href="/iris/assets/app-icon_57.png">
-	<link rel="apple-touch-icon" sizes="60x60" href="/iris/assets/app-icon_60.png">
-	<link rel="apple-touch-icon" sizes="72x72" href="/iris/assets/app-icon_72.png">
-	<link rel="apple-touch-icon" sizes="76x76" href="/iris/assets/app-icon_76.png">
-	<link rel="apple-touch-icon" sizes="114x114" href="/iris/assets/app-icon_114.png">
-	<link rel="apple-touch-icon" sizes="120x120" href="/iris/assets/app-icon_120.png">
-	<link rel="apple-touch-icon" sizes="144x144" href="/iris/assets/app-icon_144.png">
-	<link rel="apple-touch-icon" sizes="152x152" href="/iris/assets/app-icon_152.png">
-	<link rel="apple-touch-icon" sizes="180x180" href="/iris/assets/app-icon_180.png">
+	<link rel="apple-touch-startup-image" href="assets/app-icon_512.png" />
+	<link rel="apple-touch-icon" sizes="192x192" href="assets/app-icon_192.png" />
+	<link rel="apple-touch-icon" sizes="512x512" href="assets/app-icon_512.png" />
+	<link rel="apple-touch-icon" sizes="57x57" href="assets/app-icon_57.png">
+	<link rel="apple-touch-icon" sizes="60x60" href="assets/app-icon_60.png">
+	<link rel="apple-touch-icon" sizes="72x72" href="assets/app-icon_72.png">
+	<link rel="apple-touch-icon" sizes="76x76" href="assets/app-icon_76.png">
+	<link rel="apple-touch-icon" sizes="114x114" href="assets/app-icon_114.png">
+	<link rel="apple-touch-icon" sizes="120x120" href="assets/app-icon_120.png">
+	<link rel="apple-touch-icon" sizes="144x144" href="assets/app-icon_144.png">
+	<link rel="apple-touch-icon" sizes="152x152" href="assets/app-icon_152.png">
+	<link rel="apple-touch-icon" sizes="180x180" href="assets/app-icon_180.png">
 
-	<link class="favicon" rel="shortcut icon" type="image/ico" href="/iris/assets/favicon.png" />
-	<link class="favicon" rel="shortcut icon" type="image/x-icon" href="/iris/assets/favicon.png" />
-	<link class="favicon" rel="shortcut-icon" href="/iris/assets/favicon.png" />
+	<link class="favicon" rel="shortcut icon" type="image/ico" href="assets/favicon.png" />
+	<link class="favicon" rel="shortcut icon" type="image/x-icon" href="assets/favicon.png" />
+	<link class="favicon" rel="shortcut-icon" href="assets/favicon.png" />
 
-	<link rel="mask-icon" href="/iris/assets/app-icon.svg" color="#08d58f" />
+	<link rel="mask-icon" href="assets/app-icon.svg" color="#08d58f" />
 
 	<!-- Loading screen styles -->
 	<style>
@@ -101,7 +101,7 @@
 	<div id="app">
 		<!-- ReactJS app gets injected here, replacing the loader -->
 		<div id="app-loading">
-			<img src="/iris/assets/app-icon.svg" id="app-loading-logo" />
+			<img src="assets/app-icon.svg" id="app-loading-logo" />
 			<div id="app-loading-loader" class="loading"></div>
 			<div id="app-loading-message">
 				<div id="app-loading-message-base"></div>
@@ -115,7 +115,7 @@
 
 <script type="text/javascript">
 	if ('serviceWorker' in navigator){
-		navigator.serviceWorker.register('/iris/service-worker.js')
+		navigator.serviceWorker.register('/service-worker.js')
 			.then(function(registration){
 				console.log('Service worker registered');
 			}).catch(function(error){
@@ -167,11 +167,11 @@
 	}
 
 	if (window.test_mode){ // Test mode, use un-minified code
-		css.href = '/iris/app.css?v='+build;
-		js.src = '/iris/app.js?v='+build;
+		css.href = 'app.css?v='+build;
+		js.src = 'app.js?v='+build;
 	} else { // Production-grade, minified app
-		css.href = '/iris/app.min.css?v='+build;
-		js.src = '/iris/app.min.js?v='+build;
+		css.href = 'app.min.css?v='+build;
+		js.src = 'app.min.js?v='+build;
 	}
 
 	setMessage('js', 'Loading core... ');
diff --git a/src/js/components/Icon.js b/src/js/components/Icon.js
index 0c942798..644529e8 100755
--- a/src/js/components/Icon.js
+++ b/src/js/components/Icon.js
@@ -17,7 +17,7 @@ const Icon = memo(({
       return (
         <span className={fullClassName}>
           <img
-            src={`/iris/assets/icons/${name}.svg`}
+            src={`/assets/icons/${name}.svg`}
             onClick={onClick}
             alt={`${name} icon`}
           />
@@ -29,7 +29,7 @@ const Icon = memo(({
         <span className={fullClassName}>
           <img
             className={fullClassName}
-            src={`/iris/assets/icons/${name}.gif`}
+            src={`/assets/icons/${name}.gif`}
             onClick={onClick}
             alt={`${name} icon`}
           />
diff --git a/src/js/components/MediaSession.js b/src/js/components/MediaSession.js
index 8ad3251d..3302a169 100644
--- a/src/js/components/MediaSession.js
+++ b/src/js/components/MediaSession.js
@@ -139,7 +139,7 @@ class MediaSession extends React.Component {
       // eslint-disable-next-line jsx-a11y/media-has-caption
       <audio
         id="media-session"
-        src="/iris/assets/silence.mp3"
+        src="/assets/silence.mp3"
         autoPlay
         loop
         style={{ display: 'none' }}
diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index 4f2b1801..8d1207d8 100755
--- a/src/js/components/Track.js
+++ b/src/js/components/Track.js
@@ -65,7 +65,6 @@ const Track = ({
   getDragItem,
   events,
 }) => {
-  return null;
   const index = getItemIndex();
   const [{ isDragging }, drag] = useDrag({
     type: 'TRACK',
diff --git a/src/js/index.js b/src/js/index.js
index 3df984d0..ccaddc1f 100755
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -13,7 +13,7 @@ const root = createRoot(document.getElementById('app'));
 root.render(
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
-      <BrowserRouter basename="/iris">
+      <BrowserRouter basename={window.location.pathname.indexOf('/iris') > -1 ? '/iris' : '/'}>
         <Routes>
           <Route path="*" element={<App />} />
         </Routes>
diff --git a/src/js/util/helpers.js b/src/js/util/helpers.js
index bb4190f5..373ce7af 100755
--- a/src/js/util/helpers.js
+++ b/src/js/util/helpers.js
@@ -55,7 +55,7 @@ const setFavicon = function (filename) {
     const new_link = document.createElement('link');
     new_link.className = link.className;
     new_link.rel = link.rel;
-    new_link.href = `/iris/assets/${filename}`;
+    new_link.href = `/assets/${filename}`;
     if (link.type) {
       new_link.type = link.type;
     }
diff --git a/src/js/views/Discover/Recommendations.js b/src/js/views/Discover/Recommendations.js
index cc7e2eeb..1cfd1e2e 100755
--- a/src/js/views/Discover/Recommendations.js
+++ b/src/js/views/Discover/Recommendations.js
@@ -526,7 +526,7 @@ class Recommendations extends React.Component {
 
     return (
       <div className="view discover-view preserve-3d">
-        {theme === 'dark' && <Parallax image="/iris/assets/backgrounds/discover.jpg" />}
+        {theme === 'dark' && <Parallax image="/assets/backgrounds/discover.jpg" />}
         <div className="intro preserve-3d">
           <div className="intro__liner">
             <h1><I18n path="discover.recommendations.body_title" /></h1>
diff --git a/src/js/views/Library/Browse.js b/src/js/views/Library/Browse.js
index 9bf45ea0..32e71b39 100755
--- a/src/js/views/Library/Browse.js
+++ b/src/js/views/Library/Browse.js
@@ -45,80 +45,80 @@ class Browse extends React.Component {
       for (const subdirectory of directory.subdirectories) {
         switch (subdirectory.name) {
           case 'Dirble':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-dirble.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-dirble.jpg'];
             break;
 
           case 'Files':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-folders.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-folders.jpg'];
             break;
 
           case 'Local media':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-folders.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-folders.jpg'];
             break;
 
           case 'Spotify':
           case 'Spotify Browse':
           case 'Spotify Web Browse':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-spotify.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-spotify.jpg'];
             break;
 
           case 'Spotify Tunigo':
           case 'Tunigo':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-tunigo.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-tunigo.jpg'];
             break;
 
           case 'TuneIn':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-tunein.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-tunein.jpg'];
             break;
 
           case 'SoundCloud':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-soundcloud.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-soundcloud.jpg'];
             break;
 
           case 'Mixcloud':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-mixcloud.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-mixcloud.jpg'];
             break;
 
           case 'iTunes Store: Podcasts':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-itunes.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-itunes.jpg'];
             break;
 
           case 'SomaFM':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-somafm.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-somafm.jpg'];
             break;
       
           case 'Jellyfin':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-jellyfin.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-jellyfin.jpg'];
             break;
       
           case 'Podcasts':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-podcasts.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-podcasts.jpg'];
             break;
 
           case 'Tidal':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-tidal.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-tidal.jpg'];
             break;
 
           case 'Google':
           case 'Google Play':
           case 'Google Play Music':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-google.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-google.jpg'];
             break;
 
           case 'YouTube Music':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-youtube.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-youtube.jpg'];
             break;
 
           case 'bandcamp':
           case 'Bandcamp':
-            subdirectory.icons = ['/iris/assets/backgrounds/browse-default.jpg'];
+            subdirectory.icons = ['/assets/backgrounds/browse-default.jpg'];
             break;
 
           default:
             if (subdirectory.images?.medium) {
               subdirectory.icons = [subdirectory.images?.medium];
             } else {
-              subdirectory.icons = ['/iris/assets/backgrounds/browse-default.jpg'];
+              subdirectory.icons = ['/assets/backgrounds/browse-default.jpg'];
             }
         }
 
diff --git a/src/js/views/Modals/Reset.js b/src/js/views/Modals/Reset.js
index 2916195b..95d7542c 100644
--- a/src/js/views/Modals/Reset.js
+++ b/src/js/views/Modals/Reset.js
@@ -140,7 +140,7 @@ class Reset extends React.Component {
       console.log('Reset complete, refreshing...');
       resetState(stateKeysToReset);
       setTimeout(
-        () => closeModal(window.location = `/iris/settings${test_mode ? '?test_mode=0' : ''}`),
+        () => closeModal(window.location = `/settings${test_mode ? '?test_mode=0' : ''}`),
         1000,
       );
     });
diff --git a/src/manifest.json b/src/manifest.json
index bd83ec9d..19347422 100755
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -4,27 +4,27 @@
   "name": "Iris",
   "icons": [
     {
-      "src": "/iris/assets/app-icon_64.png",
+      "src": "/assets/app-icon_64.png",
       "type": "image/png",
       "sizes": "64x64"
     },
     {
-      "src": "/iris/assets/app-icon_192.png",
+      "src": "/assets/app-icon_192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "/iris/assets/app-icon_256.png",
+      "src": "/assets/app-icon_256.png",
       "type": "image/png",
       "sizes": "256x256"
     },
     {
-      "src": "/iris/assets/app-icon_512.png",
+      "src": "/assets/app-icon_512.png",
       "type": "image/png",
       "sizes": "512x512"
     }
   ],
-  "start_url": "/iris/",
+  "start_url": "/",
   "background_color": "#08d58f",
   "theme_color": "#181818",
   "display": "standalone",
diff --git a/webpack.config.js b/webpack.config.js
index dec26fd5..1a7be17e 100755
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -98,6 +98,12 @@ const config = {
   devtool: (isDev ? 'source-map' : false),
   devServer: {
     historyApiFallback: true,
+    static: [
+      {
+        directory: path.join(__dirname, 'mopidy_iris', 'static', 'assets'),
+        publicPath: '/assets/',
+      },
+    ],
   },
 };