unique items, use zipAndDownload

web/assets/css/bs5.timeline.css

@@ -18,9 +18,8 @@
     height: 80vh;
     margin-bottom: 0.5rem !important;
 }
-#timeline-video-canvas .timeline-video.no-video{
-    background-color: #1f80f9;
-    border-bottom: 1px inset #fff;
+#timeline-video-canvas .timeline-video:not(.no-video){
+    background-color: #000!important;
 }
 #timeline-video-canvas.show-only-playing .timeline-video.no-video{
     display: none;
@@ -42,10 +41,8 @@
     border-radius: 5px;
 }
 #timeline-bottom-strip .vis-item {
-    background: rgb(31 128 249 / 80%)!important;
-    border-color: #1f80f9!important;
+    opacity:0.4;
 }
-
 #timeline-bottom-strip .vis-time-axis .vis-grid.vis-minor {
     border-color: rgb(31 128 249 / 40%);
 }

web/assets/js/bs5.dashboard-base.js

@@ -87,6 +87,30 @@ function timeAgo(date) {
     }
     return parseInt(secondsPast/3600) + ' hours ago';
 }
+function stringToColor(str) {
+    let blueColors = [
+        '#0000FF', // Blue
+        '#00008B', // Dark Blue
+        '#0000CD', // Medium Blue
+        '#000080', // Navy
+        '#1E90FF', // Dodger Blue
+        '#4169E1', // Royal Blue
+        '#4682B4', // Steel Blue
+        '#5F9EA0', // Cadet Blue
+        '#6495ED', // Cornflower Blue
+        '#6A5ACD', // Slate Blue
+        '#7B68EE', // Medium Slate Blue
+        '#87CEEB', // Sky Blue
+        '#87CEFA', // Light Sky Blue
+        '#8A2BE2', // Blue Violet
+        '#ADD8E6'  // Light Blue
+    ];
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return blueColors[Math.abs(hash) % blueColors.length];
+}
 function stringContains(find,string,toLowerCase){
     var newString = string + ''
     if(toLowerCase)newString = newString.toLowerCase()

web/assets/js/bs5.timeline.js

@@ -20,6 +20,7 @@ $(document).ready(function(){
     var timeStripHollowClickQueue = {}
     var timeStripTickPosition = new Date()
     var timeStripPreBuffersEls = {}
+    var timeStripItemColors = {}
     var timeStripListOfQueries = []
     var loadedVideosOnTimeStrip = []
     var loadedVideosOnCanvas = {}
@@ -112,7 +113,9 @@ $(document).ready(function(){
         var html = ''
         var preBufferHtml = ''
         $.each(loadedMonitors,function(monitorId,monitor){
-            html += `<div class="timeline-video col-${timelineGridSizing} p-0 m-0 no-video" data-mid="${monitorId}" data-ke="${monitor.ke}"></div>`
+            var itemColor = stringToColor(monitorId)
+            timeStripItemColors[monitorId] = itemColor
+            html += `<div class="timeline-video col-${timelineGridSizing} p-0 m-0 no-video" data-mid="${monitorId}" data-ke="${monitor.ke}" style="background-color:${itemColor}"></div>`
             preBufferHtml += `<div class="timeline-video-buffer" data-mid="${monitorId}" data-ke="${monitor.ke}"></div>`
         })
         timeStripVideoCanvas.html(html)
@@ -132,10 +135,12 @@ $(document).ready(function(){
     function formatVideosForTimeline(videos){
         var i = 0;
         var formattedVideos = (videos || []).map((item) => {
+            var blockColor = timeStripItemColors[item.mid];
             ++i;
             return {
                 id: i,
-                content: item.objectTags || '',
+                content: ``,
+                style: `background-color: ${blockColor};border-color: ${blockColor}`,
                 start: item.time,
                 end: item.end,
                 group: 1
@@ -426,9 +431,7 @@ $(document).ready(function(){
         }
     }
     function downloadAllPlayingVideos(){
-        getAllActiveVideosInSlots().each(function(n,video){
-            downloadPlayingVideo(video)
-        })
+        zipVideosAndDownloadWithConfirm(Object.values(loadedVideosOnCanvas).filter(item => !!item))
     }
     async function jumpTimeline(amountInMs,direction){
         timeStripPlay(true)