apple modal update (#198)

* apple hardware help modal tweaks

* fit video

Author: filipslezaklab

web/messages/en.json

@@ -21,7 +21,7 @@
   "cmp_enrol_final": "Final step",
   "cmp_openid_button": "Sign in with {provider}",
   "cmp_copy_field_tooltip": "Copied",
-  "footer_contact": "If you need assistance, please contact your defguard administrator at.",
+  "footer_contact": "If you need assistance, please contact your defguard administrator at",
   "session_end_title": "Session expired.",
   "session_end_subtitle": "Please start the process again.",
   "session_end_link": "Back to main page",

web/src/pages/ClientDownload/ClientDownloadPage.tsx

@@ -6,9 +6,8 @@ import {
   useNavigate,
   useRouterState,
 } from '@tanstack/react-router';
-import { useMemo, useState } from 'react';
+import { lazy, Suspense, useMemo, useState } from 'react';
 import { m } from '../../paraglide/messages';
-import { AppleHelpModal } from '../../shared/components/AppleHelpModal/AppleHelpModal';
 import { Page } from '../../shared/components/Page/Page';
 import { PageNavigation } from '../../shared/components/PageNavigation/PageNavigation';
 import { EnrollmentStep } from '../../shared/components/Step/Step';
@@ -32,6 +31,11 @@ import laptopIcon from './assets/laptop.png';
 import linuxIcon from './assets/linux.png';
 import desktopIcon from './assets/pc-tower.png';
 
+const AppleHelpModal = lazy(async () => ({
+  default: (await import('../../shared/components/AppleHelpModal/AppleHelpModal'))
+    .AppleHelpModal,
+}));
+
 export const ClientDownloadPage = () => {
   const { data: pageData } = useQuery(getClientArtifactsQueryOptions);
   const { enrollmentState } = useLoaderData({
@@ -207,12 +211,14 @@ export const ClientDownloadPage = () => {
           text={m.client_download_mobile_warning()}
         />
       )}
-      <AppleHelpModal
-        isOpen={appleHelpModalOpen}
-        onClose={() => {
-          setAppleHelpModalOpen(false);
-        }}
-      />
+      <Suspense fallback={null}>
+        <AppleHelpModal
+          isOpen={appleHelpModalOpen}
+          onClose={() => {
+            setAppleHelpModalOpen(false);
+          }}
+        />
+      </Suspense>
       <Modal
         title={m.client_download_modal_title()}
         size="small"

web/src/pages/enrollment/ConfigureClient/ConfigureClientPage.tsx

@@ -4,9 +4,8 @@ import { useQuery } from '@tanstack/react-query';
 import { useLoaderData } from '@tanstack/react-router';
 import { capitalCase } from 'change-case';
 import { QRCodeCanvas } from 'qrcode.react';
-import { useMemo, useState } from 'react';
+import { lazy, Suspense, useMemo, useState } from 'react';
 import { m } from '../../../paraglide/messages';
-import { AppleHelpModal } from '../../../shared/components/AppleHelpModal/AppleHelpModal';
 import { ContactFooter } from '../../../shared/components/ContactFooter/ContactFooter';
 import { ContainerWithIcon } from '../../../shared/components/ContainerWithIcon/ContainerWithIcon';
 import { Page } from '../../../shared/components/Page/Page';
@@ -25,6 +24,11 @@ import { ThemeSpacing } from '../../../shared/defguard-ui/types';
 import { getClientArtifactsQueryOptions } from '../../../shared/query/queryOptions';
 import { openClientLink } from '../../../shared/utils/openVirtualLink';
 
+const AppleHelpModal = lazy(async () => ({
+  default: (await import('../../../shared/components/AppleHelpModal/AppleHelpModal'))
+    .AppleHelpModal,
+}));
+
 export const ConfigureClientPage = () => {
   const pageData = useLoaderData({
     from: '/client-setup',
@@ -250,12 +254,14 @@ export const ConfigureClientPage = () => {
         <p className="finish">{m.client_setup_footer_extra()}</p>
         <ContactFooter email={pageData.enrollmentData.admin.email} />
       </footer>
-      <AppleHelpModal
-        isOpen={appleHelpModalOpen}
-        onClose={() => {
-          setAppleHelpModalOpen(false);
-        }}
-      />
+      <Suspense fallback={null}>
+        <AppleHelpModal
+          isOpen={appleHelpModalOpen}
+          onClose={() => {
+            setAppleHelpModalOpen(false);
+          }}
+        />
+      </Suspense>
     </Page>
   );
 };

web/src/shared/components/AppleHelpModal/AppleHelpModal.tsx

@@ -1,3 +1,4 @@
+import './style.scss';
 import { m } from '../../../paraglide/messages';
 import { Modal } from '../../defguard-ui/components/Modal/Modal';
 import { ModalControls } from '../../defguard-ui/components/ModalControls/ModalControls';
@@ -17,19 +18,13 @@ export const AppleHelpModal = ({ isOpen, onClose }: Props) => {
       size="small"
       isOpen={isOpen}
       onClose={onClose}
+      id="apple-hardware-help"
     >
       <p>{m.client_download_apple_help_content_1()}</p>
       <SizedBox height={ThemeSpacing.Xl} />
-      <video
-        controls
-        playsInline
-        preload="metadata"
-        src={apple_video_src}
-        style={{
-          width: '100%',
-          height: 'auto',
-        }}
-      />
+      <video autoPlay loop playsInline preload="auto">
+        <source src={`${apple_video_src}#t=0.1`} type="video/mp4" />
+      </video>
       <SizedBox height={ThemeSpacing.Xl} />
       <p>{m.client_download_apple_help_content_2()}</p>
       <ModalControls

web/src/shared/components/AppleHelpModal/style.scss

@@ -0,0 +1,13 @@
+#apple-hardware-help .modal-content {
+  video {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+  }
+
+  p {
+    font: var(--t-body-sm-400);
+    color: var(--fg-default);
+  }
+}