diff --git a/CHANGELOG.md b/CHANGELOG.md index ae77722..5c5e971 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.6] - 2021-06-14 +- Possibility to change hideTitle & videoId props during playback +- Implement these new options in the sample + ## [0.0.5] - 2021-06-14 - Allow to change the player props values during playback - Cosmetic changes in the sample app diff --git a/example/App.tsx b/example/App.tsx index 71e4a6e..434da67 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -10,18 +10,27 @@ import ApiVideoPlayer from '@api.video/react-native-player'; import * as React from 'react'; import { StyleSheet, - Text, View, Switch + Text, View, Switch, Picker, Button } from 'react-native'; +const VIDEOS = [{ + id: "vi2BgDGC8r4sspRnMblc4WVX", + title: "Street video" +}, +{ + id: "vi2G6Qr8ZVE67dWLNymk7qbc", + title: "Time video" +}]; + type LabeledSwitchProps = { - label: string, + label: string, onPress: () => void, isOn: boolean, }; // a switch button with a label const LabeledSwitch = (props: LabeledSwitchProps) => ( - + ( {props.label} ) + const App: () => React$Node = () => { const [mute, setMute] = React.useState(true); const [hideControls, setHideControls] = React.useState(false); @@ -41,14 +51,16 @@ const App: () => React$Node = () => { const [currentTime, setCurrentTime] = React.useState(0); const [events, setEvents] = React.useState([]); const [eventsCount, setEventsCount] = React.useState(1); + const [videoId, setVideoId] = React.useState(VIDEOS[0].id); 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 + if (eventsCopy.length > 5) eventsCopy.shift(); // we keep only the 6 last lines setEvents([...eventsCopy, `${eventsCount}. ${new Date().toLocaleTimeString()}: ${event}`]); - setEventsCount(eventsCount+1); + setEventsCount(eventsCount + 1); } return ( @@ -56,14 +68,15 @@ const App: () => React$Node = () => { (player.current = r)} - videoId="vi2G6Qr8ZVE67dWLNymk7qbc" + ref={(r) => (player.current = r)} + videoId={videoId} hideControls={hideControls} - hideTitle={true} + hideTitle={hideTitle} muted={mute} + autoplay={autoPlay} loop={loop} - // update the current time displayed in the app + // update the current time displayed in the app onTimeUpdate={(time) => setCurrentTime(time)} // on play/pause events, update the "isPlaying" state & log the event @@ -80,7 +93,7 @@ const App: () => React$Node = () => { onPlayerResize={() => logEvent('onPlayerResize')} onQualityChange={() => logEvent('onQualityChange')} onRateChange={() => logEvent('onRateChange')} - onReady={() => logEvent('onReady')} + onReady={() => { setIsPlaying(false); logEvent('onReady'); }} onResize={() => logEvent('onResize')} onSeeking={() => logEvent('onSeeking')} onUserActive={() => logEvent('onUserActive')} @@ -106,17 +119,25 @@ const App: () => React$Node = () => { isOn={loop} onPress={() => setLoop(!loop)} /> + + setHideControls(!hideControls)} /> - {/* TODO: uncomment once it's supported by the player - setHideTitle(!hideTitle)} - /> */} + setAutoPlay(!autoPlay)} + /> + + + + {VIDEOS.map(video =>