work on player

assets/js/app.js

@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import Buefy from 'buefy';
+
+Vue.use(Buefy);
+
+export var app = null;
+
+function loadApp() {
+    app = new Vue({
+      el: '#app',
+      delimiters: [ '[[', ']]' ],
+    })
+}
+
+
+window.addEventListener('load', loadApp);
+
+

assets/js/index.js

@@ -1,18 +1,4 @@
-import Vue from 'vue';
-import Buefy from 'buefy';
-
-Vue.use(Buefy);
-
-var app = null;
-
-function loadApp() {
-    app = new Vue({
-      el: '#app',
-      delimiters: [ '[[', ']]' ],
-    })
-}
-
-
-window.addEventListener('load', loadApp);
+import app from './app';
+import LiveInfo from './liveInfo';
 
 

assets/js/liveInfo.js

@@ -0,0 +1,37 @@
+
+export default class {
+    constructor(url, timeout) {
+        this.url = url;
+        this.timeout = timeout;
+        this.promise = null;
+        this.items = [];
+    }
+
+    drop() {
+        this.promise = null;
+    }
+
+    fetch() {
+        const promise = fetch(this.url).then(response =>
+            response.ok ? response.json()
+                        : Promise.reject(response)
+        ).then(data => {
+            this.items = data;
+            return this.items
+        })
+
+        this.promise = promise;
+        return promise;
+    }
+
+    refresh() {
+        const promise = this.fetch();
+        promise.then(data => {
+            if(promise != this.promise)
+                return [];
+
+            window.setTimeout(() => this.refresh(), this.timeout*1000)
+        })
+        return promise
+    }
+}

assets/styles.scss

@@ -62,13 +62,15 @@ section > .toolbar {
 }
 
 
-.cover {
-    margin: 1em 0em;
-    border: 0.2em black solid;
-}
+main {
+    .cover {
+        margin: 1em 0em;
+        border: 0.2em black solid;
+    }
 
-.small-cover {
-    width: 10em;
+    .small-cover {
+        width: 10em;
+    }
 }
 
 aside {
@@ -86,4 +88,36 @@ aside {
 }
 
 
+.player {
+    box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
+
+    .media-left:not(:last-child) {
+        margin-right: 0em;
+    }
+
+    .media-cover {
+        border-left: 1px black solid;
+    }
+
+    .cover {
+        font-size: 1.5rem !important;
+        height: 2.5em !important;
+    }
+
+    .media-content {
+        padding: 0.2em;
+    }
+
+    .button {
+        font-size: 1.5rem !important;
+        height: 2.5em;
+        min-width: 2.5em;
+    }
+
+    .title {
+        margin: 0em;
+    }
+
+}
+
 

assets/vue/index.js

@@ -1,11 +1,9 @@
 import Vue from 'vue';
 
-import OnAir from './onAir.vue';
 import Player from './player.vue';
 import Tab from './tab.vue';
 import Tabs from './tabs.vue';
 
-Vue.component('a-on-air', OnAir);
 Vue.component('a-player', Player);
 Vue.component('a-tab', Tab);
 Vue.component('a-tabs', Tabs);

assets/vue/onAir.vue

@@ -1,63 +0,0 @@
-<template>
-    <div class="media">
-        <!-- TODO HERE -->
-    </div>
-
-</template>
-
-<script>
-
-export default {
-    props: {
-        url: String,
-        timeout: Number,
-    },
-
-    data() {
-        return {
-            // promise is set to null on destroy: this is used as check
-            // for timeout to know wether to repeat itself or not.
-            promise: null,
-            // on air infos
-            on_air: null
-        }
-    },
-
-
-    methods: {
-        fetch() {
-            const promise = fetch(url).then(response =>
-                reponse.ok ? response.json
-                           : Promise.reject(response)
-            ).then(data => {
-                this.on_air = data.results;
-                return this.on_air
-            })
-
-            this.promise = promise;
-            return promise;
-        },
-
-        refresh() {
-            const promise = this.fetch();
-            promise.then(data => {
-                if(promise != this.promise)
-                    return;
-
-                window.setTimeout(() => this.update(), this.timeout*1000)
-            })
-        },
-    },
-
-    mounted() {
-        this.update()
-    },
-
-    destroyed() {
-        this.promise = null;
-    }
-
-}
-</script>
-
-

assets/vue/player.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="media">
         <div class="media-left">
-            <div class="button is-size-4" @click="toggle()">
+            <div class="button" @click="toggle()"
+                    :title="buttonTitle" :aria-label="buttonTitle">
                 <span class="fas fa-pause" v-if="playing"></span>
                 <span class="fas fa-play" v-else></span>
             </div>
@@ -9,13 +10,24 @@
                 <slot name="sources"></slot>
             </audio>
         </div>
-        <div class="media-content">
+        <div class="media-left media-cover" v-if="onAir && onAir.cover">
+            <img :src="onAir.cover" class="cover" />
+        </div>
+        <div class="media-content" v-if="onAir && onAir.type == 'track'">
+            <slot name="track" :onAir="onAir" :liveInfo="liveInfo"></slot>
+        </div>
+        <div class="media-content" v-else-if="onAir && onAir.type == 'diffusion'">
+            <slot name="diffusion" :onAir="onAir" :liveInfo="liveInfo"></slot>
+        </div>
+        <div v-else><slot name="empty"></slot></div>
         </div>
     </div>
 </template>
 
 
 <script>
+import LiveInfo from 'js/liveInfo';
+
 export const State = {
     paused: 0,
     playing: 1,
@@ -26,11 +38,14 @@ export default {
     data() {
         return {
             state: State.paused,
+            liveInfo: new LiveInfo(this.liveInfoUrl, this.liveInfoTimeout),
         }
     },
 
     props: {
-        onAir: String,
+        buttonTitle: String,
+        liveInfoUrl: String,
+        liveInfoTimeout: { type: Number, default: 5},
         src: String,
     },
 
@@ -38,6 +53,16 @@ export default {
         paused() { return this.state == State.paused; },
         playing() { return this.state == State.playing; },
         loading() { return this.state == State.loading; },
+
+        onAir() {
+            return this.liveInfo.items && this.liveInfo.items[0];
+        },
+
+        buttonStyle() {
+            if(!this.onAir)
+                return;
+            return { backgroundImage: `url(${this.onAir.cover})` }
+        }
     },
 
     methods: {
@@ -71,8 +96,12 @@ export default {
     },
 
     mounted() {
-        this.load(this.src);
-    }
+        this.liveInfo.refresh()
+    },
+
+    destroyed() {
+        this.liveInfo.drop()
+    },
 }
 
 </script>