Audio Player POC [debug]

VERSION 18.11.2017 16:25

by Konstantin Rouda

HTML

<section class="c-player" id="player">
  
  <!--Display-->
  <div class="c-player__display">
    
    <ul class="o-songs-list c-player__songs-list" id="songs-list">
      
      <li class="o-songs-list__item c-player__songs-list-item jsListItem">
        <a href="#" class="o-songs-list__link c-player__songs-list-link" title="The-Beatles-The-First-Album">
          <img class="o-songs-list__cover c-player__songs-list-cover" src="https://farm5.staticflickr.com/4548/38440709661_b758c8188c_o.png" width="600" height="600" alt="The-Beatles-The-First-Album"></a>
      </li>
        
      <li class="o-songs-list__item c-player__songs-list-item jsListItem">
        <a href="#" class="o-songs-list__link c-player__songs-list-link" title="The-Beatles-Sgt-Peppers-lonely-hearts-club-band-1000x1000">
          <img class="o-songs-list__cover c-player__songs-list-cover" src="https://farm5.staticflickr.com/4579/24569620088_c34bfd52a2_o.jpg" width="600" height="600" alt="The-Beatles-Sgt-Peppers-lonely-hearts-club-band-1000x1000"></a>
      </li>
      
      <li class="o-songs-list__item c-player__songs-list-item jsListItem">
        <a href="#" class="o-songs-list__link c-player__songs-list-link" title="The-Beatles-Abbey-Road-album-covers-1000x1000">
          <img class="o-songs-list__cover c-player__songs-list-cover" src="https://farm5.staticflickr.com/4566/38440710721_5c510dfd77_o.jpg" width="600" height="600" alt="The-Beatles-Abbey-Road-album-covers-1000x1000"></a>
      </li>
      
      <li class="o-songs-list__item c-player__songs-list-item jsListItem">
        <a href="#" class="o-songs-list__link c-player__songs-list-link" title="Santana-Abraxas-album-covers-billboard-1000x1000">
          <img class="o-songs-list__cover c-player__songs-list-cover" src="https://farm5.staticflickr.com/4521/38409334352_9ec9dc1d38_o.jpg" width="600" height="600" alt="Santana-Abraxas-album-covers-billboard-1000x1000"></a>
      </li>
      
      <li class="o-songs-list__item...

CSS

HTML {
  /*using system font-stack*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  font-size: calc(16px + (30 - 16) * (100vw - 300px) / (1300 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
  background: rgb(253, 254, 253);
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

/*Actual Style*/

/*  
Player
===========================*/
.c-player {
  width: 100%;
  height: 720px;
  border: 1px dotted;
}

/*  
Player Display
===========================*/
.c-player__display {
  overflow: hidden;
  border-bottom: 1px solid green;
}


/*  
Songs List
===========================*/
.o-songs-list { /*example of reusable UI object class*/
  list-style: none;
  margin: 0; padding: 0;
}

.c-player__songs-list {
  display: flex;
  justify-content: space-around;
  /*max-width: 1280px;*/
  margin: 0 auto;
  /*overflow: hidden;*/
  transition: transform .45s ease-out;
}


/*  
Songs List Item
===========================*/
.o-songs-list__item {
}

.c-player__songs-list-item {
  flex-shrink: 0;
  /*padding: 0 .2rem;*/
  margin: 0 8px;
  /*transition: transform .45s ease-out;*/
}

/*  
Songs List Link
===========================*/
.o-songs-list__link {
  display: block;
  overflow: hidden;
}

.c-player__songs-list-link {
  display: flex;
}

.is-active .c-player__songs-list-link {
  position: relative;
  background-color: #111;
  border: 1px solid #111;
  border-radius: 50%;
  box-shadow: 0 0 0 0.13em rgba(0,0,0,0.5) inset, 0 0 0 0.3em rgba(255,255,255,0.2) inset,
    0 0 0 0.5em rgba(0,0,0,0.5) inset, 0 0 0 0.625em rgba(0,0,0,0.5) inset,
    0 0 0 1.75em rgba(0,0,0,0.5) inset, 0 0 0 0.875em rgba(0,0,0,0.5) inset,
    0 0 0 0.9375em rgba(255,255,255,0.3) inset, 0 0 0 1em rgba(0,0,0,0.5) inset,
    0 0 0 1.0625em rgba(255,255,255,0.2) inset, 0 0 0 1.125em rgba(0,0,0,0.5) inset,
    0 0 0 1.25em...

JavaScript

/*VERSION 18.11.2017 16:25*/
;(function () {
  "use strict";
     
  /*
  TODO:
  1. When list length is odd we need to adjust list in order to display active item as centered
  2. Obscure not active (not centered) list items and reveal active/centered list item
  */
  
  /*============================*\
        CONSTANTS/VARIABLES
  /*============================*/
  const songsList = document.getElementById("songs-list");
  const songsListItems = songsList.querySelectorAll(".o-songs-list__item"); // as fallback Array.From should be used before iterating over this list
   
  const songListItemWidth = songsListItems[0].offsetWidth + 16; /*width + margin on each side of the list item (e.g. if margin is margin 0 8px; then we should add 16 -> 8 * 2 [margin-right & margin-left] )*/
   
  const btnsController = document.querySelector(".c-player__buttons");
   
  const LIST_ITEM_CLASS = "jsListItem";
  const LIST_ITEM_ACTIVE_CLASS = "is-active";
  const LIST_ITEM_ANIMATED_CLASS = "is-animated";
  
  const FAKE_LI_CLASS_NAME = "c-fake-list-item";
   
  
  let songsListMoveCounter = parseInt(songsListItems.length / 2);//getCenterIndex(songsListItems);
 
  // should be called after songsListMoveCounter has been defined 
  // in this case our fake element, if needed, will not be calculated 
  // in the overall amount of the available list items
  adjustListDimensions(songsList, songsListItems);
    
  // Setup
  btnsController.addEventListener("click", onBtnsControllerClick);
  
  songsList.addEventListener("click", onListItemClick);
  
  /*============================*\
              EVENTS
  /*============================*/
  function onBtnsControllerClick (e) {
    const currentClickedElem = e.target;
    const currentClickedElemID = currentClickedElem.id;

    let currentListItem;
    
    
    if(currentClickedElemID === "btn-next" || currentClickedElemID === "btn-prev") {
      
      if(currentClickedElemID === "btn-next") {
        songsListMoveCounter += 1;
     ...