about reactmusic HOT 10 OPEN

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> .

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> .

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> .

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> > . >

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> .