Add router caching. (#248)

* Add router caching.

* Avoid memory leak by limiting cache size.

* Fix search result caching.

* Remove remains of previous player.

Fixes an issue where the spinner/loading from a previous player can show up in a cached page.
This commit is contained in:
FireMasterK 2021-07-07 19:48:09 +05:30 committed by GitHub
parent 9345e1a917
commit b0d9145e75
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 36 additions and 21 deletions

View file

@ -5,7 +5,11 @@
:class="{ 'uk-light': darkMode }" :class="{ 'uk-light': darkMode }"
> >
<Navigation /> <Navigation />
<router-view /> <router-view v-slot="{ Component }">
<keep-alive :max="5">
<component :key="$route.fullPath" :is="Component" />
</keep-alive>
</router-view>
<div style="text-align: center"> <div style="text-align: center">
<a aria-label="GitHub" href="https://github.com/TeamPiped/Piped"> <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped">

View file

@ -32,9 +32,11 @@ export default {
}, },
mounted() { mounted() {
this.getChannelData(); this.getChannelData();
},
activated() {
window.addEventListener("scroll", this.handleScroll); window.addEventListener("scroll", this.handleScroll);
}, },
unmounted() { deactivated() {
window.removeEventListener("scroll", this.handleScroll); window.removeEventListener("scroll", this.handleScroll);
}, },
methods: { methods: {

View file

@ -29,6 +29,11 @@ export default {
selectedAutoPlay: Boolean, selectedAutoPlay: Boolean,
selectedAutoLoop: Boolean, selectedAutoLoop: Boolean,
}, },
data() {
return {
player: null,
};
},
computed: { computed: {
shouldAutoPlay: _this => { shouldAutoPlay: _this => {
return _this.getPreferenceBoolean("playerAutoPlay", true); return _this.getPreferenceBoolean("playerAutoPlay", true);
@ -196,7 +201,7 @@ export default {
}); });
}, },
}, },
mounted() { activated() {
import("hotkeys-js") import("hotkeys-js")
.then(mod => mod.default) .then(mod => mod.default)
.then(hotkeys => { .then(hotkeys => {
@ -239,13 +244,18 @@ export default {
}); });
}); });
}, },
beforeUnmount() { deactivated() {
if (this.ui) {
this.ui.destroy();
this.ui = undefined;
this.player = undefined;
}
if (this.player) { if (this.player) {
this.player.destroy(); this.player.destroy();
this.player = undefined; this.player = undefined;
this.ui = undefined;
} }
if (this.hotkeys) this.hotkeys.unbind(); if (this.hotkeys) this.hotkeys.unbind();
this.$refs.container.querySelectorAll("div").forEach(node => node.remove());
}, },
}; };
</script> </script>

View file

@ -46,9 +46,11 @@ export default {
}, },
mounted() { mounted() {
this.getPlaylistData(); this.getPlaylistData();
},
activated() {
window.addEventListener("scroll", this.handleScroll); window.addEventListener("scroll", this.handleScroll);
}, },
unmounted() { deactivated() {
window.removeEventListener("scroll", this.handleScroll); window.removeEventListener("scroll", this.handleScroll);
}, },
computed: { computed: {

View file

@ -86,16 +86,13 @@ export default {
}, },
mounted() { mounted() {
this.updateResults(); this.updateResults();
},
activated() {
window.addEventListener("scroll", this.handleScroll); window.addEventListener("scroll", this.handleScroll);
}, },
unmounted() { deactivated() {
window.removeEventListener("scroll", this.handleScroll); window.removeEventListener("scroll", this.handleScroll);
}, },
watch: {
"$route.query.search_query": function(q) {
if (q) this.updateResults();
},
},
methods: { methods: {
async fetchResults() { async fetchResults() {
return await await this.fetchJson(this.apiUrl() + "/search", { return await await this.fetchJson(this.apiUrl() + "/search", {

View file

@ -134,21 +134,23 @@ export default {
}; };
}, },
mounted() { mounted() {
this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", true); this.getVideoData().then(() => {
this.getVideoData(); this.$refs.videoPlayer.loadVideo();
});
this.getSponsors(); this.getSponsors();
this.getComments(); this.getComments();
},
activated() {
this.selectedAutoPlay = this.getPreferenceBoolean("autoplay", true);
if (this.video.duration) this.$refs.videoPlayer.loadVideo();
window.addEventListener("scroll", this.handleScroll); window.addEventListener("scroll", this.handleScroll);
}, },
unmounted() { deactivated() {
window.removeEventListener("scroll", this.handleScroll); window.removeEventListener("scroll", this.handleScroll);
}, },
watch: { watch: {
"$route.query.v": function(v) { "$route.query.v": function(v) {
if (v) { if (v) {
this.getVideoData();
this.getSponsors();
this.getComments();
window.scrollTo(0, 0); window.scrollTo(0, 0);
} }
}, },
@ -175,7 +177,7 @@ export default {
this.setPreference("autoplay", this.selectedAutoPlay); this.setPreference("autoplay", this.selectedAutoPlay);
}, },
async getVideoData() { async getVideoData() {
this.fetchVideo() await this.fetchVideo()
.then(data => { .then(data => {
this.video = data; this.video = data;
}) })
@ -189,8 +191,6 @@ export default {
.replaceAll("https://www.youtube.com", "") .replaceAll("https://www.youtube.com", "")
.replaceAll("\n", "<br>"), .replaceAll("\n", "<br>"),
); );
this.$refs.videoPlayer.loadVideo();
} }
}); });
}, },