mirror of
https://github.com/remvze/moodist.git
synced 2025-12-17 17:04:15 +00:00
Compare commits
No commits in common. "main" and "v2.1.0" have entirely different histories.
44 changed files with 277 additions and 968 deletions
45
CHANGELOG.md
45
CHANGELOG.md
|
|
@ -2,51 +2,6 @@
|
|||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
## [2.4.0](https://github.com/remvze/moodist/compare/v2.3.0...v2.4.0) (2025-11-25)
|
||||
|
||||
|
||||
### ✨ Features
|
||||
|
||||
* add audio session type ([3a96d38](https://github.com/remvze/moodist/commit/3a96d38a774c7675811d5a3ea323a49d9d129bbc))
|
||||
|
||||
## [2.3.0](https://github.com/remvze/moodist/compare/v2.2.0...v2.3.0) (2025-11-24)
|
||||
|
||||
|
||||
### 🚚 Chores
|
||||
|
||||
* change silence ([b921629](https://github.com/remvze/moodist/commit/b921629ee33c4a18a86258ba204921f732f404ff))
|
||||
|
||||
|
||||
### ✨ Features
|
||||
|
||||
* turn links into buttons ([d016076](https://github.com/remvze/moodist/commit/d0160763eeb66ba47dd06098b1f2a84e234fca36))
|
||||
|
||||
## [2.2.0](https://github.com/remvze/moodist/compare/v2.1.0...v2.2.0) (2025-11-24)
|
||||
|
||||
|
||||
### ✨ Features
|
||||
|
||||
* add category icons ([642a551](https://github.com/remvze/moodist/commit/642a5512267ce66492cf86f222fa01714960162a))
|
||||
* add shine effect ([d9df0d4](https://github.com/remvze/moodist/commit/d9df0d4b2c5071c12cecc6452acc0f160c57deb5))
|
||||
* change lofi icon ([066af9e](https://github.com/remvze/moodist/commit/066af9e2f31bc9201d349d888c6dc19cd5ad7750))
|
||||
* extract the provider for the tooltip ([95b641a](https://github.com/remvze/moodist/commit/95b641a88f2eee264b59b5bd62206bb84119da57))
|
||||
* make sound file addresses relative ([81d9d7c](https://github.com/remvze/moodist/commit/81d9d7ca03f6c7410ca750e069c9c8b935114950))
|
||||
* migrate to motion and fix some animations ([b191e60](https://github.com/remvze/moodist/commit/b191e6067ddc3233689a34946c602db36d6133ba))
|
||||
* replace the silence file ([e160d26](https://github.com/remvze/moodist/commit/e160d2667737b47c18b08887735be26f21bf52ae))
|
||||
|
||||
|
||||
### 💄 Styling
|
||||
|
||||
* add animation on active ([50687c9](https://github.com/remvze/moodist/commit/50687c97ca483f4de3ee7633d333dfcb4def0c4d))
|
||||
* change cursor ([6ac65c1](https://github.com/remvze/moodist/commit/6ac65c1948ad93fed012a8203fc8c6c2b2898b5b))
|
||||
* change snackbar styles ([1e5bda7](https://github.com/remvze/moodist/commit/1e5bda707cc202407b179e2d1b95dec34bfe9420))
|
||||
* decrease background opacity ([a071ba0](https://github.com/remvze/moodist/commit/a071ba04c7e86b3056049492386516b58c4210c0))
|
||||
* increase border radius ([e2bb4dd](https://github.com/remvze/moodist/commit/e2bb4dd55fbf17e777ddbb6825e400bd023da328))
|
||||
* increase line height ([a179c09](https://github.com/remvze/moodist/commit/a179c09d0c637d33d310960dbf3e92af4b5c526b))
|
||||
* increase text color ([d11a6ab](https://github.com/remvze/moodist/commit/d11a6ab062061da5809ebddd6eb39b17c2cd3862))
|
||||
* minor changes ([04c5296](https://github.com/remvze/moodist/commit/04c52962c3b65ebb7875ebadf20132846a5c020b))
|
||||
* remove cipher animation ([3feb9c1](https://github.com/remvze/moodist/commit/3feb9c1a09b52a35d79cebb7ece54989e9faf481))
|
||||
|
||||
## [2.1.0](https://github.com/remvze/moodist/compare/v2.0.1...v2.1.0) (2025-07-19)
|
||||
|
||||
|
||||
|
|
|
|||
548
package-lock.json
generated
548
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "moodist",
|
||||
"version": "2.4.0",
|
||||
"version": "2.1.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "moodist",
|
||||
"version": "2.4.0",
|
||||
"version": "2.1.0",
|
||||
"dependencies": {
|
||||
"@astrojs/react": "3.6.0",
|
||||
"@floating-ui/react": "0.26.0",
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
"@radix-ui/react-checkbox": "1.1.4",
|
||||
"@radix-ui/react-dropdown-menu": "2.0.6",
|
||||
"@radix-ui/react-slider": "1.2.3",
|
||||
"@radix-ui/react-tooltip": "1.2.8",
|
||||
"@radix-ui/react-tooltip": "1.0.7",
|
||||
"@types/howler": "2.2.10",
|
||||
"@types/react": "^18.2.25",
|
||||
"@types/react-dom": "^18.2.10",
|
||||
|
|
@ -25,7 +25,6 @@
|
|||
"framer-motion": "10.16.4",
|
||||
"howler": "2.2.4",
|
||||
"js-confetti": "0.12.0",
|
||||
"motion": "12.23.24",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hotkeys-hook": "3.2.1",
|
||||
|
|
@ -5124,29 +5123,29 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
|
||||
"integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
|
||||
"license": "MIT",
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz",
|
||||
"integrity": "sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-dismissable-layer": "1.1.11",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-popper": "1.2.8",
|
||||
"@radix-ui/react-portal": "1.1.9",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-slot": "1.2.3",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"@radix-ui/react-visually-hidden": "1.2.3"
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@radix-ui/primitive": "1.0.1",
|
||||
"@radix-ui/react-compose-refs": "1.0.1",
|
||||
"@radix-ui/react-context": "1.0.1",
|
||||
"@radix-ui/react-dismissable-layer": "1.0.5",
|
||||
"@radix-ui/react-id": "1.0.1",
|
||||
"@radix-ui/react-popper": "1.1.3",
|
||||
"@radix-ui/react-portal": "1.0.4",
|
||||
"@radix-ui/react-presence": "1.0.1",
|
||||
"@radix-ui/react-primitive": "1.0.3",
|
||||
"@radix-ui/react-slot": "1.0.2",
|
||||
"@radix-ui/react-use-controllable-state": "1.0.1",
|
||||
"@radix-ui/react-visually-hidden": "1.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
"react": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
|
|
@ -5157,340 +5156,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/primitive": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
|
||||
"integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-arrow": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
|
||||
"integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-primitive": "2.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-compose-refs": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
|
||||
"integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-context": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
|
||||
"integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-dismissable-layer": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
|
||||
"integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-escape-keydown": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-id": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
|
||||
"integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-popper": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
|
||||
"integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/react-dom": "^2.0.0",
|
||||
"@radix-ui/react-arrow": "1.1.7",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1",
|
||||
"@radix-ui/react-use-rect": "1.1.1",
|
||||
"@radix-ui/react-use-size": "1.1.1",
|
||||
"@radix-ui/rect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-portal": {
|
||||
"version": "1.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
|
||||
"integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-presence": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
|
||||
"integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-primitive": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
|
||||
"integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-callback-ref": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
|
||||
"integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-controllable-state": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
|
||||
"integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-use-effect-event": "0.0.2",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-escape-keydown": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
|
||||
"integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-layout-effect": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
|
||||
"integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-rect": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
|
||||
"integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/rect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-use-size": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
|
||||
"integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/rect": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
|
||||
"integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-callback-ref": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
|
||||
|
|
@ -5526,39 +5191,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-effect-event": {
|
||||
"version": "0.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
|
||||
"integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-effect-event/node_modules/@radix-ui/react-use-layout-effect": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
|
||||
"integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-escape-keydown": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
|
||||
|
|
@ -5646,18 +5278,18 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-visually-hidden": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
|
||||
"integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
|
||||
"license": "MIT",
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
|
||||
"integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-primitive": "2.1.3"
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@radix-ui/react-primitive": "1.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
"react": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
|
|
@ -5668,62 +5300,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-compose-refs": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
|
||||
"integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-primitive": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
|
||||
"integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-visually-hidden/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/rect": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
|
||||
|
|
@ -21156,74 +20732,6 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/motion": {
|
||||
"version": "12.23.24",
|
||||
"resolved": "https://registry.npmjs.org/motion/-/motion-12.23.24.tgz",
|
||||
"integrity": "sha512-Rc5E7oe2YZ72N//S3QXGzbnXgqNrTESv8KKxABR20q2FLch9gHLo0JLyYo2hZ238bZ9Gx6cWhj9VO0IgwbMjCw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"framer-motion": "^12.23.24",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/motion-dom": {
|
||||
"version": "12.23.23",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
|
||||
"integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-utils": "^12.23.6"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-utils": {
|
||||
"version": "12.23.6",
|
||||
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
|
||||
"integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/motion/node_modules/framer-motion": {
|
||||
"version": "12.23.24",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
|
||||
"integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-dom": "^12.23.23",
|
||||
"motion-utils": "^12.23.6",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/mrmime": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "moodist",
|
||||
"type": "module",
|
||||
"version": "2.4.0",
|
||||
"version": "2.1.0",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
"@radix-ui/react-checkbox": "1.1.4",
|
||||
"@radix-ui/react-dropdown-menu": "2.0.6",
|
||||
"@radix-ui/react-slider": "1.2.3",
|
||||
"@radix-ui/react-tooltip": "1.2.8",
|
||||
"@radix-ui/react-tooltip": "1.0.7",
|
||||
"@types/howler": "2.2.10",
|
||||
"@types/react": "^18.2.25",
|
||||
"@types/react-dom": "^18.2.10",
|
||||
|
|
@ -41,7 +41,6 @@
|
|||
"framer-motion": "10.16.4",
|
||||
"howler": "2.2.4",
|
||||
"js-confetti": "0.12.0",
|
||||
"motion": "12.23.24",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hotkeys-hook": "3.2.1",
|
||||
|
|
|
|||
BIN
public/sounds/silence.mp3
Normal file
BIN
public/sounds/silence.mp3
Normal file
Binary file not shown.
Binary file not shown.
|
|
@ -18,10 +18,6 @@
|
|||
background-color: var(--color-neutral-800);
|
||||
}
|
||||
|
||||
&:not(.disabled):active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
|
|
|
|||
|
|
@ -19,10 +19,6 @@
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background-color: var(--color-neutral-200);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useCallback } from 'react';
|
||||
import { BiUndo, BiTrash } from 'react-icons/bi/index';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
|
||||
import { Tooltip } from '@/components/tooltip';
|
||||
|
|
@ -41,8 +41,8 @@ export function UnselectButton() {
|
|||
initial="hidden"
|
||||
variants={variants}
|
||||
>
|
||||
<Tooltip.Provider delayDuration={0}>
|
||||
<Tooltip
|
||||
showDelay={0}
|
||||
content={
|
||||
hasHistory
|
||||
? 'Restore unselected sounds.'
|
||||
|
|
@ -65,7 +65,6 @@ export function UnselectButton() {
|
|||
{hasHistory ? <BiUndo /> : <BiTrash />}
|
||||
</button>
|
||||
</Tooltip>
|
||||
</Tooltip.Provider>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { AnimatePresence } from 'motion/react';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
|
||||
import { Category } from './category';
|
||||
import { Donate } from './donate';
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding-bottom: 80px;
|
||||
|
||||
& .title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--font-lg);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& .categoryIconsWrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& .icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: var(--font-md);
|
||||
color: var(--color-foreground);
|
||||
cursor: pointer;
|
||||
background: linear-gradient(
|
||||
var(--color-neutral-50),
|
||||
var(--color-neutral-100)
|
||||
);
|
||||
border: 1px solid var(--color-neutral-300);
|
||||
border-radius: 50%;
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(
|
||||
var(--color-neutral-100),
|
||||
var(--color-neutral-200)
|
||||
);
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import { sounds } from '@/data/sounds';
|
||||
import { useMemo } from 'react';
|
||||
import styles from './category-icons.module.css';
|
||||
import { Container } from '@/components/container';
|
||||
import { Tooltip } from '@/components/tooltip';
|
||||
|
||||
export default function CategoryIcons() {
|
||||
const categories = useMemo(() => sounds.categories, []);
|
||||
|
||||
const goto = (id: string) => {
|
||||
const category = document.getElementById(`category-${id}`);
|
||||
category?.scrollIntoView();
|
||||
};
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<div className={styles.wrapper}>
|
||||
<h3 className={styles.title}>Categories</h3>
|
||||
<div className={styles.categoryIconsWrapper}>
|
||||
<Tooltip.Provider delayDuration={0}>
|
||||
{categories.map(category => {
|
||||
return (
|
||||
<Tooltip
|
||||
content={category.title}
|
||||
key={category.id}
|
||||
placement="bottom"
|
||||
>
|
||||
<button
|
||||
className={styles.icon}
|
||||
onClick={() => goto(category.id)}
|
||||
>
|
||||
{category.icon}
|
||||
</button>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</Tooltip.Provider>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
@ -38,7 +38,7 @@ import { Container } from './container';
|
|||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--color-neutral-400),
|
||||
var(--color-neutral-200),
|
||||
transparent
|
||||
);
|
||||
transform: translateX(-50%);
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { BsSoundwave } from 'react-icons/bs/index';
|
||||
|
||||
import { Container } from './container';
|
||||
import { CipherText } from './cipher';
|
||||
|
||||
import { count as soundCount } from '@/lib/sounds';
|
||||
|
||||
|
|
@ -26,7 +27,9 @@ const count = soundCount();
|
|||
<h1 class="title">
|
||||
Ambient Sounds<span class="line">For Focus and Calm</span>
|
||||
</h1>
|
||||
<h2 class="desc">Free and Open-Source.</h2>
|
||||
<h2 class="desc">
|
||||
Free and <CipherText client:load text="Open-Source" />.
|
||||
</h2>
|
||||
|
||||
<p class="sounds">
|
||||
<span aria-hidden="true" class="icon">
|
||||
|
|
@ -61,20 +64,6 @@ const count = soundCount();
|
|||
background-size: 21px 21px;
|
||||
opacity: 0.8;
|
||||
mask-image: linear-gradient(#fff, transparent, transparent);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
content: '';
|
||||
background: var(--color-neutral-200);
|
||||
filter: blur(50px);
|
||||
border-radius: 100%;
|
||||
opacity: 0.8;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -97,7 +86,17 @@ const count = soundCount();
|
|||
font-family: var(--font-display);
|
||||
font-size: var(--font-xlg);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
line-height: 1;
|
||||
|
||||
/* & .gradient {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--color-foreground),
|
||||
var(--color-foreground-subtle)
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
} */
|
||||
|
||||
& .line {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useCallback, useEffect, useRef } from 'react';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { BrowserDetect } from '@/helpers/browser-detect';
|
||||
|
||||
|
|
@ -15,14 +15,23 @@ const metadata: MediaMetadataInit = {
|
|||
export function MediaSessionTrack() {
|
||||
const { isBrowser } = useSSR();
|
||||
const isDarkTheme = useDarkTheme();
|
||||
const [isGenerated, setIsGenerated] = useState(false);
|
||||
const isPlaying = useSoundStore(state => state.isPlaying);
|
||||
const play = useSoundStore(state => state.play);
|
||||
const pause = useSoundStore(state => state.pause);
|
||||
const masterAudioSoundRef = useRef<HTMLAudioElement>(null);
|
||||
const artworkURL = isDarkTheme ? '/logo-dark.png' : '/logo-light.png';
|
||||
|
||||
const generateSilence = useCallback(async () => {
|
||||
if (!masterAudioSoundRef.current) return;
|
||||
|
||||
masterAudioSoundRef.current.src = '/sounds/silence.mp3';
|
||||
|
||||
setIsGenerated(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isBrowser || !isPlaying) return;
|
||||
if (!isBrowser || !isPlaying || !isGenerated) return;
|
||||
|
||||
navigator.mediaSession.metadata = new MediaMetadata({
|
||||
...metadata,
|
||||
|
|
@ -34,7 +43,11 @@ export function MediaSessionTrack() {
|
|||
},
|
||||
],
|
||||
});
|
||||
}, [artworkURL, isBrowser, isDarkTheme, isPlaying]);
|
||||
}, [artworkURL, isBrowser, isDarkTheme, isGenerated, isPlaying]);
|
||||
|
||||
useEffect(() => {
|
||||
generateSilence();
|
||||
}, [generateSilence]);
|
||||
|
||||
const startMasterAudio = useCallback(async () => {
|
||||
if (!masterAudioSoundRef.current) return;
|
||||
|
|
@ -66,6 +79,7 @@ export function MediaSessionTrack() {
|
|||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isGenerated) return;
|
||||
if (!masterAudioSoundRef.current) return;
|
||||
|
||||
if (isPlaying) {
|
||||
|
|
@ -73,7 +87,7 @@ export function MediaSessionTrack() {
|
|||
} else {
|
||||
stopMasterAudio();
|
||||
}
|
||||
}, [isPlaying, startMasterAudio, stopMasterAudio]);
|
||||
}, [isGenerated, isPlaying, startMasterAudio, stopMasterAudio]);
|
||||
|
||||
useEffect(() => {
|
||||
const masterAudioSound = masterAudioSoundRef.current;
|
||||
|
|
@ -87,12 +101,5 @@ export function MediaSessionTrack() {
|
|||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<audio
|
||||
id="media-session-track"
|
||||
loop
|
||||
ref={masterAudioSoundRef}
|
||||
src="/sounds/silence.wav"
|
||||
/>
|
||||
);
|
||||
return <audio id="media-session-track" loop ref={masterAudioSoundRef} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useEffect } from 'react';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { IoClose } from 'react-icons/io5/index';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useState, useEffect, useMemo, useCallback } from 'react';
|
||||
import { motion } from 'motion/react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import { padNumber } from '@/helpers/number';
|
||||
|
||||
|
|
|
|||
|
|
@ -9,8 +9,7 @@ export function Shuffle() {
|
|||
const shuffle = useSoundStore(state => state.shuffle);
|
||||
|
||||
return (
|
||||
<Tooltip.Provider delayDuration={0}>
|
||||
<Tooltip content="Shuffle sounds">
|
||||
<Tooltip content="Shuffle sounds" showDelay={0}>
|
||||
<button
|
||||
aria-label="Shuffle sounds"
|
||||
className={styles.button}
|
||||
|
|
@ -19,6 +18,5 @@ export function Shuffle() {
|
|||
<BiShuffle />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</Tooltip.Provider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
margin: 0 auto;
|
||||
font-size: var(--font-sm);
|
||||
pointer-events: fill;
|
||||
background-color: var(--color-neutral-100);
|
||||
background-color: var(--color-neutral-200);
|
||||
border: 1px solid var(--color-neutral-300);
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { motion } from 'motion/react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import { mix, fade, slideY } from '@/lib/motion';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { BiHeart, BiSolidHeart } from 'react-icons/bi/index';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
|
||||
import { useSoundStore } from '@/stores/sound';
|
||||
import { cn } from '@/helpers/styles';
|
||||
|
|
|
|||
|
|
@ -6,10 +6,9 @@
|
|||
justify-content: center;
|
||||
padding: 25px 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(rgb(24 24 27 / 50%), transparent);
|
||||
background: linear-gradient(var(--color-neutral-100), transparent);
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
transition: 0.2s;
|
||||
|
||||
&:focus-visible {
|
||||
|
|
@ -108,6 +107,7 @@
|
|||
font-size: var(--font-sm);
|
||||
font-weight: 600;
|
||||
line-height: 1.6;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
|
||||
import { Sound } from './sound';
|
||||
import { useLocalStorage } from '@/hooks/use-local-storage';
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { IoIosMusicalNote } from 'react-icons/io/index';
|
||||
import { FaHeadphonesAlt } from 'react-icons/fa/index';
|
||||
|
||||
import { Item } from '../item';
|
||||
|
||||
|
|
@ -7,11 +7,5 @@ interface LofiProps {
|
|||
}
|
||||
|
||||
export function Lofi({ open }: LofiProps) {
|
||||
return (
|
||||
<Item
|
||||
icon={<IoIosMusicalNote />}
|
||||
label="Lofi Music Player"
|
||||
onClick={open}
|
||||
/>
|
||||
);
|
||||
return <Item icon={<FaHeadphonesAlt />} label="Lofi Music" onClick={open} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { useState, useMemo, useCallback } from 'react';
|
|||
import { IoMenu, IoClose } from 'react-icons/io5/index';
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
|
||||
import {
|
||||
ShuffleItem,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { BiUpArrowAlt } from 'react-icons/bi/index';
|
||||
import { motion } from 'motion/react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
import { mix, fade, slideY } from '@/lib/motion';
|
||||
|
||||
|
|
@ -30,20 +30,22 @@ export function ScrollToTop() {
|
|||
const variants = mix(fade(), slideY(10, 0));
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isVisible ? (
|
||||
<motion.button
|
||||
animate={isVisible ? 'show' : 'hidden'}
|
||||
animate="show"
|
||||
aria-label="Scroll to top"
|
||||
className={styles.button}
|
||||
exit="hidden"
|
||||
initial="hidden"
|
||||
variants={variants}
|
||||
style={{
|
||||
pointerEvents: isVisible ? 'auto' : 'none',
|
||||
visibility: isVisible ? 'visible' : 'hidden',
|
||||
}}
|
||||
onClick={scrollToTop}
|
||||
>
|
||||
<BiUpArrowAlt />
|
||||
</motion.button>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,8 +20,7 @@ export function Button({
|
|||
tooltip,
|
||||
}: ButtonProps) {
|
||||
return (
|
||||
<Tooltip.Provider delayDuration={0}>
|
||||
<Tooltip content={tooltip} placement="bottom">
|
||||
<Tooltip content={tooltip} placement="bottom" showDelay={0}>
|
||||
<button
|
||||
className={cn(styles.button, smallIcon && styles.smallIcon)}
|
||||
disabled={disabled}
|
||||
|
|
@ -30,6 +29,5 @@ export function Button({
|
|||
{icon}
|
||||
</button>
|
||||
</Tooltip>
|
||||
</Tooltip.Provider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export function Button({
|
|||
tooltip,
|
||||
}: ButtonProps) {
|
||||
return (
|
||||
<Tooltip content={tooltip} placement="bottom">
|
||||
<Tooltip content={tooltip} placement="bottom" showDelay={0}>
|
||||
<button
|
||||
className={cn(
|
||||
styles.button,
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
height: 350px;
|
||||
padding: 12px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-foreground);
|
||||
color: var(--color-foreground-subtle);
|
||||
resize: none;
|
||||
background-color: var(--color-neutral-50);
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import { useCopy } from '@/hooks/use-copy';
|
|||
import { download } from '@/helpers/download';
|
||||
|
||||
import styles from './notepad.module.css';
|
||||
import { Tooltip } from '@/components/tooltip';
|
||||
|
||||
interface NotepadProps {
|
||||
onClose: () => void;
|
||||
|
|
@ -51,7 +50,6 @@ export function Notepad({ onClose, show }: NotepadProps) {
|
|||
<header className={styles.header}>
|
||||
<h2 className={styles.label}>Your Note</h2>
|
||||
<div className={styles.buttons}>
|
||||
<Tooltip.Provider delayDuration={0}>
|
||||
<Button
|
||||
icon={copying ? <FaCheck /> : <LuCopy />}
|
||||
tooltip="Copy Note"
|
||||
|
|
@ -69,7 +67,6 @@ export function Notepad({ onClose, show }: NotepadProps) {
|
|||
tooltip={history ? 'Restore Note' : 'Clear Note'}
|
||||
onClick={() => (history ? restore() : clear())}
|
||||
/>
|
||||
</Tooltip.Provider>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
||||
|
||||
import { slideX, slideY, mix, fade } from '@/lib/motion';
|
||||
|
|
@ -24,12 +24,14 @@ interface TooltipProps {
|
|||
children: JSX.Element;
|
||||
content: string;
|
||||
placement?: Placement;
|
||||
showDelay?: number;
|
||||
}
|
||||
|
||||
export function Tooltip({
|
||||
children,
|
||||
content,
|
||||
placement = 'top',
|
||||
showDelay = 500,
|
||||
}: TooltipProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
|
|
@ -50,6 +52,7 @@ export function Tooltip({
|
|||
const variants = mix(fade(), slide!);
|
||||
|
||||
return (
|
||||
<TooltipPrimitive.Provider delayDuration={showDelay}>
|
||||
<TooltipPrimitive.Root open={isOpen} onOpenChange={o => setIsOpen(o)}>
|
||||
<TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
|
||||
|
||||
|
|
@ -78,28 +81,6 @@ export function Tooltip({
|
|||
)}
|
||||
</AnimatePresence>
|
||||
</TooltipPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
interface TooltipProviderProps {
|
||||
children: React.ReactNode;
|
||||
delayDuration?: number;
|
||||
skipDelayDuration?: number;
|
||||
}
|
||||
|
||||
function Provider({
|
||||
children,
|
||||
delayDuration = 500,
|
||||
skipDelayDuration = 0,
|
||||
}: TooltipProviderProps) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider
|
||||
delayDuration={delayDuration}
|
||||
skipDelayDuration={skipDelayDuration}
|
||||
>
|
||||
{children}
|
||||
</TooltipPrimitive.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
Tooltip.Provider = Provider;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {
|
|||
useRef,
|
||||
useContext,
|
||||
} from 'react';
|
||||
import { AnimatePresence } from 'motion/react';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
|
||||
import { Snackbar } from '@/components/snackbar';
|
||||
|
||||
|
|
|
|||
|
|
@ -21,8 +21,6 @@ import { PiBirdFill, PiDogBold } from 'react-icons/pi/index';
|
|||
|
||||
import type { Category } from '../types';
|
||||
|
||||
import { getAssetPath } from '@/helpers/path';
|
||||
|
||||
export const animals: Category = {
|
||||
icon: <FaDog />,
|
||||
id: 'animals',
|
||||
|
|
@ -31,97 +29,97 @@ export const animals: Category = {
|
|||
icon: <PiBirdFill />,
|
||||
id: 'birds',
|
||||
label: 'Birds',
|
||||
src: getAssetPath('/sounds/animals/birds.mp3'),
|
||||
src: '/sounds/animals/birds.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiSeagull />,
|
||||
id: 'seagulls',
|
||||
label: 'Seagulls',
|
||||
src: getAssetPath('/sounds/animals/seagulls.mp3'),
|
||||
src: '/sounds/animals/seagulls.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiCricket />,
|
||||
id: 'crickets',
|
||||
label: 'Crickets',
|
||||
src: getAssetPath('/sounds/animals/crickets.mp3'),
|
||||
src: '/sounds/animals/crickets.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiWolfHead />,
|
||||
id: 'wolf',
|
||||
label: 'Wolf',
|
||||
src: getAssetPath('/sounds/animals/wolf.mp3'),
|
||||
src: '/sounds/animals/wolf.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiOwl />,
|
||||
id: 'owl',
|
||||
label: 'Owl',
|
||||
src: getAssetPath('/sounds/animals/owl.mp3'),
|
||||
src: '/sounds/animals/owl.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaFrog />,
|
||||
id: 'frog',
|
||||
label: 'Frog',
|
||||
src: getAssetPath('/sounds/animals/frog.mp3'),
|
||||
src: '/sounds/animals/frog.mp3',
|
||||
},
|
||||
{
|
||||
icon: <PiDogBold />,
|
||||
id: 'dog-barking',
|
||||
label: 'Dog Barking',
|
||||
src: getAssetPath('/sounds/animals/dog-barking.mp3'),
|
||||
src: '/sounds/animals/dog-barking.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaHorseHead />,
|
||||
id: 'horse-gallop',
|
||||
label: 'Horse Gallop',
|
||||
src: getAssetPath('/sounds/animals/horse-gallop.mp3'),
|
||||
id: 'horse-galopp',
|
||||
label: 'Horse Galopp',
|
||||
src: '/sounds/animals/horse-galopp.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaCat />,
|
||||
id: 'cat-purring',
|
||||
label: 'Cat Purring',
|
||||
src: getAssetPath('/sounds/animals/cat-purring.mp3'),
|
||||
src: '/sounds/animals/cat-purring.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaCrow />,
|
||||
id: 'crows',
|
||||
label: 'Crows',
|
||||
src: getAssetPath('/sounds/animals/crows.mp3'),
|
||||
src: '/sounds/animals/crows.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiWhaleTail />,
|
||||
id: 'whale',
|
||||
label: 'Whale',
|
||||
src: getAssetPath('/sounds/animals/whale.mp3'),
|
||||
src: '/sounds/animals/whale.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiTreeBeehive />,
|
||||
id: 'beehive',
|
||||
label: 'Beehive',
|
||||
src: getAssetPath('/sounds/animals/beehive.mp3'),
|
||||
src: '/sounds/animals/beehive.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiEgyptianBird />,
|
||||
id: 'woodpecker',
|
||||
label: 'Woodpecker',
|
||||
src: getAssetPath('/sounds/animals/woodpecker.mp3'),
|
||||
src: '/sounds/animals/woodpecker.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiChicken />,
|
||||
id: 'chickens',
|
||||
label: 'Chickens',
|
||||
src: getAssetPath('/sounds/animals/chickens.mp3'),
|
||||
src: '/sounds/animals/chickens.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiCow />,
|
||||
id: 'cows',
|
||||
label: 'Cows',
|
||||
src: getAssetPath('/sounds/animals/cows.mp3'),
|
||||
src: '/sounds/animals/cows.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiSheep />,
|
||||
id: 'sheep',
|
||||
label: 'Sheep',
|
||||
src: getAssetPath('/sounds/animals/sheep.mp3'),
|
||||
src: '/sounds/animals/sheep.mp3',
|
||||
},
|
||||
],
|
||||
title: 'Animals',
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@ import { BsSoundwave } from 'react-icons/bs/index';
|
|||
|
||||
import type { Category } from '../types';
|
||||
|
||||
import { getAssetPath } from '@/helpers/path';
|
||||
|
||||
export const binaural: Category = {
|
||||
icon: <TbWaveSine />,
|
||||
id: 'binaural',
|
||||
|
|
@ -13,31 +11,31 @@ export const binaural: Category = {
|
|||
icon: <BsSoundwave />,
|
||||
id: 'binaural-delta',
|
||||
label: 'Delta',
|
||||
src: getAssetPath('/sounds/binaural/binaural-delta.wav'),
|
||||
src: '/sounds/binaural/binaural-delta.wav',
|
||||
},
|
||||
{
|
||||
icon: <BsSoundwave />,
|
||||
id: 'binaural-theta',
|
||||
label: 'Theta',
|
||||
src: getAssetPath('/sounds/binaural/binaural-theta.wav'),
|
||||
src: '/sounds/binaural/binaural-theta.wav',
|
||||
},
|
||||
{
|
||||
icon: <BsSoundwave />,
|
||||
id: 'binaural-alpha',
|
||||
label: 'Alpha',
|
||||
src: getAssetPath('/sounds/binaural/binaural-alpha.wav'),
|
||||
src: '/sounds/binaural/binaural-alpha.wav',
|
||||
},
|
||||
{
|
||||
icon: <BsSoundwave />,
|
||||
id: 'binaural-beta',
|
||||
label: 'Beta',
|
||||
src: getAssetPath('/sounds/binaural/binaural-beta.wav'),
|
||||
src: '/sounds/binaural/binaural-beta.wav',
|
||||
},
|
||||
{
|
||||
icon: <BsSoundwave />,
|
||||
id: 'binaural-gamma',
|
||||
label: 'Gamma',
|
||||
src: getAssetPath('/sounds/binaural/binaural-gamma.wav'),
|
||||
src: '/sounds/binaural/binaural-gamma.wav',
|
||||
},
|
||||
],
|
||||
title: 'Binaural Beats',
|
||||
|
|
|
|||
|
|
@ -11,8 +11,6 @@ import {
|
|||
|
||||
import type { Category } from '../types';
|
||||
|
||||
import { getAssetPath } from '@/helpers/path';
|
||||
|
||||
export const nature: Category = {
|
||||
icon: <BiSolidTree />,
|
||||
id: 'nature',
|
||||
|
|
@ -21,73 +19,73 @@ export const nature: Category = {
|
|||
icon: <BiWater />,
|
||||
id: 'river',
|
||||
label: 'River',
|
||||
src: getAssetPath('/sounds/nature/river.mp3'),
|
||||
src: '/sounds/nature/river.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaWater />,
|
||||
id: 'waves',
|
||||
label: 'Waves',
|
||||
src: getAssetPath('/sounds/nature/waves.mp3'),
|
||||
src: '/sounds/nature/waves.mp3',
|
||||
},
|
||||
{
|
||||
icon: <BsFire />,
|
||||
id: 'campfire',
|
||||
label: 'Campfire',
|
||||
src: getAssetPath('/sounds/nature/campfire.mp3'),
|
||||
src: '/sounds/nature/campfire.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaWind />,
|
||||
id: 'wind',
|
||||
label: 'Wind',
|
||||
src: getAssetPath('/sounds/nature/wind.mp3'),
|
||||
src: '/sounds/nature/wind.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaWind />,
|
||||
id: 'howling-wind',
|
||||
label: 'Howling Wind',
|
||||
src: getAssetPath('/sounds/nature/howling-wind.mp3'),
|
||||
src: '/sounds/nature/howling-wind.mp3',
|
||||
},
|
||||
{
|
||||
icon: <BiSolidTree />,
|
||||
id: 'wind-in-trees',
|
||||
label: 'Wind in Trees',
|
||||
src: getAssetPath('/sounds/nature/wind-in-trees.mp3'),
|
||||
src: '/sounds/nature/wind-in-trees.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiWaterfall />,
|
||||
id: 'waterfall',
|
||||
label: 'Waterfall',
|
||||
src: getAssetPath('/sounds/nature/waterfall.mp3'),
|
||||
src: '/sounds/nature/waterfall.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaRegSnowflake />,
|
||||
id: 'walk-in-snow',
|
||||
label: 'Walk in Snow',
|
||||
src: getAssetPath('/sounds/nature/walk-in-snow.mp3'),
|
||||
src: '/sounds/nature/walk-in-snow.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaLeaf />,
|
||||
id: 'walk-on-leaves',
|
||||
label: 'Walk on Leaves',
|
||||
src: getAssetPath('/sounds/nature/walk-on-leaves.mp3'),
|
||||
src: '/sounds/nature/walk-on-leaves.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiStonePile />,
|
||||
id: 'walk-on-gravel',
|
||||
label: 'Walk on Gravel',
|
||||
src: getAssetPath('/sounds/nature/walk-on-gravel.mp3'),
|
||||
src: '/sounds/nature/walk-on-gravel.mp3',
|
||||
},
|
||||
{
|
||||
icon: <BsFillDropletFill />,
|
||||
id: 'droplets',
|
||||
label: 'Droplets',
|
||||
src: getAssetPath('/sounds/nature/droplets.mp3'),
|
||||
src: '/sounds/nature/droplets.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaTree />,
|
||||
id: 'jungle',
|
||||
label: 'Jungle',
|
||||
src: getAssetPath('/sounds/nature/jungle.mp3'),
|
||||
src: '/sounds/nature/jungle.mp3',
|
||||
},
|
||||
],
|
||||
title: 'Nature',
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@ import { BsSoundwave } from 'react-icons/bs/index';
|
|||
|
||||
import type { Category } from '../types';
|
||||
|
||||
import { getAssetPath } from '@/helpers/path';
|
||||
|
||||
export const noise: Category = {
|
||||
icon: <BsSoundwave />,
|
||||
id: 'noise',
|
||||
|
|
@ -13,19 +11,19 @@ export const noise: Category = {
|
|||
icon: <GiSoundWaves />,
|
||||
id: 'white-noise',
|
||||
label: 'White Noise',
|
||||
src: getAssetPath('/sounds/noise/white-noise.wav'),
|
||||
src: '/sounds/noise/white-noise.wav',
|
||||
},
|
||||
{
|
||||
icon: <GiSoundWaves />,
|
||||
id: 'pink-noise',
|
||||
label: 'Pink Noise',
|
||||
src: getAssetPath('/sounds/noise/pink-noise.wav'),
|
||||
src: '/sounds/noise/pink-noise.wav',
|
||||
},
|
||||
{
|
||||
icon: <GiSoundWaves />,
|
||||
id: 'brown-noise',
|
||||
label: 'Brown Noise',
|
||||
src: getAssetPath('/sounds/noise/brown-noise.wav'),
|
||||
src: '/sounds/noise/brown-noise.wav',
|
||||
},
|
||||
],
|
||||
title: 'Noise',
|
||||
|
|
|
|||
|
|
@ -18,8 +18,6 @@ import { FaBookOpen } from 'react-icons/fa6/index';
|
|||
|
||||
import type { Category } from '../types';
|
||||
|
||||
import { getAssetPath } from '@/helpers/path';
|
||||
|
||||
export const places: Category = {
|
||||
icon: <MdLocationPin />,
|
||||
id: 'places',
|
||||
|
|
@ -28,97 +26,97 @@ export const places: Category = {
|
|||
icon: <BiSolidCoffeeAlt />,
|
||||
id: 'cafe',
|
||||
label: 'Cafe',
|
||||
src: getAssetPath('/sounds/places/cafe.mp3'),
|
||||
src: '/sounds/places/cafe.mp3',
|
||||
},
|
||||
{
|
||||
icon: <BiSolidPlaneAlt />,
|
||||
id: 'airport',
|
||||
label: 'Airport',
|
||||
src: getAssetPath('/sounds/places/airport.mp3'),
|
||||
src: '/sounds/places/airport.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaChurch />,
|
||||
id: 'church',
|
||||
label: 'Church',
|
||||
src: getAssetPath('/sounds/places/church.mp3'),
|
||||
src: '/sounds/places/church.mp3',
|
||||
},
|
||||
{
|
||||
icon: <MdTempleBuddhist />,
|
||||
id: 'temple',
|
||||
label: 'Temple',
|
||||
src: getAssetPath('/sounds/places/temple.mp3'),
|
||||
src: '/sounds/places/temple.mp3',
|
||||
},
|
||||
{
|
||||
icon: <MdConstruction />,
|
||||
id: 'construction-site',
|
||||
label: 'Construction Site',
|
||||
src: getAssetPath('/sounds/places/construction-site.mp3'),
|
||||
src: '/sounds/places/construction-site.mp3',
|
||||
},
|
||||
{
|
||||
icon: <TbScubaMask />,
|
||||
id: 'underwater',
|
||||
label: 'Underwater',
|
||||
src: getAssetPath('/sounds/places/underwater.mp3'),
|
||||
src: '/sounds/places/underwater.mp3',
|
||||
},
|
||||
{
|
||||
icon: <TbBeerFilled />,
|
||||
id: 'crowded-bar',
|
||||
label: 'Crowded Bar',
|
||||
src: getAssetPath('/sounds/places/crowded-bar.mp3'),
|
||||
src: '/sounds/places/crowded-bar.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiVillage />,
|
||||
id: 'night-village',
|
||||
label: 'Night Village',
|
||||
src: getAssetPath('/sounds/places/night-village.mp3'),
|
||||
src: '/sounds/places/night-village.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaSubway />,
|
||||
id: 'subway-station',
|
||||
label: 'Subway Station',
|
||||
src: getAssetPath('/sounds/places/subway-station.mp3'),
|
||||
src: '/sounds/places/subway-station.mp3',
|
||||
},
|
||||
{
|
||||
icon: <HiOfficeBuilding />,
|
||||
id: 'office',
|
||||
label: 'Office',
|
||||
src: getAssetPath('/sounds/places/office.mp3'),
|
||||
src: '/sounds/places/office.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaShoppingBasket />,
|
||||
id: 'supermarket',
|
||||
label: 'Supermarket',
|
||||
src: getAssetPath('/sounds/places/supermarket.mp3'),
|
||||
src: '/sounds/places/supermarket.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiCarousel />,
|
||||
id: 'carousel',
|
||||
label: 'Carousel',
|
||||
src: getAssetPath('/sounds/places/carousel.mp3'),
|
||||
src: '/sounds/places/carousel.mp3',
|
||||
},
|
||||
{
|
||||
icon: <AiFillExperiment />,
|
||||
id: 'laboratory',
|
||||
label: 'Laboratory',
|
||||
src: getAssetPath('/sounds/places/laboratory.mp3'),
|
||||
src: '/sounds/places/laboratory.mp3',
|
||||
},
|
||||
{
|
||||
icon: <BiSolidDryer />,
|
||||
id: 'laundry-room',
|
||||
label: 'Laundry Room',
|
||||
src: getAssetPath('/sounds/places/laundry-room.mp3'),
|
||||
src: '/sounds/places/laundry-room.mp3',
|
||||
},
|
||||
{
|
||||
icon: <IoRestaurant />,
|
||||
id: 'restaurant',
|
||||
label: 'Restaurant',
|
||||
src: getAssetPath('/sounds/places/restaurant.mp3'),
|
||||
src: '/sounds/places/restaurant.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaBookOpen />,
|
||||
id: 'library',
|
||||
label: 'Library',
|
||||
src: getAssetPath('/sounds/places/library.mp3'),
|
||||
src: '/sounds/places/library.mp3',
|
||||
},
|
||||
],
|
||||
title: 'Places',
|
||||
|
|
|
|||
|
|
@ -10,8 +10,6 @@ import { MdOutlineThunderstorm } from 'react-icons/md/index';
|
|||
|
||||
import type { Category } from '../types';
|
||||
|
||||
import { getAssetPath } from '@/helpers/path';
|
||||
|
||||
export const rain: Category = {
|
||||
icon: <BsFillCloudRainFill />,
|
||||
id: 'rain',
|
||||
|
|
@ -20,49 +18,49 @@ export const rain: Category = {
|
|||
icon: <BsFillCloudRainFill />,
|
||||
id: 'light-rain',
|
||||
label: 'Light Rain',
|
||||
src: getAssetPath('/sounds/rain/light-rain.mp3'),
|
||||
src: '/sounds/rain/light-rain.mp3',
|
||||
},
|
||||
{
|
||||
icon: <BsFillCloudRainHeavyFill />,
|
||||
id: 'heavy-rain',
|
||||
label: 'Heavy Rain',
|
||||
src: getAssetPath('/sounds/rain/heavy-rain.mp3'),
|
||||
src: '/sounds/rain/heavy-rain.mp3',
|
||||
},
|
||||
{
|
||||
icon: <MdOutlineThunderstorm />,
|
||||
id: 'thunder',
|
||||
label: 'Thunder',
|
||||
src: getAssetPath('/sounds/rain/thunder.mp3'),
|
||||
src: '/sounds/rain/thunder.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiWindow />,
|
||||
id: 'rain-on-window',
|
||||
label: 'Rain on Window',
|
||||
src: getAssetPath('/sounds/rain/rain-on-window.mp3'),
|
||||
src: '/sounds/rain/rain-on-window.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaCarSide />,
|
||||
id: 'rain-on-car-roof',
|
||||
label: 'Rain on Car Roof',
|
||||
src: getAssetPath('/sounds/rain/rain-on-car-roof.mp3'),
|
||||
src: '/sounds/rain/rain-on-car-roof.mp3',
|
||||
},
|
||||
{
|
||||
icon: <BsUmbrellaFill />,
|
||||
id: 'rain-on-umbrella',
|
||||
label: 'Rain on Umbrella',
|
||||
src: getAssetPath('/sounds/rain/rain-on-umbrella.mp3'),
|
||||
src: '/sounds/rain/rain-on-umbrella.mp3',
|
||||
},
|
||||
{
|
||||
icon: <PiTentFill />,
|
||||
id: 'rain-on-tent',
|
||||
label: 'Rain on Tent',
|
||||
src: getAssetPath('/sounds/rain/rain-on-tent.mp3'),
|
||||
src: '/sounds/rain/rain-on-tent.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaLeaf />,
|
||||
id: 'rain-on-leaves',
|
||||
label: 'Rain on Leaves',
|
||||
src: getAssetPath('/sounds/rain/rain-on-leaves.mp3'),
|
||||
src: '/sounds/rain/rain-on-leaves.mp3',
|
||||
},
|
||||
],
|
||||
title: 'Rain',
|
||||
|
|
|
|||
|
|
@ -14,8 +14,6 @@ import { PiVinylRecord } from 'react-icons/pi/index';
|
|||
|
||||
import type { Category } from '../types';
|
||||
|
||||
import { getAssetPath } from '@/helpers/path';
|
||||
|
||||
export const things: Category = {
|
||||
icon: <MdSmartToy />,
|
||||
id: 'things',
|
||||
|
|
@ -24,97 +22,97 @@ export const things: Category = {
|
|||
icon: <BsFillKeyboardFill />,
|
||||
id: 'keyboard',
|
||||
label: 'Keyboard',
|
||||
src: getAssetPath('/sounds/things/keyboard.mp3'),
|
||||
src: '/sounds/things/keyboard.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaKeyboard />,
|
||||
id: 'typewriter',
|
||||
label: 'Typewriter',
|
||||
src: getAssetPath('/sounds/things/typewriter.mp3'),
|
||||
src: '/sounds/things/typewriter.mp3',
|
||||
},
|
||||
{
|
||||
icon: <RiFilePaper2Fill />,
|
||||
id: 'paper',
|
||||
label: 'Paper',
|
||||
src: getAssetPath('/sounds/things/paper.mp3'),
|
||||
src: '/sounds/things/paper.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaClock />,
|
||||
id: 'clock',
|
||||
label: 'Clock',
|
||||
src: getAssetPath('/sounds/things/clock.mp3'),
|
||||
src: '/sounds/things/clock.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiWindchimes />,
|
||||
id: 'wind-chimes',
|
||||
label: 'Wind Chimes',
|
||||
src: getAssetPath('/sounds/things/wind-chimes.mp3'),
|
||||
src: '/sounds/things/wind-chimes.mp3',
|
||||
},
|
||||
{
|
||||
icon: <TbBowlFilled />,
|
||||
id: 'singing-bowl',
|
||||
label: 'Singing Bowl',
|
||||
src: getAssetPath('/sounds/things/singing-bowl.mp3'),
|
||||
src: '/sounds/things/singing-bowl.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaFan />,
|
||||
id: 'ceiling-fan',
|
||||
label: 'Ceiling Fan',
|
||||
src: getAssetPath('/sounds/things/ceiling-fan.mp3'),
|
||||
src: '/sounds/things/ceiling-fan.mp3',
|
||||
},
|
||||
{
|
||||
icon: <BiSolidDryer />,
|
||||
id: 'dryer',
|
||||
label: 'Dryer',
|
||||
src: getAssetPath('/sounds/things/dryer.mp3'),
|
||||
src: '/sounds/things/dryer.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiFilmProjector />,
|
||||
id: 'slide-projector',
|
||||
label: 'Slide Projector',
|
||||
src: getAssetPath('/sounds/things/slide-projector.mp3'),
|
||||
src: '/sounds/things/slide-projector.mp3',
|
||||
},
|
||||
{
|
||||
icon: <MdWaterDrop />,
|
||||
id: 'boiling-water',
|
||||
label: 'Boiling Water',
|
||||
src: getAssetPath('/sounds/things/boiling-water.mp3'),
|
||||
src: '/sounds/things/boiling-water.mp3',
|
||||
},
|
||||
{
|
||||
icon: <RiBubbleChartFill />,
|
||||
id: 'bubbles',
|
||||
label: 'Bubbles',
|
||||
src: getAssetPath('/sounds/things/bubbles.mp3'),
|
||||
src: '/sounds/things/bubbles.mp3',
|
||||
},
|
||||
{
|
||||
icon: <MdRadio />,
|
||||
id: 'tuning-radio',
|
||||
label: 'Tuning Radio',
|
||||
src: getAssetPath('/sounds/things/tuning-radio.mp3'),
|
||||
src: '/sounds/things/tuning-radio.mp3',
|
||||
},
|
||||
{
|
||||
icon: <IoIosRadio />,
|
||||
id: 'morse-code',
|
||||
label: 'Morse Code',
|
||||
src: getAssetPath('/sounds/things/morse-code.mp3'),
|
||||
src: '/sounds/things/morse-code.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiWashingMachine />,
|
||||
id: 'washing-machine',
|
||||
label: 'Washing Machine',
|
||||
src: getAssetPath('/sounds/things/washing-machine.mp3'),
|
||||
src: '/sounds/things/washing-machine.mp3',
|
||||
},
|
||||
{
|
||||
icon: <PiVinylRecord />,
|
||||
id: 'vinyl-effect',
|
||||
label: 'Vinyl Effect',
|
||||
src: getAssetPath('/sounds/things/vinyl-effect.mp3'),
|
||||
src: '/sounds/things/vinyl-effect.mp3',
|
||||
},
|
||||
{
|
||||
icon: <TbWiper />,
|
||||
id: 'windshield-wipers',
|
||||
label: 'Windshield Wipers',
|
||||
src: getAssetPath('/sounds/things/windshield-wipers.mp3'),
|
||||
src: '/sounds/things/windshield-wipers.mp3',
|
||||
},
|
||||
],
|
||||
title: 'Things',
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@ import { TbSailboat } from 'react-icons/tb/index';
|
|||
|
||||
import type { Category } from '../types';
|
||||
|
||||
import { getAssetPath } from '@/helpers/path';
|
||||
|
||||
export const transport: Category = {
|
||||
icon: <FaCarSide />,
|
||||
id: 'transport',
|
||||
|
|
@ -15,37 +13,37 @@ export const transport: Category = {
|
|||
icon: <BiSolidTrain />,
|
||||
id: 'train',
|
||||
label: 'Train',
|
||||
src: getAssetPath('/sounds/transport/train.mp3'),
|
||||
src: '/sounds/transport/train.mp3',
|
||||
},
|
||||
{
|
||||
icon: <BiSolidTrain />,
|
||||
id: 'inside-a-train',
|
||||
label: 'Inside a Train',
|
||||
src: getAssetPath('/sounds/transport/inside-a-train.mp3'),
|
||||
src: '/sounds/transport/inside-a-train.mp3',
|
||||
},
|
||||
{
|
||||
icon: <BiSolidPlaneAlt />,
|
||||
id: 'airplane',
|
||||
label: 'Airplane',
|
||||
src: getAssetPath('/sounds/transport/airplane.mp3'),
|
||||
src: '/sounds/transport/airplane.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiSubmarine />,
|
||||
id: 'submarine',
|
||||
label: 'Submarine',
|
||||
src: getAssetPath('/sounds/transport/submarine.mp3'),
|
||||
src: '/sounds/transport/submarine.mp3',
|
||||
},
|
||||
{
|
||||
icon: <GiSailboat />,
|
||||
id: 'sailboat',
|
||||
label: 'Sailboat',
|
||||
src: getAssetPath('/sounds/transport/sailboat.mp3'),
|
||||
src: '/sounds/transport/sailboat.mp3',
|
||||
},
|
||||
{
|
||||
icon: <TbSailboat />,
|
||||
id: 'rowing-boat',
|
||||
label: 'Rowing Boat',
|
||||
src: getAssetPath('/sounds/transport/rowing-boat.mp3'),
|
||||
src: '/sounds/transport/rowing-boat.mp3',
|
||||
},
|
||||
],
|
||||
title: 'Transport',
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@ import { RiSparkling2Fill } from 'react-icons/ri/index';
|
|||
|
||||
import type { Category } from '../types';
|
||||
|
||||
import { getAssetPath } from '@/helpers/path';
|
||||
|
||||
export const urban: Category = {
|
||||
icon: <FaCity />,
|
||||
id: 'urban',
|
||||
|
|
@ -16,43 +14,43 @@ export const urban: Category = {
|
|||
icon: <PiRoadHorizonFill />,
|
||||
id: 'highway',
|
||||
label: 'Highway',
|
||||
src: getAssetPath('/sounds/urban/highway.mp3'),
|
||||
src: '/sounds/urban/highway.mp3',
|
||||
},
|
||||
{
|
||||
icon: <FaRoad />,
|
||||
id: 'road',
|
||||
label: 'Road',
|
||||
src: getAssetPath('/sounds/urban/road.mp3'),
|
||||
src: '/sounds/urban/road.mp3',
|
||||
},
|
||||
{
|
||||
icon: <PiSirenBold />,
|
||||
id: 'ambulance-siren',
|
||||
label: 'Ambulance Siren',
|
||||
src: getAssetPath('/sounds/urban/ambulance-siren.mp3'),
|
||||
src: '/sounds/urban/ambulance-siren.mp3',
|
||||
},
|
||||
{
|
||||
icon: <BsSoundwave />,
|
||||
id: 'busy-street',
|
||||
label: 'Busy Street',
|
||||
src: getAssetPath('/sounds/urban/busy-street.mp3'),
|
||||
src: '/sounds/urban/busy-street.mp3',
|
||||
},
|
||||
{
|
||||
icon: <BsPeopleFill />,
|
||||
id: 'crowd',
|
||||
label: 'Crowd',
|
||||
src: getAssetPath('/sounds/urban/crowd.mp3'),
|
||||
src: '/sounds/urban/crowd.mp3',
|
||||
},
|
||||
{
|
||||
icon: <BiSolidTraffic />,
|
||||
id: 'traffic',
|
||||
label: 'Traffic',
|
||||
src: getAssetPath('/sounds/urban/traffic.mp3'),
|
||||
src: '/sounds/urban/traffic.mp3',
|
||||
},
|
||||
{
|
||||
icon: <RiSparkling2Fill />,
|
||||
id: 'fireworks',
|
||||
label: 'Fireworks',
|
||||
src: getAssetPath('/sounds/urban/fireworks.mp3'),
|
||||
src: '/sounds/urban/fireworks.mp3',
|
||||
},
|
||||
],
|
||||
title: 'Urban',
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
export function getAssetPath(relativePath: string): string {
|
||||
const baseURL = import.meta.env.BASE_URL;
|
||||
const withoutTrailingSlash = baseURL.replace(/\/+$/, '');
|
||||
const withoutLeadingSlash = relativePath.replace(/^\/+/, '');
|
||||
|
||||
return `${withoutTrailingSlash}/${withoutLeadingSlash}`;
|
||||
}
|
||||
|
|
@ -47,10 +47,6 @@ export function useSound(
|
|||
preload: options.preload ?? false,
|
||||
src: src,
|
||||
});
|
||||
|
||||
if (window.navigator.audioSession) {
|
||||
window.navigator.audioSession.type = 'playback';
|
||||
}
|
||||
}
|
||||
|
||||
return sound;
|
||||
|
|
|
|||
|
|
@ -8,13 +8,11 @@ import Source from '@/components/source.astro';
|
|||
import Footer from '@/components/footer.astro';
|
||||
|
||||
import { App } from '@/components/app';
|
||||
import CategoryIcons from '@/components/categories/category-icons/category-icons';
|
||||
---
|
||||
|
||||
<Layout title="Moodist: Ambient Sounds for Focus and Calm">
|
||||
<Donate />
|
||||
<Hero />
|
||||
<CategoryIcons client:load />
|
||||
<App client:load />
|
||||
<About />
|
||||
<Source />
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue