Add Proxy configuration to settings. Fix ft-video-list height when using list display

src/main/index.js

@@ -65,21 +65,57 @@ if (!isDev) {
     })
 
     app.on('ready', (event, commandLine, workingDirectory) => {
-      settingsDb.findOne({
+      settingsDb.find({
-        _id: 'disableSmoothScrolling'
+        $or: [
+          { _id: 'disableSmoothScrolling' },
+          { _id: 'useProxy' },
+          { _id: 'proxyProtocol' },
+          { _id: 'proxyHostname' },
+          { _id: 'proxyPort' }
+        ]
       }, function (err, doc) {
         if (err) {
           app.exit(0)
           return
         }
 
-        if (doc !== null && doc.value) {
+        let disableSmoothScrolling = false
+        let useProxy = false
+        let proxyProtocol = 'socks5'
+        let proxyHostname = '127.0.0.1'
+        let proxyPort = '9050'
+
+        if (typeof doc === 'object' && doc.length > 0) {
+          doc.forEach((dbItem) => {
+            switch (dbItem._id) {
+              case 'disableSmoothScrolling':
+                disableSmoothScrolling = dbItem.value
+                break
+              case 'useProxy':
+                useProxy = dbItem.value
+                break
+              case 'proxyProtocol':
+                proxyProtocol = dbItem.value
+                break
+              case 'proxyHostname':
+                proxyHostname = dbItem.value
+                break
+              case 'proxyPort':
+                proxyPort = dbItem.value
+                break
+            }
+          })
+        }
+
+        if (disableSmoothScrolling) {
           app.commandLine.appendSwitch('disable-smooth-scrolling')
         } else {
           app.commandLine.appendSwitch('enable-smooth-scrolling')
         }
 
-        createWindow()
+        const proxyUrl = `${proxyProtocol}://${proxyHostname}:${proxyPort}`
+
+        createWindow(useProxy, proxyUrl)
 
         if (isDev) {
           installDevTools()
@@ -99,21 +135,57 @@ if (!isDev) {
   })
 
   app.on('ready', () => {
-    settingsDb.findOne({
+    settingsDb.find({
-      _id: 'disableSmoothScrolling'
+      $or: [
+        { _id: 'disableSmoothScrolling' },
+        { _id: 'useProxy' },
+        { _id: 'proxyProtocol' },
+        { _id: 'proxyHostname' },
+        { _id: 'proxyPort' }
+      ]
     }, function (err, doc) {
       if (err) {
         app.exit(0)
         return
       }
 
-      if (doc !== null && doc.value) {
+      let disableSmoothScrolling = false
+      let useProxy = false
+      let proxyProtocol = 'socks5'
+      let proxyHostname = '127.0.0.1'
+      let proxyPort = '9050'
+
+      if (typeof doc === 'object' && doc.length > 0) {
+        doc.forEach((dbItem) => {
+          switch (dbItem._id) {
+            case 'disableSmoothScrolling':
+              disableSmoothScrolling = dbItem.value
+              break
+            case 'useProxy':
+              useProxy = dbItem.value
+              break
+            case 'proxyProtocol':
+              proxyProtocol = dbItem.value
+              break
+            case 'proxyHostname':
+              proxyHostname = dbItem.value
+              break
+            case 'proxyPort':
+              proxyPort = dbItem.value
+              break
+          }
+        })
+      }
+
+      if (disableSmoothScrolling) {
         app.commandLine.appendSwitch('disable-smooth-scrolling')
       } else {
         app.commandLine.appendSwitch('enable-smooth-scrolling')
       }
 
-      createWindow()
+      const proxyUrl = `${proxyProtocol}://${proxyHostname}:${proxyPort}`
+
+      createWindow(useProxy, proxyUrl)
 
       if (isDev) {
         installDevTools()
@@ -137,7 +209,7 @@ async function installDevTools () {
   }
 }
 
-function createWindow () {
+function createWindow (useProxy = false, proxyUrl = '') {
   /**
    * Initial window options
    */
@@ -164,6 +236,12 @@ function createWindow () {
     height: 800
   })
 
+  if (useProxy) {
+    mainWindow.webContents.session.setProxy({
+      proxyRules: proxyUrl
+    })
+  }
+
   settingsDb.findOne({
     _id: 'bounds'
   }, function (err, doc) {
@@ -264,6 +342,17 @@ function createWindow () {
     mainWindow.close()
     createWindow()
   })
+
+  ipcMain.on('enableProxy', (event, url) => {
+    console.log(url)
+    mainWindow.webContents.session.setProxy({
+      proxyRules: url
+    })
+  })
+
+  ipcMain.on('disableProxy', () => {
+    mainWindow.webContents.session.setProxy({})
+  })
 }
 
 app.on('window-all-closed', () => {

src/renderer/components/data-settings/data-settings.js

@@ -78,6 +78,12 @@ export default Vue.extend({
     }
   },
   methods: {
+    openProfileSettings: function () {
+      this.$router.push({
+        path: '/settings/profile/'
+      })
+    },
+
     importSubscriptions: function (option) {
       this.showImportSubscriptionsPrompt = false
 

src/renderer/components/data-settings/data-settings.vue

@@ -27,6 +27,22 @@
         @click="exportHistory"
       />
     </ft-flex-box>
+    <ft-flex-box>
+      <a
+        class="center"
+        href="https://github.com/FreeTubeApp/FreeTube/wiki/Importing-Your-YouTube-Subscriptions"
+      >
+        <p>
+          {{ $t("Settings.Data Settings.How do I import my subscriptions?") }}
+        </p>
+      </a>
+    </ft-flex-box>
+    <ft-flex-box>
+      <ft-button
+        :label="$t('Settings.Data Settings.Manage Subscriptions')"
+        @click="openProfileSettings"
+      />
+    </ft-flex-box>
     <ft-prompt
       v-if="showImportSubscriptionsPrompt"
       :label="$t('Settings.Data Settings.Select Import Type')"

src/renderer/components/proxy-settings/proxy-settings.css

@@ -0,0 +1,25 @@
+.relative {
+  position: relative;
+}
+
+.card {
+  width: 85%;
+  margin: 0 auto;
+  margin-bottom: 10px;
+}
+
+.center {
+  text-align: center;
+}
+
+@media only screen and (max-width: 680px) {
+  .card {
+    width: 90%;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .subscriptionSettingsFlexBox {
+    justify-content: flex-start;
+  }
+}

src/renderer/components/proxy-settings/proxy-settings.js

@@ -0,0 +1,155 @@
+import Vue from 'vue'
+import $ from 'jquery'
+import { mapActions } from 'vuex'
+import FtCard from '../ft-card/ft-card.vue'
+import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
+import FtButton from '../ft-button/ft-button.vue'
+import FtSelect from '../ft-select/ft-select.vue'
+import FtInput from '../ft-input/ft-input.vue'
+import FtLoader from '../ft-loader/ft-loader.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+
+import electron from 'electron'
+import debounce from 'lodash.debounce'
+
+export default Vue.extend({
+  name: 'ProxySettings',
+  components: {
+    'ft-card': FtCard,
+    'ft-toggle-switch': FtToggleSwitch,
+    'ft-button': FtButton,
+    'ft-select': FtSelect,
+    'ft-input': FtInput,
+    'ft-loader': FtLoader,
+    'ft-flex-box': FtFlexBox
+  },
+  data: function () {
+    return {
+      isLoading: false,
+      dataAvailable: false,
+      proxyTestUrl: 'https://api.ipify.org?format=json',
+      proxyTestUrl1: 'https://freegeoip.app/json/',
+      proxyId: '',
+      proxyCountry: '',
+      proxyRegion: '',
+      proxyCity: '',
+      proxyHost: '',
+      protocolNames: [
+        'HTTP',
+        'HTTPS',
+        'SOCKS4',
+        'SOCKS5'
+      ],
+      protocolValues: [
+        'http',
+        'https',
+        'socks4',
+        'socks5'
+      ]
+    }
+  },
+  computed: {
+    useProxy: function () {
+      return this.$store.getters.getUseProxy
+    },
+    proxyProtocol: function () {
+      return this.$store.getters.getProxyProtocol
+    },
+    proxyHostname: function () {
+      return this.$store.getters.getProxyHostname
+    },
+    proxyPort: function () {
+      return this.$store.getters.getProxyPort
+    },
+    proxyUrl: function () {
+      return `${this.proxyProtocol}://${this.proxyHostname}:${this.proxyPort}`
+    }
+  },
+  mounted: function () {
+    this.debounceEnableProxy = debounce(this.enableProxy, 200)
+  },
+  beforeDestroy: function () {
+    if (this.proxyHostname === '') {
+      this.updateProxyHostname('127.0.0.1')
+    }
+
+    if (this.proxyPort === '') {
+      this.updateProxyPort('9050')
+    }
+  },
+  methods: {
+    handleUpdateProxy: function (value) {
+      if (value) {
+        this.enableProxy()
+      } else {
+        this.disableProxy()
+      }
+      this.updateUseProxy(value)
+    },
+
+    handleUpdateProxyProtocol: function (value) {
+      if (this.useProxy) {
+        this.enableProxy()
+      }
+      this.updateProxyProtocol(value)
+    },
+
+    handleUpdateProxyHostname: function (value) {
+      if (this.useProxy) {
+        this.debounceEnableProxy()
+      }
+      this.updateProxyHostname(value)
+    },
+
+    handleUpdateProxyPort: function (value) {
+      if (this.useProxy) {
+        this.debounceEnableProxy()
+      }
+      this.updateProxyPort(value)
+    },
+
+    enableProxy: function () {
+      electron.ipcRenderer.send('enableProxy', this.proxyUrl)
+    },
+
+    disableProxy: function () {
+      electron.ipcRenderer.send('disableProxy')
+    },
+
+    testProxy: function () {
+      this.isLoading = true
+      if (!this.useProxy) {
+        this.enableProxy()
+      }
+      $.getJSON(this.proxyTestUrl1, (response) => {
+        console.log(response)
+        this.proxyIp = response.ip
+        this.proxyCountry = response.country_name
+        this.proxyRegion = response.region_name
+        this.proxyCity = response.city
+        this.dataAvailable = true
+      }).fail((xhr, textStatus, error) => {
+        console.log(xhr)
+        console.log(textStatus)
+        console.log(error)
+        this.showToast({
+          message: this.$t('Settings.Proxy Settings["Error getting network information. Is your proxy configured properly?"]')
+        })
+        this.dataAvailable = false
+      }).always(() => {
+        if (!this.useProxy) {
+          this.disableProxy()
+        }
+        this.isLoading = false
+      })
+    },
+
+    ...mapActions([
+      'showToast',
+      'updateUseProxy',
+      'updateProxyProtocol',
+      'updateProxyHostname',
+      'updateProxyPort'
+    ])
+  }
+})

src/renderer/components/proxy-settings/proxy-settings.vue

@@ -0,0 +1,78 @@
+<template>
+  <ft-card
+    class="relative card"
+  >
+    <h3
+      class="videoTitle"
+    >
+      {{ $t("Settings.Proxy Settings.Proxy Settings") }}
+    </h3>
+    <ft-flex-box class="subscriptionSettingsFlexBox">
+      <ft-toggle-switch
+        :label="$t('Settings.Proxy Settings.Enable Tor / Proxy')"
+        :default-value="useProxy"
+        @change="handleUpdateProxy"
+      />
+    </ft-flex-box>
+    <ft-flex-box>
+      <ft-select
+        :placeholder="$t('Settings.Proxy Settings.Proxy Protocol')"
+        :value="proxyProtocol"
+        :select-names="protocolNames"
+        :select-values="protocolValues"
+        @change="handleUpdateProxyProtocol"
+      />
+    </ft-flex-box>
+    <ft-flex-box>
+      <ft-input
+        :placeholder="$t('Settings.Proxy Settings.Proxy Host')"
+        :show-arrow="false"
+        :show-label="true"
+        :value="proxyHostname"
+        @input="handleUpdateProxyHostname"
+      />
+      <ft-input
+        :placeholder="$t('Settings.Proxy Settings.Proxy Port Number')"
+        :show-arrow="false"
+        :show-label="true"
+        :value="proxyPort"
+        @input="handleUpdateProxyPort"
+      />
+    </ft-flex-box>
+    <p class="center">
+      {{ $t('Settings.Proxy Settings.Clicking on Test Proxy will send a request to') }} https://freegeoip.app/json/
+    </p>
+    <ft-flex-box>
+      <ft-button
+        :label="$t('Settings.Proxy Settings.Test Proxy')"
+        @click="testProxy"
+      />
+    </ft-flex-box>
+    <ft-loader
+      v-if="isLoading"
+    />
+    <div
+      v-if="!isLoading && dataAvailable"
+      class="center"
+    >
+      <h3>
+        {{ $t('Settings.Proxy Settings.Your Info') }}
+      </h3>
+      <p>
+        {{ $t('Settings.Proxy Settings.Ip') }}: {{ proxyIp }}
+      </p>
+      <p>
+        {{ $t('Settings.Proxy Settings.Country') }}: {{ proxyCountry }}
+      </p>
+      <p>
+        {{ $t('Settings.Proxy Settings.Region') }}: {{ proxyRegion }}
+      </p>
+      <p>
+        {{ $t('Settings.Proxy Settings.City') }}: {{ proxyCity }}
+      </p>
+    </div>
+  </ft-card>
+</template>
+
+<script src="./proxy-settings.js" />
+<style scoped src="./proxy-settings.css" />

src/renderer/components/subscription-settings/subscription-settings.js

@@ -7,7 +7,7 @@ import FtSelect from '../ft-select/ft-select.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 
 export default Vue.extend({
-  name: 'PlayerSettings',
+  name: 'SubscriptionSettings',
   components: {
     'ft-card': FtCard,
     'ft-toggle-switch': FtToggleSwitch,

src/renderer/sass-partials/_ft-list-item.sass

@@ -169,6 +169,8 @@ $thumbnail-overlay-opacity: 0.85
 
     .description
       font-size: 14px
+      max-height: 50px
+      overflow-y: hidden
       @include low-contrast-when-watched(var(--secondary-text-color))
 
   &.list

src/renderer/store/modules/settings.js

@@ -57,8 +57,10 @@ const state = {
   defaultPlayback: 1,
   defaultVideoFormat: 'dash',
   defaultQuality: '720',
-  useTor: false,
+  useProxy: false,
-  proxy: 'SOCKS5://127.0.0.1:9050',
+  proxyProtocol: 'socks5',
+  proxyHostname: '127.0.0.1',
+  proxyPort: '9050',
   debugMode: false,
   disableSmoothScrolling: false,
   hideWatchedSubs: false,
@@ -160,6 +162,22 @@ const getters = {
     return state.proxyVideos
   },
 
+  getUseProxy: () => {
+    return state.useProxy
+  },
+
+  getProxyProtocol: () => {
+    return state.proxyProtocol
+  },
+
+  getProxyHostname: () => {
+    return state.proxyHostname
+  },
+
+  getProxyPort: () => {
+    return state.proxyPort
+  },
+
   getDefaultTheatreMode: () => {
     return state.defaultTheatreMode
   },
@@ -315,6 +333,18 @@ const actions = {
             case 'proxyVideos':
               commit('setProxyVideos', result.value)
               break
+            case 'useProxy':
+              commit('setUseProxy', result.value)
+              break
+            case 'proxyProtocol':
+              commit('setProxyProtocol', result.value)
+              break
+            case 'proxyHostname':
+              commit('setProxyHostname', result.value)
+              break
+            case 'proxyPort':
+              commit('setProxyPort', result.value)
+              break
             case 'defaultTheatreMode':
               commit('setDefaultTheatreMode', result.value)
               break
@@ -590,10 +620,34 @@ const actions = {
     })
   },
 
-  updateUseTor ({ commit }, useTor) {
+  updateUseProxy ({ commit }, useProxy) {
-    settingsDb.update({ _id: useTor }, { value: useTor }, { upsert: true }, (err, useTor) => {
+    settingsDb.update({ _id: 'useProxy' }, { _id: 'useProxy', value: useProxy }, { upsert: true }, (err, numReplaced) => {
       if (!err) {
-        commit('setUseTor', useTor)
+        commit('setUseProxy', useProxy)
+      }
+    })
+  },
+
+  updateProxyProtocol ({ commit }, proxyProtocol) {
+    settingsDb.update({ _id: 'proxyProtocol' }, { _id: 'proxyProtocol', value: proxyProtocol }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setProxyProtocol', proxyProtocol)
+      }
+    })
+  },
+
+  updateProxyHostname ({ commit }, proxyHostname) {
+    settingsDb.update({ _id: 'proxyHostname' }, { _id: 'proxyHostname', value: proxyHostname }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setProxyHostname', proxyHostname)
+      }
+    })
+  },
+
+  updateProxyPort ({ commit }, proxyPort) {
+    settingsDb.update({ _id: 'proxyPort' }, { _id: 'proxyPort', value: proxyPort }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setProxyPort', proxyPort)
       }
     })
   },
@@ -764,8 +818,17 @@ const mutations = {
   setDefaultTheatreMode (state, defaultTheatreMode) {
     state.defaultTheatreMode = defaultTheatreMode
   },
-  setUseTor (state, useTor) {
+  setUseProxy (state, useProxy) {
-    state.useTor = useTor
+    state.useProxy = useProxy
+  },
+  setProxyProtocol (state, proxyProtocol) {
+    state.proxyProtocol = proxyProtocol
+  },
+  setProxyHostname (state, proxyHostname) {
+    state.proxyHostname = proxyHostname
+  },
+  setProxyPort (state, proxyPort) {
+    state.proxyPort = proxyPort
   },
   setDebugMode (state, debugMode) {
     state.debugMode = debugMode

src/renderer/views/Settings/Settings.js

@@ -8,6 +8,7 @@ import SubscriptionSettings from '../../components/subscription-settings/subscri
 import PrivacySettings from '../../components/privacy-settings/privacy-settings.vue'
 import DataSettings from '../../components/data-settings/data-settings.vue'
 import DistractionSettings from '../../components/distraction-settings/distraction-settings.vue'
+import ProxySettings from '../../components/proxy-settings/proxy-settings.vue'
 
 export default Vue.extend({
   name: 'Settings',
@@ -20,6 +21,7 @@ export default Vue.extend({
     'subscription-settings': SubscriptionSettings,
     'privacy-settings': PrivacySettings,
     'data-settings': DataSettings,
-    'distraction-settings': DistractionSettings
+    'distraction-settings': DistractionSettings,
+    'proxy-settings': ProxySettings
   }
 })

src/renderer/views/Settings/Settings.vue

@@ -7,6 +7,7 @@
     <distraction-settings />
     <privacy-settings />
     <data-settings />
+    <proxy-settings />
   </div>
 </template>
 

static/locales/en-US.yaml

@@ -252,33 +252,21 @@ Settings:
     Unable to write file: Unable to write file
     Unknown data key: Unknown data key
     How do I import my subscriptions?: How do I import my subscriptions?
-  Advanced Settings:
+    Manage Subscriptions: Manage Subscriptions
-    Advanced Settings: Advanced Settings
+  Proxy Settings:
-    Enable Debug Mode (Prints data to the console): Enable Debug Mode (Prints data
+    Proxy Settings: Proxy Settings
-      to the console)
+    Enable Tor / Proxy: Enable Tor / Proxy
-    'Proxy Address (Example: SOCKS5://127.0.0.1:9050 )': 'Proxy Address (Example:
+    Proxy Protocol: Proxy Protocol
-      SOCKS5://127.0.0.1:9050 )'
+    Proxy Host: Proxy Host
-    'Clicking "TEST PROXY" button will send a request to https://ipinfo.io/json': Clicking
+    Proxy Port Number: Proxy Port Number
-      "TEST PROXY" button will send a request to https://ipinfo.io/json
+    Clicking on Test Proxy will send a request to: Clicking on Test Proxy will send a request to
-    Use Tor / Proxy for API calls: Use Tor / Proxy for API calls
+    Test Proxy: Test Proxy
-    TEST PROXY: TEST PROXY
+    Your Info: Your Info
-    #& Invidious Instance (Default is https://invidious.snopyta.org)
+    Ip: Ip
-    See Public Instances: See Public Instances
+    Country: Country
-    Clear History:
+    Region: Region
-      Clear History: Clear History
+    City: City
-      # On Click
+    Error getting network information. Is your proxy configured properly?: Error getting network information. Is your proxy configured properly?
-      Are you sure you want to delete your history?: Are you sure you want to delete
-        your history?
-      #& Yes
-      #& No
-    Clear Subscriptions:
-      Clear Subscriptions: Clear Subscriptions
-      # On Click
-      Are you sure you want to remove all subscriptions?: Are you sure you want to
-        remove all subscriptions?
-      #& Yes
-      #& No
-
 About:
   #On About page
   About: About