FreeTube/src/templates/settings.html

432 lines
23 KiB
HTML

<div v-if="seen">
<div class='card'>
<h2>General Settings</h2>
<input type="checkbox" id="themeSwitch" name="set-name" class="switch-input" onchange='toggleTheme(this); showSettingsConfirm()' :checked='useTheme'>
<label for="themeSwitch" class="switch-label">Use Dark Theme</label>
<input type="checkbox" id="updatesSwitch" onchange='showSettingsConfirm()' name="set-name" class="switch-input" :checked='updates'>
<label for="updatesSwitch" class="switch-label">Check for Updates</label>
<input type="checkbox" id="distractionFreeModeSwitch" onchange='showSettingsConfirm()' name="set-name" class="switch-input" :checked='distractionFreeMode'>
<label for="distractionFreeModeSwitch" class="switch-label">Distraction Free Mode</label>
<br />
<br />
<div class="select center">
<select id='pageSelect' class="select-text" onchange='showSettingsConfirm()' required>
<option value="subscriptions" selected>Subcriptions</option>
<option value="trending">Trending</option>
<option value="popular">Most Popular</option>
<option value="favorites">Favorites</option>
<option value="history">History</option>
</select>
<span class="select-highlight"></span>
<span class="select-bar"></span>
<label class="select-label">Default Landing Page</label>
</div>
<div class="select center">
<select id='regionSelect' class="select-text" onchange='showSettingsConfirm()' required>
<option value='AF'>Afghanistan</option>
<option value='AL'>Albania</option>
<option value='DZ'>Algeria</option>
<option value='AS'>American Samoa</option>
<option value='AD'>Andorra</option>
<option value='AO'>Angola</option>
<option value='AQ'>Antarctica</option>
<option value='AG'>Antigua And Barbuda</option>
<option value='AR'>Argentina</option>
<option value='AM'>Armenia</option>
<option value='AW'>Aruba</option>
<option value='AU'>Australia</option>
<option value='AT'>Austria</option>
<option value='AZ'>Azerbaijan</option>
<option value='BS'>Bahamas</option>
<option value='BH'>Bahrain</option>
<option value='BD'>Bangladesh</option>
<option value='BB'>Barbados</option>
<option value='BY'>Belarus</option>
<option value='BE'>Belgium</option>
<option value='BZ'>Belize</option>
<option value='BJ'>Benin</option>
<option value='BM'>Bermuda</option>
<option value='BT'>Bhutan</option>
<option value='BO'>Bolivia</option>
<option value='BA'>Bosnia And Herzegovina</option>
<option value='BW'>Botswana</option>
<option value='BV'>Bouvet Island</option>
<option value='BR'>Brazil</option>
<option value='IO'>British Indian Ocean Territory</option>
<option value='BN'>Brunei Darussalam</option>
<option value='BG'>Bulgaria</option>
<option value='BF'>Burkina Faso</option>
<option value='BI'>Burundi</option>
<option value='KH'>Cambodia</option>
<option value='CM'>Cameroon</option>
<option value='CA'>Canada</option>
<option value='CV'>Cape Verde</option>
<option value='KY'>Cayman Islands</option>
<option value='CF'>Central African Republic</option>
<option value='TD'>Chad</option>
<option value='CL'>Chile</option>
<option value='CN'>China</option>
<option value='CX'>Christmas Island</option>
<option value='CC'>Cocos (Keeling) Islands</option>
<option value='CO'>Colombia</option>
<option value='KM'>Comoros</option>
<option value='CG'>Congo</option>
<option value='CD'>Congo, The Democratic Republic Of The</option>
<option value='CK'>Cook Islands</option>
<option value='CR'>Costa Rica</option>
<option value='CI'>Cote D'Ivoire</option>
<option value='HR'>Croatia</option>
<option value='CU'>Cuba</option>
<option value='CY'>Cyprus</option>
<option value='CZ'>Czech Republic</option>
<option value='DK'>Denmark</option>
<option value='DJ'>Djibouti</option>
<option value='DM'>Dominica</option>
<option value='DO'>Dominican Republic</option>
<option value='EC'>Ecuador</option>
<option value='EG'>Egypt</option>
<option value='SV'>El Salvador</option>
<option value='GQ'>Equatorial Guinea</option>
<option value='ER'>Eritrea</option>
<option value='EE'>Estonia</option>
<option value='ET'>Ethiopia</option>
<option value='FK'>Falkland Islands (Malvinas)</option>
<option value='FO'>Faroe Islands</option>
<option value='FJ'>Fiji</option>
<option value='FI'>Finland</option>
<option value='FR'>France</option>
<option value='GF'>French Guiana</option>
<option value='PF'>French Polynesia</option>
<option value='TF'>French Southern Territories</option>
<option value='GA'>Gabon</option>
<option value='GM'>Gambia</option>
<option value='GE'>Georgia</option>
<option value='DE'>Germany</option>
<option value='GH'>Ghana</option>
<option value='GI'>Gibraltar</option>
<option value='GR'>Greece</option>
<option value='GL'>Greenland</option>
<option value='GD'>Grenada</option>
<option value='GP'>Guadeloupe</option>
<option value='GU'>Guam</option>
<option value='GT'>Guatamala</option>
<option value='GN'>Guinea</option>
<option value='GW'>Guinea-Bissau</option>
<option value='GY'>Guyana</option>
<option value='HT'>Haiti</option>
<option value='HM'>Heard Island And McDonald Islands</option>
<option value='HN'>Honduras</option>
<option value='HK'>Hong Kong</option>
<option value='HU'>Hungary</option>
<option value='IS'>Iceland</option>
<option value='IN'>India</option>
<option value='ID'>Indonesia</option>
<option value='IR'>Iran, Islamic Republic Of</option>
<option value='IQ'>Iraq</option>
<option value='IE'>Ireland</option>
<option value='IL'>Israel</option>
<option value='IT'>Italy</option>
<option value='JM'>Jamaica</option>
<option value='JP'>Japan</option>
<option value='JO'>Jordan</option>
<option value='KZ'>Kazakhstan</option>
<option value='KE'>Kenya</option>
<option value='KI'>Kiribati</option>
<option value='KP'>Korea, Democratic People's Republic Of</option>
<option value='KR'>Korea, Republic Of</option>
<option value='KW'>Kuwait</option>
<option value='KG'>Kyrgyzstan</option>
<option value='LA'>Lao People's Democratic Republic (LAOS)</option>
<option value='LV'>Latvia</option>
<option value='LB'>Lebonon</option>
<option value='LS'>Lesotho</option>
<option value='LR'>Liberia</option>
<option value='LY'>Libyan Arab Jamahiriya</option>
<option value='LI'>Liechtenstein</option>
<option value='LT'>Lithuania</option>
<option value='LU'>Luxembourg</option>
<option value='MO'>Macao</option>
<option value='MK'>Macedonia, The Former Yugoslav Republic Of</option>
<option value='MG'>Madagascar</option>
<option value='MW'>Malawi</option>
<option value='MY'>Malaysia</option>
<option value='MV'>Maldives</option>
<option value='ML'>Mali</option>
<option value='MT'>Malta</option>
<option value='MH'>Marshall Islands</option>
<option value='MQ'>Martinique</option>
<option value='MR'>Mauritania</option>
<option value='MU'>Mauritius</option>
<option value='YT'>Mayotte</option>
<option value='MX'>Mexico</option>
<option value='FM'>Micronesia, Federated States Of</option>
<option value='MD'>Moldova, Republic Of</option>
<option value='MC'>Monaco</option>
<option value='MN'>Mongolia</option>
<option value='ME'>Montenegro</option>
<option value='MS'>Montserrat</option>
<option value='MA'>Morocco</option>
<option value='MZ'>Mozambique</option>
<option value='MM'>Myanmar</option>
<option value='NA'>Namibia</option>
<option value='NR'>Nauru</option>
<option value='NP'>Nepal</option>
<option value='NL'>Netherlands</option>
<option value='AN'>Netherlands Antilles</option>
<option value='NC'>New Caledonia</option>
<option value='NZ'>New Zealand</option>
<option value='NI'>Nicaragua</option>
<option value='NE'>Niger</option>
<option value='NG'>Nigeria</option>
<option value='NU'>Niue</option>
<option value='NF'>Norfolk Island</option>
<option value='MP'>Northern Mariana Islands</option>
<option value='NO'>Norway</option>
<option value='OM'>Oman</option>
<option value='PK'>Pakistan</option>
<option value='PW'>Palau</option>
<option value='PS'>Palestinian Territory, Occupied</option>
<option value='PA'>Panama</option>
<option value='PG'>Papua New Guinea</option>
<option value='PY'>Paraguay</option>
<option value='PE'>Peru</option>
<option value='PH'>Philippines</option>
<option value='PN'>Pitcair</option>
<option value='PL'>Poland</option>
<option value='PT'>Portugal</option>
<option value='PR'>Puerto Rico</option>
<option value='QA'>Qatar</option>
<option value='RE'>Reunion</option>
<option value='RO'>Romania</option>
<option value='RU'>Russian Federation</option>
<option value='RW'>Rwanda</option>
<option value='SH'>Saint Helena</option>
<option value='KN'>Saint Kitts And Nevis</option>
<option value='LC'>Saint Lucia</option>
<option value='PM'>Saint Pierre And Miquelon</option>
<option value='VC'>Saint Vincent And The Grenadines</option>
<option value='WS'>Samoa</option>
<option value='SM'>San Marina</option>
<option value='ST'>Sao Tome And Principe</option>
<option value='SA'>Saudi Arabia</option>
<option value='SN'>Senegal</option>
<option value='RS'>Serbia</option>
<option value='SC'>Seychelles</option>
<option value='SL'>Sierra Leone</option>
<option value='SG'>Singapore</option>
<option value='SK'>Slovakia</option>
<option value='SI'>Slovenia</option>
<option value='SB'>Solomon Islands</option>
<option value='SO'>Somalia</option>
<option value='ZA'>South Africa</option>
<option value='GS'>South Georgia And The South Sandwich Islands</option>
<option value='ES'>Spain</option>
<option value='LK'>Sri Lanka</option>
<option value='SD'>Sudan</option>
<option value='SR'>Suriname</option>
<option value='SJ'>Svalbard And Jan Mayen</option>
<option value='SZ'>Swaziland</option>
<option value='SE'>Sweden</option>
<option value='CH'>Switzerland</option>
<option value='SY'>Syrian Arab Republic</option>
<option value='TW'>Taiwan</option>
<option value='TJ'>Tajikistan</option>
<option value='TZ'>Tanzania, United Republic Of</option>
<option value='TH'>Thailand</option>
<option value='TL'>Timor-Leste</option>
<option value='TG'>Togo</option>
<option value='TK'>Tokelau</option>
<option value='TO'>Tonga</option>
<option value='TT'>Trinidad And Tobago</option>
<option value='TN'>Tunisia</option>
<option value='TR'>Turkey</option>
<option value='TM'>Turkenistan</option>
<option value='TC'>Turks And Caicos Islands</option>
<option value='TV'>Tuvalu</option>
<option value='UG'>Uganda</option>
<option value='UA'>Ukraine</option>
<option value='AE'>United Arab Emirates</option>
<option value='GB'>United Kingdom</option>
<option value='US'>United States</option>
<option value='UM'>United States Minor Outlying Islands</option>
<option value='UY'>Uruguay</option>
<option value='UZ'>Uzbekistan</option>
<option value='VU'>Vanuatu</option>
<option value='VE'>Venezuela</option>
<option value='VN'>Viet Nam</option>
<option value='VG'>Virgin Islands, British</option>
<option value='VI'>Virgin Islands, U.S.</option>
<option value='WF'>Wallis And Futuna</option>
<option value='EH'>Western Sahara</option>
<option value='YE'>Yemen</option>
<option value='ZM'>Zambia</option>
<option value='ZW'>Zimbabwe</option>
</select>
<span class="select-highlight"></span>
<span class="select-bar"></span>
<label class="select-label">Region for Trending</label>
</div>
<div class="select center">
<select id='videoViewSelect' class="select-text" onchange='showSettingsConfirm()' required>
<option value="grid" selected>Grid</option>
<option value="list">List</option>
</select>
<span class="select-highlight"></span>
<span class="select-bar"></span>
<label class="select-label">Video View Type</label>
</div>
<br />
<br />
</div>
<div class='card'>
<h2>Player Settings</h2>
<input type="checkbox" id="historySwitch" onchange='showSettingsConfirm()' name="set-name" class="switch-input" :checked='history'>
<label for="historySwitch" class="switch-label">Remember History</label>
<input type="checkbox" id="autoplaySwitch" onchange='showSettingsConfirm()' name="set-name" class="switch-input" :checked='autoplay'>
<label for="autoplaySwitch" class="switch-label">Autoplay Videos</label>
<input type="checkbox" id="autoplayPlaylistsSwitch" onchange='showSettingsConfirm()' name="set-name" class="switch-input" :checked='autoplayPlaylists'>
<label for="autoplayPlaylistsSwitch" class="switch-label">Autoplay Playlists</label>
<input type="checkbox" id="playNextVideoSwitch" onchange='showSettingsConfirm()' name="set-name" class="switch-input" :checked='playNextVideo'>
<label for="playNextVideoSwitch" class="switch-label">Play Next Video</label>
<input type="checkbox" id="subtitlesSwitch" onchange='showSettingsConfirm()' name="set-name" class="switch-input" :checked='subtitles'>
<label for="subtitlesSwitch" class="switch-label">Turn on Subtitles by Default</label>
<input type="checkbox" id="localSwitch" onchange='showSettingsConfirm()' name="set-name" class="switch-input" :checked='localScrape'>
<label for="localSwitch" class="switch-label">Grab videos locally</label>
<input type="checkbox" id="proxyVideosSwitch" onchange='showSettingsConfirm()' name="set-name" class="switch-input" :checked='proxyVideos'>
<label for="proxyVideosSwitch" class="switch-label">Proxy Videos Through Invidious</label>
<br />
<label class="settingsSlider pure-material-slider">
<input id='volumeSelect' onchange='showSettingsConfirm()' type="range" min="0" max="1" step="0.01" v-model.number="defaultVolume">
<span>Default Volume - <span>{{volumeHtml}}</span>%</span>
</label>
<label class="settingsSlider pure-material-slider">
<input id='rateSelect' onchange='showSettingsConfirm()' type="range" min="0.25" max="2" step="0.25" v-model.number="defaultVideoSpeed">
<span>Default Video Speed - <span>{{defaultVideoSpeed}}</span>x</span>
</label>
<br />
<br />
<div class="select center">
<select id='playerSelect' class="select-text" onchange='showSettingsConfirm()' required>
<option value="dash" selected>Dash Player</option>
<option value="legacy">Legacy Player</option>
<option value="embed">YouTube Embedded Player</option>
</select>
<span class="select-highlight"></span>
<span class="select-bar"></span>
<label class="select-label">Default Video Player</label>
</div>
<div class="select center">
<select id='qualitySelect' class="select-text" onchange='showSettingsConfirm()' required>
<option value="144">144p</option>
<option value="240">240p</option>
<option value="360">360p</option>
<option value="480">480p</option>
<option value="720" selected>720p</option>
<option value="1080">1080p</option>
<option value="1440">1440p</option>
<option value="4k">4k</option>
<option value="Auto">Auto</option>
</select>
<span class="select-highlight"></span>
<span class="select-bar"></span>
<label class="select-label">Default Video Quality</label>
</div>
<br />
<br />
</div>
<div class='card'>
<h2>Subscription Settings</h2>
<input type="checkbox" id="hideWatchedSubsSwitch" onchange='showSettingsConfirm()' name="set-name" class="switch-input" :checked='hideWatchedSubs'>
<label for="hideWatchedSubsSwitch" class="switch-label">Hide Videos on Watch</label>
<br />
<br />
<div class="select center">
<select id="exportSelect" class="select-text" required>
<option>FreeTube</option>
<option>NewPipe</option>
<option>OPML</option>
</select>
<span class="select-highlight"></span>
<span class="select-bar"></span>
<label class="select-label">Subscriptions Export Format</label>
</div>
<div class='center'>
<div onclick='hideViews(); subscriptionManagerView.seen = true;' class='settingsButton'>
MANAGE SUBSCRIPTIONS
</div>
<div onclick='importSubscriptions()' class='settingsButton'>
IMPORT SUBSCRIPTIONS
</div>
<div onclick='exportSubscriptions();' class='settingsButton'>
EXPORT SUBSCRIPTIONS
</div>
</div>
<a href='https://github.com/FreeTubeApp/FreeTube/wiki/Importing-Your-YouTube-Subscriptions'><p>
How do I import my subscriptions?
</p></a>
</div>
<div class="card">
<h2>Advanced Settings</h2>
<input type="checkbox" id="debugSwitch" onchange='showSettingsConfirm()' name="set-name" class="switch-input" :checked='debugMode'>
<label for="debugSwitch" class="switch-label">Enable Debug Mode (Prints data to the console)</label>
<div class="input-text-settings">
<label for="proxyAddress">Proxy Address (Example: SOCKS5://127.0.0.1:9050 ): </label>
<input type="text" id="proxyAddress" name="set-name" v-model="proxyAddress" onkeydown='showSettingsConfirm()' />
</div>
<div id="ipInfoSettings" v-if="checkProxyResult">
<h4>Your Info:</h4>
<p>Ip: {{checkProxyResult.ip}}</p>
<p>Country: {{checkProxyResult.country}}</p>
<p>Region: {{checkProxyResult.region}}</p>
<p>City: {{checkProxyResult.city || "N/A"}}</p>
<p>Hostname: {{checkProxyResult.hostname || "N/A"}}</p>
</div>
<p>Clicking "TEST PROXY" button will send a request to https://ipinfo.io/json</p>
<input type="checkbox" id="torSwitch" onchange='showSettingsConfirm()' name="set-name" class="switch-input" :checked='useTor'>
<label for="torSwitch" class="switch-label">Use Tor / Proxy for API calls</label>
<div v-on:click='checkProxy' class='center settingsButton'>
{{proxyTestButtonText}}
</div>
<br />
<br />
<br />
<br />
<div class='center'>
<div class="input-text-settings">
<label for="invidiousInstance">Current Invidious Instance (Defaults to https://invidio.us)</label>
<input type="text" onkeydown='showSettingsConfirm()' id="invidiousInstance" name="set-name" v-model="invidiousInstance" />
<a href='https://github.com/omarroth/invidious/wiki/Invidious-Instances'>
<p>See Public Instances</p>
</a>
</div>
</div>
<br />
<br />
<div class='center'>
<div onclick='confirmFunction("Are you sure you want to delete your history?", clearFile, "history")' style='color: #f44336' class='settingsButton'>
CLEAR HISTORY
</div>
<div onclick='confirmFunction("Are you sure you want to remove all saved videos?", clearFile, "saved")' style='color: #f44336' class='settingsButton'>
CLEAR FAVORITED VIDEOS
</div>
<div onclick='confirmFunction("Are you sure you want to remove all subscriptions?", clearFile, "subscriptions")' style='color: #f44336' class='settingsButton'>
CLEAR SUBSCRIPTIONS
</div>
</div>
</div>
<br />
<br />
<br />
<br />
<div id='confirmSettings'>
<span onclick='updateSettings()' class='settingsSubmit'>
SAVE SETTINGS
</span>
<p>You must save your changes in order for new settings to take effect.</p>
</div>
</div>
</div>