diff --git a/public/rtl-exp-ar/config.json b/public/rtl-exp-ar/config.json index 2243feb64b..72c1f3f83a 100644 --- a/public/rtl-exp-ar/config.json +++ b/public/rtl-exp-ar/config.json @@ -20,15 +20,32 @@ "autoDownloadStudy": false, "withSidebar": false, "showTitleBar": false, + "recordScreen": true, + "recordScreenFPS": 30, "showTitle": false, "nextButtonText": "التالي" }, + "importedLibraries": [ + "screen-recording" + ], "components": { "consent": { "type": "markdown", "path": "rtl-exp-ar/assets/consent.md", "response": [] }, + "screenRecordingPermissionAr": { + "baseComponent": "$screen-recording.co.screenRecordingPermission", + "nextButtonText": "التالي", + "response": [ + { + "hidden": true, + "type": "reactive", + "id": "screenRecordingPermission", + "prompt": "تم تفعيل تسجيل الشاشة" + } + ] + }, "demographics": { "type": "questionnaire", "instruction": "
قبل بدء الدراسة، يرجى الإجابة على أسئلة ديموغرافية التالية.
", @@ -1532,6 +1549,7 @@ "order": "fixed", "components": [ "consent", + "screenRecordingPermissionAr", "demographics", { "order": "random", diff --git a/public/rtl-exp-en/config.json b/public/rtl-exp-en/config.json index 0956231898..eeff76dbce 100644 --- a/public/rtl-exp-en/config.json +++ b/public/rtl-exp-en/config.json @@ -19,9 +19,16 @@ "withProgressBar": false, "autoDownloadStudy": false, "withSidebar": false, + "recordScreen": true, + "recordScreenFPS": 30, "showTitleBar": false, "showTitle": false }, + + "importedLibraries": [ + "screen-recording" + ], + "baseComponents": { "trial-numerical": { "type": "website", @@ -1528,6 +1535,7 @@ "order": "fixed", "components": [ "consent", + "$screen-recording.components.screenRecordingPermission", "demographics", { "order": "random", diff --git a/src/components/interface/ScreenRecordingRejection.tsx b/src/components/interface/ScreenRecordingRejection.tsx index 8ee390ffeb..d167028d6c 100644 --- a/src/components/interface/ScreenRecordingRejection.tsx +++ b/src/components/interface/ScreenRecordingRejection.tsx @@ -2,18 +2,35 @@ import { Modal, Text, Title, Stack, } from '@mantine/core'; import { IconAlertTriangle } from '@tabler/icons-react'; +import { useStudyId } from '../../routes/utils'; + +const AR_LABELS = { + title: 'تم إيقاف تسجيل الشاشة', + message: 'شكراً لمشاركتك في هذه الدراسة. تم إيقاف تسجيل الشاشة.لا يمكنك المتابعة.', + closeMessage: 'يمكنك إغلاق هذه الصفحة الآن.', +}; + +const EN_LABELS = { + title: 'Screen Recording Stopped', + message: 'Thank you for participating in this study. Screen recording was stopped and you will not be able to continue.', + closeMessage: 'You may now close this page.', +}; export function ScreenRecordingRejection() { + const studyId = useStudyId(); + const isArabic = studyId === 'rtl-exp-ar'; + const labels = isArabic ? AR_LABELS : EN_LABELS; + return ( - {}} fullScreen withCloseButton={false}> + {}} fullScreen withCloseButton={false} dir={isArabic ? 'rtl' : 'ltr'}> - Screen Recording Stopped + {labels.title} <> - Thank you for participating in this study. Screen recording was stopped and you will not be able to continue. + {labels.message}
- You may now close this page. + {labels.closeMessage} diff --git a/src/public/libraries/screen-recording/assets/ScreenRecording.tsx b/src/public/libraries/screen-recording/assets/ScreenRecording.tsx index 17b4be7178..fdbafbdf5e 100644 --- a/src/public/libraries/screen-recording/assets/ScreenRecording.tsx +++ b/src/public/libraries/screen-recording/assets/ScreenRecording.tsx @@ -5,8 +5,11 @@ import { useEffect, useState } from 'react'; import { useScreenRecordingContext } from '../../../../store/hooks/useScreenRecording'; import { StimulusParams } from '../../../../store/types'; import { RecordingAudioWaveform } from '../../../../components/interface/RecordingAudioWaveform'; +import { useStudyId } from '../../../../routes/utils'; function ScreenRecordingPermission({ setAnswer }: StimulusParams) { + const studyId = useStudyId(); + const isArabicStudy = studyId === 'rtl-exp-ar'; const { recordAudio, recordVideoRef, @@ -74,37 +77,44 @@ function ScreenRecordingPermission({ setAnswer }: StimulusParams) { window.requestAnimationFrame(detectSound); }, [audioMediaStream, screenCapturing, setAnswer]); + const titleText = isArabicStudy + ? (recordAudio ? 'إذن تسجيل الشاشة والصوت' : 'إذن تسجيل الشاشة') + : `Screen${recordAudio ? ' and Audio' : ''} Recording Permission`; + + const startRecordingText = isArabicStudy ? 'بدء التسجيل' : 'Start Recording'; + const stopRecordingText = isArabicStudy ? 'إيقاف التسجيل' : 'Stop Recording'; + const noteShareCorrectTabText = isArabicStudy + ? 'ملاحظة: تأكد من اختيار تبويب المتصفح أو النافذة الصحيحة. إذا اخترت الخيار الخطأ، أوقف المشاركة ثم اختر الصحيح.' + : 'Note: Please make sure you are recording the correct tab or window. Otherwise, stop and re-share the correct one.'; + const exitStudyText = isArabicStudy + ? (recordAudio + ? 'تتطلب هذه الدراسة تسجيل شاشتك وصوتك. إذا لم تكن مرتاحًا لذلك، يمكنك الخروج وإرجاع الدراسة.' + : 'تتطلب هذه الدراسة تسجيل شاشتك. إذا لم تكن مرتاحًا لذلك، يمكنك الخروج وإرجاع الدراسة.') + : (recordAudio + ? 'This study requires recording of your screen and audio. If you\'re not comfortable, you may exit and return the study.' + : 'This study requires recording of your screen. If you\'re not comfortable, you may exit and return the study.'); + return ( - + - Screen - {recordAudio && ' and Audio'} - {' '} - Recording Permission + {titleText} {recordAudio ? ( <> {/* Record both screen and audio */}

- This study requires recording of your - {' '} - screen - {' '} - and - {' '} - audio - . If you're not comfortable, you may exit and return the study. + {exitStudyText}

-

Follow the steps below to grant screen and audio recording permissions.

+

{isArabicStudy ? 'اتبع الخطوات التالية لمنح أذونات تسجيل الشاشة والصوت.' : 'Follow the steps below to grant screen and audio recording permissions.'}

  1. - Click the button below + {isArabicStudy ? 'انقر على الزر أدناه' : 'Click the button below'} {' '} - to enable screen and audio recording. + {isArabicStudy ? 'لتفعيل تسجيل الشاشة والصوت.' : 'to enable screen and audio recording.'}
  2. - Speak + {isArabicStudy ? 'تحدّث' : 'Speak'} {' '} - into your microphone to check if audio is working. + {isArabicStudy ? 'في الميكروفون للتأكد من أن الصوت يعمل.' : 'into your microphone to check if audio is working.'} {(recordAudio && screenCapturing) ? : }
Note:
  • - After we hear you say something, the - {' '} - Continue - {' '} - button will be enabled. + {isArabicStudy + ? 'بعد أن نكتشف صوتًا، سيتم تفعيل زر المتابعة.' + : ( + <> + After we hear you say something, the + {' '} + Continue + {' '} + button will be enabled. + + )}
    • -
  • Please do not close the window or screen recording until the entire study is completed.
    • +
  • {isArabicStudy ? 'يرجى عدم إغلاق النافذة أو إيقاف التسجيل حتى تنتهي الدراسة بالكامل.' : 'Please do not close the window or screen recording until the entire study is completed.'}
) : ( <> {/* Record screen only */}

- This study requires recording of your - {' '} - screen - . If you're not comfortable, you may exit and return the study. + {exitStudyText}

- Click the button below + {isArabicStudy ? 'انقر على الزر أدناه' : 'Click the button below'} {' '} - to enable screen recording. + {isArabicStudy ? 'لتفعيل تسجيل الشاشة.' : 'to enable screen recording.'}