Open Jellyfin in iframe to fix scrolling in webOS 3

org.jellyfin.webos/appinfo.json

@@ -11,5 +11,6 @@
     "vendor": "Jellyfin Project",
     "largeIcon": "assets/icon-transparent130.png",
     "iconColor": "#000b25",
-    "id": "org.jellyfin.webos"
+    "id": "org.jellyfin.webos",
+    "disableBackHistoryAPI": true
 }

org.jellyfin.webos/css/main.css

@@ -1,12 +1,24 @@
+html,
 body {
-    width: 100%;
+    margin: 0;
+    padding: 0;
     height: 100%;
+}
+
+body {
+    width: 100%;
     font-size: 36px;
     font-family: -apple-system, "Helvetica", system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", "Open Sans", sans-serif;
     background-color: #000b25;
     color: white;
 }
 
+#contentFrame {
+    border: none;
+    width: 100%;
+    height: 100%;
+}
+
 .container {
     position: absolute;
     height: 100%;

org.jellyfin.webos/index.html

@@ -32,6 +32,7 @@ <h1>Connecting...</h1>
 			<button id="abort" onclick="abort();">Abort</button>
 		</div>
 	</div>
+	<iframe id="contentFrame" style="display: none;"></iframe>
 </body>
 
 </html>

org.jellyfin.webos/js/index.js

@@ -68,6 +68,10 @@ function rightArrowPressed() {
     // Your stuff here
 }
 
+function backPressed() {
+    webOS.platformBack();
+}
+
 document.onkeydown = function (evt) {
     evt = evt || window.event;
     switch (evt.keyCode) {
@@ -83,6 +87,9 @@ document.onkeydown = function (evt) {
         case 40:
             downArrowPressed();
             break;
+        case 461: // Back
+            backPressed();
+            break;
     }
 };
 
@@ -265,8 +272,81 @@ function abort() {
     console.log("Aborting...");
 }
 
+function injectScript(document, url) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url);
+    xhr.onload = function () {
+        injectScriptText(document, xhr.responseText);
+    };
+    xhr.send();
+}
+
+function injectScriptText(document, text) {
+    var script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.innerHTML = text;
+    document.head.appendChild(script);
+}
+
 function handoff(url) {
     console.log("Handoff called with: ", url)
     //hideConnecting();
-    location.href = url;
-}
+
+    document.querySelector('.container').style.display = 'none';
+
+    var contentFrame = document.querySelector('#contentFrame');
+    var contentWindow = contentFrame.contentWindow;
+
+    var timer;
+
+    function onLoad() {
+        clearInterval(timer);
+        contentFrame.contentDocument.removeEventListener('DOMContentLoaded', onLoad);
+        contentFrame.removeEventListener('load', onLoad);
+
+        injectScript(contentFrame.contentDocument, 'js/webOS.js');
+    }
+
+    function onUnload() {
+        contentWindow.removeEventListener('unload', onUnload);
+
+        timer = setInterval(function () {
+            var contentDocument = contentFrame.contentDocument;
+
+            switch (contentDocument.readyState) {
+                case 'loading':
+                    clearInterval(timer);
+                    contentDocument.addEventListener('DOMContentLoaded', onLoad);
+                    break;
+
+                // In the case of "loading" is not caught
+                case 'interactive':
+                    onLoad();
+                    break;
+            }
+        }, 0);
+    }
+
+    contentWindow.addEventListener('unload', onUnload);
+
+    // In the case of "loading" and "interactive" are not caught
+    contentFrame.addEventListener('load', onLoad);
+
+    contentFrame.style.display = '';
+    contentFrame.src = url;
+}
+
+window.addEventListener('message', function (msg) {
+    msg = msg.data;
+
+    var contentFrame = document.querySelector('#contentFrame');
+
+    switch (msg.type) {
+        case 'AppHost.exit':
+            document.querySelector('.container').style.display = '';
+            hideConnecting();
+            contentFrame.style.display = 'none';
+            contentFrame.src = '';
+            break;
+    }
+});

org.jellyfin.webos/js/webOS.js

@@ -0,0 +1,18 @@
+(function() {
+    'use strict';
+
+    console.log('WebOS adapter');
+
+    function postMessage(type, data) {
+        window.top.postMessage({
+            type: type,
+            data: data
+        }, '*');
+    }
+
+    window.webOS = {
+        platformBack: function () {
+            postMessage('AppHost.exit');
+        }
+    };
+})();