diff --git a/src/App.vue b/src/App.vue index bc9548ee..7ff0d9da 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,7 +5,11 @@ :class="{ 'uk-light': darkMode }" > - + + + + +
diff --git a/src/components/Channel.vue b/src/components/Channel.vue index f12d187c..fc30cd1e 100644 --- a/src/components/Channel.vue +++ b/src/components/Channel.vue @@ -32,9 +32,11 @@ export default { }, mounted() { this.getChannelData(); + }, + activated() { window.addEventListener("scroll", this.handleScroll); }, - unmounted() { + deactivated() { window.removeEventListener("scroll", this.handleScroll); }, methods: { diff --git a/src/components/Player.vue b/src/components/Player.vue index 3d9b2323..2f007236 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -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()); }, }; diff --git a/src/components/Playlist.vue b/src/components/Playlist.vue index d12725b8..de3975f9 100644 --- a/src/components/Playlist.vue +++ b/src/components/Playlist.vue @@ -46,9 +46,11 @@ export default { }, mounted() { this.getPlaylistData(); + }, + activated() { window.addEventListener("scroll", this.handleScroll); }, - unmounted() { + deactivated() { window.removeEventListener("scroll", this.handleScroll); }, computed: { diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue index 8a982ad3..c7ab748e 100644 --- a/src/components/SearchResults.vue +++ b/src/components/SearchResults.vue @@ -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", { diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue index cd7dcfad..eea5d81c 100644 --- a/src/components/WatchVideo.vue +++ b/src/components/WatchVideo.vue @@ -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", "
"), ); - - this.$refs.videoPlayer.loadVideo(); } }); },