sillsdev · abigaillew4 · Mar 23, 2026 · Mar 23, 2026 · Mar 23, 2026 · Mar 23, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/renderer/src/components/LimitedMediaPlayer.tsx b/src/renderer/src/components/LimitedMediaPlayer.tsx
@@ -73,6 +73,8 @@ interface IProps {
   sx?: SxProps;
   noRestart?: boolean;
   noSkipBack?: boolean;
+  playButtonSize?: 'small' | 'medium' | 'large';
+  noContainer?: boolean;
 }
 
 export function LimitedMediaPlayer(props: IProps) {
@@ -88,6 +90,8 @@ export function LimitedMediaPlayer(props: IProps) {
     sx,
     noRestart,
     noSkipBack,
+    playButtonSize = 'small',
+    noContainer,
   } = props;
   const [value, setValue] = useState(0);
   const [ready, setReady] = useState(false);
@@ -256,8 +260,24 @@ export function LimitedMediaPlayer(props: IProps) {
       {!controls ? (
         <></>
       ) : (
-        <StyledChip
-          icon={
+        (() => {
+          const playPauseButtonSx = noContainer
+            ? {
+                alignSelf: 'center',
+                color: 'text.primary',
+                m: 0,
+                p: 0.5,
+              }
+            : {
+                alignSelf: 'center',
+                color: 'text.primary',
+                m: '0!important',
+                pb: '0!important',
+                pt: '7px!important',
+                pr: '0',
+              };
+
+          const mediaControls = (
             <>
               {!noRestart && (
                 <StyledTip title={t.resourceStart}>
@@ -284,30 +304,33 @@ export function LimitedMediaPlayer(props: IProps) {
               <StyledTip title={playing ? tm.pause : tm.play}>
                 <IconButton
                   data-testid="play-pause"
-                  sx={{
-                    alignSelf: 'center',
-                    color: 'text.primary',
-                    m: '0!important',
-                    pb: '0!important',
-                    pt: '7px!important',
-                    pr: '0!important',
-                  }}
+                  sx={playPauseButtonSx}
                   onClick={handlePlayPause}
                 >
                   {playing ? (
-                    <Pause fontSize="small" sx={{ color: 'text.secondary' }} />
+                    <Pause
+                      fontSize={playButtonSize}
+                      sx={{ color: 'text.secondary' }}
+                    />
                   ) : (
                     <PlayArrow
-                      fontSize="small"
+                      fontSize={playButtonSize}
                       sx={{ color: 'text.secondary' }}
                     />
                   )}
                 </IconButton>
               </StyledTip>
             </>
-          }
-          label={
-            <Stack direction="row" sx={{ pr: 1, pl: 0 }}>
+          );
+
+          const mediaLabel = (
+            <Stack
+              direction="row"
+              sx={{
+                pr: noContainer ? 0 : 1,
+                pl: 0,
+              }}
+            >
               <Stack direction="column" sx={{ width: '100%', pl: 0 }}>
                 <Box
                   sx={{
@@ -340,24 +363,42 @@ export function LimitedMediaPlayer(props: IProps) {
                 />
               </Stack>
             </Stack>
-          }
-          deleteIcon={
-            !noClose ? (
-              <StyledTip title={ts.close}>
-                <IconButton
-                  data-testid="close"
-                  sx={{ alignSelf: 'center' }}
-                  onClick={ended}
-                >
-                  <CloseIcon fontSize="small" />
-                </IconButton>
-              </StyledTip>
-            ) : (
-              <></>
-            )
-          }
-          sx={{ ...sx, width: '100%' }}
-        />
+          );
+
+          const closeControl = !noClose ? (
+            <StyledTip title={ts.close}>
+              <IconButton
+                data-testid="close"
+                sx={{ alignSelf: 'center' }}
+                onClick={ended}
+              >
+                <CloseIcon fontSize="small" />
+              </IconButton>
+            </StyledTip>
+          ) : (
+            <></>
+          );
+
+          return noContainer ? (
+            <Stack
+              direction="row"
+              sx={{ width: '100%', alignItems: 'flex-end', px: 0.5, gap: 1, ...sx }}
+            >
+              <Box sx={{ display: 'flex', alignItems: 'center', pb: 0.5 }}>
+                {mediaControls}
+              </Box>
+              <Box sx={{ flex: 1, minWidth: 0 }}>{mediaLabel}</Box>
+              {closeControl}
+            </Stack>
+          ) : (
+            <StyledChip
+              icon={mediaControls}
+              label={mediaLabel}
+              deleteIcon={closeControl}
+              sx={{ ...sx, width: '100%' }}
+            />
+          );
+        })()
       )}
       <HiddenPlayer
         onProgress={timeUpdate}

diff --git a/src/renderer/src/components/MediaUpload.tsx b/src/renderer/src/components/MediaUpload.tsx
@@ -31,6 +31,7 @@ export const SIZELIMIT = (uploadType: UploadType) => {
 interface IProps {
   visible: boolean;
   onVisible: (v: boolean) => void;
+  bp?: BigDialogBp;
   uploadType: UploadType;
   uploadMethod?: ((files: File[]) => void) | undefined;
   multiple?: boolean | undefined;
@@ -51,6 +52,7 @@ function MediaUpload(props: IProps) {
   const {
     visible,
     onVisible,
+    bp,
     uploadType,
     multiple,
     uploadMethod,
@@ -92,7 +94,7 @@ function MediaUpload(props: IProps) {
       isOpen={visible}
       onOpen={handleCancel}
       title={title[uploadType] ?? ''}
-      bp={BigDialogBp.sm}
+      bp={bp ?? BigDialogBp.sm}
     >
       <MediaUploadContent
         onVisible={onVisible}

diff --git a/src/renderer/src/components/PassageDataTable.tsx b/src/renderer/src/components/PassageDataTable.tsx
@@ -20,6 +20,8 @@ import {
   TextField,
   Typography,
   styled,
+  useMediaQuery,
+  useTheme,
 } from '@mui/material';
 import {
   DataGrid,
@@ -113,6 +115,8 @@ export const PassageDataTable = (props: IProps) => {
     shallowEqual
   );
   const ts: ISharedStrings = useSelector(sharedSelector, shallowEqual);
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const columns: GridColDef<IRRow>[] = !isNote
     ? [
         { field: 'language', headerName: t.language, width: 150 },
@@ -350,7 +354,16 @@ export const PassageDataTable = (props: IProps) => {
   return (
     <div id="passage-data-table">
       {isScripture && (
-        <Stack direction="row" spacing={1} sx={{ alignItems: 'center', my: 1 }}>
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{
+            alignItems: isSmallScreen ? 'stretch' : 'center',
+            my: 1,
+            flexWrap: 'wrap',
+            rowGap: 1,
+          }}
+        >
           {onScope && (
             <FormControlLabel
               control={
@@ -362,10 +375,10 @@ export const PassageDataTable = (props: IProps) => {
               label={t.passageResource}
             />
           )}
-          <GrowingSpacer />
+          {!isSmallScreen && <GrowingSpacer />}
           {refLevel !== RefLevel.All && (
             <>
-              <Box sx={{ width: '200px' }}>
+              <Box sx={{ width: isSmallScreen ? '100%' : '200px' }}>
                 <BookSelect
                   placeHolder={t.selectBook}
                   suggestions={bookSuggestions}
@@ -388,7 +401,7 @@ export const PassageDataTable = (props: IProps) => {
                       placeholder: passage?.attributes.reference ?? t.reference,
                     },
                   }}
-                  sx={{ width: '400px' }}
+                  sx={{ width: isSmallScreen ? '100%' : '400px' }}
                 />
               )}
             </>
@@ -398,7 +411,7 @@ export const PassageDataTable = (props: IProps) => {
               id="ref-level"
               value={refLevel ?? RefLevel.All}
               onChange={handleLevelChange as any}
-              sx={{ width: '325px' }}
+              sx={{ width: isSmallScreen ? '100%' : '325px' }}
               inputProps={{ autoFocus: true }}
             >
               {referenceLevel.map((rl) => (

diff --git a/src/renderer/src/components/PassageDetail/Internalization/AddResource.tsx b/src/renderer/src/components/PassageDetail/Internalization/AddResource.tsx
@@ -1,33 +1,26 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { IPassageDetailArtifactsStrings } from '../../../model';
-import { ListItemText } from '@mui/material';
+import { ListItemText, SxProps, Theme } from '@mui/material';
 import InfoIcon from '@mui/icons-material/Info';
 import { AltButton, LightTooltip } from '../../../control';
 import { resourceSelector } from '../../../selector';
 import { shallowEqual, useSelector } from 'react-redux';
 import { StyledMenu, StyledMenuItem } from '../../../control';
 import { useGlobal } from '../../../context/useGlobal';
-import usePassageDetailContext from '../../../context/usePassageDetailContext';
-import { usePassageType } from '../../../crud/usePassageType';
-import related from '../../../crud/related';
-import { PassageTypeEnum } from '../../../model/passageType';
-import { usePlanType } from '../../../crud';
 
 interface IProps {
   action?: (what: string) => void;
   stopPlayer?: () => void;
+  buttonDark?: boolean;
+  buttonElevated?: boolean; // setting for some shadowing
+  buttonSx?: SxProps<Theme>;
 }
 
 export const AddResource = (props: IProps) => {
-  const { action, stopPlayer } = props;
-  const { passage } = usePassageDetailContext();
-  const { getPassageTypeFromId } = usePassageType();
-  const [biblebrain, setBiblebrain] = useState(true);
+  const { action, stopPlayer, buttonDark, buttonElevated, buttonSx } = props;
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [offline] = useGlobal('offline'); //verified this is not used in a function 2/18/25
   const [offlineOnly] = useGlobal('offlineOnly'); //will be constant here
-  const [plan] = useGlobal('plan'); //will be constant here
-  const planType = usePlanType();
 
   const t: IPassageDetailArtifactsStrings = useSelector(
     resourceSelector,
@@ -46,22 +39,16 @@ export const AddResource = (props: IProps) => {
       action(what);
     }
   };
-  const isScripture = useMemo(
-    () => planType(plan)?.scripture,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [plan]
-  );
-  useEffect(() => {
-    if (isScripture) {
-      const pt = getPassageTypeFromId(related(passage, 'passagetype'));
-      setBiblebrain(pt === PassageTypeEnum.PASSAGE);
-    } else setBiblebrain(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [passage, isScripture]);
 
   return (
     <div>
-      <AltButton id="add-resource" onClick={handleClick}>
+      <AltButton
+        id="add-resource"
+        onClick={handleClick}
+        dark={buttonDark}
+        elevated={buttonElevated}
+        sx={buttonSx}
+      >
         {t.add}
       </AltButton>
       <StyledMenu
@@ -76,11 +63,6 @@ export const AddResource = (props: IProps) => {
         <StyledMenuItem id="uploadResource" onClick={handle('upload')}>
           <ListItemText>{t.upload}</ListItemText>
         </StyledMenuItem>
-        {biblebrain && (
-          <StyledMenuItem id="audioScripture" onClick={handle('scripture')}>
-            <ListItemText>{t.audioScripture}</ListItemText>
-          </StyledMenuItem>
-        )}
         <StyledMenuItem id="linkResource" onClick={handle('link')}>
           <ListItemText>{t.linkResource}</ListItemText>
         </StyledMenuItem>