From bf7029dbd1f5c0f92d35cf42296964cfbdd471f0 Mon Sep 17 00:00:00 2001 From: Olivier Lando Date: Fri, 11 Jun 2021 17:56:26 +0200 Subject: [PATCH 1/4] Add current time --- example/App.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/example/App.tsx b/example/App.tsx index 20d564e..96bc654 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -26,6 +26,7 @@ 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 [currentTime, setCurrentTime] = React.useState(0); return ( <> @@ -36,6 +37,7 @@ const [loop, setLoop] = React.useState(false); hideTitle={true} muted={mute} loop={loop} + onTimeUpdate={(time) => setCurrentTime(time)} /> @@ -52,6 +54,7 @@ const [loop, setLoop] = React.useState(false); {`Muted: ${mute}`} {`Auto play: ${autoPlay}`} {`Loop: ${loop}`} + {`Current time: ${parseInt(`${currentTime*100}`, 10)/100}s`} {`Hide Controls`} From ccf373aab4a9a4845aaf90cef29284b34327f658 Mon Sep 17 00:00:00 2001 From: Olivier Lando Date: Fri, 11 Jun 2021 18:27:46 +0200 Subject: [PATCH 2/4] minor refacto in sample --- example/App.tsx | 241 +++++++++++++++++++++--------------------------- 1 file changed, 104 insertions(+), 137 deletions(-) diff --git a/example/App.tsx b/example/App.tsx index 96bc654..71e4a6e 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -6,180 +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}`} - {`Current time: ${parseInt(`${currentTime*100}`, 10)/100}s`} - - - {`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; From e92d21adef75d5001e1a2dbabfa80eb7b4fe04f2 Mon Sep 17 00:00:00 2001 From: Olivier Lando Date: Mon, 14 Jun 2021 10:56:02 +0200 Subject: [PATCH 3/4] Remove reference to methods that are redundant with props --- README.md | 5 ----- 1 file changed, 5 deletions(-) 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 From 0d86b03f60c9f8fdb7b49cb23952bd70d20ef85b Mon Sep 17 00:00:00 2001 From: Olivier Lando Date: Mon, 14 Jun 2021 10:58:09 +0200 Subject: [PATCH 4/4] v0.0.5 --- CHANGELOG.md | 4 ++++ package.json | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) 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/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",