@jjlmoya/utils-health 1.1.0

package/src/tool/tinnitusReliever/component.astro

@@ -0,0 +1,581 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { KnownLocale } from '../../types';
+import type { TinnitusRelieverUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const t = (Astro.props.ui ?? {}) as TinnitusRelieverUI;
+---
+
+<div class="tr">
+  <div class="tr__visualizer">
+    <canvas id="noise-visualizer" class="tr__canvas"></canvas>
+    <div class="tr__canvas-overlay"></div>
+    <button id="play-btn" class="tr__play-btn">
+      <div class="tr__play-glow"></div>
+      <div class="tr__play-inner">
+        <span id="play-icon" class="tr__icon tr__icon--play">
+          <Icon name="mdi:play" />
+        </span>
+        <span id="stop-icon" class="tr__icon tr__icon--stop tr__icon--hidden">
+          <Icon name="mdi:stop" />
+        </span>
+      </div>
+    </button>
+  </div>
+
+  <div class="tr__controls">
+    <div class="tr__noise-btns">
+      <button class="tr__noise-btn" data-type="white" data-active="true">{t.typeWhite ?? 'White Noise'}</button>
+      <button class="tr__noise-btn" data-type="pink" data-active="false">{t.typePink ?? 'Pink Noise'}</button>
+      <button class="tr__noise-btn" data-type="brown" data-active="false">{t.typeBrown ?? 'Brown Noise'}</button>
+    </div>
+
+    <div class="tr__sliders">
+      <div class="tr__slider-group">
+        <div class="tr__slider-header">
+          <label class="tr__label" for="freq-slider">{t.labelFrequency ?? 'Tinnitus Frequency'}</label>
+          <span class="tr__value"><span id="freq-display">4000</span> Hz</span>
+        </div>
+        <input type="range" min="200" max="12000" step="50" value="4000" id="freq-slider" class="tr__slider">
+        <p class="tr__hint">{t.hintFrequency ?? 'Move this slider until it matches the tone of your tinnitus.'}</p>
+      </div>
+
+      <div class="tr__slider-group">
+        <div class="tr__slider-header">
+          <label class="tr__label" for="vol-slider">{t.labelVolume ?? 'Volume'}</label>
+          <span class="tr__value"><span id="vol-display">50</span>%</span>
+        </div>
+        <input type="range" min="0" max="100" value="50" id="vol-slider" class="tr__slider">
+        <p class="tr__hint">{t.hintVolume ?? 'Adjust the volume to a comfortable level, just below your tinnitus.'}</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .tr {
+    --tr-accent: #0d9488;
+    --tr-bg-canvas: #f1f5f9;
+    --tr-bg-controls: #fff;
+    --tr-text: #1e293b;
+    --tr-label: #64748b;
+    --tr-border: #e2e8f0;
+    --tr-track: #e2e8f0;
+    --tr-btn-hover: #f8fafc;
+    --tr-play-inner: rgba(255, 255, 255, 0.9);
+    --tr-overlay-start: rgba(248, 250, 252, 0.1);
+    --tr-thumb-bg: #fff;
+
+    position: relative;
+    width: 100%;
+    max-width: 56rem;
+    margin: 0 auto;
+    background: var(--tr-bg-controls);
+    border-radius: 1.5rem;
+    overflow: hidden;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+    border: 1px solid var(--tr-border);
+  }
+
+  .tr__visualizer {
+    position: relative;
+    height: 16rem;
+    background: var(--tr-bg-canvas);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .tr__canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.6;
+  }
+
+  :global(.theme-dark) .tr {
+    --tr-accent: #2dd4bf;
+    --tr-bg-canvas: #020617;
+    --tr-bg-controls: #0f172a;
+    --tr-text: #cbd5e1;
+    --tr-label: #94a3b8;
+    --tr-border: #334155;
+    --tr-track: #1e293b;
+    --tr-btn-hover: #1e293b;
+    --tr-play-inner: rgba(30, 41, 59, 0.8);
+    --tr-overlay-start: rgba(15, 23, 42, 0.1);
+    --tr-thumb-bg: #0f172a;
+  }
+
+  .tr__canvas-overlay {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, var(--tr-overlay-start), transparent, var(--tr-bg-controls));
+    pointer-events: none;
+  }
+
+  .tr__play-btn {
+    position: relative;
+    z-index: 10;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.3s;
+  }
+
+  .tr__play-btn:hover {
+    transform: scale(1.05);
+  }
+
+  .tr__play-glow {
+    position: absolute;
+    inset: 0;
+    background: rgba(20, 184, 166, 0.2);
+    filter: blur(2rem);
+    border-radius: 50%;
+    opacity: 0.2;
+    transition: opacity 0.3s;
+    pointer-events: none;
+  }
+
+  .tr__play-btn:hover .tr__play-glow {
+    opacity: 0.4;
+  }
+
+  .tr__play-inner {
+    width: 5rem;
+    height: 5rem;
+    background: var(--tr-play-inner);
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--tr-border);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+    transition: border-color 0.3s;
+  }
+
+  .tr__play-btn:hover .tr__play-inner {
+    border-color: rgba(45, 212, 191, 0.5);
+  }
+
+  .tr__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .tr__icon svg {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .tr__icon--play {
+    color: var(--tr-accent);
+  }
+
+  .tr__icon--stop {
+    color: #f87171;
+  }
+
+  .tr__icon--hidden {
+    display: none;
+  }
+
+  .tr__controls {
+    padding: 2rem;
+    color: var(--tr-text);
+  }
+
+  .tr__noise-btns {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 2.5rem;
+    flex-wrap: wrap;
+  }
+
+  .tr__noise-btn {
+    padding: 0.5rem 1.5rem;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border: 1px solid var(--tr-border);
+    background: transparent;
+    color: var(--tr-label);
+    cursor: pointer;
+    transition: all 0.3s;
+  }
+
+  .tr__noise-btn:hover {
+    background: var(--tr-btn-hover);
+  }
+
+  .tr__noise-btn[data-active="true"] {
+    background: rgba(20, 184, 166, 0.2);
+    border-color: rgba(45, 212, 191, 0.5);
+    color: var(--tr-accent);
+  }
+
+  .tr__sliders {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+  }
+
+  .tr__slider-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .tr__slider-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .tr__label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--tr-label);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .tr__value {
+    color: var(--tr-accent);
+    font-size: 1.125rem;
+  }
+
+  .tr__slider {
+    width: 100%;
+    appearance: none;
+    background: var(--tr-track);
+    height: 0.5rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    outline: none;
+    border: none;
+  }
+
+  .tr__slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    background: var(--tr-thumb-bg);
+    border: 2px solid var(--tr-accent);
+    cursor: pointer;
+    box-shadow: 0 0 10px rgba(45, 212, 191, 0.3);
+    transition: transform 0.1s;
+  }
+
+  .tr__slider::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 15px rgba(45, 212, 191, 0.5);
+  }
+
+  .tr__slider::-moz-range-thumb {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    background: var(--tr-thumb-bg);
+    border: 2px solid var(--tr-accent);
+    cursor: pointer;
+    box-shadow: 0 0 10px rgba(45, 212, 191, 0.3);
+  }
+
+  .tr__hint {
+    font-size: 0.75rem;
+    color: var(--tr-label);
+    margin: 0;
+  }
+
+  @media (max-width: 640px) {
+    .tr__sliders {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+    }
+
+    .tr__noise-btns {
+      gap: 0.5rem;
+    }
+
+    .tr__controls {
+      padding: 1.5rem;
+    }
+  }
+</style>
+
+<script>
+  class TinnitusReliever {
+    silentAudio: HTMLAudioElement | null = null;
+    hasUnlocked = false;
+    ctx: AudioContext | null = null;
+    noiseNode: AudioBufferSourceNode | null = null;
+    gainNode: GainNode | null = null;
+    filterNode: BiquadFilterNode | null = null;
+    analyser: AnalyserNode | null = null;
+    isPlaying = false;
+
+    frequency = 4000;
+    volume = 0.3;
+    noiseType = 'white';
+
+    playBtn: HTMLButtonElement;
+    playIcon: HTMLElement;
+    stopIcon: HTMLElement;
+    freqSlider: HTMLInputElement;
+    volSlider: HTMLInputElement;
+    freqDisplay: HTMLElement;
+    volDisplay: HTMLElement;
+    noiseBtns: NodeListOf<HTMLButtonElement>;
+    canvas: HTMLCanvasElement;
+    canvasCtx: CanvasRenderingContext2D;
+    animationId: number = 0;
+
+    constructor() {
+      this.playBtn = document.querySelector('#play-btn') as HTMLButtonElement;
+      this.playIcon = document.querySelector('#play-icon') as HTMLElement;
+      this.stopIcon = document.querySelector('#stop-icon') as HTMLElement;
+      this.freqSlider = document.querySelector('#freq-slider') as HTMLInputElement;
+      this.volSlider = document.querySelector('#vol-slider') as HTMLInputElement;
+      this.freqDisplay = document.querySelector('#freq-display') as HTMLElement;
+      this.volDisplay = document.querySelector('#vol-display') as HTMLElement;
+      this.noiseBtns = document.querySelectorAll('.tr__noise-btn');
+      this.canvas = document.querySelector('#noise-visualizer') as HTMLCanvasElement;
+      this.canvasCtx = this.canvas.getContext('2d')!;
+
+      this.initEvents();
+      this.resizeCanvas();
+      window.addEventListener('resize', () => this.resizeCanvas());
+
+      this.silentAudio = new Audio(
+        'data:audio/wav;base64,UklGRjIAAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YRAAAAAAAAAAAAAAAAAAAA=='
+      );
+      this.silentAudio.loop = false;
+    }
+
+    initEvents() {
+      this.playBtn.addEventListener('click', () => this.togglePlay());
+
+      this.freqSlider.addEventListener('input', (e) => {
+        this.frequency = parseInt((e.target as HTMLInputElement).value);
+        this.freqDisplay.textContent = this.frequency.toString();
+        this.updateAudioParams();
+      });
+
+      this.volSlider.addEventListener('input', (e) => {
+        this.volume = parseInt((e.target as HTMLInputElement).value) / 100;
+        this.volDisplay.textContent = (e.target as HTMLInputElement).value;
+        this.updateAudioParams();
+      });
+
+      this.noiseBtns.forEach((btn) => {
+        btn.addEventListener('click', () => {
+          const type = btn.dataset.type!;
+          if (this.noiseType === type) return;
+          this.noiseType = type;
+          this.noiseBtns.forEach((b) => (b.dataset.active = 'false'));
+          btn.dataset.active = 'true';
+          if (this.isPlaying) {
+            this.stopAudio();
+            this.startAudio();
+          }
+        });
+      });
+    }
+
+    playSilentUnlock() {
+      if (this.silentAudio) {
+        this.silentAudio.volume = 0.01;
+        this.silentAudio.play().catch((e) => console.error('Silent audio play failed', e));
+      }
+    }
+
+    initAudioContext() {
+      if (!this.ctx) {
+        type ExtWindow = Window & { webkitAudioContext?: typeof AudioContext };
+        const Ctor = window.AudioContext ?? (window as unknown as ExtWindow).webkitAudioContext;
+        if (Ctor) this.ctx = new Ctor();
+      }
+      if (this.ctx?.state === 'suspended') {
+        this.ctx.resume();
+      }
+    }
+
+    async startAudio() {
+      this.initAudioContext();
+      if (!this.ctx) return;
+
+      this.gainNode = this.ctx.createGain();
+      this.filterNode = this.ctx.createBiquadFilter();
+      this.analyser = this.ctx.createAnalyser();
+
+      this.filterNode.type = 'notch';
+      this.filterNode.frequency.value = this.frequency;
+      this.filterNode.Q.value = 1.5;
+
+      this.gainNode.gain.setValueAtTime(0, this.ctx.currentTime);
+      this.gainNode.gain.linearRampToValueAtTime(this.volume, this.ctx.currentTime + 1.0);
+
+      const bufferSize = 2 * this.ctx.sampleRate;
+      const buffer = this.ctx.createBuffer(1, bufferSize, this.ctx.sampleRate);
+      const data = buffer.getChannelData(0);
+      this.generateNoise(data, this.noiseType);
+
+      this.noiseNode = this.ctx.createBufferSource();
+      this.noiseNode.buffer = buffer;
+      this.noiseNode.loop = true;
+
+      this.noiseNode.connect(this.filterNode);
+      this.filterNode.connect(this.gainNode);
+      this.gainNode.connect(this.analyser);
+      this.analyser.connect(this.ctx.destination);
+
+      this.noiseNode.start();
+      this.isPlaying = true;
+      this.updateUIActionState();
+      this.draw();
+    }
+
+    stopAudio() {
+      if (this.noiseNode) {
+        this.noiseNode.stop();
+        this.noiseNode.disconnect();
+      }
+      this.isPlaying = false;
+      this.updateUIActionState();
+      cancelAnimationFrame(this.animationId);
+      this.clearCanvas();
+    }
+
+    togglePlay() {
+      this.initAudioContext();
+
+      if (!this.hasUnlocked) {
+        this.playSilentUnlock();
+        this.hasUnlocked = true;
+      }
+
+      if (this.isPlaying) {
+        this.stopAudio();
+      } else {
+        this.startAudio();
+      }
+    }
+
+    updateAudioParams() {
+      if (!this.ctx) return;
+      if (this.filterNode) {
+        this.filterNode.frequency.setTargetAtTime(this.frequency, this.ctx.currentTime, 0.1);
+      }
+      if (this.gainNode) {
+        this.gainNode.gain.setTargetAtTime(this.volume, this.ctx.currentTime, 0.1);
+      }
+    }
+
+    updateUIActionState() {
+      if (this.isPlaying) {
+        this.playIcon.classList.add('tr__icon--hidden');
+        this.stopIcon.classList.remove('tr__icon--hidden');
+      } else {
+        this.playIcon.classList.remove('tr__icon--hidden');
+        this.stopIcon.classList.add('tr__icon--hidden');
+      }
+    }
+
+    generateNoise(data: Float32Array, type: string) {
+      const count = data.length;
+      if (type === 'white') {
+        for (let i = 0; i < count; i++) {
+          data[i] = Math.random() * 2 - 1;
+        }
+      } else if (type === 'pink') {
+        let b0 = 0, b1 = 0, b2 = 0, b3 = 0, b4 = 0, b5 = 0, b6 = 0;
+        for (let i = 0; i < count; i++) {
+          const white = Math.random() * 2 - 1;
+          b0 = 0.99886 * b0 + white * 0.0555179;
+          b1 = 0.99332 * b1 + white * 0.0750759;
+          b2 = 0.969 * b2 + white * 0.153852;
+          b3 = 0.8665 * b3 + white * 0.3104856;
+          b4 = 0.55 * b4 + white * 0.5329522;
+          b5 = -0.7616 * b5 - white * 0.016898;
+          data[i] = b0 + b1 + b2 + b3 + b4 + b5 + b6 + white * 0.5362;
+          data[i] *= 0.11;
+          b6 = white * 0.115926;
+        }
+      } else if (type === 'brown') {
+        let lastOut = 0;
+        for (let i = 0; i < count; i++) {
+          const white = Math.random() * 2 - 1;
+          data[i] = (lastOut + 0.02 * white) / 1.02;
+          lastOut = data[i];
+          data[i] *= 3.5;
+        }
+      }
+    }
+
+    resizeCanvas() {
+      this.canvas.width = this.canvas.offsetWidth;
+      this.canvas.height = this.canvas.offsetHeight;
+    }
+
+    drawPath(dataArray: Uint8Array, width: number, height: number, barWidth: number) {
+      let x = 0;
+      this.canvasCtx.beginPath();
+      this.canvasCtx.moveTo(0, height);
+      for (let i = 0; i < dataArray.length; i++) {
+        const y = height - (dataArray[i] / 255) * height;
+        if (i === 0) {
+          this.canvasCtx.moveTo(x, y);
+        } else {
+          this.canvasCtx.lineTo(x, y);
+        }
+        x += barWidth;
+      }
+      this.canvasCtx.lineTo(width, height);
+    }
+
+    draw() {
+      if (!this.isPlaying || !this.analyser) return;
+      this.animationId = requestAnimationFrame(() => this.draw());
+      const bufferLength = this.analyser.frequencyBinCount;
+      const dataArray = new Uint8Array(bufferLength);
+      this.analyser.getByteFrequencyData(dataArray);
+      const { width, height } = this.canvas;
+      this.canvasCtx.clearRect(0, 0, width, height);
+      this.drawPath(dataArray, width, height, (width / bufferLength) * 2.5);
+      this.canvasCtx.fillStyle = 'rgba(45, 212, 191, 0.2)';
+      this.canvasCtx.fill();
+      this.canvasCtx.strokeStyle = '#2dd4bf';
+      this.canvasCtx.lineWidth = 2;
+      this.canvasCtx.stroke();
+    }
+
+    clearCanvas() {
+      this.canvasCtx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    new TinnitusReliever();
+  });
+</script>