I hope you all having a great day.
I am facing an issue on iOS with ActionSheets and Popovers, while a popover is appeared, the user can scroll when swiping inside the popover, and it scrolls the back content on which i open the popover from, if i click outside of the popover it closes the popover and it does not let me swipe at all but when i click inside the popover it scrolls the back content of the popover not the popover itself.
here is a video of it:
sorry had no option to upload video, here is a link:
Video of popover/actionsheet
here is code of opening the popover
async openCreateNewFolder(type, folder?) {
const popover = await this.popoverController.create({
component: NewFolderComponent,
componentProps: {
folderId: this.folderId,
parentId: this.parentId,
type,
folder
}
});
popover.onDidDismiss().then((dataReturned) => {
console.log(dataReturned);
if (dataReturned.data !== undefined) {
if (dataReturned.data === 'cancelClicked') {
} else if (dataReturned.data === 'confirmClickedFolder') {
this.deleteFolder(dataReturned.role);
} else if (dataReturned.data === 'confirmClickedFile') {
this.deleteFile(dataReturned.role);
} else if (dataReturned.data === 'newFolderCreated') {
this.getFolders();
}
// this.dataReturned = dataReturned.data;
//alert('Modal Sent Data :'+ dataReturned);
}
});
return await popover.present();
}
here is a code for the actionsheet:
async confirmChangeLanguageDialogue(selectedLanguage) {
let languageClass: any;
if (selectedLanguage === 'English') {
languageClass = 'alertControllerEnglishLanguageIcon';
} else if (selectedLanguage === 'Deutch') {
languageClass = 'alertControllerGermanLanguageIcon';
} else if (selectedLanguage === 'French') {
languageClass = 'alertControllerFrenchLanguageIcon';
} else if (selectedLanguage === 'Italian') {
languageClass = 'alertControllerItalianLanguageIcon';
}
const alert = await this.alertCtrl.create({
header: this.translate.instant('confirm'),
mode: 'ios',
message: this.translate.instant('change_language_confirm_message', {selected_language: selectedLanguage}),
buttons: [
{
text: this.translate.instant('cancel'),
role: 'cancel',
cssClass: 'secondary',
handler: (blah) => {
console.log('Confirm Cancel: blah');
}
}, {
text: this.translate.instant('okay'),
cssClass: languageClass,
handler: () => {
this.requestChangeLanguage(selectedLanguage);
}
}
]
});
await alert.present();
const result = await alert.onDidDismiss();
console.log(result);
}
Any help would be appriciated, thank you.
fix can be found here, check it out:
https://forum.ionicframework.com/t/popover-alertsheet-etc-on-ios-scrolls-back-content-and-not-the-popover-itself/180122
Related
In the onbeforeunload-Event, I use in my renderer-process ipcRenderer.sendSync() to notify the main-process to show a dialog:
window.onbeforeunload = (e) => {
const response = ipcRenderer.sendSync('askForSavingChanges');
if (response == 0) {
// save ...
} else if (response == 2) {
e.returnValue = false;
}
}
Here is the code in the main-process:
app.whenReady().then(() => {
initSettings().then(() => {
ipcMain.on('askForSavingChanges', (event) => event.returnValue = require('electron').dialog.showMessageBoxSync(this,
{
type: 'question',
buttons: ['Yes', 'No', 'Cancel'],
title: 'Closing',
message: 'Do you want to save changes?'
}));
})
createWindow();
});
Now, when I close the window, the event onbeforeunload will be called, but when calling ipcRenderer.sendSync() the window will be closed immediately. Do I something wrong?
I want to implement image uploading. It works for web (Chrome/Safari), but not for mobile ios (built with Capacitor). It shows image selection, but when I select it nothing happens.
Here is my input:
<q-file
v-model="avatarFile"
accept=".jpg, .png"
#input="uploadImage"
/>
async uploadImage() {
if (this.avatarFile) {
let extension = "jpg";
if (this.avatarFile.type === "image/png") {
extension = "png";
}
try {
this.loading = 1;
const {
data: {
uploadUrl: { uploadUrl },
},
} = await this.$apollo.query({
query: GET_UPLOAD_URL,
variables: {
extension,
},
});
await axios.put(uploadUrl, this.avatarFile);
await setTimeout(() => {
this.$emit("on-image-upload");
this.loading = 0;
}, 3000);
} catch (e) {
this.alertError(e);
this.loading = 0;
}
}
}
What am I doing wrong? Thanx in advance!
Found the solution. My accept rule had the wrong format. This works:
accept="image/*"
I'm trying to develop an app where users can can video call to each other and share their screens using WebRTC technology. I have succeed with either video call or screen sharing app and now I'm trying to make it to be able to switch between getUserMedia and getDisplayMedia on button click during a call inside the same RTCPeerConnection but it doesn't work.
This is how I thought it could work:
function onLogin(success) {
var configuration = { offerToReceiveAudio: true, offerToReceiveVideo: true, "iceServers" : [ { "url" : "stun:stun.1.google.com:19302" } ] };
myConnection = window.RTCPeerConnection ? new RTCPeerConnection(configuration, { optional: [] }) : new RTCPeerConnection(configuration, { optional: [] });
myConnection.onicecandidate = function (event) {
console.log("onicecandidate");
if (event.candidate) send({ type: "candidate", candidate: event.candidate });
};
myConnection.ontrack=function(e){
try{remoteVideo.src = window.webkitURL?window.webkitURL.createObjectURL(e.streams[0]):window.URL.createObjectURL(e.streams[0])}
catch(err){remoteVideo.srcObject=e.streams[0]}
}
myConnection.ondatachannel=openDataChannel
openDataChannel();
startAVStream();
//startSStream()
};
function startAVStream(enable){
if(sStream)sStream.getTracks().forEach( function (track) {
try{myConnection.removeTrack( track, sStream );}
catch(e){}
} );
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(s => {
if(!avStream){
avStream = s;
avStream.getTracks().forEach( function (track) {
myConnection.addTrack( track, avStream );
} );
}
}, function (error) { console.log(error); });
}
function startSStream(enable){
if(avStream)avStream.getTracks().forEach( function (track) {
try{myConnection.removeTrack( track, avStream );}
catch(e){}
} );
navigator.mediaDevices.getDisplayMedia({ video: true }).then(s => {
if(!sStream){
sStream = s;
sStream.getTracks().forEach( function (track) {
myConnection.addTrack( track, sStream );
} );
}
}, function (error) { console.log(error); });
}
Can anyone tell me how I can switch between tracks inside the same RTCPeerConnection or should I create 2 separate RTCPeerConnection - one for video/audio streaming and another for screen sharing?
Any help appreciated! Thanks!
You could use RTCRtpSender.replaceTrack to splice the screen capture track. This doesn't require renegotiation, and therefore has very low latency.
let newstream = navigator.mediaDevices.getDisplayMedia({});
let newtrack = newstream.getTracks()[1];
if(newtrack.kind !== 'video')
throw new Error('Eek!?');
pc.getSenders().forEach(async s => {
if(s.track && s.track.kind === 'video')
await s.replaceTrack(newtrack);
});
The test for s.track not being null deals with the case where you previously called replaceTrack(..., null).
shareScreen = () =>{
const success = (stream) => {
window.localStream = stream
// this.localVideoref.current.srcObject = stream
// localStream.replaceStream(stream);
this.setState({
localStream: stream
})
Object.values(this.state.peerConnections).forEach(pc => {
pc.getSenders().forEach(async s => {
console.log("s.track ",s.track);
if(s.track && s.track.kind === 'video'){
stream.getTracks().forEach(track => {
// pc.addTrack(track, this.state.localStream)
s.replaceTrack(track);
});
}
});
});
}
const failure = (e) => {
console.log('getUserMedia Error: ', e)
}
navigator.mediaDevices.getDisplayMedia({ cursor: true }).then(success).catch(failure)}
I am using ionic 3 and when I popToRoot() the current page still executes and does not gets destoryed. I thought popToRoot() is suppose to destroy the current page as it goes to the root page? Here is the code:
ionViewDidLoad() {
this.menuCtrl.swipeEnable(false);
this.navCtrl.swipeBackEnabled = false;
this.loop();
}
loop() {
this.API.doGet(URL)
.then((data) => {
if (data == 'Yes') {
...
}
else {
// Wait on timer and call again - 10 seconds
this.Timeout = setTimeout(() => { this.onLoopTimeout() }, 10000);
}
})
.catch((err) => {
this.errorTimeout = setTimeout(() => { this.loop(); }, 3000);
})
}
onLoopTimeout() {
this.loop();
}
notInRepair() {
// Clear timers
clearTimeout(this.Timeout);
clearTimeout(this.errorTimeout);
// Go back to home page
this.navCtrl.setRoot(ServicesPage);
this.navCtrl.popToRoot();
}
Do you guys know what I am doing wrong here?
I am trying to implement pause and resume functionality with electron libraries. how could i call item.pause out of session.on(‘will-download’) because it is function of item inside session.on(‘will-download’) or from any other way?
var url, path, filename;
ipcMain.on(‘item:file’, function(e, file) {
if(file.msg === ‘d’){
console.log(file);
url = file.url;
path = pathLib.join(__dirname, file.path);
filename = file.filename;
contents.downloadURL(url);
}
if(file.msg === ‘p’){
item.pause();
}
if(file.msg === ‘r’){
item.resume();
}
contents.session.on('will-download', (event, item, contents) => {
// Set the save path, making Electron not to prompt a save dialog.
path = `${path}${filename}`;
item.setSavePath(path);
item.on('updated', (event, state) => {
if (state === 'interrupted') {
console.log('Download is interrupted but can be resumed');
} else if (state === 'progressing') {
if (item.isPaused()) {
console.log('Download is paused');
} else {
console.log(`Received bytes: ${item.getReceivedBytes()} out of ${item.getTotalBytes()}`);
var percentage = (item.getReceivedBytes()/item.getTotalBytes())*100;
var progress = {'rBytes':item.getReceivedBytes(), 'tBytes':item.getTotalBytes(), 'p':percentage};
contents.send('item:progress', progress);
}
}
});
item.once('done', (event, state) => {
if (state === 'completed') {
console.log('Download successfully');
} else {
console.log(`Download failed: ${state}`);
}
});
});
});
https://github.com/sindresorhus/electron-dl/blob/master/index.js
Following, given above, link Worked for me!