feat: add lofi music play

fix: replace generator with static silent audio
fix: fixate the binary pattern
2026-03-05 19:43:13 +08:00 · 2025-07-12 12:32:49 +03:30 · 2025-07-12 00:50:47 +03:30 · 2025-07-12 00:06:59 +03:30 · 2025-04-05 15:36:23 +03:30 · 2025-03-26 14:48:47 +01:00
31 changed files with 299 additions and 73 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@

 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.0.1](https://github.com/remvze/moodist/compare/v2.0.0...v2.0.1) (2025-03-25)
+
+
+### 🐛 Bug Fixes
+
+* add delay to cipher text ([4895a72](https://github.com/remvze/moodist/commit/4895a7266d1b7458bc09a77dd6922058a247ea98))
+
 ## [2.0.0](https://github.com/remvze/moodist/compare/v1.5.1...v2.0.0) (2025-03-25)


--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <div align="center">
-  <!-- <img src="/assets/banner.svg" alt="Moodist Logo Banner" /> -->
+  <img src="/assets/banner.png" alt="Moodist Logo Banner" />
  <h2>Moodist 🌲</h2>
  <p>Ambient sounds for focus and calm.</p>
  <a href="https://moodist.mvze.net">Visit <strong>Moodist</strong></a> | <a href="https://buymeacoffee.com/remvze">Buy Me a Coffee</a>
--- a/assets/banner.png
+++ b/assets/banner.png
--- a/assets/banner.svg
+++ b/assets/banner.svg
@@ -1,40 +0,0 @@
-<svg width="1200" height="400" viewBox="0 0 1200 400" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="1200" height="400" rx="25" fill="#09090B"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M600 237.5C620.711 237.5 637.5 220.711 637.5 200C637.5 179.289 620.711 162.5 600 162.5C579.289 162.5 562.5 179.289 562.5 200C562.5 220.711 579.289 237.5 600 237.5ZM600 218.75C610.355 218.75 618.75 210.355 618.75 200C618.75 189.645 610.355 181.25 600 181.25C589.645 181.25 581.25 189.645 581.25 200C581.25 210.355 589.645 218.75 600 218.75Z" fill="#FAFAFA"/>
-<path d="M562.5 162.5C541.789 162.5 525 179.289 525 200C525 220.711 541.789 237.5 562.5 237.5L562.5 218.75C552.145 218.75 543.75 210.355 543.75 200C543.75 189.645 552.145 181.25 562.5 181.25L562.5 162.5Z" fill="#D4D4D8"/>
-<path d="M637.5 162.5C637.5 141.789 620.711 125 600 125C579.289 125 562.5 141.789 562.5 162.5L581.25 162.5C581.25 152.145 589.645 143.75 600 143.75C610.355 143.75 618.75 152.145 618.75 162.5L637.5 162.5Z" fill="#D4D4D8"/>
-<path d="M637.5 237.5C658.211 237.5 675 220.711 675 200C675 179.289 658.211 162.5 637.5 162.5L637.5 181.25C647.855 181.25 656.25 189.645 656.25 200C656.25 210.355 647.855 218.75 637.5 218.75L637.5 237.5Z" fill="#D4D4D8"/>
-<path d="M562.5 237.5C562.5 258.211 579.289 275 600 275C620.711 275 637.5 258.211 637.5 237.5H618.75C618.75 247.855 610.355 256.25 600 256.25C589.645 256.25 581.25 247.855 581.25 237.5H562.5Z" fill="#D4D4D8"/>
-<path d="M543.75 162.5C543.75 152.145 552.145 143.75 562.5 143.75L562.5 125C541.789 125 525 141.789 525 162.5L543.75 162.5Z" fill="#A1A1AA"/>
-<path d="M637.5 143.75C647.855 143.75 656.25 152.145 656.25 162.5L675 162.5C675 141.789 658.211 125 637.5 125L637.5 143.75Z" fill="#A1A1AA"/>
-<path d="M656.25 237.5C656.25 247.855 647.855 256.25 637.5 256.25L637.5 275C658.211 275 675 258.211 675 237.5L656.25 237.5Z" fill="#A1A1AA"/>
-<path d="M562.5 256.25C552.145 256.25 543.75 247.855 543.75 237.5H525C525 258.211 541.789 275 562.5 275V256.25Z" fill="#A1A1AA"/>
-<path d="M693.75 237.5C693.75 247.855 685.355 256.25 675 256.25L675 275C695.711 275 712.5 258.211 712.5 237.5L693.75 237.5Z" fill="#18181B"/>
-<path d="M656.25 275C656.25 285.355 647.855 293.75 637.5 293.75L637.5 312.5C658.211 312.5 675 295.711 675 275L656.25 275Z" fill="#18181B"/>
-<path d="M525 256.25C514.645 256.25 506.25 247.855 506.25 237.5H487.5C487.5 258.211 504.289 275 525 275V256.25Z" fill="#18181B"/>
-<path d="M562.5 293.75C552.145 293.75 543.75 285.355 543.75 275H525C525 295.711 541.789 312.5 562.5 312.5V293.75Z" fill="#18181B"/>
-<path d="M562.5 331.25C552.145 331.25 543.75 322.855 543.75 312.5H525C525 333.211 541.789 350 562.5 350V331.25Z" fill="#18181B"/>
-<path d="M525 293.75C514.645 293.75 506.25 285.355 506.25 275H487.5C487.5 295.711 504.289 312.5 525 312.5V293.75Z" fill="#18181B"/>
-<path d="M487.5 256.25C477.145 256.25 468.75 247.855 468.75 237.5H450C450 258.211 466.789 275 487.5 275V256.25Z" fill="#18181B"/>
-<path d="M543.75 125C543.75 114.645 552.145 106.25 562.5 106.25L562.5 87.5C541.789 87.5 525 104.289 525 125L543.75 125Z" fill="#18181B"/>
-<path d="M506.25 162.5C506.25 152.145 514.645 143.75 525 143.75L525 125C504.289 125 487.5 141.789 487.5 162.5L506.25 162.5Z" fill="#18181B"/>
-<path d="M468.75 162.5C468.75 152.145 477.145 143.75 487.5 143.75L487.5 125C466.789 125 450 141.789 450 162.5L468.75 162.5Z" fill="#18181B"/>
-<path d="M506.25 125C506.25 114.645 514.645 106.25 525 106.25L525 87.5C504.289 87.5 487.5 104.289 487.5 125L506.25 125Z" fill="#18181B"/>
-<path d="M543.75 87.5C543.75 77.1447 552.145 68.75 562.5 68.75L562.5 50C541.789 50 525 66.7893 525 87.5L543.75 87.5Z" fill="#18181B"/>
-<path d="M675 143.75C685.355 143.75 693.75 152.145 693.75 162.5L712.5 162.5C712.5 141.789 695.711 125 675 125L675 143.75Z" fill="#18181B"/>
-<path d="M637.5 106.25C647.855 106.25 656.25 114.645 656.25 125L675 125C675 104.289 658.211 87.5 637.5 87.5L637.5 106.25Z" fill="#18181B"/>
-<path d="M637.5 68.75C647.855 68.75 656.25 77.1447 656.25 87.5L675 87.5C675 66.7893 658.211 50 637.5 50L637.5 68.75Z" fill="#18181B"/>
-<path d="M675 106.25C685.355 106.25 693.75 114.645 693.75 125L712.5 125C712.5 104.289 695.711 87.5 675 87.5L675 106.25Z" fill="#18181B"/>
-<path d="M712.5 143.75C722.855 143.75 731.25 152.145 731.25 162.5L750 162.5C750 141.789 733.211 125 712.5 125L712.5 143.75Z" fill="#18181B"/>
-<path d="M693.75 275C693.75 285.355 685.355 293.75 675 293.75L675 312.5C695.711 312.5 712.5 295.711 712.5 275L693.75 275Z" fill="#18181B"/>
-<path d="M731.25 237.5C731.25 247.855 722.855 256.25 712.5 256.25L712.5 275C733.211 275 750 258.211 750 237.5L731.25 237.5Z" fill="#18181B"/>
-<path d="M656.25 312.5C656.25 322.855 647.855 331.25 637.5 331.25L637.5 350C658.211 350 675 333.211 675 312.5L656.25 312.5Z" fill="#18181B"/>
-<path d="M525 162.5C504.289 162.5 487.5 179.289 487.5 200C487.5 220.711 504.289 237.5 525 237.5L525 218.75C514.645 218.75 506.25 210.355 506.25 200C506.25 189.645 514.645 181.25 525 181.25L525 162.5Z" fill="#18181B"/>
-<path d="M487.5 162.5C466.789 162.5 450 179.289 450 200C450 220.711 466.789 237.5 487.5 237.5L487.5 218.75C477.145 218.75 468.75 210.355 468.75 200C468.75 189.645 477.145 181.25 487.5 181.25L487.5 162.5Z" fill="#18181B"/>
-<path d="M637.5 125C637.5 104.289 620.711 87.5 600 87.5C579.289 87.5 562.5 104.289 562.5 125L581.25 125C581.25 114.645 589.645 106.25 600 106.25C610.355 106.25 618.75 114.645 618.75 125L637.5 125Z" fill="#18181B"/>
-<path d="M637.5 87.5C637.5 66.7893 620.711 50 600 50C579.289 50 562.5 66.7893 562.5 87.5L581.25 87.5C581.25 77.1447 589.645 68.75 600 68.75C610.355 68.75 618.75 77.1447 618.75 87.5L637.5 87.5Z" fill="#18181B"/>
-<path d="M675 237.5C695.711 237.5 712.5 220.711 712.5 200C712.5 179.289 695.711 162.5 675 162.5L675 181.25C685.355 181.25 693.75 189.645 693.75 200C693.75 210.355 685.355 218.75 675 218.75L675 237.5Z" fill="#18181B"/>
-<path d="M712.5 237.5C733.211 237.5 750 220.711 750 200C750 179.289 733.211 162.5 712.5 162.5L712.5 181.25C722.855 181.25 731.25 189.645 731.25 200C731.25 210.355 722.855 218.75 712.5 218.75L712.5 237.5Z" fill="#18181B"/>
-<path d="M562.5 275C562.5 295.711 579.289 312.5 600 312.5C620.711 312.5 637.5 295.711 637.5 275H618.75C618.75 285.355 610.355 293.75 600 293.75C589.645 293.75 581.25 285.355 581.25 275H562.5Z" fill="#18181B"/>
-<path d="M562.5 312.5C562.5 333.211 579.289 350 600 350C620.711 350 637.5 333.211 637.5 312.5H618.75C618.75 322.855 610.355 331.25 600 331.25C589.645 331.25 581.25 322.855 581.25 312.5H562.5Z" fill="#18181B"/>
-</svg>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "moodist",
-  "version": "2.0.0",
+  "version": "2.0.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "moodist",
-      "version": "2.0.0",
+      "version": "2.0.1",
      "dependencies": {
        "@astrojs/react": "3.6.0",
        "@floating-ui/react": "0.26.0",
@@ -30,6 +30,7 @@
        "react-hotkeys-hook": "3.2.1",
        "react-icons": "4.11.0",
        "react-wrap-balancer": "1.1.0",
+        "react-youtube": "10.1.0",
        "uuid": "10.0.0",
        "zustand": "4.4.3"
      },
@@ -19285,6 +19286,12 @@
        "node": ">=4"
      }
    },
+    "node_modules/load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==",
+      "license": "MIT"
+    },
    "node_modules/load-yaml-file": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/load-yaml-file/-/load-yaml-file-0.2.0.tgz",
@@ -22343,6 +22350,23 @@
        "react": ">=16.8.0 || ^17.0.0 || ^18"
      }
    },
+    "node_modules/react-youtube": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-youtube/-/react-youtube-10.1.0.tgz",
+      "integrity": "sha512-ZfGtcVpk0SSZtWCSTYOQKhfx5/1cfyEW1JN/mugGNfAxT3rmVJeMbGpA9+e78yG21ls5nc/5uZJETE3cm3knBg==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "3.1.3",
+        "prop-types": "15.8.1",
+        "youtube-player": "5.5.2"
+      },
+      "engines": {
+        "node": ">= 14.x"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.1"
+      }
+    },
    "node_modules/read-pkg": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-6.0.0.tgz",
@@ -23844,6 +23868,12 @@
        "is-arrayish": "^0.3.1"
      }
    },
+    "node_modules/sister": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/sister/-/sister-3.0.2.tgz",
+      "integrity": "sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA==",
+      "license": "BSD-3-Clause"
+    },
    "node_modules/sisteransi": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -27593,6 +27623,32 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/youtube-player": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/youtube-player/-/youtube-player-5.5.2.tgz",
+      "integrity": "sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "debug": "^2.6.6",
+        "load-script": "^1.0.0",
+        "sister": "^3.0.0"
+      }
+    },
+    "node_modules/youtube-player/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/youtube-player/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
    "node_modules/zod": {
      "version": "3.23.8",
      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "moodist",
  "type": "module",
-  "version": "2.0.0",
+  "version": "2.0.1",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
@@ -46,6 +46,7 @@
    "react-hotkeys-hook": "3.2.1",
    "react-icons": "4.11.0",
    "react-wrap-balancer": "1.1.0",
+    "react-youtube": "10.1.0",
    "uuid": "10.0.0",
    "zustand": "4.4.3"
  },
--- a/public/assets/pwa/128.png
+++ b/public/assets/pwa/128.png
--- a/public/assets/pwa/144.png
+++ b/public/assets/pwa/144.png
--- a/public/assets/pwa/152.png
+++ b/public/assets/pwa/152.png
--- a/public/assets/pwa/192.png
+++ b/public/assets/pwa/192.png
--- a/public/assets/pwa/256.png
+++ b/public/assets/pwa/256.png
--- a/public/assets/pwa/512.png
+++ b/public/assets/pwa/512.png
--- a/public/assets/pwa/72.png
+++ b/public/assets/pwa/72.png
--- a/public/favicon.svg
+++ b/public/favicon.svg
--- a/public/logo-dark.png
+++ b/public/logo-dark.png
--- a/public/logo-light.png
+++ b/public/logo-light.png
--- a/public/logo.svg
+++ b/public/logo.svg
--- a/public/og.png
+++ b/public/og.png
--- a/public/sounds/silence.mp3
+++ b/public/sounds/silence.mp3
--- a/src/components/binary.astro
+++ b/src/components/binary.astro
@@ -0,0 +1,7 @@
+---
+import { generateRandomBinaryString } from '@/helpers/binary';
+
+const binary = generateRandomBinaryString(1000);
+---
+
+<span>{binary}</span>
--- a/src/components/binary.tsx
+++ b/src/components/binary.tsx
@@ -1,17 +0,0 @@
-import { useState, useEffect } from 'react';
-
-import { generateRandomBinaryString } from '@/helpers/binary';
-
-export function Binary() {
-  const [binary, setBinary] = useState('');
-
-  useEffect(() => {
-    setBinary(generateRandomBinaryString(1000));
-
-    setInterval(() => {
-      setBinary(generateRandomBinaryString(1000));
-    }, 200);
-  }, []);
-
-  return <span>{binary}</span>;
-}
--- a/src/components/cipher.tsx
+++ b/src/components/cipher.tsx
@@ -12,10 +12,12 @@ export function CipherText({ interval = 50, text }: CipherTextProps) {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
-    setIsMounted(true);
+    setTimeout(() => setIsMounted(true), 2000);
  }, []);

  useEffect(() => {
+    if (!isMounted) return;
+
    let timer: NodeJS.Timeout;

    if (outputText !== text) {
@@ -29,7 +31,7 @@ export function CipherText({ interval = 50, text }: CipherTextProps) {
    }

    return () => clearInterval(timer);
-  }, [text, interval, outputText]);
+  }, [text, interval, outputText, isMounted]);

  useEffect(() => {
    if (outputText === text) {
--- a/src/components/media-controls/media-session-track.tsx
+++ b/src/components/media-controls/media-session-track.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';

-import { getSilenceDataURL } from '@/helpers/sound';
 import { BrowserDetect } from '@/helpers/browser-detect';

 import { useSoundStore } from '@/stores/sound';
@@ -25,7 +24,9 @@ export function MediaSessionTrack() {

  const generateSilence = useCallback(async () => {
    if (!masterAudioSoundRef.current) return;
-    masterAudioSoundRef.current.src = await getSilenceDataURL();
+
+    masterAudioSoundRef.current.src = '/sounds/silence.mp3';
+
    setIsGenerated(true);
  }, []);

--- a/src/components/modals/binaural/binaural.tsx
+++ b/src/components/modals/binaural/binaural.tsx
@@ -25,6 +25,16 @@ const presets: Preset[] = [
  { baseFrequency: 440, beatFrequency: 10, name: 'Custom' },
 ];

+function computeBinauralBeatOscillatorFrequencies(
+  baseFrequency: number,
+  beatFrequency: number,
+) {
+  return {
+    leftFrequency: baseFrequency - beatFrequency / 2,
+    rightFrequency: baseFrequency + beatFrequency / 2,
+  };
+}
+
 export function BinauralModal({ onClose, show }: BinauralProps) {
  const [baseFrequency, setBaseFrequency] = useState<number>(440); // Default to A4 note
  const [beatFrequency, setBeatFrequency] = useState<number>(10); // Default to 10 Hz difference
@@ -61,10 +71,10 @@ export function BinauralModal({ onClose, show }: BinauralProps) {
    )
      return;

-    leftOscillatorRef.current.frequency.value =
-      baseFrequency - beatFrequency / 2;
-    rightOscillatorRef.current.frequency.value =
-      baseFrequency + beatFrequency / 2;
+    const { leftFrequency, rightFrequency } =
+      computeBinauralBeatOscillatorFrequencies(baseFrequency, beatFrequency);
+    leftOscillatorRef.current.frequency.value = leftFrequency;
+    rightOscillatorRef.current.frequency.value = rightFrequency;

    // Pan oscillators to left and right
    const leftPanner = audioContext.createStereoPanner();
@@ -104,6 +114,16 @@ export function BinauralModal({ onClose, show }: BinauralProps) {
    }
  }, [volume]);

+  useEffect(() => {
+    // Update base frequency for both left and right oscillators when it changes
+    if (leftOscillatorRef.current && rightOscillatorRef.current) {
+      const { leftFrequency, rightFrequency } =
+        computeBinauralBeatOscillatorFrequencies(baseFrequency, beatFrequency);
+      leftOscillatorRef.current.frequency.value = leftFrequency;
+      rightOscillatorRef.current.frequency.value = rightFrequency;
+    }
+  }, [baseFrequency, beatFrequency]);
+
  useEffect(() => {
    // Cleanup when component unmounts
    return () => {
--- a/src/components/modals/lofi/index.ts
+++ b/src/components/modals/lofi/index.ts
@@ -0,0 +1 @@
+export { LofiModal } from './lofi';
--- a/src/components/modals/lofi/lofi.module.css
+++ b/src/components/modals/lofi/lofi.module.css
@@ -0,0 +1,86 @@
+.title {
+  margin-bottom: 12px;
+  font-family: var(--font-heading);
+  font-weight: 600;
+}
+
+.notice {
+  & p {
+    line-height: 1.4;
+    color: var(--color-foreground-subtle);
+  }
+
+  & .buttons {
+    display: flex;
+    column-gap: 8px;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 12px;
+
+    & button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 40px;
+      padding: 0 16px;
+      font-size: var(--font-sm);
+      font-weight: 500;
+      color: var(--color-foreground);
+      cursor: pointer;
+      background: var(--color-neutral-200);
+      border: none;
+      border-radius: 8px;
+
+      &.primary {
+        color: var(--color-neutral-50);
+        background: var(--color-neutral-950);
+      }
+    }
+  }
+}
+
+.videos {
+  margin-top: 20px;
+
+  & .video {
+    &:not(:last-of-type) {
+      margin-bottom: 24px;
+    }
+
+    & h2 {
+      margin-bottom: 8px;
+      font-size: var(--font-sm);
+      color: var(--color-foreground-subtle);
+
+      & span {
+        display: inline-block;
+        color: var(--color-foreground-subtler);
+
+        &.index {
+          margin-right: 4px;
+        }
+      }
+
+      & strong {
+        font-weight: 500;
+        color: var(--color-foreground);
+      }
+    }
+
+    & .container {
+      padding: 8px;
+      background-color: var(--color-neutral-50);
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 12px;
+
+      & .iframe {
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+        aspect-ratio: 560 / 315;
+        border: 1px solid var(--color-neutral-200);
+        border-radius: 8px;
+      }
+    }
+  }
+}
--- a/src/components/modals/lofi/lofi.tsx
+++ b/src/components/modals/lofi/lofi.tsx
@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import YouTube from 'react-youtube';
+
+import { Modal } from '@/components/modal/modal';
+
+import styles from './lofi.module.css';
+import { padNumber } from '@/helpers/number';
+
+interface LofiProps {
+  onClose: () => void;
+  show: boolean;
+}
+
+const videos = [
+  {
+    channel: 'Lofi Girl',
+    id: 'jfKfPfyJRdk',
+    title: 'lofi hip hop radio',
+  },
+  {
+    channel: 'Lofi Girl',
+    id: '4xDzrJKXOOY',
+    title: 'synthwave radio',
+  },
+  {
+    channel: 'Lofi Girl',
+    id: 'P6Segk8cr-c',
+    title: 'sad lofi radio',
+  },
+  {
+    channel: 'Lofi Girl',
+    id: 'S_MOd40zlYU',
+    title: 'dark ambient radio',
+  },
+  {
+    channel: 'Lofi Girl',
+    id: 'TtkFsfOP9QI',
+    title: 'peaceful piano radio',
+  },
+];
+
+export function LofiModal({ onClose, show }: LofiProps) {
+  const [isAccepted, setIsAccepted] = useState(false);
+
+  return (
+    <Modal persist show={show} onClose={onClose}>
+      <h1 className={styles.title}>Lofi Music Player</h1>
+
+      {!isAccepted ? (
+        <div className={styles.notice}>
+          <p>
+            This feature plays music using embedded YouTube videos. By
+            continuing, you agree to connect to YouTube, which may collect data
+            in accordance with their privacy policy. We do not control or track
+            this data.
+          </p>
+
+          <div className={styles.buttons}>
+            <button onClick={onClose}>Cancel</button>
+            <button
+              className={styles.primary}
+              onClick={() => setIsAccepted(true)}
+            >
+              Continue
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className={styles.videos}>
+          {videos.map((video, index) => (
+            <div className={styles.video} key={video.id}>
+              <h2>
+                <span className={styles.index}>{padNumber(index + 1, 2)}</span>{' '}
+                <strong>{video.channel}</strong> <span>/</span> {video.title}
+              </h2>
+              <div className={styles.container}>
+                <YouTube iframeClassName={styles.iframe} videoId={video.id} />
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </Modal>
+  );
+}
--- a/src/components/source.astro
+++ b/src/components/source.astro
@@ -3,7 +3,7 @@ import { FaGithub } from 'react-icons/fa/index';

 import { SpecialButton } from './special-button';
 import { Container } from './container';
-import { Binary } from './binary';
+import Binary from './binary.astro';
 ---

 <div class="source">
@@ -25,7 +25,7 @@ import { Binary } from './binary';
        </SpecialButton>
      </div>

-      <div class="binary"><Binary client:load /></div>
+      <div class="binary"><Binary /></div>
    </div>
  </Container>
 </div>
--- a/src/components/toolbar/menu/items/index.ts
+++ b/src/components/toolbar/menu/items/index.ts
@@ -12,3 +12,4 @@ export { Todo as TodoItem } from './todo';
 export { Countdown as CountdownItem } from './countdown';
 export { Binaural as BinauralItem } from './binaural';
 export { Isochronic as IsochronicItem } from './isochronic';
+export { Lofi as LofiItem } from './lofi';
--- a/src/components/toolbar/menu/items/lofi.tsx
+++ b/src/components/toolbar/menu/items/lofi.tsx
@@ -0,0 +1,11 @@
+import { FaHeadphonesAlt } from 'react-icons/fa/index';
+
+import { Item } from '../item';
+
+interface LofiProps {
+  open: () => void;
+}
+
+export function Lofi({ open }: LofiProps) {
+  return <Item icon={<FaHeadphonesAlt />} label="Lofi Music" onClick={open} />;
+}
--- a/src/components/toolbar/menu/menu.tsx
+++ b/src/components/toolbar/menu/menu.tsx
@@ -19,6 +19,7 @@ import {
  CountdownItem,
  BinauralItem,
  IsochronicItem,
+  LofiItem,
 } from './items';
 import { Divider } from './divider';
 import { ShareLinkModal } from '@/components/modals/share-link';
@@ -28,6 +29,7 @@ import { SleepTimerModal } from '@/components/modals/sleep-timer';
 import { BreathingExerciseModal } from '@/components/modals/breathing';
 import { BinauralModal } from '@/components/modals/binaural';
 import { IsochronicModal } from '@/components/modals/isochronic';
+import { LofiModal } from '@/components/modals/lofi';
 import { Pomodoro, Notepad, Todo, Countdown } from '@/components/toolbox';
 import { Slider } from '@/components/slider';

@@ -51,6 +53,7 @@ export function Menu() {
      breathing: false,
      countdown: false,
      isochronic: false,
+      lofi: false,
      notepad: false,
      pomodoro: false,
      presets: false,
@@ -137,6 +140,7 @@ export function Menu() {
                    <Divider />
                    <BinauralItem open={() => open('binaural')} />
                    <IsochronicItem open={() => open('isochronic')} />
+                    <LofiItem open={() => open('lofi')} />

                    <Divider />
                    <ShortcutsItem open={() => open('shortcuts')} />
@@ -193,6 +197,7 @@ export function Menu() {
        show={modals.isochronic}
        onClose={() => close('isochronic')}
      />
+      <LofiModal show={modals.lofi} onClose={() => close('lofi')} />
    </>
  );
 }
Author	SHA1	Message	Date
MAZE	fcbe50c78c	feat: add lofi music play	2025-07-12 12:32:49 +03:30
MAZE	af096077ae	fix: replace generator with static silent audio	2025-07-12 00:50:47 +03:30
MAZE	4996cc893c	fix: fixate the binary pattern	2025-07-12 00:06:59 +03:30
MAZE ✧	b171793040	Merge pull request #63 from LBRDan/make-binaural-popup-preset-change-reactive fix(component): update oscillators frequency on preset change	2025-04-05 15:36:23 +03:30
Daniele Lubrano	dcc91e038d	fix(component): update oscillators frequency on preset change Update oscillators frequency on preset change	2025-03-26 14:48:47 +01:00
MAZE	348fc1e8c4	chore: update the logo	2025-03-26 01:17:15 +03:30
MAZE	a0a7f94c33	chore: update banner	2025-03-25 23:10:51 +03:30
MAZE	2f994c6094	chore: update banner	2025-03-25 23:07:52 +03:30
MAZE	fb82117742	chore: add banner	2025-03-25 23:06:55 +03:30
MAZE	7951e9829a	Merge branch 'develop'	2025-03-25 23:00:57 +03:30
MAZE	755c442263	chore: refine logo	2025-03-25 22:54:23 +03:30
MAZE	df210a1246	chore(release): 2.0.1	2025-03-25 17:54:27 +03:30
MAZE	4895a7266d	fix: add delay to cipher text	2025-03-25 17:54:12 +03:30