background image blur set in music player

nitishkhobragade · Jun 23, 2024 · e328f52 · e328f52
1 parent 097106a
commit e328f52
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 18 deletions.
diff --git a/19_javascript_music_player/index.html b/19_javascript_music_player/index.html
@@ -16,7 +16,7 @@
                     <i class="fa-solid fa-angle-left"></i>
                 </div>
                 <div class="circle playlistIcon">
-                    <i class="fa-solid fa-bars"></i>
+                    <i class="fa-solid fa-bars" id="listOption"></i>
                 </div>
             </nav>
             <div id="playlist-container" class="playlist-container">
@@ -26,13 +26,11 @@
 
 
             <div class="media-section">
-
-
-
                 <!-- song details started  -->
                 <!-- Background blur element -->
                 <div class="imgCont">
                     <!-- rotating image box  -->
+                    <img alt="bgimg" id="bgImg" >
                     <div class="img-box">
                         <img src="./media/thumb/bhool_bhulaiya2_title_track.jpg" alt="" class="song-img" id="thumbnail">
                     </div>

diff --git a/19_javascript_music_player/player.css b/19_javascript_music_player/player.css
@@ -362,22 +362,22 @@ nav .circle {
     padding: 1rem 2rem;
     border-radius: 8px;
     overflow: hidden;
-    background-image: url('./media/bg/background-image.jpg'); /* Replace with your background image path */
+
+    backdrop-filter: blur(20px);
     background-size: cover;
     background-position: center;
-    background-color: rgba(255, 255, 255, 0.4); /* Semi-transparent background color for contrast */
+
 }
 
-.imgCont::before {
-    content: '';
+
+
+#bgImg {
     position: absolute;
-    top: -10%;
-    left: -10%;
-    right: -10%;
-    bottom: -10%;
-    background-image: inherit;
-    background-size: cover;
-    background-position: center;
-    filter: blur(10px); /* Adjust blur intensity as needed */
+    filter: blur(1px);
     z-index: -1;
+    user-select: none;  
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
 }
diff --git a/19_javascript_music_player/player.js b/19_javascript_music_player/player.js
@@ -185,8 +185,12 @@ function prevSong() {
 
 // Function to set blurred background image
 function setBlurBackground(imageUrl) {
-    const imgBlur = document.querySelector(".imgCont");
-    imgBlur.style.backgroundImage = `url(${imageUrl})`;
+    // const imgBlur = document.querySelector(".imgCont");
+    // imgBlur.style.background = `url(${imageUrl})`;
+
+    const bgImg = document.getElementById('bgImg');
+    bgImg.src = imageUrl;
+
 }
 
 // For rendering playlist
@@ -218,6 +222,17 @@ renderPlaylist(playlist, 'playlist-container');
 
 function togglePlaylist() {
     playlistContainer.classList.toggle('visible');
+
+    let listIcon = document.getElementById('listOption');
+
+
+    if(playlistContainer.classList.contains('visible')) {
+        listIcon.classList.remove('fa-bars');
+        listIcon.classList.add('fa-x');
+    } else {
+        listIcon.classList.remove('fa-x');
+        listIcon.classList.add('fa-bars');
+    }
 }
 
 playlistIcon.addEventListener('click', togglePlaylist);