<!-- about -->
<div class="about">
   <a class="bg_links social portfolio" href="https://www.rafaelalucas.com" target="_blank">
      <span class="icon"></span>
   </a>
   <a class="bg_links social dribbble" href="https://dribbble.com/rafaelalucas" target="_blank">
      <span class="icon"></span>
   </a>
   <a class="bg_links social linkedin" href="https://www.linkedin.com/in/rafaelalucas/" target="_blank">
      <span class="icon"></span>
   </a>
   <a class="bg_links logo"></a>
</div>
<!-- end about -->

<div class="wrapper">
   <div class="content">
      <div class="topContent">
         <div class="menuBar">
            <div class="icon topExpand"></div>
            <p class="appName">Your Library</p>
            <div class="icon menuHamburguer"></div>
         </div>
         <div class="musicGroups">
            <!-- Slider main container -->
            <div class="swiper-container slider-two">
               <!-- Additional required wrapper -->
               <div class="swiper-wrapper slider-two">
               </div>

            </div>
            <!-- end Slider main container -->

         </div>

      </div>
      <div class="middleContent">

         <!-- Slider main container -->
         <div class="swiper-container slider-one">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper slider-one">
            </div>
         </div>
         <!-- end Slider main container -->
      </div>
      <div class="bottomContent">
         <div class="icon bottomExpand"></div>
         <div class="progressBar">
            <div class="timer">
               <span class="currentTime">00:00</span>
               <span class="endTime"></span>
            </div>
            <div class="barTimer"><span class="progress"></span></div>
         </div>
         <div class="player">
            <div class="icon shuffle"></div>
            <div class="icon prev swiper-button-prev"></div>
            <div class="btnPlay">
               <div class="icon play"></div>
            </div>
            <div class="icon next swiper-button-next"></div>
            <div class="icon repeat"></div>

         </div>
      </div>

      <div class="albumBg">
         <figure class="bg"><img class="imageBg" src="" alt=""></figure>
      </div>

   </div>
   <div class="bodyBg"></div>
</div>

@import url("https://fonts.googleapis.com/css?family=Barlow+Condensed:300,400,500,600,700,800,900|Barlow:300,400,500,600,700,800,900&display=swap");

$font-01: "Barlow", sans-serif;
$font-02: "Barlow Condensed", sans-serif;

$m-01: #e8e8f0;
$m-02: #ffedc0;

$cubic: cubic-bezier(0.51, -0.12, 0.25, 1.15);

@mixin sm {
   @media screen and (max-width: 640px) {
      @content;
   }
}

@mixin xs {
   @media screen and (max-height: 600px) {
      @content;
   }
}

.about {
   $cubic: cubic-bezier(0.64, 0.01, 0.07, 1.65);
   $transition: 0.6s $cubic;
   $size: 40px;
   position: fixed;
   z-index: 10;
   bottom: 10px;
   right: 10px;
   width: $size;
   height: $size;
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
   transition: all 0.2s ease;
   
   @include sm {
      display: none;
   }

   .bg_links {
      width: $size;
      height: $size;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(#000000, 0.2);
      border-radius: 100%;
      backdrop-filter: blur(5px);
      position: absolute;
   }

   .logo {
      width: $size;
      height: $size;
      z-index: 9;
      background-image: url(https://rafaelavlucas.github.io/assets/codepen/logo_white.svg);
      background-size: 50%;
      background-repeat: no-repeat;
      background-position: 10px 7px;
      opacity: 0.9;
      transition: all 1s 0.2s ease;
      bottom: 0;
      right: 0;
   }

   .social {
      opacity: 0;
      right: 0;
      bottom: 0;

      .icon {
         width: 100%;
         height: 100%;
         background-size: 20px;
         background-repeat: no-repeat;
         background-position: center;
         background-color: transparent;
         display: flex;
         transition: all 0.2s ease, background-color 0.4s ease;
         opacity: 0;
         border-radius: 100%;
      }

      &.portfolio {
         transition: all 0.8s ease;

         .icon {
            background-image: url(https://rafaelavlucas.github.io/assets/codepen/link.svg);
         }
      }

      &.dribbble {
         transition: all 0.3s ease;
         .icon {
            background-image: url(https://rafaelavlucas.github.io/assets/codepen/dribbble.svg);
         }
      }

      &.linkedin {
         transition: all 0.8s ease;
         .icon {
            background-image: url(https://rafaelavlucas.github.io/assets/codepen/linkedin.svg);
         }
      }
   }

   &:hover {
      width: 105px;
      height: 105px;
      transition: all $transition;

      .logo {
         opacity: 1;
         transition: all 0.6s ease;
      }

      .social {
         opacity: 1;

         .icon {
            opacity: 0.9;
         }

         &:hover {
            background-size: 28px;
            .icon {
               background-size: 65%;
               opacity: 1;
            }
         }

         &.portfolio {
            right: 0;
            bottom: calc(100% - 40px);
            transition: all 0.3s 0s $cubic;
            .icon {
               &:hover {
                  background-color: #698fb7;
               }
            }
         }

         &.dribbble {
            bottom: 45%;
            right: 45%;
            transition: all 0.3s 0.15s $cubic;
            .icon {
               &:hover {
                  background-color: #ea4c89;
               }
            }
         }

         &.linkedin {
            bottom: 0;
            right: calc(100% - 40px);
            transition: all 0.3s 0.25s $cubic;
            .icon {
               &:hover {
                  background-color: #0077b5;
               }
            }
         }
      }
   }
}

* {
   margin: 0;
   padding: 0;
   list-style: none;
   border: 0;
   -webkit-tap-highlight-color: transparent;
   text-decoration: none;
   color: inherit;

   &:focus {
      outline: 0;
   }
}

.wrapper {
   display: grid;
   width: 100%;
   // height: 100vh;
   align-items: center;
   justify-content: center;
   color: white;
   font-family: $font-01;
   user-select: none;
   letter-spacing: 0.8px;

   @include xs {
      height: 100% !important;
      min-height: 600px;
   }

   .content {
      width: 375px;
      height: 760px;
      margin: 60px 0;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      box-shadow: 0px 30px 80px rgba(0, 0, 0, 0.3);

      @include sm {
         width: 100%;
         height: 100%;
         border-radius: 0px;
         margin-bottom: 0px;
         margin: 0px 0;
      }

      .icon {
         width: 24px;
         height: 24px;
         cursor: pointer;
         transition: all 0.2s ease;
         display: flex;
         justify-content: center;
         align-items: center;
         background-size: contain;
         background-repeat: no-repeat;

         &:before {
            position: absolute;
            content: "";
            width: 24px;
            height: 24px;
            z-index: 1;
            background-size: contain;
            background-repeat: no-repeat;
         }

         &:active {
            &:before {
               width: 28px;
               height: 28px;
            }
         }

         &.shuffle {
            &:before {
               background-image: url("https://www.rafaelalucas.com/dailyui/9/assets/shuffle.svg");
               opacity: 0.5;
            }
         }

         &.prev {
            &:before {
               background-image: url("https://www.rafaelalucas.com/dailyui/9/assets/prev.svg");
            }
         }

         &.play {
            &:before {
               background-image: url("https://www.rafaelalucas.com/dailyui/9/assets/play.svg");
            }
         }

         &.next {
            &:before {
               background-image: url("https://www.rafaelalucas.com/dailyui/9/assets/next.svg");
            }
         }

         &.repeat {
            &:before {
               background-image: url("https://www.rafaelalucas.com/dailyui/9/assets/repeat.svg");

               opacity: 0.5;
            }
         }

         &.bottomExpand {
            background-image: url("https://www.rafaelalucas.com/dailyui/9/assets/arrow-down.svg");
         }

         &.topExpand {
            background-image: url("https://www.rafaelalucas.com/dailyui/9/assets/arrow-down.svg");
         }

         &.menuHamburguer {
            background-image: url("https://www.rafaelalucas.com/dailyui/9/assets/menu.svg");
         }

         &.plus {
            &:before {
               background-image: url("https://www.rafaelalucas.com/dailyui/9/assets/plus.svg");
            }
         }

         &.heart {
            &:before {
               background-image: url("https://www.rafaelalucas.com/dailyui/9/assets/heart.svg");
            }

            &.fave {
               &:before {
                  animation: fave 0.3s ease;
                  background-image: url("https://www.rafaelalucas.com/dailyui/9/assets/fave.svg");

                  @keyframes fave {
                     50% {
                        width: 40px;
                        height: 40px;
                     }

                     100% {
                        width: 24px;
                        height: 24px;
                     }
                  }
               }
            }
         }

         &.close {
            &:before {
               background-image: url("https://www.rafaelalucas.com/dailyui/9/assets/close.svg");
            }
         }
      }

      // Menu Bar & Music Groups
      .topContent {
         width: 100%;
         max-height: 60px;
         background-color: rgba($m-01, 0.5);
         display: flex;
         justify-content: space-between;
         flex-direction: column;
         align-items: center;
         padding: 20px 0;
         box-sizing: border-box;
         backdrop-filter: blur(5px);
         transition: all 0.4s 0.2s ease;

         .menuBar {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            box-sizing: border-box;

            .appName {
               font-weight: 600;
               font-size: 16px;
               text-transform: uppercase;
            }
         }

         .musicGroups {
            width: 100%;
            height: 80px;
            margin-top: 25px;
            opacity: 0;
            transform: translateX(100px);
            transition: all 0.4s ease;
            visibility: hidden;
            cursor: grab;

            &:active {
               cursor: grabbing;
            }

            .swiper-slide {
               width: 150px;
               height: 80px;
               margin-right: 20px;

               &:first-child {
                  margin-left: 20px;
               }
            }

            .group {
               position: relative;
               border-radius: 4px;
               cursor: pointer;
               overflow: hidden;

               &:before {
                  position: absolute;
                  content: "";
                  width: 100%;
                  height: 30px;
                  //background-color: rgba($m-01, 0.5);
                  //backdrop-filter: blur(5px);
                  bottom: 0;
                  z-index: 2;
               }

               figure {
                  margin: 0;
                  height: 100%;
                  width: 100%;

                  img {
                     width: 100%;
                     height: 100%;
                     object-fit: cover;
                     filter: grayscale(0.2);
                  }

                  &:before {
                     position: absolute;
                     content: "";
                     width: 100%;
                     height: 100%;
                     background: linear-gradient(
                        0deg,
                        #252525 10%,
                        transparent 100%
                     );
                     top: 0;
                     left: 0;
                     opacity: 0.8;
                     z-index: 1;
                  }
               }

               .titleGroup {
                  position: absolute;
                  bottom: 0;
                  width: 100%;
                  text-align: center;
                  z-index: 3;
                  height: 30px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-style: normal;
                  font-weight: 600;
                  font-size: 14px;
                  text-transform: uppercase;
               }
            }
         }

         &.expand {
            max-height: 190px;
            transition: all 0.4s ease;

            .topExpand {
               transform: rotate(180deg);
            }

            .musicGroups {
               opacity: 1;
               transform: translateX(0px);
               transition: all 0.4s 0.2s ease;
               height: 100%;
               visibility: visible;
            }
         }
      }

      // Album Covers
      .middleContent {
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         position: relative;

         .albumContent {
            margin: 40px 0 20px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            &.small {
               width: 200px;

               .albumCover {
                  width: 200px;
                  height: 200px;
                  transition: all 0.4s ease;
               }
            }

            @include xs {
               width: 200px;

               .albumCover {
                  width: 200px;
                  height: 200px;
                  transition: all 0.4s ease;
               }
            }
         }

         .albumCover {
            width: 280px;
            height: 280px;
            overflow: hidden;
            box-shadow: 0px 30px 40px rgba(0, 0, 0, 0.3);
            border-radius: 8px;
            position: relative;
            transition: all 0.4s 0.2s ease;
            z-index: -1;

            &:before {
               position: absolute;
               content: "";
               width: 100%;
               height: 100%;
               background: linear-gradient(
                  145deg,
                  rgba(white, 0.8) -20%,
                  transparent 50%
               );
            }

            img {
               width: 100%;
               height: 100%;
               object-fit: cover;
               z-index: -1;
            }
         }

         .artistName,
         .songName {
            text-align: center;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            text-align: center;
            letter-spacing: 0.04em;
            z-index: 2;
         }

         .artistName {
            text-transform: uppercase;
            margin: 30px 0 10px 0;
            font-size: 16px;
            font-weight: 600;
         }

         .settings {
            width: 100%;
            height: 40px;
            position: absolute;
            top: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 20px 0 20px;
            box-sizing: border-box;
            position: fixed;
            transition: all 0s ease;
            transform: translateY(-100px);
            opacity: 0;
         }

         .playlistsContent {
            background-color: rgba($m-01, 0.6);
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            z-index: 3;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 60px 0 40px 0;
            box-sizing: border-box;
            backdrop-filter: blur(10px);
            transform: translateY(calc(-100% - 60px));
            transition: all 0.8s cubic-bezier(0.8, -0.02, 0.25, 1);

            .close {
               position: absolute;
               top: 20px;
               right: 20px;
            }

            .playlist {
               width: calc(100% - 40px);
               height: 100px;
               min-height: 60px;
               box-sizing: border-box;
               display: flex;
               align-items: center;
               align-items: center;
               margin-bottom: 10px;
               overflow: hidden;
               position: relative;
               border-radius: 8px;
               z-index: 3;
               transition: all 0.2s ease;
               border: 0px solid white;
               cursor: pointer;
               opacity: 0.6;

               &:last-child {
                  margin-bottom: 0;
               }

               .checkbox {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 24px;
                  height: 24px;
                  background-color: rgba(white, 0.2);
                  z-index: 2;
                  position: absolute;
                  right: 10px;
                  top: 10px;
                  border-radius: 4px;
                  //border: solid 1px rgba(white, 0.3);

                  &:before {
                     position: absolute;
                     content: "";
                     width: 0%;
                     height: 0%;
                     z-index: 1;
                     background-size: contain;
                     background-image: url("https://www.rafaelalucas.com/dailyui/9/assets/check.svg");
                     opacity: 0;
                     transition: all 0.2s cubic-bezier(0.6, 0.02, 0.18, 1.25);
                  }
               }

               .playlistThumb {
                  width: 80px;
                  height: calc(100% - 20px);
                  border-radius: 4px;
                  overflow: hidden;
                  z-index: 1;
                  margin-left: 10px;

                  img {
                     width: 100%;
                     height: 100%;
                     object-fit: cover;
                  }
               }

               .playlistBg {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background-color: #5a5a5a;

                  img {
                     width: 120%;
                     height: 160%;
                     object-fit: cover;
                     filter: blur(8px) grayscale(1);
                     opacity: 0.6;
                  }

                  &:before {
                     position: absolute;
                     content: "";
                     width: 100%;
                     height: 100%;
                     z-index: 1;
                     background: linear-gradient(
                        145deg,
                        rgba(black, 0.8) -20%,
                        transparent 50%
                     );
                  }
               }

               .playlistTitle {
                  z-index: 1;
                  margin-left: 20px;
                  text-transform: uppercase;
                  font-size: 14px;
                  font-weight: 600;
                  color: white;
               }

               &.selected {
                  //border: 2px solid white;
                  transition: all 0.2s ease;
                  opacity: 1;

                  .checkbox {
                     &:before {
                        width: 20px;
                        height: 20px;
                        opacity: 1;
                     }
                  }

                  .playlistBg {
                     img {
                        filter: blur(8px) grayscale(0);
                        //opacity: 0.6;
                     }
                  }
               }
            }
         }

         .swiper-container {
            height: 100%;
         }

         .swiper-slide {
            width: 280px;
            display: flex;
            justify-content: center;
            align-items: center;

            &.open {
               transform: translateY(0);
            }
         }

         .swiper-slide-active {
            .settings {
               transition: all 0.4s 0.4s ease;
               opacity: 1;
               transform: translateY(0px);
            }

            &.open {
               .playlistsContent {
                  transform: translateY(0);
               }
            }
         }
      }

      // Player
      .bottomContent {
         width: 100%;
         min-height: 100px;
         max-height: 100px;
         background-color: rgba($m-01, 0.5);
         display: flex;
         justify-content: space-between;
         align-items: center;
         flex-direction: column;
         backdrop-filter: blur(5px);
         transition: all 0.4s 0.2s ease;
         padding: 5px 30px 20px 30px;
         box-sizing: border-box;

         .bottomExpand {
            transform: rotate(-180deg);
            opacity: 0.5;
         }

         .progressBar {
            width: 100%;
            visibility: hidden;
            height: 0;
            opacity: 0;
            transition: all 0.4s ease;
            transform: translateY(-60px);

            @include sm {
               box-sizing: border-box;
            }

            .timer {
               display: flex;
               justify-content: space-between;
               margin-bottom: 20px;
            }

            .barTimer {
               width: 100%;
               height: 5px;
               background-color: rgba(white, 0.4);
               border-radius: 5px;
               position: relative;

               .progress {
                  position: absolute;
                  background-color: white;
                  height: 100%;
                  width: 0%;
                  border-radius: 4px;
                  transition: all 0.4s ease;
               }
            }
         }

         .player {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s 0.2s ease;

            @include sm {
            }

            .btnPlay {
               background-color: rgba(white, 0.2);
               width: 40px;
               height: 40px;
               border-radius: 100%;
               display: flex;
               justify-content: center;
               align-items: center;
               transition: all 0.2s ease;

               &.pause {
                  background-color: rgba(white, 0.4);

                  .play {
                     &:before {
                        background-image: url("https://www.rafaelalucas.com/dailyui/9/assets/pause.svg");
                     }
                  }
               }
            }
         }

         &.expand {
            transition: all 0.4s ease;
            min-height: 200px;
            max-height: 200px;
            padding: 10px 30px 20px 30px;

            .bottomExpand {
               transform: rotate(0deg);
               opacity: 1;
            }

            .progressBar {
               opacity: 1;
               visibility: visible;
               height: 50px;
               transition: all 0.4s 0.2s ease;
               transform: translateY(-10px);
            }

            .player {
               @include sm {
               }

               .btnPlay {
                  width: 60px;
                  height: 60px;

                  .icon {
                     &:before {
                        width: 32px;
                        height: 32px;
                     }

                     &:active {
                        &:before {
                           width: 38px;
                           height: 38px;
                        }
                     }
                  }
               }
            }
         }
      }

      // Album Covers Background
      .albumBg {
         position: absolute;
         width: 100%;
         max-height: 760px;
         height: 100%;
         top: 0;
         z-index: -1;
         display: flex;
         justify-content: center;
         align-items: center;
         overflow: hidden;

         @include sm {
            max-height: 100vh;
         }

         @include xs {
            max-height: 100%;
            height: 100%;
            min-height: 600px;
         }

         &:before,
         &:after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            top: 0;
            background: linear-gradient(
               180deg,
               rgba(black, 0.5) -40%,
               transparent 50%
            );
            z-index: 1;
         }

         &:after {
            top: initial;
            bottom: 0;
            background: linear-gradient(
               0deg,
               rgba(black, 0.5) -60%,
               transparent 50%
            );
         }

         .bg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;

            &:before {
               position: absolute;
               content: "";
               width: 150%;
               height: 150%;
               z-index: 2;
               backdrop-filter: blur(10px);
            }

            img {
               width: 100%;
               height: 100%;

               object-fit: cover;
            }
         }

         &.animeBg {
            .bg {
               animation: animeBg 0.6s ease-in-out both;

               @keyframes animeBg {
                  0% {
                     width: 100%;
                     height: 100%;
                  }

                  50% {
                     width: 130%;
                     height: 130%;
                  }

                  100% {
                     width: 100%;
                     height: 100%;
                  }
               }

               &:before {
                  animation: animeBg2 0.6s ease-in-out both;

                  @keyframes animeBg2 {
                     0% {
                        width: 150%;
                        height: 150%;
                        backdrop-filter: blur(10px);
                     }

                     50% {
                        backdrop-filter: blur(40px);
                     }

                     100% {
                        width: 150%;
                        height: 150%;
                        backdrop-filter: blur(10px);
                     }
                  }
               }
            }
         }
      }
   }

   .bodyBg {
      width: 100%;
      height: 100%;
      position: fixed;
      z-index: -2;
      transition: all 0.4s ease;
   }
}

.swiper-button-prev,
.swiper-button-next {
   all: unset;
}

window.addEventListener("load", event => {
   ////////////////
   // Variables
   ////////////////

   const iconTopExpand = document.querySelector(".icon.topExpand"),
         iconBottomExpand = document.querySelector(".icon.bottomExpand"),
         topContent = document.querySelector(".topContent"),
         bottomContent = document.querySelector(".bottomContent"),
         playBtn = document.querySelector(".btnPlay"),
         musicGroups = document.querySelector(".swiper-wrapper.slider-two"),
         swipperWrapper = document.querySelector(".swiper-wrapper.slider-one"),
         imageBg = document.querySelector(".imageBg"),
         albumBg = document.querySelector(".albumBg"),
         wrapper = document.querySelector(".wrapper"),
         bodyBg = document.querySelector(".bodyBg"),
         next = document.querySelector(".swiper-button-next"),
         prev = document.querySelector(".swiper-button-prev");

   // Songs
   const songs = [
      {
         img: "https://www.rafaelalucas.com/dailyui/9/covers/jain.jpg",
         artistName: "Jain",
         songName: "Makeba",
         song: "https://www.rafaelalucas.com/dailyui/9/songs/song1.mp3",
         color: "#f5c63d"
      },
      {
         img: "https://www.rafaelalucas.com/dailyui/9/covers/ohland.jpg",
         artistName: "Oh Land",
         songName: "Postpone the Bad",
         song: "https://www.rafaelalucas.com/dailyui/9/songs/song2.mp3",
         color: "#afc5c3"
      },
      {
         img: "https://www.rafaelalucas.com/dailyui/9/covers/angele.jpg",
         artistName: "Angèle",
         songName: "La Loi de Murphy",
         song: "https://www.rafaelalucas.com/dailyui/9/songs/song3.mp3",
         color: "#74c2dd"
      },
      {
         img: "https://www.rafaelalucas.com/dailyui/9/covers/broods.jpg",
         artistName: "Broods",
         songName: "Bridges",
         song: "https://www.rafaelalucas.com/dailyui/9/songs/song1.mp3",
         color: "#a3b8b0"
      },
      {
         img: "https://www.rafaelalucas.com/dailyui/9/covers/alice.jpg",
         artistName: "Alice Phoebe Lou",
         songName: "Orbit",
         song: "https://www.rafaelalucas.com/dailyui/9/songs/song2.mp3",
         color: "#38736d"
      },
      {
         img: "https://www.rafaelalucas.com/dailyui/9/covers/feist.jpg",
         artistName: "Feist",
         songName: "The Bad in Each Other",
         song: "https://www.rafaelalucas.com/dailyui/9/songs/song3.mp3",
         color: "#a4b1b2"
      },

      {
         img: "https://www.rafaelalucas.com/dailyui/9/covers/dagny.jpg",
         artistName: "Dagny",
         songName: "Ultraviolet",
         song: "https://www.rafaelalucas.com/dailyui/9/songs/song1.mp3",
         color: "#8098ce"
      },
      {
         img: "https://www.rafaelalucas.com/dailyui/9/covers/sigrid.jpg",
         artistName: "Sigrid",
         songName: "Dynamite",
         song: "https://www.rafaelalucas.com/dailyui/9/songs/song2.mp3",
         color: "#1a91bd"
      }
   ];

   // Music Groups
   const groups = [
      {
         title: "Songs",
         img: "https://www.rafaelalucas.com/dailyui/9/covers/img06.jpg"
      },
      {
         title: "Artists",
         img: "https://www.rafaelalucas.com/dailyui/9/covers/img07.jpg"
      },
      {
         title: "Playlists",
         img:
         "https://images.pexels.com/photos/761963/pexels-photo-761963.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=400"
      },
      {
         title: "Favourites",
         img: "https://www.rafaelalucas.com/dailyui/9/covers/img10.jpg"
      }
   ];

   // Playlists
   const playlists = [
      {
         title: "Pop Music",
         img:
         "https://images.pexels.com/photos/761963/pexels-photo-761963.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=400"
      },
      {
         title: "On the road!",
         img:
         "https://images.pexels.com/photos/3049327/pexels-photo-3049327.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=400"
      },
      {
         title: "Christmas Songs",
         img:
         "https://images.pexels.com/photos/1661905/pexels-photo-1661905.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=400"
      },
      {
         title: "Rainy days",
         img:
         "https://images.pexels.com/photos/216657/pexels-photo-216657.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=400"
      }
   ];

   ////////////////
   // Events
   ////////////////

   iconTopExpand.addEventListener("click", expandTop);
   iconBottomExpand.addEventListener("click", expandBottom);
   playBtn.addEventListener("click", playSong);

   ////////////////
   // Functions
   ////////////////

   function playSong() {
      if (playBtn.classList.contains("pause")) {
         playBtn.classList.remove("pause");
         document.querySelector(".swiper-slide-active audio").pause();
      } else {
         playBtn.classList.add("pause");
         document.querySelector(".swiper-slide-active audio").play();
      }
      progressBar();
   }

   function expandTop() {
      if (topContent.classList.contains("expand")) {
         topContent.classList.remove("expand");
      } else {
         topContent.classList.add("expand");

         //Swiper Music Goups
         var mySwiper2 = new Swiper(".swiper-container.slider-two", {
            // Optional parameters
            direction: "horizontal",
            slidesPerView: "auto",
            draggable: true
         });
      }
      albumSize();
   }

   function expandBottom() {
      if (bottomContent.classList.contains("expand")) {
         bottomContent.classList.remove("expand");
      } else {
         bottomContent.classList.add("expand");
      }
      albumSize();
      progressBar();
   }

   // change Album size

   function albumSize() {
      const albumContent = document.querySelectorAll(".albumContent");

      if (
         topContent.classList.contains("expand") &&
         bottomContent.classList.contains("expand")
      ) {
         albumContent.forEach(function(el) {
            el.classList.add("small");
         });
      } else {
         albumContent.forEach(function(el) {
            el.classList.remove("small");
         });
      }
   }

   //Swiper Albums

   songs.forEach(function(el) {
      let template = `
<div class="swiper-slide">
<div class="settings">
<div class="icon heart"></div>
<div class="icon plus"></div>
</div>
<audio src="${el.song}"></audio>
<div class="albumContent">
<div class="albumCover" style="background-color:${
      el.color
      }"><img src="${el.img}"></div>
<p class="artistName">${el.artistName}</p>
<p class="songName">${el.songName}</p></div>
<div class="playlistsContent">
<div class="icon close"></div>
</div>
</div>`;

      swipperWrapper.insertAdjacentHTML("beforeend", template);
   });

   // To Create Playlists
   playlists.forEach(function(el) {
      let templatePlaylist = `
<div class="playlist">
<span class="checkbox"></span>
<figure class="playlistBg"><img src="${el.img}"></figure>
<figure class="playlistThumb"><img src="${el.img}"></figure>
<p class="playlistTitle">${el.title}</p></div>`;

      var playlistContent = document.querySelectorAll(".playlistsContent");

      playlistContent.forEach(function(el) {
         el.insertAdjacentHTML("beforeend", templatePlaylist);
      });
   });

   // Slider Songs (Middle)

   var mySwiper = new Swiper(".swiper-container.slider-one", {
      // Optional parameters
      direction: "horizontal",
      loop: true,
      centeredSlides: true,
      slidesPerView: 1,
      spaceBetween: 20,
      speed: 600,
      allowTouchMove: false,
      effect: "coverflow",

      coverflowEffect: {
         rotate: 40,
         slideShadows: false
      },

      // Navigation arrows
      navigation: {
         nextEl: ".swiper-button-next",
         prevEl: ".swiper-button-prev"
      }
   });

   // Change Song & Album BG
   next.addEventListener("click", changeSong);
   prev.addEventListener("click", changeSong);

   function changeSong() {
      if (playBtn.classList.contains("pause")) {
         document.querySelectorAll("audio").forEach(function(el) {
            el.pause();
         });
         document.querySelector(".swiper-slide-active audio").play();
      }
      changeBg();
      progressBar();
      closePlaylists();
      changeBgColor();
   }

   function changeBg() {
      albumBg.classList.add("animeBg");

      setTimeout(() => {
         imageBg.src = document.querySelector(
            ".slider-one .swiper-slide-active img"
         ).src;
      }, 300);

      setTimeout(() => {
         albumBg.classList.remove("animeBg");
      }, 700);
   }

   function changeBgColor() {
      var getColor = document.querySelector(
         ".slider-one .swiper-slide-active .albumCover"
      ),
          activeColor = getColor.style.backgroundColor;

      setTimeout(() => {
         bodyBg.style.backgroundColor = activeColor;
      }, 200);
   }

   // Music Groups

   for (let i = 0; i < groups.length; i++) {
      const { title, img } = groups[i];

      var template2 = `<div class="swiper-slide group">
<figure><img src="${img}"></figure>
<p class = "titleGroup">${title}</p>
</div>`;

      musicGroups.insertAdjacentHTML("beforeend", template2);
   }

   // Add favourites & Playlist

   const heart = document.querySelectorAll(".heart"),
         plus = document.querySelectorAll(".plus"),
         close = document.querySelectorAll(".close"),
         playlist = document.querySelectorAll(".playlist");

   heart.forEach(function(el) {
      el.addEventListener("click", addFave);
   });

   plus.forEach(function(el) {
      el.addEventListener("click", openPlaylists);
   });

   close.forEach(function(el) {
      el.addEventListener("click", openPlaylists);
   });

   playlist.forEach(function(el) {
      el.addEventListener("click", addPlaylist);
   });

   function addFave(e) {
      if (e.currentTarget.classList.contains("fave")) {
         e.currentTarget.classList.remove("fave");
      } else {
         e.currentTarget.classList.add("fave");
      }
   }

   function openPlaylists(e) {
      if (
         e.currentTarget
         .closest(".swiper-slide-active")
         .classList.contains("open")
      ) {
         e.currentTarget
            .closest(".swiper-slide-active")
            .classList.remove("open");
      } else {
         e.currentTarget.closest(".swiper-slide-active").classList.add("open");
      }
   }

   function closePlaylists() {
      document.querySelector(".swiper-slide-active").classList.remove("open");
   }

   function addPlaylist(e) {
      if (e.currentTarget.classList.contains("selected")) {
         e.currentTarget.classList.remove("selected");
      } else {
         e.currentTarget.classList.add("selected");
      }
   }

   // Song Progress Bar

   function formatTime(seconds) {
      minutes = Math.floor(seconds / 60);
      minutes = minutes >= 10 ? minutes : "0" + minutes;
      seconds = Math.floor(seconds % 60);
      seconds = seconds >= 10 ? seconds : "0" + seconds;
      return minutes + ":" + seconds;
   }

   function progressBar() {
      var songDuration = document.querySelector(".swiper-slide-active audio")
      .duration,
          endTime = document.querySelector(".endTime"),
          songAudio = document.querySelector(".swiper-slide-active audio"),
          currentTime = document.querySelector(".currentTime");

      endTime.innerHTML = formatTime(songDuration);

      songAudio.ontimeupdate = function() {
         var progress = document.querySelector(".progress");
         progress.style.width =
            songAudio.currentTime * 100 / songDuration + "%";
         currentTime.innerHTML = formatTime(songAudio.currentTime);
      };
   }

   ////////////////
   // Call Functions
   ////////////////

   changeBg();
   progressBar();
   changeBgColor();

   wrapper.style.height = window.innerHeight + "px";

   console.log(window.innerHeight);
});