@whatmore-repo/whatmore-reactnative-sdk 1.0.41 → 1.0.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +5 -5
  2. package/src/components/EventShoppingOverlay.js +7 -7
  3. package/src/components/EventsVerticalSwipeView.js +26 -3
  4. package/src/components/EventsVerticalSwipeViewNoModal.js +29 -6
  5. package/src/components/carousel-view/EventTileWithProduct.js +1 -1
  6. package/src/components/video-player/AppVideoPlayer.js +26 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@whatmore-repo/whatmore-reactnative-sdk",
3
- "version": "1.0.41",
3
+ "version": "1.0.43",
4
4
  "description": "",
5
5
  "private": false,
6
6
  "main": "index.js",
@@ -20,10 +20,10 @@
20
20
  "@babel/core": "^7.20.0"
21
21
  },
22
22
  "peerDependencies": {
23
- "react": "^18.2.0",
24
- "react-native": "^0.72.1",
25
- "react-native-svg": "13.9.0",
26
- "react-native-video": "^5.2.1"
23
+ "react": ">=18.2.0",
24
+ "react-native": ">=0.72.1",
25
+ "react-native-svg": ">=13.9.0",
26
+ "react-native-video": ">=5.2.1"
27
27
  },
28
28
  "author": "Shyam",
29
29
  "license": "ISC"
package/src/components/EventShoppingOverlay.js CHANGED
@@ -49,15 +49,15 @@ export default function EventShoppingOverlay(props) {
49
49
  }}
50
50
  >
51
51
  </TouchableOpacity>
52
- <View
52
+ <View
53
53
  style={{
54
- height: 180,
55
- paddingLeft: 10,
56
- paddingRight: 10,
54
+ height: 180,
55
+ paddingLeft: 10,
56
+ paddingRight: 10,
57
57
  paddingBottom: 10
58
58
  }}
59
- >
60
- <Swiper
59
+ >
60
+ <Swiper
61
61
  scrollViewProps={{
62
62
  scrollEventThrottle: 1
63
63
  }}
@@ -71,4 +71,4 @@ export default function EventShoppingOverlay(props) {
71
71
  </View>
72
72
  );
73
73
 
74
- }
74
+ }
package/src/components/EventsVerticalSwipeView.js CHANGED
@@ -1,13 +1,34 @@
1
1
  import * as React from 'react';
2
- import { Modal, View } from "react-native";
2
+ import { Modal, View, Text } from "react-native";
3
3
  import Swiper from 'react-native-swiper'
4
4
  import EventShoppingView from './EventShoppingView.js';
5
5
  import { setGlobalState } from '../globals/useAppState_APP.js';
6
6
 
7
+ class ErrorBoundary extends React.Component {
8
+ constructor(props) {
9
+ super(props);
10
+ this.state = { hasError: false, error: null };
11
+ }
12
+ static getDerivedStateFromError(error) {
13
+ return { hasError: true, error };
14
+ }
15
+ componentDidCatch(error, errorInfo) {
16
+ console.log('[Whatmore] Video Modal Error:', error, errorInfo);
17
+ }
18
+ render() {
19
+ if (this.state.hasError) {
20
+ return <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#000'}}>
21
+ <Text style={{color: '#fff'}}>Something went wrong loading the video.</Text>
22
+ </View>;
23
+ }
24
+ return this.props.children;
25
+ }
26
+ }
27
+
7
28
  export default function EventsVerticalSwipeView(props) {
8
29
  var events = props.events;
9
30
  return (
10
- <Modal
31
+ <Modal
11
32
  style={{
12
33
  flex: 1,
13
34
  height: '100%',
@@ -18,6 +39,7 @@ export default function EventsVerticalSwipeView(props) {
18
39
  visible={props.isModalOpen}
19
40
  onRequestClose={()=>props.setIsModalOpen(false)}
20
41
  >
42
+ <ErrorBoundary>
21
43
  <Swiper
22
44
  style={{}}
23
45
  horizontal={false}
@@ -48,7 +70,8 @@ export default function EventsVerticalSwipeView(props) {
48
70
  )
49
71
  })
50
72
  }
51
- </Swiper>
73
+ </Swiper>
74
+ </ErrorBoundary>
52
75
  </Modal>
53
76
  );
54
77
  }
package/src/components/EventsVerticalSwipeViewNoModal.js CHANGED
@@ -1,30 +1,52 @@
1
1
  import * as React from 'react';
2
- import { Dimensions, Modal, View } from "react-native";
2
+ import { Dimensions, Modal, View, Text } from "react-native";
3
3
  import AppVideoPlayer from './video-player/AppVideoPlayer.js'
4
4
  import Swiper from 'react-native-swiper'
5
5
  import { InView } from 'react-native-intersection-observer'
6
6
  import EventShoppingView from './EventShoppingView.js';
7
7
  import { setGlobalState } from '../globals/useAppState_APP.js';
8
8
 
9
+ class ErrorBoundary extends React.Component {
10
+ constructor(props) {
11
+ super(props);
12
+ this.state = { hasError: false, error: null };
13
+ }
14
+ static getDerivedStateFromError(error) {
15
+ return { hasError: true, error };
16
+ }
17
+ componentDidCatch(error, errorInfo) {
18
+ console.log('[Whatmore] Video View Error:', error, errorInfo);
19
+ }
20
+ render() {
21
+ if (this.state.hasError) {
22
+ return <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#000'}}>
23
+ <Text style={{color: '#fff'}}>Something went wrong loading the video.</Text>
24
+ </View>;
25
+ }
26
+ return this.props.children;
27
+ }
28
+ }
29
+
9
30
  export default function EventsVerticalSwipeViewNoModal(props) {
10
31
  var events = props.events;
11
32
  return (
12
- <View
33
+ <View
13
34
  style={{
14
35
  flex: 1,
15
36
  height: '100%',
16
37
  width: '100%'
17
38
  }}
18
39
  >
40
+ <ErrorBoundary>
19
41
  <Swiper
20
- style={{}}
42
+ style={{}}
21
43
  horizontal={false}
22
44
  loop={true}
23
45
  showsPagination={false}
24
46
  loadMinimal={true}
25
47
  loadMinimalSize={1}
26
48
  index={props.initialEventIndex}
27
- onIndexChanged={(index) => {
49
+ onIndexChanged={(index) => {
28
50
  setGlobalState('verticalSwiperViewActiveIndex', index);
29
51
  }}
30
52
 
@@ -45,8 +67,9 @@ export default function EventsVerticalSwipeViewNoModal(props) {
45
67
  </View>
46
68
  )
47
69
  })
48
- }
49
- </Swiper>
70
+ }
71
+ </Swiper>
72
+ </ErrorBoundary>
50
73
  </View>
51
74
  );
52
75
  }
package/src/components/carousel-view/EventTileWithProduct.js CHANGED
@@ -112,7 +112,7 @@ export default function EventTileWithProduct(props) {
112
112
  height: CARD_HEIGHT
113
113
  }}
114
114
  />
115
- {(customStyles?.showProductDetails) &&
115
+ {(customStyles?.showProductDetails) &&
116
116
  <View style={{ display: 'flex', paddingTop: 10, gap: 4 }}>
117
117
  <Text
118
118
  style={{ fontSize: BASE_FONT_SIZE*0.5, paddingRight: 4, fontFamily: fontFamily }}
package/src/components/video-player/AppVideoPlayer.js CHANGED
@@ -7,26 +7,47 @@ import Video from 'react-native-video';
7
7
  export default function AppVideoPlayer(props) {
8
8
  const video = React.useRef(null);
9
9
  const [isAppMuted] = useGlobalState("isAppMuted");
10
+ const [hasError, setHasError] = React.useState(false);
10
11
 
11
12
  const handleLoad = () => {
12
13
  props.setIsLoading(false);
13
14
  }
15
+
16
+ const handleError = (error) => {
17
+ console.log('[Whatmore] Video error:', error);
18
+ setHasError(true);
19
+ props.setIsLoading(false);
20
+ }
21
+
22
+ if (hasError || !props.videoUrl) {
23
+ return (
24
+ <View style={{
25
+ position: 'absolute',
26
+ top: 0, left: 0, bottom: 0, right: 0,
27
+ backgroundColor: '#000'
28
+ }} />
29
+ );
30
+ }
31
+
14
32
  return (
15
33
  <>
16
34
  {props.isLoading && (
17
35
  <View style={{ position: 'absolute',
18
36
  top: '42%',
19
- width: '100%', height: '100%'}}>
37
+ width: '100%', height: '100%', zIndex: 10}}>
20
38
  <ActivityIndicator size="large" color="#fff" />
21
39
  </View>
22
40
  )}
23
- <Video
41
+ <Video
24
42
  source={{uri: props.videoUrl}}
25
- ref={video}
26
- repeat
43
+ ref={video}
44
+ repeat={true}
27
45
  muted={isAppMuted ? true : props.isMuted}
28
46
  controls={false}
29
47
  resizeMode='cover'
48
+ playInBackground={false}
49
+ playWhenInactive={false}
50
+ ignoreSilentSwitch="ignore"
30
51
  style={{
31
52
  position: 'absolute',
32
53
  top: 0,
@@ -36,6 +57,7 @@ export default function AppVideoPlayer(props) {
36
57
  width: '100%', height: '100%'
37
58
  }}
38
59
  onLoad={handleLoad}
60
+ onError={handleError}
39
61
  />
40
62
  </>
41
63
  )