We have an app published in the Teams App Store which uses task module and tabs.
On Task/Tab pages we use Teams API lib to work with media (camera/gallery). Camera and gallery API works fine if we limit users to only one image to pick.
On Android everything works great (doesn't matter how many media files you pick).
Strange things happen when we let IOS users to pick/make more than one image at a time.
There are two possible scenarios on IOS devices:
Teams App crashes.
Teams API returns attachments.length !== blobs.length.
I did some tests on different IOS Devices. Both have issues. I've updated the app to the latest and it got even worse (started to crash more often):
iPhone Xs (IOS 15.1).
iPhone 11 Pro Max (IOS 15.1).
Steps to reproduce blob issue:
Create an HTML page and load it into Task module.
Trigger microsoftTeams.media.selectMedia with maxMediaCount: 10.
Pick up to 10 small size images.
Save received attachments.length.
Request a blob for each attachment.
Calculate how many blobs and attachments you've got.
Expected: blobs.length === attachments.length.
Result: blobs.length !== attachments.length.
The issue described above appears randomly, sometimes you get expected values, sometimes you don't, sometimes it crashes even with small images.
How to crash IOS Teams App, Steps to reproduce:
Create an HTML page and load it into Task module.
Trigger microsoftTeams.media.selectMedia with maxMediaCount: 10.
Pick up to 10 big size images.
Expected: "Error 10000, Selected file is too big".
Result: Teams App crashes.
My code:
const MEDIA_MAX_FILES = 10;
const imageProp: microsoftTeams.media.ImageProps = {
sources: [microsoftTeams.media.Source.Gallery],
startMode: microsoftTeams.media.CameraStartMode.Photo,
ink: false,
cameraSwitcher: true,
textSticker: true,
enableFilter: true,
};
const mediaInput: microsoftTeams.media.MediaInputs = {
mediaType: microsoftTeams.media.MediaType.Image,
maxMediaCount: MEDIA_MAX_FILES,
imageProps: imageProp
};
const attachementsList = [];
const blobs = [];
microsoftTeams.media.selectMedia(mediaInput,(error: microsoftTeams.SdkError,
attachments: microsoftTeams.media.Media[]) => {
if (error) { /* block is truncated */ return; }
if (attachments) {
attachementsList.push(...attachments);
for (const attachment of attachments) {
attachment.getMedia((attachmentError: SdkError,
blob: Blob) => {
if (blob) {
blobs.push(blob);
}
});
}
}
});
Teams App build versions. Dev Preview is turned on on both devices:
iPhone Xs: 3.20.77.2021202701/1121
iPhone 11 Max Pro: 3.20.77.2021202701/1121
Is this a bug ? Or am I doing something wrong ? Thanks in advance.
Related
I'm a newcomer to NativeScript. I was playing around to replicate a common UI pattern used by weather apps. I achieved a similar look working fine on the emulator (I've tested on Android versions 4.4, 6 and 9 and all works fine) but it doesn't work as I expected on physical devices ( Bottom pane doesn't scroll, tested on 3 different devices with Android versions 4.4, 6 and 7). I've created a playground project. My question is why am I getting different behaviours for the bottom scollview between emulators and physical devices?
Android Emulators may not give the accuracy in some cases, after all you are not really dealing with a real touch interface there.
Also Android has an extended version of ScrollView just to support nested scrolls, you will have to extend the NativeScript ScrollView to use androidx.core.widget.NestedScrollView
var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
var scrollView = require("tns-core-modules/ui/scroll-view");
var NestedScrollView = (function (_super) {
__extends(NestedScrollView, _super);
function NestedScrollView() {
_super.call(this);
}
NestedScrollView.prototype.createNativeView = function () {
if (typeof android !== void 0) {
return new androidx.core.widget.NestedScrollView(this._context);
}
return _super.prototype.createNativeView.call(this);
};
return NestedScrollView;
})(scrollView.ScrollView);
exports.NestedScrollView = NestedScrollView;
Updated Playground
I could use a little more info, but this might be due to the nature of ScrollView.
If the screen is large enough to display all of the content declared inside of the ScrollView tags, then it will not be scroll-able.
Is that the issue you are experiencing?
Hope this helps!
I have a ionic 3 app and want to execute code to get my user data just when app is launched, when the splash screen is showing and the app pages have not yet been rendered.
I currently do this when app has fired the appReady event but am interested if I can win another 2 seconds witch usually takes during the splash screen.
export class AppModule {
constructor(private platform: Platform,
private storage: Storage) {
this.platform.ready().then(() => {
this.storage.get('id_token').then((token) => {
this.initUserData(token);
});
});
}
}
I am developing a TV app for LG 4K TVs in webOS 3.0.
self_evaluation_checklist_3.4.xlsx lists a requirement for Exit button behavior as below.
"For webOS 3.0, pressing the EXIT button the app is completely closed and does not remain on the Recent list."
I have been searching but I haven't had any luck finding the API call to close the app completely and also removes the app from the Recent list.
All I could find is webOS.platformBack(); but that only takes back to the Home screen of the TV and doesn't close the app.
How can I close the app completely and don't list the app in the Recent list?
This is correct method ( webOS.platformBack(); ).
At least our app uses the same method for all 3 generations of WebOS and has never been declined by LG QA Center for this.
To exit the app and leave it in the Recent list I used the following:
const APPLICATION_MANAGER_SERVICE = 'luna://com.webos.applicationManager';
const TV_APP_ID = 'com.webos.app.livetv';
function sendAppToBackground() {
webOS.service.request(APPLICATION_MANAGER_SERVICE, {
method: 'launch',
parameters: { id: TV_APP_ID },
onSuccess(response) {
if (response.returnValue === false) {
console.error(`Error sending Application to background and bringing TV Application with ID ${TV_APP_ID} to the foreground.`);
forciblyExitApp();
}
},
onFailure(error) {
console.error(error);
forciblyExitApp();
},
});
}
function forciblyExitApp() {
window.close();
}
I have a report on my website that I want to use in my ionic app. I have a page on my app that loads the report inside an iframe. The report has three graphs on it that are each in a separate iframe. The report loads just fine. The graphs on the report load about 50% of the time. When I refresh the page, I get different results. Sometimes they all load. Sometimes only two load.
This works just fine on Android, but it does not work reliably on iOS.
Also, I'm getting this in my Xcode console and I'm not sure if it is related:
WF: _userSettingsForUser mobile: {
filterBlacklist = {
};
filterWhitelist = {
};
restrictWeb = 1;
useContentFilter = 0;
useContentFilterOverrides = 0;
whitelistEnabled = 0;
}
WF: _WebFilterIsActive returning: NO
Not sure what would be causing this, but when I upload some images to my remote server via FileTransfer(), the images sometimes show up either sideways or upside down. However, when I view the images locally on the iPhone, they are positioned in the correct way.
For example, when I select an image like this to upload: http://sharefa.st/view/WBe2QNSK8r8z
It will turn out like this: http://sharefa.st/view/EWdW1Z4G8r8z
I am using the local path to transfer the file, so I don't understand why the image would rotate "randomly".
Here is my upload function:
function uploadPhoto() {
var options = new FileUploadOptions();
options.fileKey = 'file';
options.fileName = imgURI.substr(imgURI.lastIndexOf('/')+1);
options.mimeType = 'image/jpeg';
var params = new Object();
if(logged_in == true) {
params.unique_id = app_unique_id;
params.secret_key = user_secret_key;
}
options.params = params;
loadingStart();
var ft = new FileTransfer();
ft.upload(imgURI, 'http://' + remote_server + '/API/upload', uploadDetails, fail, options);
}
imgURI value looks like this:
file://localhost/var/mobile/Applications/<snip>/tmp/photo_015.jpg
Any insight is appreciated.
Thanks to Humanoidism pointing out that the issue was in fact with the iPhone, and the way it stored images, I was able to figure out a solutuion.
To upload photos in the correct orientation you must add the correctOrientation setting to the options array in getPicture(), and set it to true.
Here are two examples:
function capturePhoto() {
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 30, correctOrientation: true });
}
function getPhoto(source) {
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 30,
destinationType: destinationType.FILE_URI,
sourceType: source,
correctOrientation: true });
}
The problem is not PhoneGap but iPhone. The iPhone was designed to be used as a wide lens camera. Turn the phone sideways when taking pictures or capturing video if you intend to view them on desktop. Your phone will display them correctly, because it "knows" how you took them, but the computer that you're viewing it on dosen't.
What you could do to prevent this is to rotate the picture before the upload. This is not a recommended fix but at least people on desktop computers will be able to see it. Though when viewing them on iPhone they'll be rotated - maybe a check for mobile devices wether or not to rotate the image could come in handy - but still again, not recommended.