Our FB App was working fine then suddenly today we noticed that FB.setSize() is setting height to 0px! Did FB break something or the behavior of FB.setSize() has suddenly been changed.
App Url: https://apps.facebook.com/memorablestatus/
Update:-
You will now find that the above url is working fine, since I have modified my JS to call setSize with explicit width and height.
Yeah I had the same problem today, they have updated the js sdk and now the height is not correct, since I can't predict the correct height of my page I use jquery to do it, and since some things are delayed and loaded after a few seconds, I use a timeout :
FB.Array.forEach([300, 600, 1000, 2000], function(delay) {
setTimeout(function() {
FB.Canvas.setSize({height: $(document).height()});
}, delay)
});
Related
So my custom loader is not loading instantly only like a split second then it loads here is my site, my goals is to my custom components load. PS when i change ssr to false it works
here is my site: https://micahkwaka.dev
export default {
loading: '~/components/LoadingBar.vue',
loadingIndicator: false,
ssr: true,
pageTransition: {
name: 'my-page',
mode: 'out-in'
},
// Target (https://go.nuxtjs.dev/config-target)
target: 'static',
}
EDIT: This loader is when you have an SPA, to wait for it to load before showing the content. Since you're using Nuxt as an universal app (ssr + client), you will have the static content first (before the JS kicks in, and therefore your animation). So, you could make one with static SVG/CSS but the backed-in JS loader is not the solution here.
The best way would be to disable the JS to test the final result. Still, I'm pretty sure that Google will give you a better rating if you do not have any loader. You could maybe add it to your page transitions tho.
For the animation itself, start with it, then setTimeout the removal of it after 500ms or alike. Plenty ways of doing it. But you will need to have it on the initial render of your page (before the JS hydration).
Why do you set the loadingIndicator to false if you want it ?
If you want a custom one, provide a path to key as explained in the documentation: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading-indicator/
My RTC session was started with text only. And video is added by user when needed (renegotiation)
navigator.getUserMedia({ video: true, audio: false }, function (myStream) {
localVideo[0].srcObject = myStream;
myConn.addStream(myStream);
}, function (error) {
console.log(error);
});
When user do not need the video session anymore, I remove using:
var tracks = localVideo[0].srcObject.getTracks();
tracks.forEach(function (t) {
t.stop();
});
myConn.removeStream(localVideo[0].srcObject);
localVideo[0].srcObject = null;
Everything is working fine, until I try to add the video again I noticed that the createOffer() request size is getting larger and larger.
Seems to me that WebRTC didn't forget about the previous stream, and is adding to the offer again and again. Or maybe my way of removing a video stream / track is wrong?
This is a known issue see this thread on the W3C list.
The best way to get around this is to use replaceTrack and is suggested in the thread.
Note: It is still possible to prevent the list of transceivers from growing
by *manually* recycling them using transceiver.sender.replaceTrack() and
transceiver.direction, but that still wastes resources on transceivers
currently not used, and implies you probably shouldn't use
transceiver.stop() in most cases.
Also see the "Unified Plan" Transition Guide
I am developing Titanium application with a webview that is loading content from a remote url. In the load event I am injecting some code with evalJS. Using Titanium SDK 8.0.0+ the loading of the webview content is very slow because of evalJS, I need to wait for some time in order to scroll or click something. I can see in the console that there is a warning repeatedly saying "TiWebViewBinding: (main) [4405,4881] Timeout waiting to evaluate JS", and when this warning stops showing I can interact with the webview. If evalJS is not used meaning I am not injecting code, there is no problem. The webview is loaded properly and there is no warning saying "Timeout waiting to evaluate JS". Before 8.0.0 sdk the problem did not existed. Has anyone had an experience with an issue like this? Am I missing something?
I would be very grateful if I get some input on this. Thanks.
var webview = Ti.UI.createWebView({
width : Ti.UI.FILL,
height : Ti.UI.FILL,
url : "remote url"
});
webview.addEventListener('load', function() {
webview.evalJS('(function() {alert("test");})();');
webview.evalJS('(function sum(val1, val2){return val1 + val2;})();');
});
window.add(webview);
window.open();
I have a particular issue and I'm hoping someone can point out what I'm not doing correctly. My original code is posted here: Solved:Vue.js Konva library to display a simple image, what am I missing?
.
What's happening is I'm displaying a single image with Konva successfully (see code), however when I try to view the same page using mobile IOS Chrome or Safari, nothing displays. It works fine in desktop OSX Chrome and Safari, but not on the mobile versions. I just get a blank area where normally I would see the image on my OSX browsers. I'm sure there may be a step I am missing. Furthermore another interesting issue on the OSX browsers is that when I bring up the page to display the image initially it is blank until I do a page refresh, then it displays. Now maybe this is Vue.js and not Konva. However I thought I would point that out if anyone has further insights. Any suggestions would be greatly appreciated.
[Updated: Got it working] - Ok, I've done some testing and this is what I found out that seemed to solve the issue. After research, the biggest issue related to this is somewhere during the lifecycle the image is not attached to the dom before it is rendered. Even though I am doing image.src during the mounted stage which is the same as ".ready()" from what I understand. I even tried loading the image using the updated stage in Vue. Same issue. What worked was I used v-if to hide the Konva stage, then attached the source during mounted then ran v-if=true post image attachment to display the Konva stage and Bingo! everything works. It even works on the IOS browsers.
<template>
<div id="app">
<h1>Display Image via Konva</h1>
<div v-if=ShowStage>
<v-stage ref="stage" :config="configKonva">
<v-layer ref="layer">
<v-image :config="configImg"></v-image>
</v-layer>
</v-stage>
</div>
</div>
<script>
import Vue from 'vue';
import VueKonva from 'vue-konva'
Vue.use(VueKonva)
export default {
data() {
return {
ShowStage: false,
testImg: new Image(),
configKonva: {
width: 500,
height: 500
}
},
computed: {
configImg: function() {
return {
x: 20,
y: 20,
image: this.testImg,
width: 200,
height: 200,
}
}
},
mounted() {
this.testImg.src = "https://konvajs.github.io/assets/lion.png"
this.ShowStage = true
}
}
</script>
I am experiencing the same issue right now.
Locally it seems to work on IPhone with Safari but deployed to the Server it is not working anymore.
However did you try something like this?
const image = new Image()
image.src = url
image.crossOrigin = 'anonymous'
image.onload = () => {
new Konva.Image({image: image})
// Further code ...
}
The crossOrigin set to anonymous helped me at least partly.
I am looking fore some code allowing me to launch automatically a video after another one.
I'am using the great video.js library, which has a quite complete API. I found some snippet to get an event listener working at the end of the 1st video, but then I cannot launch the second one.
This is working, displaying an alert at the end of the 1st video :
_V_("intro").ready(function(){
this.addEvent("ended", function(){
alert('foo');
});
});
And this is also working, launching a video in fullscreen on page reload :
_V_("leader").ready(function(){
var leader = this;
leader.requestFullScreen();
leader.play();
});
But I can't get the 2nd video launching in fullscreen at the end of 1st video...
Last subtility, I would like to entirely build the 2nd video with javascript, not having to write it and just hiding id with CSS.
Thank you folks !
Elliot
You can simply use the provided 'src' method in the Video.js API, if you want to play a second video right after the first one finishes it would work like this:
_V_("intro").ready(function(){
this.addEvent("ended", function(){
this.src({ type: "video/mp4", src: "http://path/to/second/video.mp4" });
});
});