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 }"
>
<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">
<a aria-label="GitHub" href="https://github.com/TeamPiped/Piped">

View File

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

View File

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

View File

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

View File

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

View File

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