From 8bf578e6d9bcdf587cd662ff6b6cb9f31e31d544 Mon Sep 17 00:00:00 2001 From: dm Date: Wed, 26 Nov 2025 09:15:29 +0100 Subject: [PATCH] =?UTF-8?q?Zmiana=20iframe=20listy=20kana=C5=82ow=20na=20p?= =?UTF-8?q?obierane=20lokalnie=20i=20parsowane?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sections/SectionIframeChannels.astro | 16 +++-- src/islands/ChannelSwitcher.jsx | 56 +++++++++++++----- src/pages/api/jambox/[id].ts | 42 +++++++++++++ src/styles/cookie.css | 36 ++++------- src/styles/offers/offers-switches.css | 4 +- src/styles/sections.css | 12 +++- src/styles/theme.css | 59 ++++--------------- 7 files changed, 129 insertions(+), 96 deletions(-) create mode 100644 src/pages/api/jambox/[id].ts diff --git a/src/components/sections/SectionIframeChannels.astro b/src/components/sections/SectionIframeChannels.astro index 3ba2c9a..4990da3 100644 --- a/src/components/sections/SectionIframeChannels.astro +++ b/src/components/sections/SectionIframeChannels.astro @@ -1,20 +1,26 @@ --- import ChannelSwitcher from "../../islands/ChannelSwitcher.jsx"; - const { section } = Astro.props; --- -
+ +
{section.title && ( -

{section.title}

+

{section.title}

)} {section.content && ( -
+
)} - + {section.iframe_sets && section.iframe_sets.length > 0 && ( + + )}
diff --git a/src/islands/ChannelSwitcher.jsx b/src/islands/ChannelSwitcher.jsx index 6a7ae56..d072995 100644 --- a/src/islands/ChannelSwitcher.jsx +++ b/src/islands/ChannelSwitcher.jsx @@ -1,19 +1,32 @@ -import { useState } from "preact/hooks"; +import { useState, useEffect } from "preact/hooks"; export default function ChannelSwitcher({ sets = [], title = "" }) { const [activeId, setActiveId] = useState(sets[0]?.id); + const [channels, setChannels] = useState([]); const active = sets.find((x) => x.id === activeId); - const iframeSrc = `https://www.jambox.pl/iframe-pakiet-logo?p=${active?.p}`; + + useEffect(() => { + if (!active) return; + + fetch(`/api/jambox/${active.p}`) + .then((r) => r.json()) + .then((data) => { + setChannels(data); + }) + .catch(() => setChannels([])); + }, [active]); return (
+ + {/* SWITCHER */}
-
+
{sets.map((s) => (
- {/* 🔹 Iframe */} -
-
- -
+ {/* LISTA KANAŁÓW */} +
+ + {channels.length === 0 && ( +

+ Ładowanie… +

+ )} + + {channels.map((ch) => ( +
+ {ch.title} +

+ {ch.title} +

+
+ ))} +
diff --git a/src/pages/api/jambox/[id].ts b/src/pages/api/jambox/[id].ts new file mode 100644 index 0000000..6b28a9b --- /dev/null +++ b/src/pages/api/jambox/[id].ts @@ -0,0 +1,42 @@ +import type { APIRoute } from "astro"; +import { JSDOM } from "jsdom"; + +interface Channel { + title: string; + logo: string; +} + +const cache = new Map(); +const CACHE_TIME = 1000 * 60 * 60 * 24 * 30; //miesiąc + +export const GET: APIRoute = async ({ params }) => { + const id = params.id!; + const cached = cache.get(id); + + if (cached && Date.now() - cached.time < CACHE_TIME) { + return new Response(JSON.stringify(cached.data), { + headers: { "Content-Type": "application/json" } + }); + } + + const url = `https://www.jambox.pl/iframe-pakiet-logo?p=${id}`; + const resp = await fetch(url, { headers: { "User-Agent": "Mozilla/5.0" } }); + + const html = await resp.text(); + const dom = new JSDOM(html); + + const images = [ + ...dom.window.document.querySelectorAll("img.imagefield-field_logo") +]; + +const channels = images.map((img) => ({ + title: img.getAttribute("alt")?.trim() ?? "", + logo: img.getAttribute("src") ?? "", +})); + + cache.set(id, { time: Date.now(), data: channels }); + + return new Response(JSON.stringify(channels), { + headers: { "Content-Type": "application/json" } + }); +}; diff --git a/src/styles/cookie.css b/src/styles/cookie.css index dd4a63c..40ac9fa 100644 --- a/src/styles/cookie.css +++ b/src/styles/cookie.css @@ -1,48 +1,36 @@ @layer components { #cookie-banner { @apply fixed bottom-0 left-0 w-full translate-y-full transition-transform duration-500 ease-in-out; - background: var(--f-background-invert); - color: var(--f-text-invert); - border-top: 1px solid rgba(0, 0, 0, 0.1); + background: var(--f-cookie-background); + color: var(--f-cookie-text); + /* border-top: 1px solid rgba(0, 0, 0, 0.1); */ } .f-cookie-panel-inner { - @apply max-w-4xl mx-auto flex flex-col md:flex-row items-start - md:items-center justify-between gap-4 px-6 py-6; + @apply max-w-5xl mx-auto flex flex-col md:flex-row items-start md:items-center justify-between gap-4 px-6 py-6; } - .f-cookie-text{ + .f-cookie-text { @apply text-base leading-snug; } .f-cookie-privacy-link { @apply ml-3; - color: var(--btn-outline-invert); + color: var(--f-link-text); } .f-cookie-accept, .f-cookie-reject { - @apply px-4 py-2 rounded-md text-sm font-medium transition-colors; + @apply px-8 py-4 rounded-md text-sm font-medium transition-colors; } - .f-cookie-accept { - background: var(--btn-bg-invert); - color: var(--btn-text-invert); - } - - .f-cookie-accept:hover { - background: var(--fuz-accent-hover); + .f-cookie-accept { + background: var(--f-cookie-accept-background); + color: var(--f-cookie-accept-text); } .f-cookie-reject { - @apply border; - border-color: var(--btn-outline-invert); - color: var(--btn-outline-invert); - background: transparent; + background: var(--f-cookie-reject-background); + color: var(--f-cookie-reject-text); } - - .f-cookie-reject:hover { - background: var(--btn-outline-bg-invert); - } - } \ No newline at end of file diff --git a/src/styles/offers/offers-switches.css b/src/styles/offers/offers-switches.css index 6fbbc77..09c0b94 100644 --- a/src/styles/offers/offers-switches.css +++ b/src/styles/offers/offers-switches.css @@ -1,9 +1,9 @@ .f-switches-wrapper { - @apply flex flex-wrap justify-center gap-6 mb-12; + @apply flex flex-wrap justify-center gap-6 mb-10; } .f-switch-group { - @apply inline-flex overflow-hidden relative bg-[var(--f-background-switch)]; + @apply inline-flex overflow-hidden relative bg-[var(--f-background-switch)] mt-8; } .f-switch { diff --git a/src/styles/sections.css b/src/styles/sections.css index 531e7e7..1db05ad 100644 --- a/src/styles/sections.css +++ b/src/styles/sections.css @@ -43,7 +43,15 @@ } -.fuz-iframe-box { +.f-section-channel { + @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-8 gap-2; +} + +.f-channel-box { + @apply flex flex-col items-center p-4 rounded-xl bg-[var(--f-background)] border border-[var(--f-offers-border)] shadow-sm hover:shadow-md transition +} + +/* .fuz-iframe-box { @apply bg-white dark:bg-slate-800 p-4 rounded-xl border border-gray-200 dark:border-slate-700 shadow; } @@ -64,4 +72,4 @@ .dark .fuz-iframe { background: transparent !important; -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/src/styles/theme.css b/src/styles/theme.css index 19feb0c..580b647 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -69,27 +69,12 @@ --f-offers-popular: var(--brand-light); --f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent); - /* Invert Color */ - /* --f-background-invert: #0d1117; - --f-text-invert: #e6edf3; - --btn-bg-invert: #58a6ff; - --btn-text-invert: #0d1117; - --btn-outline-invert: #58a6ff; - --btn-outline-bg-invert: rgba(88, 166, 255, 0.15); */ - /* Links */ - /* --fuz-link: #0050c8; - --fuz-link-hover: #003f9a; */ + --f-cookie-background: var(--text1-light); + --f-cookie-text: var(--surface2-light); - /* Accent (buttons, highlights) */ - /* --fuz-accent: #0066ff; - --fuz-accent-hover: #004bcc; - --fuz-accent-text: #ffffff; - - - --btn-ghost-text: var(--f-text); - --btn-ghost-hover-bg: rgba(0, 0, 0, 0.05); - ---f-border-color: rgb(209 213 219); */ - /* / var(--tw-border-opacity, 1)); */ + --f-cookie-accept-background: green; + /* --f-cookie-accept-text: */ + --f-cookie-reject-background: var(--text2-light); } :root.dark { @@ -128,36 +113,12 @@ --f-offers-popular: var(--brand-dark); --f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent); + --f-cookie-background: var(--text1-light); + --f-cookie-text: var(--surface2-light); - - /* Invert Color */ - --f-background-invert: #ffffff; - --f-text-invert: #0d0d0d; - --btn-bg-invert: #0066ff; - --btn-text-invert: #ffffff; - --btn-outline-invert: #0066ff; - - /* Links (GitHub Dark palette) */ - --fuz-link: var(--brand-dim); - --fuz-link-hover: #79b7ff; - - - - /* Accent */ - --fuz-accent: hsl(var(--hue) calc(var(--saturation) / 1.25) calc(var(--lightness) / 1.25)); - --fuz-accent-hover: #79b7ff; - --fuz-accent-text: #0d1117; - - /* Buttons */ - - - - - --btn-ghost-text: var(--f-text); - --btn-ghost-hover-bg: rgba(255, 255, 255, 0.08); - - --f-border-color: rgb(209 213 219); - /* / var(--tw-border-opacity, 1)) */ + --f-cookie-accept-background: green; + /* --f-cookie-accept-text: */ + --f-cookie-reject-background: var(--text2-light); } /* Body */