aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/components/moments/trimmer.tsx91
-rw-r--r--src/screens/profile/CaptionScreen.tsx6
2 files changed, 37 insertions, 60 deletions
diff --git a/src/components/moments/trimmer.tsx b/src/components/moments/trimmer.tsx
index ebf0d59e..f011d222 100644
--- a/src/components/moments/trimmer.tsx
+++ b/src/components/moments/trimmer.tsx
@@ -3,10 +3,11 @@ import Video from 'react-native-video';
import {Trimmer, ProcessingManager} from 'react-native-video-processing';
import {useRef} from 'react';
-export const TrimmerPlayer: React.FC<{source: string; styles: Object}> = ({
- source,
- styles,
-}) => {
+export const TrimmerPlayer: React.FC<{
+ source: string;
+ styles: Object;
+ hideTrimmer: boolean;
+}> = ({source, styles, hideTrimmer}) => {
const playerRef = useRef<Video>();
const [seekTime, setSeekTime] = useState<number>(0);
@@ -18,7 +19,6 @@ export const TrimmerPlayer: React.FC<{source: string; styles: Object}> = ({
const [trackerTime, setTrackerTime] = useState<number>(0);
useEffect(() => {
if (!paused && (trackerTime >= end || trackerTime < start)) {
- //console.log('trackerTime reset start', start);
setTrackerTime(start);
playerRef.current?.seek(start);
}
@@ -39,36 +39,12 @@ export const TrimmerPlayer: React.FC<{source: string; styles: Object}> = ({
ProcessingManager.trim(source, {
startTime: start / 2, //need to divide by two for bug in module
endTime: end,
- saveToCameraRoll: true, // default is false // iOS only
+ // saveToCameraRoll: true, // default is false // iOS only
saveWithCurrentDate: true, // default is false // iOS only
quality: 'highest',
- }) // like VideoPlayer compress options
- .then((data: any) => console.log(data));
+ }).then((data: any) => console.log('trim', data));
};
- /*
- const [tempSource, setSource] = useState<string>(source);
- const getCompressedVideo = () => {
- console.log(source);
- //ProcessingManager.getVideoInfo(source, (info) => console.log('info', info));
-
- ProcessingManager.compress(source, {
- width: 720,
- height: 1280,
- bitrateMultiplier: 3,
- saveToCameraRoll: true, // default is false, iOS only
- saveWithCurrentDate: true, // default is false, iOS only
- minimumBitrate: 300000,
- removeAudio: true, // default is false
- }).then((data: string) => {
- //console.log('compressed', data);
- setSource(data);
- });
- };
- useEffect(() => {
- getCompressedVideo();
- }, []); */
-
return (
<>
<Video
@@ -82,15 +58,12 @@ export const TrimmerPlayer: React.FC<{source: string; styles: Object}> = ({
paused={paused} // Pauses playback entirely.
//resizeMode="cover" // Fill the whole screen at aspect ratio.
repeat={true} // Repeat forever.
- //onLoadStart={this.loadStart} // Callback when video starts to load
onLoad={(payload) => {
console.log(payload, source);
setEnd(payload.duration);
- }} // Callback when video loads
+ }}
onProgress={(e) => {
- //console.log('progress', e.currentTime);
if (!paused) {
- // make sure within bounds
setTrackerTime(e.currentTime);
}
}} // Callback every ~250ms with currentTime
@@ -98,32 +71,32 @@ export const TrimmerPlayer: React.FC<{source: string; styles: Object}> = ({
//onError={this.videoError} // Callback when video cannot be loaded
style={styles}
onTouchEnd={() => {
- //setPaused((state) => !state);
- trim();
- }}
- />
- <Trimmer
- source={source}
- height={100}
- width={350}
- onTrackerMove={(e) => {
- //console.log('trackerMove', e);
- setPaused(true);
- setSeekTime(e.currentTime);
- }} // iOS only
- // added .25 bc tracker is inaccurate
- currentTime={trackerTime + 0.25} // use this prop to set tracker position iOS only
- themeColor={'white'} // iOS only
- showTrackerHandle={true}
- thumbWidth={10} // iOS only
- trackerColor={'white'} // iOS only
- onChange={(e) => {
- //console.log('endsChange', e);
- setPaused(true);
- setEnd(e.endTime);
- setStart(e.startTime);
+ setPaused((state) => !state);
}}
/>
+ {hideTrimmer ? (
+ <> </>
+ ) : (
+ <Trimmer
+ source={source}
+ height={100}
+ width={350}
+ onTrackerMove={(e) => {
+ setPaused(true);
+ setSeekTime(e.currentTime);
+ }} // iOS only
+ currentTime={trackerTime + 0.25} // added .25 bc tracker is inaccurate
+ themeColor={'white'} // iOS only
+ showTrackerHandle={true}
+ thumbWidth={10} // iOS only
+ trackerColor={'white'} // iOS only
+ onChange={(e) => {
+ setPaused(true);
+ setEnd(e.endTime);
+ setStart(e.startTime);
+ }}
+ />
+ )}
</>
);
};
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 9816f1a3..e77f40c2 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -222,7 +222,11 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
{...{title: moment ? moment.moment_category : title ?? ''}}
/>
{isMediaAVideo ? (
- <TrimmerPlayer source={mediaUri} styles={styles.media} />
+ <TrimmerPlayer
+ source={mediaUri}
+ styles={styles.media}
+ hideTrimmer={true}
+ />
) : (
<Image
style={styles.media}