Merge pull request #5 from ContentsViewer/feature/fix-gradient

Feature/fix gradient

app/files/page.tsx

@@ -147,7 +147,7 @@ export default function Page() {
     ) as AudioTrackFileItem[]
     audioFiles.forEach(async file => {
       try {
-        await fileStoreAction.getTrackContent(file.id)
+        await fileStoreAction.requestDownloadTrack(file.id)
       } catch (error) {
         console.error(error)
         enqueueSnackbar(`${error}`, { variant: "error" })

app/page.tsx

@@ -1,13 +1,95 @@
-'use client'
+"use client"
 
-import { FileList } from '@/src/components/file-list';
-import { useFileStore } from '@/src/stores/file-store';
+import { FileList } from "@/src/components/file-list"
+import { useFileStore } from "@/src/stores/file-store"
+import { Cloud, Login } from "@mui/icons-material"
+import {
+  Avatar,
+  Box,
+  Button,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemIcon,
+  Paper,
+  Typography,
+} from "@mui/material"
+import { useEffect } from "react"
 
+const LoginPage = () => {
+  const [fileStoreState] = useFileStore()
 
-export default function Page() {
-  const [fileStoreState] = useFileStore();
+  const pca = fileStoreState.pca
+  if (!pca) return null
+
+  const accounts = pca.getAllAccounts()
 
   return (
+    <Box>
+      <Paper
+        sx={{
+          maxWidth: 400,
+          width: "80%",
+          padding: 2,
+          margin: "auto",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+        }}
+      >
+        <Cloud sx={{ fontSize: 100 }} />
+        <Typography variant="h5">Sign in to OneDrive</Typography>
+        <List>
+          {accounts.map(account => (
+            <ListItemButton key={account.username} onClick={() => {}}>
+              <ListItemAvatar>
+                <Avatar />
+              </ListItemAvatar>
+              <Typography variant="body1" sx={{ flexGrow: 1 }}>
+                {account.username}
+              </Typography>
+              <Login sx={{ ml: 1 }} />
+            </ListItemButton>
+          ))}
+          <ListItemButton
+            onClick={() => {
+              pca.setActiveAccount(null)
+              const loginRequest = {
+                scopes: ["Files.Read", "Sites.Read.All"],
+              }
+              pca.loginRedirect(loginRequest)
+            }}
+          >
+            <ListItemAvatar>
+              <Avatar />
+            </ListItemAvatar>
+            <Typography variant="body1" sx={{ flexGrow: 1 }}>
+              Add account
+            </Typography>
+            <Login sx={{ ml: 1 }} />
+          </ListItemButton>
+        </List>
+      </Paper>
+    </Box>
+  )
+}
+
+export default function Page() {
+  const [fileStoreState] = useFileStore()
+
+  useEffect(() => {
+    if (fileStoreState.driveConfigureStatus !== "no-account") return
+    console.log("no account")
+  }, [fileStoreState])
+
+  const driveConfigureStatus = fileStoreState.driveConfigureStatus
+
+  return driveConfigureStatus === "not-configured" ? null : driveConfigureStatus ===
+    "no-account" ? (
+    <LoginPage />
+  ) : (
     <FileList files={fileStoreState.rootFiles} />
-  );
+  )
 }

src/components/dynamic-background.tsx

@@ -32,7 +32,6 @@ export const DynamicBackground = () => {
 
     setPitchColor(hexFromArgb(pitchColor))
   }, [dynamicThemeState.pitch, themeStoreState.scheme])
-
 
   const primaryColor = (() => {
     const sourceColor = Hct.fromInt(themeStoreState.sourceColor)
@@ -43,34 +42,41 @@ export const DynamicBackground = () => {
       sourceColor.toInt()
     )
   })()
+  const backgroundColor = (() => {
+    const color = MaterialDynamicColors.background.getArgb(
+      themeStoreState.scheme
+    )
+    return hexFromArgb(color)
+  })()
+
   // console.log(primaryColor)
 
   return (
     <div>
       <Box
+        style={{ backgroundColor: pitchColor }}
         sx={{
           position: "fixed",
+          mixBlendMode: "screen",
+          transition: "background-color 1s",
           top: 0,
           right: 0,
           bottom: 0,
           left: 0,
-          background: `linear-gradient(transparent, ${primaryColor})`,
-          opacity: 0.2,
+          opacity: 0.25,
+          // backgroundImage: `radical-gradient(transparent, ${backgroundColor})`,
+          background: `radial-gradient(circle at 76% 26%, transparent, ${backgroundColor})`,
         }}
       />
       <Box
-        style={{ backgroundColor: pitchColor }}
         sx={{
-          width: "30vw",
-          height: "30vh",
           position: "fixed",
-          borderRadius: "50%",
-          mixBlendMode: "screen",
-          filter: "blur(30vmin)",
-          transition: "background-color 1s",
           top: 0,
           right: 0,
-          opacity: 0.80,
+          bottom: 0,
+          left: 0,
+          background: `linear-gradient(transparent, ${primaryColor})`,
+          opacity: 0.2,
         }}
       />
     </div>