bugfix: add offline setting and fix timestamp parsing

js/app/components/livestream/livestream.tsx

···
   const [outerHeight, setOuterHeight] = useState(0);
   const [innerHeight, setInnerHeight] = useState(0);
   const [isChatVisible, setIsChatVisible] = useState(true);
+  const [offline, setOffline] = useState(true);
   const [currentUserDID, setCurrentUserDID] = useState<string | null>(null);
   const { fullscreen, setFullscreen } = useFullscreen();
 
   const streamerDID = player.livestream?.author?.did;
   const streamerProfile = streamerDID ? profiles[streamerDID] : undefined;
   const streamerHandle = streamerProfile?.handle;
-  const startTime = player.livestream?.record?.createdAt || Date();
+  const startTime = player.livestream?.record?.createdAt
+    ? new Date(player.livestream?.record?.createdAt) : undefined;
 
   // this would all be really easy if i had library that would give me the
   // safe area view height and width but i don't. so let's measure
···
       dispatch(getProfile(streamerDID));
     }
   }, [streamerDID, streamerProfile, dispatch]);
+
+  useEffect(() => {
+    // 10 second cut off for segements
+    const cuttOffDate = new Date(Date.now() - 10 * 1000);
+    // 15 second cut off if segment start time not found
+    const startTime = player.segment?.startTime
+    ? new Date(player.segment?.startTime) : new Date(Date.now() - 15 * 1000);
+
+    if (startTime > cuttOffDate) {
+      setOffline(false);
+    }
+  }, [player.segment]);
 
   let slideKeyboard = 0;
   if (isIOS && keyboardHeight > 0) {
···
                     )}
                   </View>
                   <View flexDirection="row" alignItems="center" gap="$2">
-                    <Timer start={startTime} />
+                    {(startTime instanceof Date) && !offline && <Timer start={startTime} />}
                     <Viewers viewers={player.viewers ?? 0} />
                     <Button
                       backgroundColor="transparent"