Browse Source

refactor: moved close player button to bar under player for experimental listen mode

Kristian Vos 1 year ago
parent
commit
5375dbb13e
1 changed files with 20 additions and 24 deletions
  1. 20 24
      frontend/src/pages/Station/index.vue

+ 20 - 24
frontend/src/pages/Station/index.vue

@@ -1799,20 +1799,6 @@ onBeforeUnmount(() => {
 										'listen_and_participate')
 							"
 						>
-							<div
-								class="experimental-changable-listen-mode-player-header"
-								v-if="experimentalChangableListenModeEnabled"
-							>
-								<span
-									class="delete material-icons"
-									@click="
-										experimentalChangableListenModeChange(
-											'participate'
-										)
-									"
-									>highlight_off</span
-								>
-							</div>
 							<div id="video-container">
 								<div
 									id="stationPlayer"
@@ -2034,6 +2020,26 @@ onBeforeUnmount(() => {
 										>
 										{{ currentSong.skipVotes }}
 									</button>
+
+									<!-- Close player window -->
+									<button
+										v-if="
+											experimentalChangableListenModeEnabled
+										"
+										class="button is-primary"
+										content="Close this player window"
+										@click="
+											experimentalChangableListenModeChange(
+												'participate'
+											)
+										"
+										v-tippy
+									>
+										<i
+											class="material-icons icon-with-button"
+											>cancel_presentation</i
+										>
+									</button>
 								</div>
 								<div id="duration">
 									<p>
@@ -3082,16 +3088,6 @@ onBeforeUnmount(() => {
 	}
 }
 
-.experimental-changable-listen-mode-player-header {
-	padding: 4px;
-	display: flex;
-	flex-direction: row-reverse;
-
-	.delete {
-		cursor: pointer;
-	}
-}
-
 /* Tablet view fix */
 @media (max-width: 768px) {
 	.bg-bubbles li:nth-child(10) {