Product I am working on: Requestly - Chrome and Firefox Extension Setup redirects, modify headers, switch hosts, insert user scripts (https://www.requestly.in/)
What I am trying to do: Requestly offers free 30 days access to GOLD Plan if user completes a set of few steps. One of such steps is to follow us on Twitter. I want to verify if the user has actually followed us on Twitter.
//After loading widgets.js
function followIntent (intentEvent) {
console.log("User Followed")
};
twttr.ready(function (twttr) {
twttr.events.bind('follow', followIntent);
});
Problem: The "followIntent" function is getting triggered as soon as user clicks the Follow button. I want it to be called only after user has successfully followed us. How can I achieve this?
Assuming you're running into a problem that the follow event occurs in between the events of user clicking the "following" button and the actual "following" happens. You can always call the Twitter API to verify it via GET followers/ids. Though it seems a bit unnecessary...
function followIntent (intentEvent) {
if (!intentEvent) return;
followerVerification(intentEvent.data.user_id);
};
async function followerVerification (userID) {
// make your API request here
var userList = await twitterAPIRequest();
if (userList.includes(userID)){
console.log("User Followed")
} else {
console.log("User Not Followed")
}
}
function twitterAPIRequest() {
var settings = {
"async": true,
"url": "https://api.twitter.com/1.1/followers/ids.json?screen_name=twitterdev",
"method": "GET",
"headers": {
// Your app autherization stuff
}
}
$.ajax(settings).done(function (response) {
return response.ids;
});
}
twttr.ready(function (twttr) {
twttr.events.bind('follow', followIntent);
});
Related
I am using Agora.io sdk to create a group video chat application. They provide developers with a stream object that is all encompassing of the important methods and properties required to build the app. However, when I pass it to socket io it loses its functions. How can I solve this problem. I saw some questions that ask similar questions but they don't provide an answer that has been able to help me.
Below is my code where I emit :
function UIControls (stream, streamType, streamDiv) {
console.log('inside UIControls :::', stream.streamId, stream.getId(), typeof(stream) === 'function')
// video button
var videoButton = document.createElement('button');
// videoButton.setAttribute('id', 'videoButton');
videoButton.setAttribute('id', 'video_'+String(stream.getId()));
videoButton.innerHTML = '<i class="fas fa-video"></i>';
var clicked = false;
videoButton.addEventListener('click', function(evt) {
toggleVideo(stream);
})
if (streamType === 'me') {
$('#me').append(videoButton);
} else {
$('#' + String(stream.getId())).append(videoButton);
}
function toggleVideo(stream) {
if (clicked) {
videoButton.innerHTML = '<i class="fas fa-video-slash"></i>';
socket.emit("sendPeerInfo_video", {
"type": "mute",
"id": String(stream.getId()),
});
clicked = false;
} else {
// stream.unmuteVideo();
videoButton.innerHTML = '<i class="fas fa-video"></i>';
socket.emit("sendPeerInfo_video", {
"type": "unmute",
"id": String(stream.getId()),
"stream": stream,
});
clicked = true;
}
}
}
Here is the socket.on code:
socket.on("sendPeerInfo_video", function (evt) {
if (evt.type === 'mute') {
evt.stream.muteVideo();
return $('#video_'+evt.id)[0].innerHTML = '<i class="fas fa-video-slash"></i>'
} else if (evt.type === 'unmute') {
evt.stream.unmuteVideo();
return $('#video_'+evt.id)[0].innerHTML = '<i class="fas fa-video"></i>'
}
});
I don't have access to evt.stream.muteVideo() and evt.stream.unmuteVideo() functions anymore inside socket.on
Thank you for your help!
Is there any particular reason why you are using your own sockets?
Check out this sample app which takes care of group video calls and screen sharing along with features like muting and unmuting made using the official Agora.io Documentation.
A snippet showing what you actually need to do for what features you have given an example of:
var client = AgoraRTC.createClient({mode: 'rtc', codec: 'vp8'});
var localStreams = {
uid: '',
camera: {
camId: '',
micId: '',
stream: {}
}
};
// Hide video
client.on("mute-video", function (evt) {
var remoteId = evt.uid;
localStreams.camera.stream.muteVideo();
});
// Show video
client.on("unmute-video", function (evt) {
localStreams.camera.stream.unmuteVideo();
});
// Mute audio
client.on("mute-audio", function (evt) {
var remoteId = evt.uid;
localStreams.camera.stream.muteAudio();
});
// Unmute audio
client.on("unmute-audio", function (evt) {
localStreams.camera.stream.unmuteAudio();
});
Agora automatically mutes and unmutes audio and video for everyone without you having to make your own socket for the same.
If your use case is something different though which needs you to use custom sockets, let me know in the comments.
EDIT:
To implement a hand raise feature as well as to mute or unmute someone else, you can use Agora RTM using this quick start guide or this sample app.
What RTM does is act like your personal web socket and can be used to send messages which are displayed to other users (for chatting) or even do some behind the scenes work like receiving a message of a particular type and performing an action accordingly.
If the admin wants to mute someone else, they can click on a button which triggers a RTM message to a user and automatically parse and use this message to mute him/her.
Hand raise will work in a similar way.
Add to Home Screen feature of google is not working after setting any value in window.location.
What has been done so far?
Refer : web-fundamentals-app-install-banners
During this implementation I am capturing the 'beforeInstallPromptEvent' of window and using it later whenever required.
PFB the Code Snippet for the same:
window.addEventListener('beforeinstallprompt', (e) => {
deferredPrompt = e;
// Update UI notify the user they can add to home screen
showInstallPromotion();
});
btnAdd.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
btnAdd.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
This above code works perfectly in normal journey but it stopworking as soon as I include something in window.location to go to some app which in install in the device,
When the below code for Truecaller functionality is added in tandem with Add to Home Screen, it stops working:
window.location='xxxxxsdk://some-url/';
I have also tried with other options to redirect to app like location.assign() but still same issue.
Hi) try to put it after the app is installed:
window.addEventListener('appinstalled', function() {
// window.location = ...
});
Here is the doc: https://developer.mozilla.org/en-US/docs/Web/API/Window/appinstalled_event
Beforeinstallprompt triggers on every load.
I have used the code here: https://developers.google.com/web/fundamentals/app-install-banners/
I am not using the The mini-info bar which i have dissabled by calling e.preventDefault();
The problem is that the showAddToHomeScreen(); is called on every load if the user does not click addToHomeScreen.
I want the showAddToHomeScreen(); function to be called only every month or so by storing information about the last "canceled" click in sessions or something similar. Isn't google suppose to do this on it's own?
This i found on the following link:
https://developers.google.com/web/updates/2018/06/a2hs-updates
You can only call prompt() on the deferred event once, if the user clicks cancel on the dialog, you'll need to wait until the beforeinstallprompt event is fired on the next page navigation. Unlike traditional permission requests, clicking cancel will not block future calls to prompt() because it call must be called within a user gesture.
window.addEventListener('beforeinstallprompt', function (e) {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
showAddToHomeScreen();
});
function showAddToHomeScreen() {
var prompt = document.querySelector(".a2hs-prompt");
prompt.style.display = "flex";
var open = document.querySelector(".a2hsBtn");
open.addEventListener("click", addToHomeScreen);
var close = document.querySelector(".a2hsBtn-close");
close.addEventListener("click", function() {
prompt.style.display = "none";
});
}
function addToHomeScreen() {
var prompt = document.querySelector(".a2hs-prompt");
// hide our user interface that shows our A2HS button
prompt.style.display = 'none';
if (deferredPrompt) {
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then(
function (choiceResult) {
if (choiceResult.outcome === 'accepted') {
show_ad2hs_success_message();
}
deferredPrompt = null;
});
}
}
You have to define your own session and add expire date. This is simple with ajax. This is how i did:
Javascript:
$(document).ready(function() {
$.ajax({
url: '/update_session_addtohomescreen',
success: function (session_expired) {
if(session_expired=='True'){
showAddToHomeScreen();
}
},
error: function () {
alert("it didn't work");
}
});
});
This is wrapping the showAddToHomeScreen(); function
View
#csrf_exempt
def update_session_addtohomescreen(request):
if request.is_ajax():
number_of_days_till_expire = 1
now_in_secs = time.time()
if not 'last_session_coockie' in request.session or now_in_secs > request.session['last_session_coockie']+60:#number_of_days_till_expire*86400:
session_expired = True
request.session['last_session_coockie'] = now_in_secs
else:
session_expired = False
return HttpResponse(session_expired)
return None
You should though include csrf token in your request and also add the url to urls.py
I'm facing an issue trying to implement notifications in my website.
In fact, I'm trying to make a function that calls PHP with an ajax request, in order to check with mysql if there are any notification. Then, if there is one/few notification(s), I get back from PHP the information I need, and display them using notification API. I do this every 5 seconds.
In fact, notifications are displayed in the top right corner, and I can only see the bottom of it.
Other weird fact, when I use function alert();, notifications are properly displayed.. This issue is happening with Firefox, but not on chromium.
So my question is, do you have any idea why notifications are not placed properly on firefox but not on Chromium? If you need any more information do not hesitate. Thanks in advance, and if you need it, here is some code :
With this two functions, I get what I need thanks to a php script.
function notifications() {
$.ajax({ url: './get_notifications.php/',
type: 'post',
data: {"name": window.user},
success: function(output) {
if (output != "")
{
split_notifications(output);
}
else
return;
},
failure: function() {
console.log("failed");
}
});
}
function check_notifications() {
setInterval(function() {
notifications();
}, 10000);
}
In this function, I just split information and then call another function, in charge of creating my notification.
function split_notifications(notif) {
var tmp_notif = notif.split(";");
var index = 0;
while (tmp_notif[0].split(",,,")[index])
{
//!\\ When I put alert() HERE it's working
display_notification(tmp_notif[1].split(",,,")[index], tmp_notif[2].split(",,,")[index], tmp_notif[0].split(",,,")[index]);
index += 1;
}
}
Here is the function that creates my notification :
function display_notification(title, message, someone) {
{
if(window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) { // status is "granted", if accepted by user
var project_notification = new Notification(title, {
body: someone + " " + message + '\nSee more...',
icon: "../img/" + someone.split(" ")[1] + ".png"
});
project_notification.onclick = function() {
alert("");
}
});
}
}
I'm facing an issue when calling FB.login when page on load, the FB.login pop up is block by the browser. Currently I know I've to call FB.login after a user click event but I've to do it this way due to the business logic from client.
FB.api('/me/permissions', function(response2) {
var permsArray = response2.data[0];
var permsNeeded = ["user_events"];
var permsToPrompt = [];
for (var i in permsNeeded) {
if (permsArray[permsNeeded[i]] == null) {
permsToPrompt.push(permsNeeded[i]);
}
}
if (permsToPrompt.length > 0) {
promptForPerms(permsToPrompt);
}
});
var promptForPerms = function(perms) {
FB.login(function(response) {
}, {scope: perms.join(',')});
};
Is there any solution to call FB.login() without user click event? Or is there any tweak for this? Appreciate for the help.
You're not going to be able to code your way around the popup blocker, unfortunately.
The way to solve this is by redirecting the user to the Facebook permissions dialog when the page loads as described in the docs for manually building a login flow.
You first need to detect if the user is authenticated / connected with your application already and only redirect if they are not connected. This is best done in the window.fbAsyncInit function like this:
window.fbAsyncInit = function() {
var myAppID = 'YOUR APPLICATION ID';
FB.init({ appId: myAppID });
FB.getLoginStatus(function(response) {
if ('connected' != response.status) {
window.location.href = 'https://www.facebook.com/dialog/oauth' +
'?client_id=' + myAppID +
'&scope=user_events' +
'&redirect_uri=' + encodeURIComponent(document.URL);
} else {
alert('welcome to my app');
}
});
};
The other option is to adjust your user journey slightly; perhaps if the user is not connected then you could display an overlay with a message asking them to authenticate and a button which when clicked calls FB.login.