jam-cloud/web/app/assets/stylesheets/client/react-components/MediaControls.scss.scss

@import "client/common";

.media-controls {
  padding: 3px 0;
  width:100%;
  min-width:100%;
  background-color: #242323;
  position: relative;
  font-size: 13px;
  text-align: center;
  @include border_box_sizing;
  height: 36px;
  display:block;
  white-space:nowrap;

  .play-buttons {
    float:left;
    margin-top:5px;
  }

  .recording-position {
    float:left;
    margin-left:10px;

  }

  .recording-time {
    float:left;
    margin-top:8px;
    &.start-time {
      margin-left:10px;
    }
    &.duration-time {
      float:right;
    }
  }

  .recording-playback {
    float:left;
  }

  .recording-current {
    display:none;
  }

  .recording-playback {
    display:inline-block;
    background-image:url(/assets/content/bkg_playcontrols.png);
    background-repeat:repeat-x;
    position:relative;
    width:calc(100% - 115px);
    margin-left:83px;
    margin-right:20px;
    margin-top:8px;
    cursor:pointer;
    height:16px;
    position:absolute;
    left:0;

  }

  .recording-slider {
    position:absolute;
    left:0;
    top:0;

    img {
      position:absolute;
    }
  }

  .metronome-playback-options {
    float:left;
    margin-left:10px;
    margin-top:8px;
  }

  .metronome-options {
   float:right;
  }

  &.jamtrack-mode, &.mediafile-mode {
    .metronome-playback-options {
      display:none;
    }
    .metronome-text {
      display:none;
    }
    .metronome-options {
      display:none;
    }
  }


  &.metronome-mode {
    .recording-time {display:none}
    .recording-playback {display:none}
    .recording-current {display:none}
    .playback-mode-buttons {display:none}
    .stop-button {display:none}

    select {
      width:75px;
      float:right;
    }

    label {
      float: right !important;
      margin-left: 5px;
      margin-top: 7px !important;
      margin-right: 5px !important;
    }
  }

  .recording-status {
    font-size:15px;
  }

  .recording-status .recording-duration {
    font-family:Arial, Helvetica, sans-serif;
    display:inline-block;
    font-size:18px;
    position:absolute;
    //top:3px;
    right:4px;
  }

  .recording-slider {
    cursor:pointer;
  }


  &.has-mix {
    .recording-status {
      display:none;
    }
  }

  &:not(.has-mix) {

    border-width: 0; // override screen_common's .error

    .play-button {
      display:none;
    }
    .recording-current {
      display:none;
    }
    .recording-position {
      display:none;
    }
  }

  .jam-track-get-ready, .media-seeking {
    display:none;
    position:absolute;
    top:20px;
    margin-left:-50px;
    width:100px;
    vertical-align:middle;
    height:32px;
    line-height:32px;
    left:50%;

    .spinner-small {
      vertical-align:middle;
      display:inline-block;
    }

    span {
      vertical-align:middle;
    }
  }

  .jam-track-get-ready[data-mode="JAMTRACK"][data-current-time="0"] {
    display:block;
  }

  .media-seeking[data-mode="SEEKING"] {
    display:block;
  }

  .playback-mode-buttons {
    display:none;
  }

  .play-button, .stop-button {
    outline:none;
  }

  .stop-button {
    margin-left:3px;
  }

  .play-button img.pausebutton {
    display:none;
  }

  .metronome-controls {
    float:left;
  }

  .metronome-options {
    float:right;
  }
}