feat: add Part-Button-View-Mode

apps/app/src/electron/EverythingService.ts

@@ -31,7 +31,7 @@ import {
 } from '../lib/util'
 import { PartialDeep } from 'type-fest'
 import deepExtend from 'deep-extend'
-import { Group, PlayingPart } from '../models/rundown/Group'
+import { Group, GroupViewMode, PlayingPart } from '../models/rundown/Group'
 import { Part } from '../models/rundown/Part'
 import {
 	TSRTimelineObj,
@@ -2176,6 +2176,56 @@ export class EverythingService
 			description: ActionDescription.ToggleAllGroupsCollapse,
 		}
 	}
+	async setGroupViewMode(arg: {
+		rundownId: string
+		groupId: string
+		viewMode: GroupViewMode
+	}): Promise<UndoableResult<void>> {
+		const { rundown, group } = this.getGroup(arg)
+		const originalValue = group.viewMode
+
+		group.viewMode = arg.viewMode
+
+		this._saveUpdates({ rundownId: arg.rundownId, rundown, group, noEffectOnPlayout: true })
+
+		return {
+			undo: () => {
+				const { rundown, group } = this.getGroup(arg)
+
+				group.viewMode = originalValue
+
+				this._saveUpdates({ rundownId: arg.rundownId, rundown, group, noEffectOnPlayout: true })
+			},
+			description: ActionDescription.ToggleGroupCollapse,
+		}
+	}
+	async setAllGroupsViewMode(arg: { rundownId: string; viewMode: GroupViewMode }): Promise<UndoableResult<void>> {
+		const { rundown } = this.getRundown(arg)
+
+		const originalValues = new Map<string, GroupViewMode>(rundown.groups.map((g) => [g.id, g.viewMode]))
+
+		for (const group of rundown.groups) {
+			group.viewMode = arg.viewMode
+		}
+
+		this._saveUpdates({ rundownId: arg.rundownId, rundown, noEffectOnPlayout: true })
+
+		return {
+			undo: () => {
+				const { rundown } = this.getRundown(arg)
+
+				for (const group of rundown.groups) {
+					const originalValue = originalValues.get(group.id)
+					if (originalValue !== undefined) {
+						group.viewMode = originalValue
+					}
+				}
+
+				this._saveUpdates({ rundownId: arg.rundownId, rundown, noEffectOnPlayout: true })
+			},
+			description: ActionDescription.ToggleAllGroupsCollapse,
+		}
+	}
 	async refreshResources(): Promise<void> {
 		this.callbacks.refreshResources()
 	}

apps/app/src/electron/api/GroupService.ts

@@ -6,7 +6,7 @@ import { PartialDeep } from 'type-fest/source/partial-deep'
 import { ClientEventBus } from '../ClientEventBus'
 import { ResourceAny } from '@shared/models'
 import { MoveTarget } from '../../lib/util'
-import { Group } from '../../models/rundown/Group'
+import { Group, GroupViewMode } from '../../models/rundown/Group'
 import { ServiceTypes } from '../../ipc/IPCAPI'
 
 interface GroupData {
@@ -96,4 +96,22 @@ export class GroupService extends EventEmitter {
 		const result = await this.everythingService.duplicateGroup(data)
 		if (!result) throw new GeneralError()
 	}
+
+	async setViewMode(data: { rundownId: string; groupId: string; viewMode: GroupViewMode }): Promise<void> {
+		// TODO: access control
+		const result = await this.everythingService.setGroupViewMode({
+			rundownId: data.rundownId,
+			groupId: data.groupId,
+			viewMode: data.viewMode,
+		})
+		if (!result) throw new GeneralError()
+	}
+	async setAllViewMode(data: { rundownId: string; viewMode: GroupViewMode }): Promise<void> {
+		// TODO: access control
+		const result = await this.everythingService.setAllGroupsViewMode({
+			rundownId: data.rundownId,
+			viewMode: data.viewMode,
+		})
+		if (!result) throw new GeneralError()
+	}
 }

apps/app/src/electron/storageHandler.ts

@@ -19,6 +19,7 @@ import { ensureValidId, ensureValidObject } from '../lib/TimelineObj'
 import { AnalogInput } from '../models/project/AnalogInput'
 import { ValidatorCache } from 'graphics-data-definition'
 import { Bridge } from '../models/project/Bridge'
+import { GroupViewMode } from '../models/rundown/Group'
 
 const fsWriteFile = fs.promises.writeFile
 const fsAppendFile = fs.promises.appendFile
@@ -1245,6 +1246,9 @@ export class StorageHandler extends EventEmitter {
 					playingParts: {},
 				}
 			}
+			if (group.viewMode === undefined) {
+				group.viewMode = GroupViewMode.TIMELINE
+			}
 			if (!group.autoFill) {
 				group.autoFill = getDefaultGroup().autoFill
 			}

apps/app/src/ipc/IPCAPI.ts

@@ -5,7 +5,7 @@ import { ResourceAny, ResourceId, MetadataAny, SerializedProtectedMap, TSRDevice
 import { Rundown } from '../models/rundown/Rundown'
 import { TimelineObj } from '../models/rundown/TimelineObj'
 import { Part } from '../models/rundown/Part'
-import { Group } from '../models/rundown/Group'
+import { Group, GroupViewMode } from '../models/rundown/Group'
 import { AppData } from '../models/App/AppData'
 import { PeripheralArea, PeripheralStatus } from '../models/project/Peripheral'
 import { ActiveTrigger, ActiveTriggers, ApplicationTrigger, RundownTrigger } from '../models/rundown/Trigger'
@@ -64,6 +64,8 @@ export const ClientMethods: ServiceKeyArrays = {
 		'playPrev',
 		'remove',
 		'update',
+		'setViewMode',
+		'setAllViewMode',
 	],
 	[ServiceName.LEGACY]: [],
 	[ServiceName.PARTS]: [
@@ -303,6 +305,8 @@ export interface IPCServerMethods {
 	toggleGroupLock: (arg: { rundownId: string; groupId: string; value: boolean }) => void
 	toggleGroupCollapse: (arg: { rundownId: string; groupId: string; value: boolean }) => void
 	toggleAllGroupsCollapse: (arg: { rundownId: string; value: boolean }) => void
+	setGroupViewMode: (arg: { rundownId: string; groupId: string; viewMode: GroupViewMode }) => void
+	setAllGroupsViewMode: (arg: { rundownId: string; viewMode: GroupViewMode }) => void
 	refreshResources: () => void
 	refreshResourcesSetAuto: (arg: { interval: number }) => void
 	triggerHandleAutoFill: () => void

apps/app/src/lib/defaults.ts

@@ -1,6 +1,6 @@
 import { Project } from '../models/project/Project'
 import { Rundown } from '../models/rundown/Rundown'
-import { AutoFillMode, AutoFillSortMode, Group, PlayoutMode } from '../models/rundown/Group'
+import { AutoFillMode, AutoFillSortMode, Group, GroupViewMode, PlayoutMode } from '../models/rundown/Group'
 import { INTERNAL_BRIDGE_ID } from '../models/project/Bridge'
 import { DeviceType, MappingCasparCG, TimelineContentTypeCasparCg } from 'timeline-state-resolver-types'
 import { literal } from '@shared/lib'
@@ -241,6 +241,7 @@ export function getDefaultGroup(): Omit<Group, 'id' | 'name'> {
 				type: RepeatingType.NO_REPEAT,
 			},
 		},
+		viewMode: GroupViewMode.TIMELINE,
 	}
 }
 export function getDefaultPart(): Omit<Part, 'id' | 'name'> {

apps/app/src/lib/partTimeline.ts

@@ -26,14 +26,15 @@ interface SortedLayer {
 	layerId: string
 	objectIds: string[]
 }
+export interface TimelineObjectsOnLayer {
+	layerId: string
+	objectsOnLayer: Array<{ resolved: ResolvedTimelineObject['resolved']; timelineObj: TimelineObj }>
+}
 export function timelineObjsOntoLayers(
 	sortedLayers: SortedLayer[],
 	resolvedTimeline: ResolvedTimeline,
 	timeline: TimelineObj[]
-): Array<{
-	layerId: string
-	objectsOnLayer: Array<{ resolved: ResolvedTimelineObject['resolved']; timelineObj: TimelineObj }>
-}> {
+): Array<TimelineObjectsOnLayer> {
 	return sortedLayers.map(({ layerId, objectIds }) => {
 		const objectsOnLayer: {
 			resolved: ResolvedTimelineObject['resolved']

apps/app/src/models/rundown/Group.ts

@@ -37,6 +37,9 @@ export interface GroupBase {
 	/** Whether or not this Group should be visually collapsed in the app view. Does not affect playout. */
 	collapsed?: boolean
 
+	/** How the group is displayed in the GUI. Defaults to Timeline. */
+	viewMode: GroupViewMode
+
 	/** An additional, optional ID to be used by API clients to track the Groups they are responsible for */
 	externalId?: string
 }
@@ -104,3 +107,8 @@ export interface ScheduleSettings {
 	startTime?: DateTimeObject
 	repeating: RepeatingSettingsAny
 }
+
+export enum GroupViewMode {
+	TIMELINE = 0, // default
+	BUTTONS = 1,
+}

apps/app/src/react/api/ApiClient.ts

@@ -258,6 +258,12 @@ export class ApiClient {
 	): ServerReturn<'toggleAllGroupsCollapse'> {
 		return this.invokeServerMethod('toggleAllGroupsCollapse', ...args)
 	}
+	async setGroupViewMode(...args: ServerArgs<'setGroupViewMode'>): ServerReturn<'setGroupViewMode'> {
+		return this.groupService.setViewMode(...args)
+	}
+	async setAllGroupsViewMode(...args: ServerArgs<'setAllGroupsViewMode'>): ServerReturn<'setAllGroupsViewMode'> {
+		return this.groupService.setAllViewMode(...args)
+	}
 	async refreshResources(...args: ServerArgs<'refreshResources'>): ServerReturn<'refreshResources'> {
 		return this.invokeServerMethod('refreshResources', ...args)
 	}

apps/app/src/react/components/inputs/Btn/style.scss

@@ -1,5 +1,9 @@
+@use 'sass:color';
 @import './../../../styles/foundation/variables';
 
+$btnTextColor: #fff;
+$btnBgColor: #545a78;
+
 .btn {
 	cursor: pointer;
 	display: inline-flex;
@@ -19,18 +23,13 @@
 	text-transform: uppercase;
 	border-radius: 4px;
 
-	color: #fff;
-	background: #545a78;
+	color: $btnTextColor;
+	background: $btnBgColor;
 	padding: 6px 16px;
 	min-width: 22px;
 	min-height: 22px;
 	border: none;
-	// background: none;
-	// opacity: 0.3;
 
-	// &.selected {
-	// 	opacity: 1;
-	// }
 	transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
 		box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
 		color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
@@ -48,7 +47,8 @@
 	}
 
 	&.disabled {
-		opacity: 0.5;
+		color: color.adjust($btnTextColor, $lightness: -40%);
+		background: color.adjust($btnBgColor, $lightness: -10%);
 		pointer-events: none;
 		cursor: inherit;
 	}