Add docstring to VideoTrack (#177)

* Add docstring to VideoTrack

* build-docs

* Revert "build-docs"

This reverts commit 08db9f1.

* fmt

* public

src/components/VideoTrack.tsx

@@ -18,14 +18,60 @@ import { RemoteVideoTrack } from 'livekit-client';
 import ViewPortDetector from './ViewPortDetector';
 import type { TrackReference } from '@livekit/components-react';
 
+/**
+ * Props for the VideoTrack component.
+ * @public
+ */
 export type VideoTrackProps = {
+  /**
+   * The track reference to display. This should be a TrackReference object
+   * or undefined if no track is available.
+   */
   trackRef: TrackReference | undefined;
+  /**
+   * Custom React Native styles for the video container.
+   */
   style?: ViewStyle;
+  /**
+   * Specifies how the video content should be resized to fit its container.
+   * 'cover' (default): The video will fill the entire container, potentially cropping the video.
+   * 'contain': The entire video will be visible within the container, potentially leaving empty space.
+   */
   objectFit?: 'cover' | 'contain' | undefined;
+  /**
+   * Indicates whether the video should be mirrored during rendering.
+   * This is commonly used for front-facing cameras.
+   */
   mirror?: boolean;
+  /**
+   * Specifies the depth-stacking order of this video view in the stacking space of all video views.
+   * A larger zOrder value generally causes the view to cover those with lower values.
+   *
+   * The support for zOrder is platform-dependent and/or
+   * implementation-specific. Thus, specifying a value for zOrder is to be
+   * thought of as giving a hint rather than as imposing a requirement. For
+   * example, video renderers such as RTCView are commonly implemented using
+   * OpenGL and OpenGL views may have different numbers of layers in their
+   * stacking space. Android has three: a layer bellow the window (aka
+   * default), a layer bellow the window again but above the previous layer
+   * (aka media overlay), and above the window. Consequently, it is advisable
+   * to limit the number of utilized layers in the stacking space to the
+   * minimum sufficient for the desired display. For example, a video call
+   * application usually needs a maximum of two zOrder values: 0 for the
+   * remote video(s) which appear in the background, and 1 for the local
+   * video(s) which appear above the remote video(s).
+   */
   zOrder?: number;
 };
 
+/**
+ * VideoTrack component for displaying video tracks in a React Native application.
+ * It supports both local and remote video tracks from LiveKit, and handles adaptive streaming for remote tracks.
+ *
+ * @param props - See VideoTrackProps for details.
+ * @returns A React component that renders the given video track.
+ * @public
+ */
 export const VideoTrack = ({
   style = {},
   trackRef,
@@ -130,6 +176,7 @@ class VideoTrackElementInfo implements ElementInfo {
   observe(): void {
     this._observing = true;
   }
+
   stopObserving(): void {
     this._observing = false;
   }
@@ -143,6 +190,7 @@ class VideoTrackElementInfo implements ElementInfo {
       this.handleResize?.();
     }
   }
+
   onVisibility(isVisible: boolean) {
     if (this.visible !== isVisible) {
       this.visible = isVisible;