Merge pull request #4 from ContentsViewer/feature/adjust-color

Feature/adjust color
ContentsViewer · Apr 13, 2024 · c2f54c8 · c2f54c8
2 parents 7542b56 + d39f7ba
commit c2f54c8
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 74 deletions.
diff --git a/public/sw.js.map b/public/sw.js.map
diff --git a/src/components/dynamic-background.tsx b/src/components/dynamic-background.tsx
@@ -2,30 +2,48 @@ import { useEffect, useState } from "react"
 import { useDynamicThemeStore } from "../stores/dynamic-theme-store"
 import { Box, styled } from "@mui/material"
 import { useThemeStore } from "../stores/theme-store"
-import { MaterialDynamicColors, hexFromArgb } from "@material/material-color-utilities"
+import {
+  MaterialDynamicColors,
+  hexFromArgb,
+  Blend,
+  Hct,
+} from "@material/material-color-utilities"
 
 export const DynamicBackground = () => {
   const [dynamicThemeState] = useDynamicThemeStore()
   const [themeStoreState] = useThemeStore()
   const [pitchColor, setPitchColor] = useState("transparent")
 
-  const pitch = dynamicThemeState.pitch
-
   const noteFromPitch = (frequency: number) => {
     const noteNum = 12 * (Math.log(frequency / 440) / Math.log(2))
     return Math.round(noteNum) + 69
   }
 
   useEffect(() => {
+    const pitch = dynamicThemeState.pitch
     if (pitch === -1) return
+
     const note = noteFromPitch(pitch)
-    setPitchColor(`hsl(${(note % 12) * 30}, 100%, 50%)`)
-  }, [pitch])
+    const noteColor = Hct.from((note % 12) * 30, 100, 50)
+    const primaryColor = MaterialDynamicColors.primaryContainer.getHct(
+      themeStoreState.scheme
+    )
+    const pitchColor = Blend.harmonize(noteColor.toInt(), primaryColor.toInt())
+
+    setPitchColor(hexFromArgb(pitchColor))
+  }, [dynamicThemeState.pitch, themeStoreState.scheme])
+
 
-  const primaryColor = hexFromArgb(
-            MaterialDynamicColors.primary.getArgb(
-              themeStoreState.scheme
-    ))
+  const primaryColor = (() => {
+    const sourceColor = Hct.fromInt(themeStoreState.sourceColor)
+    sourceColor.tone /= 2
+    sourceColor.chroma /= 2
+    return hexFromArgb(
+      // MaterialDynamicColors.primary.getArgb(themeStoreState.scheme)
+      sourceColor.toInt()
+    )
+  })()
+  // console.log(primaryColor)
 
   return (
     <div>
@@ -37,7 +55,7 @@ export const DynamicBackground = () => {
           bottom: 0,
           left: 0,
           background: `linear-gradient(transparent, ${primaryColor})`,
-          opacity: 0.1,
+          opacity: 0.2,
         }}
       />
       <Box
@@ -48,7 +66,6 @@ export const DynamicBackground = () => {
           position: "fixed",
           borderRadius: "50%",
           mixBlendMode: "screen",
-          // mixBlendMode: "saturate",
           filter: "blur(30vmin)",
           transition: "background-color 1s",
           top: 0,

diff --git a/src/components/mini-player.tsx b/src/components/mini-player.tsx
@@ -20,13 +20,16 @@ import {
   Theme,
   Typography,
   alpha,
+  rgbToHex,
+  useTheme,
 } from "@mui/material"
 import { usePlayerStore } from "../stores/player-store"
 import { useFileStore } from "../stores/file-store"
 import { useThemeStore } from "../stores/theme-store"
 import {
   MaterialDynamicColors,
   hexFromArgb,
+  Hct,
 } from "@material/material-color-utilities"
 import { useEffect, useMemo, useRef, useState } from "react"
 import * as mm from "music-metadata-browser"
@@ -43,6 +46,7 @@ export const MiniPlayer = (props: MiniPlayerProps) => {
   const [themeStoreState] = useThemeStore()
   const [coverUrl, setCoverUrl] = useState<string | undefined>(undefined)
   const [routerState, routerActions] = useRouter()
+  const theme = useTheme()
 
   const activeTrack = playerState.activeTrack
 
@@ -73,27 +77,32 @@ export const MiniPlayer = (props: MiniPlayerProps) => {
   const goBackEnabled = (() => {
     const parentId = activeTrack?.file.parentId
     if (!parentId) return false
-    if (`${routerState.pathname}${routerState.hash}` === `/files#${parentId}`) return false
+    if (`${routerState.pathname}${routerState.hash}` === `/files#${parentId}`)
+      return false
     return true
   })()
 
+  const primaryBackgroundColor = (() => {
+    const hct = Hct.fromInt(MaterialDynamicColors.primaryContainer.getHct(
+      themeStoreState.scheme
+    ).toInt())
+
+    hct.tone /= 2
+    hct.chroma /= 2
+    return hexFromArgb(hct.toInt())
+  })()
+
   return (
     <Card
       sx={{
         ...props.sx,
-        backdropFilter: "blur(10px)",
-        backgroundColor: alpha(
-          hexFromArgb(
-            MaterialDynamicColors.surfaceContainerHigh.getArgb(
-              themeStoreState.scheme
-            )
-          ),
-          0.5
-        ),
+        backdropFilter: "blur(16px)",
+        backgroundColor:  alpha(primaryBackgroundColor, 0.5),
         display: "flex",
         m: 1,
         alignItems: "center",
         flexDirection: "column",
+        borderRadius: 4,
       }}
     >
       <Box sx={{ position: "absolute", top: 0, left: 0, right: 0 }}>
@@ -108,7 +117,9 @@ export const MiniPlayer = (props: MiniPlayerProps) => {
             }}
             sx={{
               color: hexFromArgb(
-                MaterialDynamicColors.onSurfaceVariant.getArgb(themeStoreState.scheme)
+                MaterialDynamicColors.onSurfaceVariant.getArgb(
+                  themeStoreState.scheme
+                )
               ),
             }}
           >
@@ -149,14 +160,14 @@ export const MiniPlayer = (props: MiniPlayerProps) => {
           size="large"
           sx={{
             backgroundColor: hexFromArgb(
-              MaterialDynamicColors.tertiary.getArgb(themeStoreState.scheme)
+              MaterialDynamicColors.primary.getArgb(themeStoreState.scheme)
             ),
             color: hexFromArgb(
-              MaterialDynamicColors.onTertiary.getArgb(themeStoreState.scheme)
+              MaterialDynamicColors.onPrimary.getArgb(themeStoreState.scheme)
             ),
             "&:hover": {
               backgroundColor: hexFromArgb(
-                MaterialDynamicColors.tertiary.getArgb(themeStoreState.scheme)
+                MaterialDynamicColors.primary.getArgb(themeStoreState.scheme)
               ),
             },
           }}

diff --git a/src/stores/file-store.tsx b/src/stores/file-store.tsx
@@ -228,15 +228,14 @@ export const useFileStore = () => {
               if (!driveClient) throw new Error("Drive client not connected")
               let trackFile: AudioTrackFileItem | undefined
               let loadedBlob: Blob | undefined
-              console.log("!!!!")
 
               return Promise.resolve()
                 .then(() => getFileItemFromIdb(fileDb, id))
                 .then(item => {
                   if (!item) throw new Error("Item not found")
                   trackFile = item as AudioTrackFileItem
 
-                  console.log("START", id)
+                  // console.log("START", id)
 
                   return driveClient
                     .api(
@@ -270,7 +269,7 @@ export const useFileStore = () => {
                   enqueueSnackbar(`${error}`, { variant: "error" })
                 })
                 .then(() => {
-                  console.log("END", loadedBlob)
+                  // console.log("END", loadedBlob)
                   return {
                     file: trackFile as AudioTrackFileItem,
                     blob: loadedBlob as Blob,
@@ -285,7 +284,7 @@ export const useFileStore = () => {
             ({}: { file: AudioTrackFileItem; blob: Blob }) => void,
             (error: any) => void
           ]
-          console.log("PUSH", state.syncQueue)
+          // console.log("PUSH", state.syncQueue)
 
           dispatch({
             type: "setSyncingTrackFile",