fix(Segment Storyboard): source layers aren't sorted accoring to rank

Author: jstarpl

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

@@ -27,7 +27,10 @@ import { Meteor } from 'meteor/meteor'
 import { hidePointerLockCursor, showPointerLockCursor } from '../../lib/PointerLockCursor'
 import { SegmentScrollbar } from './SegmentScrollbar'
 import { OptionalVelocityComponent } from '../../lib/utilComponents'
-import { filterSecondarySourceLayers } from './StoryboardPartSecondaryPieces/StoryboardPartSecondaryPieces'
+import {
+	filterSecondaryOutputLayers,
+	filterSecondarySourceLayers,
+} from './StoryboardPartSecondaryPieces/StoryboardPartSecondaryPieces'
 import { SegmentViewMode } from '../SegmentContainer/SegmentViewModes'
 import { ErrorBoundary } from '../../lib/ErrorBoundary'
 import { SwitchViewModeButton } from '../SegmentContainer/SwitchViewModeButton'
@@ -658,19 +661,17 @@ export const SegmentStoryboard = React.memo(
 
 				<div className="segment-timeline__mos-id">{props.segment.externalId}</div>
 				<div className="segment-timeline__source-layers" role="tree" aria-label={t('Sources')}>
-					{Object.values<IOutputLayerUi>(props.segment.outputLayers)
-						.filter((outputGroup) => outputGroup.used)
-						.map((outputGroup) => (
-							<div className="segment-timeline__output-group" key={outputGroup._id}>
-								{filterSecondarySourceLayers(outputGroup.sourceLayers).map((sourceLayer) =>
-									sourceLayer.pieces.length > 0 ? (
-										<div className="segment-timeline__source-layer" key={sourceLayer._id} role="treeitem">
-											{sourceLayer.name}
-										</div>
-									) : null
-								)}
-							</div>
-						))}
+					{filterSecondaryOutputLayers(Object.values<IOutputLayerUi>(props.segment.outputLayers)).map((outputGroup) => (
+						<div className="segment-timeline__output-group" key={outputGroup._id}>
+							{filterSecondarySourceLayers(outputGroup.sourceLayers).map((sourceLayer) =>
+								sourceLayer.pieces.length > 0 ? (
+									<div className="segment-timeline__source-layer" key={sourceLayer._id} role="treeitem">
+										{sourceLayer.name}
+									</div>
+								) : null
+							)}
+						</div>
+					))}
 				</div>
 				<ErrorBoundary>
 					<SwitchViewModeButton currentMode={SegmentViewMode.Storyboard} onSwitchViewMode={props.onSwitchViewMode} />

packages/webui/src/client/ui/SegmentStoryboard/StoryboardPartSecondaryPieces/StoryboardPartSecondaryPieces.tsx

@@ -12,13 +12,19 @@ interface IProps {
 
 const showHiddenSourceLayers = getShowHiddenSourceLayers()
 
+export function filterSecondaryOutputLayers(outputLayers: IOutputLayerUi[]): IOutputLayerUi[] {
+	return outputLayers.filter((outputLayer) => outputLayer.used).sort((a, b) => a._rank - b._rank)
+}
+
 export function filterSecondarySourceLayers(sourceLayers: ISourceLayerExtended[]): ISourceLayerExtended[] {
-	return sourceLayers.filter(
-		(sourceLayer) =>
-			(showHiddenSourceLayers || !sourceLayer.isHidden) &&
-			!sourceLayer.onPresenterScreen &&
-			sourceLayer.type !== SourceLayerType.TRANSITION
-	)
+	return sourceLayers
+		.filter(
+			(sourceLayer) =>
+				(showHiddenSourceLayers || !sourceLayer.isHidden) &&
+				!sourceLayer.onPresenterScreen &&
+				sourceLayer.type !== SourceLayerType.TRANSITION
+		)
+		.sort((a, b) => a._rank - b._rank)
 }
 
 export const StoryboardPartSecondaryPieces = React.memo(function StoryboardPartSecondaryPieces({
@@ -27,34 +33,25 @@ export const StoryboardPartSecondaryPieces = React.memo(function StoryboardPartS
 }: IProps) {
 	return (
 		<div className="segment-storyboard__part__secondary-pieces">
-			{Object.values<IOutputLayerUi>(outputLayers)
-				.filter((outputLayer) => outputLayer.used)
-				.map((outputLayer) => {
-					const sourceLayers = filterSecondarySourceLayers(
-						Object.values<ISourceLayerExtended>(outputLayer.sourceLayers)
-					)
+			{filterSecondaryOutputLayers(Object.values<IOutputLayerUi>(outputLayers)).map((outputLayer) => {
+				const sourceLayers = filterSecondarySourceLayers(Object.values<ISourceLayerExtended>(outputLayer.sourceLayers))
 
-					if (sourceLayers.length === 0) return null
+				if (sourceLayers.length === 0) return null
 
-					return (
-						<div
-							key={outputLayer._id}
-							className="segment-storyboard__part__output-group"
-							data-obj-id={outputLayer._id}
-							role="log"
-							aria-live="assertive"
-						>
-							{sourceLayers.map((sourceLayer) => (
-								<StoryboardSourceLayer
-									key={sourceLayer._id}
-									sourceLayer={sourceLayer}
-									pieces={part.pieces}
-									part={part}
-								/>
-							))}
-						</div>
-					)
-				})}
+				return (
+					<div
+						key={outputLayer._id}
+						className="segment-storyboard__part__output-group"
+						data-obj-id={outputLayer._id}
+						role="log"
+						aria-live="assertive"
+					>
+						{sourceLayers.map((sourceLayer) => (
+							<StoryboardSourceLayer key={sourceLayer._id} sourceLayer={sourceLayer} pieces={part.pieces} part={part} />
+						))}
+					</div>
+				)
+			})}
 		</div>
 	)
 })

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

@@ -882,10 +882,8 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 		if (this.props.segment.outputLayers === undefined) return []
 
 		return Object.values<IOutputLayerUi>(this.props.segment.outputLayers)
-			.sort((a, b) => {
-				return a._rank - b._rank
-			})
 			.filter((group) => group.used)
+			.sort((a, b) => a._rank - b._rank)
 	}
 
 	private renderOutputLayerControls(outputGroups: IOutputLayerUi[]) {