78 lines
2.4 KiB
JavaScript
78 lines
2.4 KiB
JavaScript
import React, { useCallback, useState } from "react";
|
|
import { Image, StyleSheet, View } from "react-native";
|
|
import { ai, background } from "../../assets";
|
|
import BorderGradientButton from "../../components/BorderGradientButton";
|
|
import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
|
|
import GradientButton from "../../components/GradientButton";
|
|
import MusicLandHeader from "../../components/MusicLandHeader";
|
|
import Page from "../../layouts/Page";
|
|
import { isWeb } from "../../hooks/useLayoutType";
|
|
import { Routes } from "../../navigation";
|
|
import { navigate } from "../../navigation/NavigationService";
|
|
import { useUser } from "../../providers/UserDataProvider";
|
|
import { gutters } from "../../styles";
|
|
|
|
const Playback = ({ route, navigation }) => {
|
|
const { project } = route.params || {};
|
|
const { videos } = useUser();
|
|
const benhaiUrl = isWeb ? videos?.benhaiWeb || null : videos?.benhai;
|
|
const [showIntro, setShowIntro] = useState(benhaiUrl);
|
|
|
|
const handleCloseIntro = () => {
|
|
if (showIntro === benhaiUrl) {
|
|
setShowIntro(isWeb ? videos?.theoWeb : videos?.theo);
|
|
} else {
|
|
setShowIntro(null);
|
|
}
|
|
};
|
|
|
|
const onPressRecord = useCallback(() => {
|
|
navigate(Routes.RecordPlayback, { project });
|
|
}, [project]);
|
|
|
|
return (
|
|
<Page headerType="NONE" backgroundImg={isWeb ? background.playbackWeb : background.playbackMobile}>
|
|
<Image source={ai.theo} style={styles.img} resizeMode="contain" />
|
|
<MusicLandHeader
|
|
onPressBack={() => navigation.navigate(Routes.Home)}
|
|
progress={25}
|
|
/>
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
paddingBottom: gutters * 2,
|
|
justifyContent: "flex-end",
|
|
}}
|
|
>
|
|
<View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
|
|
<GradientButton
|
|
title="Enregistrer mon Playback"
|
|
onPress={onPressRecord}
|
|
/>
|
|
<BorderGradientButton
|
|
title="Guide du Playbacker"
|
|
onPress={() => navigate(Routes.PlaybackGuide)}
|
|
/>
|
|
{/* <BorderGradientButton title="Importer une vidéo" /> */}
|
|
</View>
|
|
</View>
|
|
<FullscreenIntroVideo
|
|
url={showIntro}
|
|
visible={showIntro}
|
|
onClose={handleCloseIntro}
|
|
/>
|
|
</Page>
|
|
);
|
|
};
|
|
|
|
export default Playback;
|
|
|
|
const styles = StyleSheet.create({
|
|
img: {
|
|
width: "100%",
|
|
height: "70%",
|
|
position: "absolute",
|
|
bottom: -40,
|
|
},
|
|
});
|