v0.1.0

static/css/styles.css

@@ -0,0 +1,55 @@
+body {
+    /* background-color: #141A32; */
+}
+
+.sidebar {
+    background-color: #1a1d21; 
+    height: 100vh;
+    padding-top: 20px;
+    padding-left: 10px;
+    color: white;
+}
+.top-bar {
+    background-color: #1a1d21; 
+
+}
+.sidebar h3 {
+    color: white;
+    padding-left: 15px;
+}
+
+.nav-link {
+    color: #c2c7d0;
+    display: flex;
+    align-items: center;
+    padding: 10px 15px;
+}
+
+.nav-link:hover {
+    background-color: #343a40;
+    border-radius: 5px;
+}
+
+.nav-link.active {
+    background-color: #6f42c1;
+    border-radius: 5px;
+    color: white;
+}
+
+.nav-link i {
+    margin-right: 10px;
+}
+
+.sidebar-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.sidebar-logo img {
+    width: 140px;
+    margin-right: 10px;
+}
+.logo img{
+    width: 100%;
+}

static/js/preview.js

@@ -0,0 +1,86 @@
+// Initialize all tooltips on the page
+var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+  return new bootstrap.Tooltip(tooltipTriggerEl)
+})
+
+// Function to open the search modal and trigger the search automatically
+function openSearchModal(trackTitle, spotify_id) {
+  const modal = new bootstrap.Modal(document.getElementById('searchModal'));
+  const searchQueryInput = document.getElementById('search-query');
+  const spotifyIdInput = document.getElementById('spotify-id');
+
+  // Pre-fill the input fields
+  searchQueryInput.value = trackTitle;
+  spotifyIdInput.value = spotify_id;
+
+  // Show the modal
+  modal.show();
+
+  setTimeout(() => {
+    searchQueryInput.form.requestSubmit(); // Trigger the form submission
+  }, 200);  // Delay the search slightly to ensure the modal is visible before searching
+}
+
+let currentAudio = null;
+let currentButton = null;
+
+function playPreview(button, previewUrl) {
+  
+  if (currentAudio) {
+    currentAudio.pause();
+    if (currentButton) {
+      currentButton.innerHTML = '<i class="fas fa-play"></i>';  
+    }
+  }
+
+  if (currentAudio && currentAudio.src === previewUrl) {
+    currentAudio = null;
+    currentButton = null;
+  } else {
+    currentAudio = new Audio(previewUrl);
+    currentAudio.play();
+    currentButton = button;
+    button.innerHTML = '<i class="fas fa-pause"></i>';
+
+    currentAudio.onended = function () {
+      button.innerHTML = '<i class="fas fa-play"></i>';
+      currentAudio = null;
+      currentButton = null;
+    };
+  }
+}
+
+function playJellyfinTrack(button, jellyfinId) {
+  if (currentAudio && currentButton === button) {
+    currentAudio.pause();
+    currentAudio = null;
+    currentButton.innerHTML = '<i class="fas fa-play"></i>';
+    currentButton = null;
+    return;
+  }
+
+  if (currentAudio) {
+    currentAudio.pause();
+    if (currentButton) {
+      currentButton.innerHTML = '<i class="fas fa-play"></i>';
+    }
+  }
+
+  fetch(`/get_jellyfin_stream/${jellyfinId}`)
+    .then(response => response.json())
+    .then(data => {
+      const streamUrl = data.stream_url;
+      currentAudio = new Audio(streamUrl);
+      currentAudio.play();
+      currentButton = button;
+      button.innerHTML = '<i class="fas fa-stop"></i>';
+
+      currentAudio.onended = function () {
+        button.innerHTML = '<i class="fas fa-play"></i>';
+        currentAudio = null;
+        currentButton = null;
+      };
+    })
+    .catch(error => console.error('Error fetching Jellyfin stream URL:', error));
+}