wip

Author: Julusian

packages/webui/src/client/lib/ui/icons/notifications.tsx

@@ -1,4 +1,5 @@
 import { JSX } from 'react'
+import { ROOT_URL_PATH_PREFIX } from '../../../url'
 
 export function CriticalIcon(): JSX.Element {
 	return (
@@ -167,7 +168,7 @@ export function WarningIconSmall(): JSX.Element {
 // }
 
 export function WarningIconSmallWorkingOnIt(): JSX.Element {
-	return <img src="/images/warning-transferring.webp" width="20" height="20" alt="Warning" />
+	return <img src={ROOT_URL_PATH_PREFIX + '/images/warning-transferring.webp'} width="20" height="20" alt="Warning" />
 }
 
 export function InformationIconSmall(): JSX.Element {

packages/webui/src/client/ui/App.tsx

@@ -146,12 +146,16 @@ export const App: React.FC = function App() {
 		})
 	}, [])
 
-	console.log('setup router', ROOT_URL_PATH_PREFIX)
-
 	return (
 		<UserPermissionsContext.Provider value={roles}>
 			<Router getUserConfirmation={onNavigationUserConfirmation} basename={ROOT_URL_PATH_PREFIX}>
-				<div className="container-fluid header-clear">
+				<div
+					className="container-fluid header-clear"
+					style={{
+						// @ts-expect-error custom variable
+						'--url-base-path': ROOT_URL_PATH_PREFIX,
+					}}
+				>
 					{/* Header switch - render the usual header for all pages but the rundown view */}
 					<ErrorBoundary>
 						<Switch>

packages/webui/src/client/ui/FloatingInspectors/NoraFloatingInspector.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useImperativeHandle } from 'react'
 import _ from 'underscore'
 import { getNoraContentSteps } from '../SegmentContainer/PieceMultistepChevron'
 import Escape from './../../lib/Escape'
+import { ROOT_URL_PATH_PREFIX } from '../../url'
 
 interface IPropsHeader {
 	noraContent: NoraContent | undefined
@@ -206,7 +207,7 @@ export class NoraPreviewRenderer extends React.Component<{}, IStateHeader> {
 					ref={this._setRootElement}
 				>
 					<div className="preview">
-						<img src="/images/previewBG.jpg" alt="" />
+						<img src={ROOT_URL_PATH_PREFIX + '/images/previewBG.jpg'} alt="" />
 						{rendererUrl && (
 							<iframe
 								key={rendererUrl} // Use the url as the key, so that the old renderer unloads immediately when changing url

packages/webui/src/client/ui/Settings/SystemManagement.tsx

@@ -30,6 +30,7 @@ import { WrappedOverridableItemNormal, useOverrideOpHelper } from './util/Overri
 import { CheckboxControl } from '../../lib/Components/Checkbox'
 import { CombinedMultiLineTextInputControl, MultiLineTextInputControl } from '../../lib/Components/MultiLineTextInput'
 import { TextInputControl } from '../../lib/Components/TextInput'
+import { createPrivateApiPath } from '../../url'
 
 interface WithCoreSystemProps {
 	coreSystem: ICoreSystem

packages/webui/src/client/ui/StudioScreenSaver/StudioScreenSaver.tsx

@@ -14,6 +14,7 @@ import { StudioId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { RundownPlaylists } from '../../collections'
 import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
 import { withTranslation } from 'react-i18next'
+import { ROOT_URL_PATH_PREFIX } from '../../url'
 
 interface IProps {
 	// the studio to be displayed in the screen saver
@@ -337,7 +338,7 @@ const StudioScreenSaverContent = withTranslation()(
 				>
 					<object
 						className="studio-screen-saver__bkg"
-						data="/images/screen-saver-bkg.svg"
+						data={ROOT_URL_PATH_PREFIX + '/images/screen-saver-bkg.svg'}
 						type="image/svg+xml"
 					></object>
 					<div

packages/webui/src/client/ui/i18n.ts

@@ -14,6 +14,7 @@ import { interpollateTranslation } from '@sofie-automation/corelib/dist/Translat
 import { TranslationsBundleId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { TranslationsBundles } from '../collections'
 import { catchError } from '../lib/lib'
+import { ROOT_URL_PATH_PREFIX } from '../url'
 
 const i18nOptions = {
 	fallbackLng: {
@@ -45,7 +46,7 @@ const i18nOptions = {
 	},
 
 	backend: {
-		loadPath: '/locales/{{lng}}/{{ns}}.json',
+		loadPath: ROOT_URL_PATH_PREFIX + '/locales/{{lng}}/{{ns}}.json',
 	},
 
 	detection: {

scripts/run.mjs

@@ -43,6 +43,8 @@ function watchMeteor() {
 		console.log('No meteor-settings.json')
 	}
 
+	const rootUrl = process.env.ROOT_URL ? new URL(process.env.ROOT_URL) : null
+
 	return [
 		{
 			command: "yarn watch-types --preserveWatchOutput",
@@ -67,8 +69,8 @@ function watchMeteor() {
 			name: "VITE",
 			prefixColor: "yellow",
 			env: {
-				SOFIE_BASE_PATH: '/sofie', // nocommit - HACK
-			}
+				SOFIE_BASE_PATH: rootUrl.pathname.length > 1 ? rootUrl.pathname : '',
+			},
 		},
 	];
 }