Video Player in appcelerator not playing - appcelerator

I am trying to autoplay a video in appcelerator after getting the url from a different controller as an argument. But the video isn't playing.
Here is the VideoPalyerController.xml file :
<Alloy>
<View class="container" >
<View class="videoPlayerView" >
<VideoPlayer class = "videoPlayerClass" id = "videoPlayer"></VideoPlayer>
</View>
<View class="videoInfoView" layout="vertical" backgroundColor="white">
<Label class="titleLabel" backgroundColor="gray"></Label>
<View class="dateUrlView" layout="horizontal"></View>
<Label class="dateLabel" backgroundColor="lightgray"></Label>
<Label class = "urlLabel"></Label>
</View>
<!-- <View class = "buttonview">
<Button class="backButton"></Button>
</View> -->
</View>
</Alloy>
Here is the VideoPlayerController.js file :
var args = $.args;
Ti.API.trace("VideoPlayerController :",args.url);
//titleLabel = args.info;
$.videoPlayer.url = args.url;
Here is the DashboardController.js from where I am sending the arguments to VideoPlayerController.js file :
var args = $.args;
var sections = [];
//JSON to populate the listview
var videoInfo = [{
pic : "/Images/playButton.png",
info : "This in the the title for the first video.",
date : "03/07/2017",
url : "https://youtu.be/zkOSR0ZRb9khttps://youtu.be/zkOSR0ZRb9k"
}, {
pic : "/Images/playButton.png",
info : "This in the the title for the second video.",
date : "03/07/2017",
url : "https://youtu.be/zkOSR0ZRb9khttps://youtu.be/zkOSR0ZRb9k"
}, {
pic : "/Images/playButton.png",
info : "This in the the title for the third video.",
date : "03/07/2017",
url : "https://youtu.be/zkOSR0ZRb9khttps://youtu.be/zkOSR0ZRb9k"
}];
function populateListView() {
Ti.API.trace("[DashboardController.js >> populateListView() >>]");
if (!_.isEmpty(videoInfo)) {
for (var i = 0; i < videoInfo.length; i++) {
var item = {
template : "videoTemplate",
iconId : {
image : videoInfo[i].pic
},
titleId : {
text : videoInfo[i].info
},
dateId : {
text : videoInfo[i].date
},
urlId : {
text : videoInfo[i].url
},
properties : {
backgroundColor : "transparent"
}
};
sections.push(item);
}
$.listSection.setItems(sections);
}
}
populateListView();
$.lView.addEventListener('itemclick',function(e){
Ti.API.trace("[DashboardController.js >> Function to open VideoPlayerController >>]");
var dataItem = videoInfo[e.itemIndex];//$.listSection.getItemAt(e.itemIndex) ;
Ti.API.trace("Data Item is : ",dataItem);
var videoController = Alloy.createController('VideoPlayerController',{
"url":dataItem.url,
"title":dataItem.info,
"date":dataItem.date
}).getView();
Alloy.Globals.parent.add(videoController);
//videoController.open();
});

Are you able to open that video on browser?
because when i tried to open that url from DashboardController.js file, it shows 404 error.
I think you set url twice in json object.
{
pic : "/Images/playButton.png",
info : "This in the the title for the second video.",
date : "03/07/2017",
url : "https://youtu.be/zkOSR0ZRb9khttps://youtu.be/zkOSR0ZRb9k"
}
remove one of that try again.

Related

get image url ckfinder

I want to take the image address and add it to data-original="image url"
Sample : <img src="Bengal-kedisi.jpg" data-original="Bengal-kedisi.jpg" class="lazy w-100 ortalaimg">
on: {
instanceReady: function() {
this.dataProcessor.htmlFilter.addRules( {
elements: {
img: function( el ) {
if ( !el.attributes["data-original"])
el.attributes["data-original"]= 'images URL';
el.addClass( 'lazy w-100 ortalaimg' );
}
}
} );
}
}

UIScrollView with fade effect with nativescript vuejs

I would like to know if it's possible to have UIScrollView with fade effect with nativescript please ?
For example : https://medium.com/#luisfmachado/uiscrollview-with-fade-effect-246e332e8b24
I read the documentation https://nativescript-vue.org/en/docs/elements/components/scroll-view/, but I don't found this information.
I would like this result for example :
Do you have an idea please ? Thank you
I have no idea how can I put the native code in my component
<template>
<ScrollView class="scroll" orientation="vertical" row="1" ref="scrollView">
<StackLayout marginLeft="10" marginRight="10" class="container-verses">
<StackLayout horizontalAlignment="center">
<Label textWrap="true" textAlignment="center" text="hello" color="#FFFFFF" fontSize="20"/>
...
<Label textWrap="true" textAlignment="center" text="hello" color="#FFFFFF" fontSize="20"/>
</StackLayout>
</StackLayout>
</ScrollView>
</template>
<script>
export default {
name : 'FadeScrollView',
computed: {},
methods : {
//
}
};
</script>
<style lang='scss' scoped>
</style>
Here is how you translate Swift into NativeScript
import { isIOS } from "#nativescript/core/platform";
import { ScrollView } from "#nativescript/core/ui/scroll-view";
let FadeScrollViewImpl;
if (isIOS) {
FadeScrollViewImpl = UIScrollView.extend({
fadePercentage: 0.2,
gradientLayer: CAGradientLayer.new(),
transparentColor: UIColor.clearColor.CGColor,
opaqueColor: UIColor.blackColor.CGColor,
topOpacity: () => {
const scrollViewHeight = this.frame.size.height;
const scrollContentSizeHeight = this.contentSize.height;
const scrollOffset = this.contentOffset.y;
const alpha = (scrollViewHeight >= scrollContentSizeHeight || scrollOffset <= 0) ? 1 : 0;
return UIColor.alloc().initWithWhiteAlpha(0, alpha).CGColor;
},
bottomOpacity: () => {
const scrollViewHeight = this.frame.size.height;
const scrollContentSizeHeight = this.contentSize.height;
const scrollOffset = this.contentOffset.y;
const alpha = (scrollViewHeight >= scrollContentSizeHeight || scrollOffset + scrollViewHeight >= scrollContentSizeHeight) ? 1 : 0
return UIColor.alloc().initWithWhiteAlpha(0, alpha).CGColor;
},
layoutSubviews() {
super.layoutSubviews()
this.delegate = this;
const maskLayer = CALayer.new();
maskLayer.frame = this.bounds;
this.gradientLayer.frame = CGRectMake(this.bounds.origin.x, 0, this.bounds.size.width, this.bounds.size.height);
this.gradientLayer.colors = [this.topOpacity, this.opaqueColor, this.opaqueColor, this.bottomOpacity];
this.gradientLayer.locations = [0, NSNumber.alloc().initWithFloat(this.fadePercentage), NSNumber.alloc().initWithFloat(1 - this.fadePercentage), 1];
maskLayer.addSublayer(this.gradientLayer);
this.layer.mask = maskLayer
},
scrollViewDidScroll(scrollView) {
this.gradientLayer.colors = [topOpacity, opaqueColor, opaqueColor, bottomOpacity];
}
});
}
export class FadeScrollView extends ScrollView {
createNativeView() {
if (isIOS) {
return FadeScrollViewImpl.new();
} else {
return super.createNativeView();
}
}
attachNative() {
if (!isIOS) {
super.attachNative();
}
}
}
Then you just have to register the element to start using it in template
Vue.registerElement('FadeScrollView', () => require('./fade-scrollView').FadeScrollView)
Playground Sample

JSON value in View Model displayed as [object Object] only

This will be a noob question. I am working on my first NativeScript app, a simple GPS tracker. It's only one view. I got the Location plugin to work and it outputs location data to the console nicely. It also seems to update the View Model. But when I try to bind it to a Label element's text, it only displays [object Object], regardless what I do.
The view model:
var observableModule = require("data/observable");
function viewModel() {
return new observableModule.fromObject({
"locations": [],
"lastLocation": {
"latitude": "0",
"longitude": "0",
"altitude": 0,
"horizontalAccuracy": 0,
"verticalAccuracy": 0,
"speed": "0",
"direction": "0",
"timestamp": new Date().toISOString()
},
"lastUpload": "Unknown"
});
}
module.exports = viewModel;
The view XML: (just the important part)
<Label text="Current location:"/>
<Label text="{{ lastLocation?.latitude }} ; {{ lastLocation?.longitude }}" />
<Label text="Last location update:"/>
<Label text="{{ lastLocation?.timestamp }}" />
<Label text="Last successful upload:"/>
<Label text="{{ lastUpload }}" />
The code:
var frameModule = require("ui/frame");
var viewModel = require("./home-view-model");
var geolocation = require("nativescript-geolocation");
var dialog = require("ui/dialogs");
var viewModel = new viewModel();
function onLoaded(args) {
page = args.object;
page.bindingContext = viewModel;
var enableLocation = new Promise((resolve, reject) => {
geolocation.enableLocationRequest(true)
.then(
success => resolve(),
error => reject(error)
)
})
.then(
() => {
watchId = geolocation.watchLocation(
function (loc) {
if (loc) {
viewModel.lastLocation = loc;
console.log(viewModel.lastLocation.latitude + ' ; ' + viewModel.lastLocation.longitude);
}
},
function (e) {
dialogsModule.alert('Location error: ' + e.message);
},
{
desiredAccuracy: 3,
updateDistance: 0,
minimumUpdateTime: 10000
})
},
error => {
dialogsModule.alert('Location error: ' + e.message);
}
)
}
exports.onLoaded = onLoaded;
The console.log row properly displays the latitude and longitude values. The view displays [object Object], but it displays the lastUpload value right. What am I doing wrong in the view?
Oh yes, it was a noob question. The solution is that I shouldn't use question marks in the template.
<Label text="Current location:"/>
<Label text="{{ lastLocation.latitude }} ; {{ lastLocation.longitude }}" />
<Label text="Last location update:"/>
<Label text="{{ lastLocation.timestamp }}" />
Now it works.

Editing nested image in CKEditor widget doesn't work

I'm using my own plugin providing widgets for the CKEditor. I'm not able to edit images in editables.
It's no problem to add an image. The editor shows it.
But if I want to edit one, the dialog fields (like URL) are empty. I'm using the default image plugin (no image2 widget).
Is there something I have to do for supporting this feature?
I added an example of my plugin. I'm using it in a drupal web portal in combination with the drupal ckeditor module.
// Register our custom "section" widget plugin with CKEditor.
CKEDITOR.plugins.add('section', {
requires : 'widget',
init : function(editor) {
// Register the widget.
editor.widgets.add('example', {
template : '<section class="example"><div class="container-fluid"><div class="row"><div class="col-sm-12 col-md-6 editable-left"></div><div class="col-sm-6 col-md-3 text-center editable-middle"></div><div class="col-sm-6 col-md-3 editable-right"></div></div></div></section>',
allowedContent : 'section(!example)',
editables : {
left : {
selector : '.editable-left',
},
middle : {
selector : '.editable-middle',
},
right : {
selector : '.editable-right',
},
},
upcast : function(element) {
if (element.name == 'section' && element.hasClass('example')) {
return true;
} else {
return false;
}
}
});
}
});

sortable grid with knockout with ajax load

I am loading an observable array via ajax, hooking up to a table and then adding sorting to the column headers. It works but only sorts random rows. If I bypass the ajax feed and manually declare the observable array, all works well. Am I missing something obvious here?
//The Page
$(document).ready(function () {
var pageModel = function () {
var self = this;
//Variables and observables
self.loading = ko.observable(false);
self.searchQuery = ko.observable("");
self.searchCelebrantId = ko.observable(-1);
//Models used in page
self.celebrantsInstance = ko.observable(new celebrantsModel());
self.marriagesInstance = ko.observable(new marriagesModel());
//var celebrantsInstance = new celebrantsModel();
//var marriageInstance = new singleMarriageModel(1);
//Get data
self.loadData = function () {
return $.when(
self.celebrantsInstance().loadData()
//, self.marriagesInstance().loadData()
);
}
}
var pageInstance = new pageModel({});
pageInstance.loadData()
.done(function () {
setTimeout(function () {
ko.applyBindings(pageInstance);
/* Bootstrap select */
$("select").selectpicker();
$("select").addClass('show-menu-arrow').selectpicker('setStyle');
}, 500);
});
});
//The knockout .js model file
function marriage(data) {
var self = this;
self.id = ko.observable(data.Id);
self.CelebrantId = ko.observable(data.CelebrantId);
self.MarriageDate = ko.observable(data.MarriageDate);
self.MarriagePlace = ko.observable(data.MarriagePlace);
self.WifeFirstName = ko.observable(data.WifeFirstName);
self.WifeMaidenName = ko.observable(data.WifeMaidenName);
self.HusbandFirstName = ko.observable(data.HusbandFirstName);
self.HusbandSurname = ko.observable(data.HusbandSurname);
self.MarriageCertificateNumberToRegistrar = ko.observable(data.MarriageCertificateNumberToRegistrar);
self.MarriageCertificateNumberToCouple = ko.observable(data.MarriageCertificateNumberToCouple);
}
function GetMarriageList(searchQuery) {
return $.ajax("/Marriage/GetMarriageList?searchQuery=" + searchQuery, {
type: "get"
});
};
function GetMarriage(id) {
return $.ajax("/Marriage/GetMarriage?id=" + id, {
type: "get"
});
};
var marriagesModel = function () {
var self = this;
self.loading = ko.observable(false);
self.searchQuery = ko.observable("a");
self.searchCelebrantId = ko.observable(-1);
self.marriages = ko.observableArray([]);
self.sortCommand = ko.observable("MarriagePlace asc");
self.headers = [
// { title: 'Marriage Date', sortPropertyName: 'MarriageDate', asc: true },
{ title: 'Marriage Place', sortPropertyName: 'MarriagePlace', asc: true },
{ title: 'Wife First Name', sortPropertyName: 'WifeFirstName', asc: true },
{ title: 'Wife Maiden Name', sortPropertyName: 'WifeMaidenName', asc: true },
{ title: 'Husband First Name', sortPropertyName: 'HusbandFirstName', asc: true },
{ title: 'Husband Surname', sortPropertyName: 'HusbandSurname', asc: true },
{ title: ' Marriage Certificate\nTo Registrar', sortPropertyName: 'MarriageCertificateNumberToRegistrar', asc: true },
{ title: 'Marriage Certificate \nTo Couple', sortPropertyName: 'MarriageCertificateNumberToCouple', asc: true },
{ title: '' },
];
self.activeSort = self.headers[0]; //set the default sort
self.sort = function (header, event) {
//if this header was just clicked a second time
if (self.activeSort === header) {
header.asc = !header.asc; //toggle the direction of the sort
} else {
self.activeSort = header; //first click, remember it
}
var prop = self.activeSort.sortPropertyName;
var ascSort = function (a, b) { return a[prop] < b[prop] ? -1 : a[prop] > b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };
var descSort = function (a, b) { return a[prop] > b[prop] ? -1 : a[prop] < b[prop] ? 1 : a[prop] == b[prop] ? 0 : 0; };
var sortFunc = self.activeSort.asc ? ascSort : descSort;
self.marriages.sort(sortFunc);
};
self.loadData = function () {
self.loading(true);
return GetMarriageList(self.searchQuery())
.done(function (data) {
var mappedMarriages = $.map(data, function (item) {
return new marriage(item);
});
self.marriages(mappedMarriages);
self.loading(false);
});
}
return GetMarriageList(self.searchQuery())
.done(function (data) {
var mappedMarriages = $.map(data, function (item) {
return new marriage(item);
});
self.marriages(mappedMarriages);
self.loading(false);
});
}
//HTML Table
<table id="event-table" class="table table-striped" style="width: 100%; display: none" data-bind="visible: (!loading() && marriages().length > 0)">
<tr data-bind="foreach: headers">
<th data-bind="click: sort, text: title"></th>
</tr>
<!-- ko foreach: marriages -->
<tr>
<!--<td style="width: 120px"><span data-bind='html: moment(MarriageDate()).format("DD/MM/YYYY")'></span></td>-->
<td><span data-bind='html: MarriagePlace'></span></td>
<td><span data-bind='html: WifeFirstName'></span></td>
<td><span data-bind='html: WifeMaidenName'></span></td>
<td><span data-bind='html: HusbandFirstName'></span></td>
<td><span data-bind='html: HusbandSurname'></span></td>
<td><span data-bind='html: MarriageCertificateNumberToRegistrar'></span></td>
<td><span data-bind='html: MarriageCertificateNumberToCouple'></span></td>
<td><a data-bind='attr: { "href": "/Marriage/Edit/" + id }'>Edit</a></td>
</tr>
<!-- /ko -->
</table>
You might want to have a look at knockout-transformations.
Cheers

Resources