I'm using JWPlayer v6.8.4616..
When i test it with a Single audio/mp3 file, with Caption, it works. For example:
<script type='text/javascript'>
jwplayer("theplayer").setup({
file: "http://www.example.com/audio1.mp3",
tracks: [{
file: "http://www.example.com/audio1.srt"
}]
});
</script>
The Audio/mp3 file is playing along with Caption on it.
But when i test with the Playlist, the Captions are shown only on the Video Tracks, but not on the Audio/mp3 Tracks.
Like:
<script type='text/javascript'>
jwplayer("theplayer").setup({
playlist: [{
file: "http://www.example.com/video1.mp4",
title: "Video Track (1)",
tracks: [{
file: "http://www.example.com/video1.srt",
label: "English",
kind: "captions",
"default": true
}]
},{
file: "http://www.example.com/video2.mp4",
title: "Video Track (2)",
tracks: [{
file: "http://www.example.com/video2.srt",
label: "English",
kind: "captions",
"default": true
}]
},{
file: "http://www.example.com/audio1.mp3",
title: "Audio Track (1)",
tracks: [{
file: "http://www.example.com/audio1.srt",
label: "English",
kind: "captions",
"default": true
}]
}]
});
</script>
Why is it and how to have Captions on the Audio/mp3 Tracks in the Playlist, please?
Related
So I am really struggling getting jsGrid up and running with my Django site, specifically using a controller to load the data in the table from an ajax request. It wasn't working, so I set up this very basic configuration just to see what was going on with my loadData function in my controller. Using the below configuration, the only thing that gets printed in the console is "In Script." so it's obviously not calling loadData within the controller. Maybe this simple "test" configuration isn't correct either. Please, what am I missing here? It has to be something silly.
{% extends 'layouts/layout_1.html' %}
{% block title %}Demos{% endblock %}
{% block content%}
<div id="demos-js-grid"></div>
{% endblock %}
{% block other_js %}
<script>
$(document).ready(function() {
console.log("In Script.")
$("#demos-js-grid").jsGrid({
onDataLoading: function(args) {
console.log("On Data loading.")
},
width: "100%",
height: "100%",
inserting: true,
editing: true,
sorting: true,
autoLoad: true,
controller: {
loadData: function(filter) {
console.log("loadData being called..");
},
insertItem: function(item) {
console.log("insertItem being called..")
},
updateItem: function(item) {
console.log("updateItem being called..")
},
deleteItem: function(item) {
console.log("deleteItem being called..")
}
},
fields: [
{ name: "Client Status", type: "text", width: 50 },
{ name: "Bee Status", type: "text", width: 50 },
{ name: "Store Status", type: "text", width: 50 },
{ name: "Region", type: "text", width: 100 },
{ name: "Chain", type: "text", width: 100 },
{ name: "Store", type: "text", width: 150 },
]
});
})
</script>
{% endblock%}
The option should be autoload: true, instead of autoLoad.
In fact, currently since auto-loading is not activated the grid is not loading, but you can still load it calling loadData method yourself.
Possibly I'm misunderstanding how Ember wants to lazy load hasMany sides of relationships but I'll specify what I want and someone can tell me if it is possible and how to configure things.
I'm using the RESTAdapter and I have a parent object with a 1-to-many relationship with several other objects. When I view the parent, I have links for the children objects that I want to show as child outlets.
Examples might be:
// brand.js
export default Model.extend({
name: attr('string'),
description: attr('string'),
dateCreated: attr('date'),
lastUpdated: attr('date'),
regions: hasMany('region', {async: true})
});
// region.js
export default Model.extend({
name: attr('string'),
dateCreated: attr('date'),
lastUpdated: attr('date'),
brand: belongsTo()
});
When I access /api/brands/1 I'm returning the following JSON:
{
"brand": {
"id": 1,
"dateCreated": 1466456255539,
"lastUpdated": 1466456255936,
"name": "Some Brand",
"description": "Voluptates odio nemo corrupti",
}
}
I have my route defined like so:
this.route('brand', {path: '/brands/:brand_id'}, function() {
this.route('regions');
});
So, in the brand detail screen, I have an {{outlet}} and when I click on the link for regions, I need to fetch the regions for that brand, and the URL would be /api/brands/1/regions.
Everything works if I return all the data in one big result, and my regions router looks like this:
export default Ember.Route.extend({
model() {
return this.modelFor('brand').get('regions');
}
});
But I don't know what to do so that regions gets lazily fetched correctly from my API. Or if it is even possible. I read up on side loading and currently, my API won't return ID's only for children.
With your example, ember.js does not know, what regions to load. Your JSON has to be either (non-embedded):
{
"brand": {
"id": 1,
"dateCreated": 1466456255539,
"lastUpdated": 1466456255936,
"name": "Some Brand",
"description": "Voluptates odio nemo corrupti",
"regions": ["5", "9"]
}
}
Which then loads regions with the id 5 and 9. Or you could embed them directly:
{
"brand": {
"id": 1,
"dateCreated": 1466456255539,
"lastUpdated": 1466456255936,
"name": "Some Brand",
"description": "Voluptates odio nemo corrupti",
"regions": [{
"id": "5",
"name": "Hanover",
"dateCreated": "2016-09-25 18:39:18",
"lastUpdated": "2016-09-25 18:39:18",
},{
"id": "9",
"name": "Cologne",
"dateCreated": "2016-01-19 11:59:18",
"lastUpdated": "2016-02-22 12:09:58",
}]
}
}
See here for the latter.
I am trying to display some CI information via an ember application backed by Firebase. If I do a this.store.find('plan'); it fetches and displays the plans for the desired project, but it doesn't automatically async fetch the plans like I want. I am not quite sure what I am doing wrong.
DEBUG: -------------------------------
DEBUG: Ember : 1.9.0-beta.1+canary.8105a1bb
DEBUG: Ember Data : 1.0.0-beta.11+canary.d96c747da5
DEBUG: EmberFire : 1.2.7
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery : 1.10.2
DEBUG: -------------------------------
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('project');
}
});
App.ApplicationAdapter = DS.FirebaseAdapter.extend({
firebase: new Firebase('https://my.firebaseio.com/api-data/')
});
App.Project = DS.Model.extend({
name: DS.attr('string'),
plans: DS.hasMany('plan', { async: true })
});
App.Plan = DS.Model.extend({
project: DS.belongsTo('project', { async: true }),
shortName: DS.attr('string'),
shortKey: DS.attr('string'),
type: DS.attr('string'),
enabled: DS.attr('boolean'),
name: DS.attr('string'),
description: DS.attr('string'),
isBuilding: DS.attr('boolean'),
averageBuildTimeInSeconds: DS.attr('number')
});
My template
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each project in model}}
<li>
<h3>{{project.name}}</h3>
<ul>
{{#each plan in project.plans}}
<li>{{plan.name}}</li>
{{else}}
<li>no plans</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</script>
How can I get the ember-data async relationship to automatically fetch when I try to access the project.plans property?
Edit:
I have tried mocking with Ember-CLI's http-mock and am sending back the following for /projects
{"plans":[{id: '10', project: '1', name: 'test', plans: ['10']}]}
Which is now working with adding the plans array. I now just need to figure out how this works on firebase.
When using Firebase after my initial seed data, I fetched each model type and called save on all instances. This caused Firebase to be properly populated for the async data array. This was persisted as follows:
/projects
{
"AS": {
"name": "AS",
"plans": {
"AS-AS": true
}
},
"F": {
"name": "F",
"plans": {
"F-INT": true,
"F-QA": true,
"F-STAG": true
}
}
}
/plans
{
"AS-AS": {
"averageBuildTimeInSeconds": 23,
"description": "",
"enabled": true,
"isBuilding": false,
"name": "AS - AS",
"project": "AS",
"shortKey": "AS",
"shortName": "AS",
"type": "chain"
},
"F-INT": {
"averageBuildTimeInSeconds": 18,
"description": "Integration build",
"enabled": true,
"isBuilding": false,
"name": "F - Integration",
"project": "F",
"shortKey": "INT",
"shortName": "Integration",
"type": "chain"
},
"F-QA": {
"averageBuildTimeInSeconds": 38,
"description": "Release from Stage to QA",
"enabled": true,
"isBuilding": false,
"name": "F - QA",
"project": "F",
"shortKey": "QA",
"shortName": "QA",
"type": "chain"
},
"F-STAG": {
"averageBuildTimeInSeconds": 16,
"description": "Stage Build and Deploy",
"enabled": true,
"isBuilding": false,
"name": "F - Stage",
"project": "F",
"shortKey": "STAG",
"shortName": "Stage",
"type": "chain"
}
}
I create an WebSQL database on my Sencha Touch project. An table named Product have 100 record.
I config my Store as
Ext
.define('Mark.store.Product', {
extend: 'Ext.data.Store',
requires: [
'Mark.model.Product',
'Ext.data.proxy.Sql'
],
config: {
autoLoad: true,
autoSync: true,
model: 'Mark.model.Product',
storeId: 'Product',
proxy: {
type: 'sql',
database: 'osadb'
}
}
});
By default it will load 25 record from the Product table to the product List on View (listpaging plugin added)
And this is my list configuration:
{
xtype: 'list',
docked: 'bottom',
height: '100%',
hidden: false,
itemId: 'productList',
emptyText: 'Data not found',
itemTpl: [
'<div style="font-size:15px">{METRO_DESC}</div>',
'<div style="font-size:13px" class="mark-list-item-secondary">{Brand} {PACKSIZE}</div>'
],
scrollToTopOnRefresh: false,
store: 'Product',
useSimpleItems: false,
plugins: [
{
autoPaging: true,
type: 'listpaging'
}
]
}
When i run the project. It have load 25 record to screen, and it show "No more records" at the bottom
.
But the table Product in Database have 100 record. The Store just load 25, why it's not show the "Load More" button instead of "No more record"
I am learning sencha touch.
I am facing an issue while using xtype:'list', in a container. i.e it does not show anything to me . My code is:
{
xtype:'container',
items:[
{
xtype: 'list',
id: 'lists',
fields: [{name:'name'}],
store: {
data: [
{name: 'Cowper'},
{name: 'Everett'},
{name: 'University'},
{name: 'Forest'}
]
},
itemTpl: '<div>{name}</div>'
}
],
}
Kindly point out where i am wrong ??
Any help would be great :)
Thanks in advance.
The issue is in your code. Try this -
Ext.create('Ext.List', {
fullscreen: true,
id:'lists',
itemTpl: '<div>{name}</div>',
data: [
{name: 'Cowper'},
{name: 'Everett'},
{name: 'University'},
{name: 'Forest'}
]
});
OR
Ext.define('TestModel', {
extend: 'Ext.data.Model',
config: {
fields: ['name']
}
});
var store = Ext.create('Ext.data.Store', {
model: 'TestModel',
data: [
{name: 'Cowper'},
{name: 'Everett'},
{name: 'University'},
{name: 'Forest'}
]
});
Ext.create('Ext.List', {
fullscreen: true,
id:'lists',
itemTpl: '<div>{name}</div>',
store: store
});
I think it is solved when you add:
layout: 'fit'
to your container. This config sizes its child components.
ST2 Layout Guide
Note that list is actually a container. Try to minimize your nesting.
Take a look at the fullscreen config too.