index.html

---
layout: default
pageClass: ""
stylesheets:
 - home.css
 - apollo.css
scripts:
 - vendor/spotify-web-api.js
 - spotify-graphable-data.js
 - apollo.js
metadata:
 - theme_color: "#673ab7"
   description: "Apollo - The eyes for your ears"
   og_title: "Music Visualization at Its Finest - Apollo"
   og_description: "Learn more about your favorite music with Apollo. Your music never looked this good."
   image: "http://viktorkoves.com/apollo/images/social-image.png"
---
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">

<div id="app" class="app-cont" v-bind:class="{ 'empty-view': viewEmpty }">
  <transition name="fade" mode="out-in">
    <!-- Container for panel explaining Apollo before auth. Key attribute
      prevents Vue just swapping contents, which would not animate  -->
    <div class="pre-authorize" v-if="!isLoggedIn" key="preAuth">
      <div class="banner">
        <h1 class="main-title">Apollo</h1>
        <div class="sub-title">The eyes for your ears</div>

        <button v-on:click="login" id="spotify-authorize" class="apollo-btn">
          <img src="spotify-logo.png" alt="">
          <span>Log In With Spotify</span>
        </button>

        <div class="github-notice">
          <a href="https://github.com/vkoves/apollo" target="_blank">
            Fork Apollo on Github
            <img src="images/icons/github.svg" alt="">
          </a>
        </div>
      </div>

      <div class="section-cont">
        <div class="section page-limiter">
          <img src="images/home/graph.png" class="screenshot" alt="Bar graph of a song's different properties, like acousticness, danceability, and more">
          <div class="text right-text">
            <h2>Visualize the Music You Love</h2>
            <p class="no-bold description-text">
              Learn about your favorite songs, seeing information like the beats per minute and time signature to ratings of acousticness and energy.
            </p>
          </div>
        </div>

        <div class="section has-background">
          <div class="page-limiter">
            <div class="text">
              <h2>Preview Songs in Browser</h2>
              <p class="no-bold description-text">
                Analyzing a song you've never listened to? You can preview songs you're viewing right in Apollo.
              </p>
            </div>
            <img src="images/home/albums.png" class="screenshot" alt="">
          </div>
        </div>

        <div class="section page-limiter">
          <img src="images/home/song-compare.png" class="screenshot" alt="A double bar graph comparing two songs in their properties">
          <div class="text right-text">
            <h2>Compare Songs</h2>
            <p class="no-bold description-text">
              Apollo provides an objective source on deciding between songs, comparing songs across seven different ratings.
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Show up after authorization completes -->
    <div class="post-authorize page-limiter" v-else key="postAuth">
      <div class="menu-bar">
        <button class="menu-option -song"
          v-bind:class="{ active: currentView === 'song' }"
          v-on:click="switchView('song')">
          {% include svgs/song.svg %}
          <div class="text">Single Song</div>
        </button>

        <button class="menu-option -song-compare"
          v-bind:class="{ active: currentView === 'song-compare' }"
          v-on:click="switchView('song-compare')">
          {% include svgs/songcompare.svg %}
          <div class="text">Compare Songs</div>
        </button>

        <button class="menu-option -album"
          v-bind:class="{ active: currentView === 'album' }"
          v-on:click="switchView('album')">
          {% include svgs/album.svg %}
          <div class="text">Album</div>
        </button>

        <button class="menu-option -playlist"
          v-bind:class="{ active: currentView === 'playlist' }"
          v-on:click="switchView('playlist')">
          {% include svgs/playlist.svg %}
          <div class="text">Playlist</div>
        </button>
      </div>

      <div class="input-bar-cont" v-bind:class="{ active: viewEmpty }">
        <transition name="slide-vertical">
          <h2 id="interact-prompt" v-show="viewEmpty">
            Search or enter a Spotify URI to get started!
          </h2>
        </transition>

        <div class="input-bar">
          <label class="input-label" for="search-field">
            Search or enter Spotify URI
          </label>

          <div class="input-row">
            <input id="search-field"
              type="text"
              v-model="searchText"
              v-on:keyup.enter="spotifySearch">

            <button class="apollo-btn search-submit" v-on:click="spotifySearch">
              Submit
            </button>
          </div>

          <transition name="slide-vertical">
            <div class="search-results" v-show="searchItems">
              <span v-if="searchItems && searchItems.length === 0"
                id="search-no-results">
                No results found!
              </span>

              <ul v-if="searchItems && searchItems.length > 0">
                <li v-for="item in searchItems" :key="item.uri">
                  <button
                    class="search-listing"
                    v-on:click="searchResultClick(item.uri)">
                    <img v-bind:src="item.imageUrl">
                    <div class="listing-text">
                      <div class="track-title">(( item.name ))</div>

                      (( item.artists ))
                    </div>
                  </button>
                </li>
              </ul>
            </div>
          </transition>
        </div>
      </div>

      <div v-if="spotifyErrored" class="spotify-error">
        Spotify returned an error! Please double check your input and try again.
      </div>

      <!-- Transition container to fade the main container in and out -->
      <transition name="fade">
        <!-- Contains all visualization elements, including albums and graphing -->
        <div id="apollo-main" v-if="!viewEmpty">
          <button class="twitter-share share-btn" v-on:click="shareOnTwitter"
            aria-label="Share on Twitter">
            Share
          </button>

          <!-- Fade out old view before fading in new view -->
          <transition name="fade" mode="out-in">
            <!-- For Song View -->
            <div v-if="currentView === 'song'" key="song"
              class="top-cont track-info">

              <button class="album-image-cont"
                v-bind:aria-label="`Preview Track '${track?.name}'`"
                v-on:click="toggleRecord">
                <img class="record hidden" src="record.png" alt="">
                <img class="album-image" v-bind:src="track?.imgUrl || 'album-art-placeholder.png'" alt="">
              </button>

              <div class="track-text">
                <h2 class="title">(( track?.name ))</h2>
                <div class="artists">(( track?.artists ))</div>
                <div class="non-graph-data">
                  <div class="left-col">
                    <div class="data-item">
                      <div class="left-text">Tempo:</div>
                      <div class="right-text">(( songExtraData?.tempo )) BPM</div>
                    </div>
                    <div class="data-item">
                      <div class="left-text">Key:</div>
                      <div class="right-text">(( songExtraData?.key ))</div>
                    </div>
                    <div class="data-item">
                      <div class="left-text">Loudness:</div>
                      <div class="right-text">(( songExtraData?.loudness )) dB</div>
                    </div>
                  </div>
                  <div class="right-col">
                    <div class="data-item">
                      <div class="left-text">Time Signature:</div>
                      <div class="right-text">(( songExtraData?.timeSignature ))</div>
                    </div>
                    <div class="data-item">
                      <div class="left-text">Mode:</div>
                      <div class="right-text">(( songExtraData?.mode ))</div>
                    </div>
                    <div class="data-item">
                      <div class="left-text">Length:</div>
                      <div class="right-text">(( songExtraData?.duration ))</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- For Compare Songs -->
            <div v-if="currentView === 'song-compare'"  key="song-compare">
              <div class="top-cont two-track-cont">
                <div class="song-cont">
                  <button class="apollo-btn -song-select"
                    v-bind:class="{ 'active': selectedTrackNum === 1 }"
                     v-on:click="selectSong(1)">
                    Select <br> Track 1
                  </button>

                  <button id="track-1" class="album-image-cont"
                    v-bind:aria-label="`Preview Track '${track1?.name}'`"
                    v-on:click="toggleRecord">
                    <img class="record hidden" src="record.png" alt="">
                    <img class="album-image"
                      v-bind:src="track1?.imgUrl || 'album-art-placeholder.png'"
                      alt="">
                  </button>
                </div>

                <div class="track-versus">
                  <div class="track -one">
                    <div class="name">(( track1?.name ))</div>
                    <div class="artists">(( track1?.artists ))</div>
                  </div>
                  <div class="divider-cont"><hr></div>
                  <div class="track -two">
                    <div class="name">(( track2?.name ))</div>
                    <div class="artists">(( track2?.artists ))</div>
                  </div>
                </div>

                <div class="song-cont -two">
                  <button class="apollo-btn -song-select"
                    v-bind:class="{ 'active': selectedTrackNum === 2 }"
                     v-on:click="selectSong(2)">
                    Select <br> Track 2
                  </button>

                  <button id="track-2" class="album-image-cont"
                    v-bind:aria-label="`Preview Track '${track2?.name}'`"
                    v-on:click="toggleRecord">
                    <img class="record hidden" src="record.png" alt="">
                    <img class="album-image"
                      v-bind:src="track2?.imgUrl || 'album-art-placeholder.png'"
                      alt="">
                  </button>
                </div>
              </div>
            </div>

            <!-- For Album View -->
            <div v-if="currentView === 'album'" key="album"
              class="top-cont track-info">
              <div class="album-image-cont" v-on:click="toggleRecord">
                <img class="album-image"
                  v-bind:src="album?.imgUrl || 'album-art-placeholder.png'"
                  alt="">
              </div>
              <div class="track-text">
                <h2 class="title">(( album?.name ))</h1>
                <div class="artists">(( album?.artists ))</div>
              </div>
            </div>

            <!-- For Playlist View -->
            <div v-if="currentView === 'playlist'" key="playlist"
              class="top-cont track-info">
              <div class="album-image-cont" v-on:click="toggleRecord">
                <img class="album-image"
                  v-bind:src="playlist?.imgUrl || 'album-art-placeholder.png'"
                  alt="">
              </div>
              <div class="track-text">
                <h2 class="title">(( playlist?.name ))</h1>
              </div>
            </div>
          </transition>

          <!-- Used by each view for graphing -->
          <div class="graph-top-cont">
            <div class="graph-cont">
              <template v-for="(keyData, key) in spotifyGraphableData">
                <div v-if="keyData.type === 'zero-float'"
                  class="graph-col" v-bind:class="key">
                    <div class="fill fill-1"
                      v-bind:style="{
                        height: graphData ? graphData[key] * 100 + '%' : '0'
                      }">
                        <div class="value value-1">
                          (( graphData ? graphData[key] : '' ))
                        </div>
                    </div>
                    <div class="fill fill-2"
                      v-bind:style="{
                        height: graphData2 ? graphData2[key] * 100 + '%' : '0'
                      }">
                        <div class="value value-2">
                          (( graphData2 ? graphData2[key] : '' ))
                        </div>
                    </div>
                </div>
              </template>
            </div>

            <div class="graph-labels">
              <template v-for="(keyData, key) in spotifyGraphableData">
                <div v-if="keyData.type === 'zero-float'"
                  class="col-title" v-bind:class="key">
                    <div class="col-icon"></div>
                    <span>(( keyData.name ))</span>
                    <div class="std-dev">
                      (( stdDeviations ? stdDeviations[key].toFixed(3) : '' ))
                    </div>
                    <div class="col-desc">(( keyData.description ))</div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </transition>

    </div><!-- close .post-authorize -->
  </transition>
</div>