I am building native mobile app using nativescript-vue and using Nativescript-videoplayer plugin .Well the player working well but loadingComplete callback function is not working.
<template>
<Page >
<ActionBar title="test">
<StackLayout orientation="horizontal"
ios:horizontalAlignment="center"
android:horizontalAlignment="left">
<Image src="res://icon" width="30" height="30" stretch="aspectFill" />
</StackLayout>
</ActionBar>
<StackLayout>
<VideoPlayer ref="player" :src="video.file" autoplay="true" height="300" #loadingComplete="videoCompleted" #finished="videoFinished" loop="false" />
</StackLayout>
</Page>
</template>
<script >
export default {
props:['video'],
data() {
return {
}
},
methods:{
videoCompleted(){
console.log('Loading Completed');
},
videoFinished(){
console.log('Video finished');
}
}
}
</script>
loadingComplete was changed to playbackReady and the other handler attaches to finishedEvent
<VideoPlayer
#playbackReady="videoCompleted"
#finishedEvent="videoFinished"
/>
The demo is quite outdated, but the documentation looks mantained.
Related
I have this code
<template>
<Page>
<ActionBar title="Action Items">
<StackLayout orientation="horizontal">
<Image src="res://icon" width="40" height="40"
verticalAlignment="center" />
<Label text="NativeScript" fontSize="24"
verticalAlignment="center" />
</StackLayout>
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back"
(tap)="onNavBtnTap()">
</NavigationButton>
<ActionItem (tap)="onShare()" ios.systemIcon="9"
ios.position="left" android.systemIcon="ic_menu_share"
android.position="actionBar">
</ActionItem>
<ActionItem (tap)="onDelete()" ios.systemIcon="16"
ios.position="right" text="delete" android.position="popup">
</ActionItem>
</ActionBar>
<ScrollView>
<StackLayout class="home-panel">
<!--Add your page content here-->
<Label textWrap="true" text="Play with NativeScript!"
class="h2 description-label">
{{first}}
</Label>
<Label textWrap="true"
text=" Write code in the editor or drag and drop components to build a NativeScript mobile application."
class="h2 description-label" />
<Label textWrap="true"
text="Scan the QR code with your mobile device and watch the changes sync live while you play with the code."
class="h2 description-label" />
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
data() {
return {
first: "Once"
};
}
};
</script>
<style scoped>
.home-panel {
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label {
margin-bottom: 15;
}
</style>
which produces
My question is how come the back button aligned itself left and the others right without explicitly coding left or right?
<NavigationButton text="Go Back" android.systemIcon="ic_menu_back"
(tap)="onNavBtnTap()">
</NavigationButton>
and the other buttons are aligning to the right
<ActionItem (tap)="onShare()" ios.systemIcon="9"
ios.position="left" android.systemIcon="ic_menu_share"
android.position="actionBar">
</ActionItem>
<ActionItem (tap)="onDelete()" ios.systemIcon="16"
ios.position="right" text="delete" android.position="popup">
</ActionItem>
<NavigationButton/> is by default on the left, as it's just calls into the native setNavigationIcon api:
https://developer.android.com/reference/android/widget/Toolbar#setNavigationIcon(android.graphics.drawable.Drawable)
While the other <ActionItem> elements are added with the Menu api:
https://developer.android.com/reference/android/widget/Toolbar#getMenu()
For your other question, you can do the following:
<Label :text="`${first} Play with NativeScript!`" textWrap="true" class="h2 description-label" />
:text makes it a binding, the then you pass in a regular JavaScript string literal.
An alternative would be:
:text="first + ' Play with NativeScript!'"
Both ways should work fine.
I'm trying to do a fullscreen in youtube player from the plugin triniwiz/nativescript-youtubeplayer in my nativescript-vue application on android device but I'm unable to achieve so.
I have following code:
<template>
<Page actionBarHidden="true" class="page" >
<GridLayout orientation="vertical" width="100%" height="100%" columns="*" rows="*,auto">
<StackLayout col="0" row="0" backgroundColor="#f8f8f8">
<StackLayout backgroundColor="#44557f">
<Label :text="name" class="font-weight-bold"
color="#FFFFFF" padding="15" fontSize="20" textWrap="true"></Label>
</StackLayout>
<ScrollView orientation="vertical" height="100%">
<ScrollView orientation="vertical">
<StackLayout class="home-panel">
<YoutubePlayer ref="player" :src="videoLink.substring(17)" apiKey="**********" isFullScreen="true"/>
</StackLayout>
</ScrollView>
</ScrollView>
</StackLayout>
</GridLayout>
</Page>
</template>
<script>
export default {
props: ['videoLink','name','id'],
mounted() {
let player = this.$refs.player
player.toggleFullscreen();
}
}
</script>
But I'm getting an error stating
toggleFullscreen() not found
When you access an element via Ref, the return value will be a Vue element. You should access the nativeView to gain access to the actual element.
<script>
export default {
props: ['videoLink','name','id'],
mounted() {
let player = this.$refs.player.nativeView;
player.toggleFullscreen();
}
}
</script>
I'm using the excellent https://github.com/tjvantoll/nativescript-IQKeyboardManager on iOS, which has a 'done' button (effectively a close button). However, for Android softkeyboard there is no such thing... All the solutions to hide a keyboard suggest referencing the original element which triggered the keyboard - an impractical solution...
I found this forum post on how to dismiss a keyboard in nativeScript https://discourse.nativescript.org/t/unable-to-hide-keyboard/4129/9
import * as utils from "utils/utils";
import { isIOS, isAndroid } from "platform";
import * as frame from "ui/frame";
// then as a method inside your vue
methods: {
dismissSoftKeybaord() {
if (isIOS) {
frame.topmost().nativeView.endEditing(true);
}
if (isAndroid) {
utils.ad.dismissSoftInput();
}
},
dimissSoftKeyboard should be attached to the outside / top element - eg page... Then, when clicking outside of a form field (TextField or TextView) the keyboard will be hidden / dismissed.
<Page #tap="dismissSoftKeybaord()">
Here is the code as a handy mixin:
import * as utils from "utils/utils";
import { isIOS, isAndroid } from "platform";
import * as frame from "ui/frame";
export default {
methods: {
dismissSoftKeybaord() {
if (isIOS) {
frame.topmost().nativeView.endEditing(true);
}
if (isAndroid) {
utils.ad.dismissSoftInput();
}
},
}
};
I do have a bit of an issue with layout, in that some elements wrap other elements so I've had to apply dismissSofteyboard in a few places - but it works....
<template>
<Page class="page" statusBarStyle="dark" backgroundSpanUnderStatusBar="true">
<ActionBar backgroundColor="#253945" color="#ffffff" flat="true" #tap="dismissSoftKeybaord()">
<StackLayout orientation="horizontal">
<Label ... />
</StackLayout>
</ActionBar>
<GridLayout rows="*,60" #tap="dismissSoftKeybaord()">
<ScrollView row="0" #tap="dismissSoftKeybaord()">
<StackLayout class="logFormWrapper">
<StackLayout class="input-field" marginBottom="20" >
<TextField ... />
</StackLayout>
<StackLayout class="input-field" marginBottom="20">
<TextField ... />
</StackLayout>
...
...
</StackLayout>
</ScrollView>
<StackLayout margin="0" row="1" class="footer"></StackLayout>
</GridLayout>
</Page>
</template>
So I'm now just trying to figure out how I can adjust the layout so I don't need so many dismissSoftKeyboard #taps everywhere....
I am working on a basic app that has a list of items and when an item is selected its corresponding image is show in an image tag.Issue is, the images are very "wide" and hence appear very small. I am trying to somehow enable the zoom functionality on the image for the user. I checked all "stretch" options but "pinch" and "zoom" are not working. According to official documentation, i looked at decodeHeight and decodeWidth but they do not appear to be working as well.
I appreciate any help i can get, Following is the code:
<template>
<Page class="page">
<ActionBar title="Home" class="action-bar" />
<ScrollView>`enter code here`
<StackLayout class="home-panel">
<Image :src="img_src" strech="AspectFill"/>
<ListView for="images in img_data" #itemTap="onButtonTap" style="height:200vh">
<v-template>
<Label :text="images.name" />
</v-template>
</ListView>
<!-- <Button text="Button" #tap="onButtonTap" /> -->
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
export default {
methods: {
onButtonTap(event) {
console.log(event.index);
this.img_src = "~/components/" + this.img_data[event.index].image;
}
},
data() {
return {
img_src: "",
img_data: [
{ name: "Iron Man", image: "iron_man.png" },
{ name: "super man", image: "super_man.png" },
{ name: "Batman", image: "batman.png" },
{ name: "Flash", image: "flash.png" },
]
};
}
};
</script>
<style scoped>
.home-panel {
vertical-align: top;
padding-top: 20;
font-size: 20;
margin: 15;
}
.description-label {
margin-bottom: 15;
}
</style>
First, install nativescript-image-zoom plugin:
tns plugin add nativescript-image-zoom
Then globally register the ImageZoom element in your main.js:
Vue.registerElement('ImageZoom', () => require('nativescript-image-zoom').ImageZoom);
Now you can use it as a global component anywhere in your app you want.
<ImageZoom v-if="ifStatement"
:src="imageSrc"
class="main-image" />
Keep in mind that while global registration of the component doesn't hurt the performance, it prevents you from lazy loading the element.
Install the plugin by running the following command
tns plugin add nativescript-image-zoom
Replace your Image tag with this custom component
<StackLayout class="home-panel">
<ui:ImageZoom :src="img_src" strech="AspectFill"/>
<ListView for="images in img_data" #itemTap="onButtonTap" style="height:200vh">
<v-template>
<Label :text="images.name" />
</v-template>
</ListView>
<!-- <Button text="Button" #tap="onButtonTap" /> -->
</StackLayout>
Don't forget to add xmlns to your Page element.
xmlns:ui="nativescript-image-zoom"
In case you have any another question, please don't hesitate to ask.
I am trying to write a directive to change colour of a button on "Touchup" and "TouchDown". But when I attach this directive the (tap) event in the component is not getting called. This happens only in iOS. Is there any workarounds for this. Below is my directive and component.
import { Directive, HostBinding, HostListener, ElementRef, Renderer2 } from '#angular/core';
#Directive({
selector: '[btnTch]'
})
export class btnTchDirective {
constructor(private el: ElementRef, private renderer: Renderer2) { }
#HostListener('touch', ['$event'])
toggleColor(event){
if(event.action == "down"){
this.renderer.addClass(this.el.nativeElement, 'pressed');
// this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', "blue");
}else{
this.renderer.removeClass(this.el.nativeElement, 'pressed');
}
}
}
<ActionBar title="Login" actionBarHidden="false"></ActionBar>
<GridLayout columns="*" rows="auto, *, 130" width="100%" height="100%" class="login_bg">
<GridLayout columns="*" rows="*" verticalAlignment="center" horizontalAlignment="center">
<Label text="" style="border-radius:62; width:125; height:125; padding:0;margin-top:100; margin-bottom:10; background-color:white;opacity:0.1"></Label>
<Label text="" style="border-radius:50; width:100; height:100; padding:0;margin-top:100; margin-bottom:10; background-color:white;opacity:0.1"></Label>
</GridLayout>
<StackLayout col="0" row="1" verticalAlignment="center" style="width:80%">
<Label text="Enter Mobile Number"></Label>
<TextField hint="Enter Mobile Number" [(ngModel)]="userNum" style="border-bottom-width:1; border-style:solid; border-color: red; padding:5 0"></TextField>
<Label *ngIf="!genErrs == '' || null || undefined" text="{{genErrs}}"></Label>
</StackLayout>
<StackLayout col="0" row="2">
<Button text="SIGN IN" btnTch (tap)="Auth_for_OTP()"></Button>
<Label marginTop="15" horizontalAlignment="center" text="REQUEST FOR ACCESS" [nsRouterLink]="['/signup']" ></Label>
</StackLayout>
</GridLayout>