@articles-media/articles-dev-box 1.0.17 → 1.0.23

package/README.md

@@ -49,20 +49,21 @@ npm run dev
     - View user profile data and recent activity.
 - SettingsModal
     - All in one component to handle game settings UI across multiple games.
+- CreditsModal
+    - All in one component to handle game credits UI across multiple games.
 - DarkModeHandler
     - Consumes a Zustand store, detects prefers-color-scheme, sets data-bs-theme on body element.
 - useUserToken
     - Hook for getting the subdomain auth token.
 - useUserDetails
     - Hook for getting the details of the current user if a valid user token is found.
+- useFullscreen
+    - Hook for going fullscreen on the body or provided element
 
 # Roadmap
 ⏹️ Remove Bootstrap reliance  
-⏹️ Look into npm package yalc  
-⏹️ Automatic GitHub Action for NPM are done but need to figure out how to show verified build badge on NPM.  
-⏹️ Figure out why this package does not work outside webpack, on Turbopack for example it fails.
-
+⏹️ Figure out why this package does not work outside webpack, on Turbopack for example it fails. Bootstrap SASS related I think.  
 
 # TODO
-- Bundle SCSS on a component level instead of a project level.
+- Bundle SCSS on a component level instead of a project level.  
 - Verify I am exporting components the most efficient way.

package/dist/Ad-Ck5UdTq3.js

@@ -0,0 +1,387 @@
+import { r as e, t } from "./jsx-runtime-VZk6y-ec.js";
+import { t as n } from "./classnames-DP6dWde5.js";
+import { t as r } from "./Button-BlAdEbSd.js";
+import { t as i } from "./Link-MFZblBb4.js";
+import { n as a, t as o } from "./numberWithCommas-BSKBdR-e.js";
+import { lazy as s, memo as c, useEffect as l, useState as u } from "react";
+import { useInView as d } from "react-intersection-observer";
+import f from "swr";
+import { differenceInMinutes as p, minutesToMilliseconds as m } from "date-fns";
+//#region src/hooks/Ads/useAd.js
+var h = async (e) => {
+	if (process.env.NODE_ENV === "development") try {
+		let t = new URLSearchParams({
+			ad_id: e.ad_id,
+			user_ad_token: e.user_ad_token
+		}).toString();
+		return (await (await fetch(`http://localhost:3001/api/ads/${e.ad_id}?${t}`)).json()).result;
+	} catch {}
+	let t = new URLSearchParams({ ad_id: e.ad_id }).toString();
+	return fetch(`${e.url}?${t}`).then((e) => e.json()).then((e) => e.result);
+}, g = { dedupingInterval: 1e3 * 60 * 60 }, _ = (e, t) => {
+	let { data: n, error: r, isLoading: i, mutate: a } = f(e ? {
+		url: `https://articles.media/api/ads/${e}`,
+		ad_id: e,
+		user_ad_token: t
+	} : null, h, g);
+	return {
+		data: n,
+		error: r,
+		isLoading: i,
+		mutate: a
+	};
+}, v = async (e) => {
+	if (process.env.NODE_ENV === "development") try {
+		return await (await fetch("http://localhost:3001/api/ads")).json();
+	} catch {}
+	return fetch(e.url).then((e) => e.json());
+}, y = 60, b = {
+	dedupingInterval: m(y),
+	focusThrottleInterval: m(y)
+}, x = (e) => {
+	let { data: t, error: n, isLoading: r, mutate: i } = f(e?.loading || e?.disabled ? null : { url: "https://articles.media/api/ads" }, v, b);
+	return {
+		data: t,
+		error: n,
+		isLoading: r,
+		mutate: i
+	};
+}, S = t(), C = /* @__PURE__ */ e(n(), 1), w = s(() => import("./AdDetailsModal-DRNRTL2W.js")), T = s(() => import("./AdConfirmExitModal-CJ-HtcVC.js"));
+function E(e, t) {
+	return Math.floor(Math.random() * (t - e + 1)) + e;
+}
+function D(e) {
+	let { previewMode: t, darkMode: n, user_ad_token: s, userDetails: c, userDetailsLoading: f, prepend: m, append: h } = e, g = [], [v, y] = u(null), { data: b, isLoading: D, mutate: O } = x({
+		loading: f,
+		disabled: c?.articles_membership?.status == "Active"
+	}), { data: k, isLoading: ee } = _(v, s), A = e.previewData || {}, [te, ne] = u(null), [j, M] = u(null), [N, P] = u(null), [F, I] = u(0), [L, R] = u(!1), [z, B] = u(!1), [V, H] = u(!1), [re, ie] = u(/* @__PURE__ */ new Date()), [U, W] = u([]);
+	l(() => {
+		b && b?.length > 0 && !v && (console.log("Ad Mounted or reduxAds changed"), y(e.ad_id || b[E(0, b?.length - 1)]?._id));
+	}, [b]), l(() => {}, [k]), l(() => {
+		k?.populated_promos && F >= 0 && P(k?.populated_promos[F]);
+	}, [F, k]);
+	function G() {
+		B(!z);
+	}
+	let { ref: K, inView: q, entry: ae } = d({
+		threshold: 0,
+		triggerOnce: !0
+	});
+	function J(e) {
+		if (t && console.log("Preventing this event from being logged as this ad is being shown in preview mode."), U.find((t) => t == e)) {
+			console.log("Already logged this event");
+			return;
+		}
+		let n = new URLSearchParams({
+			ad_id: k?._id,
+			event: e
+		}).toString();
+		fetch(`/api/ads/event?${n}`).then(function(e) {
+			return e.json();
+		}).then(function(t) {
+			W([...U, e]), console.log(t);
+		}).catch(function(e) {
+			console.log(e);
+		});
+	}
+	l(() => {
+		if (!t && (console.log("inView", q), q && v)) {
+			let e = [{
+				ad_id: v,
+				date: (/* @__PURE__ */ new Date()).toString()
+			}, ...g.filter((e) => {
+				if (console.log(p(/* @__PURE__ */ new Date(), new Date(e.date))), p(/* @__PURE__ */ new Date(), new Date(e.date)) > 5) {
+					console.log("adsViewed - Remove Old Ad View Object");
+					return;
+				} else return console.log("adsViewed - Keep Ad View Object"), e;
+			})];
+			console.log("unexpiredRecentViews", e);
+		}
+	}, [q, v]);
+	let [Y, X] = u(null), [Z, Q] = u(!1);
+	function $() {
+		Q(!0), console.log("logAdAvoided called", s);
+		let e = process.env.NODE_ENV === "development" ? "http://localhost:3001/api/user/advertising/avoided" : "https://articles.media/api/user/advertising/avoided", t = new URLSearchParams({ user_id: c?._id }).toString();
+		fetch(`${e}?${t}`, { headers: { "x-articles-api-key": s } }).then(function(e) {
+			return e.json();
+		}).then(function(e) {
+			Q(!1), X(e.avoided_count), console.log(e);
+		}).catch(function(e) {
+			console.log(e), Q(!1);
+		});
+	}
+	return l(() => {
+		t || (console.log("inView", q), c?.articles_membership?.status == "Active" && q && $("Ad Avoided"));
+	}, [q, c]), f ? null : /* @__PURE__ */ (0, S.jsxs)("div", {
+		ref: K,
+		className: (0, C.default)("ad-wrap", { "active-member": c?.articles_membership?.status == "Active" }),
+		style: {
+			"--articles-ad-background-color": A.background_color || k?.background_color,
+			"--articles-ad-font-color": A.font_color || k?.font_color,
+			"--articles-ad-border-color": A.border_color || k?.border_color
+		},
+		children: [
+			z && /* @__PURE__ */ (0, S.jsx)(w, {
+				setModalShow: B,
+				ad: k,
+				previewData: A
+			}),
+			V && /* @__PURE__ */ (0, S.jsx)(T, {
+				setModalShow: H,
+				ad: k,
+				previewData: A
+			}),
+			m && /* @__PURE__ */ (0, S.jsx)("div", {
+				className: "prepend-container",
+				children: m
+			}),
+			/* @__PURE__ */ (0, S.jsxs)("div", {
+				className: "ad",
+				children: [c?.articles_membership?.status !== "Active" && /* @__PURE__ */ (0, S.jsxs)("div", {
+					className: "main-panel",
+					children: [
+						/* @__PURE__ */ (0, S.jsx)("div", {
+							className: "ad-warning flex-header",
+							children: /* @__PURE__ */ (0, S.jsxs)("div", {
+								className: "",
+								children: [k?.city && "Local", " Advertisement"]
+							})
+						}),
+						/* @__PURE__ */ (0, S.jsxs)("div", {
+							className: "content-wrap",
+							children: [/* @__PURE__ */ (0, S.jsxs)("div", {
+								className: "photo-banner",
+								children: [
+									/* @__PURE__ */ (0, S.jsx)("div", {
+										className: "logo",
+										children: (A.logo?.location || k?.logo?.location) && /* @__PURE__ */ (0, S.jsx)("img", {
+											src: A?.logo?.key ? `${process.env.NEXT_PUBLIC_CDN}${A?.logo?.key}` : `${process.env.NEXT_PUBLIC_CDN}${k?.logo?.key}`,
+											alt: ""
+										})
+									}),
+									/* @__PURE__ */ (0, S.jsx)("div", {
+										className: "icon d-none",
+										children: /* @__PURE__ */ (0, S.jsx)("i", { className: "fas fa-mug-hot" })
+									}),
+									/* @__PURE__ */ (0, S.jsx)("img", {
+										className: "photo",
+										src: A?.background?.key ? `${process.env.NEXT_PUBLIC_CDN}${A.background?.key}` : `${process.env.NEXT_PUBLIC_CDN}${k?.background?.key}`,
+										alt: ""
+									})
+								]
+							}), /* @__PURE__ */ (0, S.jsxs)("div", {
+								className: "details-wrap",
+								children: [
+									/* @__PURE__ */ (0, S.jsxs)("div", {
+										className: "detail-title",
+										children: [/* @__PURE__ */ (0, S.jsx)("div", {
+											className: "detail",
+											children: /* @__PURE__ */ (0, S.jsx)("span", {
+												className: "h4",
+												children: A?.business || k?.business
+											})
+										}), /* @__PURE__ */ (0, S.jsxs)("div", {
+											className: "flex flex-column d-none",
+											children: [/* @__PURE__ */ (0, S.jsxs)("div", {
+												className: "detail",
+												children: [/* @__PURE__ */ (0, S.jsx)("span", {
+													className: "icon",
+													children: /* @__PURE__ */ (0, S.jsx)("i", { className: "fas fa-search-location" })
+												}), /* @__PURE__ */ (0, S.jsxs)("span", { children: [
+													k?.city,
+													", ",
+													k?.state
+												] })]
+											}), /* @__PURE__ */ (0, S.jsxs)("div", {
+												className: "detail",
+												children: [/* @__PURE__ */ (0, S.jsx)("span", {
+													className: "icon",
+													children: /* @__PURE__ */ (0, S.jsx)("i", { className: "fas fa-clock me-2" })
+												}), /* @__PURE__ */ (0, S.jsx)("span", { children: "6:30AM–8PM" })]
+											})]
+										})]
+									}),
+									k?.city && /* @__PURE__ */ (0, S.jsx)("div", { className: "details mb-3 d-none" }),
+									/* @__PURE__ */ (0, S.jsx)("div", {
+										className: "short-description",
+										children: A?.description || k?.description
+									})
+								]
+							})]
+						}),
+						(!1)?.roles?.isDev && k?.populated_promos?.length > 0 && /* @__PURE__ */ (0, S.jsxs)("div", { children: [N && /* @__PURE__ */ (0, S.jsx)("div", {
+							className: "promos-wrap",
+							children: N && /* @__PURE__ */ (0, S.jsxs)("div", {
+								className: "promo-wrap d-flex justify-content-between align-items-center mx-2 p-1 px-2 border border-2 border-light mb-0",
+								children: [/* @__PURE__ */ (0, S.jsxs)("div", {
+									className: "",
+									children: [/* @__PURE__ */ (0, S.jsx)("div", { children: N.title }), /* @__PURE__ */ (0, S.jsx)("div", {
+										className: "small",
+										children: /* @__PURE__ */ (0, S.jsx)("div", {
+											className: "small",
+											children: N.details
+										})
+									})]
+								}), /* @__PURE__ */ (0, S.jsx)(r, {
+									className: "px-3",
+									small: !0,
+									onClick: () => {
+										console.log("Load Save Modal"), R(!0);
+									},
+									children: "Save"
+								})]
+							}, N._id)
+						}), /* @__PURE__ */ (0, S.jsxs)("div", {
+							className: "d-flex justify-content-between",
+							children: [/* @__PURE__ */ (0, S.jsxs)("div", {
+								className: "px-2",
+								children: [k?.populated_promos?.length, " Promos Active"]
+							}), /* @__PURE__ */ (0, S.jsxs)("div", {
+								className: "controls",
+								children: [
+									/* @__PURE__ */ (0, S.jsx)("i", {
+										className: "fad fa-arrow-circle-left",
+										type: "button",
+										onClick: () => {
+											I(F == 0 ? k?.populated_promos?.length - 1 : (e) => e - 1);
+										}
+									}),
+									k?.populated_promos?.map((e, t) => /* @__PURE__ */ (0, S.jsx)("i", { className: `fa-square ${t == F ? "fad" : "fas"}` }, e._id)),
+									/* @__PURE__ */ (0, S.jsx)("i", {
+										className: "fad fa-arrow-circle-right",
+										type: "button",
+										onClick: () => {
+											F == k?.populated_promos?.length - 1 ? I(0) : I((e) => e + 1);
+										}
+									})
+								]
+							})]
+						})] }),
+						/* @__PURE__ */ (0, S.jsx)("hr", {
+							style: { borderColor: "white" },
+							className: "mt-auto mb-0"
+						}),
+						/* @__PURE__ */ (0, S.jsxs)("div", {
+							className: "action-wrap d-flex justify-content-lg-between px-3 py-2",
+							children: [
+								/* @__PURE__ */ (0, S.jsx)("div", {
+									onClick: () => {
+										G(), J("Details");
+									},
+									className: "action flex-grow-1 flex-shrink-0",
+									children: "Details"
+								}),
+								/* @__PURE__ */ (0, S.jsx)("span", { className: "px-4" }),
+								/* @__PURE__ */ (0, S.jsx)("a", {
+									className: "action flex-grow-1 flex-shrink-0",
+									href: k?.website,
+									target: "_blank",
+									rel: "noreferrer",
+									onClick: (e) => {
+										e.preventDefault(), H(!0), J("Confirm Exit Modal Opened");
+									},
+									children: /* @__PURE__ */ (0, S.jsx)("div", { children: "Website" })
+								})
+							]
+						})
+					]
+				}), c?.articles_membership?.status == "Active" && /* @__PURE__ */ (0, S.jsx)("div", {
+					className: "main-panel",
+					children: /* @__PURE__ */ (0, S.jsxs)("div", {
+						className: "content-wrap",
+						children: [/* @__PURE__ */ (0, S.jsxs)("div", {
+							className: "photo-banner",
+							children: [
+								/* @__PURE__ */ (0, S.jsx)("div", { className: "logo" }),
+								/* @__PURE__ */ (0, S.jsxs)("div", {
+									className: "splash",
+									children: [/* @__PURE__ */ (0, S.jsx)("i", { className: "fas fa-broadcast-tower" }), /* @__PURE__ */ (0, S.jsxs)("div", {
+										className: "text",
+										children: [/* @__PURE__ */ (0, S.jsx)("div", {
+											className: "count",
+											children: Z ? /* @__PURE__ */ (0, S.jsx)("i", { className: "fas fa-spinner fa-spin me-0" }) : Y ? o(Y) : 0
+										}), /* @__PURE__ */ (0, S.jsx)("div", {
+											className: "label",
+											children: "ads avoided."
+										})]
+									})]
+								}),
+								/* @__PURE__ */ (0, S.jsxs)("div", {
+									className: "member-since",
+									children: ["Member since: ", /* @__PURE__ */ (0, S.jsx)(a, {
+										format: "PP",
+										date: c?.articles_membership?.membership_started
+									})]
+								})
+							]
+						}), /* @__PURE__ */ (0, S.jsxs)("div", {
+							className: "details-wrap",
+							children: [/* @__PURE__ */ (0, S.jsx)("div", {
+								className: "detail-title",
+								children: /* @__PURE__ */ (0, S.jsx)("div", {
+									className: "detail",
+									children: /* @__PURE__ */ (0, S.jsx)("span", {
+										className: "h4",
+										children: "Thanks for the support!"
+									})
+								})
+							}), /* @__PURE__ */ (0, S.jsxs)("div", {
+								className: "short-description",
+								children: [/* @__PURE__ */ (0, S.jsx)("div", {
+									className: "mb-2",
+									children: "Without support from users like you, we wouldn't be here."
+								}), /* @__PURE__ */ (0, S.jsxs)("div", {
+									className: "links-list",
+									children: [
+										/* @__PURE__ */ (0, S.jsxs)(i, {
+											newPage: !0,
+											className: "link-item",
+											href: "https://articles.media/messages",
+											children: [/* @__PURE__ */ (0, S.jsx)("i", { className: "fas fa-comments-alt" }), "0 unread messages."]
+										}),
+										/* @__PURE__ */ (0, S.jsxs)(i, {
+											newPage: !0,
+											className: "link-item",
+											href: "https://articles.media/settings/notifications",
+											onClick: () => {
+												$();
+											},
+											children: [/* @__PURE__ */ (0, S.jsx)("i", { className: "fas fa-bell" }), "0 notifications."]
+										}),
+										/* @__PURE__ */ (0, S.jsxs)(i, {
+											newPage: !0,
+											className: "link-item",
+											href: "https://articles.media/settings/account",
+											children: [/* @__PURE__ */ (0, S.jsx)("i", { className: "fas fa-cog" }), "Manage account settings."]
+										})
+									]
+								})]
+							})]
+						})]
+					})
+				})]
+			}),
+			h && /* @__PURE__ */ (0, S.jsx)("div", {
+				className: "append-container",
+				children: h
+			}),
+			!t && /* @__PURE__ */ (0, S.jsx)("div", {
+				className: "advertise-with-us p-1",
+				style: {
+					backgroundColor: A.background_color || k?.background_color,
+					color: A.font_color || k?.font_color,
+					borderColor: A.border_color || k?.border_color
+				},
+				children: /* @__PURE__ */ (0, S.jsxs)(i, {
+					className: "small d-block w-100 text-center",
+					href: "https://articles.media/advertising",
+					newPage: !0,
+					children: [/* @__PURE__ */ (0, S.jsx)("i", { className: "fas fa-share me-1" }), "Advertise with Articles Media!"]
+				})
+			})
+		]
+	});
+}
+var O = c(D);
+//#endregion
+export { O as t };