Add focus range

[linear[bot]]

THE-110 Focus Range

# Description A way to temporarily focus playback to a certain range We had this in the older theatre [0d51f4f7-6b30-4ebd-b3f7-b223bd0943cc](https://uploads.linear.app/82f1c98a-881f-40f2-b761-ab372c5d0b3b/b1b63b12-7fc1-41d7-ba23-642784eacff0/0d51f4f7-6b30-4ebd-b3f7-b223bd0943cc) # Hints * Ask Aria for how to save the focus' state on the store * Ask Aria for how to read the state reactively (hint: use `usePrism()`) * Use the existing context menu hook `useContextMenu()` * Find out where in the code, the `spacebar` key is read. You probably have to read it in your own component, so you can capture those keypresses

[fulopkovacs]

Status: WIP, not ready to merge!

I have reached the point where we have a messy Focus Range with dragable and movable handles for the start and end points of the range. It also controls the playback once you moved the handles AND restarted the playback. I have some thoughts on how to proceed, but a review now would save us a few other ones in the future. :laughing: A Slack-huddle/Zoom call would be appreciated, since I have a few questions.

[AriaMinaei]

Looks like the drag gesture has a drift in FF depending on zoom level, but not in Chrome.

https://user-images.githubusercontent.com/593118/157208109-b71ba93c-adac-4962-8760-d0eac4f3b831.mp4

[netlify[bot]]

❌ Deploy Preview for theatrejs-playground failed.

Name	Link
🔨 Latest commit	6bafdf6c42d8e66336c4c4b691fa20025c3aa504
🔍 Latest deploy log	https://app.netlify.com/sites/theatrejs-playground/deploys/623de2aac3718f0009b9f23d

[fulopkovacs]

Current state of the PR:

• [x] fix the height of the highlighted part of the DopeSheet
• [x] minimal size
• [x] double click for max size
• [x] replace the current color of focusRangeStrip when dragging
• [x] replace the current color of focusRangeThumb when dragging
• [x] make the playhead bigger when the focusRange is used for the playback
• [x] [bugfix] Don't highlight the range on hover when it's disabled
• [x] [feature] display tooltips above the focusRangeThumb-s when dragging
• [x] [bugfix] fix the visuals of the playhead (it looks bad when it's scaled up)
• [x] [refactor] remove the "double click to expand" feature (Mariusz approved this)
• [x] [refactor] refactor the focusRangeTheme object
• [x] [refactor] review and clean up the PR

[fulopkovacs]

Current status after the 1st review:

• [x] Make the thumbs snapable
• [x] Add comments to the parts that are harder to read