From 4fe72fa738741b68397462bd603113b95b60cdc1 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Sun, 4 Jul 2021 00:54:09 +0530
Subject: [PATCH] Cleanup + Allow setting some parameters over query.
---
src/Constants.js | 1 -
src/components/Player.vue | 4 +---
src/components/Preferences.vue | 19 +++++++++---------
src/components/WatchVideo.vue | 15 +++++++++------
src/main.js | 35 ++++++++++++++++++++++++++++------
5 files changed, 49 insertions(+), 25 deletions(-)
diff --git a/src/Constants.js b/src/Constants.js
index 91ec55ca..c500047b 100644
--- a/src/Constants.js
+++ b/src/Constants.js
@@ -1,4 +1,3 @@
export default {
BASE_URL: localStorage.getItem("instance") || "https://pipedapi.kavin.rocks",
- AUTO_PLAY: localStorage.getItem("autoplay") === "true",
};
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 519f46db..7fead73e 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -152,9 +152,7 @@ export default {
this.player = player;
- const disableVideo =
- ((localStorage && localStorage.getItem("audioOnly") === "true") || this.$route.query.listen === "1") &&
- !this.video.livestream;
+ const disableVideo = this.getPreferenceBoolean("listen", false) && !this.video.livestream;
this.player.configure("manifest.disableVideo", disableVideo);
const quality = Number(localStorage.getItem("quality"));
diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue
index 8464834f..ab139f59 100644
--- a/src/components/Preferences.vue
+++ b/src/components/Preferences.vue
@@ -44,7 +44,7 @@
Audio Only
-
+
Default Quality
@@ -104,13 +104,15 @@ export default {
skipMusicOffTopic: true,
selectedTheme: "dark",
autoPlayVideo: true,
- audioOnly: false,
+ listen: false,
resolutions: [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320],
defaultQuality: 0,
bufferingGoal: 10,
};
},
mounted() {
+ if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} });
+
fetch("https://raw.githubusercontent.com/wiki/TeamPiped/Piped-Frontend/Instances.md")
.then(resp => resp.text())
.then(body => {
@@ -136,7 +138,7 @@ export default {
if (localStorage) {
this.selectedInstance = localStorage.getItem("instance") || "https://pipedapi.kavin.rocks";
- this.sponsorBlock = localStorage.getItem("sponsorblock") || true;
+ this.sponsorBlock = this.getPreferenceBoolean("sponsorblock", true);
if (localStorage.getItem("selectedSkip") !== null) {
var skipList = localStorage.getItem("selectedSkip").split(",");
this.skipSponsor = this.skipIntro = this.skipOutro = this.skipInteraction = this.skipSelfPromo = this.skipMusicOffTopic = false;
@@ -167,10 +169,9 @@ export default {
});
}
- this.selectedTheme = localStorage.getItem("theme") || "dark";
- this.autoPlayVideo =
- localStorage.getItem("playerAutoPlay") === null || localStorage.getItem("playerAutoPlay") === "true";
- this.audioOnly = localStorage.getItem("audioOnly") === "true";
+ this.selectedTheme = this.getPreferenceString("theme", "dark");
+ this.autoPlayVideo = this.getPreferenceBoolean(localStorage.getItem("playerAutoPlay"), true);
+ this.listen = this.getPreferenceBoolean("listen", false);
this.defaultQuality = Number(localStorage.getItem("quality"));
this.bufferingGoal = Math.max(Number(localStorage.getItem("bufferGoal")), 10);
}
@@ -180,7 +181,7 @@ export default {
if (localStorage) {
var shouldReload = false;
- if (localStorage.getItem("playerAutoPlay") !== this.autoPlayVideo) shouldReload = true;
+ if (this.getPreferenceString("theme", "dark") !== this.selectedTheme) shouldReload = true;
localStorage.setItem("instance", this.selectedInstance);
localStorage.setItem("sponsorblock", this.sponsorBlock);
@@ -196,7 +197,7 @@ export default {
localStorage.setItem("theme", this.selectedTheme);
localStorage.setItem("playerAutoPlay", this.autoPlayVideo);
- localStorage.setItem("audioOnly", this.audioOnly);
+ localStorage.setItem("listen", this.listen);
localStorage.setItem("quality", this.defaultQuality);
localStorage.setItem("bufferGoal", this.bufferingGoal);
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 2f637108..0c5befc0 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -125,7 +125,7 @@ export default {
};
},
mounted() {
- this.selectedAutoPlay = Constants.AUTO_PLAY;
+ this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", true);
this.getVideoData();
this.getSponsors();
this.getComments();
@@ -150,16 +150,19 @@ export default {
async fetchSponsors() {
return await this.fetchJson(Constants.BASE_URL + "/sponsors/" + this.getVideoId(), {
category:
- localStorage && localStorage.getItem("selectedSkip") !== null
- ? '["' + localStorage.getItem("selectedSkip").replace(",", '","') + '"]'
- : '["sponsor", "interaction", "selfpromo", "music_offtopic"]',
+ '["' +
+ this.getPreferenceString("selectedSkip", "sponsor,interaction,selfpromo,music_offtopic").replaceAll(
+ ",",
+ '","',
+ ) +
+ '"]',
});
},
fetchComments() {
return this.fetchJson(Constants.BASE_URL + "/comments/" + this.getVideoId());
},
onChange() {
- if (localStorage) localStorage.setItem("autoplay", this.selectedAutoPlay);
+ this.setPreference("autoplay", this.selectedAutoPlay);
},
async getVideoData() {
this.fetchVideo()
@@ -182,7 +185,7 @@ export default {
});
},
async getSponsors() {
- if (!localStorage || localStorage.getItem("sponsorblock") !== false)
+ if (this.getPreferenceBoolean("sponsorblock", true))
this.fetchSponsors().then(data => (this.sponsors = data));
},
async getComments() {
diff --git a/src/main.js b/src/main.js
index 3a5bd940..107ef0f3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -67,23 +67,46 @@ const mixin = {
},
purifyHTML(original) {
return DOMPurify.sanitize(original);
- }
+ },
+ setPreference(key, value) {
+ if (localStorage) localStorage.setItem(key, value)
+ },
+ getPreferenceBoolean(key, defaultVal) {
+ var value;
+ if ((value = this.$route.query[key]) !== undefined || (localStorage && (value = localStorage.getItem(key)) !== null)) {
+ switch (String(value)) {
+ case "true":
+ case "1":
+ case "on":
+ case "yes":
+ return true;
+ default:
+ return false;
+ }
+ } else return defaultVal;
+ },
+ getPreferenceString(key, defaultVal) {
+ var value;
+ if ((value = this.$route.query[key]) !== undefined || (localStorage && (value = localStorage.getItem(key)) !== null)) {
+ return value;
+ } else return defaultVal;
+ },
},
computed: {
backgroundColor() {
- return localStorage.getItem("theme") === "light" ? "#fff" : "#0b0e0f"
+ return this.getPreferenceString("theme", "dark") === "light" ? "#fff" : "#0b0e0f"
},
secondaryBackgroundColor() {
- return localStorage.getItem("theme") === "light" ? "#e5e5e5" : "#242727"
+ return this.getPreferenceString("theme", "dark") === "light" ? "#e5e5e5" : "#242727"
},
foregroundColor() {
- return localStorage.getItem("theme") === "light" ? "#15191a" : "#0b0e0f"
+ return this.getPreferenceString("theme", "dark") === "light" ? "#15191a" : "#0b0e0f"
},
secondaryForegroundColor() {
- return localStorage.getItem("theme") === "light" ? "#666" : "#393d3d"
+ return this.getPreferenceString("theme", "dark") === "light" ? "#666" : "#393d3d"
},
darkMode() {
- return localStorage.getItem('theme') !== 'light'
+ return this.getPreferenceString("theme", "dark") !== 'light'
}
}
};