feat(control-station): add atomic recorded-session playback

apps/control-station/src/styles/observation.css

@@ -191,6 +191,32 @@ i[data-availability="error"] {
   background: #050608;
 }
 
+.recorded-media-player {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #070809;
+}
+
+.recorded-media-player:not([data-state="ready"]) .observation-media__asset {
+  visibility: hidden;
+}
+
+.recorded-media-player__notice {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 18px;
+  color: rgba(247, 248, 244, 0.72);
+  background: #070809;
+  font: inherit;
+  font-size: 11px;
+  text-align: center;
+  pointer-events: none;
+}
+
 .mse-fmp4-player {
   position: relative;
   width: 100%;
@@ -316,11 +342,8 @@ i[data-availability="error"] {
 }
 
 .observation-timeline {
-  display: grid;
+  display: block;
   min-width: 0;
-  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
-  align-items: center;
-  gap: 0.6rem;
   border: 0;
   border-radius: 0.9rem;
   background: rgb(9 10 13 / 0.78);
@@ -328,22 +351,73 @@ i[data-availability="error"] {
   backdrop-filter: blur(16px);
 }
 
-.observation-timeline__track {
-  height: 0.3rem;
-  overflow: hidden;
-  border-radius: 999px;
-  background: rgb(255 255 255 / 0.08);
+.observation-timeline[data-accumulation="true"] {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: center;
+  gap: 0.8rem;
 }
 
-.observation-timeline__track span {
-  display: block;
-  height: 100%;
-  border-radius: inherit;
+.observation-timeline__playback {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.observation-timeline__accumulation {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.7rem;
+  padding: 0 0.45rem;
+}
+
+.observation-timeline__accumulation span,
+.observation-timeline__accumulation code {
+  color: var(--nodedc-text-muted);
+  font-size: 0.55rem;
+  white-space: nowrap;
+}
+
+.observation-timeline__accumulation code {
+  min-width: 2.65rem;
+  color: var(--nodedc-text-primary);
+  text-align: right;
+}
+
+.observation-timeline__track {
+  width: 100%;
+  height: 0.3rem;
+  appearance: none;
+  border: 0;
+  border-radius: 999px;
+  background: rgb(255 255 255 / 0.08);
+  cursor: pointer;
+}
+
+.observation-timeline__track::-webkit-slider-thumb {
+  width: 0.72rem;
+  height: 0.72rem;
+  appearance: none;
+  border: 0;
+  border-radius: 50%;
   background: var(--nodedc-text-primary);
 }
 
-.observation-timeline__track[data-disabled="true"] {
+.observation-timeline__track::-moz-range-thumb {
+  width: 0.72rem;
+  height: 0.72rem;
+  border: 0;
+  border-radius: 50%;
+  background: var(--nodedc-text-primary);
+}
+
+.observation-timeline__track:disabled {
   opacity: 0.46;
+  cursor: default;
 }
 
 .observation-timeline__meta {
@@ -364,11 +438,17 @@ i[data-availability="error"] {
   align-items: center;
   gap: 0.38rem;
   color: var(--nodedc-text-muted);
+  border: 0;
+  background: transparent;
   padding: 0.3rem 0.45rem;
   font-size: 0.52rem;
   font-weight: 820;
 }
 
+.observation-timeline__follow:not(:disabled) {
+  cursor: pointer;
+}
+
 .observation-timeline__follow::before {
   width: 0.4rem;
   height: 0.4rem;
@@ -514,11 +594,15 @@ i[data-availability="error"] {
     left: 0.6rem;
   }
 
-  .observation-timeline {
+  .observation-timeline[data-accumulation="true"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .observation-timeline__playback {
     grid-template-columns: auto minmax(0, 1fr) auto;
   }
 
-  .observation-timeline > .nodedc-button:first-child,
+  .observation-timeline__playback > .nodedc-button:first-child,
   .observation-timeline__meta {
     display: none;
   }