fix css, add backgound

backend.py

@@ -191,7 +191,10 @@ def timeline_to_vtt(timeline):
 
 def calc_speaker_percentage(timeline, duration):
     percentages = []
+    end = 0
     for start in sorted(timeline.keys()):
+        if(start > end):
+            percentages.append(['Background', 100*(start-end)/duration])
         end = timeline[start]['end']
         speaker = timeline[start]['speaker']
         percentages.append([speaker, 100*(end-start)/duration])

player.html

@@ -8,54 +8,57 @@
     .speaker{
         height: 100%;
     }
+    .Background{
+        background-color: lightgray;
+    }
     /* Pastel pink */
     .SPEAKER_00 {
-        color: #FEC8D8;
+        background-color: #FEC8D8;
     }
 
     /* Pastel peach */
     .SPEAKER_01 {
-        color: #FEDBB7;
+        background-color: #ff8282;
     }
 
     /* Pastel yellow */
     .SPEAKER_02 {
-        color: #FEF5E3;
+        background-color: #acffb3;
     }
 
     /* Pastel green */
     .SPEAKER_03 {
-        color: #C5E5C5;
+        background-color: #C5E5C5;
     }
 
     /* Pastel blue */
     .SPEAKER_04 {
-        color: #C3D9FF;
+        background-color: #C3D9FF;
     }
 
     /* Pastel lavender */
     .SPEAKER_05 {
-        color: #E9C7E9;
+        background-color: #E9C7E9;
     }
 
     /* Pastel coral */
     .SPEAKER_06 {
-        color: #FFD6D1;
+        background-color: #FFD6D1;
     }
 
     /* Pastel salmon */
     .SPEAKER_07{
-        color: #FFC8B4;
+        background-color: #fffab4;
     }
 
     /* Pastel mint */
     .SPEAKER_08 {
-        color: #D1E8D1;
+        background-color: #D1E8D1;
     }
 
     /* Pastel sky blue */
     .SPEAKER_09 {
-        color: #B3D8FF;
+        background-color: #9b5f2b;
     }
 </style>
 </head>
@@ -83,7 +86,7 @@
         let last_time = 0
         for(let p of percentages){
             console.log(p)
-            divs += `<div class="speaker speaker_${p[0]}" style="width:${p[1]}%;" title="${p[0]}"></div>\n`
+            divs += `<div class="speaker ${p[0]}" style="width:${p[1]}%;" title="${p[0]}"></div>\n`
         }
         console.log(divs)
         timeline.innerHTML = divs