chore: add segment timestamp info to transcription card

Rocketseat · Jul 15, 2023 · 6ddd2de · 6ddd2de
1 parent 21617e3
commit 6ddd2de
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/app/(app)/videos/[id]/transcription-card/index.tsx b/src/app/(app)/videos/[id]/transcription-card/index.tsx
@@ -14,6 +14,7 @@ import { Fragment, useRef, useState } from 'react'
 import { Switch } from '@/components/ui/switch'
 import { Label } from '@/components/ui/label'
 import { Loader2 } from 'lucide-react'
+import { formatSecondsToMinutes } from '@/utils/format-seconds-to-minutes'
 
 interface TranscriptionCardProps {
   videoId: string
@@ -103,14 +104,12 @@ export function TranscriptionCard({ videoId }: TranscriptionCardProps) {
               {transcription.segments.map((segment: any, index: number) => {
                 return (
                   <Fragment key={segment.id}>
-                    {index > 0 && (
-                      <span className="mx-1 text-sm text-primary/40">/</span>
-                    )}
                     <input
                       type="hidden"
                       value={segment.id}
                       {...register(`segments.${index}.id`)}
                     />
+
                     <Controller
                       name={`segments.${index}.text`}
                       control={control}
@@ -123,6 +122,7 @@ export function TranscriptionCard({ videoId }: TranscriptionCardProps) {
                              * cause new rerenders on every input.
                              */
                             value={segment.text}
+                            start={segment.start}
                             onValueChange={field.onChange}
                             onBlur={field.onBlur}
                             onFocus={() =>

diff --git a/src/app/(app)/videos/[id]/transcription-card/segment.tsx b/src/app/(app)/videos/[id]/transcription-card/segment.tsx
@@ -1,12 +1,17 @@
+import { Badge } from '@/components/ui/badge'
+import { formatSecondsToMinutes } from '@/utils/format-seconds-to-minutes'
+
 export interface SegmentProps {
   value: string
+  start: number
   onValueChange: (value: string) => void
   onFocus: () => void
   onBlur: () => void
 }
 
 export function Segment({
   value,
+  start,
   onValueChange,
   onFocus,
   onBlur,
@@ -18,8 +23,14 @@ export function Segment({
       onFocus={onFocus}
       onBlur={onBlur}
       onInput={(e) => onValueChange(e.currentTarget.textContent ?? '')}
-      className="rounded p-1 outline-none hover:bg-primary/10 focus:bg-violet-500 focus:text-white"
+      className="group rounded p-1 outline-none hover:bg-accent focus:bg-violet-500 focus:text-white"
     >
+      <Badge
+        variant="outline"
+        className="px-1.5 py-0 transition-none group-hover:border-white/40 group-focus:border-white/60"
+      >
+        {formatSecondsToMinutes(start)}
+      </Badge>
       {value}
     </span>
   )