From 56f16ce1d19a6455f5da7b7fab1140ac438bd1ea Mon Sep 17 00:00:00 2001
From: Priyanshu2746 <guptapriyanshu2746@gmail.com>
Date: Tue, 16 Apr 2024 00:58:20 +0530
Subject: [PATCH] Implemented scroll-to-top button functionality to allow users
 to smoothly navigate to the top of the AR Meditation Page

---
 AR_Meditate/meditation.js | 183 ++++++++++++++++++++------------------
 1 file changed, 98 insertions(+), 85 deletions(-)

diff --git a/AR_Meditate/meditation.js b/AR_Meditate/meditation.js
index 6e33d955..a17b4394 100644
--- a/AR_Meditate/meditation.js
+++ b/AR_Meditate/meditation.js
@@ -1,92 +1,105 @@
-const audioContainer=document.querySelector(".audio-container");
+document.addEventListener("DOMContentLoaded", function() {
+  const audioContainer = document.querySelector(".audio-container");
 
-const audios=[
-  {
-    title: "Deep meditation Music",
-    path:"../Images/deep-music.mp3",
-    thumbnail:"./Images/Deep_meditation.jpg"
-  },
-  {
-    title: "Krishna Flute meditation music",
-    path:"../Images/krishna.mp3",
-    thumbnail:"./Images/Krishna.jpg"
-  },
-  {
-    title: "River meditation music",
-    path:"../Images/river-music.mp3",
-    thumbnail:"./Images/River.jpg"
-  },
-  {
-    title: "Piano meditation music",
-    path:"../Images/piano-music.mp3",
-    thumbnail:"./Images/Piano.jpg"
-  },
-  {
-    title: "Himalayas meditation music",
-    path:"../Images/himalaya-music.mp3",
-    thumbnail:"./Images/Himalayas.jpg"
-  }
-]
+  const audios = [
+    {
+      title: "Deep meditation Music",
+      path: "../Images/deep-music.mp3",
+      thumbnail: "./Images/Deep_meditation.jpg"
+    },
+    {
+      title: "Krishna Flute meditation music",
+      path: "../Images/krishna.mp3",
+      thumbnail: "./Images/Krishna.jpg"
+    },
+    {
+      title: "River meditation music",
+      path: "../Images/river-music.mp3",
+      thumbnail: "./Images/River.jpg"
+    },
+    {
+      title: "Piano meditation music",
+      path: "../Images/piano-music.mp3",
+      thumbnail: "./Images/Piano.jpg"
+    },
+    {
+      title: "Himalayas meditation music",
+      path: "../Images/himalaya-music.mp3",
+      thumbnail: "./Images/Himalayas.jpg"
+    }
+  ];
 
+  const audioToInsert = audios.map((item, index) => {
+    return `<div class="col-12 p-0 col-sm-12 col-lg-5 mx-auto glassmorphism">
+      <div id="player" class="d-flex align-items-center rounded-4 justify-content-between p-3 text-uppercase text-white fw-medium">
+        <img src="${item.thumbnail}" alt="" height="80px" style="border-radius: 16px; height:80px;" />
+        <p id="music" class="m-0">${item.title}</p>
+        <button class="icons bg-transparent border-0 text-danger-emphasis fs-2 play-pause-btn" data-id="${index}">
+          <i class="bi bi-play-circle-fill" data-id="${index}"></i>
+        </button>
+      </div>
+    </div>`;
+  }).join("");
+  audioContainer.innerHTML = audioToInsert;
 
-const audioToInsert = audios.map((item,index)=>{
-  return `<div class="col-12 p-0 col-sm-12 col-lg-5 mx-auto glassmorphism">
-  <div
-       id="player"
-       class="d-flex align-items-center rounded-4 justify-content-between p-3 text-uppercase text-white fw-medium">
-    <img
-         src="${item.thumbnail}"
-         alt=""
-         height="80px"
-         style="border-radius: 16px; height:80px;" />
-    <p id="music" class="m-0">${item.title}</p>
-    <button class="icons bg-transparent border-0 text-danger-emphasis fs-2 play-pause-btn" data-id="${index}">
-      <i class="bi bi-play-circle-fill" data-id="${index}"></i>
-    </button>
-  </div>
-</div>`
-}).join("");
-audioContainer.innerHTML=audioToInsert;
+  let currentAudio = {
+    isPlaying: false,
+    audioId: "",
+    audioPath: ""
+  };
 
-let currentAudio={
-  isPlaying:false,
-  audioId:"",
-  audioPath:""
-};
-const playPauseBtns=document.querySelectorAll(".play-pause-btn");
-playPauseBtns.forEach(playPauseBtn=>{
-  playPauseBtn.addEventListener("click",(e)=>{
-    if(currentAudio.isPlaying && currentAudio.audioId === playPauseBtn.dataset.id){ // pause btn pressed
-      playPauseBtns.forEach((btn,index)=>{
-        btn.innerHTML=`<i class="bi bi-play-circle-fill" data-id=${index}></i>`;
-      });
-      currentAudio.audio.pause();
-      currentAudio={
-        isPlaying:false,
-        audioId:"",
-        audioPath:""
-      };
-      console.log("Hi..");
-      return;
-    }
-    else if(currentAudio.isPlaying){ // new audio needs to be played, pause the current audio
-      playPauseBtns.forEach((btn,index)=>{
-        btn.innerHTML=`<i class="bi bi-play-circle-fill" data-id=${index}></i>`;
-      });
-      currentAudio.audio.pause();
-      currentAudio={
-        isPlaying:false,
-        audioId:"",
-        audioPath:""
-      };
-    }
-    // play the audio
-    playPauseBtn.innerHTML='<i class="bi bi-pause-circle-fill"></i>';
-    currentAudio.audioId = playPauseBtn.dataset.id;
-    currentAudio.isPlaying=true;
-    currentAudio.audio = new Audio(audios[playPauseBtn.dataset.id].path);
-    currentAudio.audio.play();
+  const playPauseBtns = document.querySelectorAll(".play-pause-btn");
+  playPauseBtns.forEach(playPauseBtn => {
+    playPauseBtn.addEventListener("click", (e) => {
+      if (currentAudio.isPlaying && currentAudio.audioId === playPauseBtn.dataset.id) {
+        playPauseBtns.forEach((btn, index) => {
+          btn.innerHTML = `<i class="bi bi-play-circle-fill" data-id=${index}></i>`;
+        });
+        currentAudio.audio.pause();
+        currentAudio = {
+          isPlaying: false,
+          audioId: "",
+          audioPath: ""
+        };
+        return;
+      } else if (currentAudio.isPlaying) {
+        playPauseBtns.forEach((btn, index) => {
+          btn.innerHTML = `<i class="bi bi-play-circle-fill" data-id=${index}></i>`;
+        });
+        currentAudio.audio.pause();
+        currentAudio = {
+          isPlaying: false,
+          audioId: "",
+          audioPath: ""
+        };
+      }
+
+      playPauseBtn.innerHTML = '<i class="bi bi-pause-circle-fill"></i>';
+      currentAudio.audioId = playPauseBtn.dataset.id;
+      currentAudio.isPlaying = true;
+      currentAudio.audio = new Audio(audios[playPauseBtn.dataset.id].path);
+      currentAudio.audio.play();
+    });
+  });
 
+  // Scroll to top functionality
+  const scbtn = document.querySelector("#bttbutton");
+  const contentWrapper = document.querySelector(".contentWrapper");
 
+  function scrollUp() {
+    if (contentWrapper.scrollTop > 100) {
+      scbtn.style.display = "block";
+    } else {
+      scbtn.style.display = "none";
+    }
+  }
+
+  scbtn.addEventListener("click", () => {
+    contentWrapper.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
   });
-})
+
+  contentWrapper.addEventListener("scroll", scrollUp);
+});