Skip to content

Commit

Permalink
Merge pull request #1508 from Priyanshu2746/fix-issue-1423
Browse files Browse the repository at this point in the history 
Scroll-to-top button functionality to allow users to smoothly navigate to the top of the AR Meditation Page.
  • Loading branch information
@akshitagupta15june
akshitagupta15june committed Apr 17, 2024
2 parents dfeb095 + 56f16ce commit 5660f19
Show file tree
Hide file tree
Showing 2 changed files with 198 additions and 85 deletions.
183 changes: 98 additions & 85 deletions AR_Meditate/meditation.js
View file
Original file line number Diff line number Diff line change
@@ -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);
});
100 changes: 100 additions & 0 deletions Pomodro_page/reward.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,3 +297,103 @@ footer img{
}
*/

/* Common styles for responsiveness */
@media only screen and (max-width: 768px) {
.container-header {
padding: 50px;
}
.header {
padding: 30px;
}
.content {
margin: 30px;
font-size: 18px;
}
.content img {
margin-right: 10px;
}
.pomodoro_container p {
font-size: 1.2rem;
}
.inline-text {
margin-top: 1rem;
margin-left: 1rem;
font-size: 1.5rem;
}
.pomodoro-text {
margin-top: 0.5rem;
margin-left: 1rem;
}
}

/* Styles for smaller screens */
@media only screen and (max-width: 576px) {
.container-header {
margin: 50px auto;
padding: 30px;
}
.header h1 {
font-size: 30px;
}
.header p {
font-size: 18px;
}
.content {
margin: 20px;
font-size: 16px;
}
.content img {
width: 100%;
margin-right: 0;
}
.pomodoro_container p {
font-size: 1rem;
}
.inline-text {
font-size: 1.2rem;
margin-left: 0.5rem;
}
.pomodoro-text {
margin-left: 0.5rem;
}
}

/* Styles for extra small screens */
@media only screen and (max-width: 360px) {
.header h1 {
font-size: 24px;
}
.header p {
font-size: 16px;
}
.content {
margin: 10px;
font-size: 14px;
}
.inline-text {
font-size: 1rem;
margin-left: 0.2rem;
}
.pomodoro-text {
margin-left: 0.2rem;
}
}

/* Styles for smaller screens */
@media only screen and (max-width: 320px) {
.header h1 {
font-size: 20px;
}
.header p {
font-size: 14px;
}
.content {
font-size: 12px;
}
.inline-text {
font-size: 0.8rem;
}
.pomodoro-text {
margin-left: 0.1rem;
}
}

0 comments on commit 5660f19

Please sign in to comment.