dev to main

functions/.eslintrc.js

@@ -24,5 +24,11 @@ module.exports = {
     quotes: ["error", "double"],
     "import/no-unresolved": 0,
     indent: ["error", 2],
+    "prettier/prettier": [
+      "error",
+      {
+        endOfLine: "auto",
+      },
+    ],
   },
 };

functions/src/index.ts

@@ -93,6 +93,8 @@ export const getStreams = onSchedule(
     region: "asia-northeast1",
   },
   async () => {
+    const endTime = new Date().toISOString();
+
     // init
     const master = await getStreamerMaster();
     const tokenDoc = db
@@ -116,7 +118,6 @@ export const getStreams = onSchedule(
     const snap = await streamRef.get();
     const { endedStreams, newStreams } = sortStreams(streams, snap.docs);
 
-    const endTime = new Date().toISOString();
     for await (const { id, data } of endedStreams) {
       let stream = data;
 

functions/src/utils/sortStreams.ts

@@ -20,7 +20,7 @@ export const sortStreams = <T extends BaseStream>(
     ({ data }) =>
       !streams.find(
         ({ id, platform }) => data.id === id && data.platform === platform,
-      ),
+      ) && !data.endTime,
   );
 
   const newStreams = streams.filter(

src/components/dropdownMenu/dropdownItem/index.tsx

@@ -9,19 +9,21 @@ type Props = {
     text?: string;
   };
   style?: CSSObject;
+  hoverable?: boolean;
   onClick?: () => void;
 };
 
 export const DropdownItem: React.FC<Props> = ({
   children,
   contents = {},
   style,
+  hoverable = false,
   onClick,
 }) => {
   const { icon, text } = contents;
 
   return (
-    <Item onClick={onClick} hoverable={!!onClick} style={style}>
+    <Item onClick={onClick} hoverable={!!onClick || hoverable} style={style}>
       {icon && <IconContainer>{icon}</IconContainer>}
       {text && <ItemText>{text}</ItemText>}
       {children}

src/components/dropdownMenu/index.tsx

@@ -28,6 +28,8 @@ type Props = {
   position?: Partial<Position>;
   entry?: Partial<EntryConfig>;
   children?: ReactNode;
+  onOpen?: () => void;
+  onClose?: () => void;
 } & DropdownContainerProps;
 
 const calcPosition = ({
@@ -49,7 +51,15 @@ const calcPosition = ({
 };
 
 export const Dropdown: FC<Props> = memo(
-  ({ trigger, width, position = {}, entry = {}, children }) => {
+  ({
+    trigger,
+    width,
+    position = {},
+    entry = {},
+    children,
+    onOpen,
+    onClose,
+  }) => {
     const [isOpen, setOpen] = useState(false);
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const refDropdown = useRef<HTMLOListElement>(null!);
@@ -73,7 +83,13 @@ export const Dropdown: FC<Props> = memo(
     );
 
     useEffect(() => {
-      if (isOpen) document.addEventListener("mousedown", checkClicksOutside);
+      if (isOpen) {
+        onOpen?.();
+        document.addEventListener("mousedown", checkClicksOutside);
+      } else {
+        onClose?.();
+      }
+
       return () =>
         document.removeEventListener("mousedown", checkClicksOutside);
     }, [isOpen]);

src/components/header/index.tsx

@@ -1,17 +1,27 @@
-import React from "react";
+import React, { FC } from "react";
 import logo from "../../logo.png";
 import { SettingMenu } from "../settingMenu";
 import { Container, Icon, Title, TitleText, DropdownWrapper } from "./styles";
 
-export const Header: React.FC = () => {
+type Props = {
+  isScrolled: boolean;
+  onOpenMenu?: () => void;
+  onCloseMenu?: () => void;
+};
+
+export const Header: FC<Props> = ({ isScrolled, onOpenMenu, onCloseMenu }) => {
   return (
-    <Container>
+    <Container isScrolled={isScrolled}>
       <Title>
         <Icon src={logo} alt="logo" />
         <TitleText>Vspo stream schedule</TitleText>
       </Title>
       <DropdownWrapper>
-        <SettingMenu />
+        <SettingMenu
+          position={{ y: 40 }}
+          onOpen={onOpenMenu}
+          onClose={onCloseMenu}
+        />
       </DropdownWrapper>
     </Container>
   );

src/components/header/styles.tsx

@@ -1,16 +1,30 @@
 import { breakpointMediaQueries } from "src/configs";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
-export const Container = styled.div`
-  width: 100%;
-  margin: 25px 0;
-  /* position: sticky;
+export const Container = styled.div<{ isScrolled: boolean }>`
+  padding: 5px 10px;
+  margin-bottom: 5px;
+  position: sticky;
   top: 0;
-  left: 0; */
+  left: 0;
   display: flex;
   align-items: center;
-  border-radius: 10px;
+  border-radius: 0 0 10px 10px;
   z-index: 10;
+  background-color: ${({ theme }) => theme.bg};
+  transition:
+    background-color 0.3s ease-in-out,
+    box-shadow 0.2s ease-in-out;
+
+  ${({ isScrolled }) =>
+    isScrolled &&
+    css`
+      box-shadow: 0px 10px 10px -3px rgba(0, 0, 0, 0.2);
+    `}
+
+  ${breakpointMediaQueries.tablet`
+    padding: 10px 20px;
+  `}
 `;
 
 export const Title = styled.div`

src/components/mainContainer/index.tsx

@@ -13,6 +13,7 @@ import { StreamGrid } from "../streamGrid";
 import { StreamGridHeader } from "../streamGridHeader";
 import { useDisplaySize, useSetting, useVspoStream } from "src/providers";
 import { toYYYYMMDD } from "src/utils";
+import { responsiveProperties } from "src/configs";
 
 type DailyStream = {
   date: string;
@@ -48,6 +49,7 @@ export const MainContainer: FC = () => {
     column: number;
     gap: number;
   }>({ column: 0, gap: 0 });
+  const [isScrolled, setIsScrolled] = useState<boolean>(false);
 
   const displaySize = useDisplaySize();
   const { isDisplayHistory } = useSetting();
@@ -57,33 +59,67 @@ export const MainContainer: FC = () => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const containerRef = useRef<HTMLDivElement>(null!);
   useEffect(() => {
-    const [cardWidth, gapRange] = displaySize.mobile
-      ? [160, [10, 40]]
-      : [320, [20, 80]];
-
-    const resize = () => {
-      const style = window.getComputedStyle(containerRef.current);
-      const width = getPixel(style, "width");
-      setGridProperties(calcGridProperties(width, cardWidth, { gapRange }));
+    const ref = containerRef.current;
+
+    const {
+      card: {
+        width: cardWidth,
+        gap: { x },
+      },
+    } = responsiveProperties[displaySize];
+
+    const onResize = () => {
+      const resize = () => {
+        const style = window.getComputedStyle(ref);
+        const width = getPixel(style, "width") - 40;
+        console.log("onResize", width);
+        setGridProperties(
+          calcGridProperties(width, cardWidth, { gapRange: [x, x * 4] }),
+        );
+      };
+      // windowを最大化する際に即時にgetComputedStyleを実行するとその結果に不整合が生じるため、タイミングをずらす
+      setTimeout(resize, 200);
+    };
+    onResize();
+    window.addEventListener("resize", onResize);
+
+    const onScroll = () => {
+      setIsScrolled(ref.scrollTop > 0);
     };
-    resize();
+    ref.addEventListener("scroll", onScroll);
 
-    window.addEventListener("resize", resize);
-    return () => window.removeEventListener("resize", resize);
-  }, [displaySize.mobile]);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      ref.removeEventListener("scroll", onScroll);
+      window.removeEventListener("onload", onResize);
+    };
+  }, [displaySize]);
 
   const calcStreamGridMinHeight = useCallback(
     (streamNum: number) => {
-      const [cardHeight, expandSize, gap] = displaySize.mobile
-        ? [90, 30, 20]
-        : [180, 60, 40];
+      const {
+        card: {
+          height,
+          expandedHeight,
+          gap: { y },
+        },
+      } = responsiveProperties[displaySize];
+
       const row = Math.ceil(streamNum / gridProperties.column);
 
-      return row * (cardHeight + gap) - gap + expandSize;
+      return (row - 1) * (height + y) + expandedHeight;
     },
-    [gridProperties.column, displaySize.mobile],
+    [gridProperties.column, displaySize],
   );
 
+  const disableScroll = useCallback(() => {
+    containerRef.current.style.overflow = "hidden";
+  }, []);
+
+  const enableScroll = useCallback(() => {
+    containerRef.current.style.overflow = "scroll";
+  }, []);
+
   const dailyStreams: DailyStream[] = useMemo(() => {
     const now = Date.now();
     const isEndedStream = (s: Stream) => s.endAt && s.endAt.getTime() <= now;
@@ -110,7 +146,11 @@ export const MainContainer: FC = () => {
   return (
     <Background>
       <Container ref={containerRef}>
-        <Header />
+        <Header
+          isScrolled={isScrolled}
+          onOpenMenu={disableScroll}
+          onCloseMenu={enableScroll}
+        />
         {dailyStreams.map(({ date, streams }) => (
           <DailyStreamContainer key={date}>
             <StreamGridHeader dateString={date} />

src/components/mainContainer/styles.tsx

@@ -9,10 +9,9 @@ export const Background = styled.div`
 `;
 
 export const Container = styled.div`
-  width: 90%;
+  width: 100%;
   height: 100%;
   margin: 0 auto;
-  padding: 0 5%;
   background: rgba(240, 240, 240, 0.03);
   box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.2);
   overflow: scroll;
@@ -22,11 +21,14 @@ export const Container = styled.div`
   transition: width 0.3s ease-in-out;
 
   ${breakpointMediaQueries.desktop`
-    width: 85%;
+    width: 90%;
+    padding: 0 3%;
   `}
 `;
 
 export const DailyStreamContainer = styled.div`
+  padding: 0 20px;
+
   &:last-child {
     padding-bottom: 30px;
   }

src/components/settingMenu/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, memo } from "react";
+import React, { ComponentProps, FC, memo } from "react";
 import {
   Border,
   Dropdown,
@@ -13,10 +13,15 @@ import { FaGithub } from "react-icons/fa";
 import { TbMoonFilled, TbMarquee2, TbHistory } from "react-icons/tb";
 import { IoIosArrowBack } from "react-icons/io";
 
-export const SettingMenu: FC = memo(() => {
+type Props = Pick<
+  ComponentProps<typeof Dropdown>,
+  "position" | "onOpen" | "onClose"
+>;
+
+export const SettingMenu: FC<Props> = memo(({ position, onOpen, onClose }) => {
   const setting = useSetting();
   const configDispatch = useSettingDispatch();
-  const { mobile } = useDisplaySize();
+  const displaySize = useDisplaySize();
 
   const MenuButton = memo(() => (
     <Button>
@@ -95,14 +100,19 @@ export const SettingMenu: FC = memo(() => {
   ));
 
   return (
-    <Dropdown trigger={<MenuButton />}>
+    <Dropdown
+      trigger={<MenuButton />}
+      position={position}
+      onOpen={onOpen}
+      onClose={onClose}
+    >
       <DropdownHeader text="Setting" />
       <ThemeSetting />
       <ExpandSetting />
       <MarqueeSetting />
       <HistorySetting />
       <Border />
-      {!mobile && <DropdownHeader text="Filter" />}
+      {displaySize !== "mobile" && <DropdownHeader text="Filter" />}
       <StreamerFilter
         triggerContents={{
           icon: <IoIosArrowBack size={18} />,

src/components/streamCard/index.tsx

@@ -40,8 +40,8 @@ export const StreamCard: FC<Props> = ({ stream }) => {
 
   const displaySize = useDisplaySize();
   const titleFontSize = useMemo(
-    () => (displaySize.mobile ? "11px" : "20px"),
-    [displaySize.mobile],
+    () => (displaySize === "mobile" ? "10px" : "20px"),
+    [displaySize],
   );
 
   const isLive = streamState === "live";