Add and params

CHANGELOG.md

@@ -5,6 +5,7 @@ All changes to this project will be documented in this file.
 ## [1.1.0] - 2024-06-18
 
 - Bump depdependencies versions. Migrate to functionnal component.
+- Add `chromeless` and `responsive` options
 
 ## [1.0.2] - 2023-07-18
 

example/src/App.tsx

@@ -9,6 +9,7 @@
 import ApiVideoPlayer, {
   type ApiVideoPlayerRef,
 } from '@api.video/react-native-player';
+
 import * as React from 'react';
 import { Button, StyleSheet, Switch, Text, View } from 'react-native';
 
@@ -45,8 +46,8 @@ const LabeledSwitch = (props: LabeledSwitchProps) => (
 const App: () => React.ReactNode = () => {
   const [mute, setMute] = React.useState<boolean>(false);
   const [hideControls, setHideControls] = React.useState<boolean>(false);
-  const [hideTitle, setHideTitle] = React.useState<boolean>(false);
-  const [autoPlay, setAutoPlay] = React.useState<boolean>(true);
+  const [chromeless, setChromeless] = React.useState<boolean>(true);
+  const [autoPlay, setAutoPlay] = React.useState<boolean>(false);
   const [loop, setLoop] = React.useState<boolean>(false);
   const [isPlaying, setIsPlaying] = React.useState<boolean>(false);
   const [currentTime, setCurrentTime] = React.useState<number>(0);
@@ -75,7 +76,8 @@ const App: () => React.ReactNode = () => {
           ref={(r) => (player.current = r)}
           videoId={videoId}
           hideControls={hideControls}
-          hideTitle={hideTitle}
+          responsive={true}
+          chromeless={chromeless}
           muted={mute}
           autoplay={autoPlay}
           loop={loop}
@@ -100,10 +102,7 @@ const App: () => React.ReactNode = () => {
           onPlayerResize={() => logEvent('onPlayerResize')}
           onQualityChange={() => logEvent('onQualityChange')}
           onRateChange={() => logEvent('onRateChange')}
-          onReady={() => {
-            setIsPlaying(false);
-            logEvent('onReady');
-          }}
+          onReady={() => logEvent('onReady')}
           onResize={() => logEvent('onResize')}
           onSeeking={() => logEvent('onSeeking')}
           onUserActive={() => logEvent('onUserActive')}
@@ -137,6 +136,11 @@ const App: () => React.ReactNode = () => {
           isOn={hideControls}
           onPress={() => setHideControls(!hideControls)}
         />
+        <LabeledSwitch
+          label="chromeless"
+          isOn={chromeless}
+          onPress={() => setChromeless(!chromeless)}
+        />
         <LabeledSwitch
           label="auto play"
           isOn={autoPlay}
@@ -185,7 +189,7 @@ const styles = StyleSheet.create({
   },
   columnsContainer: {
     flexDirection: 'row',
-    marginTop: 20,
+    marginTop: 50,
     marginBottom: 20,
   },
 });

example/tsconfig.json

@@ -1,6 +1,9 @@
 {
   "extends": "../tsconfig",
   "compilerOptions": {
-    // Avoid expo-cli auto-generating a tsconfig
+    "baseUrl": ".", // Cela définit la base du dossier pour la résolution des modules
+    "paths": {
+      "@api.video/react-native-player": [".."] // Ajustez le chemin selon l'emplacement réel
+    }
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@api.video/react-native-player",
   "author": "api.video <ecosystem@api.video>",
-  "version": "1.1.1",
+  "version": "1.1.0",
   "description": "React Native api.video player",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/index.tsx

@@ -5,7 +5,7 @@ import React, {
   useRef,
   type Ref,
 } from 'react';
-import { type StyleProp, type ViewStyle } from 'react-native';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { WebView } from 'react-native-webview';
 
 const PLAYER_HOST = 'https://embed.api.video';
@@ -17,11 +17,13 @@ export type PlayerProps = {
   sessionToken?: string;
   type?: 'vod' | 'live';
   hideControls?: boolean;
+  chromeless?: boolean;
   hideTitle?: boolean;
   autoplay?: boolean;
   loop?: boolean;
   muted?: boolean;
   style?: StyleProp<ViewStyle>;
+  responsive?: boolean;
 
   onControlsDisabled?: () => void;
   onControlsEnabled?: () => void;
@@ -63,6 +65,7 @@ export interface ApiVideoPlayerRef {
   hideTitle: () => void;
   showTitle: () => void;
   hideControls: () => void;
+  setChromeless: (chromeless: boolean) => void;
   showControls: () => void;
   loadConfigFromUrl: (url: string) => void;
   seek: (time: number) => void;
@@ -156,6 +159,10 @@ const ApiVideoPlayer = forwardRef(
         if (isNaN(volume)) throw new Error('Invalid volume');
         injectJavaScript(`player.volume(${volume});`);
       },
+      setChromeless: (chromeless: boolean) => {
+        console.log('toto');
+        injectJavaScript(`player.setChromeless(${chromeless});`);
+      },
     }));
 
     useEffect(() => {
@@ -166,6 +173,12 @@ const ApiVideoPlayer = forwardRef(
       }
     }, [props.hideControls]);
 
+    useEffect(() => {
+      if (props.chromeless !== undefined) {
+        injectJavaScript(`player.setChromeless(${props.chromeless});`);
+      }
+    }, [props.chromeless]);
+
     useEffect(() => {
       if (props.loop !== undefined) {
         injectJavaScript(`player.loop(${props.loop});`);
@@ -266,20 +279,47 @@ const ApiVideoPlayer = forwardRef(
       }
     };
 
+    const webViewStyle: StyleProp<ViewStyle> = props.style || DEFAULT_STYLE;
+    const innerStyle = { ...(webViewStyle as any) };
+
     return playerUrl ? (
-      <WebView
-        ref={webref}
-        source={{ uri: playerUrl }}
-        style={props.style || DEFAULT_STYLE}
-        scrollEnabled={false}
-        onMessage={(msg) => onMessage(JSON.parse(msg.nativeEvent.data))}
-        allowsInlineMediaPlayback={true}
-        allowsFullscreenVideo={true}
-        mediaPlaybackRequiresUserAction={false}
-        injectedJavaScriptBeforeContentLoaded={`window.addEventListener('message', (m) => window.ReactNativeWebView.postMessage(JSON.stringify(m.data)))`}
-      />
+      <ResponsiveContainer
+        ratio={ratio}
+        isResponsive={props.responsive || false}
+        width={((props.style || DEFAULT_STYLE) as any)?.width}
+      >
+        <WebView
+          ref={webref}
+          source={{ uri: playerUrl }}
+          style={{
+            ...innerStyle,
+            ...(props.responsive ? { width: '100%' } : {}),
+          }}
+          scrollEnabled={false}
+          onMessage={(msg) => onMessage(JSON.parse(msg.nativeEvent.data))}
+          allowsInlineMediaPlayback={true}
+          allowsFullscreenVideo={true}
+          mediaPlaybackRequiresUserAction={false}
+          injectedJavaScriptBeforeContentLoaded={`window.addEventListener('message', (m) => window.ReactNativeWebView.postMessage(JSON.stringify(m.data)))`}
+        />
+      </ResponsiveContainer>
     ) : null;
   }
 );
 
+const ResponsiveContainer = (props: {
+  isResponsive: boolean;
+  width?: number;
+  ratio?: number;
+  children: JSX.Element;
+}): JSX.Element => {
+  if (!props.isResponsive || !props.width || !props.ratio)
+    return props.children;
+  return (
+    <View style={{ width: props.width, aspectRatio: props.ratio }}>
+      {props.children}
+    </View>
+  );
+};
+
 export default ApiVideoPlayer;