review commetns

Author: Julusian

packages/documentation/versioned_docs/version-1.50.0/for-developers/device-integrations/intro.md

@@ -9,7 +9,7 @@ In order to understand all about writing TSR integrations there are some concept
 - [TSR Types package](./tsr-types)
 - [TSR Actions](./tsr-actions)
 
-But to start of we will explain the general structure of the TSR. Any user of the TSR will interface primarily with the Conductor class. Primarily the user will input device configurations, mappings and timelines into the TSR. The timeline describes the entire state of all of the devices over time. It does this by putting objects on timeline layers. Every timeline layer maps to a specific part of the device, this is configured throught the mappings.
+But to start of we will explain the general structure of the TSR. Any user of the TSR will interface primarily with the Conductor class. Primarily the user will input device configurations, mappings and timelines into the TSR. The timeline describes the entire state of all of the devices over time. It does this by putting objects on timeline layers. Every timeline layer maps to a specific part of the device, this is configured through the mappings.
 
 The timeline is converted into disctinct states at different points in time, and these states are fed to the individual integrations. As an integration developer you shouldn't have to worry about keeping track of this. It is most important that you expose \(a\) a method to convert from a Timeline State to a Device State, \(b\) a method for diffing 2 device states and (c) a way to send commands to the device. We'll dive deeper into this in [TSR Integration API](./tsr-api).
 

packages/documentation/versioned_docs/version-1.51.0/for-developers/device-integrations/intro.md

@@ -9,7 +9,7 @@ In order to understand all about writing TSR integrations there are some concept
 - [TSR Types package](./tsr-types)
 - [TSR Actions](./tsr-actions)
 
-But to start of we will explain the general structure of the TSR. Any user of the TSR will interface primarily with the Conductor class. Primarily the user will input device configurations, mappings and timelines into the TSR. The timeline describes the entire state of all of the devices over time. It does this by putting objects on timeline layers. Every timeline layer maps to a specific part of the device, this is configured throught the mappings.
+But to start of we will explain the general structure of the TSR. Any user of the TSR will interface primarily with the Conductor class. Primarily the user will input device configurations, mappings and timelines into the TSR. The timeline describes the entire state of all of the devices over time. It does this by putting objects on timeline layers. Every timeline layer maps to a specific part of the device, this is configured through the mappings.
 
 The timeline is converted into disctinct states at different points in time, and these states are fed to the individual integrations. As an integration developer you shouldn't have to worry about keeping track of this. It is most important that you expose \(a\) a method to convert from a Timeline State to a Device State, \(b\) a method for diffing 2 device states and (c) a way to send commands to the device. We'll dive deeper into this in [TSR Integration API](./tsr-api).
 

packages/webui/src/client/ui/RundownView/RundownTiming/withTiming.tsx

@@ -212,7 +212,7 @@ export function useTiming(
 				setForceUpdate(Date.now())
 			}
 		}
-	}, [])
+	}, [context])
 
 	useEffect(() => {
 		window.addEventListener(rundownTimingEventFromTickResolution(tickResolution), refreshComponent)

packages/webui/src/client/ui/SegmentTimeline/SegmentContextMenu.tsx

@@ -124,7 +124,6 @@ export function SegmentContextMenu({
 								isFormEditable={isSegmentEditAble}
 							/>
 						)}
-						<hr />
 						{enableUserEdits && (
 							<>
 								<hr />
@@ -133,6 +132,7 @@ export function SegmentContextMenu({
 								</MenuItem>
 							</>
 						)}
+						<hr />
 					</>
 				)}
 				{part && !part.instance.part.invalid && timecode !== null && (

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

@@ -760,7 +760,6 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 							liveLineHistorySize={this.props.liveLineHistorySize}
 							isLastSegment={this.props.isLastSegment}
 							isLastInSegment={false}
-							timelineWidth={this.state.timelineWidth}
 							showDurationSourceLayers={this.props.showDurationSourceLayers}
 							isLiveSegment={this.props.isLiveSegment}
 							anyPriorPartWasLive={anyPriorPartWasLive}
@@ -820,7 +819,6 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 							liveLineHistorySize={this.props.liveLineHistorySize}
 							isLastSegment={this.props.isLastSegment}
 							isLastInSegment={true}
-							timelineWidth={this.state.timelineWidth}
 							showDurationSourceLayers={this.props.showDurationSourceLayers}
 							isLiveSegment={this.props.isLiveSegment}
 							anyPriorPartWasLive={anyPriorPartWasLive}

packages/webui/src/client/ui/SegmentTimeline/SmallParts/SegmentTimelineSmallPartFlag.tsx

@@ -32,7 +32,6 @@ interface ISegmentTimelineSmallPartFlagProps {
 	liveLineHistorySize: number
 	isLastSegment: boolean
 	isLastInSegment: boolean
-	timelineWidth: number
 	showDurationSourceLayers?: Set<ISourceLayer['_id']>
 
 	livePosition: number

packages/webui/src/client/ui/Settings/BlueprintSettings.tsx

@@ -20,15 +20,15 @@ import Button from 'react-bootstrap/esm/Button'
 import { useTranslation } from 'react-i18next'
 import { stringifyError } from '@sofie-automation/shared-lib/dist/lib/stringifyError'
 import { createPrivateApiPath } from '../../url.js'
-import { DBShowStyleBase } from '@sofie-automation/corelib/src/dataModel/ShowStyleBase.js'
-import { DBStudio } from '@sofie-automation/corelib/src/dataModel/Studio.js'
-import { assertNever } from '@sofie-automation/corelib/src/lib.js'
+import { DBShowStyleBase } from '@sofie-automation/corelib/dist/dataModel/ShowStyleBase.js'
+import { DBStudio } from '@sofie-automation/corelib/dist/dataModel/Studio.js'
+import { assertNever } from '@sofie-automation/corelib/dist/lib.js'
 
 interface IProps {
 	blueprintId: BlueprintId
 }
 
-export default function BlueprintSettings2({ blueprintId }: IProps): JSX.Element {
+export default function BlueprintSettings({ blueprintId }: IProps): JSX.Element {
 	const { t } = useTranslation()
 
 	const blueprint = useTracker(() => Blueprints.findOne(blueprintId), [blueprintId])
@@ -89,7 +89,7 @@ export default function BlueprintSettings2({ blueprintId }: IProps): JSX.Element
 
 				{blueprint.blueprintId ? (
 					<label className="field">
-						<LabelActual label={t('Blueprint Id')} />
+						<LabelActual label={t('Blueprint ID')} />
 						<div className="field-content">
 							<i>{blueprint.blueprintId}</i>
 						</div>

packages/webui/src/client/ui/Settings/ShowStyle/HotkeyLegend.tsx

@@ -48,7 +48,7 @@ export function HotkeyLegendSettings({ showStyleBase }: IHotkeyLegendSettingsPro
 		document.body.appendChild(element) // Required for this to work in FireFox
 		element.click()
 		document.body.removeChild(element) // Required for this to work in FireFox
-	}, [showStyleBase])
+	}, [showStyleBase._id, showStyleBase.hotkeyLegend, showStyleBase.name])
 
 	const onDeleteHotkeyLegend = useCallback(
 		(item: HotkeyDefinition) => {
@@ -72,7 +72,7 @@ export function HotkeyLegendSettings({ showStyleBase }: IHotkeyLegendSettingsPro
 				<tbody>
 					{(showStyleBase.hotkeyLegend || []).map((item, index) => {
 						return (
-							<React.Fragment key={item.key}>
+							<React.Fragment key={item._id}>
 								<tr
 									className={ClassNames({
 										hl: isExpanded(item._id),

packages/webui/src/client/ui/Settings/SnapshotsView.tsx

@@ -104,7 +104,7 @@ export default function SnapshotsView(): JSX.Element {
 					<span>{t('Ingest from Snapshot')}</span>
 				</SnapshotImportButton>
 				<span className="text-s vsubtle ms-2">
-					{t('Reads the ingest (NRCS) data, and pipes it throught the blueprints')}
+					{t('Reads the ingest (NRCS) data, and pipes it through the blueprints')}
 				</span>
 			</p>
 
@@ -264,16 +264,16 @@ function RestoreStoredSnapshotButton({ snapshotId }: { snapshotId: SnapshotId })
 		const snapshot = Snapshots.findOne(snapshotId)
 		if (snapshot) {
 			doModalDialog({
-				title: 'Restore Snapshot',
-				message: `Do you really want to restore the snapshot ${snapshot.name}?`,
+				title: t('Restore Snapshot'),
+				message: t('Do you really want to restore the snapshot "{{snapshotName}}"?', { snapshotName: snapshot.name }),
 				onAccept: () => {
 					MeteorCall.snapshot
 						.restoreSnapshot(snapshotId, false)
 						.then(() => {
 							// todo: replace this with something else
 							doModalDialog({
-								title: 'Restore Snapshot',
-								message: `Snapshot restored!`,
+								title: t('Restore Snapshot'),
+								message: t('Snapshot restored!'),
 								acceptOnly: true,
 								onAccept: () => {
 									// nothing
@@ -283,8 +283,8 @@ function RestoreStoredSnapshotButton({ snapshotId }: { snapshotId: SnapshotId })
 						.catch((err) => {
 							logger.error(err)
 							doModalDialog({
-								title: 'Restore Snapshot',
-								message: `Error: ${err.toString()}`,
+								title: t('Restore Snapshot'),
+								message: t('Snapshot restore failed: {{errorMessage}}', { errorMessage: stringifyError(err) }),
 								acceptOnly: true,
 								onAccept: () => {
 									// nothing
@@ -321,8 +321,8 @@ function TakeSystemSnapshotButton({ studioId }: { studioId: StudioId | null }) {
 			.catch((err) => {
 				logger.error(err)
 				doModalDialog({
-					title: 'Restore Snapshot',
-					message: `Error: ${err.toString()}`,
+					title: t('Restore Snapshot'),
+					message: t('Snapshot restore failed: {{errorMessage}}', { errorMessage: stringifyError(err) }),
 					acceptOnly: true,
 					onAccept: () => {
 						// nothing
@@ -334,7 +334,7 @@ function TakeSystemSnapshotButton({ studioId }: { studioId: StudioId | null }) {
 	const studioName = useTracker(() => (studioId ? Studios.findOne(studioId)?.name : null), [studioId])
 
 	return (
-		<Button className="btn btn-primary" onClick={takeSystemSnapshot}>
+		<Button variant="primary" onClick={takeSystemSnapshot}>
 			{studioId
 				? t('Take a Snapshot for studio "{{studioName}}" only', { studioName: studioName ?? studioId })
 				: t('Take a Full System Snapshot')}
@@ -349,14 +349,17 @@ function RemoveSnapshotButton({ snapshotId }: { snapshotId: SnapshotId }) {
 		const snapshot = Snapshots.findOne(snapshotId)
 		if (snapshot) {
 			doModalDialog({
-				title: 'Remove Snapshot',
-				message: `Are you sure, do you really want to REMOVE the Snapshot ${snapshot.name}?\r\nThis cannot be undone!!`,
+				title: t('Remove Snapshot'),
+				message: t(
+					'Are you sure, do you really want to REMOVE the Snapshot "{{snapshotName}}"?\r\nThis cannot be undone!!',
+					{ snapshotName: snapshot.name }
+				),
 				onAccept: () => {
 					MeteorCall.snapshot.removeSnapshot(snapshotId).catch((err) => {
 						logger.error(err)
 						doModalDialog({
-							title: 'Remove Snapshot',
-							message: `Error: ${err.toString()}`,
+							title: t('Remove Snapshot'),
+							message: t('Snapshot remove failed: {{errorMessage}}', { errorMessage: stringifyError(err) }),
 							acceptOnly: true,
 							onAccept: () => {
 								// nothing

packages/webui/src/client/ui/Shelf/PieceCountdownPanel.tsx

@@ -46,7 +46,7 @@ export function PieceCountdownPanel({
 					})
 				: undefined
 		return livePieceInstance
-	}, [playlist, showStyleBase])
+	}, [playlist, showStyleBase, panel.sourceLayerIds])
 
 	useEffect(() => {
 		const updateTimecode = (e: TimingEvent) => {