Added track preview funciton

public/js/app.js

@@ -4,6 +4,7 @@ import Downloads from './modules/downloads.js'
 import QualityModal from './modules/quality-modal.js'
 import { Tabs } from './modules/tabs.js'
 import Search from './modules/search.js'
+import { initTrackPreview } from './modules/track-preview.js'
 
 /* ===== Socketio listeners ===== */
 
@@ -74,6 +75,7 @@ function startApp() {
 	QualityModal.init()
 	Tabs.linkListeners()
 	Search.linkListeners()
+  initTrackPreview()
 
 	if (localStorage.getItem('arl')) {
 		let arl = localStorage.getItem('arl')

public/js/modules/main-search.js

@@ -2,6 +2,7 @@ import { socket } from './socket.js'
 import { artistView, albumView, playlistView } from './tabs.js'
 import Downloads from './downloads.js'
 import QualityModal from './quality-modal.js'
+import { playPausePreview, previewMouseEnter, previewMouseLeave } from './track-preview.js'
 
 const MainSearch = new Vue({
 	data: {
@@ -52,6 +53,9 @@ const MainSearch = new Vue({
 		artistView,
 		albumView,
 		playlistView,
+    playPausePreview,
+    previewMouseEnter,
+    previewMouseLeave,
 		handleClickTopResult(event) {
 			let topResultType = this.results.allTab.TOP_RESULT[0].type
 

public/js/modules/tabs.js

@@ -3,6 +3,7 @@ import TracklistTab from './tracklist-tab.js'
 import { socket } from './socket.js'
 import SettingsTab from './settings-tab.js'
 import MainSearch from './main-search.js'
+import { stopStackedTabsPreview } from './track-preview.js'
 
 /* ===== Globals ====== */
 window.search_selected = ''
@@ -182,6 +183,7 @@ function showTab(type, id, back = false) {
 		tabcontent[i].style.display = 'none'
 	}
 	document.getElementById(tab).style.display = 'block'
+  stopStackedTabsPreview()
 }
 
 // Uses:
@@ -204,4 +206,5 @@ function backTab() {
 		socket.emit('getTracklist', { type: tabObj.type, id: tabObj.id })
 		showTab(tabObj.type, tabObj.id, true)
 	}
+  stopStackedTabsPreview()
 }

public/js/modules/track-preview.js

@@ -0,0 +1,91 @@
+
+/* ===== Globals ====== */
+window.preview_max_volume = 1
+
+/* ===== Locals ===== */
+let preview_track = document.getElementById('preview-track')
+let preview_stopped = true
+
+// init stuff
+export function initTrackPreview(){
+  preview_track.volume = 1
+  /*preview_max_volume = parseFloat(localStorage.getItem("previewVolume"))
+  if (preview_max_volume === null){
+    preview_max_volume = 0.8
+    localStorage.setItem("previewVolume", preview_max_volume)
+  }*/
+
+  // start playing when track loaded
+  preview_track.addEventListener('canplay', function(){
+    preview_track.play()
+    preview_stopped = false
+    $(preview_track).animate({volume: preview_max_volume}, 500)
+  })
+
+  // auto fadeout when at the end of the song
+  preview_track.addEventListener('timeupdate', function(){
+    if (preview_track.currentTime > preview_track.duration-1){
+      $(preview_track).animate({volume: 0}, 800)
+      preview_stopped = true
+      $('a[playing] > .preview_controls').css({opacity:0})
+      $("*").removeAttr("playing")
+      $('.preview_controls').text("play_arrow")
+      $('.preview_playlist_controls').text("play_arrow")
+    }
+  })
+}
+
+// on modal closing
+export function stopStackedTabsPreview(){
+  if ($('.preview_playlist_controls').filter(function(){return $(this).attr("playing")}).length > 0){
+    $(preview_track).animate({volume: 0}, 800)
+    preview_stopped = true
+    $(".preview_playlist_controls").removeAttr("playing")
+    $('.preview_playlist_controls').text("play_arrow")
+  }
+}
+
+// on hover event
+export function previewMouseEnter(e){
+  $(e.currentTarget).css({opacity: 1})
+}
+export function previewMouseLeave(e){
+  let obj = e.currentTarget
+  if (($(obj).parent().attr("playing") && preview_stopped) || !$(obj).parent().attr("playing")){
+    $(obj).css({opacity: 0}, 200)
+  }
+}
+
+// on click event
+export function playPausePreview(e){
+  e.preventDefault()
+  console.log("PlayPause")
+  let obj = e.currentTarget
+  var icon = (obj.tagName == "I" ? $(obj) : $(obj).children('i'))
+  if ($(obj).attr("playing")){
+    if (preview_track.paused){
+      preview_track.play()
+      preview_stopped = false
+      icon.text("pause")
+      $(preview_track).animate({volume: preview_max_volume}, 500)
+    }else{
+      preview_stopped = true
+      icon.text("play_arrow")
+      $(preview_track).animate({volume: 0}, 250, "swing", ()=>{ preview_track.pause() })
+    }
+  }else{
+    $("*").removeAttr("playing")
+    $(obj).attr("playing",true)
+    $('.preview_controls').text("play_arrow")
+    $('.preview_playlist_controls').text("play_arrow")
+    $('.preview_controls').css({opacity:0})
+    icon.text("pause")
+    icon.css({opacity: 1})
+    preview_stopped = false
+    $(preview_track).animate({volume: 0}, 250, "swing", ()=>{
+      preview_track.pause()
+      $('#preview-track_source').prop("src", $(obj).data("preview"))
+      preview_track.load()
+    })
+  }
+}

public/js/modules/tracklist-tab.js

@@ -2,6 +2,7 @@ import { socket } from './socket.js'
 import { artistView, albumView } from './tabs.js'
 import Downloads from './downloads.js'
 import QualityModal from './quality-modal.js'
+import { playPausePreview } from './track-preview.js'
 
 const TracklistTab = new Vue({
 	data: {
@@ -19,6 +20,7 @@ const TracklistTab = new Vue({
 	methods: {
 		artistView,
 		albumView,
+    playPausePreview,
 		reset() {
 			this.title = 'Loading...'
 			this.image = ''