chore: fix message (#850)

sugar-cat7 · sugar-cat7 · commit 4bf306c4c71e · 2025-11-24T01:34:40.000+09:00
diff --git a/service/vspo-schedule/v2/web/public/locales/cn/schedule.json b/service/vspo-schedule/v2/web/public/locales/cn/schedule.json
@@ -35,5 +35,6 @@
   "tabs": {
     "all": "全部",
     "allWithDate": "全部 ({{date}})"
-  }
-} 
+  },
+  "noLivestreams": "暂无直播计划，请查看前一天的安排。"
+}
diff --git a/service/vspo-schedule/v2/web/public/locales/en/schedule.json b/service/vspo-schedule/v2/web/public/locales/en/schedule.json
@@ -35,5 +35,6 @@
   "tabs": {
     "all": "All",
     "allWithDate": "All ({{date}})"
-  }
-} 
+  },
+  "noLivestreams": "No scheduled streams. Please check the previous day's schedule."
+}
diff --git a/service/vspo-schedule/v2/web/public/locales/ja/schedule.json b/service/vspo-schedule/v2/web/public/locales/ja/schedule.json
@@ -35,5 +35,6 @@
   "tabs": {
     "all": "すべて",
     "allWithDate": "すべて ({{date}})"
-  }
-} 
+  },
+  "noLivestreams": "配信予定がありません、前日の予定をご覧ください。"
+}
diff --git a/service/vspo-schedule/v2/web/public/locales/ko/schedule.json b/service/vspo-schedule/v2/web/public/locales/ko/schedule.json
@@ -35,5 +35,6 @@
   "tabs": {
     "all": "전체",
     "allWithDate": "전체 ({{date}})"
-  }
-} 
+  },
+  "noLivestreams": "예정된 방송이 없습니다. 전날 일정을 확인해주세요."
+}
diff --git a/service/vspo-schedule/v2/web/public/locales/tw/schedule.json b/service/vspo-schedule/v2/web/public/locales/tw/schedule.json
@@ -35,5 +35,6 @@
   "tabs": {
     "all": "全部",
     "allWithDate": "全部 ({{date}})"
-  }
-} 
+  },
+  "noLivestreams": "沒有配信預定，請查看前一天的行程。"
+}
diff --git a/service/vspo-schedule/v2/web/src/features/clips/components/presenters/ClipSectionPresenter.tsx b/service/vspo-schedule/v2/web/src/features/clips/components/presenters/ClipSectionPresenter.tsx
@@ -10,12 +10,17 @@ import {
   Grid,
   Typography,
 } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import { styled, type Theme } from "@mui/material/styles";
 import { useTranslation } from "next-i18next";
 import type React from "react";
 import type { Clip } from "@/features/shared/domain";
 import { useVideoModalContext } from "@/hooks/video-modal";
 
+const doubleBorderRadius = (theme: Theme) =>
+  typeof theme.shape.borderRadius === "number"
+    ? theme.shape.borderRadius * 2
+    : `calc(${theme.shape.borderRadius} * 2)`;
+
 // Styled components
 const SectionTitle = styled(Typography)(({ theme }) => ({
   fontWeight: 700,
@@ -59,7 +64,7 @@ const SingleRowContainer = styled(Box)(({ theme }) => ({
 // Modern card style
 const ModernCard = styled(Card)(({ theme }) => ({
   overflow: "hidden",
-  borderRadius: theme.shape.borderRadius * 2,
+  borderRadius: doubleBorderRadius(theme),
   transition: "transform 0.3s ease, box-shadow 0.3s ease",
   height: "100%",
   "&:hover": {
@@ -88,7 +93,7 @@ const CardOverlay = styled(Box)(({ theme }) => ({
 
 const ShortsCard = styled(Card)(({ theme }) => ({
   overflow: "hidden",
-  borderRadius: theme.shape.borderRadius * 2,
+  borderRadius: doubleBorderRadius(theme),
   height: "100%",
   aspectRatio: "9/16",
   transition: "transform 0.3s ease, box-shadow 0.3s ease",
diff --git a/service/vspo-schedule/v2/web/src/features/multiview/components/presenters/LayoutSelectorPresenter.tsx b/service/vspo-schedule/v2/web/src/features/multiview/components/presenters/LayoutSelectorPresenter.tsx
@@ -18,16 +18,22 @@ import {
   styled,
   useMediaQuery,
   useTheme,
+  type Theme,
 } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import type { TFunction } from "next-i18next";
 import React from "react";
 import { LayoutType } from "../../hooks/useMultiviewLayout";
 
+const scaledBorderRadius = (theme: Theme, scale: number) =>
+  typeof theme.shape.borderRadius === "number"
+    ? theme.shape.borderRadius * scale
+    : `calc(${theme.shape.borderRadius} * ${scale})`;
+
 const SelectorContainer = styled(Paper)(({ theme }) => ({
   padding: theme.spacing(2.5),
   backgroundColor: "white",
-  borderRadius: theme.shape.borderRadius * 1.5,
+  borderRadius: scaledBorderRadius(theme, 1.5),
   boxShadow: theme.shadows[2],
   border: `1px solid ${theme.palette.divider}`,
   [theme.breakpoints.down("md")]: {
@@ -59,7 +65,7 @@ const LayoutButton = styled(IconButton, {
   border: `2px solid ${
     isSelected ? theme.palette.primary.main : theme.palette.divider
   }`,
-  borderRadius: theme.shape.borderRadius * 1.5,
+  borderRadius: scaledBorderRadius(theme, 1.5),
   backgroundColor: isSelected
     ? alpha(theme.palette.primary.main, 0.08)
     : "transparent",
diff --git a/service/vspo-schedule/v2/web/src/features/multiview/components/presenters/MultiviewGridPresenter.tsx b/service/vspo-schedule/v2/web/src/features/multiview/components/presenters/MultiviewGridPresenter.tsx
@@ -6,6 +6,7 @@ import {
   styled,
   useMediaQuery,
   useTheme,
+  type Theme,
 } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import React, { useState, useCallback, useRef, useEffect } from "react";
@@ -15,12 +16,17 @@ import "react-resizable/css/styles.css";
 import { MultiviewLayout } from "../../hooks/useMultiviewLayout";
 import { VideoPlayer } from "../containers";
 
+const scaledBorderRadius = (theme: Theme, scale: number) =>
+  typeof theme.shape.borderRadius === "number"
+    ? theme.shape.borderRadius * scale
+    : `calc(${theme.shape.borderRadius} * ${scale})`;
+
 const GridContainer = styled(Paper)<{ isFullscreen?: boolean }>(
   ({ theme, isFullscreen }) => ({
     minHeight: isFullscreen ? "100vh" : "600px",
     padding: theme.spacing(isFullscreen ? 0 : 1),
     backgroundColor: "white",
-    borderRadius: isFullscreen ? 0 : theme.shape.borderRadius * 2,
+    borderRadius: isFullscreen ? 0 : scaledBorderRadius(theme, 2),
     boxShadow: isFullscreen ? "none" : theme.shadows[4],
     border: isFullscreen ? "none" : `1px solid ${theme.palette.divider}`,
     position: isFullscreen ? "fixed" : "relative",
diff --git a/service/vspo-schedule/v2/web/src/features/multiview/pages/MultiviewPage/presenter.tsx b/service/vspo-schedule/v2/web/src/features/multiview/pages/MultiviewPage/presenter.tsx
@@ -23,6 +23,7 @@ import {
   styled,
   useMediaQuery,
   useTheme,
+  type Theme,
 } from "@mui/material";
 import { useTranslation } from "next-i18next";
 import React from "react";
@@ -36,6 +37,11 @@ import {
 } from "../../components/containers";
 import { LayoutType, useMultiviewLayout } from "../../hooks/useMultiviewLayout";
 
+const scaledBorderRadius = (theme: Theme, scale: number) =>
+  typeof theme.shape.borderRadius === "number"
+    ? theme.shape.borderRadius * scale
+    : `calc(${theme.shape.borderRadius} * ${scale})`;
+
 // Styled components
 const HeaderSection = styled(Paper)(({ theme }) => ({
   padding: theme.spacing(2),
@@ -87,7 +93,7 @@ const ControlsPanel = styled(Paper)<{ collapsed?: boolean }>(
     backgroundColor: "rgba(255, 255, 255, 0.95)",
     backdropFilter: "blur(10px)",
     boxShadow: theme.shadows[8],
-    borderRadius: theme.shape.borderRadius * 2,
+    borderRadius: scaledBorderRadius(theme, 2),
     border: `1px solid ${theme.palette.grey[300]}`,
     zIndex: 1100,
     transition: theme.transitions.create(["right", "opacity"], {
diff --git a/service/vspo-schedule/v2/web/src/features/schedule/pages/ScheduleStatus/components/LivestreamContent/presenter.tsx b/service/vspo-schedule/v2/web/src/features/schedule/pages/ScheduleStatus/components/LivestreamContent/presenter.tsx
@@ -82,6 +82,11 @@ export const LivestreamContentPresenter: React.FC<LivestreamContentProps> = ({
     livestreamsByDate,
     timeZone,
   );
+  const hasLivestreams = Object.keys(livestreamsByTimeBlock).length > 0;
+  const selectedDate =
+    typeof router.query.date === "string"
+      ? router.query.date
+      : format(utcToZonedTime(new Date(), timeZone), "yyyy-MM-dd");
 
   const navigateToDate = (date: string, daysToAdd: number) => {
     const currentDate = new Date(date);
@@ -101,6 +106,47 @@ export const LivestreamContentPresenter: React.FC<LivestreamContentProps> = ({
     );
   };
 
+  if (!hasLivestreams) {
+    return (
+      <ContentSection>
+        <DateHeader>
+          <Typography
+            variant="h5"
+            sx={(theme) => ({
+              fontWeight: 600,
+              color: theme.vars.palette.text.primary,
+            })}
+          >
+            {formatDate(selectedDate, "MM/dd (EEE)", { timeZone })}
+          </Typography>
+          <DateNavigation>
+            <NavButton
+              size="small"
+              variant="outlined"
+              onClick={() => navigateToDate(selectedDate, -1)}
+              startIcon={<ChevronLeftIcon fontSize="small" />}
+            >
+              {t("navigation.previousDay")}
+            </NavButton>
+            <NavButton
+              size="small"
+              variant="outlined"
+              onClick={() => navigateToDate(selectedDate, 1)}
+              endIcon={<ChevronRightIcon fontSize="small" />}
+            >
+              {t("navigation.nextDay")}
+            </NavButton>
+          </DateNavigation>
+        </DateHeader>
+        <Box sx={{ px: 2, py: 1 }}>
+          <Typography variant="body1" color="text.secondary">
+            {t("noLivestreams")}
+          </Typography>
+        </Box>
+      </ContentSection>
+    );
+  }
+
   return (
     <Box>
       {Object.entries(livestreamsByTimeBlock).map(([date, timeBlocks]) => (
diff --git a/service/vspo-schedule/v2/web/src/features/schedule/pages/ScheduleStatus/utils/index.ts b/service/vspo-schedule/v2/web/src/features/schedule/pages/ScheduleStatus/utils/index.ts
@@ -26,6 +26,10 @@ export const groupLivestreamsByTimeBlock = (
 
     // Sort livestreams into time blocks using the user's timezone
     for (const livestream of livestreams) {
+      if (!livestream.scheduledStartTime) {
+        continue;
+      }
+
       // Convert UTC time to user's timezone
       const startTimeInUserTZ = utcToZonedTime(
         livestream.scheduledStartTime,
diff --git a/service/vspo-schedule/v2/web/src/features/shared/api/livestream.ts b/service/vspo-schedule/v2/web/src/features/shared/api/livestream.ts
@@ -39,7 +39,13 @@ const transformLivestreamsToDomain = (
   if (!apiLivestreams) {
     return [];
   }
-  return apiLivestreams.map((stream) => {
+
+  const streamsWithStartTime = apiLivestreams.filter(
+    (stream): stream is ListStreams200StreamsItem & { startedAt: string } =>
+      Boolean(stream.startedAt),
+  );
+
+  return streamsWithStartTime.map((stream) => {
     const livestream = {
       id: stream.rawId,
       type: "livestream",
@@ -49,7 +55,7 @@ const transformLivestreamsToDomain = (
       thumbnailUrl: stream.thumbnailURL,
       viewCount: stream.viewCount,
       status: stream.status,
-      scheduledStartTime: stream.startedAt || "",
+      scheduledStartTime: stream.startedAt,
       scheduledEndTime: stream.endedAt,
       channelId: stream.rawChannelID,
       channelTitle: stream.creatorName || "",
diff --git a/service/vspo-schedule/v2/web/src/lib/i18n/cf-assets.ts b/service/vspo-schedule/v2/web/src/lib/i18n/cf-assets.ts
@@ -25,7 +25,7 @@ interface CloudflareContextEnv {
 
 export class CloudflareAssetsBackend implements BackendModule {
   type = "backend" as const;
-  private services: Services | undefined;
+  private services?: Services;
   private options: BackendOptions = {
     loadPath: "/locales/{{lng}}/{{ns}}.json",
   };
