Skip to content

Commit

Permalink
Add progress bar to initialization
Browse files Browse the repository at this point in the history
  • Loading branch information
oamaok committed Oct 20, 2021
1 parent da4cb5b commit 1c625c6
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 11 deletions.
20 changes: 10 additions & 10 deletions client/src/audio.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import { workletNames, WorkletNode } from './worklets'
import state from './state'

let audioContext: AudioContext | null = null

export const initializeAudio = async () => {
audioContext = new AudioContext()

await Promise.all(
workletNames.map(async (worklet) => {
const path = `/worklets/${worklet}.js`
try {
await audioContext!.audioWorklet.addModule(path)
} catch (err) {
throw new Error(`Failed to load audio worklet: ${path}`)
}
})
)
for (const worklet of workletNames) {
const path = `/worklets/${worklet}.js`
try {
await audioContext!.audioWorklet.addModule(path)
state.loadedWorklets++
} catch (err) {
throw new Error(`Failed to load audio worklet: ${path}`)
}
}
}

export const getAudioContext = () => {
Expand Down
11 changes: 11 additions & 0 deletions client/src/components/app/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import ModuleSelector from '../module-selector/ModuleSelector'
import Patch from '../patch/Patch'
import Hint from '../hint/Hint'
import { initializeAudio } from '../../audio'
import { workletNames } from '../../worklets'
import state, { patch } from '../../state'
import * as types from '../../../../common/types'
import * as api from '../../api'
Expand Down Expand Up @@ -64,6 +65,16 @@ const InitModal = () => {
Please adjust your audio levels before continuing. This application is
capable of producing ear-busting sonic experiences.
<button onClick={initialize}>I'm ready!</button>
<div className={css('loading-bar')}>
<div
className={css('progress')}
style={{
transform: `scaleX(${
state.loadedWorklets / workletNames.length
})`,
}}
/>
</div>
</div>
</div>
)
Expand Down
18 changes: 18 additions & 0 deletions client/src/components/app/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,21 @@
.init-modal button {
margin-top: 10px;
}

.loading-bar {
margin-top: 10px;
height: 10px;
width: 100%;
box-shadow: var(--box-shadow) inset;
border-radius: 3px;
background: var(--background);
overflow: hidden;
}

.progress {
height: 100%;
width: 100%;
background-color: var(--primary);
transform-origin: left;
transition: transform 0.1s linear;
}
1 change: 1 addition & 0 deletions client/src/reset.css
Original file line number Diff line number Diff line change
Expand Up @@ -53,4 +53,5 @@ input {
margin-bottom: -2px;

box-shadow: inset var(--box-shadow);
transform-origin: bottom left;
}
3 changes: 2 additions & 1 deletion client/src/state.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { parseRoute } from './routes'

const state = createState<State>({
initialized: false,
loadedWorklets: 0,
cursor: { x: 0, y: 0 },
viewport: { width: window.innerWidth, height: window.innerHeight },
user: null,
Expand Down Expand Up @@ -158,7 +159,7 @@ export const getCableConnectionCandidate = () => {
)

const candidateSocket = targetSockets.find((socket) => {
const { x, y } = getSocketPosition(socket)
const { x, y } = getSocketPosition(socket)!
return (x - state.cursor.x) ** 2 + (y - state.cursor.y) ** 2 < 200
})

Expand Down
1 change: 1 addition & 0 deletions client/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export type Route =

export type State = {
initialized: boolean
loadedWorklets: number
viewport: {
width: number
height: number
Expand Down

0 comments on commit 1c625c6

Please sign in to comment.