LEDに運行情報を表示するように変更

components/発車時刻表/LED_vidion.js

@@ -52,6 +52,7 @@ export default function LED_vision(props) {
     currentTrainState,
     currentTrainLoadingState,
     getCurrentTrain,
+    areaInfo,
   } = props;
   const { currentTrain, setCurrentTrain } = currentTrainState;
   const { currentTrainLoading, setCurrentTrainLoading } =
@@ -149,6 +150,33 @@ export default function LED_vision(props) {
     return false;
   };
 
+  const [areaString, setAreaString] = useState("");
+  const [areaStringLength, setAreaStringLength] = useState(0);
+  const [move, setMove] = useState(0);
+  useInterval(
+    () => {
+      if (areaInfo != "") {
+        if (areaStringLength < move) {
+          setMove(0);
+        } else {
+          setMove(move + 1);
+        }
+      }
+    },
+    350,
+    true
+  );
+  useEffect(() => {
+    setAreaString(
+      areaInfo.substring(move, areaInfo.length) + areaInfo.substring(0, move)
+    );
+  }, [move]);
+
+  useEffect(() => {
+    if (!areaInfo) return () => {};
+    setAreaStringLength(areaInfo.length);
+  }, [areaInfo]);
+
   return (
     <View
       style={{
@@ -176,6 +204,13 @@ export default function LED_vision(props) {
           EachTrainInfoAsSR={EachTrainInfoAsSR}
         />
       ))}
+      {areaString != "" && (
+        <Description
+          numberOfLines={1}
+          info={areaString.replace("\n", "").replace("\r", "")}
+        />
+      )}
+
       <Footer
         trainIDSwitch={trainIDSwitch}
         setTrainIDSwitch={setTrainIDSwitch}
@@ -413,7 +448,7 @@ const StatusAndDelay = ({ trainDelayStatus }) => {
   );
 };
 
-const Description = ({ info }) => (
+const Description = ({ info, numberOfLines = 0 }) => (
   <View
     style={{
       alignContent: "center",
@@ -432,6 +467,7 @@ const Description = ({ info }) => (
           color: "green",
           fontWeight: "bold",
         }}
+        numberOfLines={numberOfLines}
       >
         {" "}
         &gt; {info}