feat: support timeline on mobile on reearth/core (#462)

feat: support mobile for timeline on reearth/core
reearth · Feb 16, 2023 · efeaf4c · efeaf4c
1 parent c74630b
commit efeaf4c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/src/components/atoms/Timeline/index.tsx b/src/components/atoms/Timeline/index.tsx
@@ -105,7 +105,7 @@ const Timeline: React.FC<Props> = memo(function TimelinePresenter({
         <li>
           <InputRangeLabel>
             <InputRangeLabelText size="xs" customColor publishedTheme={theme}>
-              {speed}X
+              X{speed}
             </InputRangeLabelText>
             <InputRange
               publishedTheme={theme}
@@ -192,6 +192,10 @@ const ToolBox = styled.ul`
     `${theme.metrics.s}px ${theme.metrics.s}px ${theme.metrics.s}px ${theme.metrics.l}px`};
   list-style: none;
   padding: 0;
+
+  @media (max-width: 768px) {
+    margin-left: ${({ theme }) => `${theme.metrics.s}px`};
+  }
 `;
 
 const PlayButton = styled.button<{ isRight?: boolean; isPlaying?: boolean } & StyledColorProps>`
@@ -209,13 +213,17 @@ const PlayButton = styled.button<{ isRight?: boolean; isPlaying?: boolean } & St
   margin-left: ${({ isRight, theme }) => (isRight ? `${theme.metrics.s}px` : 0)};
   background: ${({ isPlaying, publishedTheme, theme }) =>
     isPlaying ? publishedTheme?.select || theme.main.select : "transparent"};
+
+  @media (max-width: 768px) {
+    margin-left: ${({ isRight, theme }) => (isRight ? `${theme.metrics.xs}px` : 0)};
+  }
 `;
 
 const InputRangeLabel = styled.label`
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: ${({ theme }) => `0 ${theme.metrics["2xs"]}px 0 ${theme.metrics["2xs"]}px`};
+  margin-left: ${({ theme }) => theme.metrics["2xs"]}px;
 `;
 
 const InputRangeLabelText = styled(Text)<StyledColorProps>`
@@ -239,6 +247,10 @@ const InputRange = styled.input<StyledColorProps>`
     width: 10px;
     border-radius: 50%;
   }
+
+  @media (max-width: 768px) {
+    width: 74px;
+  }
 `;
 
 const CurrentTimeWrapper = styled.div`
@@ -247,6 +259,10 @@ const CurrentTimeWrapper = styled.div`
   padding: ${({ theme }) => `0 ${theme.metrics.s}px`};
   margin: ${({ theme }) => `${theme.metrics.xs}px 0`};
   flex-shrink: 0;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 `;
 
 const CurrentTime = styled(Text)<StyledColorProps>`
@@ -282,6 +298,10 @@ const ScaleBox = styled.div`
   }
   margin: ${({ theme }) =>
     `${theme.metrics.xs}px ${theme.metrics.s}px ${theme.metrics.xs}px ${theme.metrics.xs}px`};
+
+  @media (max-width: 768px) {
+    margin-left: 0;
+  }
 `;
 
 const IconWrapper = styled.div<StyledColorProps>`

diff --git a/src/core/Crust/Widgets/Widget/Timeline/hooks.ts b/src/core/Crust/Widgets/Widget/Timeline/hooks.ts
@@ -161,6 +161,14 @@ export const useTimeline = ({
     };
   }, [onTick, clock?.playing, removeTickEventListener]);
 
+  useEffect(() => {
+    if (isMobile) {
+      onExtend?.(widgetId, true);
+    } else {
+      onExtend?.(widgetId, undefined);
+    }
+  }, [widgetId, onExtend, isMobile]);
+
   return {
     speed,
     range,

diff --git a/src/core/Crust/Widgets/Widget/Timeline/index.tsx b/src/core/Crust/Widgets/Widget/Timeline/index.tsx
@@ -65,7 +65,7 @@ const Widget = styled.div<{
   max-width: 100vw;
   width: ${({ extended, opened }) => (extended && opened ? "100%" : opened ? "720px" : "auto")};
 
-  @media (max-width: 560px) {
+  @media (max-width: 768px) {
     width: ${({ extended, opened }) => (extended && opened ? "100%" : opened ? "90vw" : "auto")};
   }
 `;