I am trying to auto play some audio, and on iOS, it won't autoplay. However, if I wrap it in an AJAX call, it'll fire. So here's what I have:
// run on page load
var audio = document.getElementById('audio');
jQuery.ajax({
url: 'ajax.js',
async: false,
success: function() {
audio.play(); // audio will play in iOS before 4.2.1
}
});
How would I set this up with React / Redux?
Here's a very simple example using fetch (which is supported by most browsers out of the box) and blob object URLs. You could of course also use jQuery's ajax.
It's very similar to your code, but inside the componentDidMount method. The audio element is referenced via React's refs.
class Player extends React.Component {
componentDidMount() {
fetch(this.props.src)
.then(res => res.blob())
.then(blob => {
const { audio } = this.refs;
audio.src = URL.createObjectURL(blob);
audio.play();
});
}
render() {
return <audio ref="audio" controls></audio>;
}
}
ReactDOM.render(
<Player src="https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3" />,
document.getElementById("View")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='View'></div>
🔊❗️
Also, it is usually not recommended to use refs in React, but since we need access to the actual DOM node of the audio player it is a necessary evil.
Related
Im using video in my project ,but video is playing in background ,When i move to another component.This problem occurs only in ios ,not in android
Html
<VideoPlayer
src="{{videoUrl}}"
height="300"></VideoPlayer>
angular
index:any
videoUrl :any
ngOnInit() {
this.router.paramMap.subscribe(
(response) =>{
this.index = response.get('id')
this.videoUrl=this.galleryService.getVideoById(this.index)
console.log(response)
}
)
}
This is my code .
Listen to navigatingFrom event on your current Page and call pause() method on the VideoPlayer.
HTML
<VideoPlayer #player
src="{{videoUrl}}"
height="300"></VideoPlayer>
TS
#ViewChild("player") player: ElementRef;
constructor(private page: Page) { }
ngOnInit() {
this.router.paramMap.subscribe(
(response) => {
this.index = response.get('id')
this.videoUrl=this.galleryService.getVideoById(this.index)
console.log(response)
});
this.page.on(Page.navigatingFromEvent, () => {
this.player.nativeElement.pause();
});
}
ngOnDestroy() {
this.page.off(Page.navigatingFromEvent);
}
You may also use Router Events on Angular, but you might have to filter the appropriate route.
According to the docs and examples, I have perfectly working code that functions great:
Vue.component('admin-competitions-index', {
data: function() {
return {
competitions: []
}
},
mounted() {
this.$http.get('/api/admin/competitions')
.then(response => {
this.competitions = response.data;
});
},
methods: {
/**
* Toggle whether a competition is published or not.
*/
togglePublished(competition) {
Spark.patch(`/api/admin/competitions/togglePublished/${competition.id}`, this.togglePublishedForm)
.then(response => {
competition.is_published = response;
});
}
}
});
However, I'd like to change this code to save the extra request that is made on page load. I don't see a convention anywhere in Laravel or Spark where this is done. I'm guessing that all I need to do is set a JS variable but I'm not sure where it would be proper to do so.
I also understand that this kind of defeats the point of using vue for asynchronous loading, but nevertheless I would like to learn this. I think it will become more useful if I were to use vue for my #show restful requests where even if I wanted everything to load asynchronously I would at the very least have to supply vue with the competition ID that I want loaded.
This works out of the box:
#section('scripts')
<script>
var competition = {!! $competition !!};
</script>
#endsection
Im trying to get my json result into my react code
The code looks like the following
_getComments() {
const commentList = "AJAX JSON GOES HERE"
return commentList.map((comment) => {
return (
<Comment
author={comment.author}
body={comment.body}
avatarUrl={comment.avatarUrl}
key={comment.id} />);
});
}
How do i fetch AJAX into this?
First, to fetch the data using AJAX, you have a few options:
The Fetch API, which will work out of the box in some browsers (you can use a polyfill to get it working in other browsers as well). See this answer for an example implementation.
A library for data fetching (which generally work in all modern browsers). Facebook recommends the following:
superagent
reqwest
react-ajax
axios
request
Next, you need to use it somewhere in your React component. Where and how you do this will depend on your specific application and component, but generally I think there's two scenarios to consider:
Fetching initial data (e.g. a list of users).
Fetching data in response to some user interaction (e.g. clicking a
button to add more users).
Fetching initial data should be done in the life-cycle method componentDidMount(). From the React Docs:
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
mountNode
);
Here they use jQuery to fetch the data. While that works just fine, it's probably not a good idea to use such a big library (in terms of size) to perform such a small task.
Fetching data in response to e.g. an action can be done like this:
var UserGist = React.createClass({
getInitialState: function() {
return {
users: []
};
},
componentWillUnmount: function() {
this.serverRequest && this.serverRequest.abort();
},
fetchNewUser: function () {
this.serverRequest = $.get(this.props.source, function (result) {
var lastGist = result[0];
var users = this.state.users
users.push(lastGist.owner.login)
this.setState({ users });
}.bind(this));
},
render: function() {
return (
<div>
{this.state.users.map(user => <div>{user}</div>)}
<button onClick={this.fetchNewUser}>Get new user</button>
</div>
);
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
mountNode
);
Lets take a look on the fetch API : https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Lets say we want to fetch a simple list into our component.
export default MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
lst: []
};
this.fetchData = this.fetchData.bind(this);
}
fetchData() {
fetch('url')
.then((res) => {
return res.json();
})
.then((res) => {
this.setState({ lst: res });
});
}
}
We are fetching the data from the server, and we get the result from the service, we convert is to json, and then we set the result which will be the array in the state.
You can use jQuery.get or jQuery.ajax in componentDidMount:
import React from 'react';
export default React.createClass({
...
componentDidMount() {
$.get('your/url/here').done((loadedData) => {
this.setState({data: loadedData});
});
...
}
First I'd like to use fetchAPI now install of ajax like zepto's ajax,the render of reactjs is asyn,you can init a state in the constructor,then change the state by the data from the result of fetch.
when a request is made via setVariables is there a way to take account of the local state in-between async requests i.e. to implement loading indicator ?
an illustration making requests to https://www.graphqlHub.com/graphql
_onChange = (ev) => {
this.setState({
loading:true
})
let gifType = ev.target.value;
this.props.relay.setVariables({
gifType
});
this.setState({
loading:false
})
}
this won't track the loading state and loading will pass on to false immediately while the async change to the view will have lag.
if we move loading into setVariables is there any way to track the response ? in the root container there is the ability to track response via
renderLoading={function() {
return <div>Loading...</div>;
}}
is there any similar method for Relay.createContainer
is it bad practice to use setVariables to navigate through data sets ?
full code
class GiphItems extends React.Component {
constructor(){
super();
this.state = {
loading: false
}
}
render() {
const random = this.props.store.random
return <div>
<select onChange={this._onChange.bind(this)} value={this.props.relay.variables.gifType}>
<option value="sexy">Sexy</option>
<option value="cats">Cats</option>
<option value="goal">Goal</option>
<option value="lol">LOL</option>
</select>
{this.state.loading ? 'LOADING' : <a href={random.url}><img src={random.images.original.url} className="img-responsive"/></a>}
</div>;
}
_onChange = (ev) => {
this.setState({
loading:true
})
let gifType = ev.target.value;
this.props.relay.setVariables({
gifType
});
this.setState({
loading:false
})
}
}
GiphItems = Relay.createContainer(GiphItems, {
initialVariables: {
gifType: "sexy"
},
fragments: {
store: () => Relay.QL`
fragment on GiphyAPI {
random(tag: $gifType ) {
id
url
images {
original {
url
}
}
}
}
`,
},
});
setVariables method also accepts a callback as the 2nd argument which responds to the events involved with the data fulfillment and it receives a 'readyState' object that you can inspect:
this.props.relay.setVariables({
gifType,
}, (readyState)=> {
if (!readyState.done) {
this.setState({
loading: true
})
} else if(readyState.done) {
this.setState({
loading: false
})
}
})
Great question. What you have is a viable option in terms of dealing with loading screens for a particular component. But that can become a burden to implement for every loading scenario for each individual component.
Here's what you can do instead if to provide a more generic solution: You can set up a global event system in your React app that will broadcast a global state to each component based on whether or not a call is being made. And for each component that you need this for, you can subscribe to this global event from componentDidMount() and unsubscribe with componentWillUnmount(). As soon as your component sees a change in this global state, that component should call setState(), which will determine whether or not that component should display a loading scene or not.
This is a good resource to learn how to communicate between components to set up a global event system:
https://facebook.github.io/react/tips/communicate-between-components.html
You can also use Facebook's Flux to implement this as well:
https://facebook.github.io/flux/
Hope this helps!
I am using jPlayer to play audio files.
If I use the player on content, which is privided, when the page gets loaded, it works without any problems.
I also need it for HTML which is inserted by AJAX. Here it does not work. It seems, that the ready event is not triggered.
I wrote a function, which can be executed by click(). In that way, I can click it manually, when the HTML which contains the player is fully loaded. Here I have the same problem: The ready event is not triggered.
This is my function which works on non ajax inserted players fine:
$('.jp-jplayer').each(function () {
var src = $(this).attr('data-src');
var id = $(this).attr('id');
var post_id = $(this).attr('data-id');
alert('beg');
$('#' + id).jPlayer({
ready: function () {
$(this).jPlayer('setMedia', {
mp3: "/prelisten/_lofidl/change_of_heart_full_lofi.mp3",
});
alert('#' + id);
},
swfPath: "/wp-content/themes/Dark_3Chemical_DE_mit_Pagenavi/Dark_3Chemical_DE/audioplayer/js",
//////ERRRROOOOOR
solution: "flash, html",
supplied: "mp3",
wmode: "window",
cssSelectorAncestor: "#jp_container_" + post_id,
play: function () { // To avoid both jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
repeat: function (event) { // Override the default jPlayer repeat event handler
if(event.jPlayer.options.loop) {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerRepeat", function () {
$(this).jPlayer("play");
debug($(this));
});
} else {
$(this).unbind(".jPlayerRepeat").unbind(".jPlayerNext");
$(this).bind($.jPlayer.event.ended + ".jPlayer.jPlayerNext", function () {
//$("#jquery_jplayer_4858").jPlayer("play", 0);
});
}
},
});
$("#jplayer_inspector").jPlayerInspector({
jPlayer: $('#' + id)
});
});
Currently I am setting the src manually to exclude any possible errors here.
How can I get this function running on AJAX inserted content?
EDIT:
This is the code, which fetches the html including the players:
$.get('/query_posts.php', {
paged: _page,
cats: cols
}, function(data) {
$('#search-results').append(data).fadeIn(300);
//create_player_scripts();
//set_players();
$('#search-results').find('input[name="cartLink"]').each(function() {
$(this).val($(this).closest('.post1').find('.post_headl a').attr('href'));
});
});
To make an AJAX page reload work I had to first destroy all jplayer instances. So I wrote a little function that grabs all instances of a jplayer on the site (by looking for jp-audio classes) and calls jplayer('destroy'); and jplayer('clearMedia'). This function gets called in the $.ajax({ beforeSend: destroyJplayerInstances(); })
UPDATE:
Here is a statement from the developer of jPlayer, Mark Panaghiston:
https://groups.google.com/forum/#!topic/jplayer/Q_aRhiyYvQo
Hope that helps!