refactor(packages): clean up UI component types and data flow (#479)

packages/react/src/ui/fullscreen-button/fullscreen-button.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { FullscreenButtonCore } from '@videojs/core';
+import { FullscreenButtonCore, FullscreenButtonDataAttrs } from '@videojs/core';
 import { logMissingFeature, selectFullscreen } from '@videojs/core/dom';
 import type { ForwardedRef } from 'react';
 import { forwardRef, useState } from 'react';
@@ -32,17 +32,20 @@ export const FullscreenButton = forwardRef(function FullscreenButton(
   });
 
   if (!fullscreen) {
-    logMissingFeature('FullscreenButton', 'fullscreen');
+    if (__DEV__) logMissingFeature('FullscreenButton', 'fullscreen');
     return null;
   }
 
+  const state = core.getState(fullscreen);
+
   return renderElement(
     'button',
     { render, className, style },
     {
-      state: core.getState(fullscreen),
+      state,
+      stateAttrMap: FullscreenButtonDataAttrs,
       ref: [forwardedRef, buttonRef],
-      props: [core.getAttrs(fullscreen), elementProps, getButtonProps()],
+      props: [core.getAttrs(state), elementProps, getButtonProps()],
     }
   );
 });

packages/react/src/ui/mute-button/mute-button.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { MuteButtonCore, MuteButtonDataAttributes } from '@videojs/core';
+import { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';
 import { logMissingFeature, selectVolume } from '@videojs/core/dom';
 import type { ForwardedRef } from 'react';
 import { forwardRef, useState } from 'react';
@@ -33,18 +33,20 @@ export const MuteButton = forwardRef(function MuteButton(
   });
 
   if (!volume) {
-    logMissingFeature('MuteButton', 'volume');
+    if (__DEV__) logMissingFeature('MuteButton', 'volume');
     return null;
   }
 
+  const state = core.getState(volume);
+
   return renderElement(
     'button',
     { render, className, style },
     {
-      state: core.getState(volume),
+      state,
+      stateAttrMap: MuteButtonDataAttrs,
       ref: [forwardedRef, buttonRef],
-      props: [core.getAttrs(volume), elementProps, getButtonProps()],
-      stateAttrMap: MuteButtonDataAttributes,
+      props: [core.getAttrs(state), elementProps, getButtonProps()],
     }
   );
 });

packages/react/src/ui/play-button/play-button.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { PlayButtonCore } from '@videojs/core';
+import { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';
 import { logMissingFeature, selectPlayback } from '@videojs/core/dom';
 import type { ForwardedRef } from 'react';
 import { forwardRef, useState } from 'react';
@@ -46,17 +46,20 @@ export const PlayButton = forwardRef(function PlayButton(
   });
 
   if (!playback) {
-    logMissingFeature('PlayButton', 'playback');
+    if (__DEV__) logMissingFeature('PlayButton', 'playback');
     return null;
   }
 
+  const state = core.getState(playback);
+
   return renderElement(
     'button',
     { render, className, style },
     {
-      state: core.getState(playback),
+      state,
+      stateAttrMap: PlayButtonDataAttrs,
       ref: [forwardedRef, buttonRef],
-      props: [core.getAttrs(playback), elementProps, getButtonProps()],
+      props: [core.getAttrs(state), elementProps, getButtonProps()],
     }
   );
 });

packages/react/src/ui/time/time-value.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { TimeCore } from '@videojs/core';
+import { TimeCore, TimeDataAttrs } from '@videojs/core';
 import { logMissingFeature, selectTime } from '@videojs/core/dom';
 import type { ForwardedRef } from 'react';
 import { forwardRef, useState } from 'react';
@@ -33,34 +33,33 @@ export const Value = forwardRef(function Value(
   core.setProps({ type, negativeSign, label });
 
   if (!time) {
-    logMissingFeature('Time.Value', 'time');
+    if (__DEV__) logMissingFeature('Time.Value', 'time');
     return null;
   }
 
   const state = core.getState(time);
 
-  // Render negative sign as aria-hidden span for remaining time
-  const content =
-    state.type === 'remaining' && state.seconds < 0 ? (
-      <>
-        <span aria-hidden="true">{negativeSign ?? '-'}</span>
-        {state.text.replace(/^-/, '')}
-      </>
-    ) : (
-      state.text
-    );
+  const content = state.negative ? (
+    <>
+      <span aria-hidden="true">{negativeSign ?? '-'}</span>
+      {state.text}
+    </>
+  ) : (
+    state.text
+  );
 
   return renderElement(
     'time',
     { render, className, style },
     {
       state,
+      stateAttrMap: TimeDataAttrs,
       ref: [forwardedRef],
       props: [
         {
           datetime: state.datetime,
           children: content,
-          ...core.getAttrs(time),
+          ...core.getAttrs(state),
         },
         elementProps,
       ],