Dev to main

functions/src/index.ts

@@ -1,9 +1,11 @@
 import { initializeApp } from "firebase-admin/app";
 import { getFirestore } from "firebase-admin/firestore";
 import { onSchedule } from "firebase-functions/v2/scheduler";
+import { onRequest } from "firebase-functions/v2/https";
 import { Streamer } from "../types";
 import { YoutubeClient, TwitchClient, TwitCastingClient } from "./api";
 import { defineConfig, sortStreams } from "./utils";
+import { createMaster } from "./createMater";
 
 initializeApp();
 const config = defineConfig();
@@ -14,20 +16,24 @@ const getStreamerMaster = async () => {
   const youtubeChannelIdMap = new Map<string, string>();
   const twitchChannelIdMap = new Map<string, string>();
   const twitCastingChannelIdMap = new Map<string, string>();
+  const baseStreamers: Record<string, { order: number }> = {};
 
   const master = await db.collection(config.collection.master.value()).get();
   master.forEach((doc) => {
-    const { youtube, twitch, twitCasting } = doc.data();
+    const id = doc.id;
+    const { youtube, twitch, twitCasting, order } = doc.data();
 
-    if (youtube) youtubeChannelIdMap.set(youtube, doc.id);
-    if (twitch) twitchChannelIdMap.set(twitch, doc.id);
-    if (twitCasting) twitCastingChannelIdMap.set(twitCasting, doc.id);
+    if (youtube) youtubeChannelIdMap.set(youtube, id);
+    if (twitch) twitchChannelIdMap.set(twitch, id);
+    if (twitCasting) twitCastingChannelIdMap.set(twitCasting, id);
+    if (Number.isFinite(order)) baseStreamers[id] = { order };
   });
 
   return {
     youtube: youtubeChannelIdMap,
     twitch: twitchChannelIdMap,
     twitCasting: twitCastingChannelIdMap,
+    baseStreamers,
   };
 };
 
@@ -43,7 +49,7 @@ export const getStreamers = onSchedule(
   },
   async () => {
     // init
-    const master = await getStreamerMaster();
+    const { baseStreamers, ...idMap } = await getStreamerMaster();
     const tokenDoc = db
       .collection(config.collection.secrets.value())
       .doc(config.document.token.value());
@@ -53,22 +59,21 @@ export const getStreamers = onSchedule(
 
     // get channels
     const getChannels = [
-      youtubeClient.getChannels([...master.youtube.keys()]),
-      twitchClient.getChannels([...master.twitch.keys()]),
-      twitClient.getChannels([...master.twitCasting.keys()]),
+      youtubeClient.getChannels([...idMap.youtube.keys()]),
+      twitchClient.getChannels([...idMap.twitch.keys()]),
+      twitClient.getChannels([...idMap.twitCasting.keys()]),
     ];
     const channels = (await Promise.all(getChannels)).flat();
 
     const streamers = channels.reduce(
       (result, ch) => {
-        const key = master[ch.platform].get(ch.id);
-        if (!key) return result;
+        const key = idMap[ch.platform].get(ch.id);
 
-        result[key] = { ...result[key], [ch.platform]: ch };
+        if (key) result[key] = { ...result[key], [ch.platform]: ch };
 
         return result;
       },
-      {} as Record<string, Streamer>,
+      baseStreamers as Record<string, Streamer>,
     );
 
     // create and update db
@@ -142,3 +147,13 @@ export const getStreams = onSchedule(
     await batch.commit();
   },
 );
+
+export const createStreamerMaster = onRequest(
+  {
+    region: "asia-northeast1",
+  },
+  async (_, res) => {
+    createMaster(db, config.collection.master.value());
+    res.status(200).send("updated");
+  },
+);

functions/types/index.d.ts

@@ -9,7 +9,7 @@ export type Channel = {
   platform: Platform;
 };
 
-export type Streamer = { [k in Platform]: Channel };
+export type Streamer = { [k in Platform]: Channel } & { order: number };
 
 export type BaseStream = {
   id: string;

src/components/displayHistoryButton/styles.tsx

@@ -10,13 +10,16 @@ export const Button = styled.button<{ state: boolean }>`
     state
       ? theme.displayHistoryButton.iconActive
       : theme.displayHistoryButton.icon};
-  ${({ state }) =>
+  ${({ state, theme }) =>
     state &&
     css`
       box-shadow:
-        inset 3px 3px 5px #bbbbbb,
-        inset -3px -3px 5px #ffffff;
+        inset 3px 3px 5px ${theme.displayHistoryButton.shadow[0]},
+        inset -3px -3px 5px ${theme.displayHistoryButton.shadow[1]};
     `}
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   &:hover {
     background-color: ${({ theme }) => theme.displayHistoryButton.bg.hover};

src/components/inViewContainer/index.tsx

@@ -28,7 +28,7 @@ export const InViewContainer = <T,>({
       setRenderDataIdx((n) => ++n);
     });
 
-    observer.observe(ref.current);
+    setTimeout(() => observer.observe(ref.current), 0);
 
     return () => {
       observer.unobserve(ref.current);

src/components/inViewContainer/styles.tsx

@@ -2,5 +2,6 @@ import styled from "styled-components";
 
 export const ObserverElement = styled.div<{ height?: number }>`
   min-height: ${({ height }) => height ?? 0}px;
+  height: 100%;
   width: 100%;
 `;

src/components/mainContainer/index.tsx

@@ -73,7 +73,6 @@ export const MainContainer: FC = () => {
       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] }),
         );

src/components/settingMenu/styles.tsx

@@ -7,6 +7,9 @@ export const Button = styled.button`
   background-color: ${({ theme }) => theme.dropdown.input.bg.normal};
   transition: 0.3s ease;
   color: ${({ theme }) => theme.dropdown.input.icon};
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   &:hover {
     background-color: ${({ theme }) => theme.dropdown.input.bg.hover};

src/components/streamCard/index.tsx

@@ -83,7 +83,8 @@ export const StreamCard: FC<Props> = ({ stream }) => {
     <Card
       {...hoverParams}
       isExpand={isExpand}
-      onClick={() => window.open(stream.url)}
+      href={stream.url}
+      target="_blank"
     >
       <Thumbnail src={stream.thumbnail} loading="lazy" />
       <StreamInfo isExpand={isExpand && !isEnded}>

src/components/streamCard/styles.tsx

@@ -12,7 +12,7 @@ type StyleProps = {
   isExpand: boolean;
 };
 
-export const Card = styled.div<StyleProps>`
+export const Card = styled.a<StyleProps>`
   width: ${mobileParams.width}px;
   height: ${({ isExpand }) =>
     isExpand ? mobileParams.expandedHeight : mobileParams.height}px;

src/components/streamerFilter/index.tsx

@@ -57,7 +57,7 @@ export const StreamerFilter: FC<Props> = ({
   );
 
   const sortedStreamers = useMemo(
-    () => [...streamers].sort((a, b) => a.id.localeCompare(b.id)),
+    () => [...streamers].sort((a, b) => a.order - b.order),
     [streamers],
   );
 

src/configs/theme/dark.ts

@@ -69,5 +69,6 @@ export const darkTheme: DefaultTheme = {
       normal: "transparent",
       hover: colors.grey[700],
     },
+    shadow: [colors.grey[900], colors.grey[800]],
   },
 };

src/configs/theme/light.ts

@@ -69,5 +69,6 @@ export const lightTheme: DefaultTheme = {
       normal: "transparent",
       hover: colors.grey[200],
     },
+    shadow: [colors.grey[400], colors.grey[100]],
   },
 };

src/providers/vspoStreamProvider/provider.tsx

@@ -8,6 +8,7 @@ import {
 } from "./context";
 import {
   Channel,
+  ChannelResponse,
   Stream,
   Streamer,
   StreamerMap,
@@ -38,9 +39,12 @@ const parseToStream = (streamRes: StreamResponse, channel: Channel): Stream => {
 };
 
 const parseToStreamer = (streamerRes: StreamerResponse): Streamer => {
-  const entries = Object.entries(streamerRes).map(
-    ([key, { id, name, icon }]) => [key, { id, name, icon }],
-  );
+  const entries = Object.entries(streamerRes).map(([key, data]) => {
+    if (key === "order") return [key, data];
+
+    const { id, name, icon } = data as ChannelResponse;
+    return [key, { id, name, icon }];
+  });
 
   return Object.fromEntries(entries);
 };

types/stream.ts

@@ -7,7 +7,9 @@ export type ChannelResponse = {
   platform: Platform;
 };
 
-export type StreamerResponse = { [k in Platform]: ChannelResponse };
+export type StreamerResponse = { [k in Platform]: ChannelResponse } & {
+  order: number;
+};
 
 export type StreamResponse = {
   id: string;
@@ -29,7 +31,10 @@ export type Channel = {
   icon: string;
 };
 
-export type Streamer = { [key in Platform]: Channel } & { id: string };
+export type Streamer = { [key in Platform]: Channel } & {
+  id: string;
+  order: number;
+};
 
 export type StreamerMap = { [id in string]: Streamer };
 

types/theme.ts

@@ -50,6 +50,7 @@ export type DropdownTheme = {
 
 export type DisplayHistoryButtonTheme = ButtonTheme & {
   iconActive: string;
+  shadow: [string, string];
 };
 
 declare module "styled-components" {