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

Start progress on Settings page

This commit is contained in:
Preston 2020-02-21 15:40:46 -05:00
parent ed8a74625c
commit d4314ee7da
11 changed files with 874 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/renderer/components/ft-toggle-switch/ft-toggle-switch.css Normal file
View File

@ -0,0 +1,74 @@
/* Thanks to Guus Lieben for the Material Design Switch */
.switch-input {
display: none;
}
.switch-label {
position: relative;
display: inline-block;
min-width: 112px;
cursor: pointer;
font-weight: 500;
text-align: left;
margin: 16px;
padding: 16px 0 16px 44px;
}
.switch-label:before,
.switch-label:after {
content: "";
position: absolute;
margin: 0;
outline: 0;
top: 50%;
-ms-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.switch-label:before {
left: 1px;
width: 34px;
height: 14px;
background-color: #9E9E9E;
border-radius: 8px;
}
.switch-label:after {
left: 0;
width: 20px;
height: 20px;
background-color: #FAFAFA;
border-radius: 50%;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
}
.switch-label .toggle--on {
display: none;
}
.switch-label .toggle--off {
display: inline-block;
}
.switch-input:checked+.switch-label:before {
background-color: #90CAF9;
}
.switch-input:checked+.switch-label:after {
background-color: #2196F3;
-ms-transform: translate(80%, -50%);
-webkit-transform: translate(80%, -50%);
transform: translate(80%, -50%);
}
.switch-input:checked+.switch-label .toggle--on {
display: inline-block;
}
.switch-input:checked+.switch-label .toggle--off {
display: none;
}

25
src/renderer/components/ft-toggle-switch/ft-toggle-switch.js Normal file
View File

@ -0,0 +1,25 @@
import Vue from 'vue'
export default Vue.extend({
name: 'FtToggleSwitch',
props: {
label: {
type: String,
required: true
},
defaultValue: {
type: Boolean,
default: false
}
},
data: function () {
return {
id: '',
currentValue: false
}
},
mounted: function () {
this.id = this._uid
this.currentValue = this.defaultValue
}
})

22
src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<div>
<input
type="checkbox"
:id="id"
name="set-name"
class="switch-input"
:checked='currentValue'
v-model="currentValue"
@change="$emit('change', currentValue)"
>
<label
:for="id"
class="switch-label"
>
{{ label }}
</label>
</div>
</template>
<script src="./ft-toggle-switch.js" />
<style scoped src="./ft-toggle-switch.css" />

9
src/renderer/components/general-settings/general-settings.css Normal file
View File

@ -0,0 +1,9 @@
.relative {
position: relative;
}
.card {
width: 85%;
margin: 0 auto;
margin-bottom: 60px;
}

552
src/renderer/components/general-settings/general-settings.js Normal file
View File

@ -0,0 +1,552 @@
import Vue from 'vue'
import FtCard from '../ft-card/ft-card.vue'
import FtSelect from '../ft-select/ft-select.vue'
import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
export default Vue.extend({
name: 'GeneralSettings',
components: {
'ft-card': FtCard,
'ft-select': FtSelect,
'ft-toggle-switch': FtToggleSwitch,
'ft-flex-box': FtFlexBox
},
data: function () {
return {
title: 'General Settings',
themeNames: [
'Light Red',
'Dark Red',
'Gray Red'
],
themeValues: [
'lightRed',
'darkRed',
'grayRed'
],
backendNames: [
'Invidious API',
'Local API'
],
backendValues: [
'invidious',
'local'
],
defaultPageNames: [
'Subscriptions',
'Trending',
'Most Popular',
'Playlists',
'History'
],
defaultPageValues: [
'subscriptions',
'trending',
'mostPopular',
'playlists',
'history'
],
viewTypeNames: [
'Grid',
'List'
],
viewTypeValues: [
'grid',
'list'
],
regionNames: [
'Afghanistan',
'Albania',
'Algeria',
'American Samoa',
'Andorra',
'Angola',
'Antarctica',
'Antigua And Barbuda',
'Argentina',
'Armenia',
'Aruba',
'Australia',
'Austria',
'Azerbaijan',
'Bahamas',
'Bahrain',
'Bangladesh',
'Barbados',
'Belarus',
'Belgium',
'Belize',
'Benin',
'Bermuda',
'Bhutan',
'Bolivia',
'Bosnia And Herzegovina',
'Botswana',
'Bouvet Island',
'Brazil',
'British Indian Ocean Territory',
'Brunei Darussalam',
'Bulgaria',
'Burkina Faso',
'Burundi',
'Cambodia',
'Cameroon',
'Canada',
'Cape Verde',
'Cayman Islands',
'Central African Republic',
'Chad',
'Chile',
'China',
'Christmas Island',
'Cocos (Keeling) Islands',
'Colombia',
'Comoros',
'Congo',
'Congo, The Democratic Republic Of The',
'Cook Islands',
'Costa Rica',
"Cote D'Ivoire",
'Croatia',
'Cuba',
'Cyprus',
'Czech Republic',
'Denmark',
'Djibouti',
'Dominica',
'Dominican Republic',
'Ecuador',
'Egypt',
'El Salvador',
'Equatorial Guinea',
'Eritrea',
'Estonia',
'Ethiopia',
'Falkland Islands (Malvinas)',
'Faroe Islands',
'Fiji',
'Finland',
'France',
'French Guiana',
'French Polynesia',
'French Southern Territories',
'Gabon',
'Gambia',
'Georgia',
'Germany',
'Ghana',
'Gibraltar',
'Greece',
'Greenland',
'Grenada',
'Guadeloupe',
'Guam',
'Guatamala',
'Guinea',
'Guinea-Bissau',
'Guyana',
'Haiti',
'Heard Island And McDonald Islands',
'Honduras',
'Hong Kong',
'Hungary',
'Iceland',
'India',
'Indonesia',
'Iran, Islamic Republic Of',
'Iraq',
'Ireland',
'Israel',
'Italy',
'Jamaica',
'Japan',
'Jordan',
'Kazakhstan',
'Kenya',
'Kiribati',
"Korea, Democratic People's Republic Of",
'Korea, Republic Of',
'Kuwait',
'Kyrgyzstan',
"Lao People's Democratic Republic (LAOS)",
'Latvia',
'Lebonon',
'Lesotho',
'Liberia',
'Libyan Arab Jamahiriya',
'Liechtenstein',
'Lithuania',
'Luxembourg',
'Macao',
'Macedonia, The Former Yugoslav Republic Of',
'Madagascar',
'Malawi',
'Malaysia',
'Maldives',
'Mali',
'Malta',
'Marshall Islands',
'Martinique',
'Mauritania',
'Mauritius',
'Mayotte',
'Mexico',
'Micronesia, Federated States Of',
'Moldova, Republic Of',
'Monaco',
'Mongolia',
'Montenegro',
'Montserrat',
'Morocco',
'Mozambique',
'Myanmar',
'Namibia',
'Nauru',
'Nepal',
'Netherlands',
'Netherlands Antilles',
'New Caledonia',
'New Zealand',
'Nicaragua',
'Niger',
'Nigeria',
'Niue',
'Norfolk Island',
'Northern Mariana Islands',
'Norway',
'Oman',
'Pakistan',
'Palau',
'Palestinian Territory, Occupied',
'Panama',
'Papua New Guinea',
'Paraguay',
'Peru',
'Philippines',
'Pitcair',
'Poland',
'Portugal',
'Puerto Rico',
'Qatar',
'Reunion',
'Romania',
'Russian Federation',
'Rwanda',
'Saint Helena',
'Saint Kitts And Nevis',
'Saint Lucia',
'Saint Pierre And Miquelon',
'Saint Vincent And The Grenadines',
'Samoa',
'San Marina',
'Sao Tome And Principe',
'Saudi Arabia',
'Senegal',
'Serbia',
'Seychelles',
'Sierra Leone',
'Singapore',
'Slovakia',
'Slovenia',
'Solomon Islands',
'Somalia',
'South Africa',
'South Georgia And The South Sandwich Islands',
'Spain',
'Sri Lanka',
'Sudan',
'Suriname',
'Svalbard And Jan Mayen',
'Swaziland',
'Sweden',
'Switzerland',
'Syrian Arab Republic',
'Taiwan',
'Tajikistan',
'Tanzania, United Republic Of',
'Thailand',
'Timor-Leste',
'Togo',
'Tokelau',
'Tonga',
'Trinidad And Tobago',
'Tunisia',
'Turkey',
'Turkenistan',
'Turks And Caicos Islands',
'Tuvalu',
'Uganda',
'Ukraine',
'United Arab Emirates',
'United Kingdom',
'United States',
'United States Minor Outlying Islands',
'Uruguay',
'Uzbekistan',
'Vanuatu',
'Venezuela',
'Viet Nam',
'Virgin Islands, British',
'Virgin Islands, U.S.',
'Wallis And Futuna',
'Western Sahara',
'Yemen',
'Zambia',
'Zimbabwe'
],
regionValues: [
'AF',
'AL',
'DZ',
'AS',
'AD',
'AO',
'AQ',
'AG',
'AR',
'AM',
'AW',
'AU',
'AT',
'AZ',
'BS',
'BH',
'BD',
'BB',
'BY',
'BE',
'BZ',
'BJ',
'BM',
'BT',
'BO',
'BA',
'BW',
'BV',
'BR',
'IO',
'BN',
'BG',
'BF',
'BI',
'KH',
'CM',
'CA',
'CV',
'KY',
'CF',
'TD',
'CL',
'CN',
'CX',
'CC',
'CO',
'KM',
'CG',
'CD',
'CK',
'CR',
'CI',
'HR',
'CU',
'CY',
'CZ',
'DK',
'DJ',
'DM',
'DO',
'EC',
'EG',
'SV',
'GQ',
'ER',
'EE',
'ET',
'FK',
'FO',
'FJ',
'FI',
'FR',
'GF',
'PF',
'TF',
'GA',
'GM',
'GE',
'DE',
'GH',
'GI',
'GR',
'GL',
'GD',
'GP',
'GU',
'GT',
'GN',
'GW',
'GY',
'HT',
'HM',
'HN',
'HK',
'HU',
'IS',
'IN',
'ID',
'IR',
'IQ',
'IE',
'IL',
'IT',
'JM',
'JP',
'JO',
'KZ',
'KE',
'KI',
'KP',
'KR',
'KW',
'KG',
'LA',
'LV',
'LB',
'LS',
'LR',
'LY',
'LI',
'LT',
'LU',
'MO',
'MK',
'MG',
'MW',
'MY',
'MV',
'ML',
'MT',
'MH',
'MQ',
'MR',
'MU',
'YT',
'MX',
'FM',
'MD',
'MC',
'MN',
'ME',
'MS',
'MA',
'MZ',
'MM',
'NA',
'NR',
'NP',
'NL',
'AN',
'NC',
'NZ',
'NI',
'NE',
'NG',
'NU',
'NF',
'MP',
'NO',
'OM',
'PK',
'PW',
'PS',
'PA',
'PG',
'PY',
'PE',
'PH',
'PN',
'PL',
'PT',
'PR',
'QA',
'RE',
'RO',
'RU',
'RW',
'SH',
'KN',
'LC',
'PM',
'VC',
'WS',
'SM',
'ST',
'SA',
'SN',
'RS',
'SC',
'SL',
'SG',
'SK',
'SI',
'SB',
'SO',
'ZA',
'GS',
'ES',
'LK',
'SD',
'SR',
'SJ',
'SZ',
'SE',
'CH',
'SY',
'TW',
'TJ',
'TZ',
'TH',
'TL',
'TG',
'TK',
'TO',
'TT',
'TN',
'TR',
'TM',
'TC',
'TV',
'UG',
'UA',
'AE',
'GB',
'US',
'UM',
'UY',
'UZ',
'VU',
'VE',
'VN',
'VG',
'VI',
'WF',
'EH',
'YE',
'ZM',
'ZW'
]
}
},
computed: {
invidiousInstance: function () {
return this.$store.getters.getInvidiousInstance
}
},
mounted: function () {
},
methods: {
goToChannel: function () {
console.log('TODO: Handle goToChannel')
}
}
})

54
src/renderer/components/general-settings/general-settings.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<ft-card
class="relative card">
<h3
class="videoTitle"
>
{{ title }}
</h3>
<ft-flex-box>
<ft-toggle-switch
label="Fallback to Non-Preferred Backend on Failure"
/>
<ft-toggle-switch
label="Check for Updates"
/>
</ft-flex-box>
<br>
<ft-flex-box>
<ft-select
placeholder="Preferred API Backend"
:value="backendValues[0]"
:select-names="backendNames"
:select-values="backendValues"
/>
<ft-select
placeholder="Default Theme"
:value="themeValues[0]"
:select-names="themeNames"
:select-values="themeValues"
/>
<ft-select
placeholder="Default Landing Page"
:value="defaultPageValues[0]"
:select-names="defaultPageNames"
:select-values="defaultPageValues"
/>
<ft-select
placeholder="Region for Trending"
:value="regionValues[0]"
:select-names="regionNames"
:select-values="regionValues"
/>
<ft-select
placeholder="Video View Type"
:value="viewTypeValues[0]"
:select-names="viewTypeNames"
:select-values="viewTypeValues"
/>
</ft-flex-box>
</ft-card>
</template>
<script src="./general-settings.js" />
<style scoped src="./general-settings.css" />

9
src/renderer/components/player-settings/player-settings.css Normal file
View File

@ -0,0 +1,9 @@
.relative {
position: relative;
}
.card {
width: 85%;
margin: 0 auto;
margin-bottom: 60px;
}

66
src/renderer/components/player-settings/player-settings.js Normal file
View File

@ -0,0 +1,66 @@
import Vue from 'vue'
import FtCard from '../ft-card/ft-card.vue'
import FtSelect from '../ft-select/ft-select.vue'
import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
export default Vue.extend({
name: 'PlayerSettings',
components: {
'ft-card': FtCard,
'ft-select': FtSelect,
'ft-toggle-switch': FtToggleSwitch,
'ft-flex-box': FtFlexBox
},
data: function () {
return {
title: 'Player Settings',
formatNames: [
'Dash Formats',
'Legacy Formats',
'YouTube Player'
],
formatValues: [
'dash',
'legacy',
'youtube'
],
qualityNames: [
'Auto',
'144p',
'240p',
'360p',
'480p',
'720p',
'1080p',
'1440p',
'4k',
'8k'
],
qualityValues: [
'auto',
'144',
'240',
'360',
'480',
'720',
'1080',
'1440',
'4k',
'8k'
]
}
},
computed: {
invidiousInstance: function () {
return this.$store.getters.getInvidiousInstance
}
},
mounted: function () {
},
methods: {
goToChannel: function () {
console.log('TODO: Handle goToChannel')
}
}
})

51
src/renderer/components/player-settings/player-settings.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<ft-card
class="relative card">
<h3
class="videoTitle"
>
{{ title }}
</h3>
<ft-flex-box>
<ft-toggle-switch
label="Remember History"
/>
<ft-toggle-switch
label="Autoplay Videos"
/>
<ft-toggle-switch
label="Autoplay Playlists"
/>
<ft-toggle-switch
label="Play Next Video"
/>
<ft-toggle-switch
label="Enable Subtitles by Default"
/>
<ft-toggle-switch
label="Force Local Backend for Legacy Formats"
/>
<ft-toggle-switch
label="Proxy Videos Through Invidious"
/>
</ft-flex-box>
<br>
<ft-flex-box>
<ft-select
placeholder="Default Video Format"
:value="formatValues[0]"
:select-names="formatNames"
:select-values="formatValues"
/>
<ft-select
placeholder="Default Quality"
:value="qualityValues[0]"
:select-names="qualityNames"
:select-values="qualityValues"
/>
</ft-flex-box>
</ft-card>
</template>
<script src="./player-settings.js" />
<style scoped src="./player-settings.css" />

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

@ -1,13 +1,22 @@
import Vue from 'vue'
import FtCard from '../../components/ft-card/ft-card.vue'
import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
import GeneralSettings from '../../components/general-settings/general-settings.vue'
import PlayerSettings from '../../components/player-settings/player-settings.vue'
export default Vue.extend({
name: 'Settings',
components: {
'ft-card': FtCard,
'ft-element-list': FtElementList
'ft-element-list': FtElementList,
'general-settings': GeneralSettings,
'player-settings': PlayerSettings
},
mounted: function () {
},
methods: {
handleToggleSwitch: function (event) {
console.log(event)
}
}
})

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

@ -1,8 +1,7 @@
<template>
<div>
<ft-card class="card">
<h3>Settings</h3>
</ft-card>
<general-settings />
<player-settings />
</div>
</template>