&bsp;&bsp;/iframe> </p> </center> </td> </tr> </tbody> </table> <p> </p> <!-- TEMPLATE: KPFK Show Page v2.2 | Community Radio Aesthetic --> <!-- TEMPLATE: KPFK Show Page CSS v2.2 | Community Radio Aesthetic --> <!-- Compatible with existing n8n flow --> <!-- Includes shared component styles for snippets 886, 887, 888, 889 --> <!-- v2.2 CHANGES: Masthead double-rule, 240px logo with social sidebar, stamp-style tags --> <style type="text/css"> /* === KPFK SHOW PAGE STYLES === */ /* Hide redundant AIIR header */ .o-headline { display: none !important; } /* Scroll offset for episodes anchor */ #episodes::before { content: ""; display: block; height: 100px; margin-top: -100px; visibility: hidden; } /* Base typography - newspaper feel */ .show-page { font-family: Georgia, 'Times New Roman', serif; color: #1a1a1a; line-height: 1.5; } .show-page h1, .show-page h2, .show-page h3 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; } /* === SHOW HEADER (MASTHEAD) === */ .show-header { display: flex; flex-wrap: wrap; gap: 24px; padding: 0 0 24px 0; margin-bottom: 40px; /* Space for double-rule */ border-bottom: 4px solid #c41e3a; position: relative; } /* Double-rule: 1px gray line 8px below the red */ .show-header::after { content: ""; position: absolute; bottom: -12px; /* 4px border + 8px gap = 12px below container */ left: 0; right: 0; height: 1px; background: #e0e0e0; } /* Left column: Logo + Social */ .show-logo-column { flex: 0 0 240px; display: flex; flex-direction: column; gap: 16px; } .show-logo { width: 240px; height: 240px; object-fit: cover; object-position: center; border: 3px solid #1a1a1a; } /* Social links - anchored under logo */ .social-links { display: flex; flex-wrap: wrap; gap: 12px; } .social-links a { display: inline-block; opacity: 0.6; transition: opacity 0.15s; } .social-links a:hover { opacity: 1; } .social-links a:hover img { /* Filter to convert black to KPFK red #c41e3a */ filter: brightness(0) saturate(100%) invert(19%) sepia(97%) saturate(2175%) hue-rotate(340deg) brightness(89%) contrast(95%); } .social-links img { width: 20px; height: 20px; transition: filter 0.15s; } /* Right column: Show info */ .show-info { flex: 1; min-width: 280px; display: flex; flex-direction: column; } .show-title { margin: 0 0 8px 0; font-size: 32px; line-height: 1; color: #1a1a1a; } .show-tagline { margin: 0 0 16px 0; font-size: 18px; font-style: italic; color: #333; font-family: Georgia, 'Times New Roman', serif; } .show-schedule { display: inline-block; background: #1a1a1a; color: #fff; padding: 6px 12px; font-family: 'Courier New', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; align-self: flex-start; } .show-host { font-size: 14px; color: #555; margin-bottom: 16px; } /* Buttons - flat, urgent, no gradients */ .btn-listen, .btn-contact { display: inline-block; padding: 12px 20px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; border: 3px solid; color: #fff; transition: background 0.15s, color 0.15s; margin-right: 8px; margin-bottom: 8px; cursor: pointer; } .btn-listen { background: #c41e3a; color: #fff; border-color: #c41e3a; } .btn-listen:hover { background: #1a1a1a; border-color: #1a1a1a; color: #fff; } .btn-contact { background: transparent; color: #1a1a1a; border-color: #1a1a1a; } .btn-contact:hover { background: #1a1a1a; color: #fff; } /* === SECTION DIVIDERS === */ .section-divider { height: 1px; background: #e0e0e0; margin: 32px 0; border: none; } .section-divider--heavy { height: 4px; background: #1a1a1a; } /* === SECTION HEADERS === */ .section-header { font-size: 14px; margin: 0 0 16px 0; padding-bottom: 8px; border-bottom: 2px solid #c41e3a; display: inline-block; } /* === OVERVIEW SECTION === */ .show-overview p { font-size: 17px; line-height: 1.6; margin-bottom: 16px; max-width: 680px; } .show-overview p:first-of-type::first-letter { font-size: 3.2em; float: left; line-height: 0.8; margin: 4px 4px 0 0; font-weight: 700; color: #c41e3a; } /* === TAGS - Archive Stamp Style === */ .show-tags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; } .tag { display: inline-block; padding: 5px 12px; font-family: 'Courier New', monospace; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border: 2px solid; background: transparent; cursor: default; } /* Topic tags - KPFK Red (primary) */ .tag--topic { color: #c41e3a; border-color: #c41e3a; } /* Format tags - Black */ .tag--format { color: #1a1a1a; border-color: #1a1a1a; } /* Audience tags - Dark charcoal */ .tag--audience { color: #444; border-color: #444; } /* === HISTORY SECTION === */ .show-history p { font-size: 16px; line-height: 1.6; max-width: 680px; } /* === HOST BIOS === */ .hosts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); gap: 24px; } .host-card { border: 3px solid #1a1a1a; padding: 0; background: #fff; max-width: 320px; } .host-image { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-bottom: 3px solid #1a1a1a; filter: grayscale(30%); } .host-info { padding: 16px; } .host-name { margin: 0 0 8px 0; font-size: 18px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 900; text-transform: uppercase; } .host-bio { font-size: 14px; line-height: 1.5; color: #333; margin: 0; } /* === COLLAPSIBLE HOSTS (for shows with many hosts) === */ .hosts-collapsible { border: 3px solid #1a1a1a; margin-bottom: 20px; } .hosts-collapsible__toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px; background: #f8f8f8; border: none; border-bottom: 2px solid #e0e0e0; cursor: pointer; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .hosts-collapsible__toggle:hover { background: #f0f0f0; } .hosts-collapsible__arrow { transition: transform 0.2s; } .hosts-collapsible[open] .hosts-collapsible__arrow { transform: rotate(180deg); } .hosts-collapsible__content { padding: 20px; } /* === DONATE SECTION === */ .donate-section { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 24px 0; margin-top: 32px; border-top: 3px solid #c41e3a; } .donate-content { flex: 1; min-width: 280px; } .donate-section h2 { font-size: 16px; margin: 0 0 4px 0; color: #1a1a1a; } .donate-section p { font-size: 15px; line-height: 1.5; margin: 0; color: #555; max-width: 520px; } .btn-donate { display: inline-block; padding: 12px 24px; background: #c41e3a; color: #fff; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; border: 3px solid #c41e3a; transition: background 0.15s, color 0.15s; } .btn-donate:hover { background: #1a1a1a; border-color: #1a1a1a; color: #fff; } /* === EPISODE PLAYER CONTAINER === */ .episodes-container { margin-top: 16px; } /* ============================================================ SHARED COMPONENT STYLES (for snippets 886, 887, 888) ============================================================ */ /* --- Component Base --- */ .kpfk-component { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.5; color: #1a1a1a; background: #fff; border: 3px solid #1a1a1a; margin-bottom: 24px; max-width: 100%; } .kpfk-component *, .kpfk-component *::before, .kpfk-component *::after { box-sizing: border-box; } /* --- Component Header (white style) --- */ .kpfk-component__header { display: flex; align-items: center; padding: 16px; background: #fff; border-bottom: 3px solid #c41e3a; position: relative; } .kpfk-component__header-content { flex: 1; min-width: 0; } .kpfk-component__label { font-family: 'Courier New', monospace; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #555; margin-bottom: 2px; } .kpfk-component__title { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 900; font-size: 1.1rem; text-transform: uppercase; letter-spacing: -0.02em; color: #1a1a1a; margin: 0; word-wrap: break-word; } .kpfk-component__subtitle { font-family: 'Courier New', monospace; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: #555; margin-top: 4px; } .kpfk-component__date { font-family: Georgia, 'Times New Roman', serif; font-size: 14px; font-style: italic; color: #777; margin-top: 4px; } /* --- Component Header (dark variant) --- */ .kpfk-component__header--dark { background: #1a1a1a; color: #fff; border-bottom: 4px solid #c41e3a; } .kpfk-component__header--dark .kpfk-component__label { color: #c41e3a; } .kpfk-component__header--dark .kpfk-component__title { color: #fff; } .kpfk-component__header--dark .kpfk-component__date { color: #999; } /* --- Header Image (for episode player) --- */ .kpfk-component__header-image { width: 80px; height: 80px; object-fit: cover; border: 2px solid #1a1a1a; margin-right: 15px; flex-shrink: 0; } /* --- Header Action Button (RSS, etc.) --- */ .kpfk-component__header-action { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #1a1a1a; color: #fff; text-decoration: none; flex-shrink: 0; margin-left: 12px; transition: background 0.15s; } .kpfk-component__header-action:hover { background: #c41e3a; } .kpfk-component__header-action svg { width: 20px; height: 20px; fill: currentColor; } /* --- Track List (shared by 887, 888) --- */ .kpfk-track { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #e0e0e0; align-items: center; } .kpfk-track:nth-child(odd) { background: #fafafa; } .kpfk-track:last-child { border-bottom: none; } .kpfk-track:hover { background: #f5f5f5; } .kpfk-track__main { min-width: 0; line-height: 1.3; } .kpfk-track__song { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 14px; color: #1a1a1a; } .kpfk-track__artist { font-family: Georgia, 'Times New Roman', serif; font-size: 13px; color: #555; } .kpfk-track__meta { font-family: Georgia, 'Times New Roman', serif; font-size: 12px; color: #888; font-style: italic; } .kpfk-track__time { font-family: 'Courier New', monospace; font-size: 11px; font-weight: 700; color: #777; text-align: right; white-space: nowrap; } /* --- Component Footer --- */ .kpfk-component__footer { padding: 12px 16px; background: #f8f8f8; border-top: 2px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .kpfk-component__count { font-family: 'Courier New', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #666; } .kpfk-component__link { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: #c41e3a; text-decoration: none; border-bottom: 2px solid transparent; } .kpfk-component__link:hover { border-bottom-color: #c41e3a; } /* --- Buttons --- */ .kpfk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; border: 2px solid; cursor: pointer; transition: all 0.15s; text-decoration: none; } .kpfk-btn--primary { background: #c41e3a; color: #fff; border-color: #c41e3a; } .kpfk-btn--primary:hover { background: #1a1a1a; border-color: #1a1a1a; } .kpfk-btn--primary:disabled { background: #999; border-color: #999; cursor: not-allowed; } .kpfk-btn--secondary { background: transparent; color: #1a1a1a; border-color: #1a1a1a; } .kpfk-btn--secondary:hover { background: #1a1a1a; color: #fff; } .kpfk-btn--small { padding: 4px 10px; font-size: 11px; } .kpfk-btn svg { width: 14px; height: 14px; } /* --- Form Controls --- */ .kpfk-select-wrap { position: relative; flex: 1; min-width: 200px; } .kpfk-select { width: 100%; padding: 10px 36px 10px 12px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; color: #1a1a1a; background: #fff; border: 2px solid #1a1a1a; border-radius: 0; appearance: none; cursor: pointer; } .kpfk-select:focus { outline: none; border-color: #c41e3a; } .kpfk-select-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #555; font-size: 10px; } /* --- States --- */ .kpfk-state { padding: 40px 20px; text-align: center; } .kpfk-state__icon { font-size: 32px; margin-bottom: 12px; opacity: 0.3; } .kpfk-state__text { font-family: Georgia, 'Times New Roman', serif; font-size: 15px; color: #666; } /* Loading */ .kpfk-state--loading .kpfk-state__text { font-family: 'Courier New', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: #555; margin-top: 12px; } /* Error */ .kpfk-state--error { padding: 24px 20px; background: #fff5f5; border-left: 4px solid #c41e3a; text-align: left; } .kpfk-state--error .kpfk-state__title { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; color: #c41e3a; margin-bottom: 4px; } .kpfk-state--error .kpfk-state__text { font-size: 14px; color: #555; text-align: left; } /* --- Spinner --- */ .kpfk-spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid #e0e0e0; border-top-color: #c41e3a; animation: kpfk-spin 0.8s linear infinite; } @keyframes kpfk-spin { to { transform: rotate(360deg); } } /* --- Pagination --- */ .kpfk-pagination { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #f8f8f8; border-top: 2px solid #e0e0e0; } .kpfk-pagination__info { font-family: 'Courier New', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.2px; text-transform: uppercase; color: #555; } .kpfk-pagination__buttons { display: flex; gap: 10px; } /* --- Quick Picks (date chips) --- */ .kpfk-quick { padding: 12px 16px; border-bottom: 1px solid #e0e0e0; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .kpfk-quick__label { font-family: 'Courier New', monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #999; margin-bottom: 8px; } .kpfk-quick__list { display: flex; gap: 8px; } .kpfk-quick__btn { flex-shrink: 0; padding: 6px 12px; font-family: 'Courier New', monospace; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: #555; background: #fff; border: 2px solid #ddd; cursor: pointer; transition: all 0.15s; } .kpfk-quick__btn:hover { border-color: #c41e3a; color: #c41e3a; } .kpfk-quick__btn--active { background: #1a1a1a; border-color: #1a1a1a; color: #fff; } /* --- Controls Bar (date select area) --- */ .kpfk-controls { padding: 16px; background: #f5f5f5; border-bottom: 2px solid #e0e0e0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* --- Selected Info Bar --- */ .kpfk-selected { padding: 12px 16px; background: #f9f9f9; border-bottom: 2px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center; } .kpfk-selected__date { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 14px; } .kpfk-selected__count { font-family: 'Courier New', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #666; } /* --- Responsive (shared) --- */ @media (max-width: 480px) { .kpfk-component__header { padding: 12px; } .kpfk-component__title { font-size: 1rem; } .kpfk-track { padding: 8px 12px; } .kpfk-track__song { font-size: 13px; } .kpfk-track__artist { font-size: 12px; } .kpfk-track__meta { font-size: 11px; } .kpfk-component__footer, .kpfk-pagination { padding: 10px 12px; flex-direction: column; gap: 8px; text-align: center; } .kpfk-pagination__buttons { justify-content: center; } .kpfk-controls { padding: 12px; } .kpfk-quick { padding: 10px 12px; } } /* === PAGE-LEVEL RESPONSIVE === */ @media (max-width: 640px) { .show-header { flex-direction: column; text-align: center; } .show-logo-column { flex: none; width: 180px; margin: 0 auto; align-items: center; } .show-logo { width: 180px; height: 180px; } .social-links { justify-content: center; } .show-title { font-size: 26px; } .show-schedule { align-self: center; } .show-overview p:first-of-type::first-letter { font-size: 2.4em; } .donate-section { flex-direction: column; text-align: center; } .donate-section p { max-width: none; } } </style> <!-- === SHOW HEADER (MASTHEAD) === --> <div class="show-page"> <div class="show-header"> <!-- Left Column: Logo + Social --> <div class="show-logo-column"> <!-- 🔧 EDIT: Update logo src manually --> <img class="show-logo" src="https://placehold.co/240x240/1a1a1a/ffffff?text=SHOW" alt="Global Village logo" /> <!-- 🔧 EDIT: Update social links manually --> <div class="social-links"> <a href="https://www.instagram.com/kathydiaz72/?hl=en" target="_blank"><img src="https://cdn.simpleicons.org/instagram/1a1a1a" alt="Instagram"></a> </div> </div> <!-- Right Column: Show Info --> <div class="show-info"> <h1 class="show-title">Global Village</h1> <p class="show-tagline">Music from around the world and around the block</p> <div class="show-schedule">Mondays • 11AM – 1PM • KPFK 90.7FM</div> <div class="show-host">Hosted by Kathy Díaz</div> <div> <a class="btn-listen" href="#episodes">▶ Episodes</a> </div> </div> </div> <!-- NOTE: No HR here - the double-rule is built into .show-header via ::after --> <!-- === OVERVIEW === --> <div class="show-overview"> <h2 class="section-header">About the Show</h2> <p>Step into Monday’s Global Village, where music travels from the streets of Los Angeles to every corner of the world. Host Kathy Díaz brings a pulse of Afro Latin and Latin rhythms together with essential global sounds, unearthing voices and stories that mainstream radio leaves behind.</p> <p>Every show is a celebration—lifting up local artists, shining a light on cultural traditions, and connecting neighbors across borders. In a city built on diversity, Global Village is your weekly soundtrack for community, culture, and unapologetic celebration of everything that makes us unique—right here, right now.</p> <!-- SHOW TAGS - SNIPPET INSERT --> <!-- KPFK Show Tags --> <div class="show-tags" id="kpfk-show-tags"></div> <script> (function() { 'use strict'; const SUPABASE_URL = 'https://czjhwhfqohpmwprhasve.supabase.co'; const SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImN6amh3aGZxb2hwbXdwcmhhc3ZlIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjY5Njc0NTYsImV4cCI6MjA4MjU0MzQ1Nn0.UCT-1wTR1Qn0VX8KeE6ZxKqF5gslLXL0XF6bh6UtwO4'; const categoryClass = { 'genre': 'tag--topic', 'region': 'tag--topic', 'topic': 'tag--topic', 'format': 'tag--format', 'lens': 'tag--format', 'audience': 'tag--audience' }; function getShowKey() { const el = document.getElementById('show-key'); return el ? el.textContent.trim() : null; } async function fetchTags(showKey) { const response = await fetch( `${SUPABASE_URL}/rest/v1/show_tags?show_key=eq.${showKey}&select=display_order,tags(name,slug,category)&order=display_order`, { headers: { 'apikey': SUPABASE_KEY, 'Authorization': `Bearer ${SUPABASE_KEY}` } } ); if (!response.ok) return []; return response.json(); } function render(tags) { const container = document.getElementById('kpfk-show-tags'); if (!container || tags.length === 0) { if (container) container.style.display = 'none'; return; } container.innerHTML = tags.map(row => { const t = row.tags; const cssClass = categoryClass[t.category] || 'tag--topic'; return `<a href="/shows?tag=${t.slug}" class="tag ${cssClass}">${t.name}</a>`; }).join(''); } async function init() { const showKey = getShowKey(); if (!showKey) return; try { const tags = await fetchTags(showKey); render(tags); } catch (err) { console.error('KPFK Tags Error:', err); } } init(); })(); </script> <hr class="section-divider" /> <!-- === HISTORY & LEGACY SECTION === --> <!-- n8n removes this entire block (through next Divider comment) if hasHistory is false --> <div class="show-history"> <h2 class="section-header">History & Legacy</h2> <p>Since 1987, Kathy Díaz has anchored Latin music programming at KPFK, notably as co-host of "Canto Tropical" and through her longstanding commitment to Global Village’s Monday edition. Over decades, her broadcasts have amplified Los Angeles’ vibrant Latino arts and elevated local artists seldom heard on commercial radio. With an extensive collection of vinyl and CDs, Kathy has maintained an authentic sound rooted in community and culture. Her ongoing work as a board member for Empowering Latino Futures and advocate with the International Latino Book Awards further underscores her dedication to uplifting Latino voices and heritage across the airwaves.</p> </div> <hr class="section-divider" /> <!-- Divider --> <!-- === HOSTS === --> <!-- OPTION A: Standard grid (1-4 hosts) --> <div class="show-hosts"> <h2 class="section-header">Host</h2> <!-- n8n: Change to "Host" (singular) if only 1 host --> <div class="hosts-grid" style="grid-template-columns: 1fr;"> <div class="host-card"> <!-- 🔧 EDIT: Update host image src manually --> <img class="host-image" src="https://placehold.co/320x320/333/fff?text=HOST" alt="Kathy Díaz" /> <div class="host-info"> <h3 class="host-name">Kathy Díaz</h3> <p class="host-bio">Kathy Díaz has been a passionate voice at KPFK since 1987, bringing decades of experience hosting Latin music shows across Los Angeles, Miami, and Austin. Deeply rooted in the community, Kathy is dedicated to uplifting local artists and honoring Latino culture on and off the air. As a board member for Empowering Latino Futures and an active supporter of the International Latino Book Awards, she brings both heart and history to every broadcast—always spinning real vinyl, never streaming, and always connecting community through music.</p> </div> </div> </div> <div style="margin-top: 20px;"> <button class="btn-contact" onclick="goToContactPage()">✉ Contact</button> </div> </div> <!-- OPTION B: Collapsible hosts (5+ hosts) - use this instead of OPTION A when needed --> <!-- <div class="show-hosts"> <h2 class="section-header">Hosts</h2> <details class="hosts-collapsible"> <summary class="hosts-collapsible__toggle"> <span>View All Hosts ()</span> <span class="hosts-collapsible__arrow">▼</span> </summary> <div class="hosts-collapsible__content"> <div class="hosts-grid"> [Host cards go here] </div> </div> </details> <div style="margin-top: 20px;"> <button class="btn-contact" onclick="goToContactPage()">✉ Contact</button> </div> </div> --> <hr class="section-divider" /> <!-- === EPISODES === --> <div id="show-key" style="display: none;">gv_derek</div> <div id="episodes"> <h2 class="section-header">Episodes</h2> <div class="episodes-container"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>KPFK Episode Player</title> <style> /* === PLAYER-SPECIFIC STYLES ONLY === */ /* Base component styles come from show-page-and-snippet-styling.css */ /* Player container additions */ .kpfk-player { contain: layout style; } /* Show image in header */ .kp-img { margin-right: 15px; flex-shrink: 0; } .kp-img img { width: 80px; height: 80px; object-fit: cover; border: 2px solid #1a1a1a; } /* RSS button */ .kp-rss { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #1a1a1a; color: #fff; text-decoration: none; flex-shrink: 0; margin-left: 12px; transition: background 0.15s; } .kp-rss:hover { background: #c41e3a; } .kp-rss svg { width: 20px; height: 20px; fill: #fff; } /* Episode list */ .kp-episodes { max-height: 500px; overflow-y: auto; overflow-x: hidden; } .kp-episode { display: flex; align-items: flex-start; padding: 10px 16px; border-bottom: 1px solid #e0e0e0; transition: background-color 0.15s; } .kp-episode:hover { background-color: #f8f8f8; } .kp-episode:last-child { border-bottom: none; } .kp-episode.playing { background-color: #fff; border-left: 4px solid #c41e3a; padding-left: 12px; } /* Play button (inline with each episode) */ .kp-play { background: #c41e3a; color: white; border: none; width: 32px; height: 32px; min-width: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-right: 12px; flex-shrink: 0; transition: background 0.15s; } .kp-play:hover { background: #1a1a1a; } .kp-play svg { width: 14px; height: 14px; } /* Episode details */ .kp-details { flex: 1; min-width: 0; } /* Expandable description */ .kp-desc-wrapper { margin-top: 6px; margin-bottom: 6px; } .kp-desc { color: #333; font-size: 0.85rem; line-height: 1.4; max-height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .kp-desc.expanded { max-height: none; -webkit-line-clamp: unset; } .kp-read-more { background: none; border: none; color: #c41e3a; cursor: pointer; font-size: 0.75rem; padding: 0; margin-top: 2px; text-decoration: underline; } .kp-read-more:hover { color: #1a1a1a; } /* Episode actions */ .kp-ep-actions { margin-top: 6px; } /* Now playing indicator */ .kp-now-playing { display: none; color: #c41e3a; font-size: 0.7rem; font-weight: 700; margin-top: 4px; font-family: 'Courier New', monospace; letter-spacing: 0.5px; text-transform: uppercase; } .kp-now-playing::before { content: '● '; animation: kp-blink 1s infinite; } @keyframes kp-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.3; } } .kp-now-playing.active { display: block; } /* Spacing when player is active */ body.kp-player-active .kp-episodes { max-height: 350px; padding-bottom: 130px; } /* === FIXED PLAYBACK BAR === */ .kp-controls { display: none; background: #1a1a1a; color: white; padding: 12px 16px; } .kp-controls.active { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000; } .kp-current-info { margin-bottom: 10px; } .kp-current-title { font-weight: 700; font-size: 0.85rem; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: 0.3px; text-transform: uppercase; } .kp-current-date { color: #999; font-size: 0.75rem; font-family: 'Courier New', monospace; } .kp-progress { background: #333; height: 6px; margin-bottom: 10px; cursor: pointer; overflow: hidden; } .kp-progress-fill { background: #c41e3a; height: 100%; width: 0%; transition: width 0.1s; position: relative; } .kp-progress-fill::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 12px; background: #fff; } .kp-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .kp-playback-controls { display: flex; align-items: center; gap: 8px; } .kp-control-play { background: #c41e3a; color: white; border: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; } .kp-control-play:hover { background: #fff; color: #1a1a1a; } .kp-control-play svg { width: 18px; height: 18px; } .kp-skip { background: transparent; color: #999; border: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.15s; } .kp-skip:hover { color: #fff; } .kp-skip svg { width: 20px; height: 20px; } .kp-time { font-family: 'Courier New', monospace; font-size: 0.75rem; color: #999; } .kp-speeds { display: flex; gap: 4px; } .kp-speed { background: transparent; color: #666; border: 1px solid #444; padding: 3px 8px; font-size: 0.7rem; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; cursor: pointer; transition: all 0.15s; } .kp-speed:hover { border-color: #c41e3a; color: #c41e3a; } .kp-speed.active { background: #c41e3a; border-color: #c41e3a; color: #fff; } /* === RESPONSIVE === */ @media (max-width: 480px) { .kp-img img { width: 60px; height: 60px; } .kp-episode { padding: 8px 12px; } .kp-episode.playing { padding-left: 8px; } .kp-controls { padding: 10px 12px; } .kp-bottom { flex-direction: column; gap: 8px; } .kp-playback-controls { order: 1; } .kp-time { order: 2; } .kp-speeds { order: 3; width: 100%; justify-content: center; } body.kp-player-active .kp-episodes { max-height: 300px; padding-bottom: 150px; } } </style> </head> <body> <div id="kpfk-player"></div> <script> class KPFKPlayer { constructor(containerId = 'kpfk-player', options = {}) { this.audio = null; this.currentEpisodeEl = null; this.playing = false; this.episodes = []; this.currentPage = 1; this.autoplayNext = true; this.episodesPerPage = 6; this.loading = false; this.currentIndex = -1; this.currentEpisode = null; this.supabaseUrl = 'https://czjhwhfqohpmwprhasve.supabase.co'; this.supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImN6amh3aGZxb2hwbXdwcmhhc3ZlIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjY5Njc0NTYsImV4cCI6MjA4MjU0MzQ1Nn0.UCT-1wTR1Qn0VX8KeE6ZxKqF5gslLXL0XF6bh6UtwO4'; this.enrichedData = {}; this.container = document.getElementById(containerId); if (!this.container) { console.error(`KPFK Player: Container #${containerId} not found`); return; } this.buildMailtoLink = (errorType, errorDetail) => { const e = ['webmaster', 'kpfk', 'org'].join('@').replace('@org', '.org'); const subject = encodeURIComponent(`Episode Player Error: ${errorType}`); const body = encodeURIComponent( `Hi,\n\nI encountered an error on the episode player.\n\n` + `Page: ${window.location.href}\n` + `Error: ${errorType}\n` + `Detail: ${errorDetail}\n` + `Time: ${new Date().toISOString()}\n\n` + `Thanks!` ); return `mailto:${e}?subject=${subject}&body=${body}`; }; this.container.classList.add('kpfk-component', 'kpfk-player'); // Multi-feed: parse comma-separated list of show codes this.showCodes = this.getShowCodes(options); if (!this.showCodes || this.showCodes.length === 0) { this.container.innerHTML = ` <div class="kpfk-state kpfk-state--error"> <div class="kpfk-state__title">Episodes Unavailable</div> <div class="kpfk-state__text">Episodes unavailable right now. <a href="${this.buildMailtoLink('Config', 'show-key not found')}">Report this issue</a></div> </div>`; return; } // Optional overrides for header when aggregating this.customTitle = options.title || this.container.dataset.title || null; this.customSubtitle = options.subtitle || this.container.dataset.subtitle || null; this.customRss = options.rss || this.container.dataset.rss || null; this.showInfo = { title: '', subtitle: '', image: '' }; this.progressBar = null; this.progressFill = null; this.currentTimeEl = null; this.totalTimeEl = null; this.container.innerHTML = ` <div class="kpfk-state kpfk-state--loading"> <div class="kpfk-spinner"></div> <div class="kpfk-state__text">Loading episodes...</div> </div>`; this.init(); } getShowCodes(options) { // Priority: options.show > #show-key textContent > data-show attribute let raw = null; if (options.show) { raw = options.show; } else { const showKeyEl = document.getElementById('show-key'); if (showKeyEl && showKeyEl.textContent.trim()) { raw = showKeyEl.textContent.trim(); } else if (this.container.dataset.show) { raw = this.container.dataset.show; } } if (!raw) return null; // Accept comma-separated, whitespace-tolerant; dedupe; preserve order const seen = new Set(); const codes = []; raw.split(',').forEach(c => { const trimmed = c.trim(); if (trimmed && !seen.has(trimmed)) { seen.add(trimmed); codes.push(trimmed); } }); return codes; } async init() { try { await this.loadShowInfo(); await this.loadEpisodes(); await this.enrichEpisodes(); this.render(); this.bindEvents(); } catch (e) { console.error('KPFK Player init failed:', e); this.container.innerHTML = ` <div class="kpfk-state kpfk-state--error"> <div class="kpfk-state__title">Unable to Load Episodes</div> <div class="kpfk-state__text">Please try refreshing the page. <a href="${this.buildMailtoLink('Init', e.message)}">Report this issue</a></div> </div>`; } } async loadShowInfo() { // Fetch metadata for all shows in parallel; use first successful as visual anchor const results = await Promise.allSettled( this.showCodes.map(code => fetch(`https://confessor.kpfk.org/_nu_do_api.php?req=key&key=${code}&json=1`) .then(r => r.text()) .then(t => { try { return JSON.parse(t); } catch (e) { return null; } }) ) ); // First successful result becomes the anchor for image/title let anchor = null; for (const r of results) { if (r.status === 'fulfilled' && r.value && r.value.sh_name) { anchor = r.value; break; } } const baseTitle = anchor?.sh_name ? this.decodeHtml(anchor.sh_name) : 'KPFK Show'; const baseSubtitle = anchor ? this.formatSchedule(anchor) : 'Streaming from archive.kpfk.org'; const baseImage = anchor?.sh_photo ? `https://confessor.kpfk.org/pix/${anchor.sh_photo}` : null; this.showInfo = { title: this.customTitle || baseTitle, subtitle: this.customSubtitle || baseSubtitle, image: baseImage, host: anchor?.sh_djname || '', email: anchor?.sh_email || '', description: anchor?.sh_desc || '' }; } formatSchedule(showData) { if (!showData.sh_days || !showData.sh_ampm) { return 'Streaming from archive.kpfk.org • Listener-powered radio since 1959'; } return `${showData.sh_days} • ${showData.sh_ampm}`; } async loadEpisodes() { // Fetch all feeds in parallel; silently skip any that fail const results = await Promise.allSettled( this.showCodes.map(code => fetch(`https://confessor.kpfk.org/_nu_do_api.php?req=fil&id=${code}&num=50&json=1`) .then(r => r.text()) .then(t => { try { const parsed = JSON.parse(t); return Array.isArray(parsed) ? parsed : []; } catch (e) { return []; } }) .catch(() => []) ) ); // Flatten across feeds, dedupe by audio URL, then sort reverse-chrono const seenUrls = new Set(); const aggregated = []; results.forEach(r => { if (r.status !== 'fulfilled' || !Array.isArray(r.value)) return; r.value.forEach(item => { if (!item.mp3) return; const audioUrl = this.fixAudioURL(item.mp3); if (!audioUrl || seenUrls.has(audioUrl)) return; seenUrls.add(audioUrl); let dateStr = 'Recent'; let shortDate = ''; let timestamp = 0; if (item.date) { const dateObj = new Date(item.date); dateStr = dateObj.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }); shortDate = dateObj.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); timestamp = dateObj.getTime(); } else if (item.def_time) { const dateObj = new Date(item.def_time * 1000); dateStr = dateObj.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }); shortDate = dateObj.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); timestamp = dateObj.getTime(); } let duration = ''; if (item.lsecs) { const mins = Math.floor(item.lsecs / 60); const secs = item.lsecs % 60; duration = `${mins}:${secs.toString().padStart(2, '0')}`; } let headline = '', guest = '', summary = ''; if (item.pubfile && item.pubfile[0]) { const pf = item.pubfile[0]; if (pf.pf_gname) guest = pf.pf_gname; if (pf.pf_gtopic) { if (pf.pf_gtopic.length <= 150) headline = pf.pf_gtopic; else summary = pf.pf_gtopic; } } aggregated.push({ title: item.title || this.showInfo.title, date: dateStr, shortDate, duration, producer: item.producer || '', audioUrl, timestamp, headline: headline || null, host: null, guest: guest || null, summary: summary || null }); }); }); // Strict reverse chronological — newest first across all feeds aggregated.sort((a, b) => b.timestamp - a.timestamp); this.episodes = aggregated; } async enrichEpisodes() { if (this.episodes.length === 0) return; try { const urls = this.episodes.map(e => e.audioUrl); // Build the in.() filter with proper encoding for the URL list const inList = urls.map(u => `"${u}"`).join(','); const filterParam = `mp3_url=in.(${inList})`; const response = await fetch( `${this.supabaseUrl}/rest/v1/episode_log?${encodeURI(filterParam)}&select=mp3_url,headline,host,guest,summary`, { headers: { 'apikey': this.supabaseKey, 'Authorization': `Bearer ${this.supabaseKey}` } } ); if (!response.ok) return; const data = await response.json(); const enriched = {}; data.forEach(row => { enriched[row.mp3_url] = row; }); this.episodes.forEach(ep => { const extra = enriched[ep.audioUrl]; if (extra) { if (!ep.headline) ep.headline = extra.headline; if (!ep.host) ep.host = extra.host; if (!ep.guest) ep.guest = extra.guest; if (!ep.summary) ep.summary = extra.summary; } }); } catch (e) {} } fixAudioURL(url) { if (!url) return null; if (url.includes('confessor.kpfk.org/home/kpfkarch/public_html/mp3/')) { const filename = url.split('/mp3/')[1]; return filename ? `https://archive.kpfk.org/mp3/${filename}` : url; } return url; } decodeHtml(html) { const txt = document.createElement('textarea'); txt.innerHTML = html; return txt.value; } render() { const info = this.showInfo; const totalPages = Math.ceil(this.episodes.length / this.episodesPerPage); const start = (this.currentPage - 1) * this.episodesPerPage; const pageEpisodes = this.episodes.slice(start, start + this.episodesPerPage); let html = ''; // RSS link: only show if explicitly provided OR there's exactly one feed let rssUrl = null; if (this.customRss) { rssUrl = this.customRss; } else if (this.showCodes.length === 1) { rssUrl = `https://archive.kpfk.org/xml/${this.showCodes[0]}.xml`; } // Header html += '<header class="kpfk-component__header">'; if (info.image) { html += `<div class="kp-img"><img src="${info.image}" alt="${info.title}" onerror="this.parentElement.style.display='none'"></div>`; } html += `<div class="kpfk-component__header-content"> <h2 class="kpfk-component__title">${info.title}</h2> <div class="kpfk-component__subtitle">${info.subtitle}</div> </div>`; if (rssUrl) { html += `<a href="${rssUrl}" target="_blank" class="kp-rss" title="Subscribe via RSS"> <svg viewBox="0 0 24 24" fill="#ffffff"><path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1Z"/></svg> </a>`; } html += '</header>'; // Episodes html += '<div class="kp-episodes">'; if (pageEpisodes.length > 0) { pageEpisodes.forEach((ep, i) => { const index = start + i; const isPlaying = this.currentIndex === index; const displayTitle = ep.headline || `${ep.title} — ${ep.shortDate}`; let descHtml = ''; if (ep.summary) { const decoded = this.decodeHtml(ep.summary); descHtml = `<div class="kp-desc-wrapper"> <div class="kp-desc">${decoded}</div> <button class="kp-read-more">Read more...</button> </div>`; } html += ` <div class="kp-episode${isPlaying ? ' playing' : ''}" data-index="${index}"> <button class="kp-play" aria-label="Play episode"> ${isPlaying && this.playing ? '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>' : '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>'} </button> <div class="kp-details"> <div class="kpfk-track__song">${displayTitle}</div> <div class="kpfk-track__meta">${ep.date}${ep.duration ? ' • ' + ep.duration : ''}</div> ${descHtml} <div class="kp-ep-actions"> <button class="kpfk-btn kpfk-btn--secondary kpfk-btn--small kp-download" data-url="${ep.audioUrl}" data-title="${ep.title}"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg> Download </button> </div> <div class="kp-now-playing${isPlaying && this.playing ? ' active' : ''}">Now Playing</div> </div> </div> `; }); } else { html += ` <div class="kpfk-state kpfk-state--error"> <div class="kpfk-state__title">No Episodes Available</div> <div class="kpfk-state__text">No episodes available for this show. <a href="${this.buildMailtoLink('Empty', 'No episodes returned')}">Report this issue</a></div> </div>`; } html += '</div>'; // Pagination if (totalPages > 1) { html += ` <div class="kpfk-pagination"> <div class="kpfk-pagination__info">Page ${this.currentPage} of ${totalPages}</div> <div class="kpfk-pagination__buttons"> <button class="kpfk-btn kpfk-btn--primary kpfk-btn--small kp-page-btn" data-action="prev" ${this.currentPage === 1 ? 'disabled' : ''}>← Prev</button> <button class="kpfk-btn kpfk-btn--primary kpfk-btn--small kp-page-btn" data-action="next" ${this.currentPage === totalPages ? 'disabled' : ''}>Next →</button> </div> </div> `; } // Fixed playback bar html += ` <div class="kp-controls${this.audio ? ' active' : ''}"> <div class="kp-current-info"> <div class="kp-current-title">${this.currentEpisode?.headline || this.currentEpisode?.title || ''}</div> <div class="kp-current-date">${this.currentEpisode?.date || ''}</div> </div> <div class="kp-progress"> <div class="kp-progress-fill"></div> </div> <div class="kp-bottom"> <div class="kp-playback-controls"> <button class="kp-skip" data-skip="-15" aria-label="Rewind 15 seconds"> <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.5 3C17.15 3 21.08 6.03 22.47 10.22L20.1 11C19.05 7.81 16.04 5.5 12.5 5.5c-1.54 0-2.96.46-4.15 1.24L10 8.5H4v-6l2.27 2.27A9.96 9.96 0 0 1 12.5 3z"/><text x="12" y="14" text-anchor="middle" font-size="7" fill="currentColor">15</text></svg> </button> <button class="kp-control-play" aria-label="Play/Pause"> ${this.playing ? '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>' : '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>'} </button> <button class="kp-skip" data-skip="30" aria-label="Forward 30 seconds"> <svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.5 3C6.85 3 2.92 6.03 1.53 10.22L3.9 11C4.95 7.81 7.96 5.5 11.5 5.5c1.54 0 2.96.46 4.15 1.24L14 8.5h6v-6l-2.27 2.27A9.96 9.96 0 0 0 11.5 3z"/><text x="12" y="14" text-anchor="middle" font-size="7" fill="currentColor">30</text></svg> </button> </div> <div class="kp-time"> <span class="kp-current-time">0:00</span> / <span class="kp-total-time">0:00</span> </div> <div class="kp-speeds"> <button class="kp-speed" data-speed="1">1×</button> <button class="kp-speed" data-speed="1.25">1.25×</button> <button class="kp-speed" data-speed="1.5">1.5×</button> <button class="kp-speed" data-speed="2">2×</button> </div> </div> </div> `; this.container.innerHTML = html; this.progressFill = this.container.querySelector('.kp-progress-fill'); this.currentTimeEl = this.container.querySelector('.kp-current-time'); this.totalTimeEl = this.container.querySelector('.kp-total-time'); const currentSpeed = this.audio?.playbackRate || 1; this.container.querySelectorAll('.kp-speed').forEach(btn => { btn.classList.toggle('active', parseFloat(btn.dataset.speed) === currentSpeed); }); } bindEvents() { this.container.querySelectorAll('.kp-play').forEach(btn => { btn.addEventListener('click', (e) => this.handlePlay(e)); }); const controlPlay = this.container.querySelector('.kp-control-play'); if (controlPlay) controlPlay.addEventListener('click', () => this.togglePlayback()); this.container.querySelectorAll('.kp-skip').forEach(btn => { btn.addEventListener('click', (e) => this.handleSkip(e)); }); const progressBar = this.container.querySelector('.kp-progress'); if (progressBar) progressBar.addEventListener('click', (e) => this.handleSeek(e)); this.container.querySelectorAll('.kp-speed').forEach(btn => { btn.addEventListener('click', (e) => this.handleSpeed(e)); }); this.container.querySelectorAll('.kp-page-btn').forEach(btn => { btn.addEventListener('click', (e) => this.handlePaginate(e)); }); this.container.querySelectorAll('.kp-read-more').forEach(btn => { btn.addEventListener('click', (e) => this.handleReadMore(e)); }); this.container.querySelectorAll('.kp-download').forEach(btn => { btn.addEventListener('click', (e) => this.handleDownload(e)); }); } handlePlay(e) { const btn = e.currentTarget; const episodeEl = btn.closest('.kp-episode'); const index = parseInt(episodeEl.dataset.index); const ep = this.episodes[index]; if (this.currentIndex === index && this.audio) { this.togglePlayback(); return; } if (this.audio) { this.audio.pause(); this.audio = null; } this.currentIndex = index; this.currentEpisode = ep; this.currentEpisodeEl = episodeEl; this.audio = new Audio(ep.audioUrl); this.setupAudioEvents(); this.audio.play(); this.render(); this.bindEvents(); document.body.classList.add('kp-player-active'); } setupAudioEvents() { this.audio.onplay = () => { this.playing = true; this.updatePlayButtons(); }; this.audio.onpause = () => { this.playing = false; this.updatePlayButtons(); }; this.audio.ontimeupdate = () => { this.updateProgress(); }; this.audio.onended = () => { if (this.autoplayNext && this.currentIndex < this.episodes.length - 1) { this.playEpisode(this.currentIndex + 1); } else { this.playing = false; this.updatePlayButtons(); } }; this.audio.onerror = () => { this.playing = false; this.updatePlayButtons(); }; } playEpisode(index) { if (this.audio) { this.audio.pause(); this.audio = null; } this.currentIndex = index; this.currentEpisode = this.episodes[index]; this.audio = new Audio(this.currentEpisode.audioUrl); this.setupAudioEvents(); this.audio.play(); this.render(); this.bindEvents(); } togglePlayback() { if (!this.audio) return; this.audio.paused ? this.audio.play() : this.audio.pause(); } updatePlayButtons() { const episodeBtn = this.container.querySelector(`.kp-episode[data-index="${this.currentIndex}"] .kp-play`); if (episodeBtn) { episodeBtn.innerHTML = this.playing ? '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>' : '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>'; } const nowPlaying = this.container.querySelector(`.kp-episode[data-index="${this.currentIndex}"] .kp-now-playing`); if (nowPlaying) nowPlaying.classList.toggle('active', this.playing); const controlBtn = this.container.querySelector('.kp-control-play'); if (controlBtn) { controlBtn.innerHTML = this.playing ? '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>' : '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>'; } } updateProgress() { if (!this.audio || !this.audio.duration) return; const percent = (this.audio.currentTime / this.audio.duration) * 100; if (this.progressFill) this.progressFill.style.width = `${percent}%`; if (this.currentTimeEl) this.currentTimeEl.textContent = this.formatTime(this.audio.currentTime); if (this.totalTimeEl) this.totalTimeEl.textContent = this.formatTime(this.audio.duration); } handleSkip(e) { if (!this.audio) return; const seconds = parseInt(e.currentTarget.dataset.skip); this.audio.currentTime = Math.max(0, Math.min(this.audio.duration, this.audio.currentTime + seconds)); } handleSeek(e) { if (!this.audio || !this.audio.duration) return; const rect = e.currentTarget.getBoundingClientRect(); const percent = (e.clientX - rect.left) / rect.width; this.audio.currentTime = percent * this.audio.duration; } handleSpeed(e) { const speed = parseFloat(e.currentTarget.dataset.speed); if (this.audio) this.audio.playbackRate = speed; this.container.querySelectorAll('.kp-speed').forEach(btn => { btn.classList.toggle('active', parseFloat(btn.dataset.speed) === speed); }); } handlePaginate(e) { if (this.loading) return; const action = e.currentTarget.dataset.action; const totalPages = Math.ceil(this.episodes.length / this.episodesPerPage); if (action === 'next' && this.currentPage < totalPages) this.currentPage++; else if (action === 'prev' && this.currentPage > 1) this.currentPage--; else return; this.loading = true; const currentSpeed = this.audio?.playbackRate || 1; this.render(); this.bindEvents(); if (this.audio) this.audio.playbackRate = currentSpeed; this.loading = false; } handleReadMore(e) { const btn = e.currentTarget; const desc = btn.previousElementSibling; if (desc.classList.contains('expanded')) { desc.classList.remove('expanded'); btn.textContent = 'Read more...'; } else { desc.classList.add('expanded'); btn.textContent = 'Read less'; } } handleDownload(e) { const btn = e.currentTarget; const url = btn.dataset.url; const title = btn.dataset.title; const a = document.createElement('a'); a.href = url; a.download = `${title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.mp3`; document.body.appendChild(a); a.click(); document.body.removeChild(a); } formatTime(seconds) { if (!seconds || !isFinite(seconds)) return '0:00'; const mins = Math.floor(seconds / 60); const secs = Math.floor(seconds % 60); return `${mins}:${secs.toString().padStart(2, '0')}`; } } function initKPFKPlayers() { const defaultContainer = document.getElementById('kpfk-player'); if (defaultContainer) new KPFKPlayer('kpfk-player'); document.querySelectorAll('[id^="kpfk-player-"]').forEach(container => { const showCode = container.id.replace('kpfk-player-', ''); new KPFKPlayer(container.id, { show: showCode }); }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initKPFKPlayers); } else { initKPFKPlayers(); } window.createKPFKPlayer = function(containerId, options = {}) { return new KPFKPlayer(containerId, options); }; </script> </body> </html> </div> </div> <!-- === PLAYLISTS (for music shows) === --> <!-- n8n removes this playlist block if isMusicShow is false --> <div class="show-playlists"> <hr class="section-divider" /> <h2 class="section-header">Playlists</h2> <div class="episodes-container"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>KPFK Playlist - Tabbed</title> <style> /* === TAB-SPECIFIC STYLES ONLY === */ /* Base component styles come from show-page-and-snippet-styling.css */ .kpfk-playlist-tabbed * { box-sizing: border-box; } /* Tab Bar */ .kpfk-tabs { display: flex; border-bottom: 3px solid #1a1a1a; } .kpfk-tabs__btn { flex: 1; padding: 12px 16px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; color: #555; background: #f5f5f5; border: none; border-right: 1px solid #ddd; cursor: pointer; transition: all 0.15s; } .kpfk-tabs__btn:last-child { border-right: none; } .kpfk-tabs__btn:hover { background: #eee; color: #1a1a1a; } .kpfk-tabs__btn--active { background: #1a1a1a; color: #fff; } .kpfk-tabs__btn--active:hover { background: #1a1a1a; color: #fff; } /* Tab Panels */ .kpfk-panel { display: none; min-height: 450px; } .kpfk-panel--active { display: block; } /* Track list container */ .kpfk-tracks { max-height: 400px; overflow-y: auto; } </style> </head> <body> <!-- COMPONENT START --> <div class="kpfk-component kpfk-playlist-tabbed" id="kpfk-playlist-tabbed"> <div class="kpfk-state kpfk-state--loading"> <div class="kpfk-spinner"></div> <div class="kpfk-state__text">Loading playlist...</div> </div> </div> <script> (function() { 'use strict'; // === CONFIGURATION === function getShowKey() { const showKeyEl = document.getElementById('show-key'); if (showKeyEl && showKeyEl.textContent.trim()) { return showKeyEl.textContent.trim(); } return null; } const showKey = getShowKey(); const container = document.getElementById('kpfk-playlist-tabbed'); function buildMailtoLink(errorType, errorDetail) { const e = ['webmaster', 'kpfk', 'org'].join('@').replace('@org', '.org'); const subject = encodeURIComponent(`Playlist Error: ${errorType}`); const body = encodeURIComponent( `Hi,\n\nI encountered an error on the playlist widget.\n\n` + `Page: ${window.location.href}\n` + `Error: ${errorType}\n` + `Detail: ${errorDetail}\n` + `Time: ${new Date().toISOString()}\n\n` + `Thanks!` ); return `mailto:${e}?subject=${subject}&body=${body}`; } if (!showKey) { container.innerHTML = ` <div class="kpfk-state kpfk-state--error"> <div class="kpfk-state__title">Playlist Unavailable</div> <div class="kpfk-state__text">This show's playlist isn't available right now. <a href="${buildMailtoLink('Config', 'show-key not found')}">Report this issue</a></div> </div> `; return; } const CONFIG = { showKey: showKey, apiBase: 'https://confessor.kpfk.org/_nu_do_api.php', quickPickCount: 8 }; // === STATE === let currentTab = 'current'; let currentPlaylistData = null; let archiveDates = []; let selectedPhid = null; // === API CALLS (preserved exactly) === async function fetchCurrentPlaylist() { const url = `${CONFIG.apiBase}?req=mostrecent&altid=${encodeURIComponent(CONFIG.showKey)}&json=1`; const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status}`); return await response.json(); } async function fetchArchiveDates() { const url = `${CONFIG.apiBase}?req=shotimes&key=${encodeURIComponent(CONFIG.showKey)}&json=1`; const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status}`); const data = await response.json(); return data.map(item => ({ phid: item.phid, date: item.date, time: item.time, name: item.name, unix: item.dt })); } async function fetchPlaylistByPhid(phid) { const url = `${CONFIG.apiBase}?req=playlist&phid=${phid}&json=1`; const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status}`); return await response.json(); } // === UTILITIES === function decodeHtml(html) { const txt = document.createElement('textarea'); txt.innerHTML = html; return txt.value; } function escapeHtml(str) { if (!str) return ''; const div = document.createElement('div'); div.textContent = str; return div.innerHTML; } function extractTracks(data) { const tracks = []; for (const key of Object.keys(data)) { if (!isNaN(parseInt(key)) && data[key].title) { tracks.push({ sort: parseInt(key), title: decodeHtml(data[key].title || ''), artist: decodeHtml(data[key].artist || ''), album: decodeHtml(data[key].album || ''), label: decodeHtml(data[key].label || ''), time: data[key].start || '' }); } } tracks.sort((a, b) => a.sort - b.sort); return tracks; } function renderTracksHtml(tracks) { if (tracks.length === 0) { return ` <div class="kpfk-state"> <div class="kpfk-state__icon">♫</div> <div class="kpfk-state__text">No tracks available for this playlist.</div> </div> `; } return ` <div class="kpfk-tracks"> ${tracks.map(track => ` <div class="kpfk-track"> <div class="kpfk-track__main"> <div class="kpfk-track__song">${escapeHtml(track.title)}</div> <div class="kpfk-track__artist">${escapeHtml(track.artist)}</div> ${track.album ? `<div class="kpfk-track__meta">${escapeHtml(track.album)}${track.label ? ` · ${escapeHtml(track.label)}` : ''}</div>` : ''} </div> <div class="kpfk-track__time">${escapeHtml(track.time)}</div> </div> `).join('')} </div> `; } // === RENDER FUNCTIONS === function renderShell() { const show = currentPlaylistData?.show || {}; const showName = show.name || 'Unknown Show'; const showDate = show.date || ''; const showTime = show.time || ''; const currentTracks = extractTracks(currentPlaylistData || {}); const quickPicks = archiveDates.slice(0, CONFIG.quickPickCount); container.innerHTML = ` <nav class="kpfk-tabs"> <button class="kpfk-tabs__btn kpfk-tabs__btn--active" data-tab="current">Current Playlist</button> <button class="kpfk-tabs__btn" data-tab="archive">Playlist Archive</button> </nav> <!-- CURRENT PLAYLIST TAB --> <div class="kpfk-panel kpfk-panel--active" id="kpfk-panel-current"> <header class="kpfk-component__header kpfk-component__header--dark"> <div class="kpfk-component__header-content"> <div class="kpfk-component__label">Current Playlist</div> <h2 class="kpfk-component__title">${escapeHtml(showName)}</h2> <div class="kpfk-component__date">${escapeHtml(showDate)}${showTime ? ' · ' + escapeHtml(showTime) : ''}</div> </div> </header> <div id="kpfk-current-tracks"> ${renderTracksHtml(currentTracks)} </div> <footer class="kpfk-component__footer"> <span class="kpfk-component__count">${currentTracks.length} track${currentTracks.length !== 1 ? 's' : ''}</span> <a href="#" class="kpfk-component__link" data-switch="archive">Browse Archive →</a> </footer> </div> <!-- PLAYLIST ARCHIVE TAB --> <div class="kpfk-panel" id="kpfk-panel-archive"> <header class="kpfk-component__header kpfk-component__header--dark"> <div class="kpfk-component__header-content"> <div class="kpfk-component__label">Playlist Archive</div> <h2 class="kpfk-component__title">Previous Playlists</h2> </div> </header> <div class="kpfk-controls"> <div class="kpfk-select-wrap"> <select class="kpfk-select" id="kpfk-date-select"> <option value="">Select a date...</option> ${archiveDates.map(d => `<option value="${d.phid}">${d.date} · ${d.time}</option>`).join('')} </select> <span class="kpfk-select-arrow">▼</span> </div> </div> ${quickPicks.length > 0 ? ` <div class="kpfk-quick"> <div class="kpfk-quick__label">Recent Shows</div> <div class="kpfk-quick__list" id="kpfk-quick-picks"> ${quickPicks.map(d => ` <button class="kpfk-quick__btn" data-phid="${d.phid}">${d.date}</button> `).join('')} </div> </div> ` : ''} <div id="kpfk-archive-content"> <div class="kpfk-state"> <div class="kpfk-state__icon">📻</div> <div class="kpfk-state__text">Select a date above to view that show's playlist</div> </div> </div> <footer class="kpfk-component__footer"> <span class="kpfk-component__count" id="kpfk-archive-count"></span> <a href="#" class="kpfk-component__link" data-switch="current">← Current Playlist</a> </footer> </div> `; bindEvents(); } function renderArchivePlaylist(data, dateInfo) { const content = document.getElementById('kpfk-archive-content'); const countEl = document.getElementById('kpfk-archive-count'); const tracks = extractTracks(data); const dateDisplay = dateInfo ? `${dateInfo.date} · ${dateInfo.time}` : ''; content.innerHTML = ` <div class="kpfk-selected"> <div class="kpfk-selected__date">${escapeHtml(dateDisplay)}</div> <div class="kpfk-selected__count">${tracks.length} track${tracks.length !== 1 ? 's' : ''}</div> </div> ${renderTracksHtml(tracks)} `; countEl.textContent = `${tracks.length} track${tracks.length !== 1 ? 's' : ''}`; } function renderArchiveLoading() { const content = document.getElementById('kpfk-archive-content'); content.innerHTML = ` <div class="kpfk-state kpfk-state--loading"> <div class="kpfk-spinner"></div> <div class="kpfk-state__text">Loading playlist...</div> </div> `; } function renderArchiveError(message, errorDetail) { const content = document.getElementById('kpfk-archive-content'); content.innerHTML = ` <div class="kpfk-state kpfk-state--error"> <div class="kpfk-state__title">Unable to load playlist</div> <div class="kpfk-state__text">${escapeHtml(message)} <a href="${buildMailtoLink('Archive Load', errorDetail || 'Unknown')}">Report this issue</a></div> </div> `; } // === EVENT HANDLERS === function bindEvents() { // Tab switching container.querySelectorAll('.kpfk-tabs__btn').forEach(btn => { btn.addEventListener('click', handleTabClick); }); // Footer links that switch tabs container.querySelectorAll('[data-switch]').forEach(link => { link.addEventListener('click', handleSwitchClick); }); // Date select dropdown const dateSelect = document.getElementById('kpfk-date-select'); if (dateSelect) { dateSelect.addEventListener('change', handleDateSelect); } // Quick pick buttons container.querySelectorAll('.kpfk-quick__btn').forEach(btn => { btn.addEventListener('click', handleQuickPick); }); } function handleTabClick(e) { const tab = e.currentTarget.dataset.tab; switchTab(tab); } function handleSwitchClick(e) { e.preventDefault(); const tab = e.currentTarget.dataset.switch; switchTab(tab); } function switchTab(tab) { currentTab = tab; // Update tab buttons container.querySelectorAll('.kpfk-tabs__btn').forEach(btn => { btn.classList.toggle('kpfk-tabs__btn--active', btn.dataset.tab === tab); }); // Update panels container.querySelectorAll('.kpfk-panel').forEach(panel => { panel.classList.toggle('kpfk-panel--active', panel.id === `kpfk-panel-${tab}`); }); } function handleDateSelect(e) { const phid = e.target.value; if (phid) { loadArchivePlaylist(parseInt(phid)); updateQuickPickActive(parseInt(phid)); } } function handleQuickPick(e) { const phid = parseInt(e.currentTarget.dataset.phid); loadArchivePlaylist(phid); document.getElementById('kpfk-date-select').value = phid; updateQuickPickActive(phid); } function updateQuickPickActive(phid) { container.querySelectorAll('.kpfk-quick__btn').forEach(btn => { btn.classList.toggle('kpfk-quick__btn--active', parseInt(btn.dataset.phid) === phid); }); } async function loadArchivePlaylist(phid) { selectedPhid = phid; renderArchiveLoading(); try { const data = await fetchPlaylistByPhid(phid); const dateInfo = archiveDates.find(d => d.phid === phid); renderArchivePlaylist(data, dateInfo); } catch (err) { console.error('KPFK Playlist Error:', err); renderArchiveError('Please try again or select a different date.', `phid=${phid}, ${err.message}`); } } // === INITIALIZATION === async function init() { try { // Fetch both current playlist and archive dates in parallel const [currentData, dates] = await Promise.all([ fetchCurrentPlaylist(), fetchArchiveDates() ]); currentPlaylistData = currentData; archiveDates = dates; renderShell(); } catch (err) { console.error('KPFK Playlist Init Error:', err); container.innerHTML = ` <div class="kpfk-state kpfk-state--error"> <div class="kpfk-state__title">Unable to load playlist</div> <div class="kpfk-state__text">Please try refreshing the page. <a href="${buildMailtoLink('Init', err.message)}">Report this issue</a></div> </div> `; } } init(); })(); </script> <!-- COMPONENT END --> </body> </html> </div> <hr class="section-divider" /> </div> <!-- === DONATE === --> <div class="donate-section"> <div class="donate-content"> <h2>Keep This Show On the Air</h2> <p>Power creative, independent radio that belongs to all of us. When you support KPFK, you’re investing in frontline voices, radical music, and community stories you won’t hear anywhere else. Help us keep the signal strong, lift up fresh sounds, and sustain people-powered radio in LA. Give what you can—every dollar fuels fearless media for the many, not the few.</p> </div> <a class="btn-donate" href="/donate">Contribute</a> </div> </div> </div> <div class="u-mr s-u-mr-none"></div> </div><!-- --><div class="dv-grid__item dv-grid__item--fix-300"> <div class="c-sidebar"> <div class="c-ad c-mpu js-spacing-on-load"><div class="gm-adpos" data-ads-target="pos" data-pos-id="6304" id="ad-pos-6304" ></div></div> <div class="o-content-block tb-schedule" data-service-id="default"> <h2 class="o-headline"><a href="/schedule/" class="o-headline__main">What's On Now</a></h2> <div class="o-content-block__inner"> <ul class="gm-sec" data-grid-threshold="400" data-mode="0"> <li class="c-pod"> <a href="/on-air/thom-hartmann/" class="c-pod__link" tabindex="-1"> <img src="https://mm.aiircdn.com/427/5b8858fbd6378.png" alt="" class="c-pod__img" /> </a> <div class="c-pod__content"> <a href="/on-air/thom-hartmann/" class="c-pod__link"> <strong class="c-pod__title">Thom Hartmann</strong> </a> <p class="c-pod__description"><em class="c-pod__emphasis"> 9:00am - 11:00am</em> </p> <p class="c-pod__description">TAKING YOUR CALLS LIVE DURING THE SHOW AT (202) 808-9925</p> </div> </li> </ul> </div> </div> <div class="o-content-block tb-events"> <h2 class="o-headline"><a href="/calendar/" class="o-headline__main">Upcoming Events</a></h2> <div class="o-content-block__inner"> <ul class="gm-sec" data-grid-threshold="400" data-mode="1" class="tb-events-calendar-list"> <li class="c-pod"> <a href="/calendar/event/maestro-of-the-movies-a-tribute-to-john-williams-sept-4th-5th-and-6th-live-at-the-hollywood-bowl/"> <img src="https://mmo.aiircdn.com/237/6a6becd68b51b8ca5af.jpg" alt="" class="c-pod__img " /> </a> <div class="c-pod__content"> <a href="/calendar/event/maestro-of-the-movies-a-tribute-to-john-williams-sept-4th-5th-and-6th-live-at-the-hollywood-bowl/" class="c-pod__link"> <strong class="c-pod__title">Maestro of the Movies: A Tribute to John Williams, Sept. 4th, 5th & 6th Live At The Hollywood Bowl</strong> </a> <time datetime="2026-09-04 20:00:00">Sep 4, 2026</time> at <a href="/calendar/venue/hollywood-bowl-los-angeles-ca/">Hollywood Bowl </a> </div> </li> <li class="c-pod"> <a href="/calendar/event/the-visit-september-9-october-4-2026-live-at-the-pasadena-playhouse/"> <img src="https://mmo.aiircdn.com/237/6a9784e76c45e097185.jpg" alt="" class="c-pod__img " /> </a> <div class="c-pod__content"> <a href="/calendar/event/the-visit-september-9-october-4-2026-live-at-the-pasadena-playhouse/" class="c-pod__link"> <strong class="c-pod__title">The Visit | September 9 — October 4, 2026 Live At The Pasadena Playhouse</strong> </a> <time datetime="2026-09-09 19:30:00">Sep 9, 2026</time> at <a href="/calendar/venue/pasadena-playhouse-pasadena-ca/">Pasadena Playhouse </a> </div> </li> <li class="c-pod"> <a href="/calendar/event/buddy-guy-90-with-special-guests-christone-kingfish-ingram-and-his-delta-jam-september-9-2026-at-8pm/"> <img src="https://mmo.aiircdn.com/237/6a838fc2d075960028c.jpg" alt="" class="c-pod__img " /> </a> <div class="c-pod__content"> <a href="/calendar/event/buddy-guy-90-with-special-guests-christone-kingfish-ingram-and-his-delta-jam-september-9-2026-at-8pm/" class="c-pod__link"> <strong class="c-pod__title">Buddy Guy 90 With Special Guests Christone “Kingfish” Ingram and his Delta Jam September 9, 2026 At </strong> </a> <time datetime="2026-09-09 20:00:00">Sep 9, 2026</time> at <a href="/calendar/venue/hollywood-bowl-los-angeles-ca/">Hollywood Bowl </a> </div> </li> </ul> </div> </div> <div class="o-content-block tb-schedule" data-service-id="default"> <h2 class="o-headline"><a href="/schedule/" class="o-headline__main">Program Schedule</a></h2> <div class="o-content-block__inner"> <ul class="gm-sec" data-grid-threshold="400" data-mode="2"> <li class="c-pod"> <a href="/on-air/global-village-wednesdays/" class="c-pod__link" tabindex="-1"> <img src="https://mm.aiircdn.com/427/5ae781f214284.jpg" alt="" class="c-pod__img" /> </a> <div class="c-pod__content"> <a href="/on-air/global-village-wednesdays/" class="c-pod__link"> <strong class="c-pod__title">Global Village Wednesdays</strong> </a> <p class="c-pod__description"><em class="c-pod__emphasis">11:00am - 1:00pm</em> </p> </div> </li> <li class="c-pod"> <a href="/on-air/aware-show" class="c-pod__link" tabindex="-1"> <img src="https://mm.aiircdn.com/427/5a03674a0237e.jpg" alt="" class="c-pod__img" /> </a> <div class="c-pod__content"> <a href="/on-air/aware-show" class="c-pod__link"> <strong class="c-pod__title">Aware Show with Lisa Garr</strong> </a> <p class="c-pod__description"><em class="c-pod__emphasis"> 1:00pm - 2:00pm</em> </p> </div> </li> <li class="c-pod"> <a href="/on-air/alternative-radio/" class="c-pod__link" tabindex="-1"> <img src="https://mmo.aiircdn.com/237/6567bc3a71500.jpg" alt="" class="c-pod__img" /> </a> <div class="c-pod__content"> <a href="/on-air/alternative-radio/" class="c-pod__link"> <strong class="c-pod__title">Alternative Radio</strong> </a> <p class="c-pod__description"><em class="c-pod__emphasis"> 2:00pm - 3:00pm</em> </p> </div> </li> <li class="c-pod"> <a href="/on-air/lawyers-guild/" class="c-pod__link" tabindex="-1"> <img src="https://mm.aiircdn.com/427/5a036a3851593.jpg" alt="" class="c-pod__img" /> </a> <div class="c-pod__content"> <a href="/on-air/lawyers-guild/" class="c-pod__link"> <strong class="c-pod__title">The Lawyer's Guild - with Jim Lafferty and Maria Hall</strong> </a> <p class="c-pod__description"><em class="c-pod__emphasis"> 3:00pm - 4:00pm</em> </p> </div> </li> </ul> </div> </div><div class="o-content-block tb-custom-content"> <div class="o-content-block__inner"> <p><a href="/on-air/informativo-pacifica" target="_self"><img alt="" src="https://mmo.aiircdn.com/237/688806a26b45c.jpg" /></a></p> </div> </div><div class="o-content-block tb-custom-content"> <h2 class="o-headline"><span class="o-headline__main">Follow us on Social Media</span></h2> <div class="o-content-block__inner"> <table align="center" border="0" cellpadding="1" cellspacing="1" style="width:300px;"> <tbody> <tr> <td><a href="http://www.facebook.com/KPFK90.7/" target="_blank"><img alt="" src="https://mm.aiircdn.com/427/5ab00170993d2.jpg" style="border-width: 0px; border-style: solid; margin-left: 0px; margin-right: 0px;" /></a></td> <td><a href="http://twitter.com/KPFK" target="_blank"><img alt="" src="https://mm.aiircdn.com/427/5ab00171878c9.jpg" style="border-width: 0px; border-style: solid; margin-left: 0px; margin-right: 0px;" /></a></td> <td><a href="http://www.instagram.com/kpfk/" target="_blank"><img alt="" src="https://mm.aiircdn.com/427/5ab00170a24ea.jpg" style="border-width: 0px; border-style: solid; margin-left: 0px; margin-right: 0px;" /></a></td> <td> </td> </tr> <tr> <td><a href="https://www.youtube.com/@KPFKRadio" target="_blank"><img alt="" class="" src="https://mm.aiircdn.com/427/5ab001722ddf4.jpg" style="margin-left: 0px; margin-right: 0px;" /></a></td> <td><a href="http://soundcloud.com/KPFK" target="_blank"><img alt="" src="https://mm.aiircdn.com/427/5ab001717ded8.jpg" style="margin-left: 0px; margin-right: 0px;" /></a></td> <td><a href="https://vimeo.com/kpfk" target="_blank"><img alt="" src="https://mm.aiircdn.com/427/5ab001723761c.jpg" style="margin-left: 0px; margin-right: 0px;" /></a></td> </tr> </tbody> </table> </div> </div><div class="o-content-block tb-custom-content"> <div class="o-content-block__inner"> <p style="text-align: center;"><a href="https://kpfk.allyrafundraising.com/" target="_blank"><img alt="" src="https://mmo.aiircdn.com/237/681bff918c32f.jpg" style="width: 300px; height: 200px;" /></a></p> <p style="text-align: center;"><strong>KPFK is powered by people—not corporations.</strong><br /> Your donation fuels independent journalism, radical culture, and a voice for the voiceless.<br /> Support the media you believe in.</p> </div> </div> <div class="c-ad c-mpu js-spacing-on-load"><div class="gm-adpos" data-ads-target="pos" data-pos-id="6305" id="ad-pos-6305" ></div></div> </div> </div> </div> <div class="c-bottom-ads"><div class="c-ad c-ad--rectangle js-spacing-on-load"><div class="gm-adpos" data-ads-target="pos" data-pos-id="6306" id="ad-pos-6306" ></div></div><div class="c-ad c-ad--rectangle js-spacing-on-load"><div class="gm-adpos" data-ads-target="pos" data-pos-id="6307" id="ad-pos-6307" ></div></div><div class="c-ad c-ad--rectangle js-spacing-on-load"><div class="gm-adpos" data-ads-target="pos" data-pos-id="6308" id="ad-pos-6308" ></div></div><div class="c-ad c-ad--rectangle js-spacing-on-load"><div class="gm-adpos" data-ads-target="pos" data-pos-id="6309" id="ad-pos-6309" ></div></div></div> <div class="c-ad c-leaderboard c-leaderboard--bottom js-spacing-on-load"><div class="gm-adpos" data-ads-target="pos" data-pos-id="6311" id="ad-pos-6311" ></div></div> </div> </section> <div class="c-search-wrapper"> <div class="c-search js-search"> <h2 class="u-access">Search</h2> <form class="c-search__form" action="/searchresults/" method="get"> <div> <label class="u-access">Search</label> <input class="c-search__input" type="text" name="q" placeholder="Search..."> </div> <button class="c-search__submit" type="submit"><i class="c-search__icon">Search <svg width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M22.6503001,20.9493558 L16.9804066,15.2560826 C18.4382359,13.5829442 19.2369891,11.4777938 19.2369891,9.28624092 C19.2369891,4.16588842 14.9220488,0 9.61849455,0 C4.31494029,0 0,4.16588842 0,9.28624092 C0,14.4065934 4.31494029,18.5724818 9.61849455,18.5724818 C11.6095229,18.5724818 13.5068755,17.9926974 15.1290555,16.892076 L20.8420231,22.6285504 C21.0808127,22.8679739 21.4019868,23 21.7461616,23 C22.0719358,23 22.3809822,22.8800864 22.6155899,22.6620616 C23.1140788,22.1989608 23.1299702,21.431029 22.6503001,20.9493558 Z M9.61849455,2.42249763 C13.5386584,2.42249763 16.7278166,5.50149212 16.7278166,9.28624092 C16.7278166,13.0709897 13.5386584,16.1499842 9.61849455,16.1499842 C5.69833073,16.1499842 2.50917249,13.0709897 2.50917249,9.28624092 C2.50917249,5.50149212 5.69833073,2.42249763 9.61849455,2.42249763 Z" id="Shape"></path> </svg></i></button> </form> </div> </div> <footer class="c-page-footer"> <div class="o-wrapper"> <div class="dv-grid is-vertical-middle"> <div class="dv-grid__item dv-grid__item--flex-300"> <span class="c-page-footer__title">Look Around</span> <ul class="o-list-inline c-page-footer__list"> <li class="first "> <a href="/"> Home </a> </li> <li class=" "> <a href="/schedule/"> Schedule </a> </li> <li class=" "> <a href="https://donate.kpfk.org/"> Support </a> </li> <li class=" "> <a href="/on-air/"> Shows </a> </li> <li class=" "> <a href="/calendar/"> Events </a> </li> <li class=" "> <a href="/archives/"> Archives </a> </li> <li class=" last "> <a href="/searchresults/"> Search </a> </li> </ul> <span class="c-page-footer__title">More Links</span> <ul class="o-list-inline c-page-footer__list"><li class="o-list-inline__item"><a href="https://kpfk.careasy.org/home" class="c-footer-list__item" target="_blank">Vehicle Donations</a></li> <li class="o-list-inline__item"><a href="/support/" class="c-footer-list__item" >Donate</a></li> <li class="o-list-inline__item"><a href="/blogs/info-about-kpfk-and-pacifica/" class="c-footer-list__item" >KPFK Info, Contacts and Location</a></li> <li class="o-list-inline__item"><a href="https://www.kpfk.org/support/board" class="c-footer-list__item" target="_blank">Local Station Board</a></li> <li class="o-list-inline__item"><a href="/Resources/" class="c-footer-list__item" >Resources</a></li> <li class="o-list-inline__item"><a href="/support/fcc-applications/" class="c-footer-list__item" >FCC Applications</a></li> <li class="o-list-inline__item"><a href="https://www.kpfk.org/resources/jobs-at-kpfk-and-pacifica/" class="c-footer-list__item" >Careers</a></li> </ul> </div><!-- --><div class="dv-grid__item dv-grid__item--fix-300"> <ul class="o-list-inline c-social c-social--header"> <li class="o-list-inline__item"> <a href="http://www.facebook.com/KPFK90.7/" target="_blank" class="c-social__item c-social__item--fb"> <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.48-1.195 1.18v1.54h2.39l-.31 2.42h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg> <span class="u-access">Facebook</span> </a> </li><!-- --><li class="o-list-inline__item"> <a href="https://x.com/KPFK" target="_blank" class="c-social__item c-social__item--twit"> <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg> <span class="u-access">X</span> </a> </li><!-- --><li class="o-list-inline__item"> <a href="https://www.instagram.com/kpfk/" target="_blank" class="c-social__item c-social__item--inst"> <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C5.827 0 5.555.01 4.702.048 3.85.088 3.27.222 2.76.42c-.526.204-.973.478-1.417.923-.445.444-.72.89-.923 1.417-.198.51-.333 1.09-.372 1.942C.008 5.555 0 5.827 0 8s.01 2.445.048 3.298c.04.852.174 1.433.372 1.942.204.526.478.973.923 1.417.444.445.89.72 1.417.923.51.198 1.09.333 1.942.372.853.04 1.125.048 3.298.048s2.445-.01 3.298-.048c.852-.04 1.433-.174 1.942-.372.526-.204.973-.478 1.417-.923.445-.444.72-.89.923-1.417.198-.51.333-1.09.372-1.942.04-.853.048-1.125.048-3.298s-.01-2.445-.048-3.298c-.04-.852-.174-1.433-.372-1.942-.204-.526-.478-.973-.923-1.417-.444-.445-.89-.72-1.417-.923-.51-.198-1.09-.333-1.942-.372C10.445.008 10.173 0 8 0zm0 1.44c2.136 0 2.39.01 3.233.048.78.036 1.203.166 1.485.276.374.145.64.318.92.598.28.28.453.546.598.92.11.282.24.705.276 1.485.038.844.047 1.097.047 3.233s-.01 2.39-.05 3.233c-.04.78-.17 1.203-.28 1.485-.15.374-.32.64-.6.92-.28.28-.55.453-.92.598-.28.11-.71.24-1.49.276-.85.038-1.1.047-3.24.047s-2.39-.01-3.24-.05c-.78-.04-1.21-.17-1.49-.28-.38-.15-.64-.32-.92-.6-.28-.28-.46-.55-.6-.92-.11-.28-.24-.71-.28-1.49-.03-.84-.04-1.1-.04-3.23s.01-2.39.04-3.24c.04-.78.17-1.21.28-1.49.14-.38.32-.64.6-.92.28-.28.54-.46.92-.6.28-.11.7-.24 1.48-.28.85-.03 1.1-.04 3.24-.04zm0 2.452c-2.27 0-4.108 1.84-4.108 4.108 0 2.27 1.84 4.108 4.108 4.108 2.27 0 4.108-1.84 4.108-4.108 0-2.27-1.84-4.108-4.108-4.108zm0 6.775c-1.473 0-2.667-1.194-2.667-2.667 0-1.473 1.194-2.667 2.667-2.667 1.473 0 2.667 1.194 2.667 2.667 0 1.473-1.194 2.667-2.667 2.667zm5.23-6.937c0 .53-.43.96-.96.96s-.96-.43-.96-.96.43-.96.96-.96.96.43.96.96z"/></svg> <span class="u-access">Instagram</span> </a> </li><!-- --><li class="o-list-inline__item"> <a href="https://www.youtube.com/@KPFKRadio" target="_blank" class="c-social__item c-social__item--youtube"> <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M0 7.345c0-1.294.16-2.59.16-2.59s.156-1.1.636-1.587c.608-.637 1.408-.617 1.764-.684C3.84 2.36 8 2.324 8 2.324s3.362.004 5.6.166c.314.038.996.04 1.604.678.48.486.636 1.588.636 1.588S16 6.05 16 7.346v1.258c0 1.296-.16 2.59-.16 2.59s-.156 1.102-.636 1.588c-.608.638-1.29.64-1.604.678-2.238.162-5.6.166-5.6.166s-4.16-.037-5.44-.16c-.356-.067-1.156-.047-1.764-.684-.48-.487-.636-1.587-.636-1.587S0 9.9 0 8.605v-1.26zm6.348 2.73V5.58l4.323 2.255-4.32 2.24z"/></svg> <span class="u-access">YouTube</span> </a> </li> </ul> <div class="c-page-footer__appicons"> <a href="https://itunes.apple.com/app/id583381890" target="_blank"><img class="c-page-footer__appimg" src="https://i.aiircdn.com/appstore/appstore_092917.svg" alt="Available on the App Store" /></a> <a href="http://market.android.com/details?id=com.mobileroadie.app_pacifica" target="_blank"><img class="c-page-footer__appimg" src="https://i.aiircdn.com/appstore/google-play.png" alt="Available on Google Play" /></a> </div> <span class="c-copyright">© Copyright 2026 KPFK - Pacifica Radio Los Angeles - 90.7 FM Los Angeles - 98.7 FM Santa Barbara - 93.7 FM North San Diego - 99.5 FM Ridgecrest/China Lake. Powered by <a href="https://aiir.com" target="_blank" title="Aiir radio website CMS">Aiir</a>.</span> </div> </div> </div> </footer> </div> <script>var themeSettings = {"site_logo":"","head-background":"","font_family":"Raleway","flipbook_seconds":"8"};</script><a href="/_hp/" rel="nofollow" style="display: none" aria-hidden="true">On Air</a> </body> </html>