diff --git a/App.js b/App.js index d6bc60b..43a57af 100644 --- a/App.js +++ b/App.js @@ -120,11 +120,15 @@ const App = () => { useEffect(() => { if (Platform.OS === 'web') { const s = document.createElement('script') + const isCompactViewport = window.innerWidth < 700 s.src = 'https://minuit.app/embed/report-a-problem.js' s.async = true s.setAttribute('data-project-id', 'playbackproduction') - s.setAttribute('data-position', 'right') - s.setAttribute('data-offset', '16') + s.setAttribute('data-position', isCompactViewport ? 'custom' : 'right') + s.setAttribute('data-offset', isCompactViewport ? '12' : '16') + if (isCompactViewport) { + s.setAttribute('data-top', '72') + } s.setAttribute('data-primary-color', '#FB68A8') s.setAttribute('data-bg-primary-color', '#0E0E12') s.setAttribute('data-bg-secondary-color', '#1D1825') diff --git a/src/assets/video/entry-jingle.mp4 b/src/assets/video/entry-jingle.mp4 index 91f5879..44acdc7 100644 Binary files a/src/assets/video/entry-jingle.mp4 and b/src/assets/video/entry-jingle.mp4 differ diff --git a/src/assets/video/welcome-en.mp4 b/src/assets/video/welcome-en.mp4 index 88fe885..8b80dae 100644 Binary files a/src/assets/video/welcome-en.mp4 and b/src/assets/video/welcome-en.mp4 differ diff --git a/src/assets/video/welcome-fr.mp4 b/src/assets/video/welcome-fr.mp4 index 39fa81f..86b646d 100644 Binary files a/src/assets/video/welcome-fr.mp4 and b/src/assets/video/welcome-fr.mp4 differ diff --git a/src/components/FullscreenIntroVideo.web.js b/src/components/FullscreenIntroVideo.web.js index 71c14ab..cfd6ca9 100644 --- a/src/components/FullscreenIntroVideo.web.js +++ b/src/components/FullscreenIntroVideo.web.js @@ -64,6 +64,7 @@ const FullscreenIntroVideo = ({ contentFit = 'cover', allowSkip = true, requireAudio = false, + offerSoundActivation = false, skipLabel = 'Passer la vidéo', playLabel = 'Lire la vidéo avec le son', }) => { @@ -153,6 +154,7 @@ const FullscreenIntroVideo = ({ } else if (error?.name === 'NotAllowedError' && !muted) { video.muted = true setMuted(true) + setAwaitingInteraction(offerSoundActivation) const mutedResult = video.play() mutedResult?.catch?.(() => {}) } @@ -171,7 +173,7 @@ const FullscreenIntroVideo = ({ const video = videoRef.current video?.pause() } - }, [evaluateShouldClose, muted, requireAudio, uri, visible]) + }, [evaluateShouldClose, muted, offerSoundActivation, requireAudio, uri, visible]) const handleManualPlay = useCallback(() => { const video = videoRef.current diff --git a/src/screens/LandingPage.js b/src/screens/LandingPage.js index 1f6c8e5..8320251 100644 --- a/src/screens/LandingPage.js +++ b/src/screens/LandingPage.js @@ -74,12 +74,12 @@ export default function LandingPage({ route }) { return selectedLanguage === 'en' ? videos.welcomeEn : videos.welcomeFr }, [phase, selectedLanguage]) - const activeVideoClose = - phase === FLOW_PHASE.JINGLE ? handleJingleClose : handleWelcomeVideoClose + const activeVideoClose = phase === FLOW_PHASE.JINGLE ? handleJingleClose : handleWelcomeVideoClose const isJingle = phase === FLOW_PHASE.JINGLE const skipLabel = selectedLanguage === 'en' ? 'Skip video' : 'Passer la vidéo' - const playLabel = - selectedLanguage === 'en' + const playLabel = isJingle + ? 'Activer le son / Enable sound' + : selectedLanguage === 'en' ? 'Play video with sound' : 'Lire la vidéo avec le son' @@ -124,6 +124,7 @@ export default function LandingPage({ route }) { contentFit="contain" allowSkip={!isJingle} requireAudio={!isJingle} + offerSoundActivation={isJingle} skipLabel={skipLabel} playLabel={playLabel} /> diff --git a/src/screens/Register.js b/src/screens/Register.js index 4da5319..0db6985 100644 --- a/src/screens/Register.js +++ b/src/screens/Register.js @@ -10,6 +10,7 @@ import { Pressable, StyleSheet, Text, + useWindowDimensions, View, } from 'react-native' import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view' @@ -32,6 +33,7 @@ import { getRouteAfterAuthentication } from '../utils/registrationFlow' const LANGUAGE_STORAGE_KEY = 'preferredLanguage' const Register = ({ navigation }) => { + const { width: viewportWidth, height: viewportHeight } = useWindowDimensions() const [email, setEmail] = useState('') const [firstName, setFirstName] = useState('') const [lastName, setLastName] = useState('') @@ -39,6 +41,10 @@ const Register = ({ navigation }) => { const [birthDate, setBirthDate] = useState(null) const [showDatePicker, setShowDatePicker] = useState(false) const [, setTooltip] = useGlobal('_tooltip') + const isCompactWeb = isWeb && viewportWidth < 700 + const webFormHeight = isWeb + ? Math.max(360, Math.min(720, viewportHeight - (isCompactWeb ? 72 : 96))) + : undefined const handleBack = useCallback(() => { if (navigation.canGoBack()) { @@ -132,8 +138,10 @@ const Register = ({ navigation }) => { } const renderFormContent = () => ( - - Renseigne tes informations + + + Renseigne tes informations + {preferredLanguage && !isWeb ? ( Langue choisie :{' '} @@ -238,20 +246,29 @@ const Register = ({ navigation }) => { return ( {isWeb ? ( - renderFormContent() + + {renderFormContent()} + ) : (