feat: show screen name in screen-saver

Author: olzzon

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

@@ -72,5 +72,12 @@
 			font-size: 2em;
 			letter-spacing: -0.03em;
 		}
+
+		.studio-screen-saver__info__screen-name {
+			font-size: 0.5em;
+			text-align: right;
+			letter-spacing: 0.05em;
+			margin: 0.5em;
+		}
 	}
 }

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

@@ -11,9 +11,11 @@ import { RundownPlaylists } from '../../collections'
 import { StudioId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { CameraScreen } from './CameraScreen'
 import { MeteorPubSub } from '@sofie-automation/meteor-lib/dist/api/pubsub'
+import { useTranslation } from 'react-i18next'
 
 export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.Element {
 	useSubscription(MeteorPubSub.rundownPlaylistForStudio, studioId, true)
+	const { t } = useTranslation()
 
 	const playlist = useTracker(
 		() =>
@@ -32,7 +34,7 @@ export function ClockView({ studioId }: Readonly<{ studioId: StudioId }>): JSX.E
 						<PresenterScreen playlistId={playlist._id} studioId={studioId} />
 					</RundownTimingProvider>
 				) : (
-					<StudioScreenSaver studioId={studioId} ownBackground={true} />
+					<StudioScreenSaver studioId={studioId} ownBackground={true} screenName={t('Presenter Screen')} />
 				)}
 			</Route>
 			<Route path="/countdowns/:studioId/overlay">

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

@@ -558,7 +558,7 @@ export class PrompterViewContent extends React.Component<Translated<IProps & ITr
 						{this.renderAccessRequestButtons()}
 					</>
 				) : this.props.studio ? (
-					<StudioScreenSaver studioId={this.props.studio._id} />
+					<StudioScreenSaver studioId={this.props.studio._id} screenName={t('Prompter View')} />
 				) : this.props.studioId ? (
 					this.renderMessage(t("This studio doesn't exist."))
 				) : (

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

@@ -18,7 +18,7 @@ import { withTranslation } from 'react-i18next'
 interface IProps {
 	// the studio to be displayed in the screen saver
 	studioId: StudioId
-
+	screenName?: string
 	ownBackground?: boolean
 }
 
@@ -360,6 +360,9 @@ const StudioScreenSaverContent = withTranslation()(
 								<div className="studio-screen-saver__info__rundown">{this.props.studio?.name}</div>
 							)
 						)}
+						{this.props.screenName && (
+							<div className="studio-screen-saver__info__screen-name">{this.props.screenName}</div>
+						)}
 					</div>
 				</div>
 			)