small gui changes

gui.rkt

@@ -176,12 +176,23 @@
       (dbg-rktplayer "state: ~a" st)
       (unless (eq? st state)
         (dbg-rktplayer "Changing to state ~a" st)
+        (let ((el (send this element 'paused)))
           (unless (eq? state #f) ; Prevent setting src twice very fast
-          (if (eq? st 'playing)
+            (cond ((or (eq? st 'playing) (eq? st 'play))
                    (set-play-button "buttons/pause.svg")
+                   (send el set-innerHTML! '(span (tr "playing"))))
+                ((eq? st 'stopped)
                  (set-play-button "buttons/play.svg")
-              )
-          )
+                 (send el set-innerHTML! '(span (tr "stopped"))))
+                ((eq? st 'pauzed)
+                 (set-play-button "buttons/play.svg")
+                 (send el set-innerHTML! '(span ((class "blink")) (tr "paused"))))
+                (else
+                 (warn-rktplayer "Unkown state for update-state ~a" st)
+                 (send el set-innerHTML! (list 'span
+                                           '((class "blink"))
+                                           (format "~a: ~a" (tr "Unknown state") st))))
+                )))
         (set! state st)
         )
       )

gui/rktplayer.html

@@ -49,8 +49,11 @@
 	        </div>
        </div>
        <div class="status">
-			<span class="info" id="bits"></span><span class="info" id="rate"></span><span class="info" id="channels"></span>
+			<span class="info" id="bits"></span>
+			<span class="info" id="rate"></span>
+			<span class="info" id="channels"></span>
 			<span class="info" id="format"></span>
+			<span class="info" id="paused"></span>
 			<div class="right">
 				<span class="info" id="volume-percentage"></span>
 				<span class="info" id="log-file"></span>

gui/styles.css

@@ -336,5 +336,20 @@ input.v-slider {
 }
 
 
+.blink {
+	animation: blink 3s infinite both;
+}
+
+@keyframes blink {
+  0%,
+  50%,
+  100% {
+    opacity: 1;
+  }
+  25%,
+  75% {
+    opacity: 0;
+  }
+}