Merge pull request #29 from cglatot/qol-changes1.6.1

Quality of Life Changes

3 files changed, 49 insertions, 1 deletions

diff --git a/css/main.css b/css/main.css
index 97c5c42..9bb7175 100644
--- a/css/main.css
+++ b/css/main.css
@@ -172,6 +172,20 @@ label, p {
     color: #856404
 }
 
+#successToast {
+    position: fixed;
+    top: 5%;
+    left: 0;
+    right: 0;
+    max-width: fit-content;
+    margin: auto;
+    z-index: 999;
+}
+
+.toast.show {
+    opacity: 0.9;
+}
+
 /*==========================
         NAV TABS
 ==========================*/
diff --git a/index.html b/index.html
index 040965e..651a698 100644
--- a/index.html
+++ b/index.html
@@ -150,6 +150,13 @@
         </div>
     </div>
 
+    <!-- Toast Confirmation Message -->
+    <div class="toast" id="successToast" role="alert" aria-live="assertive" aria-atomic="true" style="">
+        <div class="toast-body alert-success">
+            Success!
+        </div>
+    </div>
+
     <!-- Page Content -->
     <div class="container">
         <div class="card border-0 shadow my-3 my-md-5">
diff --git a/js/main.js b/js/main.js
index fc94dec..306412f 100644
--- a/js/main.js
+++ b/js/main.js
@@ -30,6 +30,8 @@ $(document).ready(() => {
     $('.helpButtons, #titleLogo').tooltip();
     // Enable history tracking for tabs
     $('a[data-toggle="tab"]').historyTabs();
+    // Enable Toasts
+    $('.toast').toast({'delay': 1750});
 
     // Check if the page was loaded locally or over http and warn them about the value of https
     if ((location.protocol == "http:") || (location.protocol == "file:")) {
@@ -506,6 +508,10 @@ function displayLibraries(data) {
                     </tr>`;
         $("#libraryTable tbody").append(rowHTML);
     }
+    // Scroll to the table
+    document.querySelector('#libraryTable').scrollIntoView({
+        behavior: 'smooth' 
+    });
 }
 
 function getAlphabet(uid, row) {
@@ -607,6 +613,10 @@ function displayTitles(titles) {
                     </tr>`;
         $("#tvShowsTable tbody").append(rowHTML);
     }
+    // Scroll to the table
+    document.querySelector('#tvShowsTable').scrollIntoView({
+        behavior: 'smooth' 
+    });
 }
 
 function getTitleInfo(uid, row) {
@@ -709,10 +719,14 @@ function showSeasonInfo(data, row) {
 
     for (let i = 0; i < episodes.length; i++) {
         let rowHTML = `<tr onclick="getEpisodeInfo(${episodes[i].ratingKey}, this)">
-                        <td>${episodes[i].title}</td>
+                        <td>S${episodes[i].parentIndex}E${episodes[i].index} - ${episodes[i].title}</td>
                     </tr>`;
         $("#episodesTable tbody").append(rowHTML);
     }
+    // Scroll to the table
+    document.querySelector('#episodesTable').scrollIntoView({
+        behavior: 'smooth' 
+    });
 }
 
 function getEpisodeInfo(uid, row) {
@@ -775,6 +789,11 @@ function showEpisodeInfo(data, row) {
                         <td class="code">--</td>
                     </tr>`;
     $("#subtitleTable tbody").prepend(noSubsRow);
+
+    // Scroll to the table
+    document.querySelector('#audioTable').scrollIntoView({
+        behavior: 'smooth' 
+    });
 }
 
 async function setAudioStream(partsId, streamId, row) {
@@ -798,6 +817,10 @@ async function setAudioStream(partsId, streamId, row) {
                 setTimeout(() => {
                     $(row).removeClass('success-transition');
                 }, 1750);
+                // Show the toast
+                let audioTrackName = $(row).find('td.name')[0].innerText;
+                $('#successToast .toast-body').html( `Audio track successfully updated to <strong>${audioTrackName}</strong>`);
+                $('#successToast').toast('show');
             },
             "error": (data) => {
                 console.log("ERROR L670");
@@ -1093,6 +1116,10 @@ async function setSubtitleStream(partsId, streamId, row) {
                 setTimeout(() => {
                     $(row).removeClass('success-transition');
                 }, 1750);
+                // Show the toast
+                let subtitleTrackName = $(row).find('td.name')[0].innerText;
+                $('#successToast .toast-body').html( `Subtitle track successfully updated to <strong>${subtitleTrackName}</strong>`);
+                $('#successToast').toast('show');
             },
             "error": (data) => {
                 console.log("ERROR L965");