diff options
Diffstat (limited to 'src/pages')
-rw-r--r-- | src/pages/options/youtube/invidious.js | 10 | ||||
-rw-r--r-- | src/pages/options/youtube/piped.js | 147 | ||||
-rw-r--r-- | src/pages/options/youtube/youtube.html | 333 | ||||
-rw-r--r-- | src/pages/options/youtube/youtube.js | 8 |
4 files changed, 480 insertions, 18 deletions
diff --git a/src/pages/options/youtube/invidious.js b/src/pages/options/youtube/invidious.js index d8486e7a..b99a3ab3 100644 --- a/src/pages/options/youtube/invidious.js +++ b/src/pages/options/youtube/invidious.js @@ -31,9 +31,9 @@ invidiousContinueElement.addEventListener("change", event => youtubeHelper.setInvidiousContinue(event.target.checked) ); -let invidiousListenElement = document.getElementById("invidious-listen"); -invidiousListenElement.addEventListener("change", - event => youtubeHelper.setInvidiousListen(event.target.checked) +let youtubeListenElement = document.getElementById("invidious-listen"); +youtubeListenElement.addEventListener("change", + event => youtubeHelper.setYoutubeListen(event.target.checked) ); let invidiousSpeedElement = document.getElementById("invidious-speed"); @@ -120,9 +120,9 @@ youtubeHelper.init().then(() => { invidiousVideoLoopElement.value = youtubeHelper.getInvidiousVideoLoop(); invidiousContinueAutoplayElement.value = youtubeHelper.getInvidiousContinueAutoplay(); invidiousContinueElement.value = youtubeHelper.getInvidiousContinue(); - invidiousListenElement.value = youtubeHelper.getInvidiousListen(); + youtubeListenElement.value = youtubeHelper.getYoutubeListen(); invidiousSpeedElement.value = youtubeHelper.getInvidiousSpeed(); - invidiousQualityElement.value = youtubeHelper.getinvidiousQuality(); + invidiousQualityElement.value = youtubeHelper.getInvidiousQuality(); invidiousQualityDashElement.value = youtubeHelper.getInvidiousQualityDash(); invidiousComments0Element.value = youtubeHelper.getInvidiousComments()[0]; invidiousComments1Element.value = youtubeHelper.getInvidiousComments()[1]; diff --git a/src/pages/options/youtube/piped.js b/src/pages/options/youtube/piped.js index c6517966..0425ae79 100644 --- a/src/pages/options/youtube/piped.js +++ b/src/pages/options/youtube/piped.js @@ -1,7 +1,154 @@ import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js"; import commonHelper from "../../../assets/javascripts/helpers/common.js"; +let pipedSponsorblockElement = document.getElementById("piped-sponsorblock"); +pipedSponsorblockElement.addEventListener("change", + event => youtubeHelper.setPipedSponsorblock(event.target.checked) +); + +function selectSkipModify(value, boolean) { + if (boolean) { + if (!selectSkip.includes(value)) selectSkip.push(value); + } + else { + let i = selectSkip.indexOf(value); + if (i > -1) selectSkip.splice(i, 1); + } + youtubeHelper.setPipedSelectedSkip(selectSkip) +} + +let pipedSelectedSkipSponsorElement = document.getElementById("piped-selectedSkip-sponsor"); +pipedSelectedSkipSponsorElement.addEventListener("change", + event => selectSkipModify('sponsor', event.target.checked) +); + +let pipedSelectedSkipIntroElement = document.getElementById("piped-selectedSkip-intro"); +pipedSelectedSkipIntroElement.addEventListener("change", + event => selectSkipModify('intro', event.target.checked) +); + +let pipedSelectedSkipOutroElement = document.getElementById("piped-selectedSkip-outro"); +pipedSelectedSkipOutroElement.addEventListener("change", + event => selectSkipModify('outro', event.target.checked) +); + +let pipedSelectedSkipPreviewElement = document.getElementById("piped-selectedSkip-preview"); +pipedSelectedSkipPreviewElement.addEventListener("change", + event => selectSkipModify('preview', event.target.checked) +); + +let pipedSelectedSkipInteractionElement = document.getElementById("piped-selectedSkip-interaction"); +pipedSelectedSkipInteractionElement.addEventListener("change", + event => selectSkipModify('interaction', event.target.checked) +); + +let pipedSelectedSkipSelfpromoElement = document.getElementById("piped-selectedSkip-selfpromo"); +pipedSelectedSkipSelfpromoElement.addEventListener("change", + event => selectSkipModify('selfpromo', event.target.checked) +); + +let pipedSelectedSkipMusicOfftopicElement = document.getElementById("piped-selectedSkip-music_offtopic"); +pipedSelectedSkipMusicOfftopicElement.addEventListener("change", + event => selectSkipModify('music_offtopic', event.target.checked) +); + +let pipedSelectedSkipPoiHighlightElement = document.getElementById("piped-selectedSkip-poi_highlight"); +pipedSelectedSkipPoiHighlightElement.addEventListener("change", + event => selectSkipModify('poi_highlight', event.target.checked) +); + +let pipedSelectedSkipFillerElement = document.getElementById("piped-selectedSkip-filler"); +pipedSelectedSkipFillerElement.addEventListener("change", + event => selectSkipModify('filler', event.target.checked) +); + +let pipedListenElement = document.getElementById("piped-listen"); +pipedListenElement.addEventListener("change", + event => youtubeHelper.setYoutubeListen(event.target.checked) +); + +let pipedQualityElement = document.getElementById("piped-quality"); +pipedQualityElement.addEventListener("change", + event => youtubeHelper.setPipedQuality(event.target.options[pipedQualityElement.selectedIndex].value) +); + +let pipedBufferGoalElement = document.getElementById("piped-bufferGoal"); +pipedBufferGoalElement.addEventListener("change", + event => youtubeHelper.setPipedBufferGoal(pipedBufferGoalElement.value) +); + +let pipedRegionElement = document.getElementById("piped-region"); +pipedRegionElement.addEventListener("change", + event => youtubeHelper.setPipedRegion(event.target.options[pipedRegionElement.selectedIndex].value) +); + +let pipedHomepageElement = document.getElementById("piped-homepage"); +pipedHomepageElement.addEventListener("change", + event => youtubeHelper.setPipedHomepage(event.target.options[pipedHomepageElement.selectedIndex].value) +); + +let pipedCommentsElement = document.getElementById("piped-comments"); +pipedCommentsElement.addEventListener("change", + event => youtubeHelper.setPipedComments(event.target.checked) +); + +let pipedMinimizeDescriptionElement = document.getElementById("piped-minimizeDescription"); +pipedMinimizeDescriptionElement.addEventListener("change", + event => youtubeHelper.setPipedMinimizeDescription(event.target.checked) +); + +let pipedWatchHistoryElement = document.getElementById("piped-watchHistory"); +pipedWatchHistoryElement.addEventListener("change", + event => youtubeHelper.setPipedWatchHistory(event.target.checked) +); + +let pipedEnabledCodecsElement = document.getElementById("piped-enabledCodecs"); +pipedEnabledCodecsElement.addEventListener("change", + () => { + let result = []; + for (const opt of pipedEnabledCodecsElement.options) + if (opt.selected) result.push(opt.value); + youtubeHelper.setPipedEnabledCodecs(result); + } +); + +let pipedDisableLBRYElement = document.getElementById("piped-disableLBRY"); +pipedDisableLBRYElement.addEventListener("change", + event => youtubeHelper.setPipedDisableLBRY(event.target.checked) +); + +let pipedProxyLBRYElement = document.getElementById("piped-proxyLBRY"); +pipedProxyLBRYElement.addEventListener("change", + event => youtubeHelper.setPipedProxyLBRY(event.target.checked) +); + +let selectSkip = []; youtubeHelper.init().then(() => { + + pipedSponsorblockElement.checked = youtubeHelper.getPipedSponsorblock(); + selectSkip = youtubeHelper.getPipedSelectedSkip(); + pipedSelectedSkipSponsorElement.checked = selectSkip.includes('sponsor'); + pipedSelectedSkipIntroElement.checked = selectSkip.includes('intro'); + pipedSelectedSkipOutroElement.checked = selectSkip.includes('outro'); + pipedSelectedSkipPreviewElement.checked = selectSkip.includes('preview'); + pipedSelectedSkipInteractionElement.checked = selectSkip.includes('interaction'); + pipedSelectedSkipSelfpromoElement.checked = selectSkip.includes('selfpromo'); + pipedSelectedSkipMusicOfftopicElement.checked = selectSkip.includes('music_offtopic'); + pipedSelectedSkipPoiHighlightElement.checked = selectSkip.includes('poi_highlight'); + pipedSelectedSkipFillerElement.checked = selectSkip.includes('filler'); + pipedListenElement.checked = youtubeHelper.getYoutubeListen(); + pipedQualityElement.value = youtubeHelper.getPipedQuality(); + pipedBufferGoalElement.value = youtubeHelper.getPipedBufferGoal(); + pipedRegionElement.value = youtubeHelper.getPipedRegion(); + pipedHomepageElement.value = youtubeHelper.getPipedHomepage(); + pipedCommentsElement.checked = youtubeHelper.getPipedComments(); + pipedMinimizeDescriptionElement.checked = youtubeHelper.getPipedMinimizeDescription(); + pipedWatchHistoryElement.checked = youtubeHelper.getPipedWatchHistory(); + pipedEnabledCodecsElement.value = youtubeHelper.getPipedEnabledCodecs(); + pipedDisableLBRYElement.checked = youtubeHelper.getPipedDisableLBRY(); + pipedProxyLBRYElement.checked = youtubeHelper.getPipedProxyLBRY(); + + commonHelper.processDefaultCustomInstances( 'piped', 'normal', diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html index ce4ebf50..61350fc0 100644 --- a/src/pages/options/youtube/youtube.html +++ b/src/pages/options/youtube/youtube.html @@ -154,8 +154,6 @@ <input id="bypass-watch-on-youtube" type="checkbox" /> </div> - <hr> - <div class="some-block option-block"> <h4>Enable Custom Settings (will use cookies and localStorage)</h4> <input id="enable-youtube-custom-settings" type="checkbox" /> @@ -163,6 +161,8 @@ <div class="custom-settings"> + <hr> + <div class="some-block option-block"> <h4>Autoplay Video</h4> <input id="invidious-autoplay" type="checkbox" /> @@ -177,9 +177,9 @@ </div> + <div id="invidious"> - <div id="invidious"> <div class="custom-settings"> <div class="some-block option-block"> <h4>Player Style</h4> @@ -704,7 +704,7 @@ <hr> <div id="invidious-normal"> - + <div class="some-block option-block"> <h4>Default Instances</h4> </div> @@ -757,8 +757,328 @@ </div> <div id="piped"> - <hr> + <div class="custom-settings"> + + <div class="some-block option-block"> + <h4>Enable Sponsorblock</h4> + <input id="piped-sponsorblock" type="checkbox" /> + </div> + + <div class="some-block option-block"> + <h4>Skip Sponsors</h4> + <input id="piped-selectedSkip-sponsor" type="checkbox" /> + </div> + + <div class="some-block option-block"> + <h4>Skip Intermission/Intro Animation</h4> + <input id="piped-selectedSkip-intro" type="checkbox" /> + </div> + + <div class="some-block option-block"> + <h4>Skip Endcards/Credits</h4> + <input id="piped-selectedSkip-outro" type="checkbox" /> + </div> + + <div class="some-block option-block"> + <h4>Skip Preview/Recap</h4> + <input id="piped-selectedSkip-preview" type="checkbox" /> + </div> + + <div class="some-block option-block"> + <h4>Skip Interaction Reminder (Subscribe)</h4> + <input id="piped-selectedSkip-interaction" type="checkbox" /> + </div> + + <div class="some-block option-block"> + <h4>Skip Unpaid/Self Promotion</h4> + <input id="piped-selectedSkip-selfpromo" type="checkbox" /> + </div> + + <div class="some-block option-block"> + <h4>Skip Music: Non-Music Section</h4> + <input id="piped-selectedSkip-music_offtopic" type="checkbox" /> + </div> + + <div class="some-block option-block"> + <h4>Skip Highlight</h4> + <input id="piped-selectedSkip-poi_highlight" type="checkbox" /> + </div> + + <div class="some-block option-block"> + <h4>Skip Filler Tangent</h4> + <input id="piped-selectedSkip-filler" type="checkbox" /> + </div> + + <div class="some-block option-block"> + <h4>Audio Only</h4> + <input id="piped-listen" type="checkbox" /> + </div> + + <div class="some-block option-block"> + <h4>Default Quality</h4> + <select id="piped-quality"> + <option value="0">Auto</option> + <option value="144">144p</option> + <option value="240">240p</option> + <option value="360">360p</option> + <option value="480">480p</option> + <option value="720">720p</option> + <option value="1080">1080p</option> + <option value="1440">1440p</option> + <option value="2160">2160p</option> + <option value="4320">4320p</option> + </select> + </div> + + <div class="some-block option-block"> + <h4>Buffering Goal (in seconds)</h4> + <input id="piped-bufferGoal" type="number" min="0" /> + </div> + + <div class="some-block option-block"> + <h4>Country Selection</h4> + <select id="piped-region"> + <option value="AF">Afghanistan</option> + <option value="AL">Albania</option> + <option value="DZ">Algeria</option> + <option value="AD">Andorra</option> + <option value="AO">Angola</option> + <option value="AG">Antigua and Barbuda</option> + <option value="AR">Argentina</option> + <option value="AM">Armenia</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="BT">Bhutan</option> + <option value="BO">Bolivia (Plurinational State of)</option> + <option value="BA">Bosnia and Herzegovina</option> + <option value="BW">Botswana</option> + <option value="BR">Brazil</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="CV">Cabo Verde</option> + <option value="KH">Cambodia</option> + <option value="CM">Cameroon</option> + <option value="CA">Canada</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="CO">Colombia</option> + <option value="KM">Comoros</option> + <option value="CG">Congo</option> + <option value="CD">Congo, Democratic Republic of the</option> + <option value="CR">Costa Rica</option> + <option value="CI">Côte d'Ivoire</option> + <option value="HR">Croatia</option> + <option value="CU">Cuba</option> + <option value="CY">Cyprus</option> + <option value="CZ">Czechia</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="SZ">Eswatini</option> + <option value="ET">Ethiopia</option> + <option value="FJ">Fiji</option> + <option value="FI">Finland</option> + <option value="FR">France</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="GR">Greece</option> + <option value="GD">Grenada</option> + <option value="GT">Guatemala</option> + <option value="GN">Guinea</option> + <option value="GW">Guinea-Bissau</option> + <option value="GY">Guyana</option> + <option value="HT">Haiti</option> + <option value="HN">Honduras</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</option> + <option value="LV">Latvia</option> + <option value="LB">Lebanon</option> + <option value="LS">Lesotho</option> + <option value="LR">Liberia</option> + <option value="LY">Libya</option> + <option value="LI">Liechtenstein</option> + <option value="LT">Lithuania</option> + <option value="LU">Luxembourg</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="MR">Mauritania</option> + <option value="MU">Mauritius</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="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="NZ">New Zealand</option> + <option value="NI">Nicaragua</option> + <option value="NE">Niger</option> + <option value="NG">Nigeria</option> + <option value="MK">North Macedonia</option> + <option value="NO">Norway</option> + <option value="OM">Oman</option> + <option value="PK">Pakistan</option> + <option value="PW">Palau</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="PL">Poland</option> + <option value="PT">Portugal</option> + <option value="QA">Qatar</option> + <option value="RO">Romania</option> + <option value="RU">Russian Federation</option> + <option value="RW">Rwanda</option> + <option value="KN">Saint Kitts and Nevis</option> + <option value="LC">Saint Lucia</option> + <option value="VC">Saint Vincent and the Grenadines</option> + <option value="WS">Samoa</option> + <option value="SM">San Marino</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="SS">South Sudan</option> + <option value="ES">Spain</option> + <option value="LK">Sri Lanka</option> + <option value="SD">Sudan</option> + <option value="SR">Suriname</option> + <option value="SE">Sweden</option> + <option value="CH">Switzerland</option> + <option value="SY">Syrian Arab Republic</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="TO">Tonga</option> + <option value="TT">Trinidad and Tobago</option> + <option value="TN">Tunisia</option> + <option value="TR">Turkey</option> + <option value="TM">Turkmenistan</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 of Great Britain and Northern Ireland</option> + <option value="US">United States of America</option> + <option value="UY">Uruguay</option> + <option value="UZ">Uzbekistan</option> + <option value="VU">Vanuatu</option> + <option value="VE">Venezuela (Bolivarian Republic of)</option> + <option value="VN">Viet Nam</option> + <option value="YE">Yemen</option> + <option value="ZM">Zambia</option> + <option value="ZW">Zimbabwe</option> + </select> + </div> + + <div class="some-block option-block"> + <h4>Default Homepage</h4> + <select id="piped-homepage"> + <option value="trending">Trending</option> + <option value="feed">Feed</option> + </select> + </div> + + <div class="some-block option-block"> + <h4>Show Comments</h4> + <input id="piped-comments" type="checkbox" /> + </div> + + <div class="some-block option-block"> + <h4>Minimize Description by default</h4> + <input id="piped-minimizeDescription" type="checkbox" /> + </div> + + <div class="some-block option-block"> + <h4>Store Watch History</h4> + <input id="piped-watchHistory" type="checkbox" /> + </div> + + <div class="some-block option-block"> + <h4>Enabled Codecs (Multiple)</h4> + <select id="piped-enabledCodecs" multiple> + <option value="av1">AV1</option> + <option value="vp9">VP9</option> + <option value="avc">AVC (h.264)</option> + </select> + </div> + + <div class="some-block option-block"> + <h4>Disable LBRY for Streaming</h4> + <input id="piped-disableLBRY" type="checkbox" /> + </div> + + <div class="some-block option-block"> + <h4>Enable Proxy for LBRY</h4> + <input id="piped-proxyLBRY" type="checkbox" /> + </div> + + </div> + <hr> <div id="piped-normal"> <div class="some-block option-block"> <h4>Default Instances</h4> @@ -808,6 +1128,7 @@ </form> <div class="checklist" id="piped-tor-custom-checklist"></div> </div> + <hr> </div> <div id="pipedMaterial"> @@ -862,8 +1183,6 @@ </div> </div> - <hr> - <div class="some-block option-block"> <h4>Embed Exceptions</h4> </div> diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js index 97bfd44a..e3b8c5e7 100644 --- a/src/pages/options/youtube/youtube.js +++ b/src/pages/options/youtube/youtube.js @@ -1,7 +1,5 @@ import youtubeHelper from "../../../assets/javascripts/helpers/youtube/youtube.js"; - - let youtubeFrontendElement = document.getElementById("youtube-frontend"); let invidiousDivElement = document.getElementById("invidious"); let pipedDivElement = document.getElementById("piped"); @@ -17,10 +15,8 @@ function changeFrontendsSettings() { console.log("customSettingsDivElement", customSettingsDivElement[0].style.display); if (enableYoutubeCustomSettingsElement.checked) for (const item of customSettingsDivElement) item.style.display = 'block'; - else { - console.log("setting it to none"); + else for (const item of customSettingsDivElement) item.style.display = 'none'; - } if (frontend == 'invidious') { invidiousPipedPipedMaterialDivElement.style.display = 'block' @@ -70,6 +66,7 @@ function changeYoutubeEmbedFrontendsSettings(youtubeEmbedFrontend) { invidiousDivElement.style.display = 'none'; } } + youtubeFrontendElement.addEventListener("change", event => { let frontend = event.target.options[youtubeFrontendElement.selectedIndex].value @@ -100,7 +97,6 @@ enableYoutubeCustomSettingsElement.addEventListener("change", } ); - let volumeElement = document.getElementById("invidious-volume"); let volumeValueElement = document.getElementById("volume-value"); volumeElement.addEventListener("input", |