Add alphanumeric order

Author: dustymethod

BrowserImageSlideshow.html

@@ -45,10 +45,11 @@
 <script src="settings.js"></script>
 <script>
 
-// modes (defined in settings.js):
+// modes
 // 0: Random order (default)
 // 1: Alphabetical order
 // 2: Alphabetical order (start on random image)
+// 3: Alphanumeric
 
 // common extensions from here https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
 const imageExtensions = ["apng", "avif", "gif", "jpg", "jpeg", "jfif", "pjpeg", "pjp", "png", "svg", "webp", "bmp", "ico", "cur"];
@@ -107,6 +108,17 @@
     return a;
 }
 
+// Sort list of images alpha numerically
+function alphanumericSort() {
+    // see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator#numeric
+    const collator = new Intl.Collator(undefined, {
+        numeric: true
+    });
+    images.sort((a, b) => {
+        return collator.compare(a, b);
+    });
+}
+
 function randomizeIndex(max) {
     index = Math.floor(Math.random() * max); // [0, max)
 }
@@ -213,13 +225,16 @@
             shuffle(indexes);
         } else if (mode === 2) { // choose random image to start on
             randomizeIndex(images.length);
+        } else if (mode === 3) {
+            alphanumericSort();
         }
 
-        botImage.src = images[indexes[index]];
         if(captionEnabled) {
             generateCaptions();
             setCaption(captions[indexes[index]]);
         }
+        
+        botImage.src = images[indexes[index]];
         $("#botImage").animate(
             { opacity: 1.0 },
             { duration: fadeDuration }

README.txt

@@ -42,6 +42,7 @@ Useful for slideshows that may exceed the 250mb uncompressed limit in older vers
         0: Random order (default)
         1: Alphabetical order
         2: Alphabetical order (start on random image)
+        3: Alphanumeric order
     slideDuration: duration in milliseconds (default 4000)
     loopSlideshow: if true, the slideshow will repeat. in Random order mode, images will be reshuffled. (default true)
     startWithAutoplay: if true, the slideshow will start playing automatically. untick this option if you wish to control slides manually via hotkeys.

SlideshowSettings.lua

@@ -15,7 +15,7 @@ maxSlideDuration = 100000
 loopSlideshow = true
 startWithAutoplay = true
 browserSourceName = "Browser"
-local mode_options = {"Random Order", "Alphabetical Order", "Alphabetical Order, start on random"}
+local mode_options = {"Random Order", "Alphabetical Order", "Alphabetical Order, start on random", "Alphanumeric"}
 captionEnabled = false 
 
 HK_PAUSE = obs.OBS_INVALID_HOTKEY_ID