From 03a4bb914ffed79d042bbb90e151efb0f6d90075 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Wed, 6 Sep 2023 11:39:02 +0200
Subject: [PATCH] visualize segment tags in seg list

---
 src/SegmentList.jsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/SegmentList.jsx b/src/SegmentList.jsx
index 0c71f95d..40c676bd 100644
--- a/src/SegmentList.jsx
+++ b/src/SegmentList.jsx
@@ -14,6 +14,7 @@ import useUserSettings from './hooks/useUserSettings';
 import { saveColor, controlsBackground, primaryTextColor, darkModeTransition } from './colors';
 import { useSegColors } from './contexts';
 import { mySpring } from './animations';
+import { getSegmentTags } from './segments';
 
 const buttonBaseStyle = {
   margin: '0 3px', borderRadius: 3, color: 'white', cursor: 'pointer',
@@ -108,6 +109,8 @@ const Segment = memo(({ darkMode, seg, index, currentSegIndex, formatTimecode, g
 
   const cursor = invertCutSegments ? undefined : 'grab';
 
+  const tags = useMemo(() => getSegmentTags(seg), [seg]);
+
   return (
     <motion.div
       ref={ref}
@@ -126,7 +129,13 @@ const Segment = memo(({ darkMode, seg, index, currentSegIndex, formatTimecode, g
         <span style={{ cursor, fontSize: Math.min(310 / timeStr.length, 14), whiteSpace: 'nowrap' }}>{timeStr}</span>
       </div>
 
-      <div style={{ fontSize: 12, color: primaryTextColor }}>{seg.name}</div>
+      <div style={{ fontSize: 12 }}>
+        {seg.name && <span style={{ color: primaryTextColor, marginRight: '.3em' }}>{seg.name}</span>}
+        {Object.entries(tags).map(([name, value]) => (
+          <span style={{ fontSize: 11, backgroundColor: 'var(--gray5)', color: 'var(--gray12)', borderRadius: '.4em', padding: '0 .2em', marginRight: '.1em' }} key={name}>{name}:<b>{value}</b></span>
+        ))}
+      </div>
+
       <div style={{ fontSize: 13 }}>
         {t('Duration')} {formatTimecode({ seconds: duration, shorten: true })}
       </div>