I am using NativeScript with Angular. I want to add JW Player in app to play video for my app but I cannot figure it out. My code is like below:-
home.html
<GridLayout row="0" #jwVideoPlayer>
</GridLayout>
home.ts
import { Component, OnInit, ViewChild, ElementRef } from "#angular/core";
declare var jwplayer: any;
#Component({
selector: "home",
templateUrl: "./home.component.html",
})
export class HomeComponent implements OnInit {
#ViewChild('jwVideoPlayer', { static: false }) jwVideoPlayer: ElementRef;
ngOnInit() {
const playerJw = jwplayer('jwVideoPlayer').setup({
title: 'Player Test',
playlist: 'https://cdn.jwplayer.com/v2/media/8L4m9FJB',
width: 640,
height: 360,
aspectratio: '16:9',
mute: false,
autostart: true,
primary: 'html5',
});
}
}
I am getting below error for obvious reason as I could not figure out the way to include JW Player in NativeScript:-
ERROR ReferenceError: Can't find variable: jwplayer
In web project I generally used below line to include JW Player.
<script type="text/javascript">jwplayer.key="1D+blahblah/blahblah=="</script>
Do Nativescript support JW Player?
Can anyone please help me as how to include JW Player in NativeScript app?
You can use the nativescript-jwplayer-web plugin with the following command
npm i nativescript-jwplayer-web --save
Related
I am trying to create a following graph using cytoscape.
https://pathwaycommons.github.io/cytoscape-sbgn-stylesheet/
I have installed cytoscape-sbgn-stylesheet and cytoscape as dependency on my angular app.
Here is the code for the angular app
import { AfterViewInit, Component, ElementRef, ViewChild } from '#angular/core';
import * as cytoscape from 'cytoscape';
import sbgnStylesheet from 'cytoscape-sbgn-stylesheet';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
#ViewChild('cy') el: ElementRef;
ngAfterViewInit() {
var cy = cytoscape({
container: document.getElementById('cy'), // container to render in
stylesheet: sbgnStylesheet(cytoscape),
elements :[] //copied from https://github.com/PathwayCommons/cytoscape-sbgn-stylesheet/blob/master/demo.json
layout: {
name: 'preset',
},
});
}
}
Html File
```
But I do not see the actual styles of the graph and I do not see any labels as well. What am I doing wrong?
Here is the picture that I see with no styling of nodes and no labels
The debugging took way too long, but the mistake was quite small, just use this:
style: sbgnStylesheet(cytoscape),
instead of:
stylesheet: sbgnStylesheet(cytoscape),
This is an error on the cytoscape-sbgn-stylesheet repositories README, the Usage passage clearly states to use "stylesheet", though the demo uses "style" as per usual.
Here is the revised version of your stackblitz
i successfully implemented vue-product-zoomer in my nuxt ssr.
when i come to this page through $router everything works fine
but when i refresh page something went wrong
here is screenshot
i have code like this
<client-only>
<ProductZoomer
:base-images="images"
:base-zoomer-options="zoomerOptions"
/>
</client-only>
and scripts
zoomerOptions: {
zoomFactor: 4, // scale for zoomer
pane: 'pane',
hoverDelay: 300,
namespace: 'zoomer',
move_by_click: false,
scroll_items: 5,
choosed_thumb_border_color: 'orange',
scroller_button_style: 'line',
scroller_position: 'left',
zoomer_pane_position: 'right',
},
It happens sometimes and the only way that i found is to refresh the component, so do the following:
add key to your component
<client-only>
<ProductZoomer :base-images="images" :base-zoomer-options="zoomerOptions" :key=""key/>
</client-only>
on mounted hook increment the key
export default {
data(){
return{
key:0,
}
},
mounted(){
// You may need to do the increment in a setTimeout (as for me doing it after 2 sec because of my skeleton loader)
this.key++
}
}
Hope it works.
Im using Gridsome frame work for VUE JS
I am navigating to a new page by using this.$router.push(PATH, PARAMS)
this.$router.push({path: `/${value.sectionLink}/`, params: {pageOBJ: value}})
The page route works fine - however the PROP, pageOBJ is undefined in the page as seen in the VUE inspector:
it should be an object (which is what VALUE is set to) i.e.
I've tried a number of different techniques to resolve this but have not managed to figure this out so I assume I have missed something here?
gridsome auto generates the page routes when you add a new PAGE.VUE file to the /pages folder -
Is this the issue?
Gridsome also references graphQI, are you supposed to grab the data using graph and not by pushing Props?
Any help would be amazing here - please let me know if you need any further information.
Thanks -
W
UPDATE BASED ON CURRENT ANSWERS:
I have already added props:true to the component as shown below, but the issue is still present.
CODE SNIPPET - SUMMARY:
User clicks on the SectionTitle component, this then emits the page link
(each of the SectionTitle is a object from : sections array of Object)
To see the current online version of this please look at
wtwd.ninjashotgunbear.com
<template>
<Layout>
<div class="navs" v-for="section in sections" :key="section.sectionTitle">
<!-- On click delay for screen to come ove top -->
<!-- router to be put here -->
<SectionTitle :data="section" #routeChange="reRoute($event)"/>
</div>
<PageTransition :dataObj="transitionObj"/>
</Layout>
</template>
<script>
import SectionTitle from '#/components/SectionTitle.vue';
import PageTransition from '#/components/PageTransition.vue'
export default {
metaInfo: {
title: 'Hello, world!'
},
components: {
SectionTitle,
PageTransition
},
data(){
return {
// data to be passed to the components
sections: [
{
sectionTitle: 'Clients',
sectionLink: 'clients',
sectionSubTitle: '"Some of the amazing humans I have had the pleasure of working with"',
backgroundColor: '#F08080',
titleColor: '#E65454'
},
{
sectionTitle: 'Projects',
sectionLink: 'projects',
sectionSubTitle: '"I LIKE TO MAKE PROJECTS THAT WILL TEST MY KNOWEDGE AND EXPOSE MY WEAKNESSES"',
backgroundColor: '#20B2AA',
titleColor: '#11DACF'
},
{
sectionTitle: 'Skills',
sectionLink: 'skills',
sectionSubTitle: `"LEARNING WILL NEVER END, SO LONG AS YOUR AMBITIONS ARE STOKED, AND I've got plenty of ambition"`,
backgroundColor: '#A921B2',
titleColor: '#CA14D6'
},
{
sectionTitle: 'About Me',
sectionLink: 'aboutme',
sectionSubTitle: `"My joruney becoming a developer so far"`,
backgroundColor: '#FFFFFF',
titleColor: '#D1D1D1'
},
{
sectionTitle: 'Contact Me',
sectionLink: 'contactme',
sectionSubTitle: `"If you have any questions or want to reach out about a project then i'd love to speak with you"`,
backgroundColor: '#2185B2',
titleColor: '#0076AB'
}
],
divText: null,
transitionObj: null
}
},
methods:{
reRoute(value){
// 1)A) - change the text of the div to say the section it is being moved to
this.divText = value.sectionTitle
this.transitionObj = value
// FIND center pixcle value to place text - scrolled height + windowHeight / 2 = centerPos
let centerPos = window.scrollY+(window.innerHeight/2)
// Apply secific Title color - and center possitioning
document.querySelector('.leaveScreen p').style.cssText=`color: ${value.titleColor}; top: ${centerPos}px`
// 1) animate the loading screen
let screen = document.querySelector('.leaveScreen');
screen.style.cssText=`background: ${value.backgroundColor}; left: 0%`;
// 2) re-route the page
setTimeout(()=>{
this.$router.push({path: `/${value.sectionLink}/`, params: {pageOBJ: value}}) // << says that the route name is not found
// this.$router.push(value.sectionLink)
}, 700)
}
}
}
</script>
<style lang="scss">
// **** ERROR CAUSED BY NOT INSTALLING SCSS package ****
// https://gridsome.org/docs/assets-css/ &&&& npm install -D sass-loader node-sass
// Universal Font being used - LEMON MILK
#font-face {
font-family: LemonMilk;
src: url('../assets/fonts/LemonMilk.otf');
}
* {
box-sizing: border-box;
}
.navs {
font-family: LemonMilk;
}
.SectionTitle{
cursor: pointer;
}
</style>
Pass name rather than path in this.$router.push()
this.$router.push({name: ${value.sectionLink}, params: {pageOBJ: value}})
You should add props:true to the route definition :
{
path:'/thepath/:theParam',
component:SomeComponent,
props:true
}
I am using materialdesignicons in my vue project.
require ('../node_modules/#mdi/font/css/materialdesignicons.min.css);
Vue.use(Vuetify, {iconfont:'mdi'});
I have a handful of icons which I dynamically create:
<v-icon>{{ some-mdi-file }}</v-icon>
When I build for production via (npm run build) I get the following error:
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
img/materialdesignicons-webfont.someHash.svg (3.77 MiB)
That file size is huge because it includes every icon, regardless of whether it's being used. Is there a way to trim that file size down by only packaging the specific icons used. Is there a different package I should be using? Caveat: The project is hosted offline, so I need to include the fonts directly in my project.
I looked at vue-material-design-icons but it looks like it may not work for dynamic icon names and it says nothing about the overall file size/performance.
I have also looked here but clicking on the 'size warning' link brings me to a page where the Vue portion is not filled out
https://dev.materialdesignicons.com/getting-started/webfont
I would recommend using the #mdi/js package for this which provides SVG paths for each icon and supports tree shaking. Currently Vuetify doesn't support SVG icons but it should in the future.
For now, it's easy enough to create a custom icon component:
<template>
<svg :class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path :d="path" />
</svg>
</template>
<script>
export default {
name: 'my-icon',
data: () => ({
path: '',
}),
methods: {
updatePath() {
if (!this.$scopedSlots) return
if (typeof this.$scopedSlots.default !== 'function') return
this.path = this.$scopedSlots
.default()
.map((n) => n.text)
.join('')
},
},
mounted() {
this.updatePath()
},
updated() {
this.updatePath()
},
}
</script>
<style scoped>
.icon {
display: block;
color: inherit;
fill: currentColor;
width: 24px;
height: 24px;
}
<style>
Then to use it you just need to import your component and the icon you want to use:
<template>
<div class="app">
<my-icon>{{mdiCheck}}</my-icon>
</div>
</template>
<script>
import MyIcon from 'path/to/my/icon.vue'
import { mdiCheck } from '#mdi/js'
export default {
name: 'my-app',
components: {
MyIcon,
}
data: () => ({
mdiCheck,
}),
}
</script>
I'm starting with polymer 3 and i'm working on this tutorial https://www.polymer-project.org/1.0/start/first-element/step-5, so basically i have the component js file as follows
icon-toggle.js
import { PolymerElement, html } from '#polymer/polymer/polymer-element.js';
import '#polymer/iron-icon/iron-icon.js';
class IconToggle extends PolymerElement {
static get template() {
return html`
<style>
/* shadow DOM styles go here */
:host {
display: inline-block;
--icon-toggle-color: lightgrey;
--icon-toggle-outline-color: black;
--icon-toggle-pressed-color: red;
}
iron-icon {
fill: var(--icon-toggle-color, rgba(0,0,0,0));
stroke: var(--icon-toggle-outline-color, currentcolor);
cursor: pointer;
}
:host([pressed]) iron-icon {
fill: var(--icon-toggle-pressed-color, currentcolor);
}
</style>
<!-- shadow DOM goes here -->
<iron-icon icon="[[toggleIcon]]"></iron-icon>
`;
}
static get properties() {
return {
pressed: {
type: Boolean,
value: false,
notify: true,
reflectToAttribute: true
},
toggleIcon: {
type: String
}
};
}
constructor() {
super();
this.addEventListener('click', this.toggle.bind(this));
}
toggle() {
this.pressed = !this.pressed;
}
}
customElements.define('icon-toggle', IconToggle);
Now I'm wondering how to import this and use it in an angular 5 app.
Generate a new Angular app.
ng new with-polymer
From within with-polymer create a directory to store the web components in.
mkdir src/app/components
Copy your polymer component code to src/app/components/icon-toggle.js
Install the polymer dependencies.
npm install #polymer/iron-icon #polymer/polymer
Update src/app/app.module.ts to import CUSTOM_ELEMENTS_SCHEMA and tell NgModule that custom elements will be in use.
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '#angular/core';
#NgModule({
...
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
Import icon-toggle in src/app/app.module.ts.
import './components/icon-toggle';
Add an icon-toggle to src/app/app.component.html.
<icon-toggle toggle-icon="star"></icon-toggle>
Start up the dev server.
npm start
Note that you will probably want to include some web component polyfills.