style: replaced _track-preview.scss with Vue component and Tailwind styles

src/components/globals/PreviewControls.vue

@@ -0,0 +1,25 @@
+<template>
+	<i
+		@mouseenter="previewMouseEnter"
+		@mouseleave="previewMouseLeave"
+		class="absolute top-0 right-0 flex items-center justify-center w-full h-full text-center transition-opacity duration-200 ease-in-out bg-black bg-opacity-50 rounded opacity-0 material-icons preview_controls"
+		:title="$t('globals.play_hint')"
+	>
+		play_arrow
+	</i>
+</template>
+
+<script>
+import EventBus from '@/utils/EventBus'
+
+export default {
+	methods: {
+		previewMouseEnter(e) {
+			EventBus.$emit('trackPreview:previewMouseEnter', e)
+		},
+		previewMouseLeave(e) {
+			EventBus.$emit('trackPreview:previewMouseLeave', e)
+		}
+	}
+}
+</script>

src/components/globals/TheTrackPreview.vue

@@ -66,7 +66,7 @@ export default {
 			e.preventDefault()
 			e.stopPropagation()
 
-			const { currentTarget: obj } = event
+			const { currentTarget: obj } = e
 
 			var icon = obj.tagName == 'I' ? obj : obj.querySelector('i')
 

src/components/pages/Charts.vue

@@ -53,15 +53,7 @@
 								:class="{ 'single-cover': track.preview }"
 								:data-preview="track.preview"
 							>
-								<i
+								<PreviewControls v-if="track.preview" />
-									@mouseenter="previewMouseEnter"
-									@mouseleave="previewMouseLeave"
-									v-if="track.preview"
-									class="material-icons preview_controls"
-									:title="$t('globals.play_hint')"
-								>
-									play_arrow
-								</i>
 								<img class="rounded coverart" :src="track.album.cover_small" />
 							</a>
 						</td>
@@ -109,12 +101,15 @@ import { mapGetters } from 'vuex'
 import { socket } from '@/utils/socket'
 import { sendAddToQueue } from '@/utils/downloads'
 import { convertDuration } from '@/utils/utils'
-
 import { getChartsData } from '@/data/charts'
 
 import EventBus from '@/utils/EventBus'
+import PreviewControls from '@components/globals/PreviewControls.vue'
 
 export default {
+	components: {
+		PreviewControls
+	},
 	data() {
 		return {
 			country: '',
@@ -138,12 +133,6 @@ export default {
 		playPausePreview(e) {
 			EventBus.$emit('trackPreview:playPausePreview', e)
 		},
-		previewMouseEnter(e) {
-			EventBus.$emit('trackPreview:previewMouseEnter', e)
-		},
-		previewMouseLeave(e) {
-			EventBus.$emit('trackPreview:previewMouseLeave', e)
-		},
 		addToQueue(e) {
 			e.stopPropagation()
 			sendAddToQueue(e.currentTarget.dataset.link)

src/components/pages/Favorites.vue

@@ -175,15 +175,8 @@
 							@click="playPausePreview"
 							:data-preview="track.preview"
 						>
-							<i
+							<PreviewControls v-if="track.preview" />
-								@mouseenter="previewMouseEnter"
+
-								@mouseleave="previewMouseLeave"
-								v-if="track.preview"
-								class="material-icons preview_controls"
-								:title="$t('globals.play_hint')"
-							>
-								play_arrow
-							</i>
 							<img class="rounded coverart" :src="track.album.cover_small" />
 						</a>
 					</td>
@@ -242,10 +235,15 @@ import { socket } from '@/utils/socket'
 import { sendAddToQueue, aggregateDownloadLinks } from '@/utils/downloads'
 import { convertDuration } from '@/utils/utils'
 import { toast } from '@/utils/toasts'
-
 import { getFavoritesData } from '@/data/favorites'
 
+import EventBus from '@/utils/EventBus'
+import PreviewControls from '@components/globals/PreviewControls.vue'
+
 export default {
+	components: {
+		PreviewControls
+	},
 	data() {
 		return {
 			tracks: [],
@@ -293,12 +291,6 @@ export default {
 		playPausePreview(e) {
 			EventBus.$emit('trackPreview:playPausePreview', e)
 		},
-		previewMouseEnter(e) {
-			EventBus.$emit('trackPreview:previewMouseEnter', e)
-		},
-		previewMouseLeave(e) {
-			EventBus.$emit('trackPreview:previewMouseLeave', e)
-		},
 		convertDuration,
 		downloadAllOfType() {
 			try {

src/components/pages/Tracklist.vue

@@ -42,7 +42,11 @@
 								<div class="table__cell-content table__cell-content--vertical-center">
 									<i
 										class="material-icons"
-										:class="{ preview_playlist_controls: track.preview, disabled: !track.preview }"
+										:class="{
+											preview_playlist_controls: track.preview,
+											'cursor-pointer': track.preview,
+											disabled: !track.preview
+										}"
 										v-on="{ click: track.preview ? playPausePreview : false }"
 										:data-preview="track.preview"
 										:title="$t('globals.play_hint')"
@@ -109,7 +113,11 @@
 							<i
 								v-if="track.preview_url"
 								@click="playPausePreview"
-								:class="'material-icons' + (track.preview_url ? ' preview_playlist_controls' : '')"
+								class="material-icons"
+								:class="{
+									preview_playlist_controls: track.preview_url,
+									'cursor-pointer': track.preview_url
+								}"
 								:data-preview="track.preview_url"
 								:title="$t('globals.play_hint')"
 							>
@@ -132,11 +140,11 @@
 		</table>
 		<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px">{{ label }}</span>
 		<footer>
-			<button class="btn btn-primary mr-2" @click.stop="addToQueue" :data-link="link">
+			<button class="mr-2 btn btn-primary" @click.stop="addToQueue" :data-link="link">
 				{{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }}
 			</button>
-			<button class="btn btn-primary flex items-center" @click.stop="addToQueue" :data-link="selectedLinks()">
+			<button class="flex items-center btn btn-primary" @click.stop="addToQueue" :data-link="selectedLinks()">
-				{{ $t('tracklist.downloadSelection') }}<i class="material-icons ml-2">file_download</i>
+				{{ $t('tracklist.downloadSelection') }}<i class="ml-2 material-icons">file_download</i>
 			</button>
 		</footer>
 	</div>

src/components/search/ResultsTracks.vue

@@ -25,15 +25,8 @@
 							:class="'rounded' + (track.preview ? ' single-cover' : '')"
 							:data-preview="track.preview"
 						>
-							<i
+							<PreviewControls v-if="track.preview" />
-								@mouseenter="previewMouseEnter"
+
-								@mouseleave="previewMouseLeave"
-								v-if="track.preview"
-								class="material-icons preview_controls"
-								:title="$t('globals.play_hint')"
-							>
-								play_arrow
-							</i>
 							<img class="rounded coverart" :src="track.album.cover_small" />
 						</a>
 					</td>
@@ -80,6 +73,7 @@
 
 <script>
 import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
+import PreviewControls from '@components/globals/PreviewControls.vue'
 
 import EventBus from '@/utils/EventBus'
 import { convertDuration } from '@/utils/utils'
@@ -87,18 +81,13 @@ import { convertDuration } from '@/utils/utils'
 export default {
 	props: ['results'],
 	components: {
-		BaseLoadingPlaceholder
+		BaseLoadingPlaceholder,
+		PreviewControls
 	},
 	methods: {
 		convertDuration,
 		playPausePreview(e) {
 			EventBus.$emit('trackPreview:playPausePreview', e)
-		},
-		previewMouseEnter(e) {
-			EventBus.$emit('trackPreview:previewMouseEnter', e)
-		},
-		previewMouseLeave(e) {
-			EventBus.$emit('trackPreview:previewMouseLeave', e)
 		}
 	}
 }

src/styles/scss/_track-preview.scss

@@ -1,18 +0,0 @@
-.preview_controls {
-	opacity: 0;
-	display: block;
-	background: rgba(0, 0, 0, 0.5);
-	width: 56px;
-	height: 56px;
-	text-align: center;
-	line-height: 56px;
-	position: absolute;
-	border-radius: 5px;
-	top: 0;
-	right: 0;
-	transition: opacity 200ms ease-in-out;
-}
-
-.preview_playlist_controls {
-	cursor: pointer;
-}

src/styles/scss/style.scss

@@ -41,5 +41,4 @@ body {
 @import './progressbar';
 @import './sidebar';
 @import './stackedTabs';
-@import './track-preview';
 @import './toasts';