After setting up a search component that sends data to the parent player.component, I pass the video id and an object containing 5 search results to the player.component.
<template>
<div class="mobile-screen">
<b-container>
<search-component
v-on:updateVideoId="updateVideoId($event)"
v-on:playlist="playlist($event)"
/>
<youtube :video-id="videoId" ref="youtube" @playing="playing"></youtube>
<button @click="playVideo">play</button>
<button @click="stopVideo">stop</button>
<button @click="nextVideo">next</button>
<b-row>
<b-col>
<ul v-if="info">
<li v-for="(item, index) in info.items" :key="index.etag">
<p class="text">{{ item.snippet.videoId }}</p>
</li>
</ul>
</b-col>
</b-row>
</b-container>
</div>
</template>
I have access to both the videoId and the search result object. However, I am looking for a way to implement functionality where the player can play the next video in the search results list but unsure of how to achieve this.
<script>
import SearchComponent from "./SearchComponent.vue";
//import axios from "axios";
export default {
components: { SearchComponent },
name: "PlayerComponent",
props: {
msg: String,
},
data() {
return {
searchResult: null,
videoId: "lG0Ys-2d4MA",
};
},
mounted() {},
methods: {
updateVideoId(payload) {
this.videoId = payload;
},
nextVideo() {},
playlist(payload) {
this.searchResult = payload;
console.log("playlist", payload);
this.player.nextVideo();
},
playVideo() {
this.player.loadPlaylist({
list: String,
listType: String,
index: Number,
startSeconds: Number,
});
this.player.playVideo();
},
stopVideo() {
this.player.stopVideo();
},
playing() {
console.log(" we are watching!!!");
},
},
computed: {
player() {
return this.$refs.youtube.player;
},
},
};
</script>