fix(ui): remove viewer title header

kouprlabs · Nov 26, 2024 · 7fcd203 · 7fcd203
1 parent 6bd40c9
commit 7fcd203
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 30 deletions.
diff --git a/ui/src/components/viewer/viewer-image.tsx b/ui/src/components/viewer/viewer-image.tsx
@@ -52,8 +52,8 @@ const ViewerImage = ({ file }: ViewerImageProps) => {
           src={url}
           style={{
             objectFit: 'contain',
-            width: isLoading ? 0 : 'auto',
-            height: isLoading ? 0 : '90%',
+            maxWidth: isLoading ? 0 : '90%',
+            maxHeight: isLoading ? 0 : '90%',
             visibility: isLoading ? 'hidden' : 'visible',
             borderRadius: variables.borderRadius,
           }}

diff --git a/ui/src/components/viewer/viewer-mosaic.tsx b/ui/src/components/viewer/viewer-mosaic.tsx
@@ -193,8 +193,8 @@ const ViewerMosaic = ({ file }: ViewerImageProps) => {
           <Select<ZoomLevelOption, false>
             className={cx(
               'absolute',
-              'top-[15px]',
-              'left-[15px]',
+              'top-1.5',
+              'left-1.5',
               'z-10',
               'w-[200px]',
             )}

diff --git a/ui/src/components/viewer/viewer-video.tsx b/ui/src/components/viewer/viewer-video.tsx
@@ -38,8 +38,8 @@ const ViewerVideo = ({ file }: ViewerVideoProps) => {
       controls
       autoPlay
       style={{
-        maxWidth: '100%',
-        maxHeight: '100%',
+        maxWidth: '90%',
+        maxHeight: '90%',
         borderRadius: variables.borderRadius,
       }}
     >

diff --git a/ui/src/pages/viewer-page.tsx b/ui/src/pages/viewer-page.tsx
@@ -9,7 +9,7 @@
 // AGPL-3.0-only in the root of this repository.
 import { useCallback, useMemo } from 'react'
 import { useLocation, useParams } from 'react-router-dom'
-import { Button, Text } from '@chakra-ui/react'
+import { Button } from '@chakra-ui/react'
 import { Sidenav, IconDownload, Spinner } from '@koupr/ui'
 import cx from 'classnames'
 import { Helmet } from 'react-helmet-async'
@@ -127,7 +127,7 @@ const ViewerPage = () => {
       hasGLB,
     ],
   )
-  const isPresentational = hasVideo || (hasImage && !hasMosaicImage)
+  const isTheaterMode = hasVideo || (hasImage && !hasMosaicImage)
 
   return (
     <>
@@ -141,28 +141,15 @@ const ViewerPage = () => {
               <DrawerContent file={file} />
             </Sidenav>
             <div
-              className={cx('flex', 'flex-col', 'gap-0', 'grow', 'h-[100vh]')}
+              className={cx(
+                'relative',
+                'flex',
+                'flex-col',
+                'gap-0',
+                'grow',
+                'h-[100vh]',
+              )}
             >
-              <div
-                className={cx(
-                  'flex',
-                  'items-center',
-                  'justify-center',
-                  'w-full',
-                  'h-[80px]',
-                  'min-h-[80px]',
-                  { 'bg-black': isPresentational },
-                )}
-              >
-                <Text
-                  className={cx('font-medium', 'text-[16px]', 'px-3.5', {
-                    'text-white': isPresentational,
-                  })}
-                  noOfLines={1}
-                >
-                  {file.name}
-                </Text>
-              </div>
               <div
                 className={cx(
                   'flex',
@@ -172,7 +159,7 @@ const ViewerPage = () => {
                   'h-full',
                   'overflow-hidden',
                   'relative',
-                  { 'bg-black': isPresentational },
+                  { 'bg-black': isTheaterMode },
                 )}
               >
                 {renderViewer(file)}