PRODUCT DESIGN·9 min

Screen Studio: record the action, then choose what viewers see

Screen Studio is a Mac screen recorder and editor for product demos and tutorials. Click-based zooms, adjustable cursors and trimming help turn a recorded task into an explanation people can follow.

Break down the problem and try your own design and implementation first. Then explore the reasoning to check states, edge cases, trade-offs, and ways to test your approach. The guide offers a reasoning path, not a complete implementation.

CODE EXERCISEAdvanced

How should an edited timeline map back to source time?

Scenario

Design time lookup for your own screen-recording editor. After waiting is removed and typing is accelerated, six seconds into the edited video may no longer mean six seconds into the original. The preview needs the correct source time to align the picture and click markers. This exercise covers mapping only, excluding video decoding, audio, frame rate and a complete player.

Input and terms

There is one source recording. The input is an array in edited playback order with at most 100,000 segments. Every segment has a unique nonempty string id, source start and end, and speed. Source times are integer milliseconds from 0 through 1,000,000,000 with start < end. Speed is exactly 1, 2 or 4. Other fields do not affect the mapping.
A segment represents the half-open source interval [start,end): include the start, exclude the end. Segments may be reordered or reuse the same source range. Array order determines playback order, with no extra gaps. At 2× speed, two source milliseconds occupy one edited millisecond.
The query t is edited time expressed as a nonnegative integer number of quarter-millisecond ticks: t=24,000 means 6,000 edited milliseconds. All arithmetic can be exact integer arithmetic; floating-point error handling is unnecessary. Edited segment durations use the same tick unit.
Any invalid input structure, field type, numeric range, duplicate ID or speed rejects the entire input with a segment index/field error. Do not construct a partially usable index. An empty array is valid and has duration zero.

Required behavior

A valid in-range query returns {segmentId, sourceTimeTicks}. Source time also uses quarter-millisecond ticks. Wrong types, negative values and nonintegers produce a parameter error. A valid query at or beyond the total duration produces an explicit end/out-of-range result; do not clamp it to the last frame.
A seam belongs to the next segment. Reverse lookup is outside scope: one source time may be reused, so source-to-edited time is not necessarily one-to-one.
Design preprocessing followed by repeated queries. Explain cumulative durations, boundary lookup and conversion within a segment. Give design and verification reasoning, without a complete implementation or line-by-line pseudocode.

Trace this example

The playback order is A=[0,4000) at 1×, B=[8000,12000) at 2× and C=[1000,3000) at 4×. Calculate total edited duration, then query t=0, 16,000, 23,999, 24,000, 25,999, 26,000. Identify the segment and source time, or the end condition. C overlaps part of A in source time; do not sort by source start.

Deliverables

Provide an input-validation checklist, the meaning of the index, the example results, at least three invariants and boundary tests. Explain preprocessing time, space and per-query complexity for n segments. Distinguish mathematical time mapping from actual frame selection in a player.

Explore the reasoning

Unify units and validate first. Quarter-millisecond ticks express all three allowed speeds exactly: multiply the source duration in milliseconds by four, then divide by speed. Validate the complete input before exposing a new index. Report the original index and field for duplicate IDs instead of keeping only the last entry.
Accumulate boundaries in edited order. A segment starts after the sum of earlier edited durations. Source ranges may overlap, so source start is not the sorting or search key. Positive durations make cumulative edited ends strictly increasing and suitable for binary search.
Assign a seam once. Locate the first cumulative end strictly greater than t. Multiply the edited offset within that segment by its speed and add its source start converted to quarter-millisecond ticks. Handle empty input, invalid queries and t at or beyond the total first, so an out-of-range query cannot fall into the final segment.
Trace the overlapping example. A, B and C last 16,000, 8,000 and 2,000 ticks, totaling 26,000. The queries yield A/0, B/32,000, B/47,998, C/4,000, C/11,996 and end; the value after the slash is source ticks. At 24,000 the result must be C, rather than extending B or reordering C because its source start is smaller.
Check guarantees and cost. Every mapped source time stays within its segment’s half-open range. Advancing one edited tick within a segment advances source time by speed ticks. Complete validation and indexing take O(n) time and O(n) space; each binary-search query takes O(log n). Total duration is at most 4×10^14 ticks, within JavaScript’s safe-integer range. This model does not specify decoding, frame selection or audio synchronization.