JavaScript 2022

		
001/* CODE IS IN DIRE NEED OF REFACTORING, BUT WORKS! */
		
002
		
003window.onload = function(){
		
004	
		
005	// SET UP DOM ELEMS
		
006		// vid1
		
007	let recording1 = 		document.getElementById("recording1"); 
		
008	let playPauseButton1 = 	document.getElementById("playPauseButton1");
		
009	let makeBigButton1 =	document.getElementById("makeBigButton1");
		
010	let makeSmallButton1 =	document.getElementById("makeSmallButton1");
		
011	let makeNormalButton1 =	document.getElementById("makeNormalButton1");
		
012	const controlSet1 = document.getElementsByClassName('controlSet1');
		
013	const vidContainer1 = document.getElementById("vidContainer1");
		
014	const currentTimeElement1 = document.getElementById('current1');
		
015	const durationTimeElement1 = document.getElementById('duration1');
		
016	const progress1  = document.getElementById('vid-prog1');
		
017	const progressbar1  = document.getElementById('vid-prog-fill1');
		
018	//const size1 = document.getElementById('size1');
		
019	
		
020		// vid 2
		
021	
		
022	let recording2 = 		document.getElementById("recording2"); 
		
023	let playPauseButton2 = 	document.getElementById("playPauseButton2");
		
024	let makeBigButton2 =	document.getElementById("makeBigButton2");
		
025	let makeSmallButton2 =	document.getElementById("makeSmallButton2");
		
026	let makeNormalButton2 =	document.getElementById("makeNormalButton2");
		
027	const controlSet2 = document.getElementsByClassName('controlSet2');
		
028	const vidContainer2 = document.getElementById("vidContainer2");
		
029	const currentTimeElement2 = document.getElementById('current2');
		
030	const durationTimeElement2 = document.getElementById('duration2');
		
031	const progress2  = document.getElementById('vid-prog2');
		
032	const progressbar2  = document.getElementById('vid-prog-fill2');
		
033	
		
034	
		
035	let recording3 = 		document.getElementById("recording3"); 
		
036	let playPauseButton3 = 	document.getElementById("playPauseButton3");
		
037	let makeBigButton3 =	document.getElementById("makeBigButton3");
		
038	let makeSmallButton3 =	document.getElementById("makeSmallButton3");
		
039	let makeNormalButton3 =	document.getElementById("makeNormalButton3");
		
040	const controlSet3 = document.getElementsByClassName('controlSet3');
		
041	const vidContainer3 = document.getElementById("vidContainer3");
		
042	const currentTimeElement3 = document.getElementById('current3');
		
043	const durationTimeElement3 = document.getElementById('duration3');
		
044	const progress3  = document.getElementById('vid-prog3');
		
045	const progressbar3  = document.getElementById('vid-prog-fill3');
		
046	// SET SIZE BUTTONS TO DEFAULT
		
047	
		
048	makeNormalButton1.style.background = 'green';
		
049	makeNormalButton1.style.color = 'white';
		
050	//vidContainer1.style.width = "720px";
		
051	makeNormalButton2.style.background = 'green';
		
052	makeNormalButton2.style.color = 'white';
		
053	//vidContainer2.style.width = "720px";
		
054	makeNormalButton3.style.background = 'green';
		
055	makeNormalButton3.style.color = 'white';
		
056	//vidContainer3.style.width = "720px";
		
057	
		
058	// PLAY / PLAUSE
		
059	
		
060	playPauseButton1.onclick =function(){
		
061		let vid = recording1;
		
062		if (vid.paused) 
		
063		{
		
064			vid.play(); 
		
065			this.innerHTML='<i class="fa fa-pause"></i>';
		
066		}
		
067		else 
		
068		{
		
069			vid.pause();
		
070			this.innerHTML='<i class="fa fa-play"></i>';
		
071		}
		
072	}
		
073	
		
074	playPauseButton2.onclick =function(){
		
075		let vid = recording2;
		
076		if (vid.paused) 
		
077		{
		
078			vid.play(); 
		
079			this.innerHTML='<i class="fa fa-pause"></i>';
		
080		}
		
081		else 
		
082		{
		
083			vid.pause();
		
084			this.innerHTML='<i class="fa fa-play"></i>';
		
085		}
		
086	}
		
087	
		
088	playPauseButton3.onclick =function(){
		
089		let vid = recording3;
		
090		if (vid.paused) 
		
091		{
		
092			vid.play(); 
		
093			this.innerHTML='<i class="fa fa-pause"></i>';
		
094		}
		
095		else 
		
096		{
		
097			vid.pause();
		
098			this.innerHTML='<i class="fa fa-play"></i>';
		
099		}
		
	}
		

		
	// MAKE BIG
		

		
	makeBigButton1.onclick = function(){
		
		let vid = vidContainer1;
		
		vid.style.width = "1060px";
		
		progress1.style.width = "1060px"
		
		recording1.style.width = "1060px";
		
		//size1.setAttribute("value", "1060px");
		
		changeNodeSetDisplayToInline(controlSet1);
		
		activateButton(this)		
		
	} 
		
	
		
	makeBigButton2.onclick = function(){
		
		let vid = vidContainer2;
		
		vid.style.width = "1060px";
		
		progress2.style.width = "1060px"
		
		changeNodeSetDisplayToInline(controlSet2);
		
		activateButton(this)		
		
	}
		
	
		
	makeBigButton3.onclick = function(){
		
		let vid = vidContainer3;
		
		vid.style.width = "1060px";
		
		progress3.style.width = "1060px"
		
		changeNodeSetDisplayToInline(controlSet3);
		
		activateButton(this)		
		
	}
		

		
	// MAKE SMALL
		
	
		
	makeSmallButton1.onclick = function(){
		
		let vid = vidContainer1;
		
		vid.style.width = "320px";
		
		progress1.style.width = "320px";
		
		recording1.style.width = "320px";
		
		changeNodeSetDisplayToBlock(controlSet1);
		
		activateButton(this)
		
	} 
		
	makeSmallButton2.onclick = function(){
		
		let vid = vidContainer2;
		
		vid.style.width = "320px";
		
		progress2.style.width = "320px"
		
		changeNodeSetDisplayToBlock(controlSet2);
		
		activateButton(this)
		
	} 
		
	
		
	makeSmallButton3.onclick = function(){
		
		let vid = vidContainer3;
		
		vid.style.width = "320px";
		
		progress3.style.width = "320px"
		
		changeNodeSetDisplayToBlock(controlSet3);
		
		activateButton(this)
		
	} 
		
	
		
	// MAKE NORMAL 
		
	makeNormalButton1.onclick = function(){
		
		let vid = vidContainer1;
		
		vid.style.width = "720px";
		
		progress1.style.width = "720px";
		
		recording1.style.width = "720px";
		
		changeNodeSetDisplayToInline(controlSet1);
		
		activateButton(this)
		
	}
		
	
		
	makeNormalButton2.onclick = function(){
		
		let vid = vidContainer2;
		
		vid.style.width = "720px";
		
		progress2.style.width = "720px"	
		
		changeNodeSetDisplayToInline(controlSet2);		
		
		activateButton(this)
		
	}
		
	
		
	makeNormalButton3.onclick = function(){
		
		let vid = vidContainer3;
		
		vid.style.width = "720px";
		
		recording3.style.width = "720px";
		
		progress3.style.width = "720px";
		
		changeNodeSetDisplayToInline(controlSet3);
		
		activateButton(this)
		
	}
		

		
	function activateButton(elem)
		
	{
		
		clearBackgroundButtonColour()
		
		elem.style.background = 'green';
		
		elem.style.color = 'white';	
		
	}
		
	function clearBackgroundButtonColour()
		
	{
		
		makeNormalButton1.style.background = 'WhiteSmoke';
		
		makeBigButton1.style.background = 'WhiteSmoke';
		
		makeSmallButton1.style.background = 'WhiteSmoke';
		
		makeNormalButton1.style.color = 'black';
		
		makeBigButton1.style.color = 'black';
		
		makeSmallButton1.style.color = 'black';
		
		
		
		makeNormalButton2.style.background = 'WhiteSmoke';
		
		makeBigButton2.style.background = 'WhiteSmoke';
		
		makeSmallButton2.style.background = 'WhiteSmoke';
		
		makeNormalButton2.style.color = 'black';
		
		makeBigButton2.style.color = 'black';
		
		makeSmallButton2.style.color = 'black';
		
		
		
		makeNormalButton3.style.background = 'WhiteSmoke';
		
		makeBigButton3.style.background = 'WhiteSmoke';
		
		makeSmallButton3.style.background = 'WhiteSmoke';
		
		makeNormalButton3.style.color = 'black';
		
		makeBigButton3.style.color = 'black';
		
		makeSmallButton3.style.color = 'black';
		
	}
		
	
		
	// VOLUME
		
	
		
	const vol1 = document.getElementById('vol1');
		
	vol1.addEventListener('mousemove', (e)=>{
		
		recording1.volume = e.target.value;
		
	});
		
	
		
	const vol2 = document.getElementById('vol2');
		
	vol2.addEventListener('mousemove', (e)=>{
		
		recording2.volume = e.target.value;
		
	});
		
	
		
	const vol3 = document.getElementById('vol3');
		
	vol3.addEventListener('mousemove', (e)=>{
		
		recording3.volume = e.target.value;
		
	});
		
	
		
	/*
		
	size1.addEventListener('mousemove', (e)=>{
		
		console.log(e.target.value);
		
		recording1.style.width = `${e.target.value}px`;
		
		progress1.style.width = `${e.target.value}px`;
		
		size1.setAttribute("value", `${e.target.value}px`);
		
	});
		
	*/
		
	
		
	
		
	// CURRENT TIMES AND DURATIONS
		
	
		
	const currentTime1 = () => {
		
		let currentMins1 = Math.floor(recording1.currentTime / 60);
		
		let currentSecs1 = Math.floor(recording1.currentTime - currentMins1 * 60); 
		
		let durationMins1 = Math.floor(recording1.duration / 60);
		
		let durationSecs1 = Math.floor(recording1.duration - durationMins1 * 60);
		
		currentTimeElement1.innerHTML = currentMins1+':'+make2Zeros(currentSecs1);
		
		durationTimeElement1.innerHTML = durationMins1+':'+make2Zeros(durationSecs1);
		
	}
		
	
		
	const currentTime2 = () => {
		
		let currentMins2 = Math.floor(recording2.currentTime / 60);
		
		let currentSecs2 = Math.floor(recording2.currentTime - currentMins2 * 60); 
		
		let durationMins2 = Math.floor(recording2.duration / 60);
		
		let durationSecs2 = Math.floor(recording2.duration - durationMins2 * 60);
		
		currentTimeElement2.innerHTML = currentMins2+':'+make2Zeros(currentSecs2);
		
		durationTimeElement2.innerHTML = durationMins2+':'+make2Zeros(durationSecs2);
		
	}
		
	
		
	const currentTime3 = () => {
		
		let currentMins3 = Math.floor(recording3.currentTime / 60);
		
		let currentSecs3 = Math.floor(recording3.currentTime - currentMins3 * 60); 
		
		let durationMins3 = Math.floor(recording3.duration / 60);
		
		let durationSecs3 = Math.floor(recording3.duration - durationMins3 * 60);
		
		currentTimeElement3.innerHTML = currentMins3+':'+make2Zeros(currentSecs3);
		
		durationTimeElement3.innerHTML = durationMins3+':'+make2Zeros(durationSecs3);
		
	}
		
	
		
	recording1.addEventListener('timeupdate',currentTime1);
		
	recording2.addEventListener('timeupdate',currentTime2);	
		
	recording3.addEventListener('timeupdate',currentTime3);
		
	
		
	// PROGRESS BARS
		
	recording1.addEventListener('timeupdate', () => {
		
		const percentage1 = (recording1.currentTime / recording1.duration) *100;
		
		
		
		progressbar1.style.width = `${percentage1}%`;
		
	});
		
	
		
	recording2.addEventListener('timeupdate', () => {
		
		const percentage2 = (recording2.currentTime / recording2.duration) *100;
		
		
		
		progressbar2.style.width = `${percentage2}%`;
		
	});
		
	
		
	recording3.addEventListener('timeupdate', () => {
		
		const percentage3 = (recording3.currentTime / recording3.duration) *100;
		
		
		
		progressbar3.style.width = `${percentage3}%`;
		
	});
		
	
		
	
		
	// CHANGE PROGRESS BARS ON CLICK
		
	
		
	progress1.addEventListener('click',(e) => {
		
		const progTime1 = (e.offsetX / progress1.offsetWidth)*recording1.duration;
		
		console.log(progTime1)
		
		recording1.currentTime = progTime1;
		
		
		
	});
		
	
		
	progress2.addEventListener('click',(e) => {
		
		const progTime2 = (e.offsetX / progress2.offsetWidth)*recording2.duration;
		
		console.log(progTime2)
		
		recording2.currentTime = progTime2;
		
		
		
	});
		
	
		
	progress3.addEventListener('click',(e) => {
		
		const progTime3 = (e.offsetX / progress3.offsetWidth)*recording3.duration;
		
		console.log(progTime3)
		
		recording3.currentTime = progTime3;
		
		
		
	});
		
}
		

		
function make2Zeros(num)
		
{
		
	return num<10 ?'0'+num : num;
		
}
		

		
function changeNodeSetDisplayToBlock(nodes)
		
{
		
	for(let i = 0; i<nodes.length;i++)
		
	{
		
		nodes[i].style.display = 'block';
		
	}
		
}
		

		
function changeNodeSetDisplayToInline(nodes)
		
{
		
	for(let i = 0; i<nodes.length;i++)
		
	{
		
		nodes[i].style.display = 'inline';
		
	}
		
}