From bd81e2737e5a48c055b131cef8beb0e6a41e070d Mon Sep 17 00:00:00 2001
From: Alexandru Branza <branza.alex@gmail.com>
Date: Mon, 29 May 2023 15:19:21 +0300
Subject: [PATCH] Allow Using VLC as External Player on iOS and Android

---
 src/common/index.js                           |  4 +++-
 src/common/isMobile.js                        | 22 +++++++++++++++++++
 .../MetaDetails/StreamsList/Stream/Stream.js  | 22 ++++++++++++++-----
 src/routes/Settings/Settings.js               |  1 -
 4 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 src/common/isMobile.js

diff --git a/src/common/index.js b/src/common/index.js
index 573919de4..05745af5f 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -40,6 +40,7 @@ const useOnScrollToBottom = require('./useOnScrollToBottom');
 const useProfile = require('./useProfile');
 const useStreamingServer = require('./useStreamingServer');
 const useTorrent = require('./useTorrent');
+const isMobile = require('./isMobile');
 
 module.exports = {
     AddonDetailsModal,
@@ -84,5 +85,6 @@ module.exports = {
     useOnScrollToBottom,
     useProfile,
     useStreamingServer,
-    useTorrent
+    useTorrent,
+    isMobile
 };
diff --git a/src/common/isMobile.js b/src/common/isMobile.js
new file mode 100644
index 000000000..55dd5ea0a
--- /dev/null
+++ b/src/common/isMobile.js
@@ -0,0 +1,22 @@
+function iOS() {
+    return [
+        'iPad Simulator',
+        'iPhone Simulator',
+        'iPod Simulator',
+        'iPad',
+        'iPhone',
+        'iPod'
+    ].includes(navigator.platform)
+    || (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
+}
+
+function android() {
+    const ua = navigator.userAgent.toLowerCase();
+    return ua.indexOf('android') > -1;
+}
+
+module.exports = () => {
+    if (iOS()) return 'ios';
+    if (android()) return 'android';
+    return false;
+};
diff --git a/src/routes/MetaDetails/StreamsList/Stream/Stream.js b/src/routes/MetaDetails/StreamsList/Stream/Stream.js
index 97cac4150..50e1a6f1a 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/Stream.js
+++ b/src/routes/MetaDetails/StreamsList/Stream/Stream.js
@@ -4,17 +4,21 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('@stremio/stremio-icons/dom');
-const { Button, Image, PlayIconCircleCentered } = require('stremio/common');
+const { Button, Image, PlayIconCircleCentered, useProfile, isMobile } = require('stremio/common');
 const StreamPlaceholder = require('./StreamPlaceholder');
 const styles = require('./styles');
 
 const Stream = ({ className, addonName, name, description, thumbnail, progress, deepLinks, ...props }) => {
+    const profile = useProfile();
     const href = React.useMemo(() => {
         return deepLinks ?
-            typeof deepLinks.player === 'string' ?
-                deepLinks.player
+            profile.settings.playInExternalPlayer ?
+                deepLinks.externalPlayer.vlc[isMobile() || 'desktop'] || deepLinks.externalPlayer.href
                 :
-                null
+                typeof deepLinks.player === 'string' ?
+                    deepLinks.player
+                    :
+                    null
             :
             null;
     }, [deepLinks]);
@@ -62,7 +66,15 @@ Stream.propTypes = {
     thumbnail: PropTypes.string,
     progress: PropTypes.number,
     deepLinks: PropTypes.shape({
-        player: PropTypes.string
+        player: PropTypes.string,
+        externalPlayer: PropTypes.shape({
+            vlc: {
+                ios: PropTypes.string,
+                android: PropTypes.string,
+                desktop: PropTypes.string
+            },
+            href: PropTypes.string
+        })
     })
 };
 
diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index 3e1e23fd2..f3d8bd274 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -401,7 +401,6 @@ const Settings = () => {
                             </div>
                             <Checkbox
                                 className={classnames(styles['option-input-container'], styles['checkbox-container'])}
-                                disabled={true}
                                 tabIndex={-1}
                                 {...playInExternalPlayerCheckbox}
                             />