feat(audio): init new component #6

cypress/integration/player.js

@@ -0,0 +1,47 @@
+const getStore = () => cy.window().its('store')
+
+describe('player', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  });
+
+  it('should be render', () => {
+    cy.get('#player');
+  });
+
+  it('audio', () => {
+    cy.get('#player audio');
+  });
+
+  it('render song url', () => {
+    cy
+      .get('#player .player__title')
+      .contains('/jezusesajelzoraketa.mp3')
+  });
+
+  it('render song duration', () => {
+    cy
+      .get('#player .player__duration')
+      .contains('00:05:46')
+  });
+
+  context('without song', () => {
+    beforeEach(() => {
+      getStore().then(store => {
+        store.set({ song: {} })
+      })
+    })
+
+    it('default title', () => {
+      cy
+        .get('.player__title')
+        .contains('No sound selected')
+    });
+
+    it.skip('default duration', () => {
+      cy
+        .get('#player .player__duration')
+        .contains('--:--:--')
+    });
+  })
+});

src/client.js

@@ -1,5 +1,12 @@
 import * as sapper from '../__sapper__/client.js';
+import { Store } from 'svelte/store.js';
+
 
 sapper.start({
-  target: document.querySelector('#tilos-client')
+  target: document.querySelector('#tilos-client'),
+  store: data => {
+    const store = new Store(data);
+    window.store = store;
+    return store;
+  }
 });

src/components/Player.html

@@ -0,0 +1,24 @@
+<div id="player" class="player">
+  <audio src={ $song.url } controls bind:duration=duration></audio>
+  <h3 class="player__title">{ $song.url ? $song.url : 'No sound selected' }</h3>
+  <div class="player__duration">{ format(duration) }</div>
+</div>
+
+
+<script>
+    const pad = num => num < 10 ? '0' + num : num;
+  export default {
+    helpers: {
+      format: time => {
+        if (isNaN(time)) return '--:--:--';
+        const hours = Math.floor(time / (60 * 60))
+        const minutes = Math.floor((time / 60) % 60);
+        const seconds = Math.ceil((time % 60));
+        return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+      }
+    },
+    data() {
+      return { duration: 0 }
+    }
+  };
+</script>

src/routes/_layout.html

@@ -4,6 +4,7 @@
   <svelte:component this={child.component} {...child.props}/>
 </main>
 
+<Player></Player>
 <style>
   main {
     position: relative;
@@ -18,7 +19,8 @@
 <script>
   export default {
     components: {
-      Nav: '../components/Nav.html'
+      Nav: '../components/Nav.html',
+      Player: '../components/Player.html'
     }
   };
 </script>

src/server.js

@@ -2,6 +2,8 @@ import sirv from 'sirv';
 import polka from 'polka';
 import compression from 'compression';
 import * as sapper from '../__sapper__/server.js';
+import { Store } from 'svelte/store.js';
+
 
 const { PORT, NODE_ENV } = process.env;
 const dev = NODE_ENV === 'development';
@@ -10,7 +12,16 @@ polka() // You can also use Express
   .use(
     compression({ threshold: 0 }),
     sirv('static', { dev }),
-    sapper.middleware()
+    sapper.middleware({
+      store: request => {
+        return new Store({
+          development: dev,
+          song: {
+            url: '/jezusesajelzoraketa.mp3'
+          }
+        })
+      }
+    })
   )
   .listen(PORT, err => {
     if (err) console.log('error', err);