# react-video-player-hook

> React Hook for capacitor-video-player plugin

Latest version **1.0.1** (published 2022-08-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-video-player-hook
pnpm add react-video-player-hook
yarn add react-video-player-hook
bun add react-video-player-hook
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-08-23 |
| First published | 2020-09-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 56.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Quéau Jean Pierre |
| Maintainers | jeepq |
| Keywords | React, Hook, Capacitor, Video, Player |

## Links

- npm: https://www.npmjs.com/package/react-video-player-hook
- Repository: https://github.com/jepiqueau/react-video-player-hook
- Homepage: https://github.com/jepiqueau/react-video-player-hook#readme
- Issues: https://github.com/jepiqueau/react-video-player-hook/issues
- npm.io page: https://npm.io/package/react-video-player-hook

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2022-08-23
- 1.0.0 — 2021-11-08
- 0.0.4 — 2020-10-04
- 0.0.3 — 2020-09-22
- 0.0.2 — 2020-09-18
- 0.0.1 — 2020-09-16
- 0.0.1-alpha.0 — 2020-09-04

## README

<p align="center"><br><img src="https://avatars3.githubusercontent.com/u/16580653?v=4" width="128" height="128" /></p>

<h3 align="center">React Hook for capacitor-video-player</h3>
<p align="center"><strong><code>react-video-player-hook</code></strong></p>
<p align="center">A React Hook to help Capacitor developpers to use</p>
<p align="center"><strong><code>capacitor-video-player/code></strong></p>
<p align="center">plugin in React or Ionic/React applications
  Native databases could be encrypted with SQLCipher
</p>

<p align="center">
  <img src="https://img.shields.io/maintenance/yes/2020?style=flat-square" />
  <a href="https://www.npmjs.com/package/react-video-player-hook"><img src="https://img.shields.io/npm/l/react-video-player-hook?style=flat-square" /></a>
<br>
  <a href="https://www.npmjs.com/package/react-video-player-hook"><img src="https://img.shields.io/npm/dw/react-video-player-hook?style=flat-square" /></a>
  <a href="https://www.npmjs.com/package/react-video-player-hook"><img src="https://img.shields.io/npm/v/react-video-player-hook?style=flat-square" /></a>
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
<a href="#contributors-"><img src="https://img.shields.io/badge/all%20contributors-1-orange?style=flat-square" /></a>
<!-- ALL-CONTRIBUTORS-BADGE:END -->
</p>


## Maintainers

| Maintainer        | GitHub                                    | Social |
| ----------------- | ----------------------------------------- | ------ |
| Quéau Jean Pierre | [jepiqueau](https://github.com/jepiqueau) |        |


## Installation

```bash
npm install --save capacitor-video-player
npm install --save-dev react-video-player-hook
```

## Applications demonstrating the use of the plugin and the react hook

 ### Ionic/React

  - [react-video-player-app-starter](https://github.com/jepiqueau/react-video-player-app-starter)

 ### React
  
  - [react-videoplayer-hook-app](https://github.com/jepiqueau/react-videoplayer-hook-app)


## Supported methods

| Name                               | Android | iOS | Electron | Web |
| :--------------------------------- | :------ | :-- | :------- | :-- |
| initPlayer (mode fullscreen)       | ✅      | ✅  | ✅       | ✅  |
| initPlayer (mode embedded)         | ❌      | ❌  | ✅       | ✅  |
| initPlayer (url internal)          | ✅      | ✅  | ❌       | ❌  |
| initPlayer (url application/files) | ✅      | ✅  | ❌       | ❌  |
| isPlaying                          | ✅      | ✅  | ✅       | ✅  |
| play                               | ✅      | ✅  | ✅       | ✅  |
| pause                              | ✅      | ✅  | ✅       | ✅  |
| getCurrentTime                     | ✅      | ✅  | ✅       | ✅  |
| setCurrentTime                     | ✅      | ✅  | ✅       | ✅  |
| getDuration                        | ✅      | ✅  | ✅       | ✅  |
| getMuted                           | ✅      | ✅  | ✅       | ✅  |
| setMuted                           | ✅      | ✅  | ✅       | ✅  |
| getVolume                          | ✅      | ✅  | ✅       | ✅  |
| setVolume                          | ✅      | ✅  | ✅       | ✅  |
| stopAllPlayers                     | ✅      | ✅  | ✅       | ✅  |

## Supported listeners

| Name     | Android | iOS | Electron | Web |
| :------- | :------ | :-- | :------- | :-- |
| onReady  | ✅      | ✅  | ✅       | ✅  |
| onPlay   | ✅      | ✅  | ✅       | ✅  |
| onPause  | ✅      | ✅  | ✅       | ✅  |
| jonEnded | ✅      | ✅  | ✅       | ✅  |
| onExit   | ✅      | ✅  | ✅       | ✅  |


## Usage
Import the hook from its own path:

```js
 import { useVideoPlayer } from 'react-video-player-hook'
```

Then use the hook from that namespace in your app:

```js
import React from 'react'
import { Capacitor } from '@capacitor/core';
import { useState, useEffect, useRef } from 'react';
import { useVideoPlayer } from 'react-video-player-hook';
import { ExitStatus } from 'typescript';


const VideoPlayer = () => {
    const [url, setUrl] = useState( undefined );
    const platform = Capacitor.getPlatform();

    let apiTimer1 = useRef();
    let apiTimer2 = useRef();
    let apiCount = useRef(-1);
    const exit = useRef(false)

    const onPlay = async (fromPlayerId,currentTime) => {
        if(!exit.current) {
            const mIsPlaying = await isPlaying(fromPlayerId);
            console.log("==> mIsPlaying " + JSON.stringify(mIsPlaying));
            apiCount.current += 1;
            if(apiCount.current === 0) {
                const volume = await getVolume(fromPlayerId);
                if(volume.result) {
                    console.log("==> volume " + volume.value);
                } else {
                    console.log("==> volume " + volume.message);
                }
                apiTimer1.current = setTimeout(async () => {
                    const duration = await getDuration(fromPlayerId);
                    console.log("==> duration " + 
                                JSON.stringify(duration));
                    if(duration.result) {
                        console.log("==> duration " + duration.value);
                    } else {
                        console.log("==> duration " + duration.message);
                    }
                    const volume = await setVolume(fromPlayerId,0.2);
                    console.log("====> Volume ",volume.value);
                    const currentTime = await getCurrentTime(
                                        fromPlayerId);
                    if(currentTime.result) {
                        console.log('==> currentTime ' + 
                                currentTime.value);
                        const seektime = currentTime.value + 
                                0.4 * duration.value; 
                        console.log("seektime" + seektime)
                        const sCurrentTime = await setCurrentTime(
                                                fromPlayerId,seektime);
                        console.log("==> setCurrentTime " + 
                                sCurrentTime.value);
                    }
                    const mPause = await pause(fromPlayerId);
                    console.log('==> mPause ', mPause);
                }, 10000);
            } 
        }
    };
    const onPause = async (fromPlayerId,currentTime) => {
            if(!exit.current) {
            if(apiCount.current === 0) {
                apiCount.current += 1;
                const mIsPlaying = await isPlaying(fromPlayerId);
                console.log("==> in Pause mIsPlaying " +
                        mIsPlaying.value);
                const volume = await getVolume(fromPlayerId);
                if(volume.result) {
                    console.log("==> volume " + volume.value);
                }                
                const currentTime = await getCurrentTime(fromPlayerId);
                if(currentTime.result) {
                    console.log('==> currentTime ' + currentTime.value);
                }
                let muted = await getMuted(fromPlayerId);
                console.log("==> muted before setMuted " + muted.value);
                muted = await setMuted(fromPlayerId,!muted.value);
                console.log("==> setMuted " + muted.value);
                muted = await getMuted(fromPlayerId);
                console.log("==> muted after setMuted " + muted.value);
                apiTimer2.current = setTimeout(async () => {
                    const duration = await getDuration(fromPlayerId);
                    const rCurrentTime = await setCurrentTime(
                                        fromPlayerId,duration.value - 4);
                    console.log('====> setCurrentTime ',
                            rCurrentTime.value);
                    await play(fromPlayerId);
                }, 4000);
            }
        }
    };
    const onReady = (fromPlayerId,currentTime) => {
        console.log("in OnReady playerId " + fromPlayerId +
                " currentTime " + currentTime);
    };
    const onEnded = (fromPlayerId,currentTime) => {
        console.log("in OnEnded playerId " + fromPlayerId +
                " currentTime " + currentTime);
        exitClear();
    };
    const onExit = (dismiss) => {
        console.log("in OnExit dismiss " + dismiss);
        exitClear();
    };
    const exitClear = () => {
        if(!ExitStatus.current) {
            console.log("%%%% in cleanup Timers %%%%")
            window.clearTimeout(apiTimer1.current);
            window.clearTimeout(apiTimer2.current);
            apiTimer1.current = 0;
            apiTimer2.current = 0;
            console.log("apiTimer1.current " + apiTimer1.current)
            console.log("apiTimer2.current " + apiTimer2.current)
            exit.current = true;
            console.log("exit.current " + exit.current)
            setUrl("");
            console.log("url " + url)
        }
    };
    const {initPlayer, isPlaying, pause, play, getDuration, setVolume,
        getVolume, setMuted, getMuted, setCurrentTime, getCurrentTime,
        stopAllPlayers} = useVideoPlayer({
            onReady,
            onPlay,
            onPause,
            onEnded,
            onExit
    });

    useEffect(  () => {
        if ( platform === "ios" || platform === "android" ) {
            // test url from public/assets
            setUrl( 'public/assets/video/video.mp4' )
        } else {
            // test url from http:
            setUrl( 'http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4' )
        }
    }, [platform, url] )
    

    useEffect( () => {
        console.log("%%%%% starting useEffect exit " + exit.current + " %%%%%")

        if( url && !exit.current ) {
            // test mode "embedded" for video player on Web platform
            const playerWeb = async () => {
                await initPlayer( "embedded", url,
                "fullscreen-video",'div', 1280, 720);

                if ( res.result.result && res.result.value ) {
                    res = await play( "fullscreen-video" );
                }
/*                // test mode "fullscreen" for video player on Web platform
                await initPlayer( "fullscreen", url,
                                   "fullscreen-video",'div');
*/
            }
            // test mode "fullscreen" for video player 
            // on native platforms
            const playerNative = async () => {
                try {
                    await initPlayer("fullscreen", url,
                                     "fullscreen-video");

                } catch ( error ) {
                    console.log( error );
                }
            }
            if ( platform === "ios" || platform === "android" )
                playerNative();
            else
                playerWeb(); 
        
        }
        
    }, [initPlayer, play, isPlaying, pause, getDuration,
        getVolume, setVolume, getCurrentTime, setCurrentTime, 
        getMuted, setMuted, stopAllPlayers,
        platform, url, exit] );

    return (
        <div className="main-container">
            {(!exit.current) &&
                <div id="fullscreen-video" slot="fixed">
                </div>
            }
        </div>
    )
}

export default VideoPlayer
``` 

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://github.com/jepiqueau"><img src="https://avatars3.githubusercontent.com/u/16580653?v=4" width="100px;" alt=""/><br>
    <sub><b>Jean Pierre Quéau</b></sub></a><br />
    <a href="https://github.com/jepiqueau/react-video-player-hook/commits?author=jepiqueau" title="Code">💻</a>
    </td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

---
_Source: https://npm.io/package/react-video-player-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._