2 files changed, 19 insertions, 8 deletions
diff --git a/web/script/transition.ts b/web/script/transition.ts
index ce0cd94..a15a6b0 100644
--- a/web/script/transition.ts
+++ b/web/script/transition.ts
@@ -39,23 +39,29 @@ async function transition_to(href: string, back?: boolean) {
     disable_transition = false;
 }
 
-function show_error(mesg: string) {
+function show_message(mesg: string, mode: "error" | "success" = "error") {
     clear_spinner()
     disable_transition = true
-    document.body.append(e("span", { class: "jst-error" }, mesg))
+    document.body.append(e("span", { class: ["jst-message", mode] }, mesg))
 }
 
 function prepare_load(href: string, back?: boolean) {
-    const r_promise = fetch(href)
+    const r_promise = fetch(href, { headers: { accept: "text/html" }, redirect: "manual" })
     return async () => {
         let rt = ""
         try {
             const r = await r_promise
-            if (!r.ok) return show_error("Error response. Try again.")
+            if (r.type == "opaqueredirect") {
+                window.location.href = href
+                show_message("Native Player Started.", "success")
+                setTimeout(() => window.location.reload(), 500)
+                return
+            }
+            if (!r.ok) return show_message("Error response. Try again.")
             rt = await r.text()
         } catch (e) {
-            if (e instanceof TypeError) return show_error("Navigation failed. Check your connection.")
-            return show_error("unknown error when fetching page")
+            if (e instanceof TypeError) return show_message("Navigation failed. Check your connection.")
+            return show_message("unknown error when fetching page")
         }
         const [head, body] = rt.split("<head>")[1].split("</head>")
         if (!back) window.history.pushState({}, "", href)
diff --git a/web/style/js-transition.css b/web/style/js-transition.css
index be9d34a..067fefc 100644
--- a/web/style/js-transition.css
+++ b/web/style/js-transition.css
@@ -36,15 +36,20 @@
     height: 100vh;
     z-index: 10;
 }
-.jst-error {
+.jst-message {
     position: fixed;
     top: 50vh;
     left: 50vw;
     transform: translate(-50%, -50%);
-    color: var(--c-error);
     font-size: large;
     z-index: 11;
 }
+.jst-message.error {
+    color: var(--c-error);
+}
+.jst-message.success {
+    color: var(--c-success);
+}
 .jst-spinner {
     position: fixed;
     top: 50vh;