mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 10:18:23 +00:00
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:
parent
9345e1a917
commit
b0d9145e75
@ -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">
|
||||
|
@ -32,9 +32,11 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.getChannelData();
|
||||
},
|
||||
activated() {
|
||||
window.addEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
unmounted() {
|
||||
deactivated() {
|
||||
window.removeEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
methods: {
|
||||
|
@ -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>
|
||||
|
@ -46,9 +46,11 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.getPlaylistData();
|
||||
},
|
||||
activated() {
|
||||
window.addEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
unmounted() {
|
||||
deactivated() {
|
||||
window.removeEventListener("scroll", this.handleScroll);
|
||||
},
|
||||
computed: {
|
||||
|
@ -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", {
|
||||
|
@ -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();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user