VLC button support added

web/src/components/DialogTorrentDetailsContent/Table/index.jsx

@@ -28,6 +28,8 @@ const Table = memo(
     // if files in list is more then 1 and no season text detected by ptt.parse, show full name
     const shouldDisplayFullFileName = playableFileList.length > 1 && !fileHasEpisodeText
 
+    const isVlcUsed = JSON.parse(localStorage.getItem('isVlcUsed')) ?? true
+
     return !playableFileList?.length ? (
       'No playable files in this torrent'
     ) : (
@@ -133,11 +135,19 @@ const Table = memo(
                       {t('Preload')}
                     </Button>
 
-                    <a style={{ textDecoration: 'none' }} href={link} target='_blank' rel='noreferrer'>
-                      <Button style={{ width: '100%' }} variant='outlined' color='primary' size='small'>
-                        {t('OpenLink')}
-                      </Button>
-                    </a>
+                    {isVlcUsed ? (
+                      <a style={{ textDecoration: 'none' }} href={`vlc://${link}`}>
+                        <Button style={{ width: '100%' }} variant='outlined' color='primary' size='small'>
+                          VLC
+                        </Button>
+                      </a>
+                    ) : (
+                      <a style={{ textDecoration: 'none' }} href={link} target='_blank' rel='noreferrer'>
+                        <Button style={{ width: '100%' }} variant='outlined' color='primary' size='small'>
+                          {t('OpenLink')}
+                        </Button>
+                      </a>
+                    )}
 
                     <CopyToClipboard text={link}>
                       <Button variant='outlined' color='primary' size='small'>

web/src/components/Settings/MobileAppSettings.jsx

@@ -0,0 +1,20 @@
+import { FormControlLabel, Switch } from '@material-ui/core'
+import { useTranslation } from 'react-i18next'
+
+import { SecondarySettingsContent, SettingSectionLabel } from './style'
+
+export default function MobileAppSettings({ isVlcUsed, setIsVlcUsed }) {
+  const { t } = useTranslation()
+
+  return (
+    <SecondarySettingsContent>
+      <SettingSectionLabel>{t('SettingsDialog.MobileAppSettings')}</SettingSectionLabel>
+
+      <FormControlLabel
+        control={<Switch checked={isVlcUsed} onChange={() => setIsVlcUsed(prev => !prev)} color='secondary' />}
+        label={t('SettingsDialog.UseVLC')}
+        labelPlacement='start'
+      />
+    </SecondarySettingsContent>
+  )
+}

web/src/components/Settings/SettingsDialog.jsx

@@ -12,12 +12,14 @@ import SwipeableViews from 'react-swipeable-views'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import { StyledDialog } from 'style/CustomMaterialUiStyles'
 import useOnStandaloneAppOutsideClick from 'utils/useOnStandaloneAppOutsideClick'
+import { isStandaloneApp } from 'utils/Utils'
 
 import { SettingsHeader, FooterSection, Content } from './style'
 import defaultSettings from './defaultSettings'
 import { a11yProps, TabPanel } from './tabComponents'
 import PrimarySettingsComponent from './PrimarySettingsComponent'
 import SecondarySettingsComponent from './SecondarySettingsComponent'
+import MobileAppSettings from './MobileAppSettings'
 
 export default function SettingsDialog({ handleClose }) {
   const { t } = useTranslation()
@@ -30,6 +32,7 @@ export default function SettingsDialog({ handleClose }) {
   const [cachePercentage, setCachePercentage] = useState(40)
   const [preloadCachePercentage, setPreloadCachePercentage] = useState(0)
   const [isProMode, setIsProMode] = useState(JSON.parse(localStorage.getItem('isProMode')) || false)
+  const [isVlcUsed, setIsVlcUsed] = useState(JSON.parse(localStorage.getItem('isVlcUsed')) ?? true)
 
   useEffect(() => {
     axios.post(settingsHost(), { action: 'get' }).then(({ data }) => {
@@ -46,6 +49,7 @@ export default function SettingsDialog({ handleClose }) {
     sets.ReaderReadAHead = cachePercentage
     sets.PreloadCache = preloadCachePercentage
     axios.post(settingsHost(), { action: 'set', sets })
+    localStorage.setItem('isVlcUsed', isVlcUsed)
   }
 
   const inputForm = ({ target: { type, value, checked, id } }) => {
@@ -124,6 +128,8 @@ export default function SettingsDialog({ handleClose }) {
             }
             {...a11yProps(1)}
           />
+
+          {isStandaloneApp && <Tab label={t('SettingsDialog.Tabs.App')} {...a11yProps(2)} />}
         </Tabs>
       </AppBar>
 
@@ -153,6 +159,12 @@ export default function SettingsDialog({ handleClose }) {
               <TabPanel value={selectedTab} index={1} dir={direction}>
                 <SecondarySettingsComponent settings={settings} inputForm={inputForm} />
               </TabPanel>
+
+              {isStandaloneApp && (
+                <TabPanel value={selectedTab} index={2} dir={direction}>
+                  <MobileAppSettings isVlcUsed={isVlcUsed} setIsVlcUsed={setIsVlcUsed} />
+                </TabPanel>
+              )}
             </SwipeableViews>
           </>
         ) : (