### Start Local Documentation Server Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md Once dependencies are installed, execute this command from the 'docs' directory to start the local documentation server. This allows you to preview documentation changes. ```sh yarn start ``` -------------------------------- ### Start React Native Example App Packager Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md This command starts the Metro server for the example application, which is configured to use the local version of the library. This allows real-time reflection of JavaScript code changes. ```sh yarn example start ``` -------------------------------- ### Basic Usage of React Native Video Player Component Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/installation.md A simple React Native example demonstrating how to integrate and use the `VideoPlayer` component with a video source and thumbnail, enabling autoplay. ```tsx import React from 'react'; import {View} from 'react-native'; import VideoPlayer from 'react-native-video-player'; const App = () => ( ); export default App; ``` -------------------------------- ### Install Project Dependencies with Yarn Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md To set up the monorepo project, run this command in the root directory. It installs all required dependencies for both the library and the example app using Yarn workspaces. Note that npm cannot be used for development. ```sh yarn ``` -------------------------------- ### Install Documentation Dependencies Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md After navigating to the 'docs' directory, run this command to install all necessary dependencies for building and serving the documentation locally. ```sh yarn install ``` -------------------------------- ### Install React Native Video Player Library Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/installation.md Instructions for installing the `react-native-video-player` and `react-native-video` libraries using either npm or yarn package managers. ```bash npm install react-native-video-player react-native-video ``` ```bash yarn add react-native-video-player react-native-video ``` -------------------------------- ### Run React Native Example App on iOS Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md Execute this command from the root directory to build and run the example application on an iOS simulator or device. Native code changes will require a rebuild of the example app. ```sh yarn example ios ``` -------------------------------- ### Run React Native Example App on Android Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md Execute this command from the root directory to build and run the example application on an Android emulator or device. Native code changes will require a rebuild of the example app. ```sh yarn example android ``` -------------------------------- ### Install iOS Dependencies with CocoaPods Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/installation.md Steps to install necessary iOS dependencies for `react-native-video-player` by navigating to the `ios` directory and running `pod install`. ```bash cd ios pod install ``` -------------------------------- ### Run React Native Example App on Web Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md Execute this command from the root directory to build and run the example application in a web browser. This allows testing the library's functionality in a web environment. ```sh yarn example web ``` -------------------------------- ### Install Docusaurus Website Dependencies Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/README.md Installs all required project dependencies using Yarn, preparing the environment for local development and building the Docusaurus site. ```bash $ yarn ``` -------------------------------- ### Install React Native Video Player Packages Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/README.md Provides commands to install the `react-native-video-player` and its `react-native-video` dependency using either Yarn or NPM. ```Yarn yarn add react-native-video-player react-native-video ``` ```NPM npm install --save react-native-video-player react-native-video ``` -------------------------------- ### Start Docusaurus Local Development Server Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/README.md Launches a local development server and opens a browser, enabling live updates without restarts for efficient development of the Docusaurus website. ```bash $ yarn start ``` -------------------------------- ### Example Usage of VideoPlayerRef.stop() Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/methods.md Provides an example of using the `stop()` method on a `VideoPlayerRef` to halt video playback and reset it to the beginning. ```ts playerRef.current?.stop(); ``` -------------------------------- ### Install iOS Dependencies (CocoaPods) Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/README.md Executes the necessary CocoaPods installation step for iOS projects after adding the React Native packages. ```Shell cd ios pod install ``` -------------------------------- ### Example Usage of VideoPlayerRef.resume() Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/methods.md Shows how to use the `resume()` method on a `VideoPlayerRef` to resume video playback from its current position. ```ts playerRef.current?.resume(); ``` -------------------------------- ### Handle Video Start Event in React Native Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/events.md Callback function triggered when the start button is pressed, indicating the video has begun playback. This allows for custom actions or logging at the beginning of video playback. ```JavaScript onStart={() => { console.log('Video started!'); }} ``` -------------------------------- ### Example Usage of VideoPlayerRef.pause() Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/methods.md Demonstrates how to use the `pause()` method on a `VideoPlayerRef` to pause the video playback. ```ts playerRef.current?.pause(); ``` -------------------------------- ### Example Usage of VideoPlayerRef.seek() Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/methods.md Illustrates how to use the `seek()` method on a `VideoPlayerRef` to move the video playback to a specific time. ```ts playerRef.current?.seek(30); // Seeks to the 30th second ``` -------------------------------- ### hideControlsOnStart property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md Hides controls when the video starts playing. ```APIDOC hideControlsOnStart: Type: boolean Default: false Description: Hides controls when the video starts playing. ``` -------------------------------- ### thumbnail property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md An image source to display as a thumbnail before the video starts. This is useful for showing a preview or placeholder. ```APIDOC thumbnail: Type: object Description: An image source to display as a thumbnail before the video starts. This is useful for showing a preview or placeholder. ``` ```JavaScript thumbnail={{ uri: 'https://example.com/thumbnail.jpg', }} ``` -------------------------------- ### autoplay property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md Automatically starts video playback when the component is loaded. ```APIDOC autoplay: Type: boolean Default: false Description: Automatically starts video playback when the component is loaded. ``` -------------------------------- ### defaultMuted property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md Starts the video muted but allows toggling sound. ```APIDOC defaultMuted: Type: boolean Description: Starts the video muted but allows toggling sound. ``` -------------------------------- ### Applying Custom Styles to React Native Video Player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/styles.md Demonstrates how to use the `customStyles` property to apply custom styling to the `react-native-video-player` component. This example shows how to import the component and define styles using `StyleSheet.create` for specific player elements like the wrapper, play control, seek bar knob, and thumbnail image. ```tsx import React from 'react'; import { View, StyleSheet } from 'react-native'; import VideoPlayer from 'react-native-video-player'; const App = () => ( ); const styles = StyleSheet.create({ wrapper: { // ... }, playControl: { // ... }, seekBarKnob: { // ... }, thumbnailImage: { resizeMode: 'contain', // ... } }); export default App; ``` -------------------------------- ### muted property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md Starts the video muted and hides the mute toggle. ```APIDOC muted: Type: boolean Description: Starts the video muted and hides the mute toggle. ``` -------------------------------- ### Navigate to Documentation Directory Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md This command changes the current directory to the 'docs' folder, which contains the project's documentation source files. This is the first step to run the documentation locally. ```sh cd docs ``` -------------------------------- ### Build Docusaurus Static Website Content Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/README.md Generates static content for the Docusaurus website into the `build` directory. The resulting files can be served by any standard static content hosting service. ```bash $ yarn build ``` -------------------------------- ### Deploy Docusaurus Website via SSH Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/README.md Deploys the Docusaurus website using SSH for authentication. This command is commonly used to build and push the site to a `gh-pages` branch for GitHub Pages hosting. ```bash $ USE_SSH=true yarn deploy ``` -------------------------------- ### Overview of Common Project Scripts Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md This section provides a summary of frequently used `yarn` scripts defined in the `package.json` file. These scripts streamline common development, testing, and build tasks within the monorepo. ```APIDOC yarn: setup project by installing dependencies. yarn typecheck: type-check files with TypeScript. yarn lint: lint files with ESLint. yarn test: run unit tests with Jest. yarn example start: start the Metro server for the example app. yarn example android: run the example app on Android. yarn example ios: run the example app on iOS. ``` -------------------------------- ### Run Unit Tests with Jest Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md Execute this command to run the project's unit tests using Jest. It's recommended to add new tests for any changes and ensure all existing tests pass. ```sh yarn test ``` -------------------------------- ### Publish New Versions to npm Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md This command uses 'release-it' to automate the publishing process for new versions to npm. It handles tasks like bumping versions, creating tags, and releases based on semantic versioning. ```sh yarn release ``` -------------------------------- ### Deploy Docusaurus Website without SSH Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/README.md Deploys the Docusaurus website by specifying a GitHub username instead of SSH. This method is also convenient for building and pushing to a `gh-pages` branch for GitHub Pages. ```bash $ GIT_USER= yarn deploy ``` -------------------------------- ### Basic Usage of React Native Video Player Component Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/README.md Demonstrates how to import and use the `VideoPlayer` component in a React Native application, including setting a thumbnail, video source, and handling errors. It also shows how to use a ref to control the player. ```TypeScript import VideoPlayer, { type VideoPlayerRef } from 'react-native-video-player'; const playerRef = useRef(null); console.log(e)} showDuration={true} /> ``` -------------------------------- ### Linting and Testing Tools Overview Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md This section details the primary tools used for maintaining code quality and ensuring correctness. TypeScript is used for type checking, ESLint with Prettier for linting and formatting, and Jest for unit testing. ```APIDOC ESLint: Code linting. Prettier: Code formatting. TypeScript: Static type checking. Jest: Unit testing framework. ``` -------------------------------- ### Verify Code Quality with TypeScript and ESLint Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md Before committing, ensure your code adheres to the project's quality standards by running type checks with TypeScript and linting with ESLint. Both commands must pass for a successful contribution. ```sh yarn typecheck yarn lint ``` -------------------------------- ### Conventional Commits Specification Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md This section outlines the commit message conventions followed by the project, based on the Conventional Commits specification. Adhering to these types helps in automated changelog generation and understanding commit purposes. ```APIDOC fix: bug fixes, e.g. fix crash due to deprecated method. feat: new features, e.g. add new method to the module. refactor: code refactor, e.g. migrate from class components to hooks. docs: changes into documentation, e.g. add usage example for the module.. test: adding or updating tests, e.g. add integration tests using detox. chore: tooling changes, e.g. change CI config. ``` -------------------------------- ### VideoPlayerRef Component API Method Definitions Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/methods.md Defines the core methods available on the `VideoPlayerRef` object for programmatic control of video playback. ```APIDOC seek(time) Description: Moves the video playback to the specified time (in seconds). Parameters: time (number): The time in seconds to which the player should seek. pause() Description: Pauses the video playback. resume() Description: Resumes video playback from the current position. stop() Description: Stops the video playback and resets it to the beginning. ``` -------------------------------- ### Additional Props from react-native-video Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md The `react-native-video-player` component supports all properties available in the `react-native-video` library. Refer to the `react-native-video` documentation for a detailed list of these additional props. ```APIDOC Additional Props: Source: react-native-video library Description: All props available in the `react-native-video` library are supported. Refer to its documentation for details. ``` -------------------------------- ### Automatically Fix Code Formatting with ESLint Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/CONTRIBUTING.md Use this command to automatically fix common formatting issues identified by ESLint. This helps maintain consistent code style across the project. ```sh yarn lint --fix ``` -------------------------------- ### Supported Events from react-native-video Library Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/events.md The `react-native-video-player` component also supports all events from the underlying `react-native-video` library. These include common events like `onLoad`, `onError`, and `onEnd`, providing comprehensive control over video playback lifecycle. ```APIDOC Events inherited from `react-native-video`: - `onLoad`: Triggered when the video is loaded and ready for playback. - `onError`: Triggered when an error occurs during video playback. - `onEnd`: Triggered when the video playback reaches its end. For a full list of events and how to use them, refer to the `react-native-video` events documentation. ``` -------------------------------- ### resizeMode property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md Defines how the video should be resized within the player. Options include 'contain', 'cover', and 'stretch'. ```APIDOC resizeMode: Type: string Default: 'contain' Description: Defines how the video should be resized within the player. Options include 'contain', 'cover', and 'stretch'. ``` -------------------------------- ### Accessing VideoPlayer Ref Methods in React Native Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/methods.md Demonstrates how to create and use a ref with the `VideoPlayer` component to access its programmatic methods, such as `pause()`, for controlling video playback. ```tsx import React, {useRef} from 'react'; import VideoPlayer, {type VideoPlayerRef} from 'react-native-video-player'; const App = () => { const playerRef = useRef(null); const handlePause = () => { playerRef.current?.pause(); }; return ( ); }; ``` -------------------------------- ### repeat property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md Loops the video playback continuously when enabled. ```APIDOC repeat: Type: boolean Default: false Description: Loops the video playback continuously when enabled. ``` -------------------------------- ### source property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md The video source object passed to the underlying `react-native-video` component. This is a required property to define the video file or stream. ```APIDOC source: Type: object Description: The video source object passed to the underlying `react-native-video` component. This is a required property to define the video file or stream. ``` ```JavaScript source={{ uri: 'https://example.com/video.mp4', }} ``` -------------------------------- ### Custom Styles API for React Native Video Player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/styles.md Defines the available `customStyles` properties for the `react-native-video-player` component, allowing granular control over its appearance. Each property targets a specific part of the video player's UI. ```APIDOC customStyles properties: wrapper: Styles the main container that wraps the entire video player. videoWrapper: Styles the container that holds the video element and controls. video: Styles the video element itself. Supports properties like `backgroundColor` for older Android versions. controls: Styles the container for the control elements (play, pause, seek bar, etc.). playControl: Styles the play/pause button within the controls. controlButton: Styles for all buttons in the controls (e.g., mute, fullscreen). controlIcon: Styles for the icons inside the control buttons, such as the volume or fullscreen icons. playIcon: Styles specifically for the play/pause icon on the start button. seekBar: Styles the seek bar container, which shows the progress of the video. seekBarFullWidth: Styles the seek bar when it spans the full width (e.g., in fullscreen mode). seekBarProgress: Styles the bar indicating playback progress. seekBarKnob: Styles the draggable knob used to seek (move playback position). seekBarKnobSeeking: Styles the knob when the user is actively seeking (dragging the knob). seekBarBackground: Styles the background of the seek bar. thumbnail: Styles the video thumbnail container shown before playback starts. thumbnailImage: Styles the video thumbnail image shown before playback starts. playButton: Styles the start button overlaying the thumbnail. playArrow: Styles the play arrow icon inside the start button. durationText: Styles the text displaying the video duration. ``` -------------------------------- ### videoWidth property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md Width of the video to calculate the player’s aspect ratio. ```APIDOC videoWidth: Type: number Description: Width of the video to calculate the player’s aspect ratio. ``` -------------------------------- ### showDuration property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md If true, displays the video’s duration on the seek bar. ```APIDOC showDuration: Type: boolean Default: false Description: If true, displays the video’s duration on the seek bar. ``` -------------------------------- ### endThumbnail property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md An image source displayed after the video ends. If not provided, the `thumbnail` is reused. ```APIDOC endThumbnail: Type: object Description: An image source displayed after the video ends. If not provided, the `thumbnail` is reused. ``` ```JavaScript endThumbnail={{ uri: 'https://example.com/end-thumbnail.jpg', }} ``` -------------------------------- ### videoHeight property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md Height of the video to calculate the player’s aspect ratio. ```APIDOC videoHeight: Type: number Description: Height of the video to calculate the player’s aspect ratio. ``` -------------------------------- ### duration property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md The duration of the video in seconds. If not provided, the player attempts to fetch it automatically. ```APIDOC duration: Type: number Description: The duration of the video in seconds. If not provided, the player attempts to fetch it automatically. ``` -------------------------------- ### Handle Video Controls Shown Event in React Native Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/events.md Callback function triggered when the video controls are shown. This event can be used to modify the UI or display additional information when controls become visible. ```JavaScript onShowControls={() => { console.log('Controls are shown.'); }} ``` -------------------------------- ### endWithThumbnail property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md After the video ends, the player returns to displaying the thumbnail. If `endThumbnail` is not provided, the `thumbnail` is reused. ```APIDOC endWithThumbnail: Type: boolean Default: false Description: After the video ends, the player returns to displaying the thumbnail. If `endThumbnail` is not provided, the `thumbnail` is reused. ``` -------------------------------- ### fullScreenOnLongPress property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md Enables entering fullscreen mode with a long press gesture. ```APIDOC fullScreenOnLongPress: Type: boolean Default: false Description: Enables entering fullscreen mode with a long press gesture. ``` -------------------------------- ### pauseOnPress property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md Pauses or resumes playback when the player is tapped. ```APIDOC pauseOnPress: Type: boolean Default: false Description: Pauses or resumes playback when the player is tapped. ``` -------------------------------- ### Handle Play Button Press Event in React Native Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/events.md Callback function triggered when the play button is pressed. This event can be used to perform actions such as tracking user interaction or controlling external UI elements. ```JavaScript onPlayPress={() => { console.log('Play button pressed!'); }} ``` -------------------------------- ### disableSeek property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md Disables seeking within the video. ```APIDOC disableSeek: Type: boolean Default: false Description: Disables seeking within the video. ``` -------------------------------- ### controlsTimeout property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md The time (in milliseconds) before the controls are hidden automatically when inactive. ```APIDOC controlsTimeout: Type: number Default: 3000 (ms) Description: The time (in milliseconds) before the controls are hidden automatically when inactive. ``` -------------------------------- ### disableControlsAutoHide property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md Prevents the controls from being hidden automatically, keeping them visible at all times. ```APIDOC disableControlsAutoHide: Type: boolean Default: false Description: Prevents the controls from being hidden automatically, keeping them visible at all times. ``` -------------------------------- ### disableFullscreen property for react-native-video-player Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/properties.md Disables the fullscreen toggle button in the player. ```APIDOC disableFullscreen: Type: boolean Default: false Description: Disables the fullscreen toggle button in the player. ``` -------------------------------- ### Handle Video Controls Hidden Event in React Native Source: https://github.com/thewidlarzgroup/react-native-video-player/blob/master/docs/docs/api/events.md Callback function triggered when the video controls are hidden. This is useful for adjusting the UI or overlay elements when the controls are no longer visible. ```JavaScript onHideControls={() => { console.log('Controls are hidden.'); }} ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.