Fix player to bottom of viewport

app/styles/app.scss

@@ -1,3 +1,4 @@
+@import 'player';
 @import 'podcasts';
 
 body {

app/styles/player.scss

@@ -0,0 +1,3 @@
+#player.populated-false {
+  display: none;
+}

app/templates/application.hbs

@@ -21,4 +21,8 @@
     {{/link-to}} -->
 </div>
 
+<audio id="audio-player" preload="auto" mozaudiochannel="content"></audio>
+
+{{render "player"}}
+
 {{outlet 'modal'}}

app/templates/episodes.hbs

@@ -1,9 +1,4 @@
 <div class="episodes">
-
-    <audio id="audio-player" preload="auto" mozaudiochannel="content"></audio>
-
-    {{render "player"}}
-
   <div class="ui celled list">
     {{#each model as |episode|}}
       <div {{action "setEpisode" episode}} class="item episode {{if isNew "new" "old"}}">

app/templates/player.hbs

@@ -1,4 +1,4 @@
-<div id="player" class="{{isPopulated}}">
+<div id="player" class="populated-{{isPopulated}} ui bottom fixed menu">
   <div id="time-info">
     <progress id="audio-progress" max={{progressBar.max}}
               value={{progressBar.value}}>
@@ -12,7 +12,6 @@
 
   <div class="player-controls">
     <a {{action "rewind" model}} class="backward">
-      <i class="fa fa-backward"></i>
       {{fa-icon "backward"}}
     </a>
 

config/environment.js

@@ -5,7 +5,7 @@ module.exports = function(environment) {
     modulePrefix: 'high-fidelity',
     environment: environment,
     baseURL: '/',
-    locationType: 'auto',
+    locationType: 'hash',
     i18n: {
       defaultLocale: 'en'
     },