@videojs/react 10.0.0-beta.29 → 10.0.0-beta.30

package/docs/reference/title.md

@@ -0,0 +1,208 @@
+# Title
+
+Displays the resolved content title for the current media
+
+## Anatomy
+
+tsx
+
+```
+<Title />
+```
+
+## Behavior
+
+The component shows the name of what is playing. It writes its own text, so set the title on the player instead of passing children.
+
+tsx
+
+```
+<Player title="Big Buck Bunny">
+  <Container>
+    <Video src="video.mp4" />
+    <Title />
+  </Container>
+</Player>
+```
+
+A title can come from two places. The player uses the first one that has a value:
+
+1.  The title you set on the player.
+2.  The title the media reports about itself.
+
+If neither has a value, there is nothing to show and the title hides itself.
+
+The title is player input, not player state, so change it the way you set it in the first place. The store exposes the resolved `title` to read, and nothing to write.
+
+tsx
+
+```
+const [title, setTitle] = useState("Big Buck Bunny");
+
+<Player title={title}>...</Player>;
+```
+
+Set it to `null` to hand the title back to the media.
+
+The title shows whenever there is a title to show. It does not follow the controls or playback on its own — when you want it to come and go with the controls, style it against the controls in your own layout, the same way you would any other piece of chrome.
+
+## Styling
+
+React renders a `<span>`, or nothing at all when no title resolves. Add a `className` to style it:
+
+css
+
+```
+.title {
+  opacity: 0;
+  transition: opacity 150ms ease-out;
+}
+```
+
+To fade the title in and out with the controls, style it against a sibling `Controls` rather than reaching for state on the title itself:
+
+css
+
+```
+.controls[data-visible] ~ .title {
+  opacity: 1;
+}
+```
+
+`className` and `style` also accept a function of component state when you would rather branch in JavaScript than in CSS:
+
+tsx
+
+```
+<Title className={(state) => (state.title.length > 40 ? "title title--long" : "title")} />
+```
+
+## Accessibility
+
+The title is ordinary text, so it reaches assistive technology as content with no ARIA of its own. The native `hidden` attribute it sets when there is no title also removes it from the accessibility tree, so nothing is announced when there is nothing to announce.
+
+Fading the title out with `opacity` leaves it readable by a screen reader while it is not painted. That is deliberate — the name of what is playing stays relevant whether or not the controls happen to be on screen.
+
+The component does not name the player. To give the player region an accessible name, set `aria-label` or `aria-labelledby` on the container yourself.
+
+## Examples
+
+### Basic Usage
+
+Big Buck BunnyPlay
+
+App.tsx
+
+App.css
+
+```
+import { Container, createPlayer, PlayButton, Title } from '@videojs/react';
+import { Video, videoFeatures } from '@videojs/react/video';
+
+import './BasicUsage.css';
+
+const { Player } = createPlayer({ features: videoFeatures });
+
+export default function BasicUsage() {
+  return (
+    <Player title="Big Buck Bunny">
+      <Container className="react-title-basic">
+        <Video loop muted playsInline src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" />
+        <Title className="react-title-basic__title" />
+        <PlayButton
+          className="react-title-basic__button"
+          render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
+        />
+      </Container>
+    </Player>
+  );
+}
+```
+```
+.react-title-basic {
+  position: relative;
+  display: block;
+}
+
+.react-title-basic video {
+  display: block;
+  width: 100%;
+}
+
+/* React renders nothing until a title resolves, so the gradient never sits
+   over empty space without this demo doing anything. */
+.react-title-basic__title {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  padding: 16px 20px 48px;
+  font-size: 16px;
+  font-weight: 500;
+  color: white;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
+}
+
+.react-title-basic__button {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  padding-block: 8px;
+  padding-inline: 20px;
+  color: black;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 9999px;
+  backdrop-filter: blur(10px);
+}
+```
+
+## API Reference
+
+### State
+
+State is accessible via the `render`, `className`, and `style` props.
+
+Property
+
+Type
+
+Details
+
+`title`
+
+`string`
+
+▸
+
+Description
+
+The resolved content title. Empty when no source supplied one.
+
+`hidden`
+
+`boolean`
+
+▸
+
+Description
+
+Whether the component is hidden because no title is available.
+
+### Data attributes
+
+Attribute
+
+Type
+
+Details
+
+`data-hidden`
+
+▸
+
+Description
+
+Present when the element is hidden because no title is available.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/react",
   "type": "module",
-  "version": "10.0.0-beta.29",
+  "version": "10.0.0-beta.30",
   "description": "React library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -132,11 +132,11 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-beta.29",
-    "@videojs/spf": "10.0.0-beta.29",
-    "@videojs/store": "10.0.0-beta.29",
-    "@videojs/utils": "10.0.0-beta.29",
-    "@videojs/media": "10.0.0-beta.29"
+    "@videojs/core": "10.0.0-beta.30",
+    "@videojs/spf": "10.0.0-beta.30",
+    "@videojs/media": "10.0.0-beta.30",
+    "@videojs/store": "10.0.0-beta.30",
+    "@videojs/utils": "10.0.0-beta.30"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
@@ -148,8 +148,8 @@
     "typescript": "6.0.2",
     "vitest": "^4.1.10",
     "vjsc": "0.0.0",
-    "@videojs/icons": "10.0.0-beta.29",
-    "@videojs/skins": "10.0.0-beta.29"
+    "@videojs/icons": "10.0.0-beta.30",
+    "@videojs/skins": "10.0.0-beta.30"
   },
   "publishConfig": {
     "access": "public"