Fixed Word and Group sync

src/ig-reel/IGScene.tsx

@@ -80,6 +80,11 @@ export const IGScene: React.FC<any> = (props: { script: any, item: any }) => {
     //   });
     // }
     groups = splitWordsIntoGroups(arr)
+    groups.forEach((group) => {
+      let words = group.words;
+      group.start = words[0]?.start
+      group.end = words[words.length - 1].end
+    })
     setGroups(groups)
 
 
@@ -89,12 +94,10 @@ export const IGScene: React.FC<any> = (props: { script: any, item: any }) => {
     return (<></>)
   }
 
-  let curSecond = frame / fps
+  let curSecond: Number = frame / fps
   let word = findCurrentWord(curSecond, subtitles)
-  let group = findCurrentGroup(word, groups)
-  if (group && item.curGroup != group) {
-    item.curGroup = group
-  }
+  let group = findCurrentGroupByTime(curSecond, groups)
+  item.curGroup = group
 
   return (
     <AbsoluteFill>
@@ -103,7 +106,7 @@ export const IGScene: React.FC<any> = (props: { script: any, item: any }) => {
       <Title title={word?.start + ' --- ' + word?.end}></Title> */}
 
       <Title title={(word?.word || '_____')}></Title>
-      <Title title={((item.curGroup)?.map(wod => wod.word).join(" ") || '_____')}></Title>
+      <Title title={((item?.curGroup?.words)?.map(wod => wod.word).join(" ") || '_____')}></Title>
       {
 
       }
@@ -168,14 +171,14 @@ function splitWordsIntoGroups(words) {
     finalGroups.push(group);
   }
 
-  return finalGroups.map(group => {
+  return finalGroups?.map(group => {
     return {
       words: group
     }
   });
 }
 
-function findCurrentGroup(wod, group) {
+function findCurrentGroupByWord(wod: String, group) {
   if (!wod) {
     return
   }
@@ -192,14 +195,21 @@ function findCurrentGroup(wod, group) {
   }
 }
 
+function findCurrentGroupByTime(timeSec: Number, groups) {
+  var t = timeSec;
+  let wds = groups
+  for (let i = 0; i < wds.length; i++) {
+    const x = wds[i];
+    if (x.start != undefined && x.end != undefined && (t >= x.start && t < x.end)) {
+      return x
+    }
+  }
+}
+
+
 function findCurrentWord(timeSec, frames) {
   var t = timeSec;
   let wds = frames
-  // var hits = wds.filter(function (x) {
-  //   return (t - x.start) > 0.0001 && (x.end - t) > 0.0001;
-  // }, wds);
-  // var currentWord = hits[0];
-  // return currentWord
   for (let i = 0; i < wds.length; i++) {
     const x = wds[i];
     if (x.start && x.end && (t >= x.start && t < x.end)) {
@@ -225,15 +235,6 @@ function getGroupDuration(group, avgCps) {
 const SubTitleFrameGroup: React.FC<{ title?: string, color: string }> = ({ frames }) => {
 
 
-  return (
-    <div style={{ display: 'block' }}>
-      {
-        frames.map((frame) => {
-          return <Title title={frame.word} color="#425211"></Title>
-        })
-      }
-    </div>
-  );
 };
 
 const Title: React.FC<{ title?: string, color?: string }> = ({ title = "test", color = "#fff" }) => {