feat: prepare frontend 1.6.0

.github/workflows/ci.yml

@@ -35,6 +35,10 @@ jobs:
             exit 1
           fi
 
+          if [[ "$GITHUB_REF" == "refs/heads/dev" ]]; then
+            exit 0
+          fi
+
           tag="v$version"
           tag_sha="$(git ls-remote --tags origin "refs/tags/$tag" | cut -f1)"
           if [[ -z "$tag_sha" ]]; then

apps/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@typetype/web",
   "private": true,
-  "version": "1.5.1",
+  "version": "1.6.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,7 +13,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-router": "^1.170.17",
-    "@typetype/mse": "0.1.44",
+    "@typetype/mse": "0.1.49",
     "@vidstack/react": "1.12.13",
     "dashjs": "^5.2.0",
     "hls.js": "1.6.16",

apps/web/src/components/embed-error.tsx

@@ -15,6 +15,7 @@ type EmbedErrorProps = {
   image?: string;
   availability?: VideoAvailability;
   poster?: string;
+  watchUrl?: string;
 };
 
 export function EmbedError({
@@ -24,6 +25,7 @@ export function EmbedError({
   image,
   availability,
   poster,
+  watchUrl,
 }: EmbedErrorProps) {
   const availabilityCopy = availability ? videoAvailabilityCopy(availability, message) : null;
   const displayedMessage = availabilityCopy?.message ?? message;
@@ -84,6 +86,16 @@ export function EmbedError({
             Retry
           </button>
         )}
+        {watchUrl && (
+          <a
+            href={watchUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="px-5 py-2 rounded-full bg-white hover:bg-fg text-app text-sm font-medium transition-colors cursor-pointer"
+          >
+            Connect YouTube on TypeType
+          </a>
+        )}
       </div>
     </div>
   );

apps/web/src/components/format-selector.tsx

@@ -4,7 +4,7 @@ import { useDashPlayerSnapshot } from "../lib/dash-player-store";
 import { dashTrackGroups, maxTrackHeight, selectDashTrack } from "../lib/dash-video";
 import { activeFamily, type CodecFamily, codecFamily, groupByFamily } from "../lib/quality-utils";
 import {
-  maxSabrCodecHeight,
+  maxSabrCodecLabel,
   sabrCodecOptions,
   selectSabrCodec,
 } from "../lib/sabr-quality-selection";
@@ -60,7 +60,7 @@ export function FormatSelector() {
           <DefaultMenuRadioGroup
             value={selected.codec}
             options={codecs.map((codec) => ({
-              label: `${codec} ${maxSabrCodecHeight(sabrOptions, codec)}p`,
+              label: `${codec} ${maxSabrCodecLabel(sabrOptions, codec)}`,
               value: codec,
             }))}
             onChange={onSabrChange}

apps/web/src/components/media-progress-events.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
 import { recordClientEvent } from "../lib/client-debug-log";
-import { isSabrPlaybackEventTransient } from "../lib/sabr-vidstack-bridge";
+import { resolveMediaProgressPosition } from "../lib/media-progress-position";
+import { consumeSabrSeekTarget, isSabrPlaybackEventTransient } from "../lib/sabr-vidstack-bridge";
 import { useMediaPlayer } from "../lib/vidstack";
 
 type Props = {
@@ -58,7 +59,18 @@ export function MediaProgressEvents({
       const media = rootElement.querySelector<HTMLMediaElement>("video,audio");
       if (!media) return false;
 
-      const update = () => onTimeUpdateRef.current?.(toPositionMs(media));
+      const video = media instanceof HTMLVideoElement ? media : null;
+      const reportPosition = (requestedPositionMs: number | null = null) => {
+        const positionMs = resolveMediaProgressPosition(
+          video,
+          toPositionMs(media),
+          requestedPositionMs,
+        );
+        if (positionMs === null) return false;
+        onTimeUpdateRef.current?.(positionMs);
+        return true;
+      };
+      const update = () => reportPosition();
       const readPosition = () => toPositionMs(media);
       const suppressPlaybackEvent = () =>
         suppressPlaybackEventsRef.current ||
@@ -74,11 +86,12 @@ export function MediaProgressEvents({
         onPauseRef.current?.();
       };
       const seeked = () => {
-        update();
+        const requestedPositionMs = video ? consumeSabrSeekTarget(video) : null;
+        if (!reportPosition(requestedPositionMs)) return;
         onSeekedRef.current?.();
       };
       const seeking = () => {
-        update();
+        if (!update()) return;
         onSeekingRef.current?.(toPositionMs(media));
       };
       const ended = () => {

apps/web/src/components/media-session-sync.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from "react";
+import { requestSabrVidstackPlayback } from "../lib/sabr-vidstack-bridge";
 import { useMediaRemote, useMediaState } from "../lib/vidstack";
 import { MediaSessionPositionSync } from "./media-session-position-sync";
 
@@ -8,6 +9,7 @@ type Props = {
   artwork?: string;
   canSeek?: boolean;
   isLive?: boolean;
+  sabrVideo?: HTMLVideoElement | null;
   onPreviousTrack?: () => void;
   onNextTrack?: () => void;
 };
@@ -28,6 +30,7 @@ export function MediaSessionSync({
   artwork,
   canSeek = true,
   isLive = false,
+  sabrVideo = null,
   onPreviousTrack,
   onNextTrack,
 }: Props) {
@@ -55,11 +58,17 @@ export function MediaSessionSync({
   useEffect(() => {
     if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
     const session = navigator.mediaSession;
+    const setPlayback = (playing: boolean) => {
+      const request = sabrVideo
+        ? requestSabrVidstackPlayback(sabrVideo, playing, true)
+        : Promise.resolve(playing ? remote.play() : remote.pause());
+      void request.catch(() => {});
+    };
     safeSetActionHandler(session, "play", () => {
-      void Promise.resolve(remote.play()).catch(() => {});
+      setPlayback(true);
     });
     safeSetActionHandler(session, "pause", () => {
-      void Promise.resolve(remote.pause()).catch(() => {});
+      setPlayback(false);
     });
     if (canSeek) {
       safeSetActionHandler(session, "seekbackward", (details) => {
@@ -80,7 +89,7 @@ export function MediaSessionSync({
       });
     }
     safeSetActionHandler(session, "stop", () => {
-      void Promise.resolve(remote.pause()).catch(() => {});
+      setPlayback(false);
     });
     safeSetActionHandler(session, "previoustrack", isLive ? null : (onPreviousTrack ?? null));
     safeSetActionHandler(session, "nexttrack", isLive ? null : (onNextTrack ?? null));
@@ -94,7 +103,7 @@ export function MediaSessionSync({
       safeSetActionHandler(session, "previoustrack", null);
       safeSetActionHandler(session, "nexttrack", null);
     };
-  }, [canSeek, isLive, onPreviousTrack, onNextTrack, remote]);
+  }, [canSeek, isLive, onPreviousTrack, onNextTrack, remote, sabrVideo]);
 
   useEffect(() => {
     if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;

apps/web/src/components/notification-toast-host.tsx

@@ -4,13 +4,15 @@ import { useEffect, useRef, useState } from "react";
 import { useAuth } from "../hooks/use-auth";
 import { useBlockedFilter } from "../hooks/use-blocked-filter";
 import { NOTIFICATIONS_UNREAD_KEY } from "../hooks/use-notifications";
+import { useSettings } from "../hooks/use-settings";
 import { fetchNotifications } from "../lib/api-notifications";
 import {
   advanceNotificationToastCursor,
   createNotificationToastCursor,
   findNewNotificationItems,
   type NotificationToastCursor,
   parseNotificationToastCursor,
+  visibleNotificationToastItems,
 } from "../lib/notification-toast-cursor";
 import { watchRouteSearch } from "../lib/watch-url";
 import { useUiStore } from "../stores/ui-store";
@@ -42,7 +44,8 @@ export function NotificationToastHost() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { authReady, isAuthed, isGuest, me } = useAuth();
-  const { isBlocked, ready: blockedFilterReady } = useBlockedFilter();
+  const { isHidden, ready: visibilityFilterReady } = useBlockedFilter();
+  const { settings, settingsReady } = useSettings();
   const openNotificationCenter = useUiStore((state) => state.openNotificationCenter);
   const owner = me?.id ?? null;
   const enabled = authReady && isAuthed && !isGuest && owner !== null;
@@ -66,7 +69,7 @@ export function NotificationToastHost() {
   }, [owner]);
 
   useEffect(() => {
-    if (!enabled || !owner || !query.data || !blockedFilterReady) return;
+    if (!enabled || !owner || !query.data || !visibilityFilterReady || !settingsReady) return;
     queryClient.setQueryData(NOTIFICATIONS_UNREAD_KEY, {
       unreadCount: query.data.unreadCount,
     });
@@ -81,9 +84,23 @@ export function NotificationToastHost() {
     const next = advanceNotificationToastCursor(current, query.data.items);
     cursorRef.current = { owner, cursor: next };
     writeCursor(owner, next);
-    const visibleItems = newItems.filter((item) => !isBlocked(item.video));
+    const visibleItems = visibleNotificationToastItems(
+      newItems,
+      settings.notificationPopupsEnabled,
+      isHidden,
+    );
+    if (!settings.notificationPopupsEnabled) setItems([]);
     if (visibleItems.length > 0) setItems(visibleItems);
-  }, [blockedFilterReady, enabled, isBlocked, owner, query.data, queryClient]);
+  }, [
+    enabled,
+    isHidden,
+    owner,
+    query.data,
+    queryClient,
+    settings.notificationPopupsEnabled,
+    settingsReady,
+    visibilityFilterReady,
+  ]);
 
   useEffect(() => {
     if (items.length === 0 || paused) return;

apps/web/src/components/sabr-mse-player.tsx

@@ -5,13 +5,13 @@ import { useSabrModeSwitch } from "../hooks/use-sabr-mode-switch";
 import { useSabrQualitySwitch } from "../hooks/use-sabr-quality-switch";
 import { recordClientEvent } from "../lib/client-debug-log";
 import { toAbsoluteApiUrl } from "../lib/env";
+import { guardAutoplay, SabrAutoplayAttempt, SabrAutoplayDeadline } from "../lib/sabr-autoplay";
 import { SabrPlaybackRatePreference } from "../lib/sabr-playback-rate-preference";
 import { isAbortError } from "../lib/sabr-playback-retry";
 import { cancelPendingSabrSeek, positionMs, runSabrSeek } from "../lib/sabr-player-seek";
 import { registerSabrVidstackControls } from "../lib/sabr-vidstack-bridge";
 import { useAuthStore } from "../stores/auth-store";
 import type { SabrMsePlayerProps } from "./sabr-mse-player-types";
-
 export function SabrMsePlayer({
   config,
   playbackRatePreference,
@@ -34,8 +34,6 @@ export function SabrMsePlayer({
   const engineRef = useRef<TypeTypeMsePlayer | null>(null);
   const qualityRef = useRef<TypeTypeMseQuality | null>(null);
   const pendingPlayRef = useRef(false);
-  const autoplayStartedRef = useRef(false);
-  const autoplayConfirmedRef = useRef(false);
   const seekingRef = useRef(false);
   const errorReportedRef = useRef(false);
   const attachedVideoRef = useRef(false);
@@ -84,6 +82,7 @@ export function SabrMsePlayer({
     errorReportedRef.current = false;
     const replacingVideo = attachedVideoRef.current;
     attachedVideoRef.current = true;
+    const autoplayAttempt = new SabrAutoplayAttempt();
     const initialConfig = latestConfig();
     const engine = new TypeTypeMsePlayer(video, {
       endpoint: toAbsoluteApiUrl(""),
@@ -118,44 +117,49 @@ export function SabrMsePlayer({
       playbackRate.apply(video, false);
       playbackRateSettled = true;
     };
-    const playEngine = () =>
-      engine.play().then(() => {
-        settlePlaybackRate();
-      });
+    const playEngine = () => engine.play().then(settlePlaybackRate);
     playbackRate.initialize(video);
     video.addEventListener("volumechange", volumeChange);
     video.addEventListener("ratechange", playbackRateChange);
-    let autoplayStartTime = 0;
     let engineLoaded = false;
+    const autoplayDeadline = new SabrAutoplayDeadline(() => {
+      if (!autoplayAttempt.expire()) return;
+      pendingPlayRef.current = false;
+      video.autoplay = false;
+      engine.pause();
+    });
+    const unguardAutoplay = guardAutoplay(video, autoplayAttempt, () => engine.pause());
     const startAutoplay = () => {
-      if (!engineLoaded || autoplayConfirmedRef.current || video.readyState < 3) return;
-      if (autoplayStartedRef.current) {
-        if (!video.paused && video.currentTime >= autoplayStartTime + 0.25) {
-          autoplayConfirmedRef.current = true;
-        } else if (video.paused) {
-          autoplayStartedRef.current = false;
-        }
-        return;
-      }
+      if (!engineLoaded || video.readyState < 3) return;
       if (!latestHandlers().autoplay && !pendingPlayRef.current) return;
-      autoplayStartTime = video.currentTime;
-      autoplayStartedRef.current = true;
-      void playEngine().catch(() => {
-        autoplayStartedRef.current = false;
-      });
+      if (!autoplayAttempt.begin()) return;
+      autoplayDeadline.arm();
+      void playEngine()
+        .then(() => {
+          autoplayDeadline.clear();
+          if (!autoplayAttempt.resolve()) engine.pause();
+        })
+        .catch((error: unknown) => {
+          autoplayDeadline.clear();
+          if (!autoplayAttempt.reject(error)) {
+            pendingPlayRef.current = false;
+            video.autoplay = false;
+          }
+        });
     };
     video.addEventListener("canplay", startAutoplay);
     const autoplayTimer = window.setInterval(startAutoplay, 250);
     const unregisterControls = registerSabrVidstackControls(video, {
       play: () => {
         pendingPlayRef.current = true;
         video.autoplay = true;
+        if (!engineLoaded) return Promise.resolve();
         return playEngine();
       },
       pause: (userInitiated = false) => {
-        if (!userInitiated && pendingPlayRef.current && !autoplayConfirmedRef.current) return;
+        if (!userInitiated && pendingPlayRef.current && !autoplayAttempt.isConfirmed) return;
         pendingPlayRef.current = false;
-        autoplayConfirmedRef.current = true;
+        autoplayAttempt.resolve();
         video.autoplay = false;
         return engine.pause();
       },
@@ -184,17 +188,18 @@ export function SabrMsePlayer({
     latestHandlers().onPositionReaderChange(() => positionMs(video));
     return () => {
       offError();
+      unguardAutoplay();
       unregisterControls();
       video.removeEventListener("volumechange", volumeChange);
       video.removeEventListener("ratechange", playbackRateChange);
       video.removeEventListener("canplay", startAutoplay);
       window.clearInterval(autoplayTimer);
+      autoplayDeadline.clear();
       engine.destroy();
       engineRef.current = null;
       setEngineReady(false);
       pendingPlayRef.current = false;
-      autoplayStartedRef.current = false;
-      autoplayConfirmedRef.current = false;
+      autoplayAttempt.reset();
       cancelPendingSabrSeek(seekingRef);
       seekingRef.current = false;
       latestHandlers().onSeekStateChange(false);