JSFiddle - React, Tailwind, and code Playground

by buddha gautama

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<div class="container-fluid">
  <div id="content">
    <div class="music-player-container" id="1mpc">
      <div class="card card-inverse" id="1card">
        <div class="card-header" id="1cardHeader">
          <div class="top">
            <i id="1fav" class="favtoggle fa not-liked"></i>
            <i id="1pl" class="fa fa-plus-circle"></i>
          </div>
        </div>
        <div id="1album" class="album">
          <div class="album-art">
            <img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/81kZdGYO%2ByL._SL1500_.jpg" alt="Card image cap">
            <div class="card-img-overlay h-100 d-flex flex-column justify-content-center text-center">
              <span class="control-play" id="1control-play" data-id="1" data-ctype="audio/mp3" data-src="http://localhost:49544/Albums/The_Beatles/Greatest_Hits/hey jude.mp3" title="Play"></span>
            </div>
          </div>
          <div class="vinyl" id="1vinyl"></div>
        </div>
        <div class="card-footer">
          <span class="text-ellipsis text-left">hey jude</span>
          <small class=" text-left text-ellipsis text-xs text-muted">Abbey Road</small>
        </div>
      </div>
      <!-2nd one->


      <div class="music-player-container" id="2mpc">
        <div class="card card-inverse" id="2card">
          <div class="card-header" id="2cardHeader">
            <div class="top">
              <i id="2fav" class="favtoggle fa not-liked"></i>
              <i id="2pl" class="fa fa-plus-circle"></i>
            </div>
          </div>
          <div id="2album" class="album">
            <div class="album-art">
              <img class="card-img-top"...

CSS

/* CSS used here will be applied after bootstrap.css */


/* CSS used here will be applied after bootstrap.css */


/*@import '../../bourbon/_bourbon.scss';*/


/*@import "../../bourbon-bitters/_bitters.scss";*/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500);
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
}


/*@import "compass/css3";*/


/*@import "../../bourbon-bitters/mixins/_base.scss";*/


/*@mixin filter($function: none) {
 //   @warn "This old mixin is deprecated!";

    @include _bourbon-deprecate-for-prefixing("filter");
    // <filter-function> [<filter-function]* | none
    @include prefixer(filter, $function, webkit spec);
}*/

body {
  background-color: #fff;
  color: #515044;
  font-family: 'Raleway', sans-serif;
}

.music-player-container {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-block;
  height: 220px;
  position: relative;
  max-width: 130px;
  margin-left: 70px;
  margin-top: 170px;
}

.music-player {
  background-color: #fff;
  height: 120px;
  padding: 40px 200px 40px 40px;
  position: absolute;
  text-align: right;
  width: 125px;
  z-index: 3;
}

.player-content-container {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  position: relative;
}

.artist-name {
  font-size: 28px;
  font-weight: normal;
  margin: 0 0 0.75em 0;
}

.album-title {
  font-weight: 200;
  font-size: 24px;
  margin: 0 0 1.75em 0;
}

.song-title {
  font-size: 18px;
  font-weight: 200;
  margin: 0 0 1.5em 0;
}

.album {
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.65);
  height: 120px;
  /*margin-left: 250px;
 ...

JavaScript

function MusicPlayer(mp, id) {
      this.mpc = mp;
      this.initEvents(id);

    }

    MusicPlayer.prototype = {
      initEvents: function(id) {
        var obj = this;
        obj.mpc.on('click', function(event) {

          var others = $("div.music-player-container").not($(this));

          $.each(others, function(index, value) {
            alert("other non-clicked players :" + $(value).attr("id") + " ; is it playing?" + $(value).is('.is-playing .vinyl'));
            if ($(value).is('.is-playing .vinyl')) {
              // $(value).removeClass('is-playing');
              //$(value).toggleClass('is-playing', false);
              $(value).removeClass('is-playing');
              $(value).addClass('is-not-playing');

              $(value).toggleClass('is-not-playing', true);

            }

          });
          alert("Current clicked music-Player-Container being toggled :" + $(this).attr("id"));
          $(this).toggleClass('is-playing');

          event.stopPropagation();

        });
      }
    }

    $(function() {

      var $div = $('#content');
      $(".control-play").bind('click', $.proxy(function(event) {
        //Get Control-Play clicked
        var cplay_clicked = $(event.target).attr('id');
        alert("control-player-clicked:" + cplay_clicked);
        //Get Music-Player-Container that has clicked Control-Play inside it
        var $musiPlayerContainer = $div.find('#' + event.target.dataset.id + 'mpc');
        var mpc = new MusicPlayer($musiPlayerContainer, event.target.dataset.id);
        $('div.music-player-container').removeClass('is-playing');
      }, this));
    });