movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 12:33:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: adjust values and overlay visibilty based on gesture velocity change

Browse Source
This commit is contained in:
Adrian Castro
2024-02-20 21:07:48 +01:00
parent b41f929f6e
commit 49a6596388
3 changed files with 41 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/expo/src/components/player/VideoPlayer.tsx
View File

@@ -47,6 +47,7 @@ export const VideoPlayer = () => {
const [hasStartedPlaying, setHasStartedPlaying] = useState(false);
const router = useRouter();
const scale = useSharedValue(1);
const [lastVelocityY, setLastVelocityY] = useState(0);
const isIdle = usePlayerStore((state) => state.interface.isIdle);
const stream = usePlayerStore((state) => state.interface.currentStream);
@@ -87,26 +88,34 @@ export const VideoPlayer = () => {
const directionMultiplier = event.velocityY < 0 ? 1 : -1;
const change = directionMultiplier * Math.abs(event.velocityY / divisor);
const newVolume = Math.max(0, Math.min(1, currentVolume.value + change));
const newBrightness = Math.max(0, Math.min(1, brightness.value + change));
if (event.x > screenHalfWidth) {
const change =
directionMultiplier * Math.abs(event.velocityY / divisor);
const newVolume = Math.max(
0,
Math.min(1, currentVolume.value + change),
);
runOnJS(handleVolumeChange)(newVolume);
} else {
const change =
directionMultiplier * Math.abs(event.velocityY / divisor);
const newBrightness = Math.max(
0,
Math.min(1, brightness.value + change),
);
brightness.value = newBrightness;
runOnJS(handleBrightnessChange)(newBrightness);
}
if (
(event.velocityY < 0 && lastVelocityY >= 0) ||
(event.velocityY >= 0 && lastVelocityY < 0)
) {
runOnJS(setLastVelocityY)(event.velocityY);
}
if (event.x > screenHalfWidth) {
runOnJS(handleVolumeChange)(newVolume);
runOnJS(setShowVolumeOverlay)(true);
} else {
runOnJS(handleBrightnessChange)(newBrightness);
runOnJS(setShowBrightnessOverlay)(true);
}
})
.onEnd(() => {
runOnJS(setLastVelocityY)(0);
runOnJS(setShowVolumeOverlay)(false);
runOnJS(setShowBrightnessOverlay)(false);
});

23
apps/expo/src/hooks/player/useBrightness.ts
View File

@@ -24,17 +24,20 @@ export const useBrightness = () => {
}
void init();
}, []);
}, [brightness]);
const handleBrightnessChange = useCallback(async (newValue: number) => {
try {
setShowBrightnessOverlay(true);
brightness.value = newValue;
await Brightness.setBrightnessAsync(newValue);
} catch (error) {
console.error("Failed to set brightness:", error);
}
}, []);
const handleBrightnessChange = useCallback(
async (newValue: number) => {
try {
setShowBrightnessOverlay(true);
brightness.value = newValue;
await Brightness.setBrightnessAsync(newValue);
} catch (error) {
console.error("Failed to set brightness:", error);
}
},
[brightness],
);
return {
showBrightnessOverlay: debouncedShowBrightnessOverlay,

11
apps/expo/src/hooks/player/useVolume.ts
View File

@@ -9,10 +9,13 @@ export const useVolume = () => {
const volume = useSharedValue(1);
const debouncedVolume = useDebounce(volume.value, 20);
const handleVolumeChange = useCallback((newValue: number) => {
volume.value = newValue;
setShowVolumeOverlay(true);
}, []);
const handleVolumeChange = useCallback(
(newValue: number) => {
volume.value = newValue;
setShowVolumeOverlay(true);
},
[volume],
);
return {
showVolumeOverlay: debouncedShowVolumeOverlay,