akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-25 08:06:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Projects (#192)

Browse Source 
* Add file save UI and drafts project

* Fix build

* Create SearchList component as abstraction

* Add project page and file tree view

* Create Locale context

* Create Theme context

* Create Version context

* Create Title context

* Create Project context

* Store current file in project context

* Fix issues when renaming file and implement deleting

* Style improvements

* Make all project strings translatable

* Fix z-index
This commit is contained in:
Misode
2022-01-18 01:02:19 +01:00
committed by GitHub
parent cd318dc795
commit c6c52ca41a
39 changed files with 958 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/components/sounds/SoundConfig.tsx
View File

@@ -1,7 +1,7 @@
import { Howl } from 'howler'
import { useEffect, useRef, useState } from 'preact/hooks'
import { Btn, NumberInput, RangeInput, TextInput } from '..'
import { locale } from '../../Locales'
import { useLocale } from '../../contexts'
import type { SoundEvents, VersionAssets } from '../../services'
import { getResourceUrl } from '../../services'
@@ -13,15 +13,14 @@ export interface SoundConfig {
volume: number,
}
type SoundConfigProps = SoundConfig & {
lang: string,
assets: VersionAssets,
sounds: SoundEvents,
onEdit: (changes: Partial<SoundConfig>) => unknown,
onDelete: () => unknown,
delayedPlay?: number,
}
export function SoundConfig({ lang, assets, sounds, sound, delay, pitch, volume, onEdit, onDelete, delayedPlay }: SoundConfigProps) {
const loc = locale.bind(null, lang)
export function SoundConfig({ assets, sounds, sound, delay, pitch, volume, onEdit, onDelete, delayedPlay }: SoundConfigProps) {
const { locale } = useLocale()
const [loading, setLoading] = useState(true)
const [playing, setPlaying] = useState(false)
const [invalid, setInvalid] = useState(false)
@@ -100,23 +99,23 @@ export function SoundConfig({ lang, assets, sounds, sound, delay, pitch, volume,
}
return <div class={`sound-config${loading ? ' loading' : playing ? ' playing' : ''}${invalid ? ' invalid' : ''}`}>
<Btn class="play" icon={invalid ? 'alert' : loading ? 'sync' : 'play'} label={loc('sounds.play')} onClick={play} tooltip={invalid ? loc('sounds.unknown_sound') : loading ? loc('sounds.loading_sound') : loc('sounds.play_sound')} tooltipLoc="se" />
<Btn class="play" icon={invalid ? 'alert' : loading ? 'sync' : 'play'} label={locale('sounds.play')} onClick={play} tooltip={invalid ? locale('sounds.unknown_sound') : loading ? locale('sounds.loading_sound') : locale('sounds.play_sound')} tooltipLoc="se" />
<TextInput class="btn btn-input sound" list="sound-list" spellcheck={false}
value={sound} onChange={sound => onEdit({ sound })} />
<label class="delay-label">{loc('sounds.delay')}: </label>
<label class="delay-label">{locale('sounds.delay')}: </label>
<NumberInput class="btn btn-input delay" min={0}
value={delay} onChange={delay => onEdit({ delay })} />
<label class="pitch-label">{loc('sounds.pitch')}: </label>
<label class="pitch-label">{locale('sounds.pitch')}: </label>
<RangeInput class="pitch tooltipped tip-s" min={0.5} max={2} step={0.01}
aria-label={pitch.toFixed(2)} style={`--x: ${(pitch - 0.5) * (100 / 1.5)}%`}
value={pitch} onChange={pitch => onEdit({ pitch })} />
<label class="volume-label">{loc('sounds.volume')}: </label>
<label class="volume-label">{locale('sounds.volume')}: </label>
<RangeInput class="volume tooltipped tip-s" min={0} max={1} step={0.01}
aria-label={volume.toFixed(2)} style={`--x: ${volume * 100}%`}
value={volume} onChange={volume => onEdit({ volume })} />
<Btn class={`copy${copyActive ? ' active' : ''}`} icon={copyActive ? 'check' : 'terminal'} label={loc('copy')} tooltip={copyActive ? loc('copied') : loc('sounds.copy_command')}
<Btn class={`copy${copyActive ? ' active' : ''}`} icon={copyActive ? 'check' : 'terminal'} label={locale('copy')} tooltip={copyActive ? locale('copied') : locale('sounds.copy_command')}
onClick={copy} />
<Btn class="remove" icon="trashcan" tooltip={loc('sounds.remove_sound')}
<Btn class="remove" icon="trashcan" tooltip={locale('sounds.remove_sound')}
onClick={() => {onDelete(); stop()}} />
</div>
}