I am trying to get cloudflare stream to work in angular. I have tried the solution given here: Angular attribute for HTML stream.
However, it is always a hit or a miss:
Out of 10 reloads, one loads the player.
But anytime I make a
change to the <stream> tag, and angular re-compiles, the player is
loaded. After this if I refresh the browser, it is a blank screen
again.
The component which shows the video is deep in the tree and the component belongs to a module that is lazy loaded:
In the index.html file:
<!doctype html>
<html lang="en">
<head>
...............
</head>
<body>
<app-root></app-root>
</body>
<script src="https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js" id="video_embed" defer="" async=""></script>
</html>
In the videoFile.component.ts:
<stream src="5d5bc37ffcf54c9b82e996823bffbb81" height="480px" width="240px" controls></stream>
Found a solution here: https://github.com/angular/angular/issues/13965
So everytime the component loads, the script is removed and reattached using ngOninit, like so:
document.getElementById("video_embed").remove();
let testScript = document.createElement("script");
testScript.setAttribute("id", "video_embed");
testScript.setAttribute("src", "https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js");
document.body.appendChild(testScript);
If anyone has any other solutions, please do let me know.
Related
I am trying to embed an AWS Quicksight dashboard into our application but I am having some trouble with the embed process. The URL has been generated correctly and but I get a permission denied error when I attempt to embed it.
I am able to load the generated URL directly in a new tab but when I attempt to embed it I get a 401 error.
I have whitelisted the domain in the Quicksight console and am accessing the page over HTTPS. The complete test page is shown below.
The following code is what I am using to test embedding. It was taken from an Amazon example.
<!DOCTYPE html>
<html>
<head>
<title>My Dashboard</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk/dist/quicksight-embedding-js-sdk.min.js" ></script>
<script type="text/javascript">
function embedDashboard() {
var containerDiv = document.getElementById("dashboardContainer");
var params = {
url: "<link that works in a standalone browser tab>",
container: containerDiv,
parameters: {
},
height: "700px",
width: "1000px"
};
var dashboard = QuickSightEmbedding.embedDashboard(params);
dashboard.on('error', function(err) {console.log('dashboard error:', err)});
dashboard.on('load', function() {});
}
</script>
</head>
<body onload="embedDashboard()">
<div id="dashboardContainer"></div>
</body>
</html>
Amazon sends a 302, followed by a 401. Which results in a frame with the error message "We can't display this page (Not Authorized).
The first request in the image fetches a fresh link from the server and the subsequent two are the framing attempt.
I would expect that if something was wrong with my authorization then a loading the link in it's own tab would not work. I think the issue must be with the frame but don't know what other options to check beyond the whitelist.
Does anyone have any idea what else I can try?
I've embedded data studio report on a html page. I refresh the iframes' after an interval, but the reports do not update. The report on the embedded page gets updated only by going to the report on data studio's website and clicking "Refresh data" icon.
How can the report on html page be refreshed without manually clicking Refresh data icon on data studio website?
HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<div>
<iframe id="TODOcombined" width="800" height="600" src="https://datastudio.google.com/embed/reporting/1L5PqnHOl0kv3-bwMMVGcNgBi0cdaSMUN/page/Kj0j" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div>
<iframe id="TODOmultipage" width="800" height="600" src="https://datastudio.google.com/embed/reporting/19ErM9ElRIHD18oBKo0gGTdrmU5ayXn3H/page/Kj0j" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<script>
function refreshFrames() {
console.log("Refreshing frames at:" + new Date);
document.getElementById('TODOcombined').src = document.getElementById('TODOcombined').src;
document.getElementById('TODOmultipage').src = document.getElementById('TODOmultipage').src;
}
setInterval(refreshFrames, 20000);
</script>
</body>
</html>
When you create a datastudio report you can control whether you use caching (at the report settings level) and how fresh you want your data to be (at the connection level, with options ranging between 1, 4 and 12 hours).
Simply refreshing the page does not override these so you will need to change them to meet your needs.
See Manage Data Studio data freshness for details.
Hello, the first solution could be install a plugin in the chrome extensions called "Data Studio Auto Refresh" site here and set it up. (PD:For use this plugin its necessary to keep your page the chrome available, you could use one server for that or whatever you decide)
The second solution is create a script in jquery, ajax etc to reload the mark element without refresh the whole page.
Hope it works!
I am using laravel version 5.5.45 and trying to learn Blade for first time. I created a file views/layout/app.blade.php. And want to extend that app.blade.php file in views/contact.blade.php. I extended the master blade file using #yield.
Do I need to do any change in route folder?
views/layout/views/layout/app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
#yield('content')
#yield('footer')
</body>
</html>
views/contact.blade.php
#extends('layouts.app')
#section('content')
<h1>Contact Pafg</h1>
#endsection
When I hit the URL localhost/cms/public/contact I see the error in title.
You need to add custom route in web.php which is located in routes directory.
At the end of file add following code to connect the defined route to your view.
Route::get('contact', function () {
return view('contact');
});
Finally you can access it via localhost/contact
First of all you need to put the request to get view on browser. Now assuming that your project name: cms lets assume you are calling cms/contacts ( this is a get request just to get simple blade view ). Now this will go to web.php in routes directory, where you need to handle that request e.g.
Route::get('contact', function() {
return view('contact');
})
here assuming your contact.blade.php is in your resources/views/contacts.blade.php path. if it is within any another nested directory need to add that directory name e.g. return view('directory_name/contact');.
You can perform same action using controller method in which case you need to specify controller and method name in route file and return blade in that method. e.g.
Route::get('contact', 'controller#methodName');
To return blade you need to use view('blade_name') helper of laravel and you don't have to call you request like cms/public/contact, simply use cms/contact url.
Hope this helps.
Im trying to implement oauth1 for quickbooks, using a python library requests_oauthlib. My problem is i tried setting up the quickbooks oauth as suggested by quickbooks inserting the quicbooks button.
The sample code provided was:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ipp="">
<head><meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<title>My Connect Page</title>
<script type="text/javascript" src="https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.2.js">
</script>
<script type="text/javascript">
intuit.ipp.anywhere.setup({
grantUrl: 'http://www.mycompany.com/HelloWorld/RequestTokenServlet'
datasources: {
quickbooks : true,
payments : false
},
paymentOptions:{
intuitReferred : true
}
});
</head>
<body>
<ipp:connectToIntuit></ipp:connectToIntuit>
</body>
</html>
But what it does is, it opens a new pop up like window and goes through the oauth process, but i am not able to figure out, how to get the control back to my app when the redirect happens to the redirect url mentioned, with the access token. Now the redirect url is also opened within the pop up window.
But what it does is, it opens a new pop up like window and goes through the oauth process,
This is expected behavior. This should happen. The entire OAuth process takes place within the pop-up.
Now the redirect url is also opened within the pop up window.
It should be, this is good.
All you have to do is use window.close() to close the pop-up once the OAuth process completes.
gotemplates
Hello!
I'm learning Go language now and trying to port some simple WEB code (Laravel 4).
Everything was well, until I tried to reproduce Blade templates into text templates.
I found that Go can load my CSS and JavaScript files only from the catalog with a name "bootstrap" only.
Here is my catalog tree which I tried to use:
start-catalog
bootstrap (link to bootstrap-3.3.1)
bootstrap-3.3.1
css
bootstrap.min.css
js
bootstrap.min.js
jquery
jquery (link to jquery-2.1.1.min.js)
jsquery-2.1.1.min.js
go_prg.go
Here are my templates:
base_js.tmpl
{{define "base_js"}}
{{template "login_1"}}
<script src = "/bootstrap/js/jquery"></script>
<script src = "/bootstrap/js/bootstrap.min.js"></script>
{{end}}
base_header.tmpl
{{define "base_header"}}
<head>
<title>PAGE TITLE</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
</head>
{{end}}
If the catalog name differs from "bootstrap" Go language or Firefox can't load files from the templates above: bootstrap.min.css, bootstrap.min.js, jquery.
If I use not the link but the catalog name directly "bootstrap-3.3.1" than Go or Firefox can't load.
If all required files are moved under "bootstrap" I'm getting the results I expected (exactly the same as in Laravel 4).
To launch go language code the command go run go_prg.go was used.
Environment: Ubuntu 14.04, go-1.3.3, Firefox 31.
Who's wrong: Go language, Firefox or me?
Any help will be highly appreciated!
The problem described was caused by
http.Handle("/bootstrap/", http.StripPrefix("/bootstrap/", http.FileServer(http.Dir("bootstrap"))))
before any template was handled. It allowed access files under the directory 'bootstrap' only.
The problem was fixed by changing to
http.Handle( , http.StripPrefix(, http.FileServer(http.Dir("."))))
and adding to pathes for CSS and JavaScript files. Like so
/bootstrap/js/jquery">.