fix: improve onboarding audio and mobile layout

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')

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

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}
         />

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 = () => (
-    <View style={styles.formContent}>
-      <Text style={styles.title}>Renseigne tes informations</Text>
+    <View style={[styles.formContent, isCompactWeb ? styles.compactFormContent : null]}>
+      <Text style={[styles.title, isCompactWeb ? styles.compactTitle : null]}>
+        Renseigne tes informations
+      </Text>
       {preferredLanguage && !isWeb ? (
         <Text style={styles.languageInfo}>
           Langue choisie :{' '}
@@ -238,20 +246,29 @@ const Register = ({ navigation }) => {
 
   return (
     <Page
-      width={isWeb ? 600 : null}
+      width={isWeb ? '100%' : null}
+      maxWidth={isWeb ? 640 : 1200}
       backgroundImg={isWeb ? background.loginBgWeb : background.homeBG}
       headerType="NAVIGATION"
       title="Inscription"
       onBackPressed={handleBack}
+      containerStyle={isCompactWeb ? styles.compactWebPage : null}
     >
       <View style={styles.pageContent}>
         <ItemContainer
-          height={isWeb ? 720 : undefined}
+          height={webFormHeight}
           disableKeyboardHeight
           style={!isWeb ? styles.mobileItemContainer : styles.webItemContainer}
         >
           {isWeb ? (
-            renderFormContent()
+            <KeyboardAwareScrollView
+              style={styles.webScroll}
+              contentContainerStyle={styles.webScrollContent}
+              showsVerticalScrollIndicator={false}
+              keyboardShouldPersistTaps="handled"
+            >
+              {renderFormContent()}
+            </KeyboardAwareScrollView>
           ) : (
             <KeyboardAvoidingView
               behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -352,7 +369,19 @@ const styles = StyleSheet.create({
   },
   webItemContainer: {
     width: '100%',
-    maxWidth: 680,
+    maxWidth: 600,
+  },
+  compactWebPage: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+  },
+  webScroll: {
+    flex: 1,
+  },
+  webScrollContent: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    paddingVertical: 16,
   },
   mobileItemContainer: {
     width: '100%',
@@ -371,11 +400,19 @@ const styles = StyleSheet.create({
     paddingTop: 5,
     paddingHorizontal: 5,
   },
+  compactFormContent: {
+    gap: 20,
+    paddingHorizontal: 10,
+  },
   title: {
     fontSize: 22,
     color: Palette.white,
     fontFamily: FONT_FAMILY.InterSemiBold,
   },
+  compactTitle: {
+    fontSize: 20,
+    textAlign: 'center',
+  },
   languageInfo: {
     fontSize: 14,
     color: Palette.gray,