Merge pull request #16 from epicufscar/development

Galeria de temas, player visualizável e pequenos problemas resolvidos
epicufscar · Nov 19, 2018 · ff4e552 · ff4e552
2 parents b65c0bf + d27675d
commit ff4e552
Show file tree

Hide file tree

Showing 8 changed files with 308 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -3,20 +3,18 @@
 <head>
 	<meta charset="utf-8" />
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>Comming Soon</title>
+	<title>Começando em breve</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 
 	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
-	<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
-	<link rel="stylesheet" href="themes/blue_flare.css">
+	<link rel="stylesheet" type="text/css" media="screen" href="styles/main.css" />
 
-	<script src="https://codepen.io/Alynva/pen/dQzgqp.js"></script>
 	<script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
-	<script src="main.js"></script>
-	<script src="hotkeys.js"></script>
+	<script src="scripts/main.js"></script>
+	<script src="scripts/keycodes.js"></script>
+	<script src="scripts/hotkeys.js"></script>
 </head>
 <body>
-	<div id="player" tabindex="-1"></div>
 	<aside>
 		<details>
 			<summary>Opções</summary>
@@ -33,10 +31,10 @@
 						<a href="#config_atal">Atalhos do teclado</a>
 						<hr />
 						<div id="our-media">
-							<a href="http://epic.ufscar.site" target="_blank"><i class="fas fa-globe fa-lg fa-fw"></i></a>
-							<a href="https://www.facebook.com/epicufscar" target="_blank"><i class="fab fa-facebook fa-lg fa-fw"></i></a>
-							<a href="https://www.linkedin.com/company/epic-ufscar/" target="_blank"><i class="fab fa-linkedin fa-lg fa-fw"></i></a>
-							<a href="https://github.com/epicufscar" target="_blank"><i class="fab fa-github-square fa-lg fa-fw"></i></a>
+							<a href="http://epic.ufscar.site" target="_blank"><i class="fas fa-globe fa-lg"></i></a>
+							<a href="https://www.facebook.com/epicufscar" target="_blank"><i class="fab fa-facebook fa-lg"></i></a>
+							<a href="https://www.linkedin.com/company/epic-ufscar/" target="_blank"><i class="fab fa-linkedin fa-lg"></i></a>
+							<a href="https://github.com/epicufscar" target="_blank"><i class="fab fa-github-square fa-lg"></i></a>
 						</div>
 					</nav>
 
@@ -105,6 +103,28 @@ <h1>Música de fundo</h1>
 								<h1>Temas</h1>
 							</header>
 							<article>
+								<form id="fm_theme">
+									<label>
+										<input type="radio" name="theme" value="none" checked />
+										<img class="theme_preview" src="themes/none.png" alt="Nenhum tema">
+									</label>
+									<label>
+										<input type="radio" name="theme" value="blue_flare" />
+										<img class="theme_preview" src="themes/blue_flare/blue_flare.png" alt="Capa do tema Blue Flare">
+									</label>
+								</form>
+								<section>
+									<header>
+										<h2>Alterar tema</h2>
+										<p>Para alguns temas, você poderá alterar suas configurações
+											.</p>
+									</header>
+									<article>
+										<form id="fm_config_thema">
+
+										</form>
+									</article>
+								</section>
 							</article>
 						</section>
 						<hr />
@@ -209,6 +229,7 @@ <h1>Atalhos do teclado</h1>
 		</details>
 	</aside>
 	<main>
+		<div id="player" tabindex="-1"></div>
 		<h6 id="h_org"></h6>
 		<h1 id="h_title"></h1>
 		<span id="s_count"></span>

diff --git a/hotkeys.js → scripts/hotkeys.js b/hotkeys.js → scripts/hotkeys.js
@@ -56,7 +56,6 @@ const definirAtalhoTocarMusica = () => {
 	const key = atalhos.tocarMusica || atalhos._tocarMusica
 	hotkeys(key, playSongHandle)
 	atualizarAtalhoNoInput("#ipt_keyword_play_music", key)
-	console.log('atalho tocar', key)
 }
 const definirAtalhoPausarMusica = () => {
 	const key = atalhos.pausarMusica || atalhos._pausarMusica

diff --git a/scripts/keycodes.js b/scripts/keycodes.js
@@ -0,0 +1,174 @@
+const keyCodes = {
+	0: 'That key has no keycode',
+	3: 'break',
+	8: 'backspace / delete',
+	9: 'tab',
+	12: 'clear',
+	13: 'enter',
+	16: 'shift',
+	17: 'ctrl',
+	18: 'alt',
+	19: 'pause/break',
+	20: 'caps lock',
+	21: 'hangul',
+	25: 'hanja',
+	27: 'escape',
+	28: 'conversion',
+	29: 'non-conversion',
+	32: 'spacebar',
+	33: 'page up',
+	34: 'page down',
+	35: 'end',
+	36: 'home',
+	37: 'left',
+	38: 'up',
+	39: 'right',
+	40: 'down',
+	41: 'select',
+	42: 'print',
+	43: 'execute',
+	44: 'Print Screen',
+	45: 'insert',
+	46: 'delete',
+	47: 'help',
+	48: '0',
+	49: '1',
+	50: '2',
+	51: '3',
+	52: '4',
+	53: '5',
+	54: '6',
+	55: '7',
+	56: '8',
+	57: '9',
+	58: ':',
+	59: 'semicolon (firefox), equals',
+	60: '<',
+	61: 'equals (firefox)',
+	63: 'ß',
+	64: '@ (firefox)',
+	65: 'a',
+	66: 'b',
+	67: 'c',
+	68: 'd',
+	69: 'e',
+	70: 'f',
+	71: 'g',
+	72: 'h',
+	73: 'i',
+	74: 'j',
+	75: 'k',
+	76: 'l',
+	77: 'm',
+	78: 'n',
+	79: 'o',
+	80: 'p',
+	81: 'q',
+	82: 'r',
+	83: 's',
+	84: 't',
+	85: 'u',
+	86: 'v',
+	87: 'w',
+	88: 'x',
+	89: 'y',
+	90: 'z',
+	91: 'Windows Key / Left ⌘ / Chromebook Search key',
+	92: 'right window key',
+	93: 'Windows Menu / Right ⌘',
+	95: 'sleep',
+	96: 'numpad 0',
+	97: 'numpad 1',
+	98: 'numpad 2',
+	99: 'numpad 3',
+	100: 'numpad 4',
+	101: 'numpad 5',
+	102: 'numpad 6',
+	103: 'numpad 7',
+	104: 'numpad 8',
+	105: 'numpad 9',
+	106: 'multiply',
+	107: 'add',
+	108: 'numpad period (firefox)',
+	109: 'subtract',
+	110: 'decimal point',
+	111: 'divide',
+	112: 'f1',
+	113: 'f2',
+	114: 'f3',
+	115: 'f4',
+	116: 'f5',
+	117: 'f6',
+	118: 'f7',
+	119: 'f8',
+	120: 'f9',
+	121: 'f10',
+	122: 'f11',
+	123: 'f12',
+	124: 'f13',
+	125: 'f14',
+	126: 'f15',
+	127: 'f16',
+	128: 'f17',
+	129: 'f18',
+	130: 'f19',
+	131: 'f20',
+	132: 'f21',
+	133: 'f22',
+	134: 'f23',
+	135: 'f24',
+	144: 'num lock',
+	145: 'scroll lock',
+	160: '^',
+	161: '!',
+	162: '؛ (arabic semicolon)',
+	163: '#',
+	164: '$',
+	165: 'ù',
+	166: 'page backward',
+	167: 'page forward',
+	168: 'refresh',
+	169: 'closing paren (AZERTY)',
+	170: '*',
+	171: '~ + * key',
+	172: 'home key',
+	173: 'minus (firefox), mute/unmute',
+	174: 'decrease volume level',
+	175: 'increase volume level',
+	176: 'next',
+	177: 'previous',
+	178: 'stop',
+	179: 'play/pause',
+	180: 'e-mail',
+	181: 'mute/unmute (firefox)',
+	182: 'decrease volume level (firefox)',
+	183: 'increase volume level (firefox)',
+	186: 'semi-colon / ñ',
+	187: 'equal sign',
+	188: 'comma',
+	189: 'dash',
+	190: 'period',
+	191: 'forward slash / ç',
+	192: 'grave accent / ñ / æ / ö',
+	193: '?, / or °',
+	194: 'numpad period (chrome)',
+	219: 'open bracket',
+	220: 'back slash',
+	221: 'close bracket / å',
+	222: 'single quote / ø / ä',
+	223: '`',
+	224: 'left or right ⌘ key (firefox)',
+	225: 'altgr',
+	226: '< /git >, left back slash',
+	230: 'GNOME Compose Key',
+	231: 'ç',
+	233: 'XF86Forward',
+	234: 'XF86Back',
+	235: 'non-conversion',
+	240: 'alphanumeric',
+	242: 'hiragana/katakana',
+	243: 'half-width/full-width',
+	244: 'kanji',
+	251: "unlock trackpad (Chrome/Edge)",
+	255: 'toggle touchpad',
+};
diff --git a/main.js → scripts/main.js b/main.js → scripts/main.js
@@ -11,6 +11,8 @@ window.onload = () => {
 
 	document.querySelector("#fm_song").addEventListener("submit", fmLoadPlaylistHandle)
 
+	document.querySelector("#fm_theme").addEventListener("change", fmThemeHandle)
+
 	// document.querySelector("#btn_prev").addEventListener("click", prevSongHandle)
 	// document.querySelector("#btn_play_pause").addEventListener("click", playPauseSongHandle)
 	// document.querySelector("#btn_next").addEventListener("click", nextSongHandle)
@@ -144,8 +146,8 @@ const fmLoadPlaylistHandle = () => {
 
 function onYouTubeIframeAPIReady() {
 	player = new YT.Player('player', {
-		height: '1',
-		width: '1',
+		// height: '1',
+		// width: '1',
 		events: {
 			'onReady': onPlayerReady,
 			'onStateChange': onPlayerStateChange,
@@ -184,4 +186,36 @@ const pauseSongHandle = () => {
 }
 const nextSongHandle = () => {
 	player.nextVideo()
+}
+
+const fmThemeHandle = e => {
+	const theme_name = e.target.value,
+		style_id = "theme_style",
+		script_id = "theme_script"
+
+	let style = document.head.querySelector(`#${style_id}`),
+		script = document.head.querySelector(`#${script_id}`)
+
+	if (theme_name != "none") {
+		if (style === null) {
+			style = document.createElement("link")
+			style.setAttribute("rel", "stylesheet")
+			style.setAttribute("type", "text/css")
+			style.setAttribute("id", style_id)
+			document.head.appendChild(style)
+		}
+
+		style.setAttribute("href", `themes/${theme_name}/${theme_name}.css`)
+
+		if (script === null) {
+			script = document.createElement("script")
+			script.setAttribute("id", script_id)
+			document.head.appendChild(script)
+		}
+
+		script.setAttribute("src", `themes/${theme_name}/${theme_name}.css`)
+	} else {
+		if (style !== null) style.parentElement.removeChild(style)
+		if (script !== null) script.parentElement.removeChild(script)
+	}
 }