chore: prepare Frontend 1.9.0

.github/workflows/docker.yml

@@ -28,6 +28,7 @@ jobs:
       image: ${{ steps.info.outputs.image }}
       labels: ${{ steps.meta.outputs.labels }}
       metadata-json: ${{ steps.meta.outputs.json }}
+      platform-matrix: ${{ steps.info.outputs.platform-matrix }}
       version: ${{ steps.info.outputs.version }}
     steps:
       - uses: actions/checkout@v7.0.1
@@ -55,6 +56,12 @@ jobs:
             echo "image=$image"
             echo "version=$version"
           } >> "$GITHUB_OUTPUT"
+          if [[ "$GITHUB_REF_NAME" == "dev" ]]; then
+            platform_matrix='{"include":[{"platform":"linux/amd64","arch":"amd64"}]}'
+          else
+            platform_matrix='{"include":[{"platform":"linux/amd64","arch":"amd64"},{"platform":"linux/arm64","arch":"arm64"}]}'
+          fi
+          echo "platform-matrix=$platform_matrix" >> "$GITHUB_OUTPUT"
 
       - name: Extract image metadata
         id: meta
@@ -77,12 +84,7 @@ jobs:
       packages: write
     strategy:
       fail-fast: false
-      matrix:
-        include:
-          - platform: linux/amd64
-            arch: amd64
-          - platform: linux/arm64
-            arch: arm64
+      matrix: ${{ fromJSON(needs.prepare.outputs.platform-matrix) }}
     steps:
       - uses: actions/checkout@v7.0.1
 
@@ -174,8 +176,10 @@ jobs:
           METADATA_JSON: ${{ needs.prepare.outputs.metadata-json }}
         run: |
           mapfile -t digests < <(find "$DIGEST_DIR" -maxdepth 1 -type f -printf '%f\n' | sort)
-          if [[ "${#digests[@]}" -ne 2 ]]; then
-            echo "Expected two platform digests, found ${#digests[@]}"
+          expected_digests=2
+          if [[ "$GITHUB_REF_NAME" == "dev" ]]; then expected_digests=1; fi
+          if [[ "${#digests[@]}" -ne "$expected_digests" ]]; then
+            echo "Expected $expected_digests platform digests, found ${#digests[@]}"
             exit 1
           fi
           mapfile -t tags < <(jq -r '.tags[]' <<< "$METADATA_JSON")

README.md

@@ -4,6 +4,8 @@
   <p>The React web client for TypeType.</p>
 </div>
 
+You want to know the current position of TypeType about AI ? Go check [this](https://github.com/TypeType-Video/TypeType/blob/dev/AI_TRANSPARENCY.md).
+
 [![Translation status](https://translate.typetype.video/widgets/typetype/-/svg-badge.svg)](https://translate.typetype.video/engage/typetype/)
 
 This repository contains the browser application and its nginx container. It owns the user interface, routing, settings, account flows, library views, and integration with the TypeType API and playback package.

apps/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@typetype/web",
   "private": true,
-  "version": "1.8.1",
+  "version": "1.9.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -14,13 +14,15 @@
   "dependencies": {
     "@tanstack/react-query": "^5.102.8",
     "@tanstack/react-router": "^1.170.33",
-    "@typetype/mse": "0.1.60",
+    "@typetype/mse": "0.1.70",
     "@vidstack/react": "1.12.13",
     "@zip.js/zip.js": "^2.13.1",
     "dashjs": "^5.2.1",
     "hls.js": "1.7.2",
     "lucide-react": "^1.43.0",
     "media-icons": "1.1.5",
+    "mpegts.js": "1.8.2",
+    "qrcode.react": "4.2.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "simple-icons": "^16.30.0",

apps/web/src/components/bilibili-icon.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+import { siBilibili } from "simple-icons";
+
+type Props = SVGProps<SVGSVGElement> & {
+  title?: string;
+};
+
+export function BiliBiliIcon({ title, ...props }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      role={title ? "img" : undefined}
+      aria-hidden={title ? undefined : true}
+      aria-label={title}
+      {...props}
+    >
+      <path d={siBilibili.path} />
+    </svg>
+  );
+}

apps/web/src/components/bilibili-session-banner.tsx

@@ -0,0 +1,25 @@
+import { useQuery } from "@tanstack/react-query";
+import { useAuth } from "../hooks/use-auth";
+import { fetchBiliBiliSessionStatus } from "../lib/api-bilibili-session";
+import { m } from "../paraglide/messages.js";
+
+export function BiliBiliSessionBanner({ sourceUrl }: { sourceUrl: string }) {
+  const { authReady, isAuthed } = useAuth();
+  const isBiliBili = sourceUrl.includes("bilibili.com") || sourceUrl.includes("b23.tv");
+  const shouldQuery = authReady && isAuthed && isBiliBili;
+  const { data: status } = useQuery({
+    queryKey: ["bilibili-session"],
+    queryFn: fetchBiliBiliSessionStatus,
+    enabled: shouldQuery,
+    staleTime: 5 * 60 * 1000,
+  });
+  if (!shouldQuery || !status || status.status === "connected") return null;
+  return (
+    <div className="mb-3 flex items-center gap-2 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-200">
+      <span>{m.ui_bilibili_session_not_connected()}</span>
+      <a href="/bilibili-session" className="font-medium underline">
+        {m.ui_bilibili_session_connect()}
+      </a>
+    </div>
+  );
+}

apps/web/src/components/channel-avatar.tsx

@@ -1,9 +1,13 @@
-import { useState } from "react";
+import { UserRound } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Skeleton } from "./skeleton";
 
 type Props = {
   src: string;
   name: string;
   className?: string;
+  pending?: boolean;
+  priority?: boolean;
 };
 
 function getInitial(name: string): string {
@@ -20,31 +24,74 @@ function getInitial(name: string): string {
   return name[0].toUpperCase();
 }
 
-export function ChannelAvatar({ src, name, className = "w-8 h-8" }: Props) {
+export function ChannelAvatar({ src, name, className = "w-8 h-8", pending, priority }: Props) {
   const [failedSrc, setFailedSrc] = useState<string | null>(null);
+  const [loadedSrc, setLoadedSrc] = useState<string | null>(null);
+  const [missingExpired, setMissingExpired] = useState(false);
+  const [retryState, setRetryState] = useState({ src, count: 0 });
+  const hasSource = src.trim().length > 0;
   const failed = failedSrc === src;
-
-  if (!src || failed) {
-    return (
-      <div
-        className={`${className} flex flex-shrink-0 select-none items-center justify-center rounded-full border border-border bg-gradient-to-br from-surface-strong to-surface-soft font-semibold text-fg-muted`}
-        title={name}
-      >
-        <span className="text-base leading-none">{getInitial(name)}</span>
-      </div>
-    );
-  }
+  const loaded = loadedSrc === src;
+  const retryCount = retryState.src === src ? retryState.count : 0;
+  useEffect(() => {
+    if (hasSource || pending === false) {
+      setMissingExpired(false);
+      return;
+    }
+    if (pending === true) return;
+    setMissingExpired(false);
+    const timer = window.setTimeout(() => setMissingExpired(true), MISSING_AVATAR_GRACE_MS);
+    return () => window.clearTimeout(timer);
+  }, [hasSource, pending]);
+  const missing =
+    !hasSource && !failed && (pending === true || (pending === undefined && !missingExpired));
+  const loading = missing || (hasSource && !failed && !loaded);
+  const state = loading ? "loading" : hasSource && !failed ? "ready" : "fallback";
 
   return (
-    <img
-      src={src}
-      alt=""
-      aria-hidden="true"
-      className={`${className} flex-shrink-0 rounded-full object-cover`}
-      loading="lazy"
-      decoding="async"
-      onError={() => setFailedSrc(src)}
+    <div
+      className={`${className} relative flex flex-shrink-0 select-none items-center justify-center overflow-hidden rounded-full border border-border bg-gradient-to-br from-surface-strong to-surface-soft font-semibold text-fg-muted`}
       title={name}
-    />
+      data-avatar-state={state}
+      aria-busy={loading}
+    >
+      {loading && <Skeleton className="absolute inset-0 rounded-full" data-avatar-skeleton />}
+      {!loading &&
+        (name.trim() ? (
+          <span className="text-base leading-none">{getInitial(name)}</span>
+        ) : (
+          <UserRound className="h-1/2 w-1/2" aria-hidden="true" />
+        ))}
+      {hasSource && !failed && (
+        <img
+          key={retryCount}
+          src={avatarRetrySrc(src, retryCount)}
+          alt=""
+          aria-hidden="true"
+          className="absolute inset-0 h-full w-full object-cover"
+          loading={priority ? "eager" : "lazy"}
+          fetchPriority={priority ? "high" : "auto"}
+          decoding="async"
+          onLoad={() => setLoadedSrc(src)}
+          onError={() => {
+            if (retryCount < MAX_AVATAR_RETRIES) {
+              setRetryState({ src, count: retryCount + 1 });
+              return;
+            }
+            setFailedSrc(src);
+          }}
+        />
+      )}
+    </div>
   );
 }
+
+function avatarRetrySrc(src: string, retryCount: number): string {
+  if (retryCount === 0) return src;
+  const url = new URL(src, window.location.href);
+  url.searchParams.set("_tt_avatar_retry", String(retryCount));
+  return url.toString();
+}
+
+const MAX_AVATAR_RETRIES = 2;
+const MISSING_AVATAR_GRACE_MS = 1_500;

apps/web/src/components/channel-filter-bar.tsx

@@ -17,6 +17,7 @@ type Props = {
   sort: ChannelSort;
   query: string;
   tab: ChannelTab;
+  tabsAvailable: boolean;
   searchAvailable: boolean;
   onSearch: (query: string) => void;
   onTabChange: (tab: ChannelTab) => void;
@@ -27,6 +28,7 @@ export function ChannelFilterBar({
   sort,
   query,
   tab,
+  tabsAvailable,
   searchAvailable,
   onSearch,
   onTabChange,
@@ -53,7 +55,7 @@ export function ChannelFilterBar({
   return (
     <section className="border-y border-border py-3">
       <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-        {searchAvailable && (
+        {tabsAvailable && (
           <div className="flex max-w-full flex-wrap items-center gap-2 text-sm">
             {channelTabs().map((item) => (
               <button

apps/web/src/components/channel-page-content.tsx

@@ -47,7 +47,9 @@ export function ChannelPageContent({ sourceUrl, sort, searchQuery, tab, onNaviga
   useDocumentTitle(meta?.name);
 
   const subscribed = isSubscribed(sourceUrl);
-  const searchAvailable = detectProvider(sourceUrl) === "youtube";
+  const provider = detectProvider(sourceUrl);
+  const searchAvailable = provider === "youtube";
+  const tabsAvailable = provider === "youtube" || provider === "nicovideo";
   const visibleVideos = useMemo(() => filter(videos), [filter, videos]);
   const progressByUrl = useVideoProgressMap(visibleVideos);
   const isInitialLoading = isLoading && !meta;
@@ -128,6 +130,7 @@ export function ChannelPageContent({ sourceUrl, sort, searchQuery, tab, onNaviga
         sort={sort}
         query={searchQuery}
         tab={tab}
+        tabsAvailable={tabsAvailable}
         searchAvailable={searchAvailable}
         onSearch={searchChannel}
         onTabChange={selectTab}

apps/web/src/components/channel-route-link.tsx

@@ -4,7 +4,7 @@ import type { ChannelSort } from "../lib/api-discovery";
 import {
   channelLegacySearch,
   channelPathSearch,
-  toChannelPathParam,
+  toCanonicalChannelRoute,
 } from "../lib/channel-route-url";
 
 type Props = {
@@ -16,13 +16,13 @@ type Props = {
 };
 
 export function ChannelRouteLink({ url, children, className, sort = "latest", query = "" }: Props) {
-  const channelId = toChannelPathParam(url);
+  const canonicalRoute = toCanonicalChannelRoute(url);
 
-  if (channelId) {
+  if (canonicalRoute) {
     return (
       <Link
-        to="/channel/$channelId"
-        params={{ channelId }}
+        to="/channel/$provider/$channelId"
+        params={{ provider: canonicalRoute.provider, channelId: canonicalRoute.id }}
         search={channelPathSearch(sort, query)}
         className={className}
       >

apps/web/src/components/continue-watching.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { useAuth } from "../hooks/use-auth";
 import { useBlockedFilter } from "../hooks/use-blocked-filter";
 import { useHistory } from "../hooks/use-history";
 import { isVideoInProgress } from "../lib/watch-progress";
@@ -9,6 +10,7 @@ const MAX_ITEMS = 12;
 
 export function ContinueWatching() {
   const { items } = useHistory();
+  const { isAuthed } = useAuth();
   const { filter } = useBlockedFilter();
   const displayed = useMemo(
     () =>
@@ -18,7 +20,7 @@ export function ContinueWatching() {
         .slice(0, MAX_ITEMS),
     [filter, items],
   );
-  if (displayed.length === 0) return null;
+  if (!isAuthed || displayed.length === 0) return null;
 
   return (
     <section className="mt-2 flex flex-col gap-3 sm:mt-3">

apps/web/src/components/navbar-notifications.tsx

@@ -6,6 +6,12 @@ const NotificationsDropdown = lazy(() =>
   })),
 );
 
+const PortabilityProgressHost = lazy(() =>
+  import("./portability-progress-host").then((module) => ({
+    default: module.PortabilityProgressHost,
+  })),
+);
+
 const NotificationToastHost = lazy(() =>
   import("./notification-toast-host").then((module) => ({
     default: module.NotificationToastHost,
@@ -21,6 +27,9 @@ export function NavbarNotifications() {
       <Suspense fallback={null}>
         <NotificationToastHost />
       </Suspense>
+      <Suspense fallback={null}>
+        <PortabilityProgressHost />
+      </Suspense>
     </>
   );
 }