Under android 10 (Samsung A50), I installed the document viewer plugin to be able to open a pdf that I have on a website.
ionic cordova plugin add cordova-plugin-document-viewer
npm install # ionic-native / document-viewer
When I try to open the pdf, it offers me to open it with google play store or galaxy store.
I would like to know what I am doing wrong, and if there is any way to open the pdf directly, without choosing which program to open it with.
I send used code, and I also inform them that with fileopener it works correctly, except that it asks me if I want to open with the pdf viewer or another program, and I want the opening of the pdf to be direct, without that step of choosing a program.
Ionic CLI : 6.10.0
Ionic Framework : #ionic/angular 4.11.5
#angular/cli : 8.1.3
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.1.0
*********************************************
async pdf2() {
const options: DocumentViewerOptions = {
title: 'My PDF',
openWith: { enabled: true},
bookmarks : {
enabled : true
},
search : {
enabled : true
},
autoClose: {
onPause : true
}
}
let path = null;
if (this.platform.is('ios')) {
path = this.file.documentsDirectory;
} else {
path = this.file.dataDirectory;
}
const transfer = this.transfer.create();
transfer.download('https://www.zzzzz.com/site/pdfs/blabla.pdf', path + 'myfile.pdf').then(entry => {
let url = entry.toURL();
this.document.viewDocument(url, 'application/pdf', options);
})
}
thanks!!
Related
I installed the TextToSpeech Cordova Plugin on my Ionic App:
"#ionic-native/text-to-speech": "^5.30.0",
"cordova-plugin-tts": "^0.2.3",
And used it in my vue file:
import { Plugins } from "#capacitor/core";
const { TextToSpeech } = Plugins;
...
methods: {
tts(text) {
TextToSpeech.speak(text)
.then(() => console.log("Success Speach"))
.catch((reason) => console.log(reason));
},
...
console.log(TextToSpeech);
I'm using Capacitor
IOS
When I'm trying to use the plugin on IOS: I get an unknown error: error {}
When I'm printing the plugin, I get: [log] - undefined
Browser
When I'm trying to use the plugin it prints as expecting: TextToSpeech does not have web implementation.
When I'm printing the plugin, I get: Proxy {}
So it's working and loaded in the Browser, but no on the Device.
I found the solution.
first update #ionic-native/core
npm uninstall --save #ionic-native/core && npm install --save #ionic-native/core#latest
The import the plugin like this
import { TextToSpeech } from "#ionic-native/text-to-speech";
I'm building an electron app, and the above image on the left is how my icon looks in the app when i'm testing it with electron and on the right is after I've compiled it into an executable using "yarn dist".
(these are screenshots of them from my windows bar at the bottom of the screen).
It seems like the resolution of the icon in the executable is worse than in the raw electron app. The file itself is quite high resolution:
The icon is called during development by the "main.js" file:
mainWindow = new BrowserWindow({
// frame: false,
title: "Collector: Kitten " + app.getVersion(),
icon: __dirname + "/logos/collector.png", //<--- This line
webPreferences: {
//contextIsolation: true, //has to be false with the way I've designed this
enableRemoteModule: true,
preload: path.join(__dirname, 'preload.js'),
worldSafeExecuteJavaScript: true
}
})
And is identified by the builder in the package.json "win":
"build":{
"win": {
"target": "nsis",
"icon": "logos/collector.png"
}
}
Is there a way to prevent this loss in resolution when using the electron-builder?
I solved this by converting the .png into a .ico file and using that instead.
I am working on a Ionic project which is using AngularFire. Application has two main features.
Feature 1. Requires users to create an account and login.
Feature 2. Doesn't require an account or logging in.
I am using AngularFireAuthGuard with "redirectUnauthorizedToLogin" pipe to control routing.
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
{ path: '...', loadChildren: '...', canActivate: [AngularFireAuthGuard], data: { authGuardPipe: redirectUnauthorizedToLogin } },
Both features interact with FireStore. Due to security reasons, I want to implement Firebase Anonymous Sign-in. So, for the feature 2, I can control who can write to db without allowing permission to everyone. Meanwhile feature 1 will still require an account.
Here comes the problem because I couldn't find a way to add two conditions to the feature 1 guard something like
if (is anonymous || not logged in) redirectToLogin
As far as I can see, redirectUnauthorizedToLogin counts anonymous sign-in as authorized.
I checked the official documents and I see that there is an "IsNotAnonymous" built-in pipe but it is only referred once and I couldn't find any other usage of it.
I hope someone can help me about this.
Thanks in advance,
Ionic:
Ionic CLI : 5.2.1
Ionic Framework : #ionic/angular 4.6.0
#angular-devkit/build-angular : 0.13.9
#angular-devkit/schematics : 7.2.4
#angular/cli : 7.3.9
#ionic/angular-toolkit : 1.4.0
"#angular/fire": "^5.2.1",
"firebase": "^5.11.1",
Cordova:
Cordova CLI : 8.1.2 (cordova-lib#8.1.1)
Cordova Platforms : android 7.1.4
Utility:
cordova-res : 0.6.0
native-run : 0.2.7
System:
Android SDK Tools : 26.1.1 (D:\Sdk)
NodeJS : v11.4.0 (D:\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10
If you checkout the source code, you can see how they implemented isNotAnonymous here: https://github.com/angular/angularfire/blob/5.2.3/src/auth-guard/auth-guard.ts#L32 but the problem is that isNotAnonymous rejects but does not redirect. I think you can basically emulate this line: https://github.com/angular/angularfire/blob/5.2.3/src/auth-guard/auth-guard.ts#L37 to add the redirect.
These are pipe-able, so you should be good to go with:
import { AngularFireAuthGuard, isNotAnonymous } from '#angular/fire/auth-guard';
export const redirectAnonymousTo = (redirect: any[]) =>
pipe(isNotAnonymous, map(loggedIn => loggedIn || redirect)
);
const redirectUnauthorizedToLogin = () => redirectAnonymousTo(['login']);
export const routes: Routes = [
{ path: '', component: AppComponent },
{
path: 'items',
component: ItemListComponent,
canActivate: [AngularFireAuthGuard],
data: { authGuardPipe: redirectUnauthorizedToLogin }
}
];
If unauthenticated or anonymous, it will return false, so the redirect will happen, otherwise it will resolve to true.
I have not tried executing this code, but hopefully it will be a good start.
I've installed react-native-localization in my react native project (v0.6). Library is not supporting autolinker yet so I need to disable it for iOS and Android in react-native.config.js.
I already tried to add dependencies in react-native.config.js. After that, I did react-native link react-native-localization command and build an app.
This is my react-native.config.js file:
'use strict';
const ios = require('#react-native-community/cli-platform-ios');
const android = require('#react-native-community/cli-platform-android');
module.exports = {
dependencies: {
'react-native-localization': {
platforms: {
android: null, // disable Android platform, other platforms will still autolink if provided
ios: null,
},
},
},
commands: [...ios.commands, ...android.commands],
platforms: {
ios: {
linkConfig: ios.linkConfig,
projectConfig: ios.projectConfig,
dependencyConfig: ios.dependencyConfig,
},
android: {
linkConfig: android.linkConfig,
projectConfig: android.projectConfig,
dependencyConfig: android.dependencyConfig,
},
},
/**
* Used when running RNTester (with React Native from source)
*/
reactNativePath: '.',
project: {
ios: {
project: './RNTester/RNTester.xcodeproj',
},
android: {
sourceDir: './RNTester',
},
},
};
Error in simulator says:
"Please check your configuration. Did you run 'react-native link'?
As now, react-native has added the support for CocoaPods inside of his projects. (https://github.com/facebook/react-native/releases)
Sadly, i don't know why, but the autolinking feature never works for me on iOS but always goes trough in Android. The only solution i found is to do a react-native link only for iOS (renaming the android folder to something else), then do cd ios and pod install. After that, in the majority of the cases, it would work out of the box, while other libs needs still to be updated to have a full integration with RN 0.60.
Hope all this will be fixed soon but until that we only have to wait and hope that the libs work without any other complications
I use Protractor and gulp to test an angular application.
I'm looking for a way to record videos for my Protractor e2e tests so that I can play them back as .mp4 or whatever other forms that can be opened on Windows 10.
Has anyone accomplished this? Could you suggest maybe some useful links or code?
There's an npm package that allows you to record protractor e2e tests using ffmpeg binaries: https://www.npmjs.com/package/protractor-video-reporter
It also generates subtitles with each spec names in the video so you quickly know which test is running and see which one succeeded/failed.
The only thing you need to do is add a new reporter in your protractor-config.js file.
You can either record a window or the whole desktop.
With version 0.3.0 of protractor-video-reporter, I also had to override it's internal jasmineStarted function to be able to rename the outputted video name and extension (as I was unable to play back .mov)
Here's my current config on windows 10:
...
onPrepare: () => {
...
//TODO remove function override to be able to change the single video containing all spec's name when PR merged
//TODO https://github.com/tomyam1/protractor-video-reporter/pull/18
VideoReporter.prototype.jasmineStarted = function() {
var self = this;
if (self.options.singleVideo) {
var videoPath = path.join(self.options.baseDirectory, 'protractor-specs.avi');
self._startScreencast(videoPath);
if (self.options.createSubtitles) {
self._subtitles = [];
self._jasmineStartTime = new Date();
}
}
};
jasmine.getEnv().addReporter(new VideoReporter({
baseDirectory: path.normalize(path.join(__dirname, '../testresults/videos/')),
createSubtitles: true,
singleVideo: true,
ffmpegCmd: path.normalize('./node_modules/ffmpeg-binaries/bin/ffmpeg.exe'),
ffmpegArgs: [
'-f', 'gdigrab',
'-framerate', '24',
'-video_size', 'wsxga',
'-i', 'desktop',
'-q:v','10',
]
}));
},
...
You can play with ffmegArgs to fit your needs. Some arguments have to be defined in a certain order, else, if there's an error with the parameters, ffmpeg will silently terminate and no video's will be recorded. When this happens, you can output error messages from ffmpeg process if you enable debugging in this package's VideoReporter.js file :
(node_modules/protractor-video-reporter/lib/VideoReporter.js)
...
function VideoReporter(options) {
var self = this;
debug.enabled = true;
...
On Mac OSX, it seems the bundled ffmpeg binary didn't include qttask or avfoundation, so I had to install it manually with brew :
brew install ffmpeg --with-libass --with-fontconfig
Here's my current config for Mac OSX :
jasmine.getEnv().addReporter(new VideoReporter({
baseDirectory: path.normalize(path.join(__dirname, '../testresults/videos/')),
createSubtitles: true,
singleVideo: true,
ffmpegCmd: path.normalize('/usr/local/bin/ffmpeg'),
ffmpegArgs: [
'-f', 'avfoundation',
'-i', '1',
'-pix_fmt','yuv420p',
'-r','24',
'-video_size', 'woxga',
'-q:v','10',
]
}));
Happy e2e recording! :)
I've implemented that using Selenoid + Jasmine Allure Reporter
Selenoid is generating video and you could attach it to the Allure Report as an attachment:
browser.getSession().then(sessionData => {
let sessionID = sessionData.id_;
allure.createAttachment('Video MP4', () => new Buffer("<html lang='en'><body><video width='100%' height='100%' controls autoplay><source src='"
+ "https://<selenoid_host>:5443/video/" + sessionID + ".mp4"
+ "' type='video/mp4'></video></body></html>", 'utf-8'), 'text/html')();
Selenoid is really cool tool and with it I have no more pain at all!
Create your own custom reporter with jasmine and ffmpeg.
Download ffmpeg from https://www.ffmpeg.org/download.html
Here is how I did it
In protractor.conf.js,
let cp = require('child_process');
let ffmpegCmd = 'C:\\Downloads\\ffmpeg.exe'; //Path to your ffmpeg.exe
let ffmpegArgs = ['-y','-framerate','30','-f','gdigrab','out.mov'];
let spw = "";
onPrepare:()=> {
jasmine.getEnv().addReporter({
jasmineStarted: (result)=> {
spw = cp.spawn(ffmpegCmd, ffmpegArgs);
spw.stdout.on('data',function(data) {
});
spw.stderr.on('data',function(data) {
console.error(data)
});
spw.on('close',function(data){console.log(data)});
},
specStarted: (result)=> {
},
specDone: (result)=> {
},
jasmineDone: (result)=> {
spw.kill();
},
suiteDone: (result)=> {
}
})
}
For my case I wanted to start capturing at jasmine start and kill at jasmine end. Depending on your use case, you could decide when you want to spawn ffmpeg or kill it.
If you're looking for recording software, you can get something like Open Broadcaster software which is a free program. With this program you can designate 'scenes' which are portions of your screen, or you can just record the entire main desktop screen. Here is a tutorial on scenes with OBS.