From bf3a10476084567b3306a15dc1d7253300636d48 Mon Sep 17 00:00:00 2001
From: Patrick Fairbank <patfair@gmail.com>
Date: Fri, 19 Jul 2024 22:06:52 -0700
Subject: [PATCH] Fix sponsor carousel for Bootstrap 5.

---
 static/css/audience_display.css |  2 +-
 static/js/audience_display.js   | 22 ----------------------
 templates/audience_display.html |  6 +++---
 3 files changed, 4 insertions(+), 26 deletions(-)

diff --git a/static/css/audience_display.css b/static/css/audience_display.css
index a1c02d2e..9e0b5bcc 100644
--- a/static/css/audience_display.css
+++ b/static/css/audience_display.css
@@ -520,7 +520,7 @@ html {
   background-color: #fff;
   text-align: center;
 }
-#sponsor .carousel-inner, #sponsor .item {
+#sponsor .carousel-inner, #sponsor .carousel-item {
   height: 100%;
 }
 .sponsor-image-container {
diff --git a/static/js/audience_display.js b/static/js/audience_display.js
index 688732ed..9dc975d4 100644
--- a/static/js/audience_display.js
+++ b/static/js/audience_display.js
@@ -760,28 +760,6 @@ const initializeSponsorDisplay = function() {
       }
       $("#sponsorContainer").append(slideHtml);
     });
-
-    // Start Carousel
-    let t;
-    const start = $('.carousel#sponsor').find('.active').attr('data-interval');
-    t = setTimeout("$('.carousel#sponsor').carousel({interval: 1000});", start-1000);
-
-    $('.carousel#sponsor').on('slid.bs.carousel', function () {   
-         clearTimeout(t);  
-         const duration = $(this).find('.active').attr('data-interval');
-
-         $('.carousel#sponsor').carousel('pause');
-         t = setTimeout("$('.carousel#sponsor').carousel();", duration-1000);
-    });
-
-    $('.carousel-control.right').on('click', function(){
-        clearTimeout(t);   
-    });
-
-    $('.carousel-control.left').on('click', function(){
-        clearTimeout(t);   
-    });
-
   });
 };
 
diff --git a/templates/audience_display.html b/templates/audience_display.html
index f8688649..c37d017e 100644
--- a/templates/audience_display.html
+++ b/templates/audience_display.html
@@ -234,7 +234,7 @@
       <div id="bracket">
         <img id="bracketSvg" src="" />
       </div>
-      <div id="sponsor" class="carousel slide">
+      <div id="sponsor" class="carousel slide" data-bs-ride="carousel">
         <div class="carousel-inner" id="sponsorContainer">
         </div>
       </div>
@@ -272,7 +272,7 @@
       </table>
     </script>
     <script id="sponsorImageTemplate" type="text/x-handlebars-template">
-      <div class="item{{"{{#if First}}"}} active{{"{{/if}}"}}" data-interval="{{"{{DisplayTimeMs}}"}}">
+      <div class="carousel-item{{"{{#if First}}"}} active{{"{{/if}}"}}" data-bs-interval="{{"{{DisplayTimeMs}}"}}">
         <div class="sponsor-image-container">
           <img src="/static/img/sponsors/{{"{{Image}}"}}" />
         </div>
@@ -280,7 +280,7 @@ <h1>{{"{{Subtitle}}"}}</h1>
       </div>
     </script>
     <script id="sponsorTextTemplate" type="text/x-handlebars-template">
-      <div class="item{{"{{#if First}}"}} active{{"{{/if}}"}}" data-interval="{{"{{DisplayTimeMs}}"}}">
+      <div class="carousel-item{{"{{#if First}}"}} active{{"{{/if}}"}}" data-bs-interval="{{"{{DisplayTimeMs}}"}}">
         <h2>{{"{{Line1}}"}}<br />{{"{{Line2}}"}}</h2>
         <h1>{{"{{Subtitle}}"}}</h1>
       </div>