Player/js/player.js

function Player(sources) {
	this.playlist = sources;
	this.current = {};
	this.volume = 100;
	this.currentSong = -1;
	this.isPlaying = false;
	this.isMute = false;
	this.rate = 500;
	this.YTplayer = false;
	this.controls = {};
	this.interval = null;

	this.init = function() {
		this.loadYTplayer();
		this.bindControls();
		this.bindEvents();
	}

	this.bindEvents = function() {
		this.controls.toggle.addEventListener('click', this.toggle);
		this.controls.previous.addEventListener('click', this.previous);
		this.controls.next.addEventListener('click', this.next);
		this.controls.bar.addEventListener('click', this.seekPosition);
		this.controls.volume.addEventListener('input', this.setVolume);
		this.controls.volumeMute.addEventListener('click', this.setMute);
	}

	this.bindControls = function() {
		this.controls.toggle = document.getElementById('player-toggle');
		this.controls.next = document.getElementById('player-next');
		this.controls.previous = document.getElementById('player-previous');
		this.controls.volume = document.getElementById('player-volume-bar');
		this.controls.volumeSet = document.getElementById('player-volume-set');
		this.controls.volumeMute = document.getElementById('player-volume-mute');
		this.controls.bar = document.getElementById('player-bar');
		this.controls.buffer = document.getElementById('player-buffer');
		this.controls.played = document.getElementById('player-played');
		this.controls.cursor = document.getElementById('player-cursor');
		this.controls.duration = document.getElementById('player-duration');
		this.controls.currentTime = document.getElementById('player-currentTime');
		this.controls.title = document.getElementById('player-title');
	}

	this.getVideoID = function(url) {
		re = /\?v=([^&]*)/;
		match = re.exec(url);
		return (match && match.length >= 2 ? match[1] : '');
	}

	this.newSong = function (url) {
		if (!this.YTplayer) {
			this.YTplayer = new YT.Player('YTplayer', {
				height: '0',
				width: '0',
				videoId: this.getVideoID(url),
				events: {
					'onReady': onPlayerReady,
					'onStateChange': onPlayerStateChange
				}
			});
		} else {
			this.YTplayer.loadVideoById(this.getVideoID(url));
		}
		this.isPlaying = true;
	}

	this.loadYTplayer = function() {
		var tag = document.createElement('script');
		tag.src = "https://www.youtube.com/iframe_api";
		var firstScriptTag = document.getElementsByTagName('script')[0];
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	};

	this.getState = function() {
		var current = this.YTplayer.getCurrentTime();
		var bufferized = this.YTplayer.getVideoLoadedFraction() * 100;
		var duration = this.current.duration;
		var fraction = (current / duration) * 100;
		this.controls.played.style.width = fraction + '%';
		this.controls.buffer.style.width = bufferized + '%';
		this.controls.cursor.style.left = fraction + '%';
		current = new Date(current * 1000);
		current = current.toTimeString().substr(3, 6);
		this.controls.currentTime.textContent = current;
	}

	this.seekPosition = function() {
		var duration = evaplayer.current.duration;
		var fraction = (event.offsetX / evaplayer.controls.bar.clientWidth) * 100;
		var timeseeked = (duration * fraction) / 100;
		evaplayer.YTplayer.seekTo(timeseeked);
	};

	this.setVolume = function() {
		evaplayer.YTplayer.setVolume(event.target.value);
		evaplayer.volume = event.target.value;
	};

	this.setMute = function() {
		if (!evaplayer.isMute) {
			evaplayer.YTplayer.mute();
			evaplayer.controls.volume.value = 0;
			evaplayer.controls.volumeMute.style.textDecoration = 'line-through';
		} else {
			evaplayer.YTplayer.unMute();
			evaplayer.controls.volume.value = evaplayer.volume;
			evaplayer.controls.volumeMute.style.textDecoration = 'none';
		}
		evaplayer.isMute = !evaplayer.isMute;
	};

	this.toggle = function() {
		if (evaplayer.isPlaying)
			evaplayer.YTplayer.pauseVideo();
		else
			evaplayer.YTplayer.playVideo();
		evaplayer.isPlaying = !evaplayer.isPlaying;
		return evaplayer;
	};

	this.next = function() {
		evaplayer.currentSong++;
		if (evaplayer.currentSong > evaplayer.playlist.length - 1)
			evaplayer.currentSong = 0;
		evaplayer.newSong(evaplayer.playlist[evaplayer.currentSong].link);
	};

	this.previous = function() {
		evaplayer.currentSong--;
		if (evaplayer.currentSong < 0)
			evaplayer.currentSong = evaplayer.playlist.length - 1;
		evaplayer.newSong(evaplayer.playlist[evaplayer.currentSong].link);
	};

	this.updateInfo = function() {
		var data = this.YTplayer.getVideoData();
		var duration = this.YTplayer.getDuration();
		this.current = {
			author: data.author,
			title: data.title,
			duration: duration
		};
		var title = this.current.title;
		if (this.current.author)
			title = this.current.author + ' - ' + title;
		this.controls.title.textContent = title;
		var duration = this.current.duration;
		duration = new Date(duration * 1000);
		duration = duration.toTimeString().substr(3, 6);
		this.controls.duration.textContent = duration;
	};

	function onPlayerReady(event) {
		event.target.playVideo();
		if (!evaplayer.interval)
			evaplayer.interval = setInterval(function() {
				evaplayer.getState();
			}, evaplayer.rate);
	}

	function onPlayerStateChange(event) {
		switch (event.data) {
			case YT.PlayerState.PLAYING: 
				evaplayer.isPlaying = true;
				evaplayer.updateInfo();
				evaplayer.controls.toggle.textContent = '◻';
				if (!evaplayer.interval)
					evaplayer.interval = setInterval(function() {
						evaplayer.getState();
					}, evaplayer.rate);
				break;
			case YT.PlayerState.ENDED:
				evaplayer.next();
				break;
			case YT.PlayerState.PAUSED:
				evaplayer.isPlaying = false;
				evaplayer.controls.toggle.textContent = '▻';
				clearInterval(evaplayer.interval);
				evaplayer.interval = null;
				break;
		}
	}

	this.init();
};

function onYouTubeIframeAPIReady() {
	evaplayer.next();
}