add thumbnail images

frontend/src/static/js/components/media-page/MediaPage.scss

@@ -623,21 +623,22 @@
   z-index: 1000;
 }
 
-.dot {
-  width: 12px;
-  height: 12px;
-  background: rgba(255, 255, 255, 0.6);
-  border-radius: 50%;
+.thumbnail {
+  width: 50px;  
+  height: 50px;
+  object-fit: cover;  
+  border: 2px solid transparent;
+  border-radius: 5px;
   cursor: pointer;
   transition: all 0.3s ease-in-out;
 }
 
-.dot.active {
-  background: rgba(255, 255, 255, 1);
+.thumbnail.active {
+  border-color: rgba(255, 255, 255, 1); 
 }
 
-.dot:hover {
-  background: rgba(255, 255, 255, 0.8);
+.thumbnail:hover {
+  opacity: 0.8;  
 }
 
 .viewer-container .player-container {

frontend/src/static/js/components/media-viewer/ImageViewer.js

@@ -105,7 +105,7 @@ export default function ImageViewer() {
               </button>
             )}
             <div className="slideshow-image">
-              {isImgLoading && <SpinnerLoader size="large"/>}
+              {isImgLoading && <SpinnerLoader size="large" />}
               <img
                 src={site.url + '/' + slideshowItems[currentIndex]?.original_media_url}
                 alt={`Slide ${currentIndex + 1}`}
@@ -122,12 +122,14 @@ export default function ImageViewer() {
               </button>
             )}
             <div className="dots">
-              {slideshowItems.map((_, index) => (
-                <span
+              {slideshowItems.map((item, index) => (
+                <img
                   key={index}
-                  className={`dot ${currentIndex === index ? 'active' : ''}`}
+                  src={site.url + '/' + item.thumbnail_url} 
+                  alt={`Thumbnail ${index + 1}`}
+                  className={`thumbnail ${currentIndex === index ? 'active' : ''}`}
                   onClick={() => handleDotClick(index)}
-                ></span>
+                />
               ))}
             </div>
           </div>