Open sleeyax opened 4 years ago
The way I did this in my own POC, was by loading a web page with the PMS logo, and a "Load in Browser" button. when pressing the button it would open the default browser with PMS.
This is far from perfect though, because (for example) many Android TV releases don't have any browser..
The only guaranteed way of doing it right would be with it's own app UI.. Maybe React?
For React.. this might be a good choice:
FYI, from what I know, Android TV does support webview, it just doesn't have browsers installed by default.
Here is the HTML page for the loader I used with the button to load PMS in the web browser:
<html>
<head>
<title>PimpMyStremio</title>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.orange-indigo.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="dialog/polyfill.css" />
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/styles.css">
<link rel="stylesheet" type="text/css" href="/loader-styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="shortcut icon" type="image/png" href="/pimpmystremio-favicon.png"/>
</head>
<body>
<center>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<img id="logoLoader" src="/logo.jpg">
<br/>
<br/>
<br/>
<br/>
<div id="addon-loader">
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
<div id="loaderTextSpacer"></div>
<div style="font-size: 36px; text-align: center; opacity: 0.7">
Loading add-ons, please wait
</div>
</div>
<a href="/">
<div id="addon-loader-button" style="margin-top: 50px">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" style="font-size: 36px; height: auto; padding: 40px; width: 100%; border-radius: 0;">
Load in Browser
</button>
</div>
</a>
</center>
<script>
var isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)
var loaderInterval
function checkServer() {
var xhr = new XMLHttpRequest()
xhr.open('GET', '/api?&method=getVersion')
xhr.send()
xhr.onload = function() {
if ([200,304,500].indexOf(xhr.status) > -1) {
clearInterval(loaderInterval)
document.getElementById("addon-loader").style.display = 'none'
if (isMobile)
document.getElementById("addon-loader-button").style.display = 'inline-block'
else
window.location.href = "/"
}
}
xhr.onerror = function() {}
}
loaderInterval = setInterval(checkServer, 1500)
</script>
</body>
</html>
I know it's ugly, but it was for a POC..
BTW, there would be another advantage to using nodejs-mobile
over androidjs
. In time a project based on nodejs-mobile
could also be ported to iOS (although most probably only jailbroken phones.. unless you want to notarize the app and submit it to the iOS store)
Full UI within the app itself would be best imo. Then we can still add a button to open in browser somewhere.
Full UI within the app itself would be best imo.
I agree, if you base it on React I could probably help with the UI. I don't think a "open in browser" button would be required in that case though.
if you base it on React I could probably help with the UI.
React is fine.
I don't think a "open in browser" button would be required in that case though.
The web server (on port 7777 by default) will run anyways so what I meant to say is to optionally add a button muffled away in settings to open that it in a browser. Maybe we can replace it with a 'copy URL' button, for those who use PMS on LAN or external then.
Loading PimpMyStremio's server url into the webview using
app.loadURL
is pretty ugly and has even uglier side effects. I should either load the url directly in a browser or create a custom interface for it.