Nation Library - Controls example

Shows how to create media player controls.

by NationStudio

HTML

<script src="https://techdocs.wearenation.co.uk/nation/Utils.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/EventDispatcher.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/Animation.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/ProgressBar.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/MediaControls.js"></script>
<div class="controls-container">
  <div class="js-controls">
    <div class="js-progress-bar">
      <div class="js-progress"></div>
      <div class="js-track"></div>
      <div class="js-handle"></div>
    </div>
    <a href="#" class="js-play-button button"></a>
    <a href="#" class="js-mute-button button"></a>
    <a href="#" class="js-full-screen-button button"></a>
  </div>
</div>

CSS

.controls-container {
  position: relative;
  width: 50%;
  max-width: 600px;
  height: 100px;
  overflow: hidden;
  background: #000;
}

.js-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-family: sans-serif;
  background: #000;
}

.button {
  display: inline-block;
  min-width: 70px;
  margin-top: 10px;
  padding: 5px;
  border: 0;
  text-align: center;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  background: #0C54D9;
  font-family: sans-serif;
}
button.active {
  background: #ff0066;
}

.js-play-button:after {
  content: "Play";
}
.js-play-button.active:after {
  content: "Pause";
}

.js-mute-button:after {
  content: "Mute";
}
.js-mute-button.active:after {
  content: "UnMute";
}

.js-full-screen-button:after {
  content: "Enter Full Screen";
}
.js-full-screen-button.active:after {
  content: "Exit full screen";
}

.js-progress-bar {
  position: relative;
  height: 10px;
  background: #0D398B;
}

.js-progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: #0C54D9;
}

.js-track {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.js-handle {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 100%;
  cursor: pointer;
  background: #fff;
}

JavaScript

// Element contianing js-controls. js-controls is expected 
// to be absolutely positioned, as this application modifies
// the 'bottom' attribute to hide controls during the slide
// transition option
var element = document.documentElement.querySelector(".controls-container");
// Options for the controls
var options = {
  slide: true,
  easing: "easeInOutQuad",
  handlePositioning: "inside"
};
// Create controls
var controls = new NATION.MediaControls(element, options);

// Listen for mute button click, and then do something in response
controls.addListener(controls.MUTE_CLICKED, function(e) {
	alert("Mute clicked");
});
// Listen for unmute button click, and then do something in response
controls.addListener(controls.UNMUTE_CLICKED, function(e) {
	alert("UnMute clicked");
});