Toast notification for individual track changes

3 files changed, 31 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 e810b75..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:")) {
@@ -716,7 +718,6 @@ function showSeasonInfo(data, row) {
     $("#subtitleTable tbody").empty();
 
     for (let i = 0; i < episodes.length; i++) {
-        console.log(episodes[i]);
         let rowHTML = `<tr onclick="getEpisodeInfo(${episodes[i].ratingKey}, this)">
                         <td>S${episodes[i].parentIndex}E${episodes[i].index} - ${episodes[i].title}</td>
                     </tr>`;
@@ -816,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");
@@ -1111,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");