tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Preston 2021-01-14 13:51:33 -05:00
parent 34a9b9bd09
commit 6d7d874bc0
12 changed files with 470 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/main/index.js
View File

@ -65,21 +65,57 @@ if (!isDev) {
})
app.on('ready', (event, commandLine, workingDirectory) => {
settingsDb.findOne({
_id: 'disableSmoothScrolling'
settingsDb.find({
$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({
_id: 'disableSmoothScrolling'
settingsDb.find({
$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', () => {

6
src/renderer/components/data-settings/data-settings.js
View File

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

16
src/renderer/components/data-settings/data-settings.vue
View File

@ -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')"

25
src/renderer/components/proxy-settings/proxy-settings.css Normal file
View File

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

155
src/renderer/components/proxy-settings/proxy-settings.js Normal file
View File

@ -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'
])
}
})

78
src/renderer/components/proxy-settings/proxy-settings.vue Normal file
View File

@ -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" />

2
src/renderer/components/subscription-settings/subscription-settings.js
View File

@ -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,

2
src/renderer/sass-partials/_ft-list-item.sass
View File

@ -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

77
src/renderer/store/modules/settings.js
View File

@ -57,8 +57,10 @@ const state = {
defaultPlayback: 1,
defaultVideoFormat: 'dash',
defaultQuality: '720',
useTor: false,
proxy: 'SOCKS5://127.0.0.1:9050',
useProxy: false,
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) {
settingsDb.update({ _id: useTor }, { value: useTor }, { upsert: true }, (err, useTor) => {
updateUseProxy ({ commit }, useProxy) {
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) {
state.useTor = useTor
setUseProxy (state, useProxy) {
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

4
src/renderer/views/Settings/Settings.js
View File

@ -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
}
})

1
src/renderer/views/Settings/Settings.vue
View File

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

42
static/locales/en-US.yaml
View File

@ -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:
Advanced Settings: Advanced Settings
Enable Debug Mode (Prints data to the console): Enable Debug Mode (Prints data
to the console)
'Proxy Address (Example: SOCKS5://127.0.0.1:9050 )': 'Proxy Address (Example:
SOCKS5://127.0.0.1:9050 )'
'Clicking "TEST PROXY" button will send a request to https://ipinfo.io/json': Clicking
"TEST PROXY" button will send a request to https://ipinfo.io/json
Use Tor / Proxy for API calls: Use Tor / Proxy for API calls
TEST PROXY: TEST PROXY
#& Invidious Instance (Default is https://invidious.snopyta.org)
See Public Instances: See Public Instances
Clear History:
Clear History: Clear History
# On Click
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
Manage Subscriptions: Manage Subscriptions
Proxy Settings:
Proxy Settings: Proxy Settings
Enable Tor / Proxy: Enable Tor / Proxy
Proxy Protocol: Proxy Protocol
Proxy Host: Proxy Host
Proxy Port Number: Proxy Port Number
Clicking on Test Proxy will send a request to: Clicking on Test Proxy will send a request to
Test Proxy: Test Proxy
Your Info: Your Info
Ip: Ip
Country: Country
Region: Region
City: City
Error getting network information. Is your proxy configured properly?: Error getting network information. Is your proxy configured properly?
About:
#On About page
About: About