Skip to content

Commit 885f7a7

Browse files
bichikimbichikim
committed
update
1 parent a52ffe5 commit 885f7a7

File tree

11 files changed

+374
-87
lines changed

11 files changed

+374
-87
lines changed

‎apps/bplan-client/README.md‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,5 +44,24 @@ https://github.com/surikov/webaudiofont
4444

4545
### css
4646
https://lenadesign.org/2022/01/21/css-shiny-diamond/
47-
47+
https://codepen.io/electerious/pen/MjZPVe
48+
https://codepen.io/mprquinn/pen/OmOMrR
49+
https://codepen.io/webstoryboy/pen/eYexvbN
50+
https://wsss.tistory.com/1851
51+
https://msm1307.tistory.com/83
52+
https://codepen.io/cjgammon/pen/KgBOGg
53+
https://codepen.io/lbebber/pen/KwGEQv
54+
https://codepen.io/lbebber/pen/DOoXLj
55+
https://codepen.io/chriseisenbraun/pen/AxNWNp
56+
https://codepen.io/mayurelbhar/pen/wBvGbX
57+
https://codepen.io/jh3y/pen/GRegoaL
58+
https://codepen.io/ksenia-k/pen/vYwgrWv
59+
https://codepen.io/jh3y/pen/QWYPaax
60+
https://codepen.io/pablostanley/pen/gOJVaeJ
61+
https://codepen.io/nicolasjesenberger/pen/BaqYwea
62+
https://wsss.tistory.com/?page=7
63+
https://codepen.io/cobra_winfrey/pen/mdGBGEO
64+
https://codepen.io/jkantner/pen/WNKZbmZ
65+
https://codepen.io/jkantner/pen/wvXbboe
66+
https://wsss.tistory.com/1885
4867
fix vinxi version 0.4.3

‎apps/bplan-client/src/components/chat/SChatButton.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export const SChatButton = () => {
2+
return (
3+
<div>
4+
<span class="i-hugeicons:bot" />
5+
<span class="i-hugeicons:alert-01" />
6+
<span class="i-hugeicons:bounce-left" />
7+
<span class="i-hugeicons:cloud-upload" />
8+
<span class="i-hugeicons:configuration-01" />
9+
<span class="i-hugeicons:constellation" />
10+
<span class="i-hugeicons:swipe-up-06" />
11+
<span class="i-hugeicons:drag-01" />
12+
</div>
13+
)
14+
}

‎apps/bplan-client/src/components/midi-player/SFileItem.tsx‎

Lines changed: 35 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import {createEffect, JSX, Show, splitProps} from 'solid-js'
1+
import {createEffect, createMemo, JSX, Show, splitProps} from 'solid-js'
22
import {cva, cx} from 'class-variance-authority'
33
import {STypeIcon} from './STypeIcon'
44
import {SampleStart} from './types'
5+
import {SProgress} from './SProgress'
56

67
export interface MusicInfo {
78
ext?: string
@@ -10,13 +11,16 @@ export interface MusicInfo {
1011
inProgress?: boolean
1112
midi?: SampleStart[][]
1213
name: string
14+
playing?: boolean
1315
selected?: boolean
16+
totalDuration?: number
1417
}
1518

1619
export interface SFileItemProps
1720
extends Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'onSelect' | 'id'>,
1821
MusicInfo {
1922
index?: number
23+
leftTime?: number
2024
onGenerate?: (id: string) => void
2125
onSelect?: (id: string) => void
2226
}
@@ -32,6 +36,9 @@ export const SFileItem = (props: SFileItemProps) => {
3236
'selected',
3337
'generated',
3438
'ext',
39+
'leftTime',
40+
'playing',
41+
'totalDuration',
3542
])
3643

3744
const nameStyle = cva('block line-height-20px truncate pt-2px', {
@@ -63,41 +70,48 @@ export const SFileItem = (props: SFileItemProps) => {
6370
},
6471
})
6572

66-
const rootStyle = cva(
67-
cx(
68-
'flex gap-4 items-center b-0 bg-transparent text-20px flex-shrink-0 h-36px',
69-
'b-t-1px b-t-gray-300 b-t-solid first:b-t-0 px-4 relative',
70-
),
71-
{
72-
variants: {
73-
selected: {
74-
false: '',
75-
true: cx(
76-
'before-content-[""] before-absolute before-bg-blue before-opacity-30 before-rd-6px',
77-
'before-left-0 before-top-0 before-bottom-0 before-right-0',
78-
),
79-
},
73+
const indexStyle = cva('', {
74+
variants: {
75+
playing: {
76+
true: 'opacity-0',
8077
},
8178
},
82-
)
79+
})
8380

8481
const handleSelect = () => {
8582
props.onSelect?.(props.id)
8683
}
8784

88-
createEffect(() => {
89-
console.log(innerProps.selected)
90-
})
85+
const progress = createMemo(
86+
() => ((props.leftTime ?? 0) / (props.totalDuration ?? 1)) * 100,
87+
)
9188

9289
return (
9390
<button
9491
{...restProps}
95-
class={cx(rootStyle({selected: Boolean(innerProps.selected)}), restProps.class)}
92+
class={cx(
93+
'flex gap-4 items-center b-0 bg-transparent text-20px flex-shrink-0 h-36px',
94+
'b-t-1px b-t-gray-300 b-t-solid first:b-t-0 px-4 relative',
95+
restProps.class,
96+
)}
9697
onClick={handleSelect}
9798
>
99+
<Show when={innerProps.playing}>
100+
<SProgress
101+
class="block absolute w-full h-full left-0 top-0 bg-gray-100"
102+
progress={progress()}
103+
/>
104+
</Show>
105+
<Show when={innerProps.selected}>
106+
<span class="block absolute bg-blue rd-6px top-0 left-0 w-full h-full opacity-40" />
107+
</Show>
108+
<Show when={innerProps.playing}>
109+
<span class="block i-hugeicons:arrow-right-double absolute text-gray-500 left-3" />
110+
</Show>
98111
<span class="relative block text-gray b-r-solid b-r-1px b-r-gray-300 pr-2">
99-
{innerProps.index}
112+
<span class={indexStyle({playing: innerProps.playing})}>{innerProps.index}</span>
100113
</span>
114+
101115
<span class="relative flex gap-1 flex-grow-1 flex-shrink-1 items-center overflow-hidden">
102116
<span
103117
class={nameStyle({

‎apps/bplan-client/src/components/midi-player/SFileList.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,22 @@ import {MusicInfo, SFileItem} from './SFileItem'
44

55
export interface SFileListProps
66
extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
7+
leftTime?: number
78
list: MusicInfo[]
89
onSelect?: (id: string) => void
10+
playingId?: string
911
selectedId?: string
1012
}
1113

1214
export const SFileList = (props: SFileListProps) => {
1315
const [element, setElement] = createSignal<HTMLDivElement | null>(null)
14-
const [innerProps, restProps] = splitProps(props, ['list', 'onSelect', 'selectedId'])
16+
const [innerProps, restProps] = splitProps(props, [
17+
'list',
18+
'onSelect',
19+
'selectedId',
20+
'leftTime',
21+
'playingId',
22+
])
1523
// indicators
1624
const [scrollIndicators, setScrollIndicators] = createSignal({
1725
bottom: false,
@@ -86,6 +94,8 @@ export const SFileList = (props: SFileListProps) => {
8694
index={index()}
8795
selected={item.selected || item.id === innerProps.selectedId}
8896
class="w-full"
97+
leftTime={innerProps.leftTime}
98+
playing={item.id === innerProps.playingId}
8999
onSelect={handelSelect}
90100
/>
91101
)}

‎apps/bplan-client/src/components/midi-player/SHiddenPlayer.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const SHiddenPlayer = (props: SHiddenPlayerProps) => {
1414
}
1515

1616
const rootStyle = cva(
17-
'relative duration-150 bg-white rd-2 flex flex-col relative duration-150',
17+
'relative duration-150 bg-white rd-2 flex flex-col duration-150',
1818
{
1919
variants: {
2020
isShow: {
@@ -26,13 +26,15 @@ export const SHiddenPlayer = (props: SHiddenPlayerProps) => {
2626
)
2727

2828
return (
29-
<div
30-
{...preventGlobalTouchAttrs()}
31-
class={cx(rootStyle({isShow: isShow()}), props.class)}
32-
>
33-
<SPlayer {...props} class={rootStyle({isShow: isShow()})} />
29+
<div class="relative">
30+
<div
31+
{...preventGlobalTouchAttrs()}
32+
class={cx(rootStyle({isShow: isShow()}), props.class)}
33+
>
34+
<SPlayer {...props} />
35+
</div>
3436
<SClose
35-
class="absolute top--20px left--20px"
37+
class="absolute top--20px left--20px hover:z-1"
3638
onClose={handleClose}
3739
isHidden={!isShow()}
3840
/>

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

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,30 +36,47 @@ export const SMidiFileInput = (props: HMidiFileInputProps) => {
3636
const samples: MusicInfo[] = midis
3737
.map((midiFile, index): MusicInfo | null => {
3838
const {name, midi} = midiFile
39-
const midiData: (SampleStart[] | null)[] = midi.tracks.map((track) => {
40-
const {notes, instrument: {family} = {}} = track
41-
if (!notes || family !== 'piano') {
42-
return null
43-
}
44-
return notes.map((track): SampleStart => {
45-
return {
46-
duration: track.duration,
47-
note: track.name,
48-
time: track.time,
49-
velocity: track.velocity,
39+
const midiData: SampleStart[][] = midi.tracks
40+
.map((track) => {
41+
const {notes, instrument: {family} = {}} = track
42+
if (!notes || family !== 'piano') {
43+
return null
5044
}
45+
return notes.map((track): SampleStart => {
46+
return {
47+
duration: track.duration,
48+
note: track.name,
49+
time: track.time,
50+
velocity: track.velocity,
51+
}
52+
})
5153
})
52-
})
54+
.filter(Boolean) as SampleStart[][]
55+
56+
let totalDuration = 0
57+
for (const track of midiData) {
58+
const lastNote = track.at(-1)
59+
if (lastNote) {
60+
const trackTotal = (lastNote.time ?? 0) + (lastNote.duration ?? 0)
61+
if (trackTotal > totalDuration) {
62+
totalDuration = trackTotal
63+
}
64+
}
65+
}
66+
5367
const [singleTrack] = midi.tracks
5468
if (!singleTrack) {
5569
return null
5670
}
5771

72+
console.log('totalDuration', totalDuration)
73+
5874
return {
5975
ext: 'midi',
6076
id: `${name}-${index}`,
6177
midi: midiData.filter(Boolean) as SampleStart[][],
6278
name: name.replace(/\.mid$/u, ''),
79+
totalDuration,
6380
}
6481
})
6582
.filter(Boolean) as MusicInfo[]

0 commit comments

Comments
 (0)