Blueprint contents localisation

.editorconfig

@@ -1,5 +1,6 @@
 [*]
 indent_style = tab
+end_of_line = lf
 
 [*.{cs,js,ts,json}]
 indent_size = 4

meteor/client/lib/notifications/NotificationCenterPanel.tsx

@@ -10,6 +10,7 @@ import { sofieWarningIcon as WarningIcon } from './warningIcon'
 import { ContextMenuTrigger, ContextMenu, MenuItem } from 'react-contextmenu'
 import * as _ from 'underscore'
 import { SegmentId } from '../../../lib/collections/Segments'
+import { translateMessage, isTranslatableMessage } from '../../../lib/api/TranslatableMessage'
 
 interface IPopUpProps {
 	item: Notification
@@ -43,6 +44,8 @@ class NotificationPopUp extends React.Component<IPopUpProps> {
 		const defaultAction: NotificationAction | undefined =
 			defaultActions.length === 1 && allActions.length === 1 ? defaultActions[0] : undefined
 
+		const message = isTranslatableMessage(item.message) ? translateMessage(item.message) : item.message
+
 		return (
 			<div
 				className={ClassNames('notification-pop-up', {
@@ -62,7 +65,7 @@ class NotificationPopUp extends React.Component<IPopUpProps> {
 					<WarningIcon />
 				</div>
 				<div className="notification-pop-up__contents">
-					{item.message}
+					{message}
 					{!defaultAction && allActions.length ? (
 						<div className="notification-pop-up__actions">
 							{_.map(allActions, (action: NotificationAction, i: number) => {
@@ -210,15 +213,19 @@ export const NotificationCenterPopUps = translateWithTracker<IProps, IState, ITr
 					.sort((a, b) => Notification.compare(a, b))
 			}
 
-			const displayList = notifications.map((item) => (
-				<NotificationPopUp
-					key={item.created + (item.message || 'undefined').toString() + (item.id || '')}
-					item={item}
-					onDismiss={() => this.dismissNotification(item)}
-					showDismiss={!item.persistent || !this.props.showSnoozed}
-					isHighlighted={item.source === highlightedSource && item.status === highlightedLevel}
-				/>
-			))
+			const displayList = notifications.map((item) => {
+				const message = isTranslatableMessage(item.message) ? translateMessage(item.message) : item.message
+
+				return (
+					<NotificationPopUp
+						key={item.created + (message || 'undefined').toString() + (item.id || '')}
+						item={item}
+						onDismiss={() => this.dismissNotification(item)}
+						showDismiss={!item.persistent || !this.props.showSnoozed}
+						isHighlighted={item.source === highlightedSource && item.status === highlightedLevel}
+					/>
+				)
+			})
 
 			return (
 				(this.props.showEmptyListLabel || displayList.length > 0) && (

meteor/client/lib/notifications/notifications.ts

@@ -7,6 +7,7 @@ import { EventEmitter } from 'events'
 import { Time, ProtectedString, unprotectString, isProtectedString, protectString } from '../../../lib/lib'
 import { HTMLAttributes } from 'react'
 import { SegmentId } from '../../../lib/collections/Segments'
+import { ITranslatableMessage } from '../../../lib/api/TranslatableMessage'
 
 /**
  * Priority level for Notifications.
@@ -305,7 +306,7 @@ export const NotificationCenter = new NotificationCenter0()
 export class Notification extends EventEmitter {
 	id: string | undefined
 	status: NoticeLevel
-	message: string | React.ReactElement<HTMLElement> | null
+	message: string | React.ReactElement<HTMLElement> | ITranslatableMessage | null
 	source: NotificationsSource
 	persistent?: boolean
 	timeout?: number
@@ -317,7 +318,7 @@ export class Notification extends EventEmitter {
 	constructor(
 		id: string | ProtectedString<any> | undefined,
 		status: NoticeLevel,
-		message: string | React.ReactElement<HTMLElement> | null,
+		message: string | React.ReactElement<HTMLElement> | ITranslatableMessage | null,
 		source: NotificationsSource,
 		created?: Time,
 		persistent?: boolean,

meteor/client/ui/RundownView/RundownNotifier.ts

@@ -26,7 +26,7 @@ import { Rundowns, RundownId, Rundown } from '../../../lib/collections/Rundowns'
 import { doModalDialog } from '../../lib/ModalDialog'
 import { doUserAction, UserAction } from '../../lib/userAction'
 // import { withTranslation, getI18n, getDefaults } from 'react-i18next'
-import { i18nTranslator } from '../i18n'
+import { i18nTranslator as t } from '../i18n'
 import { PartNote, NoteType, TrackedNote } from '../../../lib/api/notes'
 import { Pieces, PieceId } from '../../../lib/collections/Pieces'
 import { PeripheralDevicesAPI } from '../../lib/clientAPI'
@@ -158,7 +158,6 @@ class RundownViewNotifier extends WithManagedTracker {
 	}
 
 	private reactiveRundownStatus(playlistId: RundownPlaylistId) {
-		const t = i18nTranslator
 		let oldNoteIds: Array<string> = []
 
 		const rRundowns = reactiveData.getRRundowns(playlistId, {
@@ -271,8 +270,6 @@ class RundownViewNotifier extends WithManagedTracker {
 	}
 
 	private reactivePeripheralDeviceStatus(studioId: StudioId | undefined) {
-		const t = i18nTranslator
-
 		let oldDevItemIds: PeripheralDeviceId[] = []
 		let reactivePeripheralDevices: ReactiveVar<PeripheralDevice[]> | undefined
 		if (studioId) {
@@ -381,7 +378,6 @@ class RundownViewNotifier extends WithManagedTracker {
 	}
 
 	private reactivePartNotes(playlistId: RundownPlaylistId) {
-		const t = i18nTranslator
 		let allNotesPollInterval: number
 		let allNotesPollLock: boolean = false
 		const NOTES_POLL_INTERVAL = BACKEND_POLL_INTERVAL
@@ -474,8 +470,6 @@ class RundownViewNotifier extends WithManagedTracker {
 	}
 
 	private reactiveMediaStatus(playlistId: RundownPlaylistId, showStyleBase: ShowStyleBase, studio: Studio) {
-		const t = i18nTranslator
-
 		let mediaObjectsPollInterval: number
 		let mediaObjectsPollLock: boolean = false
 		const MEDIAOBJECTS_POLL_INTERVAL = BACKEND_POLL_INTERVAL
@@ -649,7 +643,6 @@ class RundownViewNotifier extends WithManagedTracker {
 	}
 
 	private reactiveQueueStatus(studioId: StudioId, playlistId: RundownPlaylistId) {
-		const t = i18nTranslator
 		let reactiveUnsentMessageCount: ReactiveVar<number>
 		meteorSubscribe(PubSub.externalMessageQueue, { studioId: studioId, playlistId })
 		reactiveUnsentMessageCount = reactiveData.getUnsentExternalMessageCount(studioId, playlistId)
@@ -675,8 +668,6 @@ class RundownViewNotifier extends WithManagedTracker {
 	}
 
 	private updateVersionAndConfigStatus(playlistId: RundownPlaylistId) {
-		const t = i18nTranslator
-
 		// Doing the check server side, to avoid needing to subscribe to the blueprint and showStyleVariant
 		MeteorCall.rundown
 			.rundownPlaylistNeedsResync(playlistId)
@@ -875,8 +866,6 @@ class RundownViewNotifier extends WithManagedTracker {
 	}
 
 	private makeDeviceMessage(device: PeripheralDevice): string {
-		const t = i18nTranslator
-
 		if (!device.connected) {
 			return t('Device {{deviceName}} is disconnected', { deviceName: device.name })
 		}

meteor/client/ui/i18n.ts

@@ -2,52 +2,125 @@ import i18n, { TFunction } from 'i18next'
 import Backend from 'i18next-xhr-backend'
 import LanguageDetector from 'i18next-browser-languagedetector'
 import { initReactI18next } from 'react-i18next'
+import { WithManagedTracker } from '../lib/reactiveData/reactiveDataHelper'
+import { PubSub } from '../../lib/api/pubsub'
+import { TranslationsBundles } from '../../lib/collections/TranslationsBundles'
 
-let i18nTranslator: TFunction
-const i18nInstancePromise = i18n
-	.use(Backend)
-	.use(LanguageDetector)
-	.use(initReactI18next)
-	.init(
-		{
-			fallbackLng: {
-				nn: ['nb', 'en'],
-				default: ['en'],
-			},
-
-			// have a common namespace used around the full app
-			ns: ['translations'],
-			defaultNS: 'translations',
-
-			debug: false,
-			joinArrays: '\n',
-
-			whitelist: ['en', 'nb', 'nn', 'sv'],
-
-			keySeparator: '→',
-			nsSeparator: '⇒',
-			pluralSeparator: '⥤',
-			contextSeparator: '⥤',
-
-			interpolation: {
-				escapeValue: false, // not needed for react!!
-			},
-
-			react: {
-				wait: true,
-				useSuspense: false,
-			},
-		},
-		(err, t) => {
+const i18nOptions = {
+	fallbackLng: {
+		nn: ['nb', 'en'],
+		default: ['en'],
+	},
+
+	// have a common namespace used around the full app
+	ns: ['translations'],
+	defaultNS: 'translations',
+
+	debug: false,
+	joinArrays: '\n',
+
+	whitelist: ['en', 'nb', 'nn', 'sv'],
+
+	keySeparator: '→',
+	nsSeparator: '⇒',
+	pluralSeparator: '⥤',
+	contextSeparator: '⥤',
+
+	interpolation: {
+		escapeValue: false, // not needed for react!!
+	},
+
+	react: {
+		wait: true,
+		useSuspense: false,
+	},
+}
+
+class I18nContainer extends WithManagedTracker {
+	i18nInstance: typeof i18n
+
+	constructor() {
+		super()
+
+		this.i18nInstance = i18n
+			.use(Backend)
+			.use(LanguageDetector)
+			.use(initReactI18next)
+
+		this.i18nInstance.init(i18nOptions, (err: Error, t: TFunction) => {
 			if (err) {
-				console.error('Error initializing i18Next', err)
+				console.error('Error initializing i18Next:', err)
 			} else {
-				i18nTranslator = t
+				this.i18nTranslator = t
+				console.debug('i18nTranslator init complete')
 			}
+		})
+
+		this.subscribe(PubSub.translationsBundles, {})
+		this.autorun(() => {
+			console.debug('ManagedTracker autorun...')
+			const bundles = TranslationsBundles.find().fetch()
+			console.debug(`Got ${bundles.length} bundles from database`)
+			for (const bundle of bundles) {
+				this.i18nInstance.addResourceBundle(
+					bundle.language,
+					bundle.namespace || i18nOptions.defaultNS,
+					bundle.data,
+					true,
+					true
+				)
+				console.debug('i18instance updated', { bundle: { lang: bundle.language, ns: bundle.namespace } })
+			}
+		})
+	}
+	// return key until real translator comes online
+	i18nTranslator(key, ...args) {
+		console.debug('i18nTranslator placeholder called', { key, args })
+
+		if (!args[0]) {
+			return key
 		}
-	)
 
-export { i18nInstancePromise, i18nTranslator }
+		if (typeof args[0] === 'string') {
+			return key || args[0]
+		}
+
+		if (args[0].defaultValue) {
+			return args[0].defaultValue
+		}
+
+		if (typeof key !== 'string') {
+			return key
+		}
+
+		const options = args[0]
+		if (options?.replace) {
+			Object.assign(options, { ...options.replace })
+		}
+
+		const interpolated = String(key)
+		for (const placeholder of key.match(/[^{\}]+(?=})/g) || []) {
+			const value = options[placeholder] || placeholder
+			interpolated.replace(`{{${placeholder}}}`, value)
+		}
+
+		return interpolated
+	}
+}
+
+const container = new I18nContainer()
+const i18nTranslator: TFunction = (...args) => {
+	console.debug('i18nTranslator call', args)
+	// if (args[0] === `Device {{deviceName}} is disconnected`) {
+	// 	console.debug(`Got ${args[0]}, aborting`, args)
+	// 	return args[0]
+	// }
+	const result = container.i18nTranslator(args)
+	console.debug(`=> ${result}`)
+	return result
+}
+
+export { i18nTranslator }
 
 /*
  Notes:

meteor/lib/api/TranslatableMessage.ts

@@ -0,0 +1,64 @@
+import { i18nTranslator } from '../../client/ui/i18n'
+
+/**
+ * @enum - A translatable message (i18next)
+ */
+export interface ITranslatableMessage {
+	/** the message key (we use literal strings in English as keys for now) */
+	key: string
+	/** arguments for the message template */
+	args?: { [key: string]: any }
+	/** namespace used */
+	namespaces?: Array<string>
+}
+
+/**
+ * Translates a message with arguments applied. Uses the application's
+ * translation service (see {@link '../../client/ui/i18n'}).
+ *
+ * @param {ITranslatableMessage} translatable - the translatable to translate
+ * @returns the translation with arguments applied
+ */
+export function translateMessage(translatable: ITranslatableMessage): string {
+	const { key: message, args, namespaces } = translatable
+
+	return i18nTranslator(message, { ns: namespaces, replace: { ...args } })
+}
+
+/**
+ * Type check predicate for the ITranslatableMessage interface
+ *
+ * @param obj the value to typecheck
+ *
+ * @returns {boolean} true if the value implements the interface, false if not
+ */
+export function isTranslatableMessage(obj: any): obj is ITranslatableMessage {
+	if (!obj) {
+		return false
+	}
+
+	const { message, args, namespace } = obj
+
+	if (!message || typeof message !== 'string') {
+		return false
+	}
+
+	if (args && !checkArgs(args)) {
+		return false
+	}
+
+	if (namespace && typeof namespace !== 'string') {
+		return false
+	}
+
+	return true
+}
+
+function checkArgs(args: any): args is { [key: string]: any } {
+	if (args === undefined || args === null) {
+		return false
+	}
+
+	// this is good enough for object literals, which is what args essentially is
+	return args.constructor === Object
+}