/
NOTES.txt
188 lines (163 loc) · 8 KB
/
NOTES.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
#npx is way of nicely running (and installing) apps in modules folder
npx create-react-app hotdog-rhythm-station # you may need to cd.. first
npm install react-music
# <create blank github repo>
git remote add origin git@github.com:mcmonkeys1/hotdog-rhythm-station.git
# install material-ui
npm install @material-ui/core typeface-roboto @material-ui/icons
# import 'typeface-roboto';
...
OK we managed to cobble together the React UI, using React to manage state, and using Materials-UI components
There's something weird happening with TextField type="number" - it's working somehow by throwing away undefined text input. Lovely lack of documentation.
Adding react-music was relatively painless after much research.
We're now attempting Arweave integration. Updating here as first step is to upload samples to the permaweb be used by the app:
...OK so there are no data standards, but we have data tags. Messaged the Arweave guys: apart from 'Content-Type' do whatever you want. Maybe we can use:
'Content-Type': audio/wav -see https://tools.ietf.org/html/draft-ema-vpim-wav-00
For pattern/song saves use:- application/json. Serialize objects including sequences & samples URIs
I saw ArweaveID using 'App-Id': 'arweave-id'
I think I should definitely have a name tag! e.g. 'Name': 'file.wav'
Research:
Extend React-Music:
We will need to make changes to React-Music :-( We can include any github project! :-) See link...
(https://medium.com/@jonchurch/use-github-branch-as-dependency-in-package-json-5eb609c81f1a)
npm install mcmonkeys1/react-music
-we can do branch installs with: npm install mcmonkeys1/react-music#MY_BRANCH_NAME
TODO: use ArweaveID to display login: https://github.com/shenwilly/arweaveID
OK, we're back. Just coded the login, so we have the wallet. Now to save project files
-serialize state.
-Tags:
'App-Id': `${process.env.npm_package_name}`
'App-Version': `${process.env.npm_package_version}`
'File-Name': <the name of the file>
'Unix-Time': `${Date.now()}`
npm install arweave
npm install react-toastify
OK I have made some new project decisions as this is taking too long:
1 -save to one project file without asking user for input
& always open the latest version of the file from permaweb
2 -hardcode the wav sample files as base64 JS
we still need to add features to react-music to accept ArrayBuffer!\
** 1 & 2: This means we can leave all the FileDialog stuff for another re-useable project =)
3 -leave out other niceties, this is supposed to be proof of concept
ignore checking for remaining arweave balance
do not add features to add remove channels
absolute minimum controls for each channel -Name & Volume (material-ui slider)
**
//TODO: ask for user input - FileDialog?
/* Lets standardize the dialog for reuse as much as possible:
e.g.:
<FileDialog
extensions={['md']}
onChange={FileObject => ( << do something with File object >> )}
onError={errMsg => ( << do something with err msg string >>)
/>
Use selectable List from material-ui
*/
arweave status 2jt0ffkYiveMY8N-XHhEB5Ni_64k99KduxYqboYP1Fk
//TODO -after pressing Save:
disable Save button
setTimeout to check tx status - toast once done confirmed (200):-
arweave.transactions.getStatus('2jt0ffkYiveMY8N-XHhEB5Ni_64k99KduxYqboYP1Fk').then(status => {
if (status == 200){
toast.success("Congratulations! Your pattern has been saved to the permaweb")
// Re-enable Save Button here
}
})
//need this for base64 wavs
npm install base64-arraybuffer
//forked react-music & added support for ArrayBuffer to Sampler
npm uninstall react-music
-in react-music fork: npm run build & remove 'lib' from gitignore & push
npm install mcmonkeys1/react-music#sample-arraybuffer
npm uninstall react-music; npm install mcmonkeys1/react-music
npm install @material-ui/lab
-issue with outdated modules, fixing with:
Attempted import error: 'useIsFocusVisible' is not exported from '@material-ui/core/utils'.
npm outdated
>Package Current Wanted Latest Location
>@material-ui/core 4.0.2 4.1.3 4.1.3 hotdog-rhythm-station
>@material-ui/icons 4.0.1 4.2.1 4.2.1 hotdog-rhythm-station
>react-music 1.0.4 git git hotdog-rhythm-station
npm install --save @material-ui/core@latest
npm install --save @material-ui/core@latest
npm run build
arweave package .\build\index.html .\build-pkg\index.html
///////////////////////////////////////////////////////////////////
Path: index.html
Size: 1.11 MB
Price: 0.071225187987 AR
Tags:
- Content-Type:text/html
- User-Agent:ArweaveDeploy/1.3.0
-------------------------------------------------
Trasaction ID: LjNbROpArTJUKiZUhQxRAnyzNu-Ph4ibJsALBIZn5Rk
Status: 200 Accepted �🚀
- Block: 229957
- Block hash: RI_Ledna2xa7bXOhQ4tQVcUzIl8gWfY_481lfnOTxrEHV7q3cVuumRtci0wgi5sr
- Confirmations: 7
URL: https://arweave.net/LjNbROpArTJUKiZUhQxRAnyzNu-Ph4ibJsALBIZn5Rk
//////////////////////////////////////////////////////////////////
-Testing...
-Chrome has fussy new rules for AudioContext, needs a rewrite
-assets not being loaded after arweave package, se this brfore npm run build:
$env:GENERATE_SOURCEMAP = "false"
-Seems to fix the issue
###### OK major issue found. Chrome is being an ass: "The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page."
-access to AudioContext from UI requires a rewrite of the React-Music library
HACK! Expose context as window.reactMusicContext
-and addition to play code in HotdogRS that checks for suspended state.
-issue resolved.
/////////////////////////////////////////////////
# Attempt 2
https://arweave.net/ECeUsqXWi747iUeHlSeiL8euHNPR95JsACOUArBAE6c
/////////////////////////////////////////////////
# Attempt 3
https://arweave.net/EXU1P4ftbpnv7zmLwL6aV-lbFditgxO2mzwUEIeN1xw
/////////////////////////////////////////////////
TODO:
- import roboto font properly - unneeded fonts are getting imported by arweave deploy script and then 404ed in production
- DONE! *fix slider event issue - it's horrible! unusable.
- DONE! turn channel/sample data into objects
Hotdogs on the web: [Arweave Newsletter July 2019] (https://arweave.net/VOKAC_SYiUzbJrEaIY5SEBh1pf0bGQOd8c7G68nzet4#/view/ThnQFpYNH0QpUzD0GqqvdNXaiorjJhxDs96lAABu3sk)
Even more Hotdog on the web :-) (https://medium.com/@arweave/community-spotlight-meeting-ros-f8938cf61669)
Hotdog on the web again =) [Spotlight on me / the author](https://medium.com/@arweave/community-spotlight-meeting-ros-f8938cf61669)
///////////////////
updated material-ui
removed @material-ui/lab
added Slider from material-ui/core
-done
DONE:
-refactor login/header code. app passes setWallet function -> header/login does setWallet(wallet) -> app does setstate(wallet)
-move to Header:
onClickSignin () {
this.setState({ openLogin: true })
}
onCloseLogin () {
this.setState({ openLogin: false })
}
-refactor App.render
-yep done.
DONE: create lightweight objects without methods to store in state, and use like this:
var ChannelObject = {
numSteps: 16, //<- maybe this does not go here
sample: {},
name: '',
sequence: [],
activeSteps: [],
gain: 0.5,
}
//then do
var ch1 = Object.assign({}, ChannelObject)
- DONE! *fix slider event issue - it's horrible! unusable.
- DONE! turn channel/sample data into objects
updated version number to 1.10 due to state changes, breaking previous pattern saves. We should probably standardize the project json format rather than dumping everything.
-uploading v1.1.0 to permaweb:
https://arweave.net/i9C71zGFRap--jKKKzcP0TWekW5yLDwByYlr2h7ditA
arweaveapps.com _F8mgcZbiKs6vmaXg79ETkLsG6h1QDq5FyCOIAmO8Zk
added ArweaveId support in header
added footer with github & arweave links
manually inlined arweave & github images
deployed: https://arweave.net/-5uukZGzlv8TKQ8nq4N4_pHuHZleTJa2dZtXtBR6ibE
2020-08-02
fixed up UI generally & for mobile
added fullscreen-landscape button for better mobile