Allow Using VLC as External Player on iOS and Android

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
 };

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;
+};

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
+        })
     })
 };
 

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}
                             />