✨Added left and right buttons to the preview gallery

tdrive/frontend/src/app/views/client/viewer/drive-preview.tsx

@@ -2,9 +2,8 @@ import { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Transition } from '@headlessui/react';
 import { fadeTransition } from 'src/utils/transitions';
-import { DownloadIcon, XIcon } from '@heroicons/react/outline';
+import { DownloadIcon, XIcon, ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/outline';
 import { addShortcut, removeShortcut } from '@features/global/services/shortcut-service';
-import { getDevice } from '@features/global/utils/device';
 import RouterServices from '@features/router/services/router-service';
 import useRouterCompany from '@features/router/hooks/use-router-company';
 import {
@@ -33,6 +32,12 @@ export const DrivePreview: React.FC<DrivePreviewProps> = ({ items }) => {
   const [modalLoading, setModalLoading] = useState(true);
   const { loading: loadingData } = useDrivePreviewLoading();
   let animationTimeout: number = setTimeout(() => undefined);
+
+  const { download, extension } = useDrivePreviewDisplayData();
+  const { type = '' } = useDrivePreviewDisplayData();
+  const name = status.details?.item.name;
+
+
   const handleSwitchRight = () => {
     const currentItem = status.item;
     if (currentItem) {
@@ -77,15 +82,12 @@ export const DrivePreview: React.FC<DrivePreviewProps> = ({ items }) => {
     }
   }, [loading]);
 
-  const switchPreview = (item: DriveItem) => {
+  const switchPreview = async (item: DriveItem) => {
-    const device = getDevice();
-    if (device != 'ios' && device != 'android') {
     close();
     history.push(
       RouterServices.generateRouteFromState({ companyId: company, itemId: item.id, }),
     );
     open(item);
-    }
   };
   return (
     <Modal
@@ -121,20 +123,6 @@ export const DrivePreview: React.FC<DrivePreviewProps> = ({ items }) => {
         <div className="px-16 py-2 grow relative overflow-hidden">
           <DriveDisplay />
         </div>
-        <Footer />
-      </Transition>
-    </Modal>
-  );
-};
-
-const Footer = (): React.ReactElement => {
-  const { status } = useDrivePreview();
-  const { download, extension } = useDrivePreviewDisplayData();
-  const { type = '' } = useDrivePreviewDisplayData();
-  const name = status.details?.item.name;
-
-  return (
-    <>
         <div className="z-10 p-5 bg-black w-full flex text-white">
           <div className="grow overflow-hidden text-ellipsis">
             <Text.Base noColor className="w-full block text-white whitespace-nowrap">
@@ -154,6 +142,22 @@ const Footer = (): React.ReactElement => {
           </div>
           <div className="whitespace-nowrap flex items-center">
             <Controls type={type} />
+            <Button
+              iconSize="lg"
+              className="ml-4 !rounded-full"
+              theme="dark"
+              size="lg"
+              icon={ArrowLeftIcon}
+              onClick={ handleSwitchLeft }
+            />
+            <Button
+              iconSize="lg"
+              className="ml-4 !rounded-full"
+              theme="dark"
+              size="lg"
+              icon={ArrowRightIcon}
+              onClick={ handleSwitchRight }
+            />
             <Button
               iconSize="lg"
               className="ml-4 !rounded-full"
@@ -166,6 +170,7 @@ const Footer = (): React.ReactElement => {
             />
           </div>
         </div>
-    </>
+      </Transition>
+    </Modal>
   );
 };