feat(CurrentRundown): selectable Lines

nrkno · Jan 9, 2024 · 6d81c10 · 6d81c10
1 parent 9d5ce6c
commit 6d81c10
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 21 deletions.
diff --git a/packages/apps/client/src/CurrentRundown/CurrentRundown.module.scss b/packages/apps/client/src/CurrentRundown/CurrentRundown.module.scss
@@ -3,8 +3,8 @@
 	grid-template-columns: 1fr 3em 4em 2fr 5fr 1fr 1fr;
 	padding: 0;
 	margin: 0;
-	--table-gap-size: 2px;
-	gap: var(--table-gap-size);
+	--table-gap-size: 0;
+	gap: 0;
 }
 
 .SegmentContainer {
@@ -37,6 +37,13 @@
 	gap: var(--table-gap-size);
 	padding: 0;
 	margin: 0;
+	border: 1px solid transparent;
+	user-select: none;
+}
+
+.LineSelected {
+	composes: Line;
+	border: 1px solid var(--bs-primary);
 }
 
 .LineItem {

diff --git a/packages/apps/client/src/CurrentRundown/Line.tsx b/packages/apps/client/src/CurrentRundown/Line.tsx
@@ -7,11 +7,11 @@ const Line = observer(({ line }: { line: UILine | undefined }): React.JSX.Elemen
 	if (!line) return null
 	return (
 		<>
-			<div className={classes.LineIdentifier}></div>
-			<div className={classes.LineType}></div>
+			<div className={classes.LineIdentifier}>{line.identifier}</div>
+			<div className={classes.LineType}>{line.lineType?.label}</div>
 			<div className={classes.LineSlug}>{line.slug}</div>
 			<div className={classes.LineScript}>{line.script}</div>
-			<div className={classes.LineDuration}></div>
+			<div className={classes.LineDuration}>{line.expectedDuration}</div>
 			<div className={classes.LineDuration2}></div>
 		</>
 	)

diff --git a/packages/apps/client/src/CurrentRundown/Segment.tsx b/packages/apps/client/src/CurrentRundown/Segment.tsx
@@ -3,16 +3,32 @@ import { observer } from 'mobx-react-lite'
 import { UISegment } from '../model/UISegment'
 import { Line } from './Line'
 import classes from './CurrentRundown.module.scss'
+import { AppStore } from '../stores/AppStore'
+import { UILineId } from '../model/UILine'
 
 const Segment = observer(({ segment }: { segment: UISegment }): React.JSX.Element | null => {
 	if (!segment) return null
 
+	function isSelected(lineId: UILineId) {
+		return lineId === AppStore.uiStore.selectedLineId
+	}
+
+	function onClick(e: React.MouseEvent<HTMLLIElement>) {
+		const lineId = e.currentTarget.dataset['lineId'] as UILineId
+		AppStore.uiStore.setSelectedLineId(lineId)
+	}
+
 	return (
 		<>
 			<div className={classes.SegmentIdentifier}>{segment.name}</div>
 			<ul className={classes.LineContainer}>
 				{segment.linesInOrder.map((line) => (
-					<li key={line.id} className={classes.Line}>
+					<li
+						key={line.id}
+						className={isSelected(line.id) ? classes.LineSelected : classes.Line}
+						onClickCapture={onClick}
+						data-line-id={line.id}
+					>
 						<Line line={line} />
 					</li>
 				))}

diff --git a/packages/apps/client/src/ScriptEditor/Editor.tsx b/packages/apps/client/src/ScriptEditor/Editor.tsx
@@ -74,7 +74,7 @@ export function Editor({
 
 		const top = getSelectionTopOffset()
 
-		if (beginOffset < editorState.selection.$head.pos && endOffset > editorState.selection.$head.pos) {
+		if (beginOffset < editorState.selection.head && endOffset > editorState.selection.head) {
 			// TODO: Handle a heuristic for keeping the caret at the very end of the Segment script
 			selectionBookmark = preserveSelection(editorState)
 			selectionBookmark = selectionBookmark.map({
@@ -184,18 +184,10 @@ export function Editor({
 
 		switch (e.code) {
 			case 'ArrowUp':
-				window.getSelection()?.modify('move', 'backward', 'line')
-				containerEl.current.scrollBy({
-					top: -1 * getLineHeight(),
-					behavior: 'instant',
-				})
+				scrollContainerWithCaret(containerEl.current, 'up')
 				break
 			case 'ArrowDown':
-				window.getSelection()?.modify('move', 'forward', 'line')
-				containerEl.current.scrollBy({
-					top: getLineHeight(),
-					behavior: 'instant',
-				})
+				scrollContainerWithCaret(containerEl.current, 'down')
 				break
 		}
 	}
@@ -218,8 +210,28 @@ function makeNewEditorState(doc: Node): EditorState {
 	})
 }
 
-function getLineHeight(): number {
-	return 21
+function scrollContainerWithCaret(container: HTMLElement, upOrDown: 'up' | 'down') {
+	const backwardsForwards = upOrDown === 'down' ? 'forward' : 'backward'
+	const currentSelection = window.getSelection()
+	if (!currentSelection) return
+	const bounds = currentSelection.getRangeAt(0).getBoundingClientRect()
+	currentSelection.modify('move', backwardsForwards, 'line')
+	const modifiedSelection = window.getSelection()
+	if (!modifiedSelection) return
+	const modifiedBounds = modifiedSelection.getRangeAt(0).getBoundingClientRect()
+	let scrollAmount = modifiedBounds.top - bounds.top
+	if (scrollAmount === 0) {
+		if (modifiedBounds.left !== bounds.left) {
+			scrollAmount = modifiedBounds.left < bounds.left ? -19 : 19
+		}
+	}
+
+	console.log(scrollAmount, bounds, modifiedBounds)
+
+	container.scrollBy({
+		top: scrollAmount,
+		behavior: 'instant',
+	})
 }
 
 function restoreSelectionTopOffset(top: number, overflowEl: HTMLElement) {

diff --git a/packages/apps/client/src/mocks/mockConnection.ts b/packages/apps/client/src/mocks/mockConnection.ts
@@ -231,6 +231,7 @@ export class MockConnection extends EventEmitter<Events> {
 				label: 'FULL',
 				type: PartDisplayType.VT,
 			},
+			identifier: 'A1',
 			isOnAir: true,
 			isNext: false,
 		},
@@ -245,10 +246,11 @@ export class MockConnection extends EventEmitter<Events> {
 				label: 'KAM',
 				type: PartDisplayType.Camera,
 			},
+			identifier: 'A2',
 			isOnAir: true,
 			isNext: false,
 			scriptContents:
-				'Duis congue molestie neque, et sollicitudin lacus porta eget. *Etiam* massa dui, cursus vitae lacus sit **amet**, aliquet bibendum elit. Morbi tincidunt quis metus ut luctus. Proin tincidunt suscipit vestibulum.',
+				'Duis congue molestie neque, et sollicitudin lacus porta eget. *Etiam* massa dui, cursus vitae lacus sit **amet**, aliquet bibendum elit. Morbi tincidunt quis metus ut luctus. Proin tincidunt suscipit vestibulum. Duis congue molestie neque, et sollicitudin lacus porta eget. *Etiam* massa dui, cursus vitae lacus sit **amet**, aliquet bibendum elit. Morbi tincidunt quis metus ut luctus. Proin tincidunt suscipit vestibulum. Duis congue molestie neque, et sollicitudin lacus porta eget. *Etiam* massa dui, cursus vitae lacus sit **amet**, aliquet bibendum elit. Morbi tincidunt quis metus ut luctus. Proin tincidunt suscipit vestibulum. Duis congue molestie neque, et sollicitudin lacus porta eget. *Etiam* massa dui, cursus vitae lacus sit **amet**, aliquet bibendum elit. Morbi tincidunt quis metus ut luctus. Proin tincidunt suscipit vestibulum. Duis congue molestie neque, et sollicitudin lacus porta eget. *Etiam* massa dui, cursus vitae lacus sit **amet**, aliquet bibendum elit. Morbi tincidunt quis metus ut luctus. Proin tincidunt suscipit vestibulum. Duis congue molestie neque, et sollicitudin lacus porta eget. *Etiam* massa dui, cursus vitae lacus sit **amet**, aliquet bibendum elit. Morbi tincidunt quis metus ut luctus. Proin tincidunt suscipit vestibulum.',
 		},
 		{
 			_id: PART_ID_0_2_0,

diff --git a/packages/apps/client/src/stores/UIStore.ts b/packages/apps/client/src/stores/UIStore.ts
@@ -1,13 +1,19 @@
 import { makeAutoObservable } from 'mobx'
+import { UILineId } from '../model/UILine'
 
 export class UIStore {
 	viewDividerPosition: number = 0.5
+	selectedLineId: UILineId | null = null
 
 	constructor() {
-		makeAutoObservable(this, {})
+		makeAutoObservable(this)
 	}
 
 	setViewDividerPosition(value: number) {
 		this.viewDividerPosition = value
 	}
+
+	setSelectedLineId(lineId: UILineId | null) {
+		this.selectedLineId = lineId
+	}
 }