Dynamic basename ('/' or '/iris/') depending on initial path; Webpack dev server fully functional

This commit is contained in:
James Barnsley
2022-10-30 16:29:56 +13:00
parent 84bc77a7d6
commit 7564c1bdee
11 changed files with 58 additions and 53 deletions

View File

@ -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... ');

View File

@ -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`}
/>

View File

@ -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' }}

View File

@ -65,7 +65,6 @@ const Track = ({
getDragItem,
events,
}) => {
return null;
const index = getItemIndex();
const [{ isDragging }, drag] = useDrag({
type: 'TRACK',

View File

@ -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>

View File

@ -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;
}

View File

@ -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>

View File

@ -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'];
}
}

View File

@ -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,
);
});

View File

@ -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",