New app interface - Githubissues

sleeyax commented 4 years ago

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.

sungshon commented 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:

sungshon commented 4 years ago

FYI, from what I know, Android TV does support webview, it just doesn't have browsers installed by default.

sungshon commented 4 years ago

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..

sungshon commented 4 years ago

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)

sleeyax commented 4 years ago

Full UI within the app itself would be best imo. Then we can still add a button to open in browser somewhere.

sungshon commented 4 years ago

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.

sleeyax commented 4 years ago

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.

sleeyax / pms-android

New app interface #1