1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
import { useState, useEffect } from "react";
import { motion as m, AnimatePresence } from "framer-motion";
const ScrollTracker = () => {
const [scrollPercentage, setScrollPercentage] = useState(0);
const [scrolling, setScrolling] = useState(false);
// console.log(id);
function handleUnload() {
const currentChapter = localStorage.getItem("currentChapterId");
const scrollData = JSON.parse(localStorage.getItem("watchedManga")) || [];
const scroll = localStorage.getItem("scrollPercentage");
if (scroll < 5) {
return;
}
const existingDataIndex = scrollData.findIndex(
(data) => data.id === currentChapter
);
if (existingDataIndex !== -1) {
// Update existing data
scrollData[existingDataIndex].timestamp = Date.now();
scrollData[existingDataIndex].percentage = parseFloat(
localStorage.getItem("scrollPercentage")
);
} else {
// Add new data
scrollData.push({
timestamp: Date.now(),
percentage: parseFloat(localStorage.getItem("scrollPercentage")),
id: currentChapter,
});
}
localStorage.setItem("watchedManga", JSON.stringify(scrollData));
}
function handlePageHide() {
localStorage.setItem("scrollPercentage", scrollPercentage);
handleUnload;
}
// console.log(data?.id);
useEffect(() => {
function handleScroll() {
const scrollTop = document.documentElement.scrollTop;
const scrollHeight =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
const percentage = (scrollTop / scrollHeight) * 100;
setScrollPercentage(percentage);
localStorage.setItem("scrollPercentage", percentage);
}
function handlePageshow() {
const currentChapter = localStorage.getItem("currentChapterId");
const lastScrollPercentage =
JSON.parse(localStorage.getItem("watchedManga"))
?.filter((data) => data.id === currentChapter)
.map((data) => data.percentage) || 0;
if (lastScrollPercentage >= 95) {
return;
}
const scrollTop =
(lastScrollPercentage / 100) *
(document.documentElement.scrollHeight -
document.documentElement.clientHeight);
document.documentElement.scrollTop = scrollTop;
}
window.addEventListener("scroll", handleScroll);
window.addEventListener("pageshow", handlePageshow);
window.addEventListener("beforeunload", handleUnload);
window.addEventListener("pagehide", handlePageHide);
return () => {
window.removeEventListener("scroll", handleScroll);
window.removeEventListener("pageshow", handlePageshow);
window.removeEventListener("beforeunload", handleUnload);
window.removeEventListener("pagehide", handlePageHide);
};
}, []);
useEffect(() => {
if (scrollPercentage > 5) {
setScrolling(true);
} else {
setScrolling(false);
}
}, [scrollPercentage]);
function handleScrollTop(e) {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: "smooth",
});
}
// console.log(scrollPercentage);
return (
<>
<AnimatePresence>
{scrolling && (
<m.div
key="back-to-top-button"
initial={{ opacity: 0, x: 100 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0 }}
className="fixed lg:right-10 lg:bottom-10 cursor-pointer text-white bottom-9 right-20 rounded-md z-40 bg-[#121212] hover:bg-[#2d303a] p-2 lg:p-3"
onClick={handleScrollTop}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 15.75l7.5-7.5 7.5 7.5"
/>
</svg>
</m.div>
)}
</AnimatePresence>
<div className="fixed bottom-0 w-screen z-40">
<div className="h-1 w-full relative">
<div
className="absolute top-0 left-0 bg-[#ff8a57] h-1"
style={{ width: `${scrollPercentage}%` }}
></div>
</div>
</div>
</>
);
};
export default ScrollTracker;
|