Piped/src/components/Preferences.vue

300 lines
12 KiB
Vue
Raw Normal View History

2020-11-17 05:15:35 +00:00
<template>
<div class="uk-flex uk-flex-between uk-flex-middle">
<button class="uk-button uk-button-text" @click="$router.go(-1) || $router.push('/')">
<font-awesome-icon icon="chevron-left" /> &nbsp;Back
</button>
<span><h1 class="uk-text-bold uk-text-center" v-t="'titles.preferences'"/></span>
<span />
</div>
2020-11-22 04:34:27 +00:00
<hr />
2021-02-25 14:40:40 +00:00
<h2>SponsorBlock</h2>
<p>Uses the API from <a href="https://sponsor.ajay.app/">sponsor.ajay.app</a></p>
2021-02-25 14:40:40 +00:00
<b>Enable Sponsorblock</b>
<br />
<input class="uk-checkbox" v-model="sponsorBlock" @change="onChange($event)" type="checkbox" />
2021-02-25 15:18:59 +00:00
<br />
<b>Skip Sponsors</b>
<br />
<input class="uk-checkbox" v-model="skipSponsor" @change="onChange($event)" type="checkbox" />
2021-02-25 15:18:59 +00:00
<br />
<b>Skip Intermission/Intro Animation</b>
<br />
<input class="uk-checkbox" v-model="skipIntro" @change="onChange($event)" type="checkbox" />
2021-02-25 15:18:59 +00:00
<br />
<b>Skip Endcards/Credits</b>
<br />
<input class="uk-checkbox" v-model="skipOutro" @change="onChange($event)" type="checkbox" />
2021-02-25 15:18:59 +00:00
<br />
<b>Skip Preview/Recap</b>
<br />
<input class="uk-checkbox" v-model="skipPreview" @change="onChange($event)" type="checkbox" />
<br />
2021-02-25 15:18:59 +00:00
<b>Skip Interaction Reminder (Subscribe)</b>
<br />
<input class="uk-checkbox" v-model="skipInteraction" @change="onChange($event)" type="checkbox" />
2021-02-25 15:18:59 +00:00
<br />
<b>Skip Unpaid/Self Promotion</b>
<br />
<input class="uk-checkbox" v-model="skipSelfPromo" @change="onChange($event)" type="checkbox" />
2021-02-25 15:18:59 +00:00
<br />
<b>Skip Music: Non-Music Section</b>
<br />
<input class="uk-checkbox" v-model="skipMusicOffTopic" @change="onChange($event)" type="checkbox" />
<br />
<b>Theme</b>
<br />
<select class="uk-select uk-width-auto" v-model="selectedTheme" @change="onChange($event)">
2021-07-05 18:33:00 +00:00
<option value="auto">Auto</option>
<option value="dark">Dark</option>
<option value="light">Light</option>
</select>
<br />
<b>Autoplay Video</b>
<br />
<input class="uk-checkbox" v-model="autoPlayVideo" @change="onChange($event)" type="checkbox" />
2021-06-07 20:35:45 +00:00
<br />
<b>Audio Only</b>
<br />
<input class="uk-checkbox" v-model="listen" @change="onChange($event)" type="checkbox" />
2021-06-21 20:03:11 +00:00
<br />
<b>Default Quality</b>
<br />
<select class="uk-select uk-width-auto" v-model="defaultQuality" @change="onChange($event)">
<option value="0">Auto</option>
<option :key="resolution" v-for="resolution in resolutions" :value="resolution">{{ resolution }}p</option>
2021-06-21 20:03:11 +00:00
</select>
2021-06-22 10:54:20 +00:00
<br />
<b>Buffering Goal (in seconds)</b>
2021-06-22 10:54:20 +00:00
<br />
<input class="uk-input uk-width-auto" v-model="bufferingGoal" @change="onChange($event)" type="text" />
<br />
<b>Country Selection</b>
<br />
<select class="uk-select uk-width-auto" v-model="country" @change="onChange($event)">
<option :key="country.code" v-for="country in countryMap" :value="country.code">{{ country.name }}</option>
</select>
<br />
<b>Default Homepage</b>
<br />
<select class="uk-select uk-width-auto" v-model="defaultHomepage" @change="onChange($event)">
<option value="trending">Trending</option>
<option value="feed">Feed</option>
</select>
<br />
<b>Show Comments</b>
<br />
<input class="uk-checkbox" v-model="showComments" @change="onChange($event)" type="checkbox" />
<br />
<b>Minimize Description by default</b>
<br />
<input class="uk-checkbox" v-model="minimizeDescription" @change="onChange($event)" type="checkbox" />
<br />
<b>Store Watch History</b>
<br />
<input class="uk-checkbox" v-model="watchHistory" @change="onChange($event)" type="checkbox" />
<br />
<b>Language Selection</b>
<br />
<select class="uk-select uk-width-auto" v-model="selectedLanguage" @change="onChange($event)">
<option :key="language.code" v-for="language in languages" :value="language.code">{{ language.name }}</option>
</select>
2020-11-22 04:34:27 +00:00
<h2>Instances List</h2>
2020-11-17 05:15:35 +00:00
<table class="uk-table">
<thead>
<tr>
<th>Instance Name</th>
<th>Instance Locations</th>
<th>Has CDN?</th>
2020-11-30 06:39:40 +00:00
<th>SSL Score</th>
2020-11-17 05:15:35 +00:00
</tr>
</thead>
<tbody v-bind:key="instance.name" v-for="instance in instances">
<tr>
<td>{{ instance.name }}</td>
<td>{{ instance.locations }}</td>
<td>{{ instance.cdn }}</td>
2020-11-30 06:39:40 +00:00
<td>
<a :href="sslScore(instance.apiurl)" target="_blank">Click Here</a>
2020-11-30 06:39:40 +00:00
</td>
2020-11-17 05:15:35 +00:00
</tr>
</tbody>
</table>
2020-11-22 04:34:27 +00:00
<hr />
<b>Instance Selection:</b>
<br />
<select class="uk-select uk-width-auto" v-model="selectedInstance" @change="onChange($event)">
<option v-bind:key="instance.name" v-for="instance in instances" v-bind:value="instance.apiurl">
2020-11-17 05:15:35 +00:00
{{ instance.name }}
</option>
</select>
</template>
<script>
import CountryMap from "@/utils/CountryMap.js";
2020-11-17 05:15:35 +00:00
export default {
data() {
return {
selectedInstance: null,
2021-02-25 14:40:40 +00:00
instances: [],
2021-02-25 15:18:59 +00:00
sponsorBlock: true,
skipSponsor: true,
skipIntro: false,
skipOutro: false,
skipPreview: false,
2021-02-25 15:18:59 +00:00
skipInteraction: true,
skipSelfPromo: true,
skipMusicOffTopic: true,
selectedTheme: "dark",
autoPlayVideo: true,
listen: false,
resolutions: [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320],
2021-06-21 20:03:11 +00:00
defaultQuality: 0,
2021-06-22 10:54:20 +00:00
bufferingGoal: 10,
countryMap: CountryMap.COUNTRIES,
country: "US",
defaultHomepage: "trending",
showComments: true,
minimizeDescription: false,
watchHistory: false,
selectedLanguage: "en",
languages: [
{ code: "en", name: "English" },
{ code: "fr", name: "French" },
{ code: "lt", name: "Lithuanian" },
],
2020-11-17 05:15:35 +00:00
};
},
activated() {
document.title = this.$t("titles.preferences") + " - Piped";
},
2020-11-17 05:15:35 +00:00
mounted() {
if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} });
fetch("https://raw.githubusercontent.com/wiki/TeamPiped/Piped-Frontend/Instances.md")
2020-11-17 05:15:35 +00:00
.then(resp => resp.text())
.then(body => {
var skipped = 0;
const lines = body.split("\n");
lines.map(line => {
const split = line.split("|");
if (split.length == 4) {
if (skipped < 2) {
skipped++;
return;
}
this.instances.push({
name: split[0].trim(),
apiurl: split[1].trim(),
locations: split[2].trim(),
cdn: split[3].trim(),
2020-11-17 05:15:35 +00:00
});
}
if (this.instances.filter(instance => instance.apiurl == this.apiUrl()).length > 0)
this.instances.push({
name: "Custom Instance",
apiurl: this.apiUrl(),
locations: "Unknown",
cdn: "Unknown",
});
2020-11-17 05:15:35 +00:00
});
});
2021-02-25 14:40:40 +00:00
if (localStorage) {
this.selectedInstance = this.getPreferenceString("instance", "https://pipedapi.kavin.rocks");
2021-02-25 14:40:40 +00:00
this.sponsorBlock = this.getPreferenceBoolean("sponsorblock", true);
2021-04-21 13:38:50 +00:00
if (localStorage.getItem("selectedSkip") !== null) {
2021-02-25 15:18:59 +00:00
var skipList = localStorage.getItem("selectedSkip").split(",");
this.skipSponsor = this.skipIntro = this.skipOutro = this.skipPreview = this.skipInteraction = this.skipSelfPromo = this.skipMusicOffTopic = false;
2021-02-25 15:18:59 +00:00
skipList.forEach(skip => {
switch (skip) {
case "sponsor":
this.skipSponsor = true;
break;
case "intro":
this.skipIntro = true;
break;
case "outro":
this.skipOutro = true;
break;
case "preview":
this.skipPreview = true;
break;
2021-02-25 15:18:59 +00:00
case "interaction":
this.skipInteraction = true;
break;
case "selfpromo":
this.skipSelfPromo = true;
break;
case "music_offtopic":
this.skipMusicOffTopic = true;
break;
default:
console.log("Unknown sponsor type: " + skip);
break;
}
});
}
this.selectedTheme = this.getPreferenceString("theme", "dark");
this.autoPlayVideo = this.getPreferenceBoolean(localStorage.getItem("playerAutoPlay"), true);
this.listen = this.getPreferenceBoolean("listen", false);
2021-06-21 20:03:11 +00:00
this.defaultQuality = Number(localStorage.getItem("quality"));
2021-06-22 10:54:20 +00:00
this.bufferingGoal = Math.max(Number(localStorage.getItem("bufferGoal")), 10);
this.country = this.getPreferenceString("region", "US");
this.defaultHomepage = this.getPreferenceString("homepage", "trending");
this.showComments = this.getPreferenceBoolean("comments", true);
this.minimizeDescription = this.getPreferenceBoolean("minimizeDescription", false);
this.watchHistory = this.getPreferenceBoolean("watchHistory", false);
this.selectedLanguage = this.getPreferenceString("hl", "en");
2021-02-25 14:40:40 +00:00
}
2020-11-17 05:15:35 +00:00
},
methods: {
onChange() {
2021-02-25 14:40:40 +00:00
if (localStorage) {
var shouldReload = false;
if (
this.getPreferenceString("theme", "dark") !== this.selectedTheme ||
this.getPreferenceBoolean("watchHistory", false) != this.watchHistory ||
this.getPreferenceString("hl", "en") !== this.selectedLanguage
)
shouldReload = true;
2020-11-17 05:15:35 +00:00
localStorage.setItem("instance", this.selectedInstance);
2021-02-25 14:40:40 +00:00
localStorage.setItem("sponsorblock", this.sponsorBlock);
2021-02-25 15:18:59 +00:00
var sponsorSelected = [];
if (this.skipSponsor) sponsorSelected.push("sponsor");
if (this.skipIntro) sponsorSelected.push("intro");
if (this.skipOutro) sponsorSelected.push("outro");
if (this.skipPreview) sponsorSelected.push("preview");
2021-02-25 15:18:59 +00:00
if (this.skipInteraction) sponsorSelected.push("interaction");
if (this.skipSelfPromo) sponsorSelected.push("selfpromo");
if (this.skipMusicOffTopic) sponsorSelected.push("music_offtopic");
2021-02-25 15:18:59 +00:00
localStorage.setItem("selectedSkip", sponsorSelected);
localStorage.setItem("theme", this.selectedTheme);
localStorage.setItem("playerAutoPlay", this.autoPlayVideo);
localStorage.setItem("listen", this.listen);
2021-06-21 20:03:11 +00:00
localStorage.setItem("quality", this.defaultQuality);
2021-06-22 10:54:20 +00:00
localStorage.setItem("bufferGoal", this.bufferingGoal);
localStorage.setItem("region", this.country);
localStorage.setItem("homepage", this.defaultHomepage);
localStorage.setItem("comments", this.showComments);
localStorage.setItem("minimizeDescription", this.minimizeDescription);
localStorage.setItem("watchHistory", this.watchHistory);
localStorage.setItem("hl", this.selectedLanguage);
if (shouldReload) window.location.reload();
2021-02-25 14:40:40 +00:00
}
2020-11-30 06:39:40 +00:00
},
sslScore(url) {
return "https://www.ssllabs.com/ssltest/analyze.html?d=" + new URL(url).host + "&latest";
},
},
2020-11-17 05:15:35 +00:00
};
</script>