27 | {selectedPatternBeats.map((patternSounds, soundIndex) => (
28 | {
34 | const newPattern = selectedPatternBeats.map(
35 | (soundBeats, soundIndex) =>
36 | soundIndex === toChangeSoundIndex
37 | ? soundBeats.map((sound, beatIndex) =>
38 | beatIndex === toChangeBeatIndex ? newValue : sound
39 | )
40 | : soundBeats
41 | )
42 | onUpdateCurrentPattern(newPattern)
43 | }}
44 | />
45 | ))}
46 |
47 | )
48 | }
49 |
--------------------------------------------------------------------------------
/src/features/daw/instrument/header/instrument-header.tsx:
--------------------------------------------------------------------------------
1 | import { useDispatch } from 'react-redux'
2 | import { Track } from '../../../../model/track/track'
3 | import { closeAllBottomUpPanels } from '../../bottom-bar/store/bottom-bar-slice'
4 | import {
5 | selectNextOctave,
6 | selectPreviousOctave,
7 | } from '../store/instrument-slice'
8 | import { FaPlus, FaMinus } from 'react-icons/fa'
9 | import { IoClose } from 'react-icons/io5'
10 | import { OCTAVES, Octave } from '../../../../model/note/key/octave/octave'
11 |
12 | export type InstrumentHeaderProps = {
13 | selectedTrack: Track
14 | selectedOctave: Octave
15 | }
16 |
17 | export const InstrumentHeader = ({
18 | selectedTrack,
19 | selectedOctave,
20 | }: InstrumentHeaderProps) => {
21 | const dispatch = useDispatch()
22 | return (
23 |
29 |
34 |
35 |
36 |
52 |
68 |
69 |
16 | {TRACK_COLORS.map((item, index) => (
17 |
props.onSetColor(item)}
20 | className={`rounded-full cursor-pointer border-2 w-6 h-6 bg-${item}-500 ${
21 | props.currentColor === item
22 | ? 'border-slate-200'
23 | : 'border-slate-600'
24 | }`}
25 | />
26 | ))}
27 |
28 | )
29 | }
30 |
31 | export const TrackSetColorMenu = ({
32 | currentColor,
33 | onSetColor,
34 | }: TrackSetColorMenuProps) => {
35 | const [showColorMenu, setShowColorMenu] = useState(false)
36 | return (
37 |
setShowColorMenu(true)}
40 | onMouseLeave={() => setShowColorMenu(false)}
41 | >
42 |
43 |
Set Color
44 |
58 |
59 | )
60 | }
61 |
--------------------------------------------------------------------------------
/src/features/daw/menu/hamburger/import/dialog/step/file-dialog-step.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import { useWizardContext } from '../../../../../common/components/wizard/use-wizard-context'
3 |
4 | export type FileChooserDialogStepProps = {
5 | handleFileImport: (file: File) => void
6 | }
7 |
8 | export const FileChooserDialogStep = ({
9 | handleFileImport,
10 | }: FileChooserDialogStepProps) => {
11 | const [fileToImport, setFileToImport] = useState
(null)
12 |
13 | const { goToNextStep, setNextStepHandler } = useWizardContext()
14 |
15 | setNextStepHandler(() => {
16 | // Here we would execute the import action
17 | fileToImport && handleFileImport(fileToImport)
18 | })
19 |
20 | return (
21 |
22 |
Select file to import
23 |
24 |
25 |
{
32 | if (e?.target?.files && e.target.files.length > 0) {
33 | setFileToImport(e?.target?.files[0])
34 | }
35 | }}
36 | />
37 |
41 | JSON File previously exported.
42 |
43 |
44 |
45 |
46 |
53 |
54 |
26 |
{
30 | setShowPopup(!showPopup)
31 | }}
32 | >
33 |
36 |
37 |
41 |
42 |
{sound.name}
43 |
44 |
45 |
46 |
47 | {showPopup && (
48 |
54 | setShowPopup(false)}
56 | currentSoundIndex={index}
57 | selectedTrack={selectedTrack}
58 | onSelectedSound={onSelectedSound}
59 | />
60 |
61 | )}
62 |
45 |
46 |
47 |
Velocity
48 |
{noteVelocity}
49 |
50 |
51 |
{
59 | setNoteVelocity(parseInt(e.target.value))
60 | }}
61 | className={`h-1 w-full cursor-ew-resize rounded-lg accent-${selectedTrack?.color}-600`}
62 | >
63 |
64 |
43 |
44 | {modes.map((mode) => (
45 |
59 | ))}
60 |
61 |
62 |
63 |
75 |
76 |
64 | {items.map((item) => (
65 |
72 | ))}
73 |
74 | )
75 | }
76 |
--------------------------------------------------------------------------------
/src/features/daw/menu/hooks/import-export/useImport.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useState } from 'react'
2 | import { ExportData } from './types'
3 | import { useDispatch, useSelector } from 'react-redux'
4 | import { setProjectTitle } from '../../store/menu-slice'
5 | import { selectTracks } from '../../../playlist/store/selectors'
6 | import { addTrack, deleteTrack } from '../../../playlist/store/playlist-slice'
7 | import { readJSONFile } from '../../hamburger/import/utils/read-json-file'
8 |
9 | const importVersion1 = (data: ExportData) => {
10 | return data
11 | }
12 |
13 | const importByVersion = {
14 | 'liberty_beats/1.0.0': importVersion1,
15 | }
16 |
17 | const parseData = (json: unknown) => {
18 | if (!json) {
19 | throw new Error('Invalid project file')
20 | }
21 |
22 | const data = json as ExportData
23 | const allowedVersions = Object.keys(importByVersion)
24 | if (!allowedVersions.includes(data.version)) {
25 | throw new Error(
26 | `Invalid version of the project file, it should be one of ${allowedVersions
27 | .map((v) => `"${v}"`)
28 | .join(',')}`
29 | )
30 | }
31 |
32 | const dataVersion = data.version as keyof typeof importByVersion
33 |
34 | return importByVersion[dataVersion](data)
35 | }
36 |
37 | export const useImport = () => {
38 | const dispatch = useDispatch()
39 |
40 | const tracks = useSelector(selectTracks)
41 | const [isLoading, setIsLoading] = useState(false)
42 | const [isError, setIsError] = useState(false)
43 | const [errorMessage, setErrorMessage] = useState('')
44 | const [exportData, setExportData] = useState(null)
45 |
46 | const executeImportProject = useCallback(
47 | async (file: File) => {
48 | setIsLoading(true)
49 |
50 | try {
51 | const fileContent = await readJSONFile(file)
52 | const data = parseData(fileContent)
53 | setExportData(data)
54 |
55 | dispatch(setProjectTitle(data.project_title))
56 |
57 | tracks.forEach((track) => {
58 | // remove all tracks
59 | dispatch(deleteTrack(track.id))
60 | })
61 |
62 | data.tracks.forEach((track) => {
63 | // add imported tracks
64 | dispatch(addTrack(track))
65 | })
66 | } catch (error) {
67 | setIsError(true)
68 | if (error instanceof Error) {
69 | setErrorMessage(error.message)
70 | }
71 | } finally {
72 | setIsLoading(false)
73 | }
74 | },
75 | [dispatch, tracks]
76 | )
77 |
78 | return {
79 | isLoading,
80 | executeImportProject,
81 | exportData,
82 | isError,
83 | errorMessage,
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/src/features/daw/drum-machine/pad/sound-selector/category/drum-machine-open-hh-icon.tsx:
--------------------------------------------------------------------------------
1 | export const DrumMachineOpenHiHatIcon = (
2 | props: React.SVGProps
3 | ) => (
4 |
18 | )
19 | export default DrumMachineOpenHiHatIcon
20 |
--------------------------------------------------------------------------------
/src/features/daw/playlist/track-list/track-popup-menu/track-popup-menu.tsx:
--------------------------------------------------------------------------------
1 | import { BiRename } from 'react-icons/bi'
2 | import { MdDelete } from 'react-icons/md'
3 | import { FaArrowUp, FaArrowDown, FaRegCopy } from 'react-icons/fa'
4 | import { TrackSetColorMenu } from './track-set-color-menu/track-set-color-menu'
5 | import { Track } from '../../../../../model/track/track'
6 | import { useDispatch } from 'react-redux'
7 | import {
8 | deleteTrack,
9 | duplicateTrack,
10 | moveTrackDown,
11 | moveTrackUp,
12 | setTrackColor,
13 | } from '../../store/playlist-slice'
14 | import { useRef } from 'react'
15 | import { useCallbackOnOutsideClick } from '../../../common/hooks/use-outside-click'
16 |
17 | export type TrackPopupMenuProps = {
18 | track: Track
19 | onClose: () => void
20 | onRename: () => void
21 | }
22 |
23 | export const TrackPopupMenu = ({
24 | track,
25 | onClose,
26 | onRename,
27 | }: TrackPopupMenuProps) => {
28 | const dispatch = useDispatch()
29 | const popupMenuRef = useRef(null)
30 |
31 | useCallbackOnOutsideClick(popupMenuRef, onClose)
32 |
33 | const menuItems = [
34 | {
35 | label: 'Rename',
36 | icon: ,
37 | action: () => {
38 | onRename()
39 | },
40 | },
41 | {
42 | label: 'Move Up',
43 | icon: ,
44 | action: () => {
45 | dispatch(moveTrackUp(track.id))
46 | },
47 | },
48 | {
49 | label: 'Move Down',
50 | icon: ,
51 | action: () => {
52 | dispatch(moveTrackDown(track.id))
53 | },
54 | },
55 | {
56 | label: 'Duplicate',
57 | icon: ,
58 | action: () => {
59 | dispatch(duplicateTrack(track.id))
60 | },
61 | },
62 | {
63 | label: 'Delete',
64 | icon: ,
65 | action: () => {
66 | dispatch(deleteTrack(track.id))
67 | },
68 | },
69 | ]
70 | return (
71 |
75 |
78 | dispatch(setTrackColor({ trackId: track.id, color }))
79 | }
80 | />
81 |
82 | {menuItems.map((item, index) => (
83 |
88 | {item.icon}
89 |
{item.label}
90 |
27 | {Array.from({ length: props.maxBars }).map((_, barIndex) => (
28 |
34 |
35 | {Array.from({ length: SUB_BAR_NUM }).map((_, subBarIndex) => (
36 | {
43 | e.preventDefault()
44 | props.onSelectTick(tick)
45 | setMenuTick(tick)
46 | setMenuIsOpen(true)
47 | }}
48 | />
49 | ))}
50 |
51 |
52 | ))}
53 | {menuIsOpen && (
54 |
58 |
setMenuIsOpen(false)}
60 | items={[
61 | {
62 | label: 'Paste',
63 | icon: ,
64 | action: () => {
65 | props.onPasteBar(menuTick)
66 | setMenuIsOpen(false)
67 | },
68 | },
69 | ]}
70 | />
71 |
72 | )}
73 |
props.onMouseLeave(props.keyToRender)}
54 | onMouseEnter={() => props.onMouseEnter(props.keyToRender)}
55 | onMouseDown={() => props.onMouseDown(props.keyToRender)}
56 | onMouseUp={() => props.onMouseUp(props.keyToRender)}
57 | >
58 | {itemData.needsLabel && (
59 |
68 | {props.keyToRender}
69 |
70 | )}
71 |
72 |
77 |
78 |
91 |
onSelectTrack(track)}
46 | onContextMenu={(e) => {
47 | e.preventDefault()
48 | onSelectTrack(track)
49 | if (!showTrackMenu) {
50 | setShowTrackMenu(true)
51 | }
52 | }}
53 | >
54 |
59 |
60 |
66 |
67 |
68 |
{
71 | if (!showTrackMenu) {
72 | setShowTrackMenu(true)
73 | }
74 | }}
75 | >
76 |
77 |
78 | {showTrackMenu && (
79 |
80 | setShowTrackMenu(false)}
83 | onRename={() => {
84 | setShowTrackMenu(false)
85 | setIsRenaming(true)
86 | }}
87 | />
88 |
89 | )}
90 |
91 |
92 |
93 |
31 | {items.map((item, index) => (
32 |
{}}
36 | onMouseEnter={() => {
37 | if (!item.children) {
38 | return
39 | }
40 | setShowChildrenMenu(true)
41 | setChildMenuIndex(index)
42 | }}
43 | onMouseLeave={() => {
44 | if (!item.children) {
45 | return
46 | }
47 | setShowChildrenMenu(false)
48 | }}
49 | >
50 | {item.icon}
51 |
{item.label}
52 |
53 | {item.children && (
54 |
55 |
56 |
57 |
61 |
62 | {item.children.map((item, index) => (
63 |
68 | {item.icon}
69 |
{item.label}
70 |
71 | ))}
72 |
73 |
74 |
75 |
76 | )}
77 |
78 | ))}
79 |
50 | {isPlaying ? (
51 |
54 | ) : (
55 |
61 | )}
62 |
63 |
69 | {isPlaying ? (
70 |
76 | ) : (
77 |
83 | )}
84 |
90 | {/* TODO - Record & Loop buttons */}
91 | {/* */}
94 | {/* */}
97 | {timeString}
98 |
99 | )
100 | }
101 |
--------------------------------------------------------------------------------
/src/features/daw/drum-machine/pad/sound-selector/pad-sound-item/selector-popup/sound-selector-popup.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from 'react'
2 | import { TRACK_DRUM_PATTERN_SIZE } from '../../../../../../../model/track/drums/track-drums'
3 | import {
4 | DrumSound,
5 | DrumSoundUtils,
6 | } from '../../../../../../../model/drums/sound/drums-sound'
7 | import { Track } from '../../../../../../../model/track/track'
8 | import { DrumMachineCategoryIcon } from '../../category/drum-category-icon'
9 | import { useCallbackOnOutsideClick } from '../../../../../common/hooks/use-outside-click'
10 | import { useDispatch } from 'react-redux'
11 | import {
12 | addPlayingKey,
13 | removeAllPlayingKeys,
14 | removePlayingKey,
15 | } from '../../../../../instrument/store/instrument-slice'
16 |
17 | export type SoundSelectorPopupProps = {
18 | selectedTrack: Track
19 | currentSoundIndex: number
20 |
21 | onSelectedSound: (sound: DrumSound) => void
22 | onClose: () => void
23 | }
24 |
25 | export const SoundSelectorPopup = ({
26 | onClose,
27 | currentSoundIndex,
28 | selectedTrack,
29 | onSelectedSound,
30 | }: SoundSelectorPopupProps) => {
31 | const dispatch = useDispatch()
32 | const popupMenuRef = useRef(null)
33 |
34 | const onClosePopup = () => {
35 | onClose()
36 | dispatch(removeAllPlayingKeys(selectedTrack.id))
37 | }
38 |
39 | useCallbackOnOutsideClick(popupMenuRef, onClosePopup)
40 |
41 | const sounds = DrumSoundUtils.getDrumsSoundSetByPreset(
42 | selectedTrack.instrumentPreset
43 | )
44 | const defaultSounds = sounds.slice(0, TRACK_DRUM_PATTERN_SIZE)
45 | const selectedSoundsFromStore = selectedTrack.trackDrums?.selectedSounds
46 | const selectedSounds =
47 | selectedSoundsFromStore === undefined ||
48 | selectedSoundsFromStore?.length === 0
49 | ? defaultSounds
50 | : selectedSoundsFromStore
51 |
52 | const currentSound = selectedSounds[currentSoundIndex]
53 |
54 | const selectable = [
55 | currentSound,
56 | ...sounds.filter((sound) => !selectedSounds.includes(sound)),
57 | ]
58 |
59 | return (
60 |
64 | {selectable.map((item, index) => (
65 |
{
69 | onClosePopup()
70 | onSelectedSound(item)
71 | }}
72 | onMouseEnter={() => {
73 | dispatch(
74 | addPlayingKey({
75 | key: item.key,
76 | trackId: selectedTrack.id,
77 | })
78 | )
79 | }}
80 | onMouseLeave={() => {
81 | dispatch(
82 | removePlayingKey({
83 | key: item.key,
84 | trackId: selectedTrack.id,
85 | })
86 | )
87 | }}
88 | >
89 |
93 |
{item.name}
94 |
95 | ))}
96 |