 #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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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: