feat: Buckets & MOS plugins in ExternalFrames in Dashboard

README.md

@@ -110,7 +110,8 @@ The prompter can be controlled by different types of controllers. Which mode is
 |  Default                  | Controlled by both mouse and keyboard                                                           |
 | `?mode=mouse`             | Controlled by mouse only                                                                        |
 | `?mode=keyboard`          | Controlled by keyboard only                                                                     |
-| `?mode=shuttlekeyboard`   | Controlled by a Contour-ShuttleXpress or X-keys, configured as keyboard-inputs (see below)       |
+| `?mode=shuttlekeyboard`   | Controlled by a Contour-ShuttleXpress or X-keys, configured as keyboard-inputs (see below)      |
+| `?mode=joycon`   			| Controlled by a Nintendo Joy-con controller over the HTML5 Gamepad API					      |
 
 ### Customize looks
 
@@ -162,6 +163,9 @@ Config-files to be used in respective config software:
 * [Contour ShuttleXpress](resources/prompter_layout_shuttlexpress.pref)
 * [X-keys](resources/prompter_layout_xkeys.mw3)
 
+### Control using Nintendo Joy-con controlelr
+
+This mode is intended to be used when having a Nintendo Joy-con. This wireless handheld controller works over Bluetooth and with the native HTML5 Gamepad API in the client.
 
 # For developers
 

meteor/client/__tests__/jest-setup.js

@@ -0,0 +1,2 @@
+// used by code creating XML with the DOM API to return an XML string
+global.XMLSerializer = require('xmldom').XMLSerializer

meteor/client/lib/UIStateStorage.ts

@@ -3,7 +3,8 @@ import * as _ from 'underscore'
 export namespace UIStateStorage {
 	let _collapsedState: {
 		[key: string]: {
-			[key: string]: boolean | BooleanMap | string | number
+			_modified: number | null
+			[key: string]: boolean | BooleanMap | string | number | null
 		}
 	} = {}
 	const NAMESPACE = 'uiState'
@@ -22,9 +23,9 @@ export namespace UIStateStorage {
 	}
 	_cleanUp()
 
-	export function setItem (scope: string, tag: string, value: boolean | BooleanMap | string | number) {
+	export function setItem (scope: string, tag: string, value: boolean | BooleanMap | string | number, permament?: boolean) {
 		_collapsedState[scope] = _collapsedState[scope] || {}
-		_collapsedState[scope]['_modified'] = Date.now()
+		_collapsedState[scope]['_modified'] = permament ? null : Date.now()
 		_collapsedState[scope][tag] = value
 		_persist()
 	}
@@ -46,7 +47,7 @@ export namespace UIStateStorage {
 	}
 
 	export function getItem (scope: string, tag: string, defaultValue: boolean | BooleanMap | string | number | undefined): boolean | BooleanMap | string | number | undefined {
-		return (_collapsedState[scope] || {})[tag] !== undefined ? _collapsedState[scope][tag] : defaultValue
+		return (_collapsedState[scope] || {})[tag] !== undefined ? (_collapsedState[scope][tag] || undefined) : defaultValue
 	}
 
 	function _persist () {

meteor/client/lib/data/mos/__tests__/plugin-support.test.ts

@@ -0,0 +1,56 @@
+import { createMosAppInfoXmlString } from "../plugin-support"
+import * as parser from 'xml2json'
+
+describe('createMosAppInfoXmlString', () => {
+	const xmlString = createMosAppInfoXmlString()
+
+	it('should return a string that is a valid XML document', () => {
+		expect(typeof xmlString).toEqual('string')
+		parser.toJson(xmlString) // will throw if invalid
+	})
+
+	describe('XML document', () => {
+		const doc: any = parser.toJson(xmlString, { object: true })
+
+		it('the root node should be named mos', () => {
+			const nodeNames = Object.keys(doc)
+
+			expect(nodeNames.length).toEqual(1)
+			expect(nodeNames[ 0 ]).toEqual('mos')
+		})
+
+		describe('mos node contents', () => {
+			const mos = doc.mos
+
+			//TODO: this should either be the official Sofie name or possibly the instance name?
+			it('node ncsID should be sofie-core', () => {
+				const expected = 'sofie-core'
+
+				const actual = mos.ncsID
+
+				expect(actual).toEqual(expected)
+			})
+
+			//TODO: this is completely bogus. The Nora plugin doesn't actually check the values
+			describe('node ncsAppInfo', () => {
+				const ncsAppInfo = mos.ncsAppInfo
+				describe('node ncsInformation', () => {
+					const ncsInformation = ncsAppInfo.ncsInformation
+
+					it('node userID should contain something', () => {
+						const actual = ncsInformation.userID
+
+						expect(actual).toEqual(expect.anything())
+					})
+
+					it('node software should contain something', () => {
+						const actual = ncsInformation.software
+
+						expect(actual).toEqual(expect.anything())
+					})
+				})
+			})
+		})
+	})
+
+})

meteor/client/lib/data/mos/plugin-support.ts

@@ -0,0 +1,130 @@
+import { isArray } from 'util'
+
+const PackageInfo = require('../../../../package.json')
+
+export enum AckStatus {
+	ACK = 'ACK',
+	Error = 'ERROR'
+}
+
+export enum UIMetricMode {
+	Contained = 'CONTAINED',
+	NonModal = 'NONMODAL',
+	Toolbar = 'TOOLBAR',
+	ModalDialog = 'MODALDIALOG'
+}
+
+export enum Events {
+	/** Event is emitted every now-and-then, generally to be used for simple displays */
+	'dragenter'			= 'sofie:dragEnter',
+	/** event is emitted with a very high frequency (60 Hz), to be used sparingly as
+	 * hooking up Components to it will cause a lot of renders
+	 */
+	'dragleave'			= 'sofie:dragLeave'
+}
+
+export interface UIMetric {
+	startx: number
+	starty: number
+	endx: number
+	endy: number
+	mode: UIMetricMode
+	canClose?: boolean
+}
+
+export function createMosItemRequest () {
+	const doc = objectToXML({
+		ncsItemRequest: {}
+	},
+	'mos')
+
+	return new XMLSerializer().serializeToString(doc)
+}
+
+export function createMosAckString (status?: AckStatus, statusDescription?: string):string {
+	const doc = objectToXML({
+		ncsAck: {
+			status,
+			statusDescription
+		}
+	},
+	'mos')
+
+	return new XMLSerializer().serializeToString(doc)
+}
+
+export function createMosAppInfoXmlString (uiMetrics?: UIMetric[]):string {
+	const doc = objectToXML({
+		ncsID: 'sofie-core',
+			ncsAppInfo: {
+				ncsInformation: {
+					userID: 'sofie system',
+					runContext: 'BROWSE',
+					software: {
+						manufacturer: 'Sofie Project',
+						product: 'Sofie TV Automation',
+						version: PackageInfo.version || 'UNSTABLE'
+					},
+					uiMetric: uiMetrics ? uiMetrics.map((metric, index) => {
+						return Object.assign({}, metric, {
+							_attributes: {
+								num: index.toString()
+							}
+						})
+					}) : undefined
+				}
+			}	
+		},
+		'mos')
+
+	return new XMLSerializer().serializeToString(doc)
+}
+
+export function objectToXML (obj: object, rootName: string): Document {
+	const doc = new Document()
+	const root = doc.createElement(rootName)
+
+	addNodes(obj, root)
+
+	doc.appendChild(root)
+	return doc
+}
+
+function addNodes (obj: object, rootNode: Node): void {
+	const doc = rootNode.ownerDocument
+
+	for (const name of Object.keys(obj)) {
+		const value = obj[ name ]
+
+		if (typeof value === 'object' && name === '_attributes') {
+			for (const attrName of Object.keys(value)) {
+				rootNode.appendChild(createAttribute(attrName, value[attrName], doc))
+			}
+		} else if (isArray(value)) {
+			value.forEach((element) => {
+				rootNode.appendChild(createNode(name, element, doc))
+			})
+		} else if (value !== undefined) {
+			rootNode.appendChild(createNode(name, value, doc))
+		}
+	}
+}
+
+function createAttribute(name: string, value: any, doc:Document) {
+	const attr = doc.createAttribute(name)
+	attr.textContent = value
+
+	return attr
+}
+
+function createNode(name:string, value:any, doc:Document) {
+	const node = doc.createElement(name)
+
+	if (typeof value === 'object' && value !== null) {
+		addNodes(value, node)
+	} else {
+		node.textContent = value
+	}
+
+	return node
+}

meteor/client/lib/data/nora/browser-plugin-data.ts

@@ -0,0 +1,12 @@
+import { PieceGeneric } from '../../../../lib/collections/Pieces'
+import { NoraContent } from 'tv-automation-sofie-blueprints-integration'
+import { generateMosPluginItemXml } from '../../parsers/mos/mosXml2Js'
+
+export function createMosObjectXmlStringNoraBluePrintPiece (piece: PieceGeneric): string {
+	const noraContent = piece.content as NoraContent | undefined
+	if (!noraContent || !noraContent.externalPayload) {
+		throw new Error('Not a Nora blueprint piece')
+	}
+
+	return generateMosPluginItemXml(noraContent.externalPayload)
+}

meteor/client/lib/invalidatingTime.ts

@@ -0,0 +1,17 @@
+import { Tracker } from 'meteor/tracker'
+import { getCurrentTime } from '../../lib/lib'
+
+/** Invalidate a reactive computation after a given amount of time */
+export function invalidateAfter(timeout: number): void {
+	const time = new Tracker.Dependency
+	time.depend()
+	setTimeout(() => {
+		time.changed()
+	}, timeout)
+}
+
+/** Invalidate a reactive computation after when a given time is reached */
+export function invalidateAt(timestamp: number): void {
+	const timeout = Math.max(0, timestamp - getCurrentTime())
+	invalidateAfter(timeout)
+}

meteor/client/lib/lib.tsx

@@ -14,6 +14,21 @@ function isEventInInputField (e: Event) {
 	return (e && e.target && ['textarea', 'input'].indexOf(e.target.localName + '') !== -1)
 }
 
+export function contextMenuHoldToDisplayTime(): number {
+	return isTouchDevice() ? 1000 : -1
+}
+
+let touchDeviceCache: undefined | boolean = undefined
+export function isTouchDevice(): boolean {
+	if (touchDeviceCache !== undefined) return touchDeviceCache
+
+	touchDeviceCache = false
+	if (window.matchMedia("(pointer: coarse)").matches) {
+		touchDeviceCache = true
+	}
+	return touchDeviceCache
+}
+
 const loadScriptCache: {[url: string]: {
 	status: 'loading' | 'ok',
 	callbacks: Array<(err?: any) => void>

meteor/client/lib/parsers/mos/__tests__/mosReqAppInfo.xml

@@ -0,0 +1,3 @@
+<mos>
+	<ncsReqAppInfo/>
+</mos>

meteor/client/lib/parsers/mos/__tests__/mosSample1.json

@@ -0,0 +1,90 @@
+{
+	"ID": "6",
+	"Slug": "Uten tittel-6",
+	"ObjectID": "5c16aa49-cf36-440d-9d9a-138558665715",
+	"MOSID": "GFX.NRK.MOS",
+	"mosAbstract": "202 Bilde (00:00, Auto/OnNext): Hennie som French",
+	"MosExternalMetaData": [
+		{
+			"MosScope": "PLAYLIST",
+			"MosSchema": "http://nora.core.mesosint.nrk.no/mos/content",
+			"MosPayload": {
+				"uuid": "0cdd0edd-1e10-4e38-b970-b6661bbe1376",
+				"metadata": {
+					"modul": "nora.module.browser",
+					"selection": {
+						"design": {
+							"displayName": "Nyheter",
+							"id": "nyheter"
+						},
+						"type": {
+							"displayName": "bakskjerm",
+							"id": "bakskjerm"
+						},
+						"mal": {
+							"displayName": "202 Bilde",
+							"id": "202_bilde"
+						}
+					},
+					"name": {
+						"time": "(00:00, Auto/OnNext)",
+						"templateName": "202 Bilde",
+						"templateVariant": "",
+						"content": "Hennie som French",
+						"full": "202 Bilde (00:00, Auto/OnNext): Hennie som French"
+					},
+					"type": "bakskjerm",
+					"userContext": {
+						"userContext": {
+							"ncsID": "MAENPSTEST11",
+							"changedBy": "N23109",
+							"software": {
+								"manufacturer": "AP",
+								"product": "ENPS Client",
+								"version": 8
+							}
+						},
+						"changed": "2018-08-30-T17:56:41"
+					}
+				},
+				"template": {
+					"channel": "gfx3",
+					"system": "html",
+					"name": "202_bilde",
+					"layer": "bakskjerm"
+				},
+				"content": {
+					"bilde": {
+						"text": 0,
+						"creators": "ØYSTEIN TRONSLI DRABLØS / FRILAND/DAVID BLOOMER",
+						"credit": "",
+						"title": "Hennie som French",
+						"w": 0.8462222,
+						"format": "image/jpeg",
+						"width": 1920,
+						"x": 0.07688889,
+						"h": 1,
+						"y": 0,
+						"id": "QdncIGkD-IU8W5Ff5QBoIA",
+						"type": "image/jpeg",
+						"uri": "QdncIGkD-IU8W5Ff5QBoIARqUM5XjlRKIhner2t9Dsxg",
+						"quality": 0.9,
+						"height": 1080,
+						"url": "https://some-url"
+					}
+				}
+			}
+		},
+		{
+			"MosScope": "PLAYLIST",
+			"MosSchema": "http://nora.core.mesosint.nrk.no/mos/timing",
+			"MosPayload": {
+				"out": "onNext",
+				"text": 0,
+				"timeIn": 0,
+				"duration": 5000,
+				"in": "auto"
+			}
+		}
+	]
+}