diff --git a/example/src/App.tsx b/example/src/App.tsx index 1212800..1106ac2 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -17,7 +17,8 @@ export default function App() { viewed: false, preview: 'https://instagram.faep7-1.fna.fbcdn.net/v/t51.2885-19/s320x320/62500940_1363897577094116_5145198214462308352_n.jpg?_nc_ht=instagram.faep7-1.fna.fbcdn.net&_nc_ohc=BkIQomknhK0AX_1xEiM&oh=2269fb6e76910915456b7bb6ff24a282&oe=5FBFFDA9', - video: 'https://vjs.zencdn.net/v/oceans.mp4', + video: + 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', }, { id: 3, diff --git a/package-lock.json b/package-lock.json index d59fd91..239d96a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "react-native-live-stories", + "name": "@blackbox-vision/react-native-live-stories", "version": "0.3.0", "lockfileVersion": 1, "requires": true, @@ -2819,6 +2819,16 @@ } } }, + "@types/react-native-video": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/@types/react-native-video/-/react-native-video-5.0.3.tgz", + "integrity": "sha512-5GbhErfUvilPsZNaSCj6+fOM1UyBMN4QYi8Yb0E4tGzXdnGN4B9ILGe7tivys+EXUmgiWWcXlxQdpaDcKZzlqg==", + "dev": true, + "requires": { + "@types/react": "*", + "@types/react-native": "*" + } + }, "@types/responselike": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz", diff --git a/package.json b/package.json index 875c900..055e180 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@types/react": "^16.9.19", "@types/react-native": "0.62.13", "@types/react-native-snap-carousel": "^3.8.2", + "@types/react-native-video": "^5.0.3", "commitlint": "^8.3.5", "eslint": "^7.2.0", "eslint-config-prettier": "^6.11.0", diff --git a/src/components/StoryDetail/index.tsx b/src/components/StoryDetail/index.tsx index 49d2ca0..60625f7 100644 --- a/src/components/StoryDetail/index.tsx +++ b/src/components/StoryDetail/index.tsx @@ -112,7 +112,7 @@ export const StoryDetail: React.FC = ({ initialScrollIndex={initial} scrollInterpolator={instaEffect.scrollInterpolator} slideInterpolatedStyle={instaEffect.animatedStyles} - onBeforeSnapToItem={(idx) => onMoveToNextStory(idx)} + onSnapToItem={(idx) => onMoveToNextStory(idx)} renderItem={({ item: story, index: idx }) => ( = ({ onVideoEnd={() => { if (idx <= stories.length - 2) { setTimeout( - () => carouselRef.current.snapToItem(idx + 1, false, true), + () => carouselRef.current.snapToItem(idx + 1, true, true), 250 ); } else { diff --git a/src/components/StoryDetailItem/index.tsx b/src/components/StoryDetailItem/index.tsx index bd1b99a..30f71a3 100644 --- a/src/components/StoryDetailItem/index.tsx +++ b/src/components/StoryDetailItem/index.tsx @@ -2,6 +2,7 @@ import Video from 'react-native-video'; import React, { useEffect, useState } from 'react'; import { styles } from './styles'; +import { useRef } from 'react'; export type StoryDetailHeaderProps = { /** @@ -68,6 +69,8 @@ export const StoryDetailItem: React.FC = ({ StoryDetailItemHeader, StoryDetailItemFooter, }) => { + const videoRef: any = useRef(null); + const [paused, setPaused] = useState(true); const [muted, setMuted] = useState(false); @@ -90,6 +93,7 @@ export const StoryDetailItem: React.FC = ({ mute={() => setMuted(!muted)} />