Fahim dev #2
2 changed files with 174 additions and 125 deletions
1
.idea/misc.xml
generated
1
.idea/misc.xml
generated
|
|
@ -1,3 +1,4 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<project version="4">
|
<project version="4">
|
||||||
<component name="ProjectRootManager">
|
<component name="ProjectRootManager">
|
||||||
<output url="file://$PROJECT_DIR$/out" />
|
<output url="file://$PROJECT_DIR$/out" />
|
||||||
|
|
|
||||||
|
|
@ -1,62 +1,34 @@
|
||||||
import { Image, StyleSheet, Platform } from "react-native";
|
|
||||||
import { WebView } from "react-native-webview";
|
import { WebView } from "react-native-webview";
|
||||||
import { useRef } from "react";
|
import { useRef } from "react";
|
||||||
|
|
||||||
export default function HomeScreen() {
|
export default function HomeScreen() {
|
||||||
const webviewRef = useRef(null);
|
const webviewRef = useRef(null);
|
||||||
|
|
||||||
const injectedJavaScript = `
|
const injectedJavaScript = ` let lastClickTime = 0;
|
||||||
|
const COOLDOWN_DURATION = 60000;
|
||||||
|
let buttonClicked = false;
|
||||||
|
let fullCaption = "";
|
||||||
|
let imageUrls = [];
|
||||||
|
|
||||||
function collectPostData(post) {
|
function collectPostData(post) {
|
||||||
if (post.dataset.processed === "true") return;
|
if (post.dataset.processed === "true") return;
|
||||||
|
|
||||||
const captionElement = post.querySelector("div.m div.m div[data-type='text'] div.native-text");
|
const captionElement = post.querySelector("div.m div.m div[data-type='text'] div.native-text");
|
||||||
let caption = captionElement ? captionElement.textContent.trim() : null;
|
let caption = captionElement ? captionElement.textContent.trim() : null;
|
||||||
|
|
||||||
const imageElements = post.querySelectorAll("div.m.bg-s13 img");
|
const imageElements = post.querySelectorAll("div.m.bg-s13 img");
|
||||||
let imageURLs = [];
|
let imageURLs = [];
|
||||||
if (imageElements.length > 1) {
|
|
||||||
imageElements.forEach((imageElement) => {
|
imageElements.forEach((imageElement) => {
|
||||||
if (imageElement.src) imageURLs.push(imageElement.src);
|
if (imageElement.src) imageURLs.push(imageElement.src);
|
||||||
});
|
});
|
||||||
} else if (imageElements.length === 1) {
|
|
||||||
const singleImageSrc = imageElements[0].src;
|
|
||||||
if (singleImageSrc) imageURLs.push(singleImageSrc);
|
|
||||||
}
|
|
||||||
console.log("Caption:", caption);
|
|
||||||
console.log("Image URLs:", imageURLs);
|
|
||||||
|
|
||||||
|
if (buttonClicked) {
|
||||||
|
fullCaption = caption;
|
||||||
|
imageUrls.push(...imageURLs);
|
||||||
|
}
|
||||||
post.dataset.processed = "true";
|
post.dataset.processed = "true";
|
||||||
|
|
||||||
const button = document.createElement("button");
|
const button = createButton(post, caption, imageURLs);
|
||||||
button.textContent = "Check";
|
|
||||||
button.innerHTML = button.textContent;
|
|
||||||
|
|
||||||
button.style.position = "absolute";
|
|
||||||
button.style.fontSize = "20px";
|
|
||||||
button.style.right = "10px";
|
|
||||||
button.style.bottom = "10px";
|
|
||||||
button.style.background = "linear-gradient(135deg, #6a11cb, #2575fc)";
|
|
||||||
button.style.color = "#fff";
|
|
||||||
button.style.border = "none";
|
|
||||||
button.style.padding = "12px 20px";
|
|
||||||
button.style.borderRadius = "8px";
|
|
||||||
button.style.cursor = "pointer";
|
|
||||||
button.style.zIndex = 999999;
|
|
||||||
button.style.pointerEvents = "auto";
|
|
||||||
button.style.display = "flex";
|
|
||||||
button.style.justifyContent = "center";
|
|
||||||
button.style.alignItems = "center";
|
|
||||||
button.style.gap = "8px";
|
|
||||||
|
|
||||||
button.addEventListener("click", async () => {
|
|
||||||
button.disabled = true;
|
|
||||||
button.textContent = "Loading...";
|
|
||||||
const seeMoreElement = post.querySelector("span[style*='color:#65676b']");
|
|
||||||
if (seeMoreElement) {
|
|
||||||
handleSeeMoreClick(seeMoreElement, post, button);
|
|
||||||
} else {
|
|
||||||
collectDataImmediately(post, button);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (caption && imageURLs.length > 0) {
|
if (caption && imageURLs.length > 0) {
|
||||||
post.style.position = "relative";
|
post.style.position = "relative";
|
||||||
|
|
@ -64,40 +36,138 @@ export default function HomeScreen() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function collectDataImmediately(post, button) {
|
function createButton(post, initialCaption, initialImageURLs) {
|
||||||
|
const button = document.createElement("button");
|
||||||
|
button.textContent = "Check";
|
||||||
|
|
||||||
|
Object.assign(button.style, {
|
||||||
|
position: "absolute",
|
||||||
|
fontSize: "20px",
|
||||||
|
right: "10px",
|
||||||
|
bottom: "10px",
|
||||||
|
background: "linear-gradient(135deg, #6a11cb, #2575fc)",
|
||||||
|
color: "#fff",
|
||||||
|
border: "none",
|
||||||
|
padding: "12px 20px",
|
||||||
|
borderRadius: "8px",
|
||||||
|
cursor: "pointer",
|
||||||
|
zIndex: 1000000,
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "8px",
|
||||||
|
pointerEvents: "auto",
|
||||||
|
transition: "all 0.3s",
|
||||||
|
});
|
||||||
|
|
||||||
|
button.addEventListener("click", (event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
const currentTime = new Date().getTime();
|
||||||
|
|
||||||
|
if (currentTime - lastClickTime < COOLDOWN_DURATION) {
|
||||||
|
const remainingTime = Math.ceil((COOLDOWN_DURATION - (currentTime - lastClickTime)) / 1000);
|
||||||
|
|
||||||
|
// Fix template literal issue by using escape characters
|
||||||
|
button.textContent = "Wait " + remainingTime + "s"; // Change here
|
||||||
|
button.style.background = "linear-gradient(135deg, #a0a0a0, #c0c0c0)";
|
||||||
|
button.style.cursor = "not-allowed";
|
||||||
|
button.disabled = true;
|
||||||
|
|
||||||
|
const cooldownTimer = setInterval(() => {
|
||||||
|
const updatedRemainingTime = Math.ceil((COOLDOWN_DURATION - (new Date().getTime() - lastClickTime)) / 1000);
|
||||||
|
|
||||||
|
if (updatedRemainingTime <= 0) {
|
||||||
|
clearInterval(cooldownTimer);
|
||||||
|
button.textContent = "Check";
|
||||||
|
button.style.background = "linear-gradient(135deg, #6a11cb, #2575fc)";
|
||||||
|
button.style.cursor = "pointer";
|
||||||
|
button.disabled = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.textContent = "Wait " + updatedRemainingTime + "s"; // Change here
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
lastClickTime = currentTime;
|
||||||
|
|
||||||
|
button.disabled = true;
|
||||||
|
button.textContent = "Processing...";
|
||||||
|
button.style.opacity = "0.5";
|
||||||
|
|
||||||
|
const seeMoreElement = post.querySelector("span[style*='color:#65676b']");
|
||||||
|
|
||||||
|
if (seeMoreElement) {
|
||||||
|
handleSeeMoreClick(seeMoreElement, post, button, initialCaption, initialImageURLs);
|
||||||
|
} else {
|
||||||
|
collectDataImmediately(post, button, initialCaption, initialImageURLs);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return button;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSeeMoreClick(seeMoreElement, post, button, initialCaption, initialImageURLs) {
|
||||||
|
const currentTime = new Date().getTime();
|
||||||
|
setTimeout(() => {
|
||||||
|
seeMoreElement.click();
|
||||||
|
|
||||||
|
if (currentTime - lastClickTime < COOLDOWN_DURATION) {
|
||||||
|
buttonClicked = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (window.ReactNativeWebView) {
|
||||||
|
window.ReactNativeWebView.postMessage(
|
||||||
|
JSON.stringify({
|
||||||
|
caption: fullCaption,
|
||||||
|
imageUrls: imageUrls,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
alert(
|
||||||
|
JSON.stringify({
|
||||||
|
caption: fullCaption,
|
||||||
|
imageUrls: imageUrls,
|
||||||
|
}));
|
||||||
|
button.textContent = "Processed";
|
||||||
|
button.style.opacity = "0.7";
|
||||||
|
button.disabled = true;
|
||||||
|
}, 2000);
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
function collectDataImmediately(post, button, initialCaption, initialImageURLs) {
|
||||||
const captionElement = post.querySelector("div.m div.m div[data-type='text'] div.native-text");
|
const captionElement = post.querySelector("div.m div.m div[data-type='text'] div.native-text");
|
||||||
let caption = captionElement ? captionElement.textContent.trim() : null;
|
let caption = captionElement ? captionElement.textContent.trim() : initialCaption;
|
||||||
|
|
||||||
const imageElements = post.querySelectorAll("div.m img");
|
const imageElements = post.querySelectorAll("div.m img");
|
||||||
let imageURLs = [];
|
let imageURLs = [];
|
||||||
imageElements.forEach((imageElement) => {
|
imageElements.forEach((imageElement) => {
|
||||||
if (imageElement.src) imageURLs.push(imageElement.src);
|
if (imageElement.src) imageURLs.push(imageElement.src);
|
||||||
});
|
});
|
||||||
if(caption && imageURLs){
|
|
||||||
alert("good");
|
|
||||||
}
|
|
||||||
console.log("Caption:", caption);
|
|
||||||
console.log("Image URLs:", imageURLs);
|
|
||||||
|
|
||||||
button.remove();
|
if (imageURLs.length === 0) {
|
||||||
|
imageURLs = initialImageURLs;
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSeeMoreClick(seeMoreElement, post, button) {
|
alert(
|
||||||
setTimeout(() => {
|
JSON.stringify({
|
||||||
seeMoreElement.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
|
caption: fullCaption,
|
||||||
seeMoreElement.dispatchEvent(new PointerEvent("pointerup", { bubbles: true }));
|
imageUrls: imageUrls,
|
||||||
seeMoreElement.click();
|
}));
|
||||||
|
|
||||||
setTimeout(() => {
|
button.textContent = "Processed";
|
||||||
collectDataImmediately(post, button);
|
button.style.opacity = "0.7";
|
||||||
}, 1000);
|
button.disabled = true;
|
||||||
}, 100);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Mutation observer to handle new posts
|
||||||
function handleMutations(mutationsList) {
|
function handleMutations(mutationsList) {
|
||||||
mutationsList.forEach((mutation) => {
|
mutationsList.forEach((mutation) => {
|
||||||
if (mutation.type === "childList" || mutation.type === "subtree") {
|
if (mutation.type === "childList" || mutation.type === "subtree") {
|
||||||
const posts = document.querySelectorAll("div.m.bg-s3");
|
document.querySelectorAll("div.m.bg-s3").forEach((post) => {
|
||||||
posts.forEach((post) => {
|
|
||||||
if (!post.querySelector("button")) {
|
if (!post.querySelector("button")) {
|
||||||
collectPostData(post);
|
collectPostData(post);
|
||||||
}
|
}
|
||||||
|
|
@ -107,11 +177,13 @@ export default function HomeScreen() {
|
||||||
}
|
}
|
||||||
|
|
||||||
const observer = new MutationObserver(handleMutations);
|
const observer = new MutationObserver(handleMutations);
|
||||||
observer.observe(document.querySelector(".m"), { childList: true, subtree: true });
|
observer.observe(document.querySelector(".m"), {
|
||||||
|
childList: true,
|
||||||
|
subtree: true,
|
||||||
|
});
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
const posts = document.querySelectorAll("div.m.bg-s3");
|
document.querySelectorAll("div.m.bg-s3").forEach((post) => {
|
||||||
posts.forEach((post) => {
|
|
||||||
if (!post.dataset.processed) {
|
if (!post.dataset.processed) {
|
||||||
collectPostData(post);
|
collectPostData(post);
|
||||||
}
|
}
|
||||||
|
|
@ -122,33 +194,9 @@ export default function HomeScreen() {
|
||||||
return (
|
return (
|
||||||
<WebView
|
<WebView
|
||||||
ref={webviewRef}
|
ref={webviewRef}
|
||||||
source={{ uri: "https://www.facebook.com" }}
|
source={{ uri: "https://m.facebook.com/?__n=K" }}
|
||||||
injectedJavaScript={injectedJavaScript}
|
injectedJavaScript={injectedJavaScript}
|
||||||
startInLoadingState={true}
|
startInLoadingState={true}
|
||||||
onLoadEnd={() => {
|
|
||||||
if (webviewRef.current) {
|
|
||||||
webviewRef.current.injectJavaScript(injectedJavaScript);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
titleContainer: {
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: 8,
|
|
||||||
},
|
|
||||||
stepContainer: {
|
|
||||||
gap: 8,
|
|
||||||
marginBottom: 8,
|
|
||||||
},
|
|
||||||
reactLogo: {
|
|
||||||
height: 178,
|
|
||||||
width: 290,
|
|
||||||
bottom: 0,
|
|
||||||
left: 0,
|
|
||||||
position: "absolute",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue