wip: misc views

Author: Julusian

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

@@ -219,3 +219,7 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
+
+.xdark {
+	background: #000000;
+}

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

@@ -29,7 +29,6 @@ input {
 @import 'colorPicker';
 @import 'contextMenu';
 @import 'datePicker';
-// @import 'editAttribute';
 @import 'externalMessagesStatus';
 @import 'iconPicker';
 @import 'modalDialog';
@@ -38,7 +37,7 @@ input {
 @import 'propertiesPanel';
 @import 'overflowingContainer';
 @import 'pieceStatusIcon';
-// @import 'prompter';
+@import 'prompter';
 @import 'rundownList';
 @import 'rundownSystemStatus';
 @import 'settings';
@@ -49,7 +48,7 @@ input {
 @import 'systemStatus';
 @import 'testtools';
 @import 'tooltips';
-// @import 'utils';
+@import 'utils';
 @import 'elementSelected';
 
 @import 'countdown/overlay';
@@ -115,24 +114,24 @@ input {
 
 @import 'rundownView';
 
-// body {
-// 	overscroll-behavior: none;
-// 	touch-action: pan-x pan-y;
-// }
+body {
+	overscroll-behavior: none;
+	touch-action: pan-x pan-y;
+}
 
-// :fullscreen ::-webkit-scrollbar {
-// 	background: #252627;
-// }
+:fullscreen ::-webkit-scrollbar {
+	background: #252627;
+}
 
-// :fullscreen ::-webkit-scrollbar-thumb {
-// 	background: #555;
-// 	border: 3px solid #252627;
-// 	border-radius: 10px;
-// }
+:fullscreen ::-webkit-scrollbar-thumb {
+	background: #555;
+	border: 3px solid #252627;
+	border-radius: 10px;
+}
 
-// .scroll-sink {
-// 	overscroll-behavior: none;
-// }
+.scroll-sink {
+	overscroll-behavior: none;
+}
 
 // /* Don't show visited status, since people will browse around the app a lot */
 // a:visited {

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

@@ -23,6 +23,9 @@
 
 		z-index: -1;
 		object-fit: cover;
+
+		// The 'dark' scheme causes this to draw with a white background, so we need to override it
+		color-scheme: none;
 	}
 
 	.studio-screen-saver__info {

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

@@ -8,7 +8,7 @@ import { UIStudios } from './Collections'
 import { StudioId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { RundownPlaylists } from '../collections'
 import { useTranslation } from 'react-i18next'
-import { useSetDocumentClass } from './util/useSetDocumentClass'
+import { useSetDocumentClass, useSetDocumentDarkTheme } from './util/useSetDocumentClass'
 
 export function ActiveRundownView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.Element | null {
 	const { t } = useTranslation()
@@ -60,6 +60,7 @@ function NotFoundMessage({ message }: Readonly<{ message: string }>) {
 	const { t } = useTranslation()
 
 	useSetDocumentClass('dark', 'vertical-overflow-only')
+	useSetDocumentDarkTheme()
 
 	return (
 		<div className="rundown-view rundown-view--unpublished">

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

@@ -28,7 +28,7 @@ import { useBlackBrowserTheme } from '../../../lib/useBlackBrowserTheme'
 import { useWakeLock } from './useWakeLock'
 import { catchError, useDebounce } from '../../../lib/lib'
 import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
-import { useSetDocumentClass } from '../../util/useSetDocumentClass'
+import { useSetDocumentClass, useSetDocumentDarkTheme } from '../../util/useSetDocumentClass'
 
 interface IProps {
 	playlist: DBRundownPlaylist | undefined
@@ -148,8 +148,10 @@ export function CameraScreen({ playlist, studioId }: Readonly<IProps>): JSX.Elem
 	)
 
 	useSetDocumentClass('dark', 'xdark', 'vertical-overflow-only')
+	useSetDocumentDarkTheme()
+
 	useEffect(() => {
-		const containerEl = document.querySelector('#render-target > .container-fluid-custom.header-clear')
+		const containerEl = document.querySelector('#render-target > .container-fluid.header-clear')
 		if (containerEl) containerEl.classList.remove('header-clear')
 
 		return () => {

packages/webui/src/client/ui/ClockView/CameraScreen/index.tsx

@@ -38,7 +38,7 @@ import { UIStudio } from '@sofie-automation/meteor-lib/dist/api/studios'
 import { PieceInstances, RundownLayouts, RundownPlaylists, Rundowns, ShowStyleVariants } from '../../collections'
 import { RundownPlaylistCollectionUtil } from '../../collections/rundownPlaylistUtil'
 import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
-import { useSetDocumentClass } from '../util/useSetDocumentClass'
+import { useSetDocumentClass, useSetDocumentDarkTheme } from '../util/useSetDocumentClass'
 import { useRundownAndShowStyleIdsForPlaylist } from '../util/useRundownAndShowStyleIdsForPlaylist'
 import { RundownPlaylistClientUtil } from '../../lib/rundownPlaylistUtil'
 
@@ -305,6 +305,7 @@ function PresenterScreenContent(props: WithTiming<PresenterScreenProps & Present
 			: undefined
 
 	useSetDocumentClass('dark', 'xdark')
+	useSetDocumentDarkTheme()
 
 	if (presenterLayout && RundownLayoutsAPI.isDashboardLayout(presenterLayout)) {
 		return (

packages/webui/src/client/ui/ClockView/PresenterScreen.tsx

@@ -230,6 +230,7 @@ export class PrompterViewContent extends React.Component<Translated<IProps & ITr
 			'prompter-scrollbar',
 			this.configOptions.showScroll ? 'vertical-overflow-only' : 'no-overflow'
 		)
+		document.body.setAttribute('data-bs-theme', 'dark')
 		window.addEventListener('scroll', this.onWindowScroll)
 
 		this.triggerCheckCurrentTakeMarkers()
@@ -252,6 +253,7 @@ export class PrompterViewContent extends React.Component<Translated<IProps & ITr
 			'prompter-scrollbar',
 			this.configOptions.showScroll ? 'vertical-overflow-only' : 'no-overflow'
 		)
+		document.body.removeAttribute('data-bs-theme')
 		window.removeEventListener('scroll', this.onWindowScroll)
 	}
 

packages/webui/src/client/ui/Prompter/PrompterView.tsx

@@ -141,6 +141,7 @@ const StudioScreenSaverContent = withTranslation()(
 		componentDidMount(): void {
 			if (this.props.ownBackground) {
 				document.body.classList.add('dark', 'xdark')
+				document.body.setAttribute('data-bs-theme', 'dark')
 			}
 
 			window.addEventListener('resize', this.measureElement)
@@ -161,6 +162,7 @@ const StudioScreenSaverContent = withTranslation()(
 		componentWillUnmount(): void {
 			if (this.props.ownBackground) {
 				document.body.classList.remove('dark', 'xdark')
+				document.body.removeAttribute('data-bs-theme')
 			}
 
 			this._nextAnimationFrameRequest && window.cancelAnimationFrame(this._nextAnimationFrameRequest)

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

@@ -13,3 +13,13 @@ export function useSetDocumentClass(...classNames: string[]): void {
 		}
 	}, [JSON.stringify(classNames)])
 }
+
+export function useSetDocumentDarkTheme(): void {
+	useLayoutEffect(() => {
+		document.body.setAttribute('data-bs-theme', 'dark')
+
+		return () => {
+			document.body.removeAttribute('data-bs-theme')
+		}
+	}, [])
+}