I want to port this plugin to the new videojs version 5. I updated most of the plugin to fit into the new videojs.extend() requirements and updated the public functions declarations.
The part I'm stuck on is when you try to load the new components into videojs:
//Range Slider Time Bar
videojs.SeekBar.prototype.options_.children.RSTimeBar = {};
//Panel with the time of the range slider
videojs.ControlBar.prototype.options_.children.ControlTimePanel = {};
If I understand it correctly (I am having some doubts), it is extending specific parts of videojs in order to contain the plugin components.
The problem is that videojs.SeekBar and videojs.ControlBar are undefined and I don't know the right way to access them in v5 (or to create these empty objects if it isn't how you do it anymore). There is also no indication in the videojs wiki article "5.0 changes details"
The full code is available here.. The faulty lines are 421 and 422
EDIT
I can get rid of the error if I replace these lines with those:
videojs.getComponent("SeekBar").prototype.options_.children.RSTimeBar = {}; //Range Slider Time Bar
videojs.getComponent("ControlBar").prototype.options_.children.ControlTimePanel = {}; //Panel with the time of the range slider
but in the plugin constructor function, I can't find back the components:
//components of the plugin
var controlBar = player.controlBar;
var seekBar = controlBar.progressControl.seekBar;
this.components.RSTimeBar = seekBar.RSTimeBar; //is undefined
When I explore the videoJs object, in my debugger, I can indeed find player.controlBar.progressControl.seekBar but it has no sub-object called RSTimebar except in options_.children. It makes sense since it is where I defined it. However, I don't know why in the version 4 I can find it but not in the version 5.
EDIT 2
I notices that the RSTimebar in options_.children array was inserted as an object instead of a pair of index/string. So I changed my lines to this:
videojs.getComponent("SeekBar").prototype.options_.children.push("RSTimeBar"); //Range Slider Time Bar
videojs.getComponent("ControlBar").prototype.options_.children.push("ControlTimePanel"); //Panel with the time of the range slider
Result: the plugin is correctly loaded with one warning per component:
VIDEOJS: WARN: The RSTimeBar component was added to the videojs object
when it should be registered using videojs.registerComponent(name,
component)
I just need to figure out the proper and simplest way to correctly load the components now.
I finally managed to update the plugin thanks to a commit where most of the work was done.
Related
I'm tring to merge 2 projects i found:
https://github.com/danxfisher/MeetEasier
and
this page https://tympanus.net/Development/Interactive3DMallMap/
i've done the changes in the react project meeteasier and included the html parts from interactivemallmap(with my little react abd nodejs knowledge) . I have problems on calling the javascript from main.js(interactivemallmap).
Here is the problem:
The first time i load the page with the chromedev i see that in the main.js it gets the values but when i recall the functions that values are null:
original main.js start like this and dot work:
;(function(window) {
...
mall = document.querySelector('.mall'),
...
pins = [].slice.call(mallLevelsEl.querySelectorAll('.map__space')),
....
pins.forEach(function(pin) {
var contentItem = contentEl.querySelector('.content__item[data- space="' + pin.getAttribute('data-space') + '"]');
pin.addEventListener('mouseenter', function() {
//if( !isOpenContentArea ) {
classie.add(contentItem, 'content__item--hover');
//}
});
....
})(window);
i've tried with the $(document).ready(function(){ instead of ;(function(window) {
but it is not working or better: in the first page load the it gets its value, but after when i pass over with the mouse and the event mouseenter triggers all the values are undefined
I think this is not the right approach but how do i make it work?
I do not have enough code to fully understand what is going on, but seeing that you're trying to merge two big projects with different codebases, if I were you I should take it slow, and take some steps back.
Your problem:
The main problem is that, to use React, you should first have a fundemental understanding of what it is doing under the hood.
You're trying to implement jQuery (a DOM library) with React, however, this will not work this easily, because React works with something that's called a virtual DOM, and it does not have access to the regular DOM nodes unless specifically ordered to do so (using findDOMNode from the react-dom package handles this for example).
What you should do:
Please read the docs first:
https://reactjs.org/docs/hello-world.html
Then, after you understand React, try implementing the SVG maps in it, step by step.
Just a small insight:
Rendering SVG in your render method, or try rebuilding it with D3 (https://d3js.org/) for example, just a suggestion on how to handle complex SVG.
You should handle most logic that's from main.js in the componentDidMount lifecycle, assuming you're going to need to access the map nodes.
I have a question about cytoscapeJS. I upgraded my application to use the latest version of cytoscapeJS: v3.2.5. In the past, in my code, the network graph was initialised and node/edge data and appearance attributes were set.
Initialisation code changed from (the page has an empty <div> with id='cy'):
$('#cy').cytoscape({
container: $('#cy'),
...
to:
var cy= cytoscape({ // in cytoscapeJS v3.2.5
container: document.getElementById('cy'),
...
Later on, users could select what layout to use and the code would get the graph object and run the selected layout on the visible elements as below:
var cy= $('#cy').cytoscape('get');
var coseLayout= { name: 'cose', handleDisconnected: true, avoidOverlap: true };
cy.$(':visible').layout(coseLayout);
But the above now throws this error: Uncaught TypeError: $(...).cytoscape is not a function (on the first line).
I have gone through the updated website docs (Core API, collection, etc.) and demos over the last week but have found no way to do the same in the new cytoscapeJS 3.2.5, i.e., to get the graph outside the initialisation code and perform some operations on it.
I also posted this query at https://github.com/cytoscape/cytoscape.js/issues/2015 but got no response. Any suggestions would be very helpful. Thanks.
Keep the reference and pass it where need be or keep a global reference.
I am trying to change the active caption track from JavaScript in Video.js v5.10.4. I saw a few posts about this and they all suggested to use showTextTrack, but when I execute the command it says that showTextTrack is not a function. I currently have the following code
var video = videojs('video');
var first_track_id = video.textTracks().tracks_[0].id; // this returns vjs_track_399
video.showTextTrack(first_track_id, "captions"); // this returns the error above
Is there any other way to accomplish what I am trying to do, or what am I doing wrong?
showTextTracks() was for video.js 4. Now you just set the mode of the track to showing:
video.textTracks()[0].mode = 'showing';
I use cordova plugin with Application Insight named cordova-plugin-ms-appinsights (https://github.com/MSOpenTech/cordova-plugin-ms-appinsights/blob/master/README.md) and I tried to add my properties to context, that through each request application will send additional info, for example code name of my application.
I tried as below:
appInsights.context.application.codename = "code name app";
appInsights.trackEvent("my event");
and this did not work.
Can I add additional info to context?
There are 2 issues:
1) Cordova plugin seems to use an old version of the JS SDK. You can try to update it manually after it pulls down the old one (take the most recent one from https://github.com/Microsoft/ApplicationInsights-JS/blob/master/dist/ai.0.js)
2) The feature that adds data to ALL telemetry items is not released yet. It was implemented recently - see JS SDK commit on github. You can either wait a bit until it's released or get the latest from master and compile it yourself (and take the result from /JavaScript/min/ai.min.js)
A hacky alternative may be to create a wrapper on top of SDK methods like trackEvent() which adds the data you need (I'm sorry for giving you the JS SDK code equivalent as I haven't used cordova plugin myself):
// this is you implementation of custom data to be attached
// to all telemetry items.
// It needs to return JSON - as it's expected format for custom properties.
// In this specific case you'll create a custom property 'hey' with value 'yo'
var getMyDataJson = function() {
return { hey: "yo"};
}
// this is your wrapper, you'll call it instead of appInsights.trackEvent()
var myTrackEvent = function(data) {
var toBeAttachedToAllItems = getMyDataJson();
appInsights.trackEvent(data, toBeAttachedToAllItems);
}
<...>
// somewhere later you track your telemetry
// this will call your getMyDataJson() function which'll attach
// custom data to your event.
myTrackEvent("tracked!")
I have a class extending the old Ext.Panel class. I'm now trying to migrate my application with help of the migration guide provided by sencha. I'm using a modification of the ext3 "Portal"-Example.
When trying to load my application i get some "deprecated" and "breaking" errors with a good explaination. But there is one error, i can't fix. It says "portal.bwrap is undefined" as mentioned above, "portal" is a subclass of Ext.Panel. In ext3 there was a property "bwrap" in the new ext there is not. And it is not documented neither in the compatibility layer nor in the migration guide how to fix this in ext4.
Here are the two places where bwrap is used:
constructor : function(portal, cfg){
this.portal = portal;
Ext.dd.ScrollManager.register(portal.body);
Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
portal.body.ddScrollConfig = this.ddScrollConfig;
},
[...]
getGrid : function(){
var box = this.portal.bwrap.getBox();
box.columnX = [];
this.portal.items.each(function(c){
box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
});
return box;
},
Any suggestions?
bwrap was a div that wrapped that panel body. It no longer exists. Without seeing the code I can't say what you should do, but chances are you should either refer to the main panel element or the body itself.
FYI the portal example is already ported to 4.