From ed4b39c3ea2a54c7754468bcf8d0c05aaa9bdc14 Mon Sep 17 00:00:00 2001
From: CanardConfit <tom@andrivet.com>
Date: Mon, 7 Aug 2023 20:22:24 +0200
Subject: [PATCH] feat(urlschema): add mobile URL handling for Jellyfin iOS

---
 package.json                               |  1 +
 src/components/Common/PlayButton/index.tsx | 10 ++++++++--
 src/components/MovieDetails/index.tsx      |  9 +++++----
 src/utils/urlLink.ts                       |  9 +++++++++
 yarn.lock                                  | 12 ++++++++++++
 5 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 src/utils/urlLink.ts

diff --git a/package.json b/package.json
index 97c025503..ceea0088e 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
     "react-ace": "10.1.0",
     "react-animate-height": "2.1.2",
     "react-aria": "3.23.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "18.2.0",
     "react-intersection-observer": "9.4.3",
     "react-intl": "6.2.10",
diff --git a/src/components/Common/PlayButton/index.tsx b/src/components/Common/PlayButton/index.tsx
index 01d3a0121..c8081dd16 100644
--- a/src/components/Common/PlayButton/index.tsx
+++ b/src/components/Common/PlayButton/index.tsx
@@ -25,7 +25,10 @@ const PlayButton = ({ links }: PlayButtonProps) => {
         </>
       }
       onClick={() => {
-        window.open(links[0].url, '_blank');
+        window.open(
+          links[0].url,
+          links[0].url.startsWith('http') ? '_blank' : '_self'
+        );
       }}
     >
       {links.length > 1 &&
@@ -34,7 +37,10 @@ const PlayButton = ({ links }: PlayButtonProps) => {
             <ButtonWithDropdown.Item
               key={`play-button-dropdown-item-${i}`}
               onClick={() => {
-                window.open(link.url, '_blank');
+                window.open(
+                  link.url,
+                  link.url.startsWith('http') ? '_blank' : '_self'
+                );
               }}
               buttonType="ghost"
             >
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index b7dc59172..5d3f713e9 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -28,6 +28,7 @@ import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import { sortCrewPriority } from '@app/utils/creditHelpers';
 import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
+import { urlLink } from '@app/utils/urlLink';
 import {
   ArrowRightCircleIcon,
   CloudIcon,
@@ -167,7 +168,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
   ) {
     mediaLinks.push({
       text: getAvalaibleMediaServerName(),
-      url: plexUrl,
+      url: urlLink(plexUrl),
       svg: <PlayIcon />,
     });
   }
@@ -181,7 +182,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
   ) {
     mediaLinks.push({
       text: getAvalaible4kMediaServerName(),
-      url: plexUrl4k,
+      url: urlLink(plexUrl4k),
       svg: <PlayIcon />,
     });
   }
@@ -351,7 +352,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
               inProgress={(data.mediaInfo?.downloadStatus ?? []).length > 0}
               tmdbId={data.mediaInfo?.tmdbId}
               mediaType="movie"
-              plexUrl={plexUrl}
+              plexUrl={urlLink(plexUrl)}
               serviceUrl={data.mediaInfo?.serviceUrl}
             />
             {settings.currentSettings.movie4kEnabled &&
@@ -375,7 +376,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                   }
                   tmdbId={data.mediaInfo?.tmdbId}
                   mediaType="movie"
-                  plexUrl={plexUrl4k}
+                  plexUrl={urlLink(plexUrl4k)}
                   serviceUrl={data.mediaInfo?.serviceUrl4k}
                 />
               )}
diff --git a/src/utils/urlLink.ts b/src/utils/urlLink.ts
new file mode 100644
index 000000000..8c340f856
--- /dev/null
+++ b/src/utils/urlLink.ts
@@ -0,0 +1,9 @@
+import { isMobile } from 'react-device-detect';
+
+const jellyfinIosUrl = 'org.jellyfin.expo://';
+
+export const urlLink = (plexUrl: string | undefined): string => {
+  if (isMobile)
+    return jellyfinIosUrl + plexUrl?.replace(new RegExp('^.*(details\\?)'), '');
+  return `${plexUrl}`;
+};
diff --git a/yarn.lock b/yarn.lock
index 09b5a3ca0..d78d48c01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11518,6 +11518,13 @@ react-aria@3.23.0:
     "@react-aria/utils" "^3.15.0"
     "@react-aria/visually-hidden" "^3.7.0"
 
+react-device-detect@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.2.3.tgz#97a7ae767cdd004e7c3578260f48cf70c036e7ca"
+  integrity sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==
+  dependencies:
+    ua-parser-js "^1.0.33"
+
 react-dom@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -13273,6 +13280,11 @@ typescript@^4.0, typescript@^4.6.4, typescript@^4.7:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
   integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==
 
+ua-parser-js@^1.0.33:
+  version "1.0.35"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.35.tgz#c4ef44343bc3db0a3cbefdf21822f1b1fc1ab011"
+  integrity sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA==
+
 uc.micro@^1.0.1:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"