Merge pull request Sofie-Automation#1273 from bbc/upstream/r52-ui-bugs

jstarpl · web-flow · commit 101b3695ea80 · 2024-10-03T10:35:33.000+02:00
fix: vite related ui bugs
diff --git a/meteor/server/api/rest/koa.ts b/meteor/server/api/rest/koa.ts
@@ -18,6 +18,7 @@ declare module 'http' {
 }
 
 const rootRouter = new KoaRouter()
+const boundRouterPaths: string[] = []
 
 Meteor.startup(() => {
 	const koaApp = new Koa()
@@ -51,7 +52,8 @@ Meteor.startup(() => {
 
 	// serve the webui through koa
 	// This is to avoid meteor injecting anything into the served html
-	koaApp.use(staticServe(public_dir))
+	const webuiServer = staticServe(public_dir)
+	koaApp.use(webuiServer)
 	logger.debug(`Serving static files from ${public_dir}`)
 
 	// Serve the meteor runtime config
@@ -66,9 +68,31 @@ Meteor.startup(() => {
 	})
 
 	koaApp.use(rootRouter.routes()).use(rootRouter.allowedMethods())
+
+	koaApp.use(async (ctx, next) => {
+		if (ctx.method !== 'GET') return next()
+
+		// Don't use the fallback for certain paths
+		if (ctx.path.startsWith('/assets/')) return next()
+
+		// Don't use the fallback for anything handled by another router
+		// This does not feel efficient, but koa doesn't appear to have any shared state between the router handlers
+		for (const bindPath of boundRouterPaths) {
+			if (ctx.path.startsWith(bindPath)) return next()
+		}
+
+		// fallback to the root file
+		ctx.path = '/'
+		return webuiServer(ctx, next)
+	})
 })
 
 export function bindKoaRouter(koaRouter: KoaRouter, bindPath: string): void {
+	// Track this path as having a router
+	let bindPathFull = bindPath
+	if (!bindPathFull.endsWith('/')) bindPathFull += '/'
+	boundRouterPaths.push(bindPathFull)
+
 	rootRouter.use(bindPath, koaRouter.routes()).use(bindPath, koaRouter.allowedMethods())
 }
 
diff --git a/packages/.yarn/patches/timecode-npm-0.0.4-82bde9e6fe.patch b/packages/.yarn/patches/timecode-npm-0.0.4-82bde9e6fe.patch
@@ -0,0 +1,11 @@
+diff --git a/lib/timecode.js b/lib/timecode.js
+index ef4028e2ebc3b5480e93d88a38627454553e3502..a521b33cd239c38dfced835410aa57e8be9246ca 100644
+--- a/lib/timecode.js
++++ b/lib/timecode.js
+@@ -217,3 +217,5 @@ var exports = exports || window;
+ 
+ exports.Timecode = Timecode;
+ 
++// Vite needs a more modern export
++module.exports = { Timecode }
+\ No newline at end of file
diff --git a/packages/package.json b/packages/package.json
@@ -68,5 +68,8 @@
 		"typescript": "~4.9.5"
 	},
 	"name": "packages",
-	"packageManager": "yarn@3.5.0"
+	"packageManager": "yarn@3.5.0",
+	"resolutions": {
+		"timecode@0.0.4": "patch:timecode@npm%3A0.0.4#./.yarn/patches/timecode-npm-0.0.4-82bde9e6fe.patch"
+	}
 }
diff --git a/packages/webui/.eslintrc.cjs b/packages/webui/.eslintrc.cjs
@@ -42,7 +42,7 @@ const tsBase = {
 	extends: [...tsExtends],
 	plugins: tsPlugins,
 	...tsParser,
-	parserOptions: { project: './packages/webui/tsconfig.eslint.json' },
+	parserOptions: { project: './tsconfig.eslint.json' },
 	settings: {
 		node: {
 			tryExtensions: ['.js', '.json', '.node', '.ts', '.tsx', '.d.ts'],
diff --git a/packages/webui/index.html b/packages/webui/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <head>
 	<title>Sofie</title>
 	<meta charset="utf-8" />
diff --git a/packages/webui/src/client/styles/main.scss b/packages/webui/src/client/styles/main.scss
@@ -30,7 +30,6 @@ input {
 @import 'prompter';
 @import 'rundownList';
 @import 'rundownSystemStatus';
-@import 'rundownView';
 @import 'settings';
 @import 'splitDropdown';
 @import 'statusbar';
@@ -104,6 +103,8 @@ input {
 @import '../ui/RundownView/MediaStatusPopUp/MediaStatusPopUpSegmentRule.scss';
 @import '../ui/SegmentAdlibTesting/SegmentAdlibTesting.scss';
 
+@import 'rundownView';
+
 body {
 	overscroll-behavior: none;
 	touch-action: pan-x pan-y;
diff --git a/packages/webui/src/client/ui/SegmentTimeline/TimelineGrid.tsx b/packages/webui/src/client/ui/SegmentTimeline/TimelineGrid.tsx
@@ -21,7 +21,10 @@ declare class FontFace {
 	load(): void
 }
 
-const LABEL_FONT_URL = 'url("/fonts/roboto-gh-pages/fonts/Light/Roboto-Light.woff")'
+const LABEL_FONT_URL = `url("${new URL(
+	'../../../fonts/roboto-gh-pages/fonts/Light/Roboto-Light.woff2',
+	import.meta.url
+)}")`
 const LABEL_COLOR = 'rgb(80,80,80)'
 const SHORT_LINE_GRID_COLOR = 'rgb(112,112,112)'
 const LONG_LINE_GRID_COLOR = 'rgb(80,80,80)'
diff --git a/packages/yarn.lock b/packages/yarn.lock
@@ -26028,6 +26028,13 @@ asn1@evs-broadcast/node-asn1:
   languageName: node
   linkType: hard
 
+"timecode@patch:timecode@npm%3A0.0.4#./.yarn/patches/timecode-npm-0.0.4-82bde9e6fe.patch::locator=packages%40workspace%3A.":
+  version: 0.0.4
+  resolution: "timecode@patch:timecode@npm%3A0.0.4#./.yarn/patches/timecode-npm-0.0.4-82bde9e6fe.patch::version=0.0.4&hash=4d4986&locator=packages%40workspace%3A."
+  checksum: da05fb8e2f907a5bdb538c00ccaf216447337a568d9efddcb3835c130929fef2aeb864a5eba0381847e9404dbb412012806e0e02fd881562c82ae23c61ef139c
+  languageName: node
+  linkType: hard
+
 "timeline-state-resolver-types@npm:9.2.0-nightly-release52-20240909-111856-517f0ee37.0":
   version: 9.2.0-nightly-release52-20240909-111856-517f0ee37.0
   resolution: "timeline-state-resolver-types@npm:9.2.0-nightly-release52-20240909-111856-517f0ee37.0"

-Original file line number
+Diff line change
 		"typescript": "~4.9.5"
 	},
 	"name": "packages",
 -	"packageManager": "[email protected]"
 +	"packageManager": "[email protected]",
 +	"resolutions": {
 +		"[email protected]": "patch:timecode@npm%3A0.0.4#./.yarn/patches/timecode-npm-0.0.4-82bde9e6fe.patch"
 +	}
+}
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<!DOCTYPE html>`
`1`	`2`	`<head>`
`2`	`3`	`<title>Sofie</title>`
`3`	`4`	`<meta charset="utf-8" />`