-
Notifications
You must be signed in to change notification settings - Fork 210
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add clip selector #2406
Add clip selector #2406
Conversation
Generated by 🚫 Danger |
modules/features/clip/src/main/kotlin/au/com/shiftyjelly/pocketcasts/clip/ClipSelector.kt
Outdated
Show resolved
Hide resolved
modules/features/clip/src/main/kotlin/au/com/shiftyjelly/pocketcasts/clip/ClipSelector.kt
Outdated
Show resolved
Hide resolved
modules/features/clip/src/main/kotlin/au/com/shiftyjelly/pocketcasts/clip/ClipSelector.kt
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is so awesome!
I tested the following and enjoyed every part of the interaction 🌟
- Scrolling ✅
- Dragging clip box edges ✅
- Double tap gesture ✅
- Colors ✅
- Landscape layout ✅
- Remember the last state on orientation changes ✅
- Large display ✅
Just a couple of findings:
- Grey box at the beginning:
When the clip box edge is moved to the start of the timeline, and timeline view is scrolled, I see a small grey box:
grey.box.mp4
- In Figma, I can see the current position in the timeline view, do we plan to add it in a later PR?
modules/services/utils/src/main/java/au/com/shiftyjelly/pocketcasts/utils/FlowUtil.kt
Outdated
Show resolved
Hide resolved
modules/features/clip/src/main/kotlin/au/com/shiftyjelly/pocketcasts/clip/ClipSelector.kt
Outdated
Show resolved
Hide resolved
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.
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
full.mp4
Scrolling
Dragging
Double tapping
Zooming
Checklist
If this is a user-facing change, I have added an entry in CHANGELOG.md./gradlew spotlessApply
to automatically apply formatting/linting)All strings that need to be localized are inmodules/services/localization/src/main/res/values/strings.xml
I have updated (or requested that someone edit) the spreadsheet to reflect any new or changed analytics.I have tested any UI changes...
with different themeswith the device set to have a large display and font sizefor accessibility with TalkBack