update

Author: bichikim

apps/bplan-client/README.md

@@ -36,6 +36,9 @@ https://github.com/Tonejs/Tone.js/issues/1034
 ### youtube to mp3
 https://ezmp3.cc/v4
 
+### midi  format
+https://www.audiolabs-erlangen.de/resources/MIR/FMP/C1/C1S2_MIDI.html
+
 ### load and play mid
 https://github.com/cifkao/html-midi-player
 https://github.com/surikov/webaudiofont

apps/bplan-client/src/components/instruments/HKey.tsx

@@ -1,4 +1,4 @@
-import {createSignal, JSX, splitProps, useContext} from 'solid-js'
+import {createSignal, JSX, Show, splitProps, useContext} from 'solid-js'
 import {HRealButton, HRealButtonProps} from 'src/components/real-button/HRealButton'
 import {KeyContext} from './key-context'
 import {PianoContext} from './piano-context'
@@ -9,13 +9,20 @@ export interface HKeyProps extends HRealButtonProps {
   effectClass?: string
   key?: string | number
   name?: string
+  showKeyName?: boolean
 }
 
 // instrument key
 export const HKey = (props: HKeyProps) => {
   const {onDown: onKeyDown, onUp: onKeyUp, down} = useContext(PianoContext)
-  const [innerProps, restProps] = splitProps(props, ['key', 'name'])
-  const {key, disabled} = useContext(KeyContext)
+  const [innerProps, restProps] = splitProps(props, [
+    'key',
+    'name',
+    'effectClass',
+    'children',
+    'showKeyName',
+  ])
+  const {key, disabled, name} = useContext(KeyContext)
 
   function handleDown() {
     const _key = key ?? innerProps.key
@@ -53,12 +60,14 @@ export const HKey = (props: HKeyProps) => {
     >
       <SKeyEffect
         class={cx(
-          'absolute top--20px left-0 w-full h-full pointer-events-none',
-          props.effectClass,
+          'absolute top--4 left-0 w-full h-full pointer-events-none',
+          innerProps.effectClass,
         )}
-      >
-        {props.children}
-      </SKeyEffect>
+      />
+      <Show when={innerProps.showKeyName}>
+        <span class="mb-2">{name}</span>
+      </Show>
+      {innerProps.children}
     </HRealButton>
   )
 }

apps/bplan-client/src/components/instruments/HPianoFlatSet.tsx

@@ -20,8 +20,13 @@ const flatSet = flatten(
       {key: 10, name: 'F'},
       {key: 12, name: 'G'},
     ])
-    .map((item, index) => {
-      return item.map(({key, name}) => ({key: keyCount * index + key - keyOffset, name}))
+    .map((item, setIndex) => {
+      return item.map(({key, name}) => {
+        const _key = keyCount * setIndex + key - keyOffset
+        const setName = `${name} ${setIndex - 1}`
+
+        return {key: _key, name: setName}
+      })
     }),
 )
 const lastDeleteCount = 4

apps/bplan-client/src/components/instruments/SPiano.tsx

@@ -11,10 +11,18 @@ import {
 } from 'src/components/instruments/SPianoParts'
 import {splitProps} from 'solid-js'
 
-export type SPianoProps = SPianoBodyProps & SPianoRootProps
+export type SPianoProps = SPianoBodyProps &
+  SPianoRootProps & {
+    showKeyName?: boolean
+  }
 
 export const SPiano = (props: SPianoProps) => {
-  const [innerProps, restProps] = splitProps(props, ['onDown', 'onUp', 'down'])
+  const [innerProps, restProps] = splitProps(props, [
+    'onDown',
+    'onUp',
+    'down',
+    'showKeyName',
+  ])
 
   return (
     <SPianoRoot onDown={innerProps.onDown} onUp={innerProps.onUp} down={innerProps.down}>
@@ -23,15 +31,20 @@ export const SPiano = (props: SPianoProps) => {
         class={`relative h-486px relative visible min-w-max ${props.class ?? ''}`}
       >
         <SPianoFlatSet class="inline-flex relative w-max h-[calc(100%-10px)]">
-          <SPianoFlatKey class="w-80px h-full bg-#f7f7f7" effectClass="from-indigo-500" />
+          <SPianoFlatKey
+            class="w-80px h-full bg-#f7f7f7 flex items-end justify-center c-gray-400 text-4"
+            effectClass="from-purple-500"
+            showKeyName={innerProps.showKeyName}
+          />
         </SPianoFlatSet>
         <SPianoSharpSet
           emptyChildren={<SPianoSharpEmpty class="w-50px mr-30px" />}
           class="flex absolute w-auto h-259px left-55px top-0 left-0"
         >
           <SPianoSharpKey
-            class="w-50px h-full bg-black mr-30px flex-shrink-0"
+            class="w-50px h-full bg-black mr-30px flex flex-shrink-0 justify-center items-end c-gray-300 text-4"
             effectClass="from-indigo-300"
+            showKeyName={innerProps.showKeyName}
           />
         </SPianoSharpSet>
       </SPianoBody>

apps/bplan-client/src/components/midi-player/SMidiFileInput.tsx

@@ -106,7 +106,7 @@ export const SMidiFileInput = (props: HMidiFileInputProps) => {
 
   return (
     <div class={cx(rootStyle, innerProps.class)}>
-      <label class="inline-flex" for={id}>
+      <label class="inline-flex text-inherit" for={id}>
         <span class="text-nowrap md:text-6 text-4 pt-1">Click or Drop </span>
         <span class="block i-tabler:file-plus text-6 px-1 pt-2" />
         <span class="text-nowrap md:inline hidden md:text-6 text-4 pt-1">Your files</span>

apps/bplan-client/src/components/midi-player/SSetting.tsx

@@ -8,6 +8,7 @@ import {HUNDRED} from '@winter-love/utils'
 export interface SettingData {
   keepPlayList?: boolean
   pianoSize?: number
+  showKeyName?: boolean
 }
 
 export interface SSettingProps extends JSX.HTMLAttributes<HTMLDivElement> {
@@ -54,15 +55,25 @@ export const SSetting = (props: SSettingProps) => {
     handleSettingData({...innerProps.settingData, keepPlayList: value})
   }
 
+  const handleSettingShowKeyName = (value: boolean) => {
+    handleSettingData({...innerProps.settingData, showKeyName: value})
+  }
+
   return (
     <div
       {...restProps}
       class={cx(
-        'bg-white rd-2 p-2 box-border flex flex-col justify-end',
+        'flex flex-col gap-2 bg-white rd-2 p-2 box-border flex flex-col justify-end',
         innerProps.class,
       )}
     >
-      <SSettingItem label="reset PWA" type="button" onClick={unregisterServiceWorker} />
+      <SSettingItem
+        label="Show key name"
+        type="switch"
+        value={innerProps.settingData?.showKeyName}
+        onValueChange={handleSettingShowKeyName}
+      />
+      <SSettingItem label="Reset PWA" type="button" onClick={unregisterServiceWorker} />
       <SSettingItem
         label="Piano Size"
         type="slider"
@@ -82,7 +93,7 @@ export const SSetting = (props: SSettingProps) => {
         onValueChange={handleSettingKeepPlayList}
       />
       <div class="flex justify-end w-full gap-2">
-        <span class="text-7 text-gray-500 flex-grow-1 pt-3 leading-6">
+        <span class="text-5 md:text-7 text-gray-500 flex-grow-1 pt-3 leading-6">
           The world goes round with LOVE.
         </span>
         <SPlayerButton class="min-w-11 min-h-9 bg-gray-100" onClick={handleClose}>

apps/bplan-client/src/routes/(main-layout)/(home)/index.tsx

@@ -23,9 +23,10 @@ export default function HomePage(props: HomePageProps) {
   const [splendidGrandPiano, splendidGrandPianoController] = createSplendidGrandPiano({
     onEmitInstrument: emitAllIds,
   })
-  const [settingData, setSettingData] = useCookie('coong__piano-setting', {
+  const [settingData, setSettingData] = useCookie<SettingData>('coong__piano-setting', {
     keepPlayList: true,
     pianoSize: 100,
+    showKeyName: false,
   })
   const initMusics = untrack(() => props.initMusics)
   const [musics, setMusics, updateActive] = useStorage<MusicInfo[]>(
@@ -62,12 +63,13 @@ export default function HomePage(props: HomePageProps) {
       <main class="relative h-full overflow-y-hidden pt-0 px-2 flex flex-col overflow-x-auto inline-block">
         <SScale
           class="h-full w-max origin-top-left"
-          size={settingData().pianoSize / HUNDRED}
+          size={(settingData().pianoSize ?? HUNDRED) / HUNDRED}
         >
           <SPiano
             ref={setPianoElement}
             onDown={splendidGrandPianoController.down}
             onUp={splendidGrandPianoController.up}
+            showKeyName={settingData().showKeyName}
           />
         </SScale>
       </main>

packages/unocss-config/uno.config.ts

@@ -110,7 +110,7 @@ export default defineConfig({
     ],
     'key-piano-flat': [
       'block b-solid b-#ccc rd-t-0 inline-flex flex-shrink-0 overflow-hidden b-b-2px',
-      'p-0 relative rd-b-3px b-1px shadow-flat-up data-[state="down"]:shadow-flat-down b-b-#ddd',
+      'p-0 relative rd-b-3px b-l-1px b-r-1px b-t-0 shadow-flat-up data-[state="down"]:shadow-flat-down b-b-#ddd',
       'data-[state="down"]-shadow-[0_2px_2px_rgba(0,0,0,0.4)] data-[state="down"]:scale-x-100',
       'data-[state="down"]:scale-y-99 data-[state="down"]:origin-top data-[state="down"]:b-b-1px',
       'data-[state="down"]:after:content-[""] data-[state="down"]:after:bg-black data-[state="down"]:after:h-full',