MusareNode/frontend/src/components/modals/ManageStation/Tabs/YoutubeSearch.vue

<template>
	<div class="youtube-search">
		<label class="label"> Search for a song from YouTube </label>
		<div class="control is-grouped input-with-button">
			<p class="control is-expanded">
				<input
					class="input"
					type="text"
					placeholder="Enter your YouTube query here..."
					v-model="search.songs.query"
					autofocus
					@keyup.enter="searchForSongs()"
				/>
			</p>
			<p class="control">
				<a
					class="button is-info"
					@click.prevent="searchForSongs()"
					href="#"
					><i class="material-icons icon-with-button">search</i
					>Search</a
				>
			</p>
		</div>

		<div v-if="search.songs.results.length > 0" id="song-query-results">
			<search-query-item
				v-for="(result, index) in search.songs.results"
				:key="index"
				:result="result"
			>
				<div slot="actions">
					<transition name="search-query-actions" mode="out-in">
						<a
							class="button is-success"
							v-if="result.isAddedToQueue"
							href="#"
							key="added-to-queue"
						>
							<i class="material-icons icon-with-button">done</i>
							Added to queue
						</a>
						<a
							class="button is-dark"
							v-else
							@click.prevent="addSongToQueue(result.id, index)"
							href="#"
							key="add-to-queue"
						>
							<i class="material-icons icon-with-button">add</i>
							Add to queue
						</a>
					</transition>
				</div>
			</search-query-item>

			<a
				class="button is-default load-more-button"
				@click.prevent="loadMoreSongs()"
				href="#"
			>
				Load more...
			</a>
		</div>
	</div>
</template>

<script>
import { mapState, mapGetters } from "vuex";

import Toast from "toasters";
import SearchYoutube from "@/mixins/SearchYoutube.vue";

import SearchQueryItem from "../../../SearchQueryItem.vue";

export default {
	components: {
		SearchQueryItem
	},
	mixins: [SearchYoutube],
	computed: {
		...mapState("modals/editStation", {
			station: state => state.station,
			originalStation: state => state.originalStation
		}),
		...mapGetters({
			socket: "websockets/getSocket"
		})
	},
	methods: {
		addSongToQueue(youtubeId, index) {
			if (this.station.type === "community") {
				this.socket.dispatch(
					"stations.addToQueue",
					this.station._id,
					youtubeId,
					data => {
						if (data.status !== "success")
							new Toast(`Error: ${data.message}`);
						else {
							this.search.songs.results[
								index
							].isAddedToQueue = true;

							new Toast(data.message);
						}
					}
				);
			} else {
				this.socket.dispatch("songs.request", youtubeId, data => {
					if (data.status !== "success")
						new Toast(`Error: ${data.message}`);
					else {
						this.search.songs.results[index].isAddedToQueue = true;

						new Toast(data.message);
					}
				});
			}
		}
	}
};
</script>