feat(player): add seek button #7

cypress/integration/player.js

@@ -19,10 +19,10 @@ describe('player', () => {
         .get('#player .player__duration')
         .contains('--:--:--')
     });
-    it('default current time', () => {
-      cy
-        .get('#player .player__current')
-        .contains('--:--:--')
+
+    it('buttons disabled', () => {
+      cy.get('#player .player__play').should('be.disabled');
+      cy.get('#player .player__seek').should('be.disabled');
     });
   })
 
@@ -67,23 +67,25 @@ describe('player', () => {
       cy.get('#player .progress .progress__bar')
     });
 
-    it('render current time', () => { // TODO: more accurate test
+    it('render current time', () => {
       cy.get('#player .player__play')
         .click()
       cy.get('#player .player__current')
-      .contains('00:00:01')
+        .contains('00:00:01')
+    });
+
+    it('progressbar display current position', () => {
+      cy.get('#player .player__play')
+        .click()
+      cy.get('#player .player__seek')
+        .click()
       cy.get('#player .player__current')
-      .contains('00:00:02')
+        .contains('00:01:02')
       cy.get('.progress__bar')
         .should( $div => {
-          expect($div[0].style.width).to.be.greaterThan('0.30%');
+          expect($div[0].style.width).to.be.greaterThan('10%');
         })
     });
 
-    it.skip('render current time2', () => { // TODO
-      cy.get('audio').should($element => {
-        $element[0].currentTime = 100;
-      })
-    });
   });
 });

src/components/Player.html

@@ -3,7 +3,8 @@ <h2>Player</h2>
     <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='toggleSound()'>{ playing ? 'Pause' : 'Play' }</button>
+  <button type="button" class="player__play" on:click=toggleSound() disabled={!duration}>{ playing ? 'Pause' : 'Play' }</button>
+  <button type="button" on:click=seekSound() disabled={!duration} class="player__seek">Seeek</button>
   <div class="progress">
     <div class="progress__bar" style="width:{ percent }%"></div>
   </div>
@@ -35,8 +36,11 @@ <h3 class="player__title">{ $song.url ? $song.url : 'No sound selected' }</h3>
         src: [this.store.get().song.url],
         xhrWithCredentials: true,
         preload: true,
-        html5: true,
-        pool: 0
+        html5: false,
+        pool: 0,
+        onend: () => {
+          console.log('end of song');
+        }
       });
 
       this.currentSound.once('load', () => {
@@ -72,6 +76,9 @@ <h3 class="player__title">{ $song.url ? $song.url : 'No sound selected' }</h3>
         this.currentSound.stop();
         // this.currentSound.unload();
         this.set({playing: this.currentSound.playing()});
+      },
+      seekSound: function() {
+        this.currentSound.seek(this.currentSound.seek() + 60);
       }
     }
   };