Closed MiSikora closed 4 days ago
2 Warnings | |
---|---|
:warning: | This PR is larger than 500 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews. |
:warning: | Class ClipSelectorState is missing tests, but unit-tests-exemption label was set to ignore this. |
Generated by :no_entry_sign: Danger
When the clip box edge is moved to the start of the timeline, and timeline view is scrolled, I see a small grey box:
Yes, this is expected. The start handle is offset so that its end position aligns with a time mark. When you scroll to the left, the handle moves out of the screen, but the connecting frame remains visible. If the frame were clipped to the timeline edge, there would be an empty space between the handle and the frame when you start scrolling.
In Figma, I can see the current position in the timeline view, do we plan to add it in a later PR?
Yes, I plan to address it in one of the next PRs.
Description
This PR adds clip selection to clip sharing. After several iterations, I ultimately used
LazyRow
as the UI element for the timeline. Initially, I experimented withSubcomposeLayout
, but I soon realized that I would be implementing something very similar toLazyRow
, which would likely be not as optimized. Although it might be possible to create a more efficient custom layout, I am satisfied with the current design.The UI is divided into two main components:
ClipTimeline
andClipBox
.ClipTimeline
is responsible for displaying ticks, whileClipBox
handles the clipping window. They communicate viaClipSelectorState
, which is remembered in theShareClipPage
, a higher-level component. This setup preserves the state of zoom, scroll offset, etc., during configuration changes. The state also manages the translation between pixels and duration, and vice versa.Double-tapping is implemented in
ClipTimeline
instead ofClipBox
for a key reason. Adding it toClipBox
makesClipTimeline
unresponsive to scroll events. While this could be addressed by adding another.pointerInput()
that delegates to scroll state, my testing found it a bit janky. For example, it wasn't always 100% responsive, and simple delegation lost nice features like flings or bounce animations.The zoom gesture is somewhat problematic, but I don't know if we can improve it. I'm currently delegating to
.transformable()
, which handles zooming. The issue seems to stem fromLazyRow
also supporting scrolling, which interferes with zooming.Designs: Figma
Next steps:
Testing Instructions
Screenshots or Screencast
Demo
https://github.com/Automattic/pocket-casts-android/assets/30936061/c19689fb-e786-4cc6-92f5-02bc462ff806
Scrolling
Dragging
Double tapping
Zooming
Checklist
./gradlew spotlessApply
to automatically apply formatting/linting)modules/services/localization/src/main/res/values/strings.xml
~I have tested any UI changes...