wip:

Author: Julusian

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

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

packages/webui/src/client/styles/_header.scss

@@ -18,7 +18,7 @@
 			color: #fff;
 		}
 		.sofie-logo {
-			background: var(--sofie-url-path) center center no-repeat;
+			background: var(--sofie-logo-url) center center no-repeat;
 			background-size: contain;
 			width: 2em;
 			height: 2em;

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

@@ -153,7 +153,7 @@ export const App: React.FC = function App() {
 					className="container-fluid header-clear"
 					style={{
 						// @ts-expect-error custom variable
-						'--sofie-url-path': `url(${ROOT_URL_PATH_PREFIX}/images/sofie-logo.svg)`,
+						'--sofie-logo-url': `url(${relativeToSiteRootUrl('/images/sofie-logo.svg')})`,
 					}}
 				>
 					{/* Header switch - render the usual header for all pages but the rundown view */}

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

@@ -3,7 +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'
+import { relativeToSiteRootUrl } from '../../url'
 
 interface IPropsHeader {
 	noraContent: NoraContent | undefined
@@ -207,7 +207,7 @@ export class NoraPreviewRenderer extends React.Component<{}, IStateHeader> {
 					ref={this._setRootElement}
 				>
 					<div className="preview">
-						<img src={ROOT_URL_PATH_PREFIX + '/images/previewBG.jpg'} alt="" />
+						<img src={relativeToSiteRootUrl('/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/StudioScreenSaver/StudioScreenSaver.tsx

@@ -14,7 +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'
+import { relativeToSiteRootUrl } from '../../url'
 
 interface IProps {
 	// the studio to be displayed in the screen saver
@@ -338,7 +338,7 @@ const StudioScreenSaverContent = withTranslation()(
 				>
 					<object
 						className="studio-screen-saver__bkg"
-						data={ROOT_URL_PATH_PREFIX + '/images/screen-saver-bkg.svg'}
+						data={relativeToSiteRootUrl('/images/screen-saver-bkg.svg')}
 						type="image/svg+xml"
 					></object>
 					<div

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

@@ -14,7 +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'
+import { relativeToSiteRootUrl } from '../url'
 
 const i18nOptions = {
 	fallbackLng: {
@@ -46,7 +46,7 @@ const i18nOptions = {
 	},
 
 	backend: {
-		loadPath: ROOT_URL_PATH_PREFIX + '/locales/{{lng}}/{{ns}}.json',
+		loadPath: relativeToSiteRootUrl('/locales/{{lng}}/{{ns}}.json'),
 	},
 
 	detection: {

packages/webui/src/main.tsx

@@ -17,7 +17,7 @@ import './client/lib/uncaughtErrorHandler'
 import './client/lib/dev'
 import './client/lib/systemTime'
 
-import { ROOT_URL_PATH_PREFIX } from './client/url'
+import { relativeToSiteRootUrl } from './client/url'
 import App from './client/ui/App'
 import { logger } from './client/lib/logging'
 import './client/lib/logStatus'
@@ -27,7 +27,7 @@ if ('serviceWorker' in navigator) {
 	window.addEventListener('load', () => {
 		// in some versions of Chrome, registering the Service Worker over HTTP throws an arror
 		if (window.location.protocol === 'https:' || window.location.hostname === 'localhost') {
-			navigator.serviceWorker.register(ROOT_URL_PATH_PREFIX + '/sw.js').catch((err) => {
+			navigator.serviceWorker.register(relativeToSiteRootUrl('/sw.js')).catch((err) => {
 				logger.error('Error registering serviceWorker', err)
 			})
 		}