style: update style

nini22P · Jul 5, 2024 · 158f5b2 · 158f5b2
1 parent f794111
commit 158f5b2
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 41 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -103,6 +103,7 @@ const App = () => {
                     width: '100%',
                     height: '100%',
                     overflowY: 'auto',
+                    backgroundColor: `${customTheme.palette.background.paper}99`
                   }}>
                   {needLogin ? <LogIn /> : <Outlet />}
                 </Paper>

diff --git a/src/pages/Player/Audio/Audio.tsx b/src/pages/Player/Audio/Audio.tsx
@@ -20,10 +20,10 @@ const Audio = ({ player }: { player: HTMLVideoElement | null }) => {
   )
 
   const topRef = useRef(0)
-  const [{ top, leftRightbottom, borderRadius }, api] = useSpring(() => ({
+  const [{ top, p, borderRadius }, api] = useSpring(() => ({
     from: {
       top: audioViewIsShow ? '0' : '100dvh',
-      leftRightbottom: audioViewIsShow ? '0' : '0.5rem',
+      p: audioViewIsShow ? '0' : '0.5rem',
       borderRadius: '0.5rem',
     },
     // config: {
@@ -34,14 +34,14 @@ const Audio = ({ player }: { player: HTMLVideoElement | null }) => {
   }))
 
   const show = () => api.start({
-    to: { top: '0', leftRightbottom: '0', borderRadius: '0' },
+    to: { top: '0', p: '0', borderRadius: '0' },
     // config: { clamp: false },
   })
 
   const hide = () => {
     api.start({
       from: { top: `${topRef.current}` },
-      to: { top: '100dvh', leftRightbottom: '0.5rem', borderRadius: '0.5rem' },
+      to: { top: '100dvh', p: '0.5rem', borderRadius: '0.5rem' },
       // config: { clamp: true },
     })
     topRef.current = 0
@@ -76,13 +76,12 @@ const Audio = ({ player }: { player: HTMLVideoElement | null }) => {
       {...bind()}
       style={{
         position: 'fixed',
-        width: '100%',
         maxWidth: '100%',
         maxHeight: '100dvh',
         top: top,
-        left: leftRightbottom,
-        right: leftRightbottom,
-        bottom: leftRightbottom,
+        left: p,
+        right: p,
+        bottom: p,
         touchAction: 'pan-x',
       }}
     >

diff --git a/src/pages/Player/VideoPlayerTopbar.tsx b/src/pages/Player/VideoPlayerTopbar.tsx
@@ -21,45 +21,54 @@ const VideoPlayerTopbar = () => {
   )
 
   return (
-    <Box
-      sx={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: 'var(--titlebar-height)',
-        transform: videoViewIsShow && controlIsShow ? 'none' : 'translateY(calc(-1 * var(--titlebar-height)))',
-        transition: 'all 0.2s ease-out',
-      }}
-    >
-      <div
-        style={{
-          width: 'fit-content',
+    <div style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100dvw',
+      height: 'var(--titlebar-height)',
+      display: 'flex',
+      justifyContent: 'center',
+      transform: videoViewIsShow && controlIsShow ? 'none' : 'translateY(calc(-1 * var(--titlebar-height)))',
+      transition: 'all 0.2s ease-out',
+    }}>
+      <Box
+        sx={{
+          width: '100%',
+          maxWidth: '1536px',
           height: '100%',
-          display: 'flex',
-          background: `${theme.palette.background.paper}99`,
-          backdropFilter: 'blur(16px)',
         }}
-        className='app-region-no-drag'
       >
-        <IconButton
-          aria-label="close"
-          onClick={() => {
-            updateVideoViewIsShow(false)
-            updateControlIsShow(true)
-          }}
-          sx={{
+        <div
+          style={{
+            width: 'fit-content',
             height: '100%',
-            borderRadius: '0.25rem',
-            '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
-              borderRadius: '0.25rem',
-            },
+            display: 'flex',
+            background: `${theme.palette.background.paper}99`,
+            backdropFilter: 'blur(16px)',
           }}
+          className='app-region-no-drag'
         >
-          <KeyboardArrowDownRoundedIcon />
-        </IconButton>
-      </div>
-    </Box>
+          <IconButton
+            aria-label="close"
+            onClick={() => {
+              updateVideoViewIsShow(false)
+              updateControlIsShow(true)
+            }}
+            sx={{
+              height: '100%',
+              borderRadius: '0.25rem',
+              '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
+                borderRadius: '0.25rem',
+              },
+              aspectRatio: '1 / 1',
+            }}
+          >
+            <KeyboardArrowDownRoundedIcon />
+          </IconButton>
+        </div>
+      </Box>
+    </div>
   )
 }