Merge branch 'master' into fix-timeSkip-buttons

LunatiqueCoder · May 30, 2024 · 1705d03 · 1705d03
2 parents ef86386 + 06a999a
commit 1705d03
Show file tree

Hide file tree

Showing 10 changed files with 466 additions and 455 deletions.
diff --git a/examples/VanillaVideoplayer/package.json b/examples/VanillaVideoplayer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanillavideoplayer",
-  "version": "2.2.0",
+  "version": "2.2.3",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
@@ -12,7 +12,7 @@
   "dependencies": {
     "react": "18.2.0",
     "react-native": "0.72.5",
-    "react-native-media-console": "^2.2.0",
+    "react-native-media-console": "^2.2.3",
     "react-native-video": "^5.2.1"
   },
   "devDependencies": {

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-native-media-console",
   "private": true,
-  "version": "2.2.0",
+  "version": "2.2.3",
   "description": "A media player for the react-native-video component",
   "license": "MIT",
   "source": "src/index",
@@ -59,16 +59,16 @@
   ],
   "devDependencies": {
     "@react-native-community/eslint-config": "^3.2.0",
-    "@release-it-plugins/workspaces": "^4.0.0",
-    "@release-it/bumper": "^5.1.0",
-    "@release-it/conventional-changelog": "^7.0.2",
+    "@release-it-plugins/workspaces": "4.2.0",
+    "@release-it/bumper": "6.0.1",
+    "@release-it/conventional-changelog": "8.0.1",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "eslint": "^7.14.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.29.3",
     "prettier": "^2.5.1",
-    "release-it": "^16.2.0",
+    "release-it": "17.3.0",
     "turbo": "^1.10.14"
   }
 }
diff --git a/packages/media-console/README.md b/packages/media-console/README.md
@@ -6,20 +6,19 @@
 [![GitHub top language][9]][10]
 [![Maintenance][11]][12]
 [![npm][13]][14]
+
 <!-- [![ci][1]][2] -->
 
 VideoPlayer for the React Native `<Video/>` component at [react-native-video][15].
 
 [![demogif][16]][17]
 
-### ⚠️ **Note:**
-> 
-> We're only supporting the beta version of `react-native-video`. Since it looks stable enough except for the subtitles (which might still be a WIP at the time of writing), we're already using it in production at http://englishdiscoveries.net/
-
 ## ⭐️ Features
 
 This package contains a simple set of GUI controls that work with the [react-native-video][15] `<Video>` component.
+
 - [x] `react-native-reanimated`
+- [x] tvOS support (partially, PRs are welcome)
 - [x] Back Button
 - [x] Volume bar
 - [x] Fullscreen button
@@ -30,6 +29,7 @@ This package contains a simple set of GUI controls that work with the [react-nat
 - [x] Error handling
 - [x] Timer
 - [ ] Rate button
+- [ ] Caption button
 
 By default the `<VideoPlayer>` accepts a navigator property from React's built-in `<Navigator>` which pops the current
 scene off the stack when tapped. Alternatively you can provide your own onBack prop to the component to override this
@@ -48,6 +48,10 @@ from [react-native-video][15].
 
 If you are using `react-native-reanimated`, then you can use `yarn add @react-native-media-console/reanimated`
 
+> **🚧 WARNING**
+>
+> You need react-native-video > 6.0.0 in order to use this library.
+
 ## 🛠 Usage
 
 The `<VideoPlayer>` component follows the API of the `<Video>` component
@@ -61,21 +65,21 @@ the current scene off the stack. This can be overridden if desired, see the [API
 ```javascript
 // At the top where our imports are...
 import VideoPlayer from 'react-native-media-console';
-// 👇 if you use react-native-reanimated 
+// 👇 if you use react-native-reanimated
 import {useAnimations} from '@react-native-media-console/reanimated';
 
 // in the component's render() function
 <VideoPlayer
-    useAnimations={useAnimations}
-    source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}}
-    navigator={props.navigator}
+  useAnimations={useAnimations}
+  source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}}
+  navigator={props.navigator}
 />;
 ```
 
 To play a local file, use require syntax like so:
 
 ```js
-<VideoPlayer source={require('path/to/file')}/>
+<VideoPlayer source={require('path/to/file')} />
 ```
 
 ## 🧰 API
@@ -90,10 +94,10 @@ the `<VideoPlayer />` and it will pass them through to the `<Video />` component
 In addition, the `<VideoPlayer />` also takes these props:
 
 | Prop                         | Type                                          | Default                                  | Description                                                                                                                                                            |
-|------------------------------|-----------------------------------------------|------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| ---------------------------- | --------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
 | alwaysShowControls           | Boolean                                       | false                                    | Always show controls.                                                                                                                                                  |
 | controlAnimationTiming       | Integer                                       | 500                                      | The amount of time (in milliseconds) to animate the controls in and out.                                                                                               |
-| controlTimeoutDelay          | Integer                                       | 15000                                    | Hide controls after X amount of time in milliseconds                                                                                                                   |                           |
+| controlTimeoutDelay          | Integer                                       | 15000                                    | Hide controls after X amount of time in milliseconds                                                                                                                   |     |
 | doubleTapTime                | Integer                                       | 130                                      | Tapping twice within this amount of time in milliseconds is considered a double tap. Single taps will not be actioned until this time has expired.                     |
 | isFullscreen                 | Boolean                                       | false                                    | The VideoPlayer fullscreen state                                                                                                                                       |
 | navigator                    | Navigator                                     | null                                     | When using the default React Native navigator and do not override the `onBack` function, you'll need to pass the navigator to the VideoPlayer for it to function       |
@@ -116,7 +120,7 @@ In addition, the `<VideoPlayer />` also takes these props:
 These are various events that you can hook into and fire functions on in the component:
 
 | Callback          | Description                                                                     |
-|-------------------|---------------------------------------------------------------------------------|
+| ----------------- | ------------------------------------------------------------------------------- |
 | onEnterFullscreen | Fired when the video enters fullscreen after the fullscreen button is pressed   |
 | onExitFullscreen  | Fired when the video exits fullscreen after the fullscreen button is pressed    |
 | onHideControls    | Fired when the controls disappear                                               |
@@ -133,7 +137,7 @@ These are the various controls that you can turn on/off as needed. All of these
 disable any controls
 
 | Control            | Description                                                                                                                         |
-|--------------------|-------------------------------------------------------------------------------------------------------------------------------------|
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |
 | disableFullscreen  | Hide the fullscreen button                                                                                                          |
 | disablePlayPause   | Hide the play/pause toggle and the rewind/forward buttons                                                                           |
 | disableSeekButtons | Hide the rewind/forward buttons (but not play/pause)                                                                                |
@@ -160,47 +164,27 @@ disable any controls
 ## 🏆 Sponsors
 
 |                           |                                |
-|---------------------------|--------------------------------|
+| ------------------------- | ------------------------------ |
 | [![jetbrains100][18]][19] | [![englishdislogo100][20]][21] |
 
 [1]: https://github.com/LunatiqueCoder/react-native-media-console/workflows/ci/badge.svg
-
 [2]: https://github.com/LunatiqueCoder/react-native-media-console/actions
-
 [3]: https://img.shields.io/badge/platforms-Android%20%7C%20iOS%20%7C%20tvOS-brightgreen.svg?style=flat-square&colorB=191A17
-
 [4]: https://github.com/react-native-tvos/react-native-tvos
-
 [5]: https://img.shields.io/github/issues/LunatiqueCoder/react-native-media-console
-
 [6]: https://github.com/LunatiqueCoder/react-native-media-console/issues
-
 [7]: https://img.shields.io/github/license/LunatiqueCoder/react-native-media-console
-
 [8]: https://github.com/LunatiqueCoder/react-native-media-console/blob/master/LICENSE
-
 [9]: https://img.shields.io/github/languages/top/LunatiqueCoder/react-native-media-console
-
 [10]: https://github.com/LunatiqueCoder/react-native-media-console/search?l=typescript
-
-[11]: https://img.shields.io/maintenance/yes/2023
-
+[11]: https://img.shields.io/maintenance/yes/2025
 [12]: https://github.com/LunatiqueCoder/react-native-media-console/graphs/contributors
-
 [13]: https://img.shields.io/npm/v/react-native-media-console
-
 [14]: https://www.npmjs.com/package/react-native-media-console
-
 [15]: https://github.com/react-native-video/react-native-video
-
 [16]: https://user-images.githubusercontent.com/55203625/159137837-4e34a8be-1cbb-48ae-9d67-99ce4922e660.gif
-
 [17]: https://user-images.githubusercontent.com/55203625/159138065-cf3554b6-3f8b-4cab-bf94-0f3fc0b57333.gif
-
 [18]: https://user-images.githubusercontent.com/55203625/213786907-b95dfb4b-08bf-4449-a055-72edf401da23.png
-
 [19]: https://www.jetbrains.com/
-
 [20]: https://user-images.githubusercontent.com/55203625/213786736-1d0226de-f810-4ece-968f-08c81c769948.png
-
 [21]: https://englishdiscoveries.page.link/fJc4
diff --git a/packages/media-console/package.json b/packages/media-console/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-media-console",
-  "version": "2.2.0",
+  "version": "2.2.3",
   "description": "A media player for the react-native-video component",
   "license": "MIT",
   "source": "src/index",

diff --git a/packages/media-console/src/OSSupport/PlatformSupport.tsx b/packages/media-console/src/OSSupport/PlatformSupport.tsx
@@ -13,13 +13,15 @@ interface OSSupport {
   containerStyles: StyleProp<ViewStyle>;
   onScreenTouch: () => void;
   showControls: boolean;
+  testID?: string;
 }
 
 export const PlatformSupport = ({
   children,
   onScreenTouch,
   containerStyles,
   showControls,
+  testID,
 }: OSSupport) => {
   if (Platform.isTV) {
     return (
@@ -35,6 +37,7 @@ export const PlatformSupport = ({
 
   return (
     <TouchableWithoutFeedback
+      testID={testID}
       onPress={onScreenTouch}
       style={[_styles.player.container, containerStyles]}>
       {children}

diff --git a/packages/media-console/src/VideoPlayer.tsx b/packages/media-console/src/VideoPlayer.tsx
@@ -75,6 +75,7 @@ const AnimatedVideoPlayer = (
     navigator,
     rewindTime = 15,
     pan: {horizontal: horizontalPan, inverted: invertedPan} = {},
+    testID,
   } = props;
 
   const mounted = useRef(false);
@@ -304,12 +305,14 @@ const AnimatedVideoPlayer = (
       setResizeMode(_isFullscreen ? ResizeMode.COVER : ResizeMode.CONTAIN);
     }
 
-    if (_isFullscreen) {
-      typeof events.onEnterFullscreen === 'function' &&
-        events.onEnterFullscreen();
-    } else {
-      typeof events.onExitFullscreen === 'function' &&
-        events.onExitFullscreen();
+    if (mounted.current) {
+      if (_isFullscreen) {
+        typeof events.onEnterFullscreen === 'function' &&
+          events.onEnterFullscreen();
+      } else {
+        typeof events.onExitFullscreen === 'function' &&
+          events.onExitFullscreen();
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [_isFullscreen, toggleResizeModeOnFullscreen]);
@@ -320,10 +323,6 @@ const AnimatedVideoPlayer = (
 
   useEffect(() => {
     setPaused(paused);
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-    };
   }, [paused]);
 
   useEffect(() => {
@@ -431,7 +430,8 @@ const AnimatedVideoPlayer = (
     <PlatformSupport
       showControls={showControls}
       containerStyles={styles.containerStyle}
-      onScreenTouch={events.onScreenTouch}>
+      onScreenTouch={events.onScreenTouch}
+      testID={testID}>
       <View style={[_styles.player.container, styles.containerStyle]}>
         <Video
           {...props}

diff --git a/packages/media-console/src/package.json b/packages/media-console/src/package.json
@@ -27,16 +27,15 @@
   "dependencies": {},
   "peerDependencies": {
     "react-native": ">=0.46.0",
-    "react-native-video": ">=2.0.0",
+    "react-native-video": ">=6.0.0",
     "react-native-reanimated": "^2.12.0"
   },
   "devDependencies": {
-    "@types/react-native-video": "^5.0.14",
-    "react": "^17.0.2",
-    "react-native": "npm:[email protected]",
+    "react": "18.3.1",
+    "react-native": "npm:[email protected]",
     "react-native-builder-bob": "^0.18.2",
-    "react-native-video": "^5.2.0",
-    "react-native-reanimated": "^2.12.0",
+    "react-native-video": "6.1.2",
+    "react-native-reanimated": "3.11.0",
     "release-it": "^15.6.0",
     "typescript": "^4.6.2"
   },

diff --git a/packages/media-console/src/types.ts b/packages/media-console/src/types.ts
@@ -264,4 +264,8 @@ export interface VideoPlayerProps extends ReactVideoProps {
      */
     inverted?: boolean;
   };
+  /**
+   * testID selector for testing
+   */
+  testID?: string;
 }
diff --git a/packages/reanimated/package.json b/packages/reanimated/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-native-media-console/reanimated",
-  "version": "2.2.0",
+  "version": "2.2.3",
   "description": "A media player for the react-native-video component",
   "license": "MIT",
   "source": "src/index",
@@ -29,7 +29,7 @@
     "react-native": ">=0.46.0",
     "react-native-video": ">=2.0.0",
     "react-native-reanimated": "^2.12.0",
-    "react-native-media-console": "^2.2.0"
+    "react-native-media-console": "^2.2.3"
   },
   "devDependencies": {
     "@types/react-native-video": "^5.0.14",