placeholder card optimizations

packages/react/src/components/player/PlayerDescription.tsx

@@ -14,7 +14,7 @@ export function PlayerDescription({
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   return (
-    <div className="align-start flex flex-col gap-2 rounded-lg bg-base-3 p-4">
+    <div className="flex flex-col gap-2 rounded-lg bg-base-3 p-4">
       <div
         className={cn("whitespace-pre-wrap break-all text-sm", {
           "line-clamp-3": !isExpanded,

packages/react/src/components/video/VideoCard.tsx

@@ -302,6 +302,7 @@ function VideoCardDuration({
   link,
   placeholderType,
   className,
+  certainty,
 }: Pick<
   VideoCardType,
   | "type"
@@ -310,6 +311,7 @@ function VideoCardDuration({
   | "start_actual"
   | "end_actual"
   | "link"
+  | "certainty"
   | "placeholderType"
 > & { className?: string }) {
   const { t } = useTranslation();
@@ -326,6 +328,30 @@ function VideoCardDuration({
     start_actual,
   });
 
+  // generate the icon to use:
+  let placeholderIcon;
+  if (placeholderType === "external-stream") {
+    if (link?.includes("twitch.tv")) {
+      placeholderIcon = "i-tabler:brand-twitch";
+    } else if (link?.includes("twitcasting.tv") || link?.includes("x.com")) {
+      placeholderIcon = "i-tabler:brand-twitter";
+    } else if (link?.includes("bilibili")) {
+      placeholderIcon = "i-tabler:brand-bilibili";
+    } else if (link?.includes("nicovideo")) {
+      placeholderIcon = "i-simple-icons:niconico";
+    } else {
+      placeholderIcon = "i-tabler:cast";
+    }
+  } else {
+    if (placeholderType === "scheduled-yt-stream" && certainty === "likely") {
+      placeholderIcon = "i-tabler:clock-question";
+    } else if (placeholderType === "event" && certainty === "likely") {
+      placeholderIcon = "i-tabler:calendar-question";
+    } else {
+      placeholderIcon = "i-tabler:calendar-event";
+    }
+  }
+
   return durationMs ?? status === "upcoming" ? (
     <span
       className={cn(
@@ -334,14 +360,14 @@ function VideoCardDuration({
         className,
       )}
     >
-      {placeholderType &&
-        (link?.includes("twitch") ? (
-          <div className="i-lucide:twitch" />
-        ) : placeholderType === "external-stream" ? (
-          <div className="i-lucide:radio m-1 text-lg" />
-        ) : (
-          <div className="i-lucide:youtube m-1 text-lg" />
-        ))}
+      {placeholderType && (
+        <div
+          className={
+            placeholderIcon +
+            (durationMs ? " text-base-11" : " my-1 text-lg text-base-9")
+          }
+        />
+      )}
       {isPremiere
         ? t("component.videoCard.premiere")
         : durationMs && formatDuration(durationMs)}

packages/react/src/components/video/VideoCardCountdownToLive.tsx

@@ -39,6 +39,11 @@ export function VideoCardCountdownToLive({
 
   const renderTooltipContent = (timestamp: Parameters<typeof dayjs>[0]) => (
     <div className="grid grid-cols-2 gap-x-4">
+      {video.certainty === "likely" && (
+        <span className="col-span-2 mb-2 max-w-56 text-yellow-10">
+          {t("component.videoCard.uncertainPlaceholder")}
+        </span>
+      )}
       <div className="space-y-1">
         {formatTimeForTimezones(timestamp).map(({ timezone }) => (
           <div key={timezone} className="text-right font-semibold">
@@ -77,7 +82,12 @@ export function VideoCardCountdownToLive({
     video.start_scheduled
   ) {
     const countdownText = t("time.diff_future_date", {
-      0: dayjs(video.start_scheduled).fromNow(false),
+      0: (
+        <span className={video.certainty === "likely" ? "italic" : ""}>
+          {dayjs(video.start_scheduled).fromNow(false) +
+            (video.certainty === "likely" ? "?" : "")}
+        </span>
+      ),
       1: dayjs(video.start_scheduled).format("hh:mm A"),
     });
 

packages/react/src/lib/time.ts

@@ -15,9 +15,9 @@ export function formatDuration(millisecs: number) {
   r = r % 60;
   t[2] = Math.floor(r);
 
-  return `${
-    (seconds < 0 ? "-" : "") + String(t[0]).padStart(2, "0")
-  }:${String(t[1]).padStart(2, "0")}:${String(t[2]).padStart(2, "0")}`;
+  return `${seconds < 0 ? "-" : ""}${
+    t[0] > 0 ? String(t[0]).padStart(2, "0") + ":" : ""
+  }${String(t[1]).padStart(2, "0")}:${String(t[2]).padStart(2, "0")}`;
 }
 
 const numberFormatAdjust: Record<string, string> = {

packages/react/src/locales/de-DE/seo.yml

@@ -1,7 +1,5 @@
----
-hello: world
 music:
-  title: '{{english_name}} Original- und Cover-Songs - Holodex'
+  title: '{{english_name}} Original- und Cover-Lieder - Holodex'
   description: >-
     Hör dir offizielle Musik und Karaoke-Streams an, die von unserer Community im Holodex Musik-Player getaggt wurden.
 channel:

packages/react/src/locales/de-DE/ui.yml

@@ -1,4 +1,3 @@
----
 component:
   apiError:
     title: Gomenasorry!
@@ -10,13 +9,16 @@ component:
     signInToFavorite: Log dich ein um zu favorisieren
     unfavoriteAllInGroup: Alle in Gruppe entfavorisieren
     favoriteAllInGroup: Alle in Gruppe favorisieren
+    enableGroupDisplay: Kanäle dieser Gruppe auf der Startseite anzeigen
+    disableGroupDisplay: Kanäle dieser Gruppe von Startseite ausblenden
   channelInfo:
     stats: Statistik
     videoCount: '{0} Videos'
     clipCount: '{n} Clips'
     subscriberCount: '{n} Abonnenten'
     subscriberNA: Abonnentenzahl nicht verfügbar
     totalViews: Aufrufe insgesamt
+    inactiveChannel: Dieser Kanal ist nicht mehr aktiv.
   channelSocials:
     addToFavorites: Zu Favoriten hinzufügen
     removeFromFavorites: Aus Favoriten entfernen
@@ -48,17 +50,18 @@ component:
     premiere: PREMIERE
     googleCalendar: Zu Google Kalender hinzufügen
     totalTLs: Anzahl an Übersetzungen im Live-Chat
+    totalSongs: Songs mit Zeitstempeln
     tlPresence: Aktiver Übersetzer in den letzten 30 Minuten
+    uncertainPlaceholder: Diese Startzeit ist nicht offiziell bestätigt, die tatsächliche Startzeit kann variieren.
     typeScheduledYT: Geplanter Stream
     typeExternalStream: Externer Stream
     typeEventPlaceholder: Geplantes Event
     openClient: TL-Client öffnen
     openScriptEditor: Skript-Editor öffnen
+    popoutChat: YouTube-Chat rauslösen
     uploadScript: TL-Skript hochladen
   videoDescription:
     description: Beschreibung
-  video:
-    comment: { }
   description:
     showLess: Weniger anzeigen
     showMore: Mehr anzeigen
@@ -75,6 +78,8 @@ component:
       topic: Thema
       org: Organisation
       titledesc: Titel/Beschreibung
+      title: titel
+      description: beschreibung
       comments: Kommentare
       videourl: Video-URL
   relatedVideo:
@@ -123,11 +128,15 @@ component:
       Dieser Kanal kollaboriert möglicherweise mit einem {org} Mitglied oder mit deinen Favoriten. Du kannst diese Funktion in den Einstellungen deaktivieren
     comments: Welche Maßnahmen sollte Holodex ergreifen?
     success: Bericht gesendet, vielen Dank!
+    consider: Möglicherweise ist es besser, diese Meldung zu verwerfen und stattdessen den Filter zu verwenden.
     reasons:
       - Video falsch getaggt
       - Gefährlich niedrige Qualität/irreführende Inhalte
       - Verstößt gegen das Urheberrecht der Organisation oder ist unangemessen
       - Sonstiges
+      - Falsches Videothema
+      - Falsche/r Kanal/Kanäle aufgeführt
+      - Diese/s/r {0} gehört nicht zu {1}
   thirdpartycookie:
     explanation: >-
       Aufgrund der Funktionsweise deines Internetbrowsers, einiger Browser mit strengen Richtlinien für <b>Cookies von Dritten</b>, oder weil du <kbd>youtube.com</kbd> Cookies blockierst, können Schwierigkeiten beim Anmelden in / Verwenden des Youtube-Chats auftreten. <br /><br /> Dies kannst du durch Whitelisting von <kbd>youtube.com</kbd> in Blockierern von Cookies von Dritten, oder durch das Senken deiner Sicherheits-/Privatsphäreeinstellungen für <kbd>holodex.net</kbd> beheben. <br /><br /> Die hier aufgeführten Webseiten können dir zeigen, wie man das macht.
@@ -214,6 +223,7 @@ views:
     sort:
       newest: Neuestes
       oldest: Ältestes
+      longest: Länge (fallend)
     type:
       all: Alle
       official: Offiziell
@@ -259,6 +269,7 @@ views:
     hideCollabStreamsLabel: Collab-Streams ausblenden
     hideCollabStreamsMsg: Collab-Streams in deinem Favoriten-Feed ausblenden
     hidePlaceholderStreams: Platzhalter-Streams ausblenden
+    hideMissingStreams: Fehlende Streams ausblenden
     ignoredTopicsLabel: Ignorierte Themen
     ignoredTopicsMsg: Videos mit diesen Themen von der Startseite und deinen Favoriten ausblenden
     theme: Design
@@ -268,8 +279,9 @@ views:
     update_btn: Update
     close_btn: Schließen
     check_about_page: Besuche die Info-Seite um neue Änderungen zu sehen
-    nowSupportsMultiOrg: Holodex unterstützt jetzt mehrere Organisationen.
-    loginCallToAction: Melde dich an, um deine eigenen Favoriten zu sammeln!
+    nowSupportsMultiOrg: >-
+      Tipp: Hier kannst du die Organisation ändern!
+    loginCallToAction: Melde dich an, um deine eigenen Favoriten festzulegen.
   about:
     add_my_channel: Kanalanfrage
   watch:
@@ -350,6 +362,10 @@ views:
       - Mit Google anmelden
       - Mit Discord anmelden
       - Mit Twitter anmelden
+    twitterMsg:
+      - Aufgrund von Änderungen an den Twitter-API-Richtlinien funktioniert die Twitter-Anmeldung nach dem 9. Februar wahrscheinlich nicht mehr.
+      - Du verwendest derzeit nur die Twitter-Anmeldung. Wir empfehlen dringend, jetzt eine andere Anmeldemethode zu verknüpfen, um zu verhindern, dass du dich künftig aussperrst. (Auf einem neuen Gerät oder nachdem du deinen Browserverlauf löschst).
+      - Wenn du Probleme bei der Twitter-Anmeldung hast (und noch keine andere Login-Methode verknüpft hast), dann bitte uns in unseren Twitter-DMs oder auf Discord um Hilfe.
     username: Benutzername
     usernameBtn:
       - Ändern
@@ -540,7 +556,7 @@ about:
     videoLinkage: Wie stelle ich sicher, dass Videos richtig mit VTubern verlinkt werden?
     videoLinkageContent: >-
       Alle Informationen werden automatisch aus der Videobeschreibung ausgelesen. Wenn du einen Stream clippst, stelle bitte sicher, dass du den offiziellen Stream verlinkst. Wenn du von Fans erstellte Inhalte (z. B. von Bilibili) clippst, dann verlinke bitte auch die offiziellen YouTube-Kanäle der entsprechenden VTuber. Wenn du keine VTuber-Kanäle verlinkst, werden wir den Clip nicht auf Holodex anzeigen, da alle Clips eine Verlinkung zu einem VTuber benötigen, welcher Holodex bekannt ist.
-    quitHolodex: "Ich bin ein Clipper und möchte, dass mein Kanal von Holodex entfernt wird\\r\n"
+    quitHolodex: "Ich bin ein Clipper und möchte, dass mein Kanal von Holodex entfernt wird\r\n"
     quitHolodexContent: >-
       Traurig, dich gehen zu sehen :(, bitte lass es uns wissen, wenn es ein Problem gibt, bei dem wir dir helfen können. Wenn du dich trotzdem entfernen lassen möchtest, schicke uns bitte eine Nachricht auf Discord.
     favorite:
@@ -590,6 +606,7 @@ about:
       contents:
         '0': >-
           Unser selbst-gehosteter Server ist eine 28-Kern Maschine mit 60GB RAM, für welche Instandhaltungskosten von circa $60 USD pro Monat anfallen. Da wir mehr und mehr Features hinzufügen, haben wir ein <a href="https://ko-fi.com/holodex">Ko-fi</a> angelegt, um die Serverkosten zu decken. (<a href="https://www.patreon.com/holodex">Patreon</a> haben wir auch, aber Ko-fi gefällt uns besser.)<br /><br />Du kannst uns außerdem mit Feedback und Tweets unterstützen, uns mit der Übersetzung der Webseite via <a href="https://crwd.in/holodex">Crowdin</a> helfen, oder zu unserem Lied-Datenspeicher beitragen. Selbst das Kommentieren von Zeitstempeln lustiger Momente in den Stream-Kommentaren ist schon sehr hilfreich!
+  privacyPolicy: Datenschutzrichtlinien
   gdpr: DSGVO und meine Daten
   gdprContent: >-
     Ein Google-Analytics-Cookie wird verwendet, um Seitenaufrufe für unsere analytischen Zwecke zu verfolgen. Nach dem Anmelden verknüpfen wir deinen Benutzernamen und die ID deines Social Media Accounts mit deinen Favoriten. Diese Daten können deine E-Mail (für Google), deine Discord-ID oder dein Twitter-Handle beinhalten.
@@ -634,11 +651,8 @@ channelRequest:
   EnglishNameLabel: Englischer Kanalname
   Comments: Kommentare
   CommentsHint: Weitere Kommentare, die du uns mitteilen möchtest.
-  VtuberRequirementText: >-
-    Für Unabhängige sind mindestens 20K Abonnenten erforderlich. VTuber werden als Teil der bestehenden Orgs akzeptiert. <br /><br />Neue Orgs werden nach Abonnentenzahlen erstellt.
   ClipperRequirementText: >-
     Clipper-Kanäle müssen mindestens 2 Monate alt sein und regelmäßig bzw. mehr als 20 Clips in einem Monat hochladen. Das Spammen von kurzen täglichen Clips, das Hochladen ausschließlich kurzer &lt;1min Clips oder das Benutzen von unschmeichelhaften Thumbnails zählen alle gegen den Kanal. Auch die Qualität der Inhalte kann beurteilt werden. <br /><br />Es ist wichtig zu beachten, dass Clipper ihre Quellen über Kanallinks, @YouTube-Kanalerwähnungen und Video-Links angeben sollten. Überzitierung (z.B. alle Nijisanji-Mitglieder verlinken) schafft Arbeit für Holodex-Editoren, und Unterzitieren (keine Links) versteckt Clips. <br /><br /> Holodex nutzt Algorithmen, um Überzitierungen zu erkennen und automatisch zu korrigieren, aber diese funktionieren möglicherweise nicht immer perfekt. Clipper, die häufig überzitieren, können dafür von der Plattform entfernt werden.
   DeletionRequirementText: >-
     Löschung sollte nur angefragt werden, wenn du/ihr der/die Kanalbesitzer bist/seid. Bitte gib Kontaktinformationen an, damit wir dies überprüfen können.
   PageTitle: Holodex Kanalanfrage
-  ChannelURLErrorFeedback: Muss https://www.youtube.com/channel/UC_____ sein

packages/react/src/locales/en/seo.yml

@@ -1,4 +1,4 @@
-hello: world
+hello: bump
 music:
   title: '{{english_name}} Original and Cover Songs - Holodex'
   description: >-