refactor(CreateSong): Set title and thumbnail on youtube video selection

frontend/src/components/modals/EditSong/Tabs/Youtube.vue

@@ -41,7 +41,7 @@
 					<i
 						class="material-icons icon-not-selected"
 						v-else
-						@click.prevent="updateYoutubeId(result.id)"
+						@click.prevent="selectSong(result)"
 						key="not-selected"
 						>radio_button_unchecked
 					</i>
@@ -73,14 +73,27 @@ export default {
 	},
 	computed: {
 		...mapState("modals/editSong", {
-			song: state => state.song
+			song: state => state.song,
+			newSong: state => state.newSong
 		}),
 		...mapGetters({
 			socket: "websockets/getSocket"
 		})
 	},
 	methods: {
-		...mapActions("modals/editSong", ["updateYoutubeId"])
+		selectSong(result) {
+			this.updateYoutubeId(result.id);
+
+			if (this.newSong) {
+				this.updateTitle(result.title);
+				this.updateThumbnail(result.thumbnail);
+			}
+		},
+		...mapActions("modals/editSong", [
+			"updateYoutubeId",
+			"updateTitle",
+			"updateThumbnail"
+		])
 	}
 };
 </script>

frontend/src/components/modals/EditSong/index.vue

@@ -35,7 +35,10 @@
 				>
 					<h4>Song was not found</h4>
 				</div>
-				<div class="left-section" v-show="songDataLoaded && !songDeleted">
+				<div
+					class="left-section"
+					v-show="songDataLoaded && !songDeleted"
+				>
 					<div class="top-section">
 						<div class="player-section">
 							<div id="editSongPlayer" />
@@ -222,7 +225,10 @@
 						/>
 					</div>
 
-					<div class="edit-section" v-if="songDataLoaded && !songDeleted">
+					<div
+						class="edit-section"
+						v-if="songDataLoaded && !songDeleted"
+					>
 						<div class="control is-grouped">
 							<div class="title-container">
 								<label class="label">Title</label>
@@ -486,7 +492,10 @@
 						</div>
 					</div>
 				</div>
-				<div class="right-section" v-if="songDataLoaded && !songDeleted">
+				<div
+					class="right-section"
+					v-if="songDataLoaded && !songDeleted"
+				>
 					<div id="tabs-container">
 						<div id="tab-selection">
 							<button

frontend/src/store/modules/modals/editSong.js

@@ -46,6 +46,9 @@ export default {
 			commit("updateYoutubeId", youtubeId);
 			commit("loadVideoById", youtubeId, 0);
 		},
+		updateTitle: ({ commit }, title) => commit("updateTitle", title),
+		updateThumbnail: ({ commit }, thumbnail) =>
+			commit("updateThumbnail", thumbnail),
 		setPlaybackRate: ({ commit }, rate) => commit("setPlaybackRate", rate)
 	},
 	mutations: {
@@ -122,6 +125,12 @@ export default {
 		updateYoutubeId(state, youtubeId) {
 			state.song.youtubeId = youtubeId;
 		},
+		updateTitle(state, title) {
+			state.song.title = title;
+		},
+		updateThumbnail(state, thumbnail) {
+			state.song.thumbnail = thumbnail;
+		},
 		setPlaybackRate(state, rate) {
 			if (rate) {
 				state.video.playbackRate = rate;