Skip to content

Conversation

@jsit
Copy link
Member

@jsit jsit commented Nov 15, 2025

Replacing our DIY slider for OS-native sliders from React Native library. Should feel more native, be easier to maintain, and better for accessibility.

I can't actually drag this on the Android emulator, so -- I don't know if that's the emulator's fault or the component's fault, but either way I'm opening this as draft.

This will require an npm i and pod install to work.

Closes #88

Screen.Recording.2025-11-15.at.12.55.18.PM.mov

@jsit jsit force-pushed the feat/88-native-playback-slider branch from c4cd1dd to 68aa47b Compare November 15, 2025 04:26
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR replaces the custom DIY slider implementation with the native @react-native-community/slider component to improve maintainability, accessibility, and provide a more native feel for playback controls.

Key changes:

  • Introduces new PlaybackSlider component wrapping @react-native-community/slider
  • Removes complex gesture handling code using react-native-reanimated and react-native-gesture-handler
  • Simplifies the codebase by eliminating ~200 lines of custom slider logic

Reviewed Changes

Copilot reviewed 4 out of 6 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
src/components/PlaybackSlider.tsx New component wrapping the native slider with TrackPlayer integration
src/app/Schedule/ShowDetailsPage.tsx Replaces custom progress bar/gesture code with PlaybackSlider component
src/app/Schedule/ArchivedShowView.tsx Replaces custom progress bar/gesture code with PlaybackSlider component
package.json Adds @react-native-community/slider dependency (v5.1.1)
package-lock.json Lock file update for new dependency
ios/Podfile.lock iOS native dependency update for slider component
Comments suppressed due to low confidence (1)

src/app/Schedule/ShowDetailsPage.tsx:68

  • The useMemo here is unnecessary and potentially problematic. The useProgress() hook already returns a stable object reference that updates when progress changes. Wrapping it in useMemo with progressHook as a dependency doesn't provide any benefit since the hook result already handles its own memoization. Additionally, progressHook will never be falsy/null in normal operation, so the fallback || { position: 0, duration: 0 } is unnecessary.

Consider simplifying to:

const progress = useProgress();

And remove the progressHook variable entirely.

  const progressHook = useProgress();
  const progress = useMemo(
    () => progressHook || { position: 0, duration: 0 },
    [progressHook],
  );

@jsit jsit added this to the v1.4.0 milestone Nov 18, 2025
jsit and others added 9 commits November 20, 2025 08:20
…ck-slider

* origin/main:
  fix: fix day grouping for early morning shows (#99) (#125)
  feat: stop playback for live, pause for archive (#30) (#106)
  chore: add path aliases (#111)
  fix: remove logo from schedule page (#118) (#119)
  chore: version bump 1.3.0 (#107)
* feat: stop playback, don't pause (#30)

* fix: simplify styles

* fix: use icons for home screen play/pause

* Update src/app/Schedule/ArchivedShowView.tsx

Co-authored-by: Copilot <[email protected]>

* fix: pause archives, don't stop them

* fix: live should stop, archive should pause

* feat: allow jump/forward back on archive playback

* fix: add missing utils file

* chore: remove unused hook

* fix: undo stop for preview

* chore: remove unused import

* fix: fix auto-paused state regression

* fix: add jumpinterval options

* adds missing event listeners to handle lock screen jump forward/backward controls

* chore: lint

* fix: update jump intervals from 15 to 30

---------

Co-authored-by: Copilot <[email protected]>
Co-authored-by: alexandersimoes <[email protected]>
…ck-slider

* origin/main:
  Feat: adds skip buttons to both the archive view and homescreen (#146)
  docs: add conventional commits format to copilot instructions (#133)
  feat: allow jump forward/back when playing archives (#124)
jsit added 2 commits November 22, 2025 16:32
…ck-slider

* origin/main:
  feat: add vertical scrollbars (#144) (#145)
  chore: add husky and lint-staged (#137)
  fix: add right padding to show artwork (#143) (#154)
  chore: fix old relative imports (#139)
  chore: remove unused currentShowRef
  chore: remove unneeded currentShow code
  refactor: simplify mainContent() call
  get current show from RecentlyPlayedService to fix highlighting
  refactor: split chained ternaries on RecentlyPlayed for readability
@jsit jsit removed this from the v1.4.0 milestone Dec 2, 2025
@jsit jsit requested a review from Copilot December 6, 2025 18:27
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 4 out of 6 changed files in this pull request and generated 7 comments.

Comment on lines 7 to 42
export default function PlaybackSlider({
styles,
onValueChange,
onSlidingComplete,
onSlidingStart,
}: {
styles?: StyleProp<ViewStyle>;
// Returns value in seconds
onValueChange?: (value: number) => void;
// Returns value in percentage (0 to 1)
onSlidingComplete?: (value: number) => void;
// Returns value in percentage (0 to 1)
onSlidingStart?: (value: number) => void;
}) {
const progress = useProgress();

return (
<Slider
style={styles}
minimumValue={0}
maximumValue={1}
onSlidingStart={onSlidingStart}
onSlidingComplete={onSlidingComplete}
thumbTintColor={
Platform.OS === 'android' ? CORE_COLORS.WMBR_GREEN : undefined
}
minimumTrackTintColor={CORE_COLORS.WMBR_GREEN}
maximumTrackTintColor={COLORS.TEXT.PRIMARY}
onValueChange={value =>
onValueChange?.(value * (progress?.duration || 0))
}
tapToSeek={true}
value={progress.duration > 0 ? progress.position / progress.duration : 0}
/>
);
}
Copy link

Copilot AI Dec 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new PlaybackSlider component lacks test coverage. Since the repository includes comprehensive automated testing for components (as seen in __tests__/ directory with tests for PlayButton, BottomMenuBar, etc.), this new component should also have tests to verify its behavior, especially around the slider value calculations and callback interactions.

Copilot uses AI. Check for mistakes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create separate component for progress bar / playback scrubber

3 participants