Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug fix to mute and volume icon #1

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

bug fix to mute and volume icon #1

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d39fd06
Update script.js
mohamadrezahedayat Nov 19, 2020
503fcde
Merge pull request #1 from mohamadrezahedayat/mohamadrezahedayat-patch-1
mohamadrezahedayat Nov 19, 2020
c078c39
Update script.js
mohamadrezahedayat Nov 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 73 additions & 96 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,167 +1,144 @@
const player = document.querySelector('.player');
const video = document.querySelector('.video');
const progressRange = document.querySelector('.progress-range');
const progressBar = document.querySelector('.progress-bar');
const playBtn = document.getElementById('play-btn');
const volumeIcon = document.getElementById('volume-icon');
const volumeRange = document.querySelector('.volume-range');
const volumeBar = document.querySelector('.volume-bar');
const speed = document.querySelector('.player-speed');
const currentTime = document.querySelector('.time-elapsed');
const duration = document.querySelector('.time-duration');
const fullscreenBtn = document.querySelector('.fullscreen');
const player = document.querySelector(".player");
const video = document.querySelector("video");
const progressRange = document.querySelector(".progress-range");
const progressBar = document.querySelector(".progress-bar");
const playBtn = document.getElementById("play-btn");
const volumeIcon = document.getElementById("volume-icon");
const volumeRange = document.querySelector(".volume-range");
const volumeBar = document.querySelector(".volume-bar");
const currentTime = document.querySelector(".time-elapsed");
const duration = document.querySelector(".time-duration");
const speed = document.querySelector(".player-speed");
const fullscreenBtn = document.querySelector(".fullscreen");

// Play & Pause ----------------------------------- //

function showPlayIcon() {
playBtn.classList.replace('fa-pause', 'fa-play');
playBtn.setAttribute('title', 'Play');
playBtn.classList.replace("fa-pause", "fa-play");
playBtn.setAttribute("title", "Play");
}

function togglePlay() {
if (video.paused) {
video.play();
playBtn.classList.replace('fa-play', 'fa-pause');
playBtn.setAttribute('title', 'Pause');
playBtn.classList.replace("fa-play", "fa-pause");
playBtn.setAttribute("title", "Pause");
} else {
video.pause();
showPlayIcon();
}
}

// On video end, show play button icon
video.addEventListener('ended', showPlayIcon);
// On Video End, show play button icon
video.addEventListener("ended", showPlayIcon);

// Progress Bar ---------------------------------- //

// Format current time, duration
// Calculate Display Time Format
function displayTime(time) {
const minutes = Math.floor(time / 60);
let seconds = Math.floor(time % 60);
seconds = seconds > 9 ? seconds : `0${seconds}`;
return `${minutes}:${seconds}`;
}

// Update progress bar as video plays
function updateProgress() {
progressBar.style.width = `${(video.currentTime / video.duration) * 100}%`;
currentTime.textContent = `${displayTime(video.currentTime)} /`;
duration.textContent = `${displayTime(video.duration)}`;
duration.textContent = displayTime(video.duration);
}

// Click to seek within the video
// Click to Seek within the Video
function setProgress(e) {
const newTime = e.offsetX / progressRange.offsetWidth;
progressBar.style.width = `${newTime * 100}%`;
video.currentTime = newTime * video.duration;
}

// Volume Controls --------------------------- //

let lastVolume = 1;

// Mute
function toggleMute() {
volumeIcon.className = '';
if (video.volume) {
lastVolume = video.volume;
video.volume = 0;
volumeIcon.classList.add('fas', 'fa-volume-mute');
volumeIcon.setAttribute('title', 'Unmute');
volumeBar.style.width = 0;
} else {
video.volume = lastVolume;
volumeIcon.classList.add('fas', 'fa-volume-up');
volumeIcon.setAttribute('title', 'Mute');
volumeBar.style.width = `${lastVolume * 100}%`;
}
}

// Volume Bar
function changeVolume(e) {
let volume = e.offsetX / volumeRange.offsetWidth;
// Rounding volume up or down
// Rounding Volume up or down
if (volume < 0.1) {
volume = 0;
}
if (volume > 0.9) {
} else if (volume > 0.9) {
volume = 1;
}
volumeBar.style.width = `${volume * 100}%`;
video.volume = volume;
// Change icon depending on volume
volumeIcon.className = '';
// change icon depending to volume
setVolumeIcon(volume);

}
//set volumeIcon classlist
function setVolumeIcon(volume) {
volumeIcon.className = "";
if (volume > 0.7) {
volumeIcon.classList.add('fas', 'fa-volume-up');
volumeIcon.classList.add("fas", "fa-volume-up");
} else if (volume < 0.7 && volume > 0) {
volumeIcon.classList.add('fas', 'fa-volume-down');
volumeIcon.classList.add("fas", "fa-volume-down");
} else if (volume === 0) {
volumeIcon.classList.add('fas', 'fa-volume-off');
volumeIcon.classList.add("fas", "fa-volume-off");
}
}
// Mute/UnMute
function toggleMute() {
if (video.volume) {
lastVolume = video.volume;
video.volume = 0;
volumeBar.style.width = 0;
setVolumeIcon(video.volume);
volumeIcon.setAttribute("title", "Unmute");
} else {
video.volume = lastVolume;
volumeBar.style.width = `${lastVolume * 100}%`;
setVolumeIcon(video.volume);
volumeIcon.setAttribute("title", "Mute");
}
lastVolume = volume;
}

// Change Playback Speed -------------------- //

function changeSpeed() {
video.playbackRate = speed.value;
}

// Fullscreen ------------------------------- //

/* View in fullscreen */
function openFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
/* Firefox */
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
/* Chrome, Safari and Opera */
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
/* IE/Edge */
element.msRequestFullscreen();
function openFullscreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
/* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
/* IE11 */
elem.msRequestFullscreen();
}
video.classList.add('video-fullscreen');
video.classList.add("video-fullscreen");
}

/* Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
/* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
/* Chrome, Safari and Opera */
/* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
/* IE/Edge */
/* IE11 */
document.msExitFullscreen();
}
video.classList.remove('video-fullscreen');
video.classList.remove("video-fullscreen");
}

let fullscreen = false;

// Toggle fullscreen
// toggle fullscreen
function toggleFullscreen() {
if (!fullscreen) {
openFullscreen(player);
} else {
closeFullscreen();
}
!fullscreen?openFullscreen(player): closeFullscreen();
fullscreen = !fullscreen;
}

// Event Listeners
playBtn.addEventListener('click', togglePlay);
video.addEventListener('click', togglePlay);
video.addEventListener('timeupdate', updateProgress);
video.addEventListener('canplay', updateProgress);
progressRange.addEventListener('click', setProgress);
volumeRange.addEventListener('click', changeVolume);
volumeIcon.addEventListener('click', toggleMute);
speed.addEventListener('change', changeSpeed);
fullscreenBtn.addEventListener('click', toggleFullscreen);
//Event Listeners
playBtn.addEventListener("click", togglePlay);
video.addEventListener("click", togglePlay);
video.addEventListener("timeupdate", updateProgress);
video.addEventListener("canplay", updateProgress);
progressRange.addEventListener("click", setProgress);
volumeRange.addEventListener("click", changeVolume);
volumeIcon.addEventListener("click", toggleMute);
speed.addEventListener("change", changeSpeed);
fullscreenBtn.addEventListener("click", toggleFullscreen);