From ad82ee8f4222f44ea47a26d95a6337120d1d9be9 Mon Sep 17 00:00:00 2001 From: sasha-astiadi Date: Fri, 24 Oct 2025 03:27:01 +0200 Subject: [PATCH] feat: add background audio player with subtle styling - Added ReactAudioPlayer component with autoplay functionality and reduced volume (0.1) - Applied opacity and blur effects to make player visually less intrusive - Fixed player position to bottom of screen with full width and z-index priority - Integrated default audio track 'illbe.mp3' from public directory --- pnpm-lock.yaml | 30 ++++++++++++++++++++++++++++++ src/components/ui/AudioPlayer.jsx | 3 ++- 2 files changed, 32 insertions(+), 1 deletion(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index efe09be..74f2c61 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,9 @@ importers: '@heroicons/react': specifier: ^2.1.5 version: 2.2.0(react@18.3.1) + '@kevtucker/react-audio-player-bar': + specifier: ^0.0.2 + version: 0.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: ^7.3.1 version: 7.3.1(@emotion/react@11.14.0(@types/react@19.1.10)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.1.10)(react@18.3.1))(@types/react@19.1.10)(react@18.3.1))(@types/react@19.1.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -53,6 +56,9 @@ importers: react: specifier: ^18.2.0 version: 18.3.1 + react-audio-player: + specifier: ^0.17.0 + version: 0.17.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-card-slider-component: specifier: ^1.0.9 version: 1.0.9(@testing-library/dom@7.31.2)(@types/webpack@4.41.40)(eslint@8.57.1)(sockjs-client@1.6.1)(typescript@4.9.5) @@ -1213,6 +1219,12 @@ packages: '@jridgewell/trace-mapping@0.3.30': resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==} + '@kevtucker/react-audio-player-bar@0.0.2': + resolution: {integrity: sha512-OdyXLPTqutRIXgmiWYrpgOvD1QI7u7ohLGu0cHG8nEGcwbHBmrToQercW7h3Rz+Kt7hGcbtpUxshtcwptEmhiQ==} + peerDependencies: + react: '>=16.8.0' + react-dom: '>=16.8.0' + '@mui/core-downloads-tracker@7.3.1': resolution: {integrity: sha512-+mIK1Z0BhOaQ0vCgOkT1mSrIpEHLo338h4/duuL4TBLXPvUMit732mnwJY3W40Avy30HdeSfwUAAGRkKmwRaEQ==} @@ -6077,6 +6089,12 @@ packages: resolution: {integrity: sha512-0sF4ny9v/B7s6aoehwze9vJNWcmCemAUYBVasscVr92+UYiEqDXOxfKjXN685mDaMRNF3WdhHQs76oTODMocFA==} engines: {node: '>=10'} + react-audio-player@0.17.0: + resolution: {integrity: sha512-aCZgusPxA9HK7rLZcTdhTbBH9l6do9vn3NorgoDZRxRxJlOy9uZWzPaKjd7QdcuP2vXpxGA/61JMnnOEY7NXeA==} + peerDependencies: + react: '>=16' + react-dom: '>=16' + react-card-slider-component@1.0.9: resolution: {integrity: sha512-xdQYRv5Jpb+8/Qmt1aUaFEbZKPF5ciVXETReMLV9C9d24/ODCl1XdUQaRQzzNev75EWjaCk4caofCvXbqI1nUA==} @@ -9623,6 +9641,12 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.5 + '@kevtucker/react-audio-player-bar@0.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + postcss: 8.5.6 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@mui/core-downloads-tracker@7.3.1': {} '@mui/material@7.3.1(@emotion/react@11.14.0(@types/react@19.1.10)(react@18.3.1))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.1.10)(react@18.3.1))(@types/react@19.1.10)(react@18.3.1))(@types/react@19.1.10)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': @@ -15568,6 +15592,12 @@ snapshots: regenerator-runtime: 0.13.11 whatwg-fetch: 3.6.20 + react-audio-player@0.17.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-card-slider-component@1.0.9(@testing-library/dom@7.31.2)(@types/webpack@4.41.40)(eslint@8.57.1)(sockjs-client@1.6.1)(typescript@4.9.5): dependencies: '@testing-library/jest-dom': 5.17.0 diff --git a/src/components/ui/AudioPlayer.jsx b/src/components/ui/AudioPlayer.jsx index 6d3140f..ef56b4a 100644 --- a/src/components/ui/AudioPlayer.jsx +++ b/src/components/ui/AudioPlayer.jsx @@ -4,11 +4,12 @@ import ReactAudioPlayer from 'react-audio-player'; const AudioPlayer = () => { return ( -
+