fix(player): resolve internal type errors

Author: mihar-22

packages/react/package.json

@@ -49,7 +49,7 @@
     "media-icons": "^1.1.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "remotion": "^4.0.193",
+    "remotion": "4.0.193",
     "rimraf": "^3.0.2",
     "rollup": "^4.20.0",
     "rollup-plugin-dts": "^6.1.1",

packages/react/src/components/layouts/default/ui/time.tsx

@@ -11,7 +11,7 @@ import { DefaultLiveButton } from './buttons';
 
 interface DefaultTimeGroupSlots {
   currentTime?: React.ReactNode;
-  timeSeparator?: React.ReactNode;
+  timeDivider?: React.ReactNode;
   endTime?: React.ReactNode;
 }
 

packages/react/src/components/primitives/slot.tsx

@@ -3,6 +3,7 @@
  * -----------------------------------------------------------------------------------------------*/
 
 import * as React from 'react';
+
 import { composeRefs } from 'maverick.js/react';
 
 /* -------------------------------------------------------------------------------------------------
@@ -20,15 +21,15 @@ const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
 
   if (slottable) {
     // the new element to render is the one passed as a child of `Slottable`
-    const newElement = slottable.props.children as React.ReactNode;
+    const newElement = (slottable.props as { children: React.ReactNode }).children;
 
     const newChildren = childrenArray.map((child) => {
       if (child === slottable) {
         // because the new element will be the one rendered, we are only interested
         // in grabbing its children (`newElement.props.children`)
         if (React.Children.count(newElement) > 1) return React.Children.only(null);
         return React.isValidElement(newElement)
-          ? (newElement.props.children as React.ReactNode)
+          ? (newElement.props as { children: React.ReactNode }).children
           : null;
       } else {
         return child;
@@ -66,7 +67,7 @@ const SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) =>
 
   if (React.isValidElement(children)) {
     return React.cloneElement<any>(children, {
-      ...mergeProps(slotProps, children.props),
+      ...mergeProps(slotProps, children.props as any),
       ref: forwardedRef ? composeRefs(forwardedRef, (children as any).ref) : (children as any).ref,
     });
   }

packages/react/src/components/ui/poster.tsx

@@ -41,7 +41,11 @@ const Poster = React.forwardRef<HTMLImageElement, PosterProps>(
   ({ children, ...props }, forwardRef) => {
     return (
       <PosterBridge
-        src={props.asChild && React.isValidElement(children) ? children.props.src : undefined}
+        src={
+          props.asChild && React.isValidElement(children)
+            ? (children.props as React.ComponentProps<'img'>).src
+            : undefined
+        }
         {...(props as Omit<PosterProps, 'ref'>)}
       >
         {(props, instance) => (
@@ -85,7 +89,7 @@ const PosterImg = React.forwardRef<HTMLImageElement, PosterImgProps>(
         src={$src || undefined}
         alt={$alt || undefined}
         crossOrigin={$crossOrigin || undefined}
-        ref={composeRefs(img.set as React.Ref<HTMLImageElement>, forwardRef)}
+        ref={composeRefs(img.set as any, forwardRef)}
         style={{ display: $hidden ? 'none' : undefined }}
       >
         {children}

packages/react/src/components/ui/sliders/time-slider.tsx

@@ -143,7 +143,7 @@ interface ChapterTracksProps {
 function ChapterTracks({ instance, children }: ChapterTracksProps) {
   const $cues = useSignal(() => instance.cues, instance),
     refs = React.useRef<HTMLElement[]>([]),
-    emptyCue = React.useRef<VTTCue>(),
+    emptyCue = React.useRef<VTTCue>(null!),
     { $chapters } = React.useContext(TimeSliderContext);
 
   if (!emptyCue.current) {
@@ -365,7 +365,7 @@ const VideoProvider = React.forwardRef<HTMLVideoElement, VideoProviderProps>(
         playsInline
         preload={$canLoad ? 'auto' : 'none'}
         crossOrigin={$crossOrigin || undefined}
-        ref={composeRefs(video.set as React.Ref<HTMLVideoElement>, forwardRef)}
+        ref={composeRefs(video.set as any, forwardRef)}
       >
         {children}
       </Primitive.video>

packages/react/src/hooks/use-media-remote.ts

@@ -18,7 +18,7 @@ export function useMediaRemote(
   target?: EventTarget | null | React.RefObject<EventTarget | null>,
 ): MediaRemoteControl {
   const media = useMediaContext(),
-    remote = React.useRef<MediaRemoteControl>();
+    remote = React.useRef<MediaRemoteControl>(null!);
 
   if (!remote.current) {
     remote.current = new MediaRemoteControl();

packages/react/src/providers/remotion/types.ts

@@ -2,7 +2,7 @@ import type * as React from 'react';
 
 export interface RemotionSrc<InputProps extends RemotionInputProps = RemotionInputProps> {
   /** React component which is generally a Remotion video. */
-  src: React.ComponentType;
+  src: React.ComponentType<unknown>;
   /** Remotion source type. */
   type: 'video/remotion';
   /**