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

src/components/pages/Charts.vue

@@ -53,15 +53,7 @@
 								:class="{ 'single-cover': track.preview }"
 								:data-preview="track.preview"
 							>
-								<i
-									@mouseenter="previewMouseEnter"
-									@mouseleave="previewMouseLeave"
-									v-if="track.preview"
-									class="material-icons preview_controls"
-									:title="$t('globals.play_hint')"
-								>
-									play_arrow
-								</i>
+								<PreviewControls v-if="track.preview" />
 								<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
-								@mouseenter="previewMouseEnter"
-								@mouseleave="previewMouseLeave"
-								v-if="track.preview"
-								class="material-icons preview_controls"
-								:title="$t('globals.play_hint')"
-							>
-								play_arrow
-							</i>
+							<PreviewControls v-if="track.preview" />
+
 							<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()">
-				{{ $t('tracklist.downloadSelection') }}<i class="material-icons ml-2">file_download</i>
+			<button class="flex items-center btn btn-primary" @click.stop="addToQueue" :data-link="selectedLinks()">
+				{{ $t('tracklist.downloadSelection') }}<i class="ml-2 material-icons">file_download</i>
 			</button>
 		</footer>
 	</div>