Merge branch 'main' of github.com:reearth/reearth-visualizer into fix…

…/timeline-block-speed

web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx

@@ -1,5 +1,5 @@
 import { Button, PopupMenu, TextInput } from "@reearth/beta/lib/reearth-ui";
-import defaultProjectBackgroundImage from "@reearth/beta/ui/assets/defaultProjectBackgroundImage.png";
+import defaultProjectBackgroundImage from "@reearth/beta/ui/assets/defaultProjectBackgroundImage.webp";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC } from "react";
 
@@ -120,9 +120,8 @@ const CardImage = styled("div")<{
 }>(({ theme, backgroundImage, isHovered }) => ({
   flex: 1,
   position: "relative",
-  background: backgroundImage
-    ? `url(${backgroundImage}) center/cover`
-    : theme.bg[1],
+  background: backgroundImage ? `url(${backgroundImage}) center/cover` : "",
+  backgroundColor: theme.bg[1],
   borderRadius: theme.radius.normal,
   boxSizing: "border-box",
   cursor: "pointer",

web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx

@@ -47,7 +47,15 @@ const LayerItem: FC<LayerItemProps> = ({
 
   const handleZoomToLayer = useCallback(() => {
     handleFlyTo?.(layer.id, { duration: 0 });
-  }, [layer.id, handleFlyTo]);
+    // issue: https://github.com/CesiumGS/cesium/issues/4327
+    // delay 800ms to trigger a second flyTo,
+    // time could be related with internet speed, not a stable solution
+    if (["geojson", "kml"].includes(layer.config?.data?.type)) {
+      setTimeout(() => {
+        handleFlyTo?.(layer.id, { duration: 0 });
+      }, 800);
+    }
+  }, [layer, handleFlyTo]);
 
   const handleToggleLayerVisibility = useCallback(() => {
     handleLayerVisibilityUpdate({ layerId: layer.id, visible: !layer.visible });

web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx

@@ -1,7 +1,7 @@
 import { IMAGE_TYPES } from "@reearth/beta/features/AssetsManager/constants";
 import ProjectRemoveModal from "@reearth/beta/features/Dashboard/ContentsContainer/Projects/ProjectRemoveModal";
 import { Collapse, Button, Typography } from "@reearth/beta/lib/reearth-ui";
-import defaultProjectBackgroundImage from "@reearth/beta/ui/assets/defaultProjectBackgroundImage.png";
+import defaultProjectBackgroundImage from "@reearth/beta/ui/assets/defaultProjectBackgroundImage.webp";
 import { InputField, AssetField, TextareaField } from "@reearth/beta/ui/fields";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";

web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx

@@ -1,6 +1,6 @@
 import { IMAGE_TYPES } from "@reearth/beta/features/AssetsManager/constants";
 import { Button, Collapse } from "@reearth/beta/lib/reearth-ui";
-import defaultProjectBackgroundImage from "@reearth/beta/ui/assets/defaultProjectBackgroundImage.png";
+import defaultProjectBackgroundImage from "@reearth/beta/ui/assets/defaultProjectBackgroundImage.webp";
 import { AssetField, InputField, SwitchField } from "@reearth/beta/ui/fields";
 import TextAreaField from "@reearth/beta/ui/fields/TextareaField";
 import { Story } from "@reearth/services/api/storytellingApi/utils";
@@ -260,9 +260,10 @@ const ThumbnailField = styled.div`
   display: inline-grid;
 `;
 
-const StyledImage = styled.img`
-  width: 100%;
-  border-radius: 4px;
-`;
+const StyledImage = styled("img")(({ theme }) => ({
+  width: "100%",
+  borderRadius: theme.radius.normal,
+  backgroundColor: theme.relative.dark
+}));
 
 export default PublicSettingsDetail;

web/src/beta/features/ProjectSettings/innerPages/common.tsx

@@ -53,9 +53,8 @@ export const Thumbnail = styled("div")<{ src?: string }>(({ src, theme }) => ({
   width: "100%",
   paddingBottom: "52.3%",
   fontSize: 0,
-  background: src
-    ? `url(${src}) center/contain no-repeat`
-    : theme.relative.dark,
+  background: src ? `url(${src}) center/contain no-repeat` : "",
+  backgroundColor: theme.relative.dark,
   borderRadius: theme.radius.small
 }));