github-mirrors/netris-nestri
1
0
Fork 0
mirror of https://github.com/nestriness/nestri.git synced 2025-12-11 00:05:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

✨ feat: Use howlerJS for audio

Browse Source
This commit is contained in:
Wanjohi
2024-12-27 13:01:13 +03:00
parent 82c1a3baea
commit 08f2643dcd
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/www/package.json
View File

@@ -41,6 +41,7 @@
"@nestri/typescript-config": "*",
"@nestri/ui": "*",
"@types/eslint": "8.56.10",
"@types/howler": "^2.2.12",
"@types/node": "^22.5.1",
"@types/react": "^18.2.28",
"@types/react-dom": "^18.2.13",
@@ -48,6 +49,7 @@
"@typescript-eslint/parser": "7.16.1",
"eslint": "8.57.0",
"eslint-plugin-qwik": "^1.8.0",
"howler": "^2.2.4",
"prettier": "3.3.3",
"react": "18.2.0",
"react-dom": "18.2.0",

21
apps/www/src/routes/pricing/index.tsx
View File

@@ -1,7 +1,9 @@
import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import { $, component$, noSerialize, NoSerialize, useSignal, useVisibleTask$ } from "@builder.io/qwik";
import { TitleSection, MotionComponent, transition } from "@nestri/ui/react";
import { NavBar, Footer, Book } from "@nestri/ui"
import { cn } from "@nestri/ui/design";
import { Howl, Howler } from 'howler';
//FIXME: Add a FAQ section
// FIXME: Takes too long for the price input radio input to become responsive
const w = 280
@@ -62,13 +64,14 @@ const convertToTitle = (value: any) => {
export default component$(() => {
const priceValue = useSignal(3)
const audioUrl = new URL('./cash.mp3', import.meta.url).href
const audio = useSignal<HTMLAudioElement | undefined>()
const buttonRef = useSignal<HTMLButtonElement | undefined>()
const bookRef = useSignal<HTMLButtonElement | undefined>()
const audio = useSignal<NoSerialize<Howl> | undefined>()
useVisibleTask$(() => {
audio.value = noSerialize(new Howl({ src: ["/audio/cash.mp3"] }))
audio.value?.volume(0.5)
buttonRef.value?.addEventListener("mouseenter", () => {
bookRef.value?.classList.add('flip')
})
@@ -85,6 +88,11 @@ export default component$(() => {
}
})
const onClick = $((v: any) => {
priceValue.value = Number(v.target?.value) as number;
audio.value?.play()
})
return (
<>
<NavBar />
@@ -306,11 +314,10 @@ export default component$(() => {
class="absolute transition-all duration-200 pointer-events-none w-full -top-1 z-20 right-0 left-[--left] ">
<span class="left-0 border-[0.625rem] border-gray-600 dark:border-gray-400 shadow-sm shadow-gray-500 size-14 block z-20 bg-gray-400 dark:bg-gray-600 rounded-full -translate-x-1/2" />
</div>
<audio ref={v => audio.value = v} src={audioUrl} autoplay={false} class="hidden" />
{/* <audio ref={v => audio.value = v} src={audioUrl} autoplay={false} class="hidden" /> */}
<input
type="range" id="snap" min={1} max={5} step={1}
//@ts-expect-error
onClick$={async (v) => { priceValue.value = Number(v.target?.value) as number; await audio.value?.play() }}
onClick$={onClick}
//@ts-expect-error
onChange$={(v) => { priceValue.value = Number(v.target?.value) as number; }}
class="overflow-hidden absolute cursor-pointer z-30 top-0 left-0 opacity-0 h-full w-full"