feat(audio): progressbar #6

rudywaltz · Feb 28, 2019 · 92c8f4c · 92c8f4c
1 parent f1600be
commit 92c8f4c
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/cypress/integration/player.js b/cypress/integration/player.js
@@ -60,7 +60,7 @@ describe('player', () => {
 
   it('play sound', () => {
     cy.get('#player .player__play')
-      .click()
+      .click();
     expectPlayingAudio(cy.get('audio'), true);
   });
 
@@ -71,12 +71,26 @@ describe('player', () => {
       expectPlayingAudio(cy.get('audio'), false);
   });
 
-  it('render current time', () => {
+  it('has progressbar', () => {
+    cy.get('#player .progress .progress__bar')
+  });
+
+  it('render current time', () => { // TODO: more accurate test
     cy.get('#player .player__play')
       .click()
     cy.get('#player .player__current')
     .contains('00:00:01')
     cy.get('#player .player__current')
     .contains('00:00:02')
+    cy.get('.progress__bar')
+      .should( $div => {
+         expect($div[0].style.width).to.eq('0.3%');
+      })
+  });
+
+  it.skip('render current time2', () => { // TODO
+    cy.get('audio').should($element => {
+      $element[0].currentTime = 100;
+    })
   });
 });
diff --git a/src/components/Player.html b/src/components/Player.html
@@ -4,6 +4,9 @@ <h3 class="player__title">{ $song.url ? $song.url : 'No sound selected' }</h3>
   <div class="player__duration">{ $song.url ? format(duration) : format() }</div>
   <div class="player__current">{ $song.url ? format(time) : format() }</div>
   <button type="button" class="player__play" on:click='set({paused: !paused})'>{ paused ? 'Play' : 'Pause' }</button>
+  <div class="progress">
+    <div class="progress__bar" style="width:{ percent }%"></div>
+  </div>
 </div>
 
 
@@ -19,8 +22,25 @@ <h3 class="player__title">{ $song.url ? $song.url : 'No sound selected' }</h3>
         return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
       }
     },
+    computed: {
+      percent: ({ time, duration }) => (time / duration * 100).toFixed(2) || 0
+    },
     data() {
       return { duration: 0, time: 0, paused: true }
     }
   };
 </script>
+
+<style>
+  .progress {
+    width: 200px;
+    background: #aaa;
+    height: 50px;
+  }
+
+  .progress__bar {
+    background: #444;
+    height: 50px;
+    width: 0;
+  }
+</style>