From 95a0e4cbc87e54e999d23267d09bb317684d1f08 Mon Sep 17 00:00:00 2001 From: Tyrritt <5675742+Tyrritt@users.noreply.github.com> Date: Wed, 18 Jan 2023 16:56:21 +0100 Subject: [PATCH 1/4] Make timestamps in comments seek instead of reload --- src/components/CommentItem.vue | 16 ++++++++++++++++ src/components/WatchVideo.vue | 1 + 2 files changed, 17 insertions(+) diff --git a/src/components/CommentItem.vue b/src/components/CommentItem.vue index 160393a1..b3ed6525 100644 --- a/src/components/CommentItem.vue +++ b/src/components/CommentItem.vue @@ -71,6 +71,7 @@ export default { uploader: { type: String, default: null }, videoId: { type: String, default: null }, }, + emits: ["seek"], data() { return { loadingReplies: false, @@ -79,6 +80,21 @@ export default { nextpage: null, }; }, + mounted() { + const thisComment = this; + this.$el.querySelectorAll("a").forEach(elem => { + if (elem.innerText.match(/(?:[\d]{1,2}:)?(?:[\d]{1,2}):(?:[\d]{1,2})/)) { + elem.addEventListener("click", function (event) { + if (!event || !event.target) return; + if (!event.target.getAttribute("href").match(/(?<=t=)\d{1,}/)) return; + + const time = parseInt(event.target.getAttribute("href").match(/(?<=t=)\d{1,}/)[0]); + thisComment.$emit("seek", time); + event.preventDefault(); + }); + } + }); + }, methods: { async loadReplies() { if (!this.showingReplies && this.loadingReplies) { diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue index 54699416..1e203598 100644 --- a/src/components/WatchVideo.vue +++ b/src/components/WatchVideo.vue @@ -186,6 +186,7 @@ :comment="comment" :uploader="video.uploader" :video-id="getVideoId()" + @seek="navigate" /> From 83118885019e3f5080e2e4cb55677cec7c869477 Mon Sep 17 00:00:00 2001 From: Tyrritt <5675742+Tyrritt@users.noreply.github.com> Date: Thu, 26 Jan 2023 18:23:49 +0100 Subject: [PATCH 2/4] Add only one listener on the window --- src/components/CommentItem.vue | 16 ---------------- src/components/WatchVideo.vue | 14 +++++++++++++- 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/src/components/CommentItem.vue b/src/components/CommentItem.vue index b3ed6525..160393a1 100644 --- a/src/components/CommentItem.vue +++ b/src/components/CommentItem.vue @@ -71,7 +71,6 @@ export default { uploader: { type: String, default: null }, videoId: { type: String, default: null }, }, - emits: ["seek"], data() { return { loadingReplies: false, @@ -80,21 +79,6 @@ export default { nextpage: null, }; }, - mounted() { - const thisComment = this; - this.$el.querySelectorAll("a").forEach(elem => { - if (elem.innerText.match(/(?:[\d]{1,2}:)?(?:[\d]{1,2}):(?:[\d]{1,2})/)) { - elem.addEventListener("click", function (event) { - if (!event || !event.target) return; - if (!event.target.getAttribute("href").match(/(?<=t=)\d{1,}/)) return; - - const time = parseInt(event.target.getAttribute("href").match(/(?<=t=)\d{1,}/)[0]); - thisComment.$emit("seek", time); - event.preventDefault(); - }); - } - }); - }, methods: { async loadReplies() { if (!this.showingReplies && this.loadingReplies) { diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue index 1e203598..ea7e48e7 100644 --- a/src/components/WatchVideo.vue +++ b/src/components/WatchVideo.vue @@ -186,7 +186,6 @@ :comment="comment" :uploader="video.uploader" :video-id="getVideoId()" - @seek="navigate" /> @@ -337,6 +336,19 @@ export default { this.getPlaylistData(); this.getSponsors(); if (!this.isEmbed && this.showComments) this.getComments(); + window.addEventListener("click", event => { + if (!event || !event.target) return; + var target = event.target; + if ( + !target.nodeName == "A" || + !target.getAttribute("href") || + !target.innerText.match(/(?:[\d]{1,2}:)?(?:[\d]{1,2}):(?:[\d]{1,2})/) + ) + return; + const time = parseInt(event.target.getAttribute("href").match(/(?<=t=)\d+/)[0]); + this.navigate(time); + event.preventDefault(); + }); window.addEventListener("resize", () => { this.smallView = this.smallViewQuery.matches; }); From b8fdf3efeb92e32938ad71df7e8575fc2f21cd20 Mon Sep 17 00:00:00 2001 From: Tyrritt <5675742+Tyrritt@users.noreply.github.com> Date: Thu, 26 Jan 2023 18:31:05 +0100 Subject: [PATCH 3/4] Fix variable usage --- src/components/WatchVideo.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue index ea7e48e7..107a1d71 100644 --- a/src/components/WatchVideo.vue +++ b/src/components/WatchVideo.vue @@ -345,7 +345,7 @@ export default { !target.innerText.match(/(?:[\d]{1,2}:)?(?:[\d]{1,2}):(?:[\d]{1,2})/) ) return; - const time = parseInt(event.target.getAttribute("href").match(/(?<=t=)\d+/)[0]); + const time = parseInt(target.getAttribute("href").match(/(?<=t=)\d+/)[0]); this.navigate(time); event.preventDefault(); }); From 4732c76daccb26c1aa47ad49f3fb19db70d8808e Mon Sep 17 00:00:00 2001 From: Tyrritt <5675742+Tyrritt@users.noreply.github.com> Date: Thu, 26 Jan 2023 19:01:24 +0100 Subject: [PATCH 4/4] Factor out handler func, remove Listener on unmount --- src/components/WatchVideo.vue | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue index 107a1d71..24dfca65 100644 --- a/src/components/WatchVideo.vue +++ b/src/components/WatchVideo.vue @@ -336,19 +336,7 @@ export default { this.getPlaylistData(); this.getSponsors(); if (!this.isEmbed && this.showComments) this.getComments(); - window.addEventListener("click", event => { - if (!event || !event.target) return; - var target = event.target; - if ( - !target.nodeName == "A" || - !target.getAttribute("href") || - !target.innerText.match(/(?:[\d]{1,2}:)?(?:[\d]{1,2}):(?:[\d]{1,2})/) - ) - return; - const time = parseInt(target.getAttribute("href").match(/(?<=t=)\d+/)[0]); - this.navigate(time); - event.preventDefault(); - }); + window.addEventListener("click", this.handleClick); window.addEventListener("resize", () => { this.smallView = this.smallViewQuery.matches; }); @@ -372,6 +360,7 @@ export default { }, unmounted() { window.removeEventListener("scroll", this.handleScroll); + window.removeEventListener("click", this.handleClick); }, methods: { fetchVideo() { @@ -524,6 +513,19 @@ export default { } this.subscribed = !this.subscribed; }, + handleClick(event) { + if (!event || !event.target) return; + var target = event.target; + if ( + !target.nodeName == "A" || + !target.getAttribute("href") || + !target.innerText.match(/(?:[\d]{1,2}:)?(?:[\d]{1,2}):(?:[\d]{1,2})/) + ) + return; + const time = parseInt(target.getAttribute("href").match(/(?<=t=)\d+/)[0]); + this.navigate(time); + event.preventDefault(); + }, handleScroll() { if (this.loading || !this.comments || !this.comments.nextpage) return; if (window.innerHeight + window.scrollY >= this.$refs.comments?.offsetHeight - window.innerHeight) {