Framework7 / video.js touchevent conflict - video.js

The sourcecode is here sourcecode。
The pc mode is operating normally, but it is not working properly in mobile mode. I run the above program in chrome。
It is not working when i click the play/pause button,but when i long press the button,everything is ok.
I find the reason,but i dont know how to reasonably solve the problem.
In framework7`s touchend event it call sendclick method.In video.js there is a
pseudo-event "tap".
when i touch the screen,it called "touchendevent" twice,as it called the framework7's click method and video.js`s tap method.
I found this .tap and click event is called in same time 。so the video is playing first,but it pause suddenly,because the second event called。code in here
If i long press the button,it is working fine because the tap‘event is not called。

I solved it myself。
videojs.getComponent('Component').prototype.emitTapEvents = function () {}

You can change the touchTimeThreshold from 200 => 20. But this needs to change in library. Better to add this following lines before initializing videojs:
videojs.getComponent('Component').prototype.emitTapEvents = function () {}

Related

Xamarin Xaml force update interface elements

The post has been rewritten to better fit the current problem.
I have a button x:Name="selectVesselButton". On button click, it tries to establish a connection to a server, which takes a sec or two for to do. Originally, I wanted the button to be grayed out while it was downloading and deserializing the json file from the connection.
My old code (before async, and trying to update the button):
// disabling the button to prevent spam clicking.
string buttonText = selectVesselButton.Text;
selectVesselButton.IsEnabled = false;
selectVesselButton.Text = "loading...";
// retrieve data for speed page.
RetrieveData();
// redirect to next info block if build was successfull.
FocusSpeedblock();
// enabling the button again.
selectVesselButton.Text = buttonText;
selectVesselButton.IsEnabled = true;
The issue with this code was that the button visuals did not update until the RetrieveData() was finished, defeating the purpose of doing that at all. This was because the code for updating the interface and the code for downloading and deserializing the object were both on the same thread.
However, following Ivan's advice, I made the downloading and deserializing Async, which fixed this issue (more like moved it).
This works fairly well, but I am still having some trouble updating the interface automatically. I have some labels that need to be updated based on the json file output. The value of the labels update on the background, but only update visually once I interact with the labels (I.E. scrolling the scrollview they are on). Check edit 3 for more detail on that.
EDIT 3:
When the second thread is finished, it should call the UpdateSpeedLabels() and update some labels. However, they update in codebehind, without instantly updating the interface. They only update if I interact with those labels.
The preferred way of doing this on Xamarin is with data binding. As you opted out of this it is still possible.
What you need is to ensure that your long task is not running in the UI thread as it blocks it and prevent its updates. You do this by using Task.Run(() => { your task code }); . However you can't update your user interface inside the Task.Run as it is not running on the UI thread and it would crash the app, so you need to use Device.BeginInvokeOnMainThread(() => { your UI code }); inside Task.Run for that part.

Node-Webkit - Starting Maximized

I don't want a fullscreen application, but I would like to start a Node-Webkit application maximized. Can this be done? I am guessing its something to do with package.json, but can't seem to find what needs to be done.
I don't think the manifest has an option to do that. Instead, call nw's Window.maximize() on startup. Something like:
// Load native UI library
var ngui = require('nw.gui');
// Get the current window
var nwin = ngui.Window.get();
Sometime later, in onload or some other point where you're ready to show the window:
onload = function() {
nwin.show();
nwin.maximize();
}
This is described in the node-webkit wiki. I don't think you can call maximize before showing the main window though (if it's hidden in manifest), but I haven't really dug into it.
You may want to consider saving the window position, from a UX standpoint. The wiki has an example for doing this.

SoundCloud Widget API setVolume Method broken?

I'm successfully using Soundcloud's widget API, except the setVolume() method is broken :(
First, I love the widget, but I'm blown away that after all that amazing work there is no volume control available! People will immediately "back button" out of my site when they hear 100% audio and I can't alter it using setVolume()... I have to get it working or pull it :(
Here is what is happening, I have an instance named "widget" (which loads and plays well on the page).
widget.bind(SC.Widget.Events.READY, function() {
$('#audioIndictments').removeClass('remove'); // This disables a CSS rule, making the soundCloud iframe visible
widget.setVolume(10); // This should set the volume to 10% but doesn't :(
widget.getVolume(function(vol){
console.log(vol); // This outputs 0.1 in the console :/
console.log(widget); // This outputs the object in the console and I don't see anything out of whack :|
});
widget.play(); // This successfully fires up the widget and the audio begins playing :)
widget.setVolume(10); // Just to see if it makes a difference, after the play() method, I ran setVolume again after the play() method and still no change :(
widget.getVolume(function(vol){
console.log(vol); // This still outputs 0.1 in the console :/
});
});
Strange results. I found another blogger who asked a similar question and got no satisfactory answer. What's the deal here? What am I not seeing?
Thank you for taking the time :)
Try using the a volume between 0 and 1. This fixed it for me.
0.25 = 25% volume
I too am facing the same issue and I discovered that the volume does not reset to full when setVolume method is called outside of the READY event. This is why the setVolume button on the SC api playground works since it's called externally. But there is another problem - when the next track in the playlist is loaded into the widget, it resets the volume back to full and as a result, deafens the user.
I've used a hacky workaround until this is fixed.
Setup a new PLAY_PROGRESS event and call the method inside there.
widget.bind(SC.Widget.Events.PLAY_PROGRESS, function() {
widget.setVolume(10);
});
The setVolume method will continuously be called when the track is played. Not ideal but it works.
If you have a slider in place for volume then you may use this instead:
widget.bind(SC.Widget.Events.PLAY_PROGRESS, function() {
var vol = jQuery('.slider').val();
widget.setVolume(vol);
});

App works as desired in debug mode but crashes in Rally environment

I have created an app that creates a grid dynamically, as well as lets the user make changes to one of the grid columns via a 'numberfield' editor. Everything is working great in the debug environment but when I try to edit one of the fields in the Rally environment it crashes the app. From the looks of it, the iframe containing the app is just reloading altogether.
Now, here's the weird part that may be a clue to what's going on. The app crashes after I click elsewhere on the app (committing the change) but if I scroll the mouse wheel somewhere on the app, the spinner loses focus (no up/down arrows) and then if I click somewhere the edits are applied and the app doesn't crash. Once again in the debug mode I don't need to go through this, I can just click elsewhere and the changes are applied.
This is a known issue with 2.0p5 that will be fixed with the next release of the SDK. Basically it's using a sledgehammer to respond to the fact that something was edited and refreshing it. Since the new SDK can communicate with the message bus this is totally unnecessary...
In the meantime you should be able to patch your app by defining a global Rally.getApp function that returns your app instance to prevent the hard refresh:
//In your app definition give it an xtype:
Ext.define('My.App', {
extend: 'Rally.app.App',
//...
alias: 'widget.myapp'
//...
});
//Find the app instance by its xtype and return it
Rally.getApp = function() {
return Ext.ComponentQuery.query('myapp')[0];
};
You can then delete that code once 2.0p6 is released and you upgrade.

AIR application Mouse.hide() not working

I created a fullscreen app with the following to hide the mouse...
// need this hack to hide the mouse for AIR for some reason...for OSX
// http://blog.formatlos.de/2008/11/16/air-hiding-the-mouse/
stage.nativeWindow.activate();
stage.nativeWindow.orderToBack();
stage.nativeWindow.orderToFront();
Mouse.hide();
This works on my machine at home running OSX Lion...but when this is installed on the client's machine (also running OSX...I need to find out the version), the mouse does not hide?
When I take out the 3 line hack before the Mouse.hide(), the mouse does not hide on my machine. Will test this out on the client's machine too.
Anyone experience this before?
Are you including flash.ui.Mouse in your code?
import flash.ui.Mouse;
Take a look in this site: http://samhassan.co.uk/2008/10/08/air-10-mousehide-work-around/
You could try to hide mouse cursor when the first enterFrame event is fired. Some elements are not fully available till the first frame is build:
// i.e. on main app initilize event handler
addEventListener(Event.ENTER_FRAME, onEnterFrame);
private function onEnterFrame(event:Event):void {
Mouse.hide();
removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}
This way, you have not to rely on hacks or workarounds.