Flowplayer Menu plugin issue - streaming

I am trying to implement bit rate selection like in flowplayer like in youtube. One option should be 'auto' and others manual. I am using a smil file to load my videos. Flowplayer documentation http://flash.flowplayer.org/plugins/flash/menu.html shows using the menu plugin. I cannot do it using that method since the url path is generated at run time. So I have use smil for menu creation and it works.I just mention the smil file name and the menu plugin loads the bit rates from the smil seamlessly. I am not exactly sure how this works though.
This is the code
clip: {
url:"<?php echo getxml(); ?>",
autoPlay: true,
provider: 'rtmp',
scaling:"fit",
urlResolvers: [ 'smil', 'bwcheck','brselect' ],
onStart: function() {
}
},
plugins: {
smil: {
url: "flowplayer.smil/flowplayer.smil-3.2.8.swf"
},
bwcheck: {
url: "flowplayer.bwcheck/flowplayer.bwcheck-3.2.11.swf",
serverType: 'wowza',
dynamic: true,
dynamicBuffer:true,
netConnectionUrl: 'rtmp://itl.bc-s.cdn.bitgravity.com/cdn',
checkOnStart: true,
rememberBitrate: true,
onStreamSwitchBegin: function(newItem, currentItem) {
$f().getPlugin('content').setHtml("Will switch to: " + newItem.streamName +" from " + currentItem.streamName);
},
onStreamSwitch: function(newItem) {
$f().getPlugin('content').setHtml("Switched to: " + newItem.streamName);
}
},
menu: {
url: "http://releases.flowplayer.org/swf/flowplayer.menu-3.2.12.swf",
items: [
{ label: " Auto", enabled: true, index: 0,toggle:true , selected:true},
],
onSelect: function(item) {
if(item.index == 0){
$f().getPlugin('bwcheck').enableDynamic(true);
$f().getPlugin('content').setHtml("Auto Mode Slected : Best bit rate will be selected according to your bandwidth");
}
else{
$f().getPlugin('bwcheck').enableDynamic(false);
$f().getPlugin('content').setHtml("Manual bit rate selection activated");
}
}
},
brselect: {
url: "http://releases.flowplayer.org/swf/flowplayer.bitrateselect-3.2.13.swf",
menu: true,
},
As you can see from the code I placesd a single item like this
{ label: " Auto", enabled: true, index: 0,toggle:true , selected:true},
By default auto mode is selected and I have to give a tick mark to the menu item 'Auto'. This was also achieved using the parameter 'selected'. But the problem is that the bit rate being played when the file starts playing in the auto mode is also selected and that too gets a tick mark like this.
http://tinypic.com/r/2nkt9fl/6
I need to disable that. The switching is happening and functionality is implemented but the user gets the wrong idea. There is a property by the name 'group' and I guess I will have to make all the items as a part of the group. A combination of the 'group' , 'selected' and 'toggle' property should be able do this but I cannot implement it.

Related

TinyMCE and Piranha CMS not allowing me to set <style> tags as valid elements :(

I'm trying to add <style>// custom css here</style> into the tiny mce editor but currently it deletes the style tags and anything in between them on save.
I am trying to set valid_elements: "style" and/or custom_elements: "sabioStyle", and/or extended_valid_elements: "style". I've also tried: "[]" according to tiny's docs but it seems to have no effect on anything. I see that the init function:
piranha.editor.addInline = function (id, toolbarId) {
tinymce.init({
selector: "#" + id,
browser_spellcheck: true,
fixed_toolbar_container: "#" + toolbarId,
menubar: false,
branding: false,
statusbar: false,
inline: true,
convert_urls: false,
plugins: [
piranha.editorconfig.plugins
],
width: "100%",
autoresize_min_height: 0,
toolbar: piranha.editorconfig.toolbar,
extended_valid_elements: piranha.editorconfig.extended_valid_elements,
block_formats: piranha.editorconfig.block_formats,
style_formats: piranha.editorconfig.style_formats,
file_picker_callback: function(callback, value, meta) {
// Provide file and text for the link dialog
if (meta.filetype == 'file') {
piranha.mediapicker.openCurrentFolder(function (data) {
callback(data.publicUrl, { text: data.filename });
}, null);
}
// Provide image and alt text for the image dialog
if (meta.filetype == 'image') {
piranha.mediapicker.openCurrentFolder(function (data) {
callback(data.publicUrl, { alt: "" });
}, "image");
}
}
});
$("#" + id).parent().append("<a class='tiny-brand' href='https://www.tiny.cloud' target='tiny'>Powered by Tiny</a>");
};
Piranha uses sets extended_valid_elements: piranha.editorconfig.extended_valid_elements but my dev tools are not showing the value that I type in editorconfig.json...
editorconfig.json
devTools
I've tried everything their docs say, I have a question open on github with Piranha as well.. Any suggestions would be great! Thanks
See the complete answer here: https://github.com/PiranhaCMS/piranha.core/issues/1663

How can i prevent popup to be closed when i have fitSelectedRoutes:true options selected in the routingControl

I am using leaflet and leaflet routing machine control libraries.
When i am creating some route path i have the folllowing code:
this.routingControl = L['Routing'].control({
router: L['Routing'].osrmv1({
serviceUrl: `http://router.project-osrm.org/route/v1/`,
language: 'en',
profile: 'car'
}),
showAlternatives: false,
lineOptions: { styles: [{ color: '#4caf50', weight: 7 }] },
fitSelectedRoutes: true,
altLineOptions: { styles: [{ color: '#ed6852', weight: 7 }] },
show: false,
routeWhileDragging: true,
addWaypoints: false,
waypoints: [
L.latLng(clickedLat, clickedLng),
L.latLng(this.selectedCityZipCodeObject.longitude, this.selectedCityZipCodeObject.latitude)
],
createMarker: function (i: number, waypoint: any, n: number) {
return null;
}
});
Note: if i have
fitSelectedRoutes:false
then when i click on some marker,which should make route path until other marker the pop up is showed.
But if i have
fitSelectedRoutes:true
then when i click on the marker it show the popup. but the map zoom is changed to fit the route path in the center between the markers and i have smaller zoom which is done automatic from the library.
And then my pop up is closed when the zoom is automatically changed . How can i prevent this from happening ?
I found that everytime this code is triggered on the map it self when there are movements
this.map.on('zoomend', function(){
thatt.lastEvent.target.unbindPopup()
.bindPopup(`
<div><b>Dispatcher:</b></div>
`).openPopup();
});
i tried to get the last marker and to open the pop up and without success.
I also tried
that.lastEvent.target
.unbindPopup()
.bindPopup(`
<div><b>Dispatcher:</b> ${truckLocationObj?.dispatcher}</div>
<div><b>Dispatcher Email:</b> ${truckLocationObj?.dispatcher_email}</div>
<div><b>Truck #:</b> ${truckLocationObj?.truck}</div>
<div><b>ZIP</b> ${truckLocationObj?.available_zip} </div>
<div><b>City:</b> ${truckLocationObj?.available_city}</div>
<div class='red'><b>Distance:</b> ${distance} km to ${that.selectedCityZipCodeObject.city}, time: ${getHm}</div>
<div><b>Available on:</b> ${truckLocationObj?.available_date}</div>
`, {closePopupOnClick: false, autoClose: false, closeOnClick:false, autopanstart:false}).openPopup();
with addiional options on the pop up itself but also without success.
So fitSelectedRoutes - true makes something like fitting bounds of the two markers.
var corner1 = L.latLng(0,0);
var corner2 = L.latLng(39.310, -84.432);
let bounds = L.latLngBounds(corner1, corner2);
map.fitBounds(bounds, { padding: [50, 50] });
with this answer here the problem will be solved.
https://stackoverflow.com/questions/51953050/leaflet-markercluster-exempt-marker-from-clustering
https://jsfiddle.net/sghL4z96/65/

Can't change the pagination 'next' and 'prev' labels to my language in grid.js

There is no such option as change the prev and next button label in the documentation, and when i try to use string replacement or change the button innerHTML via Javascript, it doesn't work, is there any way that I can safely change the label?
You can use the language config (added since v1.5.0) to customize this:
new Grid({
columns: ['Name', 'Email', 'Title'],
sort: true,
search: true,
pagination: {
limit: 5
},
data: Array(50).fill().map(x => [
faker.name.findName(),
faker.internet.email(),
faker.name.title(),
]),
language: {
'search': {
'placeholder': '🔍 Search...'
},
'pagination': {
'previous': '⬅️',
'next': '➡️',
'showing': '😃 Displaying'
}
}
});
Also see this example: https://gridjs.io/docs/examples/i18n/

Automating webrtc Screenshare

I am trying to automate screen share workflow in a webRTC application.
I need to bypass the screenshare prompt. I am using --use-fake-ui-for-media-stream, use-fake-device-for-media-stream and --auto-select-desktop-capture-source flags in my config file.
Doesn't seem work.
Here is my config file :
exports.makeDefaultCapabilities = function(that) {
return {
browserName: 'chrome',
chromeOptions: {
// disable Password manager popup
prefs: {
credentials_enable_service: false,
download: {
prompt_for_download: false,
directory_upgrade: true,
default_directory: '~/Downloads'
}
},
args: [
'disable-infobars=true',
'--use-fake-device-for-media-stream',
'--use-fake-ui-for-media-stream',
'--auto-select-desktop-capture-source = "Entire screen"'
]
},
loggingPrefs: {
driver: 'WARNING',
server: 'WARNING',
browser: 'INFO'
},
I tried flipping between using fake-device and fake-ui flags and they do not get along if i understand correctly.
I do not understand what is missing here. Appreciate your inputs.
Thanks
https://bugs.chromium.org/p/chromium/issues/detail?id=459532#c22 explains why those flags don't play well together and how to workaround it by creating a custom profile that has already accepted getUserMedia permissions which makes the use-fake-ui-for-media-stream flag unnecessary.
See here for some code.

Sencha ExtJS RESTful grid example confusion

I am very confused by the Sencha documentation for ExtJS. The documentation begins with a Getting Started guide which highlights and illustrates the importance on a suitable structure for the classes and source code of your application. But the provided examples then break all the conventions laid down by the Getting Started guide. Instead of code being broken down into appropriate Model, Store, View, etc. class files the examples are provided as a single file with example source code which is not easily re-usable in separate source files.
I started by following the Portal example (http://docs.sencha.com/ext-js/4-1/#!/example/portal/portal.html) as this is the sort of application I want to create. I wanted to enhance the Portal example and add in a screen which would display a grid and use a RESTful web service as the data backend. I have created the backend I just want to create the front-end. So I looked at the RESTful example (http://docs.sencha.com/ext-js/4-1/#!/example/restful/restful.html)
I have tried to copy the RESTful example into the recommended pattern of seperate classes e.g. Model, Store, View:
Model:
Ext.define('MyLodge.model.Member', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'email', type: 'string'},
{name: 'href', type: 'string'}
]
});
Store:
Ext.require('MyLodge.model.Member');
Ext.define('MyLodge.store.Members', {
autoLoad: true,
autoSync: true,
model: 'MyLodge.model.Member',
proxy: {
type: 'rest',
url: 'http://localhost:8888/rest/memberapi/members' ,
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
}
},
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
if (name == 'Destroy' ) {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
Ext.example.msg(name, Ext.String.format( "{0} member: {1}", verb, record.getId()));
}
}
});
View:
Ext.define('MyLodge.view.content.MemberGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.membergrid',
initComponent: function(){
var store = Ext.create('MyLodge.store.Members' );
Ext.apply( this, {
height: this.height,
store: store,
stripeRows: true,
columnLines: true,
columns: [{
id : 'name',
text : 'Name',
flex: 1,
sortable : true,
dataIndex: 'name'
},{
text : 'E-Mail',
width : 150,
sortable : true,
dataIndex: 'email'
},{
text : 'Href',
width : 200,
sortable : true,
dataIndex: 'href'
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new MyLodge.model.Member());
rowEditing.startEdit(0, 0);
}
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
});
this.callParent(arguments);
}
});
But I am not sure where to put the code to control the grid row selection and enable the Delete button:
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#delete').setDisabled(selections.length === 0);
});
Also when I press the Add button I get the following error:
Uncaught TypeError: Object [object Object] has no method 'insert'.
Any help would be appreciated.
You are having scoping issues. Basically the variable store is defined only in the initComponent function and therefore of local function scope.
Your handler function has it's own scope. It is firing in the scope of the toolbar button. So if you say this in the handler it would refer to the button. Hence you can say this.up('panel').store - and that gives you the correct reference to the store backing your grid panel.
Another advice is not to implement everything at once. Write a little bit to see if it works and then add to it little by little.
RE: the docs examples, I agree that it's frustrating, but there's not many options. Having a fully-MVC-style implementation of each example would not only be onerous to produce, but would also probably make point of the example get lost in the structure.
RE: your question about the where to "put" the code to control the grid, I would recommend setting up a controller with listeners for the events on the grid in the control() section. This will let you decouple the handling of the events that are fired by your grid from the view itself.