Merge pull request #5 from apivideo/add-current-time-in-sample

Add current time in sample
apivideo · Jun 14, 2021 · f161716 · f161716
2 parents 12457d8 + 0d86b03
commit f161716
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 142 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 # Changelog
 All changes to this project will be documented in this file.
 
+## [0.0.5] - 2021-06-14
+- Allow to change the player props values during playback
+- Cosmetic changes in the sample app
+
 ## [0.0.4] - 2021-06-10
 - Add Changelog
 - Add example app 
diff --git a/README.md b/README.md
@@ -113,15 +113,10 @@ type PlayerProps = {
 play(): void;
 pause(): void;
 requestFullscreen(): void;
-mute(): void;
-hideControls(): void;
-showControls(): void;
 seek(time: number): void;
 setCurrentTime(time: number): void;
-setLoop(loop: boolean): void;
 setPlaybackRate(rate: number): void;
 setVolume(volume: number): void;
-unmute(): void;
 ```
 
 ### FAQ

diff --git a/example/App.tsx b/example/App.tsx
@@ -6,177 +6,147 @@
  * @flow strict-local
  */
 
+import ApiVideoPlayer from '@api.video/react-native-player';
 import * as React from 'react';
 import {
   StyleSheet,
-  View,
-  Button,
-  TouchableOpacity,
-  Text,
+  Text, View, Switch
 } from 'react-native';
-import ApiVideoPlayer from '@api.video/react-native-player';
 
+type LabeledSwitchProps = {
+  label: string, 
+  onPress: () => void,
+  isOn: boolean,
+};
 
+// a switch button with a label
+const LabeledSwitch = (props: LabeledSwitchProps) => (
+  <View style={{ width: '25%', alignItems: 'center' }}>
+    <Switch
+      trackColor={{ false: "#767577", true: "#81b0ff" }}
+      thumbColor="#f4f3f4"
+      onValueChange={props.onPress}
+      value={props.isOn}
+    />
+    <Text style={{ color: 'black' }}>{props.label}</Text>
+  </View>)
 
 const App: () => React$Node = () => {
-var muteTitle = "mute"
-const [mute, setMute] = React.useState<true | false>(false);
-const [hideControls, setHideControls] = React.useState<true | false>(false);
-const [hideTitle, setHideTitle] = React.useState<true | false>(false);
-const [actions, setActions] = React.useState<'play' | 'pause'>('pause');
-const [autoPlay, setAutoPlay] = React.useState<true | false>(false);
-const [loop, setLoop] = React.useState<true | false>(false);
+  const [mute, setMute] = React.useState<boolean>(true);
+  const [hideControls, setHideControls] = React.useState<boolean>(false);
+  const [hideTitle, setHideTitle] = React.useState<boolean>(false);
+  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);
+  const [events, setEvents] = React.useState<string[]>([]);
+  const [eventsCount, setEventsCount] = React.useState<number>(1);
+  const player = React.useRef(undefined as ApiVideoPlayer);
+
+  // add a line to the list of events displayed in the app
+  const logEvent = (event: string) => {
+    const eventsCopy = [...events];
+    if(eventsCopy.length > 5) eventsCopy.shift(); // we keep only the 6 last lines
+    setEvents([...eventsCopy, `${eventsCount}. ${new Date().toLocaleTimeString()}: ${event}`]);
+    setEventsCount(eventsCount+1);
+  }
+
   return (
     <>
       <View style={styles.view}>
         <ApiVideoPlayer
-          ref={(r) => (this.player = r)}
-          videoId="vi7UI8yyf9QUO0EMy5wExsj0"
+          // we keep a ref to be able to call the play() & pause() methods
+          ref={(r) => (player.current = r)} 
+          videoId="vi2G6Qr8ZVE67dWLNymk7qbc"
           hideControls={hideControls}
           hideTitle={true}
           muted={mute}
           loop={loop}
+
+          // update the current time displayed in the app
+          onTimeUpdate={(time) => setCurrentTime(time)}
+
+          // on play/pause events, update the "isPlaying" state & log the event
+          onPlay={() => { logEvent('play'); setIsPlaying(true) }}
+          onPause={() => { logEvent('pause'); setIsPlaying(false); }}
+
+          // when the following events are received, simply log them
+          onControlsDisabled={() => logEvent('onControlsDisabled')}
+          onControlsEnabled={() => logEvent('onControlsEnabled')}
+          onEnded={() => logEvent('onEnded')}
+          onError={() => logEvent('onError')}
+          onFirstPlay={() => logEvent('onFirstPlay')}
+          onFullScreenChange={() => logEvent('onFullScreenChange')}
+          onPlayerResize={() => logEvent('onPlayerResize')}
+          onQualityChange={() => logEvent('onQualityChange')}
+          onRateChange={() => logEvent('onRateChange')}
+          onReady={() => logEvent('onReady')}
+          onResize={() => logEvent('onResize')}
+          onSeeking={() => logEvent('onSeeking')}
+          onUserActive={() => logEvent('onUserActive')}
+          onUserInactive={() => logEvent('onUserInactive')}
+          onVolumeChange={() => logEvent('onVolumeChange')}
         />
 
       </View>
+
+
+      <View style={styles.columnsContainer}>
+        <LabeledSwitch
+          label='mute'
+          isOn={mute}
+          onPress={() => setMute(!mute)}
+        />
+        <LabeledSwitch
+          label='playing'
+          isOn={isPlaying}
+          onPress={() => { isPlaying ? player.current.pause() : player.current.play() }} />
+        <LabeledSwitch
+          label='loop'
+          isOn={loop}
+          onPress={() => setLoop(!loop)}
+        />
+        <LabeledSwitch
+          label='hide controls'
+          isOn={hideControls}
+          onPress={() => setHideControls(!hideControls)}
+        />
+        {/* TODO: uncomment once it's supported by the player
+       <LabeledSwitch
+        label='Hide title'
+        isOn={hideTitle}
+        onPress={() => setHideTitle(!hideTitle)}
+      /> */}
+      </View>
+
       <View
         style={{
+          flex: 3,
           padding: 8,
           backgroundColor: '#00000050',
         }}
       >
-        <Text style={{ color: 'white' }}>{`Current Settings:`}</Text>
-        <Text style={{ color: 'white' }}>{`Action: ${actions}`}</Text>
-        <Text style={{ color: 'white' }}>{`Hide controls: ${hideControls}`}</Text>
+        <Text style={{ color: 'white', fontWeight: 'bold' }}>{`Current Settings:`}</Text>
         <Text style={{ color: 'white' }}>{`Hide title: ${hideTitle}`}</Text>
-        <Text style={{ color: 'white' }}>{`Muted: ${mute}`}</Text>
         <Text style={{ color: 'white' }}>{`Auto play: ${autoPlay}`}</Text>
-        <Text style={{ color: 'white' }}>{`Loop: ${loop}`}</Text>
-      </View>
-      <View style={{ position: 'absolute', bottom: 40, right: 20 }}>
-        <Text style={{ color: 'black' }}>{`Hide Controls`}</Text>
-        <TouchableOpacity
-          style={{
-            borderRadius: 50,
-            backgroundColor: 'blue',
-            width: 50,
-            height: 50,
-          }}
-          onPress={() => {
-            if (hideControls) {
-              setHideControls(false);
-            } else {
-              setHideControls(true);
-            }
-          }}
-        />
-      </View>
-      <View style={{ position: 'absolute', bottom: 40, left: 20 }}>
-        <Text style={{ color: 'black' }}>{`Mute`}</Text>
-        <TouchableOpacity
-          style={{
-            borderRadius: 50,
-            backgroundColor: 'yellow',
-            width: 50,
-            height: 50,
-          }}
-          onPress={() => {
-            if (mute === true) {
-              setMute(false);
-              //this.player.mute();
-              muteTitle = "Unmute";
-            } else {
-              setMute(true);
-              //this.player.unmute();
-              muteTitle = "Mute";
-            }
-          }}
-        />
-      </View>
-      <View style={{ position: 'absolute', bottom: 110, right: 20 }}>
-      <Text style={{ color: 'black' }}>{actions}</Text>
-        <TouchableOpacity
-          style={{
-            borderRadius: 50,
-            backgroundColor: 'green',
-            width: 50,
-            height: 50,
-          }}
-          onPress={() => {
-            if (actions === 'pause') {
-              this.player.play()
-              setActions('play');
-            } else {
-              this.player.pause()
-              setActions('pause');
-            }
-          }}
-        />
-      </View>
-      <View style={{ position: 'absolute', bottom: 110, left: 20 }}>
-      <Text style={{ color: 'black' }}>{'Hide Title'}</Text>
-        <TouchableOpacity
-          style={{
-            borderRadius: 50,
-            backgroundColor: 'purple',
-            width: 50,
-            height: 50,
-          }}
-          onPress={() => {
-            if (hideTitle === true) {
-              setHideTitle(false);
-            } else {
-              setHideTitle(true);
-            }
-          }}
-        />
-      </View>
-      <View style={{ position: 'absolute', bottom: 180, left: 20 }}>
-      <Text style={{ color: 'black' }}>{'Auto Play'}</Text>
-        <TouchableOpacity
-          style={{
-            borderRadius: 50,
-            backgroundColor: 'orange',
-            width: 50,
-            height: 50,
-          }}
-          onPress={() => {
-            if (autoPlay === true) {
-              setAutoPlay(false);
-            } else {
-              setAutoPlay(true);
-            }
-          }}
-        />
-      </View>
-      <View style={{ position: 'absolute', bottom: 180, right: 20 }}>
-      <Text style={{ color: 'black' }}>{'Loop'}</Text>
-        <TouchableOpacity
-          style={{
-            borderRadius: 50,
-            backgroundColor: 'red',
-            width: 50,
-            height: 50,
-          }}
-          onPress={() => {
-            if (loop === true) {
-              setLoop(false);
-            } else {
-              setLoop(true);
-            }
-          }}
-        />
+        <Text style={{ color: 'white' }}>{`Current time: ${parseInt(`${currentTime * 100}`, 10) / 100}s`}</Text>
+
+        <Text style={{ color: 'white', fontWeight: 'bold', marginTop: 20 }}>{`Events:`}</Text>
+        {events.map(event => <Text key={event} style={{ color: 'white', fontSize: 12 }}>{event}</Text>)}
       </View>
     </>
   );
 };
 
-
-
 const styles = StyleSheet.create({
   view: {
-    flex: 0.5,
+    flex: 2,
   },
+  columnsContainer: {
+    flexDirection: 'row',
+    marginTop: 20,
+    marginBottom: 20,
+  }
 });
 
 export default App;
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@api.video/react-native-player",
   "author": "api.video",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React Native api.video player",
   "repository": {
     "type": "git",