Merge branch 'staging' of https://github.com/Musare/Musare into staging

frontend/src/App.vue

@@ -1523,6 +1523,11 @@ button.delete:focus {
 				border-radius: 0 @border-radius @border-radius 0;
 				padding-left: 10px;
 			}
+
+			&.dropdown-toggle {
+				padding-left: 5px;
+				padding-right: 5px;
+			}
 		}
 
 		.input {

frontend/src/components/AdvancedTable.vue

@@ -33,7 +33,7 @@
 								>
 								Filters
 							</button>
-							<button class="button">
+							<button class="button dropdown-toggle">
 								<i class="material-icons">
 									{{
 										showFiltersDropdown
@@ -324,7 +324,7 @@
 								>
 								Columns
 							</button>
-							<button class="button">
+							<button class="button dropdown-toggle">
 								<i class="material-icons">
 									{{
 										showColumnsDropdown

frontend/src/components/RunJobDropdown.vue

@@ -21,7 +21,7 @@
 	>
 		<div class="control has-addons" ref="trigger">
 			<button class="button is-primary">Run Job</button>
-			<button class="button">
+			<button class="button dropdown-toggle">
 				<i class="material-icons">
 					{{ showJobDropdown ? "expand_more" : "expand_less" }}
 				</i>

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

@@ -86,39 +86,39 @@
 									>
 										<i class="material-icons">stop</i>
 									</button>
-									<div
-										class="control has-addons"
-										content="Set Playback Rate"
-										v-tippy
+									<tippy
+										class="playerRateDropdown"
+										:touch="true"
+										:interactive="true"
+										placement="bottom"
+										theme="dropdown"
+										ref="dropdown"
+										trigger="click"
+										append-to="parent"
+										@show="
+											() => {
+												showRateDropdown = true;
+											}
+										"
+										@hide="
+											() => {
+												showRateDropdown = false;
+											}
+										"
 									>
-										<button class="button is-success">
-											<i class="material-icons"
-												>fast_forward</i
-											>
-										</button>
-										<tippy
-											class="playerRateDropdown"
-											:touch="true"
-											:interactive="true"
-											placement="bottom"
-											theme="dropdown"
-											ref="dropdown"
-											trigger="click"
-											append-to="parent"
-											@show="
-												() => {
-													showRateDropdown = true;
-												}
-											"
-											@hide="
-												() => {
-													showRateDropdown = false;
-												}
-											"
+										<div
+											ref="trigger"
+											class="control has-addons"
+											content="Set Playback Rate"
+											v-tippy
 										>
+											<button class="button is-primary">
+												<i class="material-icons"
+													>fast_forward</i
+												>
+											</button>
 											<button
-												ref="trigger"
-												class="button"
+												class="button dropdown-toggle"
 											>
 												<i class="material-icons">
 													{{
@@ -128,55 +128,51 @@
 													}}
 												</i>
 											</button>
+										</div>
 
-											<template #content>
-												<div class="nav-dropdown-items">
-													<button
-														class="nav-item button"
-														:class="{
-															active:
-																video.playbackRate ===
-																0.5
-														}"
-														title="0.5x"
-														@click="
-															setPlaybackRate(0.5)
-														"
-													>
-														<p>0.5x</p>
-													</button>
-													<button
-														class="nav-item button"
-														:class="{
-															active:
-																video.playbackRate ===
-																1
-														}"
-														title="1x"
-														@click="
-															setPlaybackRate(1)
-														"
-													>
-														<p>1x</p>
-													</button>
-													<button
-														class="nav-item button"
-														:class="{
-															active:
-																video.playbackRate ===
-																2
-														}"
-														title="2x"
-														@click="
-															setPlaybackRate(2)
-														"
-													>
-														<p>2x</p>
-													</button>
-												</div>
-											</template>
-										</tippy>
-									</div>
+										<template #content>
+											<div class="nav-dropdown-items">
+												<button
+													class="nav-item button"
+													:class="{
+														active:
+															video.playbackRate ===
+															0.5
+													}"
+													title="0.5x"
+													@click="
+														setPlaybackRate(0.5)
+													"
+												>
+													<p>0.5x</p>
+												</button>
+												<button
+													class="nav-item button"
+													:class="{
+														active:
+															video.playbackRate ===
+															1
+													}"
+													title="1x"
+													@click="setPlaybackRate(1)"
+												>
+													<p>1x</p>
+												</button>
+												<button
+													class="nav-item button"
+													:class="{
+														active:
+															video.playbackRate ===
+															2
+													}"
+													title="2x"
+													@click="setPlaybackRate(2)"
+												>
+													<p>2x</p>
+												</button>
+											</div>
+										</template>
+									</tippy>
 								</div>
 								<div class="player-footer-center">
 									<span>
@@ -1885,25 +1881,29 @@ export default {
 						margin-left: 5px;
 					}
 
-					:deep(& > .control.has-addons) {
+					:deep(& > .playerRateDropdown) {
 						margin-left: 5px;
 						margin-bottom: unset !important;
 
-						.playerRateDropdown > .button {
-							font-size: 24px;
+						.control.has-addons {
+							margin-bottom: unset !important;
+
+							& > .button {
+								font-size: 24px;
+							}
 						}
+					}
 
-						.tippy-box[data-theme~="dropdown"] {
-							max-width: 100px !important;
+					:deep(.tippy-box[data-theme~="dropdown"]) {
+						max-width: 100px !important;
 
-							.nav-dropdown-items .nav-item {
-								justify-content: center !important;
-								border-radius: @border-radius !important;
+						.nav-dropdown-items .nav-item {
+							justify-content: center !important;
+							border-radius: @border-radius !important;
 
-								&.active {
-									background-color: var(--primary-color);
-									color: var(--white);
-								}
+							&.active {
+								background-color: var(--primary-color);
+								color: var(--white);
 							}
 						}
 					}

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;