chore: Small final pre-feedback improvements. #1601

h2oai · Apr 11, 2023 · 0745c27 · 0745c27
1 parent d709bb4
commit 0745c27
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 27 deletions.
diff --git a/ui/src/audio_annotator.tsx b/ui/src/audio_annotator.tsx
@@ -242,7 +242,7 @@ export const XAudioAnnotator = ({ model }: { model: AudioAnnotator }) => {
               onRenderBackground={data => <MicroBars data={data} value='val' category='cat' color='$primary5' zeroValue={0} />}
             />
             <Fluent.Slider
-              key={currentTime} // HACK: Avoid Fluent batch updates to achieve smooth thumb movement synced with canvas.
+              key={isPlaying ? currentTime : undefined} // HACK: Avoid Fluent batch updates to achieve smooth thumb movement synced with canvas.
               styles={{ root: { minWidth: 180 }, slideBox: { padding: 0 } }}
               value={currentTime}
               max={duration}
@@ -251,24 +251,20 @@ export const XAudioAnnotator = ({ model }: { model: AudioAnnotator }) => {
               showValue={false}
             />
             <div style={{ marginBottom: 8 }}>
-              <TimeComponent secs={currentTime} />
+              <TimeComponent secs={currentTime} isBig />
             </div>
             <Fluent.Stack horizontal horizontalAlign='center'>
               <Fluent.IconButton iconProps={{ iconName: 'PlayReverseResume' }} styles={{ icon: { fontSize: 18 } }} onClick={skipToTime(0)} />
               <Fluent.IconButton
                 iconProps={{ iconName: isPlaying ? 'Pause' : 'PlaySolid' }}
                 onClick={onPlayerStateChange}
                 styles={{
-                  root: { backgroundColor: cssVar('$themePrimary'), borderRadius: 50 },
+                  root: { backgroundColor: cssVar('$themePrimary'), borderRadius: 50, marginTop: 1.5 },
                   rootHovered: { backgroundColor: cssVar('$themeSecondary') },
                   icon: { marginBottom: 2, color: cssVar('$white'), fontSize: 18 }
                 }}
               />
-              <Fluent.IconButton
-                iconProps={{ iconName: 'PlayResume' }}
-                styles={{ icon: { fontSize: 18 } }}
-                onClick={skipToTime(duration)}
-              />
+              <Fluent.IconButton iconProps={{ iconName: 'PlayResume' }} styles={{ icon: { fontSize: 18 } }} onClick={skipToTime(duration)} />
             </Fluent.Stack>
           </>
         ) : (

diff --git a/ui/src/parts/range_annotator.tsx b/ui/src/parts/range_annotator.tsx
@@ -1,11 +1,11 @@
-import { S, F, U, B, xid } from 'h2o-wave'
+import * as Fluent from '@fluentui/react'
+import { B, F, S, U, xid } from 'h2o-wave'
 import React from 'react'
 import { stylesheet } from 'typestyle'
 import { AudioAnnotatorItem, AudioAnnotatorTag } from '../audio_annotator'
 import { isIntersectingRect } from '../image_annotator_rect'
-import { cssVar, cssVarValue } from '../theme'
+import { clas, cssVar, cssVarValue } from '../theme'
 import { eventToCursor } from './annotator_utils'
-import * as Fluent from '@fluentui/react'
 
 type RangeAnnotatorProps<T> = {
   activeTag: S
@@ -86,15 +86,29 @@ const
       boxShadow: `${cssVar('$text1')} 0px 6.4px 14.4px 0px, ${cssVar('$text2')} 0px 1.2px 3.6px 0px`,
       boxSizing: 'border-box',
     },
-    time: {
-      display: 'inline-block',
-      width: 20,
+    timeComponent: {
+      textAlign: 'center',
+      $nest: {
+        'span': {
+          display: 'inline-block',
+          width: 18,
+        },
+        '.wave-time-delimiter': {
+          width: 'auto',
+        }
+      }
+    },
+    timeComponentBig: {
+      $nest: {
+        'span': {
+          width: 35,
+          fontSize: 30,
+        },
+        '.wave-time-delimiter': {
+          width: 10,
+        }
+      }
     },
-    miliseconds: {
-      display: 'inline-block',
-      marginLeft: -1,
-      marginRight: -2
-    }
   }),
   getIntersectingEdge = (x: U, intersected?: { canvasStart: F, canvasEnd: F }) => {
     if (!intersected) return
@@ -492,19 +506,22 @@ export const
       .filter((v, i) => v !== "00" || i > 0)
       .join(":")
   },
-  TimeComponent = ({ secs }: { secs: F }) => {
+  TimeComponent = ({ secs, isBig = false }: { secs: F, isBig?: B }) => {
     const hours = Math.floor(secs / 3600)
     const minutes = Math.floor(secs / 60) % 60
     const [seconds, miliseconds] = (secs % 60).toFixed(2).split('.').map(v => +v)
     const [h, m, s, ms] = [hours, minutes, seconds, miliseconds].map(v => v < 10 ? '0' + v : String(v))
     return (
-      <div style={{ textAlign: 'center' }}>
-        {h !== '00' && <><span>{h}</span> <span>:</span></>}
-        <span className={css.time}>{m}</span>
-        <span>:</span>
-        <span className={css.time}>{s}</span>
-        <span className={css.miliseconds}>.</span>
-        <span className={css.time}>{ms}</span>
+      <div className={clas(css.timeComponent, isBig ? css.timeComponentBig : '')}>
+        {h !== '00' && <>
+          <span>{h}</span>
+          <span className='wave-time-delimiter'>:</span>
+        </>}
+        <span>{m}</span>
+        <span className='wave-time-delimiter'>:</span>
+        <span>{s}</span>
+        <span className='wave-time-delimiter'>.</span>
+        <span>{ms}</span>
       </div>
     )
   },