Add live label, closes #4

src/components/CourseListing.tsx

@@ -16,6 +16,8 @@ import type { GetCourseResponse, lecture } from "@/api/api_v1_types";
 import { ResourceType } from "@/misc/PromiseHelpers";
 import { AuthenticationMethodIcons } from "@/misc/Util";
 import { useLanguage } from "./LanguageProvider";
+import { DateTime } from "luxon";
+import LiveLabel, { LectureLiveLabel } from "./LiveLabel";
 
 function ListingHeader({ course }: { course: GetCourseResponse }) {
     const { editMode } = useEditMode();
@@ -278,11 +280,8 @@ export function LectureListItem({
                             field_id="title"
                             field_type="string"
                             initialValue={lecture.title}
-                        />
-                        {/*{livelabel((lecture.live and lecture.time > datetime.now()-timedelta(days=1)), videos|selectattr("livehandle")|list|length)}*/}
-                        {/*% if lecture.chapter_count|d(0) > 0 and ismod() %}
-					<span className="label label-info" data-toggle="tooltip" title="Nicht freigegebene Kapitel">{{ lecture.chapter_count }}</span>
-	{% endif %*/}
+                        />{" "}
+                        <LectureLiveLabel lecture={lecture} />
                     </li>
                 </ul>
                 <ul className="list-unstyled col-sm-3 col-12">

src/components/LiveLabel.tsx

+import { lecture } from "@/api/api_v1_types";
+import { DateTime } from "luxon";
+
+export function LiveLabel({ nowlive }: { nowlive: boolean }) {
+    return (
+        <span className={`badge ${nowlive ? "text-bg-danger" : "text-bg-primary"}`}>
+            {nowlive ? "Live" : "Livestream planned"}
+        </span>
+    );
+}
+
+export function LectureLiveLabel({ lecture }: { lecture: lecture }) {
+    if (!lecture.livestream_planned) return null;
+    if (DateTime.fromISO(lecture.time) < DateTime.now().minus({ days: 1 })) return null;
+    return <LiveLabel nowlive={typeof lecture.livestream_url === "string"} />;
+}

src/components/VideoCard.tsx

@@ -5,6 +5,7 @@ import type { lecture, course } from "@/api/api_v1_types";
 import { StylizedText } from "@/components/StylizedText";
 import { urlForLecture } from "@/misc/Util";
 import { useLanguage } from "./LanguageProvider";
+import LiveLabel, { LectureLiveLabel } from "./LiveLabel";
 
 export function VideoCard({
     lecture,
@@ -45,7 +46,7 @@ export function VideoCard({
                     <div className="col-4">
                         <span>
                             <strong>{course.short_name}</strong>{" "}
-                            {/*{livelabel(0, lecture.livehandle)}*/}
+                            <LectureLiveLabel lecture={lecture} />
                         </span>{" "}
                         <br />
                         <br />
@@ -77,7 +78,7 @@ export function VideoCard({
                     </li>
                     <li>
                         <strong>{course.full_name}</strong>
-                        {/*{livelabel(0, lecture.livehandle)}*/}
+                        {typeof lecture.livestream_url === "string" && <LiveLabel nowlive={true} />}
                     </li>
                     <li>{dateStr}</li>
                     {lecture.speaker ? (

src/pages/index.tsx

@@ -20,6 +20,7 @@ import { useLanguage } from "@/components/LanguageProvider";
 import { useSearchParams } from "next/navigation";
 import { useRouter } from "next/router";
 import { VideoCard } from "@/components/VideoCard";
+import LiveLabel, { LectureLiveLabel } from "@/components/LiveLabel";
 
 function FeatureCard({ data, all_featured }: { data: featured; all_featured: featured[] }) {
     const { editMode } = useEditMode();
@@ -135,10 +136,6 @@ function FeaturedContent({ homepageData }: { homepageData: ResourceType<GetHomep
     ));
 }
 
-function LiveLabel({ nowlive }: { nowlive: boolean }) {
-    return <span className={`label ${nowlive ? "label-danger" : "label-default"}`}>Live</span>;
-}
-
 function UpcomingUploads({ homepageData }: { homepageData: ResourceType<GetHomepageResponse> }) {
     const data = homepageData.read()!;
     const { language } = useLanguage();
@@ -187,10 +184,8 @@ function UpcomingUploads({ homepageData }: { homepageData: ResourceType<GetHomep
                                 <a href={`/${course_data.id_string}#lecture-${lecture.id}`}>
                                     {lecture.title}
                                 </a>
-                                {` (${lecture.location}) `}
-                                {lecture.livestream_url ? (
-                                    <LiveLabel nowlive={lecture.livestream_url !== null} />
-                                ) : null}
+                                {lecture.location.length > 0 && ` (${lecture.location})`}{" "}
+                                <LectureLiveLabel lecture={lecture} />
                             </li>
                         </ul>
                     </li>