Skip to content

Commit edbff6b

Browse files
olzzonolzzon
committed
fix: memory leak in mini inspector
1 parent 34e1349 commit edbff6b

File tree

1 file changed

+83
-77
lines changed

1 file changed

+83
-77
lines changed

‎packages/webui/src/client/ui/SegmentTimeline/SmallParts/SegmentTimelinePartHoverPreview.tsx‎

Lines changed: 83 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -59,81 +59,87 @@ export const SegmentTimelinePartHoverPreview = ({
5959
setTimeToPixelRatio(width / previewWindowDuration)
6060
}, [inspectorRef, previewWindowDuration])
6161

62-
return showMiniInspector ? (
63-
<div
64-
className="segment-timeline__mini-inspector segment-timeline__mini-inspector--small-parts"
65-
ref={setInspectorRef}
66-
>
67-
<div className="segment-timeline__mini-inspector--small-parts__duration">
68-
<span className="segment-timeline__mini-inspector--small-parts__duration__label">{t('Parts Duration')}</span>
69-
{RundownUtils.formatDiffToTimecode(actualPartsDuration, false, false, true, false, true)}
70-
</div>
71-
<div className="segment-timeline__mini-inspector__mini-timeline">
72-
{parts.map((part, index) => {
73-
return (
74-
<SegmentTimelinePart
75-
key={unprotectString(part.instance._id)}
76-
segment={segment}
77-
playlist={playlist}
78-
studio={studio}
79-
collapsedOutputs={collapsedOutputs}
80-
scrollLeft={0}
81-
timeToPixelRatio={timeToPixelRatio}
82-
autoNextPart={autoNextPart}
83-
followLiveLine={false}
84-
liveLineHistorySize={liveLineHistorySize}
85-
livePosition={0}
86-
totalSegmentDuration={previewWindowDuration}
87-
scrollWidth={Number.POSITIVE_INFINITY}
88-
isLastSegment={isLastSegment}
89-
isLastInSegment={isLastInSegment && !followingPart && parts.length - 1 === index}
90-
isAfterLastValidInSegmentAndItsLive={false}
91-
part={part}
92-
isPreview={true}
93-
isBudgetGap={false}
94-
showDurationSourceLayers={showDurationSourceLayers}
95-
isLiveSegment={undefined}
96-
anyPriorPartWasLive={undefined}
97-
livePartStartsAt={undefined}
98-
livePartDisplayDuration={undefined}
99-
budgetDuration={undefined}
100-
firstPartInSegment={parts[0]}
101-
/>
102-
)
103-
})}
104-
{followingPart && (
105-
<SegmentTimelinePart
106-
key={unprotectString(followingPart.instance._id)}
107-
className="segment-timeline__part--shaded"
108-
segment={segment}
109-
playlist={playlist}
110-
studio={studio}
111-
collapsedOutputs={collapsedOutputs}
112-
scrollLeft={0}
113-
timeToPixelRatio={timeToPixelRatio}
114-
autoNextPart={autoNextPart}
115-
followLiveLine={false}
116-
liveLineHistorySize={liveLineHistorySize}
117-
livePosition={0}
118-
totalSegmentDuration={previewWindowDuration}
119-
scrollWidth={Number.POSITIVE_INFINITY}
120-
isLastSegment={isLastSegment}
121-
isLastInSegment={false}
122-
isAfterLastValidInSegmentAndItsLive={false}
123-
part={followingPart}
124-
isPreview={true}
125-
cropDuration={followingPartPreviewDuration}
126-
isBudgetGap={false}
127-
showDurationSourceLayers={showDurationSourceLayers}
128-
isLiveSegment={undefined}
129-
anyPriorPartWasLive={undefined}
130-
livePartStartsAt={undefined}
131-
livePartDisplayDuration={undefined}
132-
budgetDuration={undefined}
133-
firstPartInSegment={parts[0]}
134-
/>
135-
)}
136-
</div>
137-
</div>
138-
) : null
62+
return (
63+
<>
64+
{showMiniInspector && (
65+
<div
66+
className="segment-timeline__mini-inspector segment-timeline__mini-inspector--small-parts"
67+
ref={setInspectorRef}
68+
>
69+
<div className="segment-timeline__mini-inspector--small-parts__duration">
70+
<span className="segment-timeline__mini-inspector--small-parts__duration__label">
71+
{t('Parts Duration')}
72+
</span>
73+
{RundownUtils.formatDiffToTimecode(actualPartsDuration, false, false, true, false, true)}
74+
</div>
75+
<div className="segment-timeline__mini-inspector__mini-timeline">
76+
{parts.map((part, index) => {
77+
return (
78+
<SegmentTimelinePart
79+
key={unprotectString(part.instance._id)}
80+
segment={segment}
81+
playlist={playlist}
82+
studio={studio}
83+
collapsedOutputs={collapsedOutputs}
84+
scrollLeft={0}
85+
timeToPixelRatio={timeToPixelRatio}
86+
autoNextPart={autoNextPart}
87+
followLiveLine={false}
88+
liveLineHistorySize={liveLineHistorySize}
89+
livePosition={0}
90+
totalSegmentDuration={previewWindowDuration}
91+
scrollWidth={Number.POSITIVE_INFINITY}
92+
isLastSegment={isLastSegment}
93+
isLastInSegment={isLastInSegment && !followingPart && parts.length - 1 === index}
94+
isAfterLastValidInSegmentAndItsLive={false}
95+
part={part}
96+
isPreview={true}
97+
isBudgetGap={false}
98+
showDurationSourceLayers={showDurationSourceLayers}
99+
isLiveSegment={undefined}
100+
anyPriorPartWasLive={undefined}
101+
livePartStartsAt={undefined}
102+
livePartDisplayDuration={undefined}
103+
budgetDuration={undefined}
104+
firstPartInSegment={parts[0]}
105+
/>
106+
)
107+
})}
108+
{followingPart && (
109+
<SegmentTimelinePart
110+
key={unprotectString(followingPart.instance._id)}
111+
className="segment-timeline__part--shaded"
112+
segment={segment}
113+
playlist={playlist}
114+
studio={studio}
115+
collapsedOutputs={collapsedOutputs}
116+
scrollLeft={0}
117+
timeToPixelRatio={timeToPixelRatio}
118+
autoNextPart={autoNextPart}
119+
followLiveLine={false}
120+
liveLineHistorySize={liveLineHistorySize}
121+
livePosition={0}
122+
totalSegmentDuration={previewWindowDuration}
123+
scrollWidth={Number.POSITIVE_INFINITY}
124+
isLastSegment={isLastSegment}
125+
isLastInSegment={false}
126+
isAfterLastValidInSegmentAndItsLive={false}
127+
part={followingPart}
128+
isPreview={true}
129+
cropDuration={followingPartPreviewDuration}
130+
isBudgetGap={false}
131+
showDurationSourceLayers={showDurationSourceLayers}
132+
isLiveSegment={undefined}
133+
anyPriorPartWasLive={undefined}
134+
livePartStartsAt={undefined}
135+
livePartDisplayDuration={undefined}
136+
budgetDuration={undefined}
137+
firstPartInSegment={parts[0]}
138+
/>
139+
)}
140+
</div>
141+
</div>
142+
)}
143+
</>
144+
)
139145
}

0 commit comments

Comments
 (0)