Add radio player

index.php

@@ -8,6 +8,11 @@
     <h1>Nuit de l'info 2017</h1>
     <h2>Super projet</h2>
   </div>
+    <div class="row">
+        <div class="col-sm-4 col-md-2">
+        <div id="player"></div>
+        </div>
+    </div>
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script src="assets/bundle.js"></script>
 </body>

src/index.js

 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap/dist/css/bootstrap-theme.min.css'
 import 'bootstrap'
+import './player'
\ No newline at end of file

src/player.js

+import Vue from 'vue'
+
+new Vue({
+    el: '#player',
+    data: {
+        audio: new Audio('http://www.radioking.com/play/radio-nuit-info'),
+        playClass: 'glyphicon-pause',
+        cover: '',
+        title: '',
+        artist: ''
+    },
+    methods: {
+        togglePlay: function () {
+            if (this.playClass === 'glyphicon-play') {
+                this.audio.volume = 1
+                this.playClass = 'glyphicon-pause'
+            }
+            else {
+                this.audio.volume = 0
+                this.playClass = 'glyphicon-play'
+            }
+        },
+        reloadData: function () {
+            let xmlhttp = new XMLHttpRequest();
+            let url = "https://www.radioking.com/widgets/currenttrack.php?radio=116593&format=json";
+
+            xmlhttp.onreadystatechange = function() {
+                if (this.readyState === 4 && this.status === 200) {
+                    var myArr = JSON.parse(this.responseText);
+                    setup(myArr);
+                }
+            };
+            xmlhttp.open("GET", url, true);
+            xmlhttp.send();
+
+            let setup = (myArr) => {
+                this.cover = myArr.cover
+                this.artist = myArr.artist
+                this.title = myArr.title
+            }
+
+            window.setTimeout(this.reloadData, 10000)
+        }
+    },
+    created: function () {
+        var audio = this.audio
+        this.audio.onloadedmetadata = function () {audio.play()}
+        this.reloadData()
+
+    },
+    template: '<div>' +
+    '</a><div class="thumbnail"><img v-bind:src="cover" alt="cover"/><div class="caption">' +
+    '<p class="text-center">{{ title }} - {{ artist }} <a href="#" v-on:click="togglePlay" class="btn btn-default">' +
+    '<span class="glyphicon" v-bind:class="[playClass]" aria-hidden="true"></span></a></p></div></div></div>'
+})
\ No newline at end of file