Fixes, theming & deploy files

client/src/components/Playlist.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <b-button icon-left="plus" @click="addLinkPrompt">Add link</b-button>
+    <hr>
     <b-table :data="roomStatus.playlist" striped hoverable default-sort="vote">
       <template slot-scope="props">
         <b-table-column field="title" label="Title">
@@ -20,8 +21,9 @@
         </b-table-column>
 
         <b-table-column>
-          <b-button v-if="hasVoted(props.row)" icon-left="arrow-down-bold-outline" type="is-dark" @click="vote (props.row.link, props.row.linkID, false)"/>
-          <b-button v-else icon-left="arrow-up-bold-outline" type="is-dark" @click="vote (props.row.link, props.row.linkID, true)"/>
+          <b-button v-if="hasVoted(props.row)" icon-left="arrow-down-bold-outline" type="is-primary" @click="vote (props.row.link, props.row.linkID, false)"/>
+          <b-button v-else icon-left="arrow-up-bold-outline" type="is-primary" @click="vote (props.row.link, props.row.linkID, true)"/>
+          <b-button v-if="isAdmin" class="actionButton" icon-left="delete-forever" type="is-danger" @click="removePlay (props.row.linkID)"/>
         </b-table-column>
       </template>
     </b-table>
@@ -45,25 +47,27 @@ export default {
         message: 'Add a youtube link',
         trapFocus: true,
         inputAttrs: {
-          placeholder: 'https://www.youtube.com/watch?v=YItIK09bpKk',
-          minlength: 10
+          placeholder: 'https://www.youtube.com/watch?v=YItIK09bpKk'
         },
         cancelText: 'Nah',
         confirmText: 'Add',
         onConfirm: (link) => this.addLink(link)
       })
     },
-    addLink (link) {
+    async addLink (link) {
       const linkID = this.$youtube.getIdFromUrl(link)
       if (linkID === null) {
         this.$buefy.toast.open('Invalid youtube link')
         return
       }
-      this.vote(link, linkID, true)
+      const infos = await this.getInfos(linkID)
+      console.log(infos)
+      console.log(infos.title)
+      this.vote(infos.title, link, linkID, true)
     },
-    vote (link, linkID, isPositive) {
+    vote (title, link, linkID, isPositive) {
       if (this.isAdmin) {
-        this.$store.dispatch('room/vote', { link: link, linkID: linkID, isPositive: isPositive, voterName: this.$store.state.rtc.name })
+        this.$store.dispatch('room/vote', { title: title, link: link, linkID: linkID, isPositive: isPositive, voterName: this.$store.state.rtc.name })
       } else {
         this.sendVote(link, linkID, isPositive)
       }
@@ -80,7 +84,20 @@ export default {
     },
     hasVoted (play) {
       return play.voters.includes(this.$store.state.rtc.name)
+    },
+    removePlay (linkID) {
+      this.$store.dispatch('room/removePlay', linkID)
+    },
+    async getInfos (linkID) {
+      const response = await fetch('http://noembed.com/embed?format=json&' + 'url=https://www.youtube.com/watch?v=' + linkID)
+      return await response.json()
     }
   }
 }
 </script>
+
+<style local>
+.actionButton {
+  margin-left: 10px;
+}
+</style>