Display YouTube title

resources/assets/js/components/main-wrapper/extra/youtube.vue

@@ -2,7 +2,7 @@
   <div id="youtube-extra-wrapper">
     <template v-if="videos && videos.length">
       <a class="video" v-for="video in videos" :href="`https://youtu.be/${video.id.videoId}`"
-        @click.prevent="playYouTube(video.id.videoId)">
+        @click.prevent="play(video)">
         <div class="thumb">
           <img :src="video.snippet.thumbnails.default.url" width="90">
         </div>
@@ -39,8 +39,8 @@ export default {
   },
 
   methods: {
-    playYouTube (id) {
-      youtubeService.play(id)
+    play (video) {
+      youtubeService.play(video)
     },
 
     /**

resources/assets/js/components/main-wrapper/main-content/index.vue

@@ -114,6 +114,9 @@ export default {
 
     span:first-child {
       flex: 1;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
 
     .meta {

resources/assets/js/components/main-wrapper/main-content/youtube-player.vue

@@ -1,6 +1,6 @@
 <template>
   <section id="youtubeWrapper">
-    <h1 class="heading"><span>YouTube Video</span></h1>
+    <h1 class="heading"><span>{{ title }}</span></h1>
     <div id="player">
       <p class="none">Your YouTube video will be played here.<br/>
       You can start a video playback from the right sidebar. When a song is playing, that is.<br>
@@ -20,6 +20,12 @@ let player
 export default {
   name: 'main-wrapper--main-content--youtube-player',
 
+  data () {
+    return {
+      title: 'YouTube Video'
+    }
+  },
+
   methods: {
     /**
      * Initialize the YouTube player. This should only be called once.
@@ -41,7 +47,8 @@ export default {
 
   created () {
     event.on({
-      'youtube:play': id => {
+      'youtube:play': ({ id, title }) => {
+        this.title = title
         this.initPlayer()
         player.loadVideoById(id)
         player.playVideo()

resources/assets/js/services/youtube.js

@@ -28,10 +28,13 @@ export const youtube = {
   /**
    * Play a YouTube video.
    *
-   * @param  {string} id The video ID
+   * @param  {Object} vide The video object
    */
-  play (id) {
-    event.emit('youtube:play', id)
+  play (video) {
+    event.emit('youtube:play', {
+      id: video.id.videoId,
+      title: video.snippet.title
+    })
     router.go('youtube')
   }
 }