diff --git a/CHANGELOG.md b/CHANGELOG.md
index ab82a89..ae77722 100644
--- 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
index 443dbec..e3cd4f3 100644
--- 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
index 20d564e..71e4a6e 100644
--- 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) => (
+
+
+ {props.label}
+ )
const App: () => React$Node = () => {
-var muteTitle = "mute"
-const [mute, setMute] = React.useState(false);
-const [hideControls, setHideControls] = React.useState(false);
-const [hideTitle, setHideTitle] = React.useState(false);
-const [actions, setActions] = React.useState<'play' | 'pause'>('pause');
-const [autoPlay, setAutoPlay] = React.useState(false);
-const [loop, setLoop] = React.useState(false);
+ const [mute, setMute] = React.useState(true);
+ const [hideControls, setHideControls] = React.useState(false);
+ const [hideTitle, setHideTitle] = React.useState(false);
+ const [autoPlay, setAutoPlay] = React.useState(false);
+ const [loop, setLoop] = React.useState(false);
+ const [isPlaying, setIsPlaying] = React.useState(false);
+ const [currentTime, setCurrentTime] = React.useState(0);
+ const [events, setEvents] = React.useState([]);
+ const [eventsCount, setEventsCount] = React.useState(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 (
<>
(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')}
/>
+
+
+
+ setMute(!mute)}
+ />
+ { isPlaying ? player.current.pause() : player.current.play() }} />
+ setLoop(!loop)}
+ />
+ setHideControls(!hideControls)}
+ />
+ {/* TODO: uncomment once it's supported by the player
+ setHideTitle(!hideTitle)}
+ /> */}
+
+
- {`Current Settings:`}
- {`Action: ${actions}`}
- {`Hide controls: ${hideControls}`}
+ {`Current Settings:`}
{`Hide title: ${hideTitle}`}
- {`Muted: ${mute}`}
{`Auto play: ${autoPlay}`}
- {`Loop: ${loop}`}
-
-
- {`Hide Controls`}
- {
- if (hideControls) {
- setHideControls(false);
- } else {
- setHideControls(true);
- }
- }}
- />
-
-
- {`Mute`}
- {
- if (mute === true) {
- setMute(false);
- //this.player.mute();
- muteTitle = "Unmute";
- } else {
- setMute(true);
- //this.player.unmute();
- muteTitle = "Mute";
- }
- }}
- />
-
-
- {actions}
- {
- if (actions === 'pause') {
- this.player.play()
- setActions('play');
- } else {
- this.player.pause()
- setActions('pause');
- }
- }}
- />
-
-
- {'Hide Title'}
- {
- if (hideTitle === true) {
- setHideTitle(false);
- } else {
- setHideTitle(true);
- }
- }}
- />
-
-
- {'Auto Play'}
- {
- if (autoPlay === true) {
- setAutoPlay(false);
- } else {
- setAutoPlay(true);
- }
- }}
- />
-
-
- {'Loop'}
- {
- if (loop === true) {
- setLoop(false);
- } else {
- setLoop(true);
- }
- }}
- />
+ {`Current time: ${parseInt(`${currentTime * 100}`, 10) / 100}s`}
+
+ {`Events:`}
+ {events.map(event => {event})}
);
};
-
-
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
index a884732..8def004 100644
--- 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",