Merge pull request #12 from aykutkardas/main

Loading feature has been added to fetch songs.
boratanrikulu · Jan 16, 2021 · 3601577 · 3601577
2 parents 0c296d6 + 8acd5bb
commit 3601577
Show file tree

Hide file tree

Showing 5 changed files with 207 additions and 76 deletions.
diff --git a/assets/javascript/main.js b/assets/javascript/main.js
@@ -40,29 +40,41 @@ function getCookie(name) {
     cookie.includes(name + "=")
   );
   if (currentCookie == null) {
-    return ""
+    return "";
   }
 
   var value = currentCookie.split(name + "=");
   return value[1];
 }
 
 async function getCurrentPage() {
+  const loadingEl = document.querySelector(".lirik-loading");
+
+  loadingEl.style.visibility = "visible";
+
   fetch("/spotify")
     .then(function (response) {
       return response.text();
     })
     .then(function (html) {
+      loadingEl.style.display = "hidden";
       document.querySelector("html").innerHTML = html;
     })
     .catch(function (err) {
+      loadingEl.style.display = "hidden";
       console.warn("Something went wrong.", err);
     });
 }
 
 function checkChanges() {
   if (document.hidden) return;
-  if (getCookie("AccessToken") == "" && getCookie("RefreshToken") != "") { location.reload(); }
+
+  var accessToken = getCookie("AccessToken");
+  var refreshToken = getCookie("RefreshToken");
+
+  if (accessToken == "" && refreshToken != "") {
+    location.reload();
+  }
 
   getCurrentSongID()
     .then((data) => {
@@ -81,12 +93,11 @@ function checkChangesTimer() {
   setTimeout(checkChangesTimer, 2500);
 }
 
-var currentSongID = ""
-if (getCookie("AccessToken") != "" ) {
-  getCurrentSongID()
-    .then((data) => {
-      currentSongID = data.item.id;
-    })
+var currentSongID = "";
+if (getCookie("AccessToken") != "") {
+  getCurrentSongID().then((data) => {
+    currentSongID = data.item.id;
+  });
 
   checkChangesTimer();
 }
diff --git a/assets/stylesheet/main.css b/assets/stylesheet/main.css
@@ -1,75 +1,77 @@
 @import "bulma/css/bulma.min.css";
 
 html {
-	height: 100%;
+  height: 100%;
 }
 
 body {
-	min-height: 100%;
-	font-size: large;
+  min-height: 100%;
+  font-size: large;
 }
 
 footer {
-	color: grey;
-	font-size: medium;
+  color: grey;
+  font-size: medium;
 }
 
 footer .content {
-	margin-left: 10px;
+  margin-left: 10px;
 }
 
 p:empty:before {
   content: "\200b"; /* unicode zero width space character */
 }
 
 .album-photo img {
-	height: 160px;
-	width: 160px;
-	margin: 10px;
-	background-color: transparent;
-  	box-shadow: 5px 5px #1d72aa;
+  height: 160px;
+  width: 160px;
+  margin: 10px;
+  background-color: transparent;
+  box-shadow: 5px 5px #1d72aa;
 }
 
-.hero .hero-body, .buttons .is-primary {
-	background-color: #1DB954;
+.hero .hero-body,
+.buttons .is-primary {
+  background-color: #1db954;
 }
 
 .hero .song-body {
-	padding-top: 10px;
-	padding-left: 10px;
-	padding-right: 10px;
-	padding-bottom: 10px;
+  padding-top: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 10px;
 }
 
-.hero .song-title, .hero .song-subtitle {
-	margin-left: 25px;
-	margin-top: 30px;
-	margin-right: 100px;
+.hero .song-title,
+.hero .song-subtitle {
+  margin-left: 25px;
+  margin-top: 30px;
+  margin-right: 100px;
 }
 
 .hero .song-subtitle {
-	margin-bottom: 30px;
+  margin-bottom: 30px;
 }
 
-.hero .title{
-	font-size: 1.5em;
+.hero .title {
+  font-size: 1.5em;
 }
 
 .hero .subtitle {
-	font-size: 1.0em;
+  font-size: 1em;
 }
 
 .hero .song-title {
-	font-size: 1.7em;
+  font-size: 1.7em;
 }
 
 .hero .song-subtitle {
-	font-size: 1.2em;
+  font-size: 1.2em;
 }
 
 .translator {
-	font-size: x-smaller;
-	color: grey;
+  font-size: x-smaller;
+  color: grey;
 }
 
 .star-me {
@@ -78,54 +80,152 @@ p:empty:before {
 }
 
 @media screen and (max-width: 550px) {
-	.album-photo img {
-		height: 120px;
-		width: 120px;
-	}
+  .album-photo img {
+    height: 120px;
+    width: 120px;
+  }
 
-	.hero .song-title {
-		font-size: 1.6em;
-	}
+  .hero .song-title {
+    font-size: 1.6em;
+  }
 
-	.hero .song-subtitle {
-		font-size: 1.1em;
-	}
+  .hero .song-subtitle {
+    font-size: 1.1em;
+  }
 }
 
 @media screen and (min-width: 850px) and (max-height: 1300px) {
-	.container {
-		width: 80%;
-	}
+  .container {
+    width: 80%;
+  }
 
-	.album-photo img {
-		height: 200px;
-		width: 200px;
-	}
+  .album-photo img {
+    height: 200px;
+    width: 200px;
+  }
 
-	.hero .song-title {
-		font-size: 1.9em;
-	}
+  .hero .song-title {
+    font-size: 1.9em;
+  }
 
-	.hero .song-subtitle {
-		font-size: 1.4em;
-	}
+  .hero .song-subtitle {
+    font-size: 1.4em;
+  }
 }
 
 @media screen and (min-width: 1300px) {
-	.container {
-		width: 60%;
-	}
-
-	.album-photo img {
-		height: 260px;
-		width: 260px;
-	}
-
-	.hero .song-title {
-		font-size: 2.2em;
-	}
-
-	.hero .song-subtitle {
-		font-size: 1.7em;
-	}
+  .container {
+    width: 60%;
+  }
+
+  .album-photo img {
+    height: 260px;
+    width: 260px;
+  }
+
+  .hero .song-title {
+    font-size: 2.2em;
+  }
+
+  .hero .song-subtitle {
+    font-size: 1.7em;
+  }
+}
+
+.lirik-loading {
+  display: block;
+  float: left;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  position: relative;
+  box-sizing: border-box;
+  visibility: hidden;
+  opacity: 1;
+  background-color: transparent;
+  transform: scale(0.4);
+}
+
+.lirik-loading .lirik-loading-bar {
+  height: 40px;
+  width: 5px;
+  border-radius: 5px;
+  display: block;
+  background-color: #1db954;
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform-origin: center bottom;
+  animation: loading-bar 1.2s ease-in-out infinite;
+}
+.lirik-loading .lirik-loading-bar.bar1 {
+  transform: translateX(-50%) rotate(30deg);
+  animation-delay: -0.1s;
+}
+.lirik-loading .lirik-loading-bar.bar2 {
+  transform: translateX(-50%) rotate(60deg);
+  animation-delay: -0.2s;
+}
+.lirik-loading .lirik-loading-bar.bar3 {
+  transform: translateX(-50%) rotate(90deg);
+  animation-delay: -0.3s;
+}
+.lirik-loading .lirik-loading-bar.bar4 {
+  transform: translateX(-50%) rotate(120deg);
+  animation-delay: -0.4s;
+}
+.lirik-loading .lirik-loading-bar.bar5 {
+  transform: translateX(-50%) rotate(150deg);
+  animation-delay: -0.5s;
+}
+.lirik-loading .lirik-loading-bar.bar6 {
+  transform: translateX(-50%) rotate(180deg);
+  animation-delay: -0.6s;
+}
+.lirik-loading .lirik-loading-bar.bar7 {
+  transform: translateX(-50%) rotate(210deg);
+  animation-delay: -0.7s;
+}
+.lirik-loading .lirik-loading-bar.bar8 {
+  transform: translateX(-50%) rotate(240deg);
+  animation-delay: -0.8s;
+}
+.lirik-loading .lirik-loading-bar.bar9 {
+  transform: translateX(-50%) rotate(270deg);
+  animation-delay: -0.9s;
+}
+.lirik-loading .lirik-loading-bar.bar10 {
+  transform: translateX(-50%) rotate(300deg);
+  animation-delay: -1s;
+}
+.lirik-loading .lirik-loading-bar.bar11 {
+  transform: translateX(-50%) rotate(330deg);
+  animation-delay: -1.1s;
+}
+.lirik-loading .lirik-loading-bar.bar12 {
+  transform: translateX(-50%) rotate(360deg);
+  animation-delay: -1.2s;
+}
+.lirik-loading:after {
+  content: "";
+  width: 30px;
+  height: 30px;
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  background-color: #ffffff;
+  opacity: 1;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+@keyframes loading-bar {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
diff --git a/controllers/helpers/template_helper.go b/controllers/helpers/template_helper.go
@@ -13,6 +13,7 @@ func GetTemplateFiles(controller_file string) []string {
 		"./views/partials/footer_partial.html",
 		"./views/layouts/user_layout.html",
 		"./views/partials/user/header_partial.html",
+		"./views/partials/loading.html",
 	}
 
 	return files

diff --git a/views/partials/loading.html b/views/partials/loading.html
@@ -0,0 +1,18 @@
+{{ define "loading" }}
+
+<div class="lirik-loading">
+  <div class="lirik-loading-bar bar1"></div>
+  <div class="lirik-loading-bar bar2"></div>
+  <div class="lirik-loading-bar bar3"></div>
+  <div class="lirik-loading-bar bar4"></div>
+  <div class="lirik-loading-bar bar5"></div>
+  <div class="lirik-loading-bar bar6"></div>
+  <div class="lirik-loading-bar bar7"></div>
+  <div class="lirik-loading-bar bar8"></div>
+  <div class="lirik-loading-bar bar9"></div>
+  <div class="lirik-loading-bar bar10"></div>
+  <div class="lirik-loading-bar bar11"></div>
+  <div class="lirik-loading-bar bar12"></div>
+</div>
+
+{{ end }}
diff --git a/views/partials/user/header_partial.html b/views/partials/user/header_partial.html
@@ -1,6 +1,7 @@
 {{ define "userheader" }}
 
 <body>
+{{ template "loading" }} 
 <div class="star-me">
 	<a href="https://github.com/boratanrikulu/lirik.app">
 		<img src="https://githubbadges.com/star.svg?user=boratanrikulu&repo=lirik.app&background=1DB954&color=fff&style=flat">