Start progress on Settings page
This commit is contained in:
Preston
parent
ed8a74625c
commit
d4314ee7da
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -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" />
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 85%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
@ -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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -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" />
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
width: 85%;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
@ -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')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -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" />
|
||||||
|
|
@ -1,13 +1,22 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import FtCard from '../../components/ft-card/ft-card.vue'
|
import FtCard from '../../components/ft-card/ft-card.vue'
|
||||||
import FtElementList from '../../components/ft-element-list/ft-element-list.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({
|
export default Vue.extend({
|
||||||
name: 'Settings',
|
name: 'Settings',
|
||||||
components: {
|
components: {
|
||||||
'ft-card': FtCard,
|
'ft-card': FtCard,
|
||||||
'ft-element-list': FtElementList
|
'ft-element-list': FtElementList,
|
||||||
|
'general-settings': GeneralSettings,
|
||||||
|
'player-settings': PlayerSettings
|
||||||
},
|
},
|
||||||
mounted: function () {
|
mounted: function () {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleToggleSwitch: function (event) {
|
||||||
|
console.log(event)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<ft-card class="card">
|
<general-settings />
|
||||||
<h3>Settings</h3>
|
<player-settings />
|
||||||
</ft-card>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue