The subject pretty much says it all. I have a Video.js instance with controls turned off (aka no "controls" in the markup). It works brilliantly, but when I pause the video (using my external custom button and myPlayer.pause() the controls on the video fade back in. When I hit play, they fade out again.
This definitely doesn't seem like the way it should work. Does anyone know if this is a bug, or I'm just missing something?
ctangney's answer only works when using the uncompressed (dev) version of videojs, since once compressed the lockShowing method is renamed (so is player() for that matter). Hopefully his merge request for issue 556 will be accepted soon.
When lockShowing is called on pause() it adds the class vjs-lock-showing to the controls element, which has the css: display: block !important. This is causing the inline style of display:none, added by the disable() method, to be trumped. Here is work around which addresses the CSS specificity problem, and works with the compressed and uncompressed videojs:
var v = videojs("video", {});
if(!v.controls()) {
v.controlBar.el().className = v.controlBar.el().className + ' vjs-controls-disabled';
}
Then add to the bottom of the css file(s):
.vjs-controls-disabled {display: none !important;}
(Or you could just remove the !important from .vjs-lock-showing)
This is a confirmed bug. I see a proposed fix there, but it's still an open pull request at the moment. In the meantime you can fix this by just overwriting the ControlBar's lockShowing method.
var vid = videojs("video", {});
if (!vid.player().controls()) {
vid.controlBar.lockShowing = function(){};
}
... since (currently) the controlbar attaches a listener to 'pause' events and calls lockShowing().
Related
I have the following code, which works completely fine in Chrome/Edge/Firefox,
newest versions of course, but I expect even a few year old browsers of these will work just fine.
Now in Safari 15.3 (newest I think, at least very recent) this code does not work at all.
function copy() {
const copyListener = (event: any) => {
event.preventDefault();
event.stopPropagation();
event.clipboardData.setData("text/plain", "Random text data");
event.clipboardData.setData("text/html", "<div>Random html data</div>");
};
var eventListenerOptions = {
capture: true,
once: true,
};
document.addEventListener("copy", copyListener, eventListenerOptions);
document.execCommand("copy");
}
Let's imagine that this copy() function is called inside of a onClick handler.
Then after the onClick is triggered, then the document did register this eventListener, but it is just not triggered instantly by the document.execCommand("copy") call. It is only triggered when I after the copy() call select something manually on the screen and do ctrl+c.
So question time:
(1) I have heard somewhere that Safari does not emit a real copy event without any user interaction, which I guess I have confirmed sort of, it is user interaction to click on the button that calls copy() in its handler right? But maybe not the correct type of interaction. Is there any good official documentation on this? I tried to look at https://developer.apple.com/safari/ but it doesn't really provide you anything useful I think.
(2) I have seen code snippets around, and all of them for Safari uses range selections in the dom, and then call document.execCommand so an eventual solution for me is to use this as well, do a check to see which browser and then fallback to the range selection, I just do not think it supports any granularity in regards to "plain/text" and "plain/html" so I really want to avoid it because of that + less complexity if I could tweak this a little to make it work on all 4 browsers.
Any answers/comments are greatly appreciated, thanks !
Turns out that Safari does not support this idiom supported by Firefox/Edge/Chrome/etc.
There is a bug report that have not been active since 2019
https://bugs.webkit.org/show_bug.cgi?id=156529
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.
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);
});
I'm developing a cross-platform browser extension, and have based all my code on the Chrome-way of doing this. I have counted on that the background page will be accessible from the options page, which in Safari extensions turns out to be not possible (since there is no such thing as an options-page). You can only access safari.extension.globalPage.contentWindow from within the extension popup, and the background page itself.
Now, I have an options page, which is an html-page within the extension bundle, and so far I haven't found a way for Safari to give it extension "rights". The closest I have come is adding a content script that's only added on the options page. This seems a bit silly, since the html page itself is in the extension bundle?!
Others have suggested using asynchronous ping-pong style message event handlers, and even the canLoad-mechanism (which is "only" able to run in a beforeload-event). I have been able to hack the canLoad-mechanism for synchronous messaging by forging the BeforeLoadEvent:
// Content script (run from anywhere)
var result = safari.self.tab.canLoad(new BeforeLoadEvent, "data")
-> "return value"
// Background page
safari.application.addEventListener('message', function(e) {
if ( e.name === "canLoad" )
e.message = "return value";
}, true);
It's a hack, but it works. However, I am crippled by the message transport serialization, since I need to be able access methods and data on my objects from the background page. Is there anyway around this?
Possible ways that might work but I don't know if possible:
Access options-page window-object from backgrounds page. Is that possible?
Message passing, need to bypass message serialization
Any shared/global object that I can attach objects to and fetch from the options page?
Make Safari run the options.html page from outside the content-script sandbox? It works in Chrome since they are both within the extension-bundle. It's quite annoying that safari doesn't do this too.
Run the options-page from within the popup. This is promising, but it crashes safari (which is very promising!). However, from the looks of it it's just something to do with a CSS animation in my options.html page. The biggest issue is that it has to be able to open an OAuth2 popup, but thanks to being able to programmatically open the popover, it might be a non-issue. However, this option is the most realistic, but I would rather have it open in a new tab.
Any suggestions and hackish workarounds would really help.
Thanks to everyone in advance -
So I have been banging on this issue for quite a while now and have burned through all my options. My current approach to canceling css requests is with nsIRequest.cancel inside of nsIWebProgressListener.onStateChange. This works most of the time, except when things are a little laggy a few will slip through and jump out of the loadgroup before I can get to them. This is obviously a dirty solution.
I have read through the following links to try and get a better idea of how to disable css before a nsIRequest is created...no dice.
https://developer.mozilla.org/en/Document_Loading_-_From_Load_Start_to_Finding_a_Handler
https://developer.mozilla.org/en/The_life_of_an_HTML_HTTP_request
https://developer.mozilla.org/en/Bird's_Eye_View_of_the_Mozilla_Framework
How do I disable css via presentation objects/interfaces? Is this possible? Inside of nsIDocShell there are a few attributes that kind of imply you can disable css via the browsers docshell - allowPlugins, allowJavascript, allowMetaRedirects, allowSubframes, allowImages.
Any suggestions?
Thanks,
Sam
The menu option that disables style sheets uses a function
setStyleDisabled(true)
so you probably can just call this function whenever new browser tab is created. Style sheets are still requested from server, but not applied. This function is not very sophisticated and doesn't mess with nsIRequest, source:
function setStyleDisabled(disabled) {
getMarkupDocumentViewer().authorStyleDisabled = disabled;
}
Digging in Web Developer Toolbar source code I have noticed that their "disable stylesheets" function loops trough all document.styleSheets and sets the disabled property to true, like:
/* if DOM content is loaded */
var sheets = document.styleSheets;
for(var i in sheets){ sheets[i].disabled = true; }
So if the key is to not apply CSS to pages, one of the above solutions should work. But if you really need to stop style sheets from being downloaded from servers, I'm affraid nsIRequest interception is your only option.
Set permissions.default.stylesheet to 2 and voilà!
You can actually use the permissions manager to block or allow stylesheets on a host-by-host basis.
Unfortunately there doesn't seem to be a simple flag like allowImages. The bugzilla adding for that is https://bugzilla.mozilla.org/show_bug.cgi?id=340746. You can now vote for it using the new bugzilla voting functionality. You can also add yourself to the CC list to be notified if anyone ever works on it.
A related request is to just give us basic HTML parsing support, which may be what you are trying to do. Unfortunately that isn't supported yet either, but you can vote/track the bugzilla for that at https://bugzilla.mozilla.org/show_bug.cgi?id=102699.
So the only workable solution seems to be some sort of interception as #pawal suggests. Here is a link that talks about the basics of interception to at least get you/us started https://developer.mozilla.org/en/XUL_School/Intercepting_Page_Loads. It lists several options that I list below.
These first few seem to just be at the page/document level so I don't think they help:
Load Events (addEventListener load)
Web Progress Listeners (nsIWebProgressListener) - I tried this approach, it only seems to be called for the page itself, not for content within the page.
Document Loader Service - A global version of nsIWebProgressListener so I think it has the same problem (page level only)
That leaves two others I have not tried yet. They work globally so you would need to filter them to just the browser/pages you care about.
HTTP Observers - Seems like it might work, need to verify it calls back for CSS
Content Policy - Seems like the best option to me since it explicitly is called for CSS, someday I hope to try it :)