Skip to content

Commit 578646d

Browse files
khushal87khushal87
committed
fix: add video manager state store
1 parent aa303b4 commit 578646d

File tree

15 files changed

+517
-373
lines changed

15 files changed

+517
-373
lines changed

‎package/src/components/Attachment/Gallery.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -281,11 +281,11 @@ const GalleryThumbnail = ({
281281
const { t } = useTranslationContext();
282282

283283
const openImageViewer = () => {
284-
if (message) {
285-
imageGalleryStateStore.message = message;
286-
imageGalleryStateStore.selectedAttachmentUrl = thumbnail.url;
287-
setOverlay('gallery');
284+
if (!message) {
285+
return;
288286
}
287+
imageGalleryStateStore.openImageGallery(message, thumbnail.url);
288+
setOverlay('gallery');
289289
};
290290

291291
const defaultOnPress = () => {

‎package/src/components/Attachment/Giphy.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -205,8 +205,10 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
205205
const giphyDimensions: { height?: number; width?: number } = {};
206206

207207
const defaultOnPress = () => {
208-
imageGalleryStateStore.message = message;
209-
imageGalleryStateStore.selectedAttachmentUrl = uri;
208+
if (!uri) {
209+
return;
210+
}
211+
imageGalleryStateStore.openImageGallery(message, uri);
210212
setOverlay('gallery');
211213
};
212214

‎package/src/components/ImageGallery/ImageGallery.tsx‎

Lines changed: 29 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import React, { RefObject, useCallback, useEffect, useRef, useState } from 'react';
1+
import React, { useCallback, useEffect, useRef, useState } from 'react';
22
import { Image, ImageStyle, Keyboard, StyleSheet, ViewStyle } from 'react-native';
33

44
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
55

66
import Animated, {
77
Easing,
88
SharedValue,
9+
useAnimatedReaction,
910
useAnimatedStyle,
1011
useDerivedValue,
1112
useSharedValue,
@@ -35,14 +36,10 @@ import {
3536
import { useImageGalleryGestures } from './hooks/useImageGalleryGestures';
3637

3738
import { useImageGalleryContext } from '../../contexts/imageGalleryContext/ImageGalleryContext';
38-
import {
39-
OverlayProviderProps,
40-
useOverlayContext,
41-
} from '../../contexts/overlayContext/OverlayContext';
39+
import { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
4240
import { useTheme } from '../../contexts/themeContext/ThemeContext';
4341
import { useStateStore } from '../../hooks';
4442
import { useViewport } from '../../hooks/useViewport';
45-
import { VideoType } from '../../native';
4643
import { ImageGalleryState } from '../../state-store/image-gallery-state-store';
4744
import { FileTypes } from '../../types/types';
4845

@@ -107,11 +104,9 @@ type Props = ImageGalleryCustomComponents & {
107104
overlayOpacity: SharedValue<number>;
108105
} & Pick<
109106
OverlayProviderProps,
110-
| 'giphyVersion'
111107
| 'imageGalleryGridSnapPoints'
112108
| 'imageGalleryGridHandleHeight'
113109
| 'numberOfImageGalleryGridColumns'
114-
| 'autoPlayVideo'
115110
>;
116111

117112
export const ImageGallery = (props: Props) => {
@@ -128,7 +123,6 @@ export const ImageGallery = (props: Props) => {
128123
imageGallery: { backgroundColor, pager, slide },
129124
},
130125
} = useTheme();
131-
const { setOverlay } = useOverlayContext();
132126
const { imageGalleryStateStore } = useImageGalleryContext();
133127
const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
134128
const assets = imageGalleryStateStore.assets;
@@ -198,6 +192,14 @@ export const ImageGallery = (props: Props) => {
198192
const scale = useSharedValue(1);
199193
const translationX = useSharedValue(-(fullWindowWidth + MARGIN) * currentIndex);
200194

195+
useAnimatedReaction(
196+
() => currentIndex,
197+
(index) => {
198+
translationX.value = -(fullWindowWidth + MARGIN) * index;
199+
},
200+
[currentIndex, fullWindowWidth],
201+
);
202+
201203
/**
202204
* Image heights are not provided and therefore need to be calculated.
203205
* We start by allowing the image to be the full height then reduce it
@@ -226,6 +228,14 @@ export const ImageGallery = (props: Props) => {
226228
// eslint-disable-next-line react-hooks/exhaustive-deps
227229
}, [currentIndex]);
228230

231+
// If you change the current index, pause the active video player.
232+
useEffect(() => {
233+
const actvivePlayer = imageGalleryStateStore.videoPlayerPool.getActivePlayer();
234+
if (actvivePlayer) {
235+
actvivePlayer.pause();
236+
}
237+
}, [currentIndex, imageGalleryStateStore.videoPlayerPool]);
238+
229239
const { doubleTap, pan, pinch, singleTap } = useImageGalleryGestures({
230240
currentImageHeight,
231241
halfScreenHeight,
@@ -317,79 +327,6 @@ export const ImageGallery = (props: Props) => {
317327
}
318328
};
319329

320-
const handleEnd = () => {
321-
handlePlayPause(assets[currentIndex].id, true);
322-
handleProgress(assets[currentIndex].id, 1, true);
323-
};
324-
325-
const handleImageGalleryClose = () => {
326-
imageGalleryStateStore.clear();
327-
setOverlay('none');
328-
};
329-
330-
const videoRef = useRef<VideoType>(null);
331-
332-
const handleLoad = (index: string, duration: number) => {
333-
// setImageGalleryAttachments((prevImageGalleryAttachment) =>
334-
// prevImageGalleryAttachment.map((imageGalleryAttachment) => ({
335-
// ...imageGalleryAttachment,
336-
// duration: imageGalleryAttachment.id === index ? duration : imageGalleryAttachment.duration,
337-
// })),
338-
// );
339-
};
340-
341-
const handleProgress = (index: string, progress: number, hasEnd?: boolean) => {
342-
// setImageGalleryAttachments((prevImageGalleryAttachments) =>
343-
// prevImageGalleryAttachments.map((imageGalleryAttachment) => ({
344-
// ...imageGalleryAttachment,
345-
// progress:
346-
// imageGalleryAttachment.id === index
347-
// ? hasEnd
348-
// ? 1
349-
// : progress
350-
// : imageGalleryAttachment.progress,
351-
// })),
352-
// );
353-
};
354-
355-
const handlePlayPause = (index: string, pausedStatus?: boolean) => {
356-
// if (pausedStatus === false) {
357-
// // If the status is false we set the audio with the index as playing and the others as paused.
358-
// setImageGalleryAttachments((prevImageGalleryAttachment) =>
359-
// prevImageGalleryAttachment.map((imageGalleryAttachment) => ({
360-
// ...imageGalleryAttachment,
361-
// paused: imageGalleryAttachment.id === index ? false : true,
362-
// })),
363-
// );
364-
// if (videoRef.current?.play) {
365-
// videoRef.current.play();
366-
// }
367-
// } else {
368-
// // If the status is true we simply set all the audio's paused state as true.
369-
// setImageGalleryAttachments((prevImageGalleryAttachment) =>
370-
// prevImageGalleryAttachment.map((imageGalleryAttachment) => ({
371-
// ...imageGalleryAttachment,
372-
// paused: true,
373-
// })),
374-
// );
375-
// if (videoRef.current?.pause) {
376-
// videoRef.current.pause();
377-
// }
378-
// }
379-
};
380-
381-
const onPlayPause = (status?: boolean) => {
382-
if (status === undefined) {
383-
if (assets[currentIndex].paused) {
384-
handlePlayPause(assets[currentIndex].id, false);
385-
} else {
386-
handlePlayPause(assets[currentIndex].id, true);
387-
}
388-
} else {
389-
handlePlayPause(assets[currentIndex].id, status);
390-
}
391-
};
392-
393330
const MemoizedImageGridHandle = useCallback(
394331
() => (
395332
<ImageGridHandle
@@ -414,20 +351,16 @@ export const ImageGallery = (props: Props) => {
414351
photo.type === FileTypes.Video ? (
415352
<AnimatedGalleryVideo
416353
attachmentId={photo.id}
417-
handleEnd={handleEnd}
418-
handleLoad={handleLoad}
419-
handleProgress={handleProgress}
420354
index={i}
421-
key={`${photo.uri}-${i}`}
355+
key={photo.id}
422356
offsetScale={offsetScale}
423-
paused={photo.paused || false}
357+
photo={photo}
424358
previous={currentIndex > i}
425359
repeat={true}
426360
scale={scale}
427361
screenHeight={fullWindowHeight}
428362
selected={currentIndex === i}
429363
shouldRender={Math.abs(currentIndex - i) < 4}
430-
source={{ uri: photo.uri }}
431364
style={[
432365
{
433366
height: fullWindowHeight * 8,
@@ -438,13 +371,12 @@ export const ImageGallery = (props: Props) => {
438371
]}
439372
translateX={translateX}
440373
translateY={translateY}
441-
videoRef={videoRef as RefObject<VideoType>}
442374
/>
443375
) : (
444376
<AnimatedGalleryImage
445377
accessibilityLabel={'Image Item'}
446378
index={i}
447-
key={`${photo.uri}-${i}`}
379+
key={photo.id}
448380
offsetScale={offsetScale}
449381
photo={photo}
450382
previous={currentIndex > i}
@@ -469,30 +401,18 @@ export const ImageGallery = (props: Props) => {
469401
</Animated.View>
470402
</GestureDetector>
471403
<ImageGalleryHeader
472-
handleImageGalleryClose={handleImageGalleryClose}
473404
opacity={headerFooterOpacity}
474-
photo={assets[currentIndex]}
475405
visible={headerFooterVisible}
476406
{...imageGalleryCustomComponents?.header}
477407
/>
478408

479-
{assets[currentIndex] && (
480-
<ImageGalleryFooter
481-
accessibilityLabel={'Image Gallery Footer'}
482-
duration={assets[currentIndex].duration || 0}
483-
onPlayPause={onPlayPause}
484-
opacity={headerFooterOpacity}
485-
openGridView={openGridView}
486-
paused={assets[currentIndex].paused || false}
487-
photo={assets[currentIndex]}
488-
photoLength={assets.length}
489-
progress={assets[currentIndex].progress || 0}
490-
selectedIndex={currentIndex}
491-
videoRef={videoRef as RefObject<VideoType>}
492-
visible={headerFooterVisible}
493-
{...imageGalleryCustomComponents?.footer}
494-
/>
495-
)}
409+
<ImageGalleryFooter
410+
accessibilityLabel={'Image Gallery Footer'}
411+
opacity={headerFooterOpacity}
412+
openGridView={openGridView}
413+
visible={headerFooterVisible}
414+
{...imageGalleryCustomComponents?.footer}
415+
/>
496416

497417
<ImageGalleryOverlay
498418
animatedBottomSheetIndex={animatedBottomSheetIndex}
@@ -512,7 +432,6 @@ export const ImageGallery = (props: Props) => {
512432
>
513433
<ImageGrid
514434
closeGridView={closeGridView}
515-
imageGalleryStateStore={imageGalleryStateStore}
516435
numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
517436
{...imageGalleryCustomComponents?.grid}
518437
/>
@@ -541,13 +460,10 @@ export type Photo = {
541460
uri: string;
542461
channelId?: string;
543462
created_at?: string | Date;
544-
duration?: number;
545463
messageId?: string;
546464
mime_type?: string;
547465
original_height?: number;
548466
original_width?: number;
549-
paused?: boolean;
550-
progress?: number;
551467
thumb_url?: string;
552468
type?: string;
553469
user?: UserResponse | null;

0 commit comments

Comments
 (0)