autodetect best quality from multiple sources for current user - jwplayer - html

Here is my code:
var playerInstance = jwplayer("mySingleVideoWrapper").setup({
image: getCurrentPosterSrc,
sources: [
{
file: 'file-360.mp4',
label: "360p"
},{
file: 'file-480.mp4',
label: "480p"
},{
file: 'file-720.mp4',
label: "720p HD"
},{
file: 'file-1080.mp4',
label: "1080p HD"
}
],
width: "100%",
androidhls: 'true',
type: "hls",
fallback:true,
aspectratio: "16:9",
autostart: true,
logo: {
hide: true
},
tracks: [{
file: "/assets/captions-en.vtt",
label: "EN",
kind: "captions",
"default": true
},{
file: "/assets/captions-es.vtt",
label: "ES",
kind: "captions"
},{
file: "/assets/captions-fr.vtt",
kind: "captions",
label: "FR"
},{
file: "js/assets/captions-de.vtt",
label: "DE",
kind: "captions"
}]
});
And also here is a screenshot where I highlighted what I need
So I need that 'Auto' button which will autodetect which is the best quality for current user. Now with my code I see all 4 sources/qualities but 'Auto' button can't see. How can I add it ?

Amazon Support have me this useful article link http://www.jwplayer.com/blog/encoding-hls-with-amazon-elastic-transcoder/ and I could do what I want.

Related

How to avoid CKeditor to load files when it's invoked

I use CKEditor in a modal window, so it's "invoked" when the modal is shown.
When this happens I see CKEditor try to loads files like:
ckeditor/lang/es.js?t=J5S8
ckeditor/styles.js?t=J5S8
ckeditor/plugins/confighelper/plugin.js?t=J5S8
ckeditor/skins/moono-lisa/editor.css
...
I tried to load all these files in the page, but when CKeditor is invoked it tries to load again more files, even the ones I already loaded.
This is a problem in my case because I use an AssetManager and Minification system in my framework (Yii2), and since everything is packed in one file, CKeditor fails when it tries to load again files.
Is there any way to preload everything that CKeditor will need, in order to have the Assets and Minify process working well ?
My CKEditor config is:
CKEDITOR.replace('#editor', {
customConfig: '',
height: 200,
language: 'es',
extraPlugins: 'confighelper',
removePlugins: 'elementspath',
resize_enabled: false,
toolbarLocation: 'top',
toolbar: [
{ name: 'styles', items: [ 'Format' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline' ] },
{ name: 'links', items: [ 'Link', 'Unlink' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'spellchecker' ], items: [ 'Scayt' ] },
{ name: 'tools', items: [ 'Maximize' ] },
]
});

HTML above an xtype: 'formpanel' in Sencha Touch 2?

I'm new to Sencha Touch 2 and would like to place an HTML tag on top of the page and an xtype: formpanel below that. Any clue how to do this? Do I have to place both of these elements inside another xtype?
Thx in advance.
-> Screenshot
The code looks as follows (some stuff came before the code of course):
xtype: 'carousel',
direction: 'horizontal',
//Will be applied to every object in the array by default
defaults: {
styleHtmlContent: 'true',
scrollable: true
},
items: [
{
cls: 'configurator-item',
html: '<h2>Demo heading</h2>',
xtype: 'formpanel',
items: [
{
xtype: 'fieldset',
title: 'Demo',
defaults: {
//labelWidth: '30%',
autoCapitalize: true,
//required: true,
clearIcon: true
},
items: [
{
xtype: 'textfield',
name: 'locationOfHouse',
label: 'Demo',
placeHolder: 'Demo?'
},
{
xtype: 'spinnerfield',
name: 'numberOfPeople',
label: 'Demo',
minValue: 0,
maxValue: 99,
increment: 1,
cycle: true
}
]
}
]
},
You can implement this using 2 xtypes.
(1) xtype = panel or container to display the html or top.
(2) xtype = fieldset for the middle content.
Once this sencha app renders in the browser, it will be converted into series of divs and spans. So, 1# will give you more control to manipulate the text.
I have implemented the same for you on senchafiddle, you can have a look,
http://www.senchafiddle.com/#PHRyc
Hope it helps.
Yes, thanks I got it meanwhile like this:
items: [
{
xtype: 'container',
layout: 'vbox',
items: [
{
xtype: 'panel',
docked: 'top',
html: [
'<h1>Demo heading</h1>'
},
{
xtype: 'fieldset',
title: 'Demo',
defaults: {
//labelWidth: '30%',
autoCapitalize: true,
//required: true,
clearIcon: true,
labelAlign: 'top',
},
items: [
{
xtype: 'textfield',
name: 'Demo',
label: 'Demo',
labelWidth: '33%',
placeHolder: 'Demo'
}
(..and closing all the brackets above..)

Can't show the json Data in Treepanel in extjs 4

I am working on showing JSON data in EXTJS 4 TreePanel. But my tree is not showing any data . Please let me know where I am wrong. Let me post my codes below:
View Part: it has got the treepanel
xtype: 'treepanel',
title: 'Standard Geographies',
height: 250,
width: 310,
store: 'Data',
border: 1,
displayField: 'name',
useArrows: true,
rootVisible: true,
multiSelect: true,
preventHeader: true,
renderTo: Ext.getBody(),
columns: [{
xtype: 'treecolumn',
text: 'Standard Geographies',
flex: 1,
sortable: false,
//renderer : change,
dataIndex: 'name'
}],
Model Part: Using json data
Ext.define('TA.model.TAModel', {
extend: 'Ext.data.Model',
fields: ['name','typeId'],
//fields: ['abbr','type'],['name','typeId']
proxy: {
type: 'ajax',
url : 'data/StandardGeoTree.json',
actionMethods: {
read: 'POST'
},
reader: {
type: 'json',
root: 'geographyOptions'
},
}
});
Store Part: I hope all is ok in the store part
Ext.define('TA.store.Data', {
//extend: 'Ext.data.Store',
//model: 'TA.model.TAModel',
extend: 'Ext.data.TreeStore',
model: 'TA.model.TAModel',
autoSync: true,
autoLoad: true,
listeners: {
load:function(){
console.log('Schemes Data store loaded');
}
},
proxy: {
type: 'ajax',
//url : 'data/StandardGeoTree.json',
api: {
//read: 'data/StandardGeo.json',
read: 'data/StandardGeoTree.json',
//update: 'data/updateTradeArea.json'
},
reader: {
type: 'json',
root: 'root',
successProperty: 'success',
idProperty : 'typeId'
}
},
root : {
text: 'Root',
id: 'typeId',
expanded : true,
loaded : true,
children: []
}
});
JSON
{
"success": true,
"root" : [
{
"name": "001-USA",
"typeId" : "1",
"children":[
{"name": "USA", "typeId" : "1", "leaf":"true"},
{"name": "State", "typeId" : "2", "leaf":"true"},
{"name": "DMA", "typeId" : "3", "leaf":"true"},
{"name": "CSA", "typeId" : "4", "leaf":"true"},
]
}
]
}
the store configuration for tree component is actually doesn't need to be so complicated. for example simple store declaration below is enough:
var treestore = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'data/StandardGeoTree.json'
}
});
then in your tree configuration set store: treestore and rootVisible: false
finally, the store expect json respond in this format:
[{
"text": "To Do",
"cls": "folder",
"expanded": true,
"children": [{
"text": "Go jogging",
"leaf": true
},{
"text": "Take a nap",
"leaf": true
},{
"text": "Climb Everest",
"leaf": true
}]
}]
In your JSON, your root property has to be similar to your children. So it's either "root" or "children", but not both. See this question for the full explanation.
So given you stick to:
reader: {
type: 'json',
root: 'root',
successProperty: 'success',
idProperty : 'typeId'
}
Your JSON should look like so:
{
"success": true,
"root" : [
{
"name": "001-USA",
"typeId" : "1",
"root":[
{"name": "USA", "typeId" : "1", "leaf":"true"},
{"name": "State", "typeId" : "2", "leaf":"true"},
{"name": "DMA", "typeId" : "3", "leaf":"true"},
{"name": "CSA", "typeId" : "4", "leaf":"true"},
]
}
]
}
Nothing worked as solution. So I had to write the below code part in my view which solved my problem. I am pasting the code part below:
var treeStore = Ext.StoreManager.lookup('Data');
treeStore.load();
But I want my store to be loaded automatically. Please let me know if you have any solution to automatically load the store.

Sencha Touch 2 Dynamic Items Array

In the following example, I would like to replace the hard-coded items array with a call to a jsonstore with with same items read dynamically. I have tried referencing the store through xtype but get an error that Object has no method 'getItemId' - please let me know what I am doing wrong and many thanks for your help
Ext.define("MyApp.view.Main", {
extend: 'Ext.ux.slidenavigation.View',
requires: [
'Ext.Container',
'Ext.MessageBox',
'Ext.Panel',
'Ext.Toolbar',
'Ext.event.publisher.Dom'
],
config: {
fullscreen: true,
slideSelector: 'x-toolbar',
selectSlideDuration: 200,
list: {
maxDrag: 400,
width: 200,
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Navigation',
centered: false,
width: 200,
left: 0
}
}]
},
/***************************************************************/
/* Want to replace this items array with dynamic call to store */
/***************************************************************/
items: [{
title: 'Item 1',
slideButton: {
selector: 'toolbar'
},
items: [{
xtype: 'toolbar',
title: 'Item 1',
docked: 'top'
},{
xtype: 'panel',
html: '<img src="resources/images/guide.jpg" width="100%" />'
}]
},{
title: 'Item 2',
slideButton: {
selector: 'toolbar'
},
items: [{
xtype: 'toolbar',
title: 'Item 2',
docked: 'top'
},{
xtype: 'panel',
html: '<img src="resources/images/guide.jpg" width="100%" />'
}]
}]
}
Store sample
Ext.define('MyApp.store.Navigation', {
extend: 'Ext.data.Store',
alias: 'widget.navstore',
requires: [
'MyApp.model.Navigation'
],
config: {
model: 'InspectionApp.model.Navigation',
storeId: 'navStore',
proxy: {
type: 'ajax',
url: '/path/to/navigation.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
grouper: {
property: 'group',
sortProperty: 'groupOrder'
}
}
});
json sample
[
{
"title": "Item 1",
"slideButton": "{selector: 'toolbar'}",
"items": "[{xtype: 'toolbar',title: 'Item 1',docked: 'top'},{xtype: 'panel',html: '<img src='resources/images/guide.jpg' width='100%' />'}]",
"handler": ""
},
{
"title": "Item 2",
"slideButton": "{selector: 'toolbar'}",
"items": "[{xtype: 'toolbar',title: 'Item 2',docked: 'top'},{xtype: 'panel',html: '<img src='resources/images/guide.jpg' width='100%' />'}]",
"handler": ""
}
]
Assuming your store is loading correctly, you can get a reference to it by calling
Ext.getStore('navStore')
or by assigning your store to a variable:
var yourStore = Ext.define('MyApp.store.Navigation', {
extend: 'Ext.data.Store',
alias: 'widget.navstore',
requires: [
'MyApp.model.Navigation'
],
config: {
model: 'InspectionApp.model.Navigation',
storeId: 'navStore',
proxy: {
type: 'ajax',
url: '/path/to/navigation.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
grouper: {
property: 'group',
sortProperty: 'groupOrder'
}
}
});
To populate the items object I would put it in a container:
{
xtype: 'container',
id: 'container_id',
}
then
for (var i = 0; Ext.getStore('navStore').getCount(); ++i){
var record = Ext.getStore('navStore').getAt(i);
var myComponent = Ext.create(...
//make the component you want to add with the data from the record
);
Ext.ComponentQuery.query('#container_id')[0].add(myComponent);
}

ExtJS Grid JSON Store Proxy Error

I am working on displaying a ExtJS Grid. I got everything correct except the part about proxy with in the Json store. When I try to display it throws an error:
this.proxy is undefined
Ext.data.Store=function(A){this.data=n...ta=C;this.resumeEvents();return B}});
I figured out that i need to do something in the store but not sure what. the variable list data has the Json Array string. Please any help is really appreciated. thanks
var listData = <%= aItems %> ;
var AIGrid;
Ext.onReady(function () {
var AIRecord = Ext.data.Record.create([{
name: "ID",
type: "int",
mapping: "ID"
}, {
name: "WSTITLE",
type: "string",
mapping: "WSTITLE"
}, {
name: "REQ_ATTUID",
type: "string",
mapping: "REQ_ATTUID"
}, {
name: "DESCRIPTION",
type: "string",
mapping: "DESCRIPTION"
}, {
name: "RES_ATTUID",
type: "string",
mapping: "RES_ATTUID"
}, {
name: "RESOLUTION",
type: "string",
mapping: "RESOLUTION"
}, {
name: "START_TIME",
type: "string",
mapping: "START_TIME"
}, {
name: "END_TIME",
type: "string",
mapping: "END_TIME"
}]);
var AIreader = new Ext.data.JsonReader({
root: "root",
id: "ID"
}, AIRecord);
var AIstore = new Ext.data.Store({
nocache: true,
data: listData,
reader: AIreader
});
var AIcol = new Ext.grid.ColumnModel([{
header: 'ID',
readOnly: true,
dataIndex: 'ID',
width: 30
}, {
header: 'Work Step',
dataIndex: 'WSTITLE',
width: 200,
readOnly: true
}, {
header: 'Requester',
dataIndex: 'REQ_ATTUID',
width: 80,
readOnly: true
}, {
header: 'Description',
dataIndex: 'DESCRIPTION',
width: 300,
readOnly: true
}, {
header: 'Resolver',
dataIndex: 'RES_ATTUID',
width: 80,
readOnly: true
}, {
header: 'Resolution',
dataIndex: 'RESOLUTION',
width: 300,
readOnly: true
}, {
header: 'Start',
dataIndex: 'START_TIME',
width: 100,
readOnly: true
}, {
header: 'End',
dataIndex: 'END_TIME',
width: 100,
readOnly: true
}]);
AIcol.defaultSortable = true;
AIGrid = new Ext.grid.GridPanel({
store: AIstore,
renderTo: 'listgrid',
cm: AIcol,
enableColLock: true,
title: 'Open Action Items',
width: 900,
height: 500,
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
})
});
AIGrid.store.load();
});
I got the answer. with a little extra research over the internets. I used MemoryProxy to load the local data. that solved the problem. Yay!!