I have looked through certain resources on the stack over flows but some doesn't have answer nor they are inactive.
I will want to autoplay a twitter video when some arrives on my website.
Currently It looks like this:
I was able to do Youtube, so believe this should be possible also?
Note: The solution below does not work anymore out of the box due to new CORS policies of the browsers.
The twitter widget script seems to inject the player after clicking the image into an iframe, but the link to click is... embedded in an iframe. So when you see on your screen the "player" to click, it is in fact not the player but just a link to activate the injection of the player.
So your goal is to activate this injection by the following steps:
set up a target listener for the widget factory
get the widget element, once it's added to the DOM (but after it has been altered by the widget factory)
get it's iframe document's link that triggers the embedding of the player
Set up Twitter for websites
Prepare your page according to the following documentation:
<div id="videoTarget"></div>
<!--<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>-->
<script>
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
</script>
Our factory target will be the videoTarget. This is the place, where the iframe with the video injection link will be placed.
Create the embed link
First wait for the twttr to be ready. Read more in this in the scripting events.
Then use the factory function to create your video.
Once it's loaded, you can use jQuery to find the iframe content's link, that triggers the injection.
Code:
window.twttr.ready(function(_twttr) {
_twttr.widgets.createVideo(
'560070183650213889',
$('#videoTarget').get(0), {
lang: "en",
}
)
.then(function(el) {
const dataId = $(el).attr('data-tweet-id');
const doc = $('iframe').get(0).contentWindow.document;
const link = $(doc).find("a[href*=" + dataId + "]")[0];
link.click();
});
});
Working solution: https://jsfiddle.net/5qmh1Lpn/121/
Summary
Twitters video embed lacks of proper ways to do autoplay. However, it is IMHO an antifeature and it should be the user's decision, wether to play a video or not.
The solution is only a hack and may not work on all browsers in all situations.
Please create a fork, if you want to extend the fiddle to your needs.
Edit: Just for your interest, I found a hidden link with cookie consent in this code, which basically breaks down to "if you click this you agree to our policies" which is very strange, since nobody can't see this message as it's hidden.
Thanks to:
https://stackoverflow.com/a/2893315/3098783
https://stackoverflow.com/a/303961/3098783
Related
I need to update table results when a "Next" button is pressed using Angel and Jael.
Currently, this is the code I have:
<button class="next" type="button" onclick="{{ nextPage }}">Next Page</button>
var regbattles = Pagination(await getUnrankedBattles(), 30);
updatePage() {
regbattles.nextPage();
}
app.get('/', (req, res) async {
await res.render('index', {'regbattles': regbattles.currentItems, 'nextPage': updatePage});
});
I've tried adding () to nextPage in the onclick function, and it did not work. I can't seem to find any tutorials for this. Does anyone know how to do this?
Jael is solely an HTML-generating engine, and is stateless, so the renderer doesn't have any connection to JavaScript. So you can't pass a Dart function to the browser, and have it called. You'll need to send a request to the server from JavaScript.
I'm not familiar with any templating engine that allows that, though.
In the Electron documentation for the webview tag, the following example is given to show how to communicate between the renderer process and the web page hosted in the webview:
With sendToHost method and ipc-message event you can easily communicate between guest page and embedder page:
// In embedder page.
const webview = document.getElementById('foo')
webview.addEventListener('ipc-message', (event) => {
console.log(event.channel)
// Prints "pong"
})
webview.send('ping')
// In guest page.
const {ipcRenderer} = require('electron')
ipcRenderer.on('ping', () => {
ipcRenderer.sendToHost('pong')
})
However, in my guest web page (inside the webview), I get Uncaught ReferenceError: require is not defined when I try to require('electron'), as indicated in the docs.
Is there something else I need to do to be able to require the ipcRenderer module from the guest web page?
Electron version: 1.4.6
Note: I'm not sure if this is important or not, but the page running inside my webview is served from a local server. In my top-level page in the renderer process, I do something like: document.getElementById("webview").src = "http://localhost:1234/...";.
Edit: It looks like serving my web page from a local server does not change anything. I have the same error after trying with a static HTML file. It looks like the example in the docs simply doesn't work, or I'm understanding it wrong.
// Simple foo.html somewhere on my computer
<script>
const {ipcRenderer} = require('electron')
ipcRenderer.on('ping', () => {
ipcRenderer.sendToHost('pong')
})
</script>
// In embedder page, in renderer process
document.getElementById("webview").src = "file://path/to/foo.html";
Output from the embedded page (inside the webview):
Uncaught ReferenceError: require is not defined
EDIT
For security reasons, the preferred way to use require in renderer processes is to use preload to inject only the minimum node integration your page requires. See point 2) of Electron's security recommendations. A minimal example for ipcRenderer:
// main.ts
const mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: false,
preload: './preload.js'
}
})
mainWindow.loadURL('https://my-website.com')
// preload.js
const { ipcRenderer } = require('electron')
window.sendToElectron= function (channel) {
ipcRenderer.send(channel)
}
In your webpage you can now use window.sendToElectron("ping").
If you're using <webview> inside the renderer process, you can use <webview src="page.html" preload="./preload.js" /> to achieve the same result. So, that's what I would use to answer my original question, and inside preload.js I would inject a function that calls ipcRenderer.sendToHost("pong") in the global window.
Old answer (bad for security)
I had missed a vital point in the webview docs. To be able to call require from the page embedded inside the webview, you need to set the nodeintegration attribute on the webview tag:
<webview id="webview" nodeintegration />
I want to simple share button on my page, which after clicked open pop-up window to share the current url.
I try to do it using facebook developers code (from official site)
https://developers.facebook.com/docs/plugins/share-button
but when I add ruby variable request.url (but with data-href="http://myweb.com" it works)
<div class="fb-share-button" data-href="#{request.url}"></div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
it doesn't work - I have the window below
How can I do it correctly ?
Are you trying to open up the share button in a new window? Are you also using the correct variable for that model you have it in?
Try switching it to this since I'm assuming you're using erb
<div class="fb-share-button" data-href="<%= request.url %>"></div>
How does one go about displaying a controller action inside of jquery modal dialog?
Firstly you'll need your Javascript to load a url via ajax, this will depend on which kind of modal you are using etc, there's a ton of libraries out there. I will assume you are using the basic JQuery UI dialog Modal.
Example Link
<!-- this points to your action below.. -->
<a class="some-link" title="title here" href="mycontroller/test">testing</a>
Example Javascript (quick example found on google, many examples out there..)
$(document).ready(function() {
$('.some-link').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
});
});
});
Now you need to make sure your action doesn't render the main layout when providing the content for the modal via the ajax request.
Here's a really simple method of doing that by replacing the base layout with an empty view for ajax requests. This isn't the best method but it's the simplest for this case ;)
Example Action
public function testAction()
{
if($this->getRequest()->isXmlHttpRequest()) {
$this->layout('application/layout/ajax-layout');
}
return new ViewModel(array()); // ..
}
application/layout/ajax-layout.phtml
<?php echo $this->content ?>
I think you want this kind of code http://jqueryui.com/dialog/#modal-message
inside the just display your action
Otherwise it's about to open an url into your modal it's like that http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
I'm using jQuery mobile with PhoneGap, and would like to show a login page the first time the app is used, and show the index page on subsequent loads.
My current solution is to use the following on deviceready
if(!localStorage.registered){
$.mobile.changePage( "#login", { transition: "none"} );
}
However, my issue with this is that you still see the page transition. I would like the login page to be the first page that is visible.
Any advice? Thanks!
This Q is a few months old, it remains unanswered, I don't have any experience with phone gap but I do jQM, so I figured this may help.
I current employ a solution to this on my app by delaying auto initialisation of jQM.
This is an example of how you could based loosely on how my application does it.
(function() {
#stop jQM from auto initialising
$(document).on("mobileinit",function() {
$.mobile.autoInitializePage = false;
});
var my_app = new MyApp();
# custom afterinit event is triggered on the app instance
$(my_app).on('afterinit',function() {
var initial = 'login';
if(localStorage.registered) {
initial = 'home';
}
# set the page hash to our start page
window.location.hash = initial;
#initialise jQM
$.mobile.initializePage();
});
})();
Make sure you secure the thing that decides if login is allowed, in my application I have a data structure that is required by the app ajax in to MyApp.appdata it will only be there if login was actually successful.
Another solution may be to have a proxy page.
A different approach that I employed on another app.
An initial "loading" step, which is just a dummy page.
Make a page in your doc as the first page, eg.
<div id="loading" data-role="page">Loading</div>
in the mobileinit step bind to the pageshow event.
$(document).on("mobileinit",function() {
$('#loading').on('pageshow',function() {
# ...
# do login check here
# ...
var initial = 'login';
if(localStorage.registered) {
initial = 'home';
}
# change to our initial page
$.mobile.changePage(initial);
});
});
What about hiding #registration and #login then do:
if(localStorage.registered){
$('#login').show();
} else {
$('#registration').show();
}