fix(site): add astro check CI and reduce errors/hints (#1109)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

site/src/components/docs/DocsLink.astro

@@ -20,4 +20,4 @@ const { url: href } = resolveDocsLinkUrl({
 });
 ---
 
-<A href={href} class={className}><slot /></A>
+<A href={href} class={className ?? undefined}><slot /></A>

site/src/components/docs/api-reference/DetailRow.astro

@@ -25,7 +25,7 @@ interface Props {
   colspan: number;
 }
 
-const { id, name, type, attributeName, detailedType, description, colspan } = Astro.props;
+const { id, name, attributeName, detailedType, description, colspan } = Astro.props;
 
 const hasDetail = Boolean(attributeName || detailedType || description);
 ---

site/src/components/docs/demos/html-create-player/html/css/BasicUsage.ts

@@ -38,7 +38,7 @@ class PlayToggle extends MediaElement {
       isDisabled: () => !this.#player.value,
     });
 
-    applyElementProps(this, buttonProps, this.#disconnect.signal);
+    applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });
   }
 
   override disconnectedCallback(): void {
@@ -47,8 +47,8 @@ class PlayToggle extends MediaElement {
     this.#disconnect = null;
   }
 
-  protected override update(): void {
-    super.update();
+  protected override update(changed: Map<string, unknown>): void {
+    super.update(changed);
     const state = this.#player.value;
     if (!state) return;
     applyStateDataAttrs(this, state, { paused: 'data-paused', ended: 'data-ended' });

site/src/components/docs/demos/player-controller/html/css/BasicUsage.ts

@@ -1,4 +1,13 @@
-import { applyElementProps, createButton, createPlayer, MediaElement, PlayerController } from '@videojs/html';
+import {
+  applyElementProps,
+  createButton,
+  createPlayer,
+  MediaElement,
+  PlayerController,
+  selectPlayback,
+  selectTime,
+  selectVolume,
+} from '@videojs/html';
 import { videoFeatures } from '@videojs/html/video';
 import '@videojs/html/media/container';
 
@@ -28,7 +37,7 @@ class PlayerActions extends MediaElement {
 
     const bind = (el: HTMLElement, action: () => void) => {
       const props = createButton({ onActivate: action, isDisabled: () => !this.#player.value });
-      applyElementProps(el, props, signal);
+      applyElementProps(el, props, { signal });
     };
 
     bind(playBtn, () => this.#player.value?.play());
@@ -46,20 +55,20 @@ class PlayerActions extends MediaElement {
 class PlayerState extends MediaElement {
   static readonly tagName = 'demo-ctrl-state';
 
-  readonly #state = new PlayerController(this, context, (s) => ({
-    paused: s.paused,
-    currentTime: s.currentTime,
-    volume: s.volume,
-  }));
+  readonly #playback = new PlayerController(this, context, selectPlayback);
+  readonly #time = new PlayerController(this, context, selectTime);
+  readonly #volume = new PlayerController(this, context, selectVolume);
 
-  protected override update(): void {
-    super.update();
-    const state = this.#state.value;
-    if (!state) return;
+  protected override update(changed: Map<string, unknown>): void {
+    super.update(changed);
+    const playback = this.#playback.value;
+    const time = this.#time.value;
+    const volume = this.#volume.value;
+    if (!playback) return;
 
     const el = this.querySelector('.text');
     if (el) {
-      el.textContent = `Paused: ${state.paused ? 'Yes' : 'No'} | Time: ${state.currentTime.toFixed(1)}s | Volume: ${Math.round(state.volume * 100)}%`;
+      el.textContent = `Paused: ${playback.paused ? 'Yes' : 'No'} | Time: ${(time?.currentTime ?? 0).toFixed(1)}s | Volume: ${Math.round((volume?.volume ?? 0) * 100)}%`;
     }
   }
 }

site/src/components/docs/demos/use-button/react/css/BasicUsage.tsx

@@ -1,4 +1,5 @@
 import { useButton } from '@videojs/react';
+import type { Ref } from 'react';
 import { useState } from 'react';
 
 export default function BasicUsage() {
@@ -13,7 +14,7 @@ export default function BasicUsage() {
 
   return (
     <div className="demo">
-      <button ref={buttonRef} {...getButtonProps()} className="button" disabled={disabled}>
+      <button ref={buttonRef as Ref<HTMLButtonElement>} {...getButtonProps()} className="button" disabled={disabled}>
         Activated {count} times
       </button>
       <label className="label">

site/src/components/docs/demos/use-media/react/css/BasicUsage.css

@@ -1,36 +0,0 @@
-.media-container {
-  position: relative;
-}
-
-.media-container video {
-  width: 100%;
-}
-
-.info-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin: 0;
-  padding: 12px;
-  background: rgba(0, 0, 0, 0.05);
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  font-size: 0.8125rem;
-}
-
-.info-panel div {
-  display: flex;
-  gap: 8px;
-}
-
-.info-panel dt {
-  color: #6b7280;
-  min-width: 80px;
-}
-
-.info-panel dd {
-  margin: 0;
-  font-variant-numeric: tabular-nums;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

site/src/components/docs/demos/use-media/react/css/BasicUsage.tsx

@@ -1,50 +0,0 @@
-import { createPlayer } from '@videojs/react';
-import { Video, videoFeatures } from '@videojs/react/video';
-
-const Player = createPlayer({
-  features: videoFeatures,
-});
-
-function MediaInfo() {
-  const media = Player.useMedia();
-
-  if (!media) return null;
-
-  return (
-    <dl className="info-panel">
-      <div>
-        <dt>tagName</dt>
-        <dd>{media.tagName.toLowerCase()}</dd>
-      </div>
-      <div>
-        <dt>src</dt>
-        <dd>{media.currentSrc || '—'}</dd>
-      </div>
-      <div>
-        <dt>videoWidth</dt>
-        <dd>{media.videoWidth}px</dd>
-      </div>
-      <div>
-        <dt>videoHeight</dt>
-        <dd>{media.videoHeight}px</dd>
-      </div>
-    </dl>
-  );
-}
-
-export default function BasicUsage() {
-  return (
-    <Player.Provider>
-      <Player.Container className="media-container">
-        <Video
-          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
-          autoPlay
-          muted
-          playsInline
-          loop
-        />
-        <MediaInfo />
-      </Player.Container>
-    </Player.Provider>
-  );
-}