Make record step mobile friendly

localization/TranscriberAdmin-en-1.2.xliff

@@ -7873,6 +7873,13 @@
                <context context-type="sourcefile">RecordButton.tsx</context>
             </context-group>
          </trans-unit>
+         <trans-unit id="recordButton.stop">
+            <source>STOP</source>
+            <target/>
+            <context-group>
+               <context context-type="sourcefile">RecordButton.tsx</context>
+            </context-group>
+         </trans-unit>
          <trans-unit id="recordStepSettings.custom">
             <source>Custom</source>
             <target/>
@@ -8700,6 +8707,34 @@
                <context context-type="sourcefile">PlanSheet.tsx</context>
             </context-group>
          </trans-unit>
+        <trans-unit id="shared.upload">
+          <source>Upload</source>
+          <target/>
+          <context-group>
+              <context context-type="sourcefile">PlanSheet.tsx</context>
+          </context-group>
+        </trans-unit>
+        <trans-unit id="shared.resetRecording">
+          <source>Reset Recording</source>
+          <target/>
+          <context-group>
+              <context context-type="sourcefile">PlanSheet.tsx</context>
+          </context-group>
+        </trans-unit>
+        <trans-unit id="shared.discardRecording">
+          <source>Would you like to discard this recording or save it?</source>
+          <target/>
+          <context-group>
+              <context context-type="sourcefile">PlanSheet.tsx</context>
+          </context-group>
+        </trans-unit>
+        <trans-unit id="shared.useThisVersion">
+          <source>Use This Version</source>
+          <target/>
+          <context-group>
+              <context context-type="sourcefile">PlanSheet.tsx</context>
+          </context-group>
+        </trans-unit>
       	<trans-unit id="shared.uploadRights">
       		<source>Upload Rights File</source>
       		<target/>

localization/TranscriberAdmin-en.xlf

@@ -6748,6 +6748,12 @@
             <target/>
          </segment>
       </unit>
+      <unit id="recordButton.stop">
+         <segment>
+            <source>STOP</source>
+            <target/>
+         </segment>
+      </unit>
       <unit id="recordStepSettings.custom">
          <segment>
             <source>Custom</source>
@@ -7456,6 +7462,30 @@
             <target/>
          </segment>
       </unit>
+      <unit id="shared.upload">
+         <segment>
+            <source>Upload</source>
+            <target/>
+         </segment>
+      </unit>
+      <unit id="shared.resetRecording">
+         <segment>
+            <source>Reset Recording</source>
+            <target/>
+         </segment>
+      </unit>
+      <unit id="shared.discardRecording">
+         <segment>
+            <source>Would you like to discard this recording or save it?</source>
+            <target/>
+         </segment>
+      </unit>
+      <unit id="shared.useThisVersion">
+         <segment>
+            <source>Use This Version</source>
+            <target/>
+         </segment>
+      </unit>
       <unit id="shared.uploadRights">
          <segment>
             <source>Upload Rights File</source>

localization/strings-3.csv

@@ -376,7 +376,7 @@ main.apiError	API Error:	Erreur API:	Erro de API:	Error de la API:	Kesalahan API
 integration.usernameError	Username error:	Erreur de nom d'utilisateur:	Erro de nome de usuário:	Error de nombre de usuario:	Kesalahan nama pengguna:	Ошибка имени пользователя:	用户名错误：
 integration.syncError	Sync error:	Erreur de synchronisation:	Erro de sincronização:	Error de sincronización:	Kesalahan kirim/terima:	Ошибка синхронизации:	同步出错
 transcriptionTab.error	Export Error	Erreur d'exportation	Erro de Exportação	Error en la exportación	Kesalahan Saat Mengekspor	Ошибка экспорта	导出错误
-faithbridge.error	Error: 	Erreur : 	Erro: 	Error: 	Error: 	Ошибка:	错误： 
+faithbridge.error	Error: 	Erreur : 	Erro: 	Error: 	Error: 	Ошибка:	错误：
 grid.equal	Equals	Équivaut à	Igual	Es igual a	Sama dengan	Равно	等于
 vProject.scenes	Scene/Scenes	Scène/Scènes	Cena/Cenas	Escena/Escenas	Adegan	Сцена/Сцены	场景
 control.scripture	Scripture	Écritures	Referência Bíblica	Escritura	Alkitab	Писание	经文

localization/strings-3u.csv

@@ -260,7 +260,7 @@ template.end	Ending verse number	Numéro du verset de fin	Número do versículo
 grid.endsWith	Ends with	Se termine par	Termina com	Termina con	Berakhir dengan	Заканчивается на	结束于
 mediaUpload.markdownTitle	Enter Text	Saisir le texte	Inserir texto	Introducir Texto	Ketik Teks	Введите текст	输入文本
 grid.equal	Equals	Équivaut à	Igual	Es igual a	Sama dengan	Равно	等于
-faithbridge.error	Error: 	Erreur : 	Erro: 	Error: 	Error: 	Ошибка:	错误： 
+faithbridge.error	Error: 	Erreur : 	Erro: 	Error: 	Error: 	Ошибка:	错误：
 keyTerms.exclude	Exclude	Exclure	Excluir	Excluir	Kecualikan	Исключить	排除
 voice.excludeName	Exclude my name.	Exclure mon nom.	Exclua meu nome.	Excluir mi nombre.	Kecualikan nama saya.	Исключите мое имя.	排除我的姓名。
 voice.excludedLanguages	Excluded languages	Langues exclues	Idiomas excluídos	Idiomas excluidos	Bahasa yang dikecualikan	Исключенные языки	排除的语言

package.json

@@ -33,7 +33,7 @@
     "@electron/notarize": "^2.3.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@fingerprintjs/fingerprintjs": "^5.0.1",
+    "@fingerprintjs/fingerprintjs": "^5.1.0",
     "@fontsource/roboto": "^5.2.6",
     "@fortawesome/fontawesome-svg-core": "^7.0.1",
     "@fortawesome/free-regular-svg-icons": "^7.0.1",

src/renderer/src/business/voice/VoiceStatement.tsx

@@ -12,6 +12,7 @@ import { ISharedStrings, IVoiceStrings, Organization } from '../../model';
 import BigDialog from '../../hoc/BigDialog';
 import { shallowEqual, useSelector } from 'react-redux';
 import { sharedSelector, voiceSelector } from '../../selector';
+import { useMobile } from '../../utils/index';
 
 interface IProps {
   voice?: string;
@@ -42,6 +43,8 @@ export const VoiceStatement = ({
     navigator.clipboard.writeText(permStatement);
   };
 
+  const { isMobile: isMobileView } = useMobile();
+
   function handlePersonalize() {
     const newState = { ...state, fullName: voice };
     setState && setState(newState);
@@ -55,18 +58,22 @@ export const VoiceStatement = ({
 
   return (
     <Box>
-      <Stack direction="column" spacing={1} sx={{ mx: 1 }}>
-        <Typography sx={{ lineHeight: '1.2rem', pt: 1 }}>
+      <Stack direction="column" spacing={1} sx={{ mx: isMobileView ? 0 : 1 }}>
+        <Typography sx={{ lineHeight: '1.2rem', pt: 1, ...(isMobileView ? { maxHeight: '8rem', overflowY: 'auto', border: '1px solid gray', borderRadius: '4px', p: 1 } : {}) }}>
           {permStatement}
         </Typography>
         <ActionRow>
-          <IconButton onClick={handleCopy} title={ts.clipboardCopy}>
-            <ContentCopyIcon color="primary" fontSize="small" />
-          </IconButton>
-          <GrowingSpacer />
-          <AltButton onClick={handlePersonalize} disabled={saving}>
-            {t.personalize}
-          </AltButton>
+          {!isMobileView && (
+            <>
+              <IconButton onClick={handleCopy} title={ts.clipboardCopy}>
+                <ContentCopyIcon color="primary" fontSize="small" />
+              </IconButton>
+              <GrowingSpacer />
+              <AltButton onClick={handlePersonalize} disabled={saving}>
+                {t.personalize}
+              </AltButton>
+            </>
+          )}
         </ActionRow>
       </Stack>
       <BigDialog

src/renderer/src/components/AudioTab/AudioTable.tsx

@@ -29,6 +29,7 @@ import {
   useWaitForRemoteQueue,
   strNumCompare,
   doSort,
+  useMobile,
 } from '../../utils';
 import PlayCell from './PlayCell';
 import DetachCell from './DetachCell';
@@ -43,6 +44,7 @@ import {
   GridSortModel,
   type GridColDef,
 } from '@mui/x-data-grid';
+import { AudioVersionCard } from '../../components/PassageDetail/mobile/record/AudioVersionCard';
 
 interface IProps {
   data: IRow[];
@@ -54,6 +56,8 @@ interface IProps {
   hasPublishing: boolean;
   sectionArr: SectionArray;
   setPlayItem: (item: string) => void;
+  selectedId?: string;
+  setSelectedId?: (item: string) => void;
   onAttach?: (checks: number[], attach: boolean) => void;
 }
 export const AudioTable = (props: IProps) => {
@@ -470,6 +474,37 @@ export const AudioTable = (props: IProps) => {
 
   const columnVisibilityModel: GridColumnVisibilityModel = { planName: false };
 
+  const { isMobile: isMobileView } = useMobile();
+  const [localSelectedId, setLocalSelectedId] = useState<string>(
+    sortedData[0]?.id || ''
+  );
+  const selectedId = props.selectedId ?? localSelectedId;
+  const setSelectedId = props.setSelectedId ?? setLocalSelectedId;
+
+  if (isMobileView) {
+    return (
+      <Box sx={{height: '20rem', overflowY: 'scroll' }}>
+        {sortedData.map((row) => (
+          <AudioVersionCard
+            key={row.id}
+            {...row}
+            isSelected={row.id === selectedId}
+            setIsSelected={setSelectedId}
+            lang={lang}
+            handleSelect={handleSelect}
+            playItem={playItem}
+            mediaPlaying={mediaPlaying}
+          />
+        ))}
+        <MediaPlayer
+          srcMediaId={playItem}
+          requestPlay={mediaPlaying}
+          onEnded={playEnded}
+        />
+      </Box>
+    );
+  }
+
   return (
     <Box ref={boxRef} sx={{ width: '100%' }}>
       <>

src/renderer/src/components/AudioTab/VersionDlg.tsx

@@ -10,6 +10,7 @@ import {
   IState,
   ProjectD,
   SectionArray,
+  ISharedStrings,
 } from '../../model';
 import {
   findRecord,
@@ -25,24 +26,30 @@ import { ActionRow, GrowingDiv } from '../StepEditor';
 import SelectLatest from './SelectLatest';
 import { UpdateRecord } from '../../model/baseModel';
 import { useOrbitData } from '../../hoc/useOrbitData';
-import { useSelector } from 'react-redux';
+import { shallowEqual, useSelector } from 'react-redux';
 
 import {
   projDefSectionMap,
   useProjectDefaults,
 } from '../../crud/useProjectDefaults';
+import { useMobile } from '../../utils/index';
+import { Typography, Box } from '@mui/material';
+import { sharedSelector } from '../../selector/selectors';
+import { PriButton } from '../../control';
 
 interface IProps {
   passId: string;
   canSetDestination: boolean;
   hasPublishing: boolean;
+  close?: () => void;
 }
 export const VersionDlg = (props: IProps) => {
-  const { passId, canSetDestination, hasPublishing } = props;
+  const { passId, canSetDestination, hasPublishing, close } = props;
   const mediaFiles = useOrbitData<MediaFileD[]>('mediafile');
   const sections = useOrbitData<Section[]>('section');
   const passages = useOrbitData<Passage[]>('passage');
 
+  const ts: ISharedStrings = useSelector(sharedSelector, shallowEqual);
   const [plan] = useGlobal('plan'); //will be constant here
   const [project] = useGlobal('project'); //will be constant here
   const [memory] = useGlobal('memory');
@@ -52,6 +59,7 @@ export const VersionDlg = (props: IProps) => {
   const [user] = useGlobal('user');
   const [planRec] = useState(getPlan(plan) || ({} as Plan));
   const [playItem, setPlayItem] = useState('');
+  const [selectedId, setSelectedId] = useState('');
   const [data, setData] = useState<IRow[]>([]);
   const [sectionArr, setSectionArr] = useState<SectionArray>([]);
   const [sectionMap, setSectionMap] = useState(new Map<number, string>());
@@ -117,22 +125,46 @@ export const VersionDlg = (props: IProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mediaFiles, sections, passages, planRec, passId, playItem, refresh]);
 
+  const { isMobile: isMobileView } = useMobile();
+
   return (
     <>
       <AudioTable
         data={data}
         setRefresh={handleRefresh}
         playItem={playItem}
         setPlayItem={setPlayItem}
+        selectedId={selectedId}
+        setSelectedId={setSelectedId}
         readonly={readonly}
         sectionArr={sectionArr}
         shared={shared}
         canSetDestination={canSetDestination}
         hasPublishing={hasPublishing}
       />
       <ActionRow>
-        <GrowingDiv />
-        <SelectLatest versions={versions} onChange={handleLatest} />
+        {isMobileView ? (
+          <Box sx={{ pt: 2 }}>
+            <PriButton
+              onClick={() => {
+                if (selectedId) {
+                  handleLatest(parseInt(data.find((d) => d.id === selectedId)?.version || '0'));
+                  close && close();
+                }
+              }}
+              disabled={!selectedId}
+            >
+              <Typography sx={{ color: 'white', p: 0.5 }}>
+                {ts.useThisVersion}
+              </Typography>
+            </PriButton>
+          </Box>
+        ) : (
+          <>
+            <GrowingDiv />
+            <SelectLatest versions={versions} onChange={handleLatest} />
+          </>
+        )}
       </ActionRow>
     </>
   );