Youtube search results now include link to channel

frontend/src/components/SearchQueryItem.vue

@@ -1,11 +1,20 @@
 <template>
 	<div class="universal-item search-query-item">
-		<div id="thumbnail-and-info">
+		<div class="thumbnail-and-info">
 			<img class="item-thumbnail" :src="result.thumbnail" />
-			<div id="song-info">
+			<div class="song-info">
 				<h4 class="item-title" :title="result.title">
 					{{ result.title }}
 				</h4>
+				<a
+					v-if="result.channelTitle && result.channelId"
+					class="item-description"
+					:title="result.channelTitle"
+					:href="'https://youtube.com/channel/' + result.channelId"
+					target="_blank"
+				>
+					{{ result.channelTitle }}
+				</a>
 			</div>
 		</div>
 		<div class="universal-item-actions">
@@ -58,7 +67,7 @@ export default {
 }
 
 .search-query-item {
-	#thumbnail-and-info,
+	.thumbnail-and-info,
 	.universal-item-actions {
 		display: flex;
 		align-items: center;
@@ -73,11 +82,11 @@ export default {
 		height: 55px;
 	}
 
-	#thumbnail-and-info {
+	.thumbnail-and-info {
 		width: calc(100% - 160px);
 	}
 
-	#song-info {
+	.song-info {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
@@ -88,6 +97,11 @@ export default {
 			font-size: 16px;
 		}
 
+		.item-description {
+			margin: 0;
+			font-size: 12px;
+		}
+
 		*:not(i) {
 			margin: 0;
 			font-family: Karla, Arial, sans-serif;

frontend/src/components/modals/EditPlaylist.vue

@@ -200,7 +200,7 @@
 						</search-query-item>
 
 						<a
-							class="button is-default load-more-button"
+							class="button is-primary load-more-button"
 							@click.prevent="loadMoreSongs()"
 							href="#"
 						>

frontend/src/components/modals/ManageStation/Tabs/Search.vue

@@ -59,10 +59,7 @@
 					/>
 				</p>
 				<p class="control">
-					<a
-						class="button is-info"
-						@click.prevent="searchForSongs()"
-						href="#"
+					<a class="button is-info" @click.prevent="searchForSongs()"
 						><i class="material-icons icon-with-button">search</i
 						>Search</a
 					>
@@ -80,7 +77,6 @@
 							<a
 								class="button is-success"
 								v-if="result.isAddedToQueue"
-								href="#"
 								key="added-to-queue"
 							>
 								<i class="material-icons icon-with-button"
@@ -94,7 +90,6 @@
 								@click.prevent="
 									addSongToQueue(result.id, index)
 								"
-								href="#"
 								key="add-to-queue"
 							>
 								<i class="material-icons icon-with-button"
@@ -107,9 +102,8 @@
 				</search-query-item>
 
 				<a
-					class="button is-default load-more-button"
+					class="button is-primary load-more-button"
 					@click.prevent="loadMoreSongs()"
-					href="#"
 				>
 					Load more...
 				</a>

frontend/src/mixins/SearchYoutube.vue

@@ -44,6 +44,8 @@ export default {
 							url: `https://www.youtube.com/watch?v=${this.id}`,
 							title: result.snippet.title,
 							thumbnail: result.snippet.thumbnails.default.url,
+							channelId: result.snippet.channelId,
+							channelTitle: result.snippet.channelTitle,
 							isAddedToQueue: false
 						});
 					});
@@ -67,6 +69,8 @@ export default {
 								title: result.snippet.title,
 								thumbnail:
 									result.snippet.thumbnails.default.url,
+								channelId: result.snippet.channelId,
+								channelTitle: result.snippet.channelTitle,
 								isAddedToQueue: false
 							});
 						});