fix logs merge with diff algorithm

assets/index.js

@@ -1,5 +1,8 @@
+import '@fortawesome/fontawesome-free/css/all.min.css';
+import '@fortawesome/fontawesome-free/css/fontawesome.min.css';
+
 import './js';
 import './styles.scss';
-import './noscript.scss';
+// import './noscript.scss';
 import './vue';
 

assets/js/index.js

@@ -3,12 +3,16 @@ import Buefy from 'buefy';
 
 Vue.use(Buefy);
 
-window.addEventListener('load', () => {
-    var app = new Vue({
+var app = null;
+
+function loadApp() {
+    app = new Vue({
       el: '#app',
       delimiters: [ '[[', ']]' ],
     })
-});
+}
 
 
+window.addEventListener('load', loadApp);
+
 

assets/styles.scss

@@ -5,17 +5,25 @@ $body-background-color: $light;
 
 @import "~bulma/bulma";
 
-.navbar {
-    margin-bottom: 1em;
+.is-fullwidth { width: 100%; }
+.is-fixed-bottom {
+    position: fixed;
+    bottom: 0;
+    margin-bottom: 0px;
+    border-radius: 0;
+}
+.is-borderless { border: none; }
+
+
+.navbar + .container {
+    margin-top: 1em;
 }
 
-.navbar.has-shadow {
-    box-shadow: 0em 0.05em 0.5em rgba(0,0,0,0.1);
+.navbar.has-shadow, .navbar.is-fixed-bottom.has-shadow {
+    box-shadow: 0em 0em 1em rgba(0,0,0,0.1);
 }
 
 /*
-
-
 .navbar-brand img {
     min-height: 6em;
 }

assets/vue/index.js

@@ -1,11 +1,15 @@
 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);
 
-export {Tab, Tabs};
+export {Player, Tab, Tabs};
 
 

assets/vue/onAir.vue

@@ -0,0 +1,63 @@
+<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

@@ -0,0 +1,82 @@
+<template>
+    <div class="media">
+        <div class="media-left">
+            <div class="button is-size-4" @click="toggle()">
+                <span class="fas fa-pause" v-if="playing"></span>
+                <span class="fas fa-play" v-else></span>
+            </div>
+            <audio ref="audio" @playing="onChange" @ended="onChange" @pause="onChange">
+                <slot name="sources"></slot>
+            </audio>
+        </div>
+        <div class="media-content">
+        </div>
+    </div>
+</template>
+
+
+<script>
+export const State = {
+    paused: 0,
+    playing: 1,
+    loading: 2,
+}
+
+export default {
+    data() {
+        return {
+            state: State.paused,
+        }
+    },
+
+    props: {
+        onAir: String,
+        src: String,
+    },
+
+    computed: {
+        paused() { return this.state == State.paused; },
+        playing() { return this.state == State.playing; },
+        loading() { return this.state == State.loading; },
+    },
+
+    methods: {
+        load(src) {
+            const audio = this.$refs.audio;
+            audio.src = src;
+            audio.load()
+        },
+
+        play(src) {
+            if(src)
+                this.load(src);
+            this.$refs.audio.play().catch(e => console.error(e))
+        },
+
+        pause() {
+            this.$refs.audio.pause()
+        },
+
+        toggle() {
+            if(this.paused)
+                this.play()
+            else
+                this.pause()
+        },
+
+        onChange(event) {
+            const audio = this.$refs.audio;
+            this.state = audio.paused ? State.paused : State.playing;
+        },
+    },
+
+    mounted() {
+        this.load(this.src);
+    }
+}
+
+</script>
+
+
+
+