-
Notifications
You must be signed in to change notification settings - Fork 83
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
![screenshot from 2018-10-21 12-28-54](https://user-images.githubusercontent.com/38995824/47264270-017cc980-d52d-11e8-8d46-976f8ad7e11f.png) #8
Comments
Strings must be in Text components
…On Tue, 30 Apr 2019, 11:02 a.m. shubham-akole, ***@***.***> wrote:
[image: screenshot from 2018-10-21 12-28-54]
<https://user-images.githubusercontent.com/38995824/47264270-017cc980-d52d-11e8-8d46-976f8ad7e11f.png>
please help me to solve this error
*Originally posted by @Waqas-Jani <https://github.com/Waqas-Jani> in #1
(comment)
<#1 (comment)>*
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#8>, or mute the thread
<https://github.com/notifications/unsubscribe-auth/AJJQO4E3Y4HTNB2KKOOB2STPS7OG7ANCNFSM4HJIWUOQ>
.
|
react native is new for me so where i pass string .can you elaborate. |
Your code screenshort
…On Tue, 30 Apr 2019, 1:12 p.m. shubham-akole, ***@***.***> wrote:
react native is new for me so where i pass string .can you elaborate.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#8 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AJJQO4F7LR3STQH3TBSNNHTPS75O7ANCNFSM4HJIWUOQ>
.
|
seekbar.js:- import { var Slider = require('react-native-slider'); function pad(n, width, z=0) { const minutesAndSeconds = (position) => ([ const SeekBar = ({ return ( export default SeekBar; const styles = StyleSheet.create({ player.js:- import React, { Component } from 'react'; export default class Player extends Component {
} setDuration(data) { setTime(data) { seek(time) { onBack() { onForward() { render() {
} const styles = { |
Use react native own slider instead react-native-slider ,,
…On Tue, 30 Apr 2019, 2:24 p.m. shubham-akole, ***@***.***> wrote:
seekbar.js:-
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
} from 'react-native';
var Slider = require('react-native-slider');
function pad(n, width, z=0) {
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
const minutesAndSeconds = (position) => ([
pad(Math.floor(position / 60), 2),
pad(position % 60, 2),
]);
const SeekBar = ({
trackLength,
currentPosition,
onSeek,
onSlidingStart,
}) => {
const elapsed = minutesAndSeconds(currentPosition);
const remaining = minutesAndSeconds(trackLength - currentPosition);
return (
<View style={{flexDirection: 'row'}}>
{elapsed[0] + ":" + elapsed[1]}
<View style={{flex: 1}} />
<Text style={[styles.text, {width: 40}]}>
{trackLength > 1 && "-" + remaining[0] + ":" + remaining[1]}
<Slider
maximumValue={Math.max(trackLength, 1, currentPosition + 1)}
onSlidingStart={onSlidingStart}
onSlidingComplete={onSeek}
value={currentPosition}
style={styles.slider}
minimumTrackTintColor='#fff'
maximumTrackTintColor='rgba(255, 255, 255, 0.14)'
thumbStyle={styles.thumb}
trackStyle={styles.track}/>
{/* <Slider
value={this.state.value}
onValueChange={(value) => this.setState({value})} /> */}
);
};
export default SeekBar;
const styles = StyleSheet.create({
slider: {
marginTop: -12,
},
container: {
paddingLeft: 16,
paddingRight: 16,
paddingTop: 16,
},
track: {
height: 2,
borderRadius: 1,
},
thumb: {
width: 10,
height: 10,
borderRadius: 5,
backgroundColor: 'white',
},
text: {
color: 'rgba(255, 255, 255, 0.72)',
fontSize: 12,
textAlign:'center',
}
});
player.js:-
import React, { Component } from 'react';
import {
View,
Text,
StatusBar,
} from 'react-native';
import Header from './Header';
import AlbumArt from './AlbumArt';
import TrackDetails from './TrackDetails';
import SeekBar from './SeekBar';
import Controls from './Controls';
import Video from 'react-native-video';
export default class Player extends Component {
constructor(props) {
super(props);
this.state = {
paused: true,
totalLength: 1,
currentPosition: 0,
selectedTrack: 0,
repeatOn: false,
shuffleOn: false,
};
}
setDuration(data) {
// console.log(totalLength);
this.setState({totalLength: Math.floor(data.duration)});
}
setTime(data) {
//console.log(data);
this.setState({currentPosition: Math.floor(data.currentTime)});
}
seek(time) {
alert("data"+JSON.stringify(time))
return null
time = Math.round(time);
this.refs.audioElement && this.refs.audioElement.seek(time);
this.setState({
currentPosition: time,
paused: false,
});
}
onBack() {
if (this.state.currentPosition < 10 && this.state.selectedTrack > 0) {
this.refs.audioElement && this.refs.audioElement.seek(0);
this.setState({ isChanging: true });
setTimeout(() => this.setState({
currentPosition: 0,
paused: false,
totalLength: 1,
isChanging: false,
selectedTrack: this.state.selectedTrack - 1,
}), 0);
} else {
this.refs.audioElement.seek(0);
this.setState({
currentPosition: 0,
});
}
}
onForward() {
if (this.state.selectedTrack < this.props.tracks.length - 1) {
this.refs.audioElement && this.refs.audioElement.seek(0);
this.setState({ isChanging: true });
setTimeout(() => this.setState({
currentPosition: 0,
totalLength: 1,
paused: false,
isChanging: false,
selectedTrack: this.state.selectedTrack + 1,
}), 0);
}
}
render() {
const track = this.props.tracks[this.state.selectedTrack];
const video = this.state.isChanging ? null : (
<Video source={{uri: track.audioUrl}} // Can be a URL or a local file.
ref="audioElement"
paused={this.state.paused} // Pauses playback entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio.
repeat={true} // Repeat forever.
onLoadStart={this.loadStart} // Callback when video starts to load
onLoad={this.setDuration.bind(this)} // Callback when video loads
onProgress={this.setTime.bind(this)} // Callback every ~250ms with currentTime
onEnd={this.onEnd} // Callback when playback finishes
onError={this.videoError} // Callback when video cannot be loaded
style={styles.audioElement} />
);
return (
<View style={styles.container}>
<StatusBar hidden={true} />
<Header message="Playing From Charts" />
<AlbumArt url={track.albumArtUrl} />
<TrackDetails title={track.title} artist={track.artist} />
<SeekBar
onSeek={this.seek.bind(this)}
trackLength={this.state.totalLength}
onSlidingStart={() => this.setState({paused: true})}
currentPosition={this.state.currentPosition} />
<Controls
onPressRepeat={() => this.setState({repeatOn : !this.state.repeatOn})}
repeatOn={this.state.repeatOn}
shuffleOn={this.state.shuffleOn}
forwardDisabled={this.state.selectedTrack === this.props.tracks.length - 1}
onPressShuffle={() => this.setState({shuffleOn: !this.state.shuffleOn})}
onPressPlay={() => this.setState({paused: false})}
onPressPause={() => this.setState({paused: true})}
onBack={this.onBack.bind(this)}
onForward={this.onForward.bind(this)}
paused={this.state.paused}/>
{video}
</View>
);
}
}
const styles = {
container: {
flex: 1,
backgroundColor: 'rgb(4,4,4)',
},
audioElement: {
height: 0,
width: 0,
}
};
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#8 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AJJQO4DEEWQNOYZY7NWCCZDPTAF3RANCNFSM4HJIWUOQ>
.
|
And just replace slider with react native import slider
On Tue, 30 Apr 2019, 2:30 p.m. Muhammad Waqas, <
mwaqassabirofficial@gmail.com> wrote:
… Use react native own slider instead react-native-slider ,,
On Tue, 30 Apr 2019, 2:24 p.m. shubham-akole, ***@***.***>
wrote:
> seekbar.js:-
> import React, { Component } from 'react';
>
> import {
> View,
> Text,
> StyleSheet,
> Image,
> TouchableOpacity,
> } from 'react-native';
>
> var Slider = require('react-native-slider');
>
> function pad(n, width, z=0) {
> n = n + '';
> return n.length >= width ? n : new Array(width - n.length + 1).join(z) +
> n;
> }
>
> const minutesAndSeconds = (position) => ([
> pad(Math.floor(position / 60), 2),
> pad(position % 60, 2),
> ]);
>
> const SeekBar = ({
> trackLength,
> currentPosition,
> onSeek,
> onSlidingStart,
> }) => {
> const elapsed = minutesAndSeconds(currentPosition);
> const remaining = minutesAndSeconds(trackLength - currentPosition);
>
> return (
>
> <View style={{flexDirection: 'row'}}>
>
> {elapsed[0] + ":" + elapsed[1]}
>
> <View style={{flex: 1}} />
> <Text style={[styles.text, {width: 40}]}>
> {trackLength > 1 && "-" + remaining[0] + ":" + remaining[1]}
>
>
> <Slider
> maximumValue={Math.max(trackLength, 1, currentPosition + 1)}
> onSlidingStart={onSlidingStart}
> onSlidingComplete={onSeek}
> value={currentPosition}
> style={styles.slider}
> minimumTrackTintColor='#fff'
> maximumTrackTintColor='rgba(255, 255, 255, 0.14)'
> thumbStyle={styles.thumb}
> trackStyle={styles.track}/>
> {/* <Slider
> value={this.state.value}
> onValueChange={(value) => this.setState({value})} /> */}
>
> );
> };
>
> export default SeekBar;
>
> const styles = StyleSheet.create({
> slider: {
> marginTop: -12,
> },
> container: {
> paddingLeft: 16,
> paddingRight: 16,
> paddingTop: 16,
> },
> track: {
> height: 2,
> borderRadius: 1,
> },
> thumb: {
> width: 10,
> height: 10,
> borderRadius: 5,
> backgroundColor: 'white',
> },
> text: {
> color: 'rgba(255, 255, 255, 0.72)',
> fontSize: 12,
> textAlign:'center',
> }
> });
>
> player.js:-
>
> import React, { Component } from 'react';
> import {
> View,
> Text,
> StatusBar,
> } from 'react-native';
> import Header from './Header';
> import AlbumArt from './AlbumArt';
> import TrackDetails from './TrackDetails';
> import SeekBar from './SeekBar';
> import Controls from './Controls';
> import Video from 'react-native-video';
>
> export default class Player extends Component {
> constructor(props) {
> super(props);
>
> this.state = {
> paused: true,
> totalLength: 1,
> currentPosition: 0,
> selectedTrack: 0,
> repeatOn: false,
> shuffleOn: false,
> };
>
> }
>
> setDuration(data) {
> // console.log(totalLength);
> this.setState({totalLength: Math.floor(data.duration)});
> }
>
> setTime(data) {
> //console.log(data);
> this.setState({currentPosition: Math.floor(data.currentTime)});
> }
>
> seek(time) {
> alert("data"+JSON.stringify(time))
> return null
> time = Math.round(time);
> this.refs.audioElement && this.refs.audioElement.seek(time);
> this.setState({
> currentPosition: time,
> paused: false,
> });
> }
>
> onBack() {
> if (this.state.currentPosition < 10 && this.state.selectedTrack > 0) {
> this.refs.audioElement && this.refs.audioElement.seek(0);
> this.setState({ isChanging: true });
> setTimeout(() => this.setState({
> currentPosition: 0,
> paused: false,
> totalLength: 1,
> isChanging: false,
> selectedTrack: this.state.selectedTrack - 1,
> }), 0);
> } else {
> this.refs.audioElement.seek(0);
> this.setState({
> currentPosition: 0,
> });
> }
> }
>
> onForward() {
> if (this.state.selectedTrack < this.props.tracks.length - 1) {
> this.refs.audioElement && this.refs.audioElement.seek(0);
> this.setState({ isChanging: true });
> setTimeout(() => this.setState({
> currentPosition: 0,
> totalLength: 1,
> paused: false,
> isChanging: false,
> selectedTrack: this.state.selectedTrack + 1,
> }), 0);
> }
> }
>
> render() {
>
> const track = this.props.tracks[this.state.selectedTrack];
>
> const video = this.state.isChanging ? null : (
> <Video source={{uri: track.audioUrl}} // Can be a URL or a local file.
> ref="audioElement"
> paused={this.state.paused} // Pauses playback entirely.
> resizeMode="cover" // Fill the whole screen at aspect ratio.
> repeat={true} // Repeat forever.
> onLoadStart={this.loadStart} // Callback when video starts to load
> onLoad={this.setDuration.bind(this)} // Callback when video loads
> onProgress={this.setTime.bind(this)} // Callback every ~250ms with currentTime
> onEnd={this.onEnd} // Callback when playback finishes
> onError={this.videoError} // Callback when video cannot be loaded
> style={styles.audioElement} />
> );
>
> return (
> <View style={styles.container}>
> <StatusBar hidden={true} />
> <Header message="Playing From Charts" />
> <AlbumArt url={track.albumArtUrl} />
> <TrackDetails title={track.title} artist={track.artist} />
> <SeekBar
> onSeek={this.seek.bind(this)}
> trackLength={this.state.totalLength}
> onSlidingStart={() => this.setState({paused: true})}
> currentPosition={this.state.currentPosition} />
> <Controls
> onPressRepeat={() => this.setState({repeatOn : !this.state.repeatOn})}
> repeatOn={this.state.repeatOn}
> shuffleOn={this.state.shuffleOn}
> forwardDisabled={this.state.selectedTrack === this.props.tracks.length - 1}
> onPressShuffle={() => this.setState({shuffleOn: !this.state.shuffleOn})}
> onPressPlay={() => this.setState({paused: false})}
> onPressPause={() => this.setState({paused: true})}
> onBack={this.onBack.bind(this)}
> onForward={this.onForward.bind(this)}
> paused={this.state.paused}/>
> {video}
> </View>
> );
>
> }
> }
>
> const styles = {
> container: {
> flex: 1,
> backgroundColor: 'rgb(4,4,4)',
> },
> audioElement: {
> height: 0,
> width: 0,
> }
> };
>
> —
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <#8 (comment)>,
> or mute the thread
> <https://github.com/notifications/unsubscribe-auth/AJJQO4DEEWQNOYZY7NWCCZDPTAF3RANCNFSM4HJIWUOQ>
> .
>
|
thanks... can you help me one more |
TypeError:null is not an object(evaluting 'RCTVideoInstance.constants') |
Read the docs of video package
…On Tue, 30 Apr 2019, 2:45 p.m. shubham-akole, ***@***.***> wrote:
TypeError:null is not an object(evaluting 'RCTVideoInstance.constants')
this error is located:
in video (at player.js:89)
in VIew (player.js:103)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#8 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AJJQO4BFAV2BUMXSG5BMLNLPTAIKDANCNFSM4HJIWUOQ>
.
|
@Waqas-Jani hey man, I saw you to help others. I added a new issue do you mind to help me please? Thank you in advance |
please help me to solve this error
Originally posted by @Waqas-Jani in #1 (comment)
The text was updated successfully, but these errors were encountered: