MVP Widgets Ops Playbook Melanated Voices Platform (MVP)

INTERNAL — RESTRICTED

Confidential Engineering & Ops Doc

This document consolidates the end‑to‑end design, code architecture, release notes, and operating procedures for the widgets and UI systems we built and refined in this thread: MVP TV — Featured Channels (Sidebar), BD Related Posts — Auto‑Rotating Card Deck, and eco3 — Collapsible All‑in‑One Sidebar. It is intended for internal engineering, growth, and product ops.

0) Executive Summary

  • Goal: Increase attention, time‑on‑page, return visits, and cross‑ecosystem discovery while preserving a smooth, minimal, mobile‑friendly experience that works inside Brilliant Directories (BD) and general PHP/LAMP environments.
  • What we shipped:

1) Product Principles (“Key Values”)

  1. Attention wins: bold but minimal; motion has purpose (low cognitive load).
  2. Frictionless preview → intent: instant previews, short hooks, clear CTAs.
  3. Continuity: pop‑outs continue the current stream/session when possible (don’t “restart” viewers).
  4. Graceful degradation: BD quirks, ad blockers, slow networks; never show broken UI.
  5. Observability by default: all key interactions fire measurement events compatible with CrownLytics/UTMs.
  6. Accessibility first: semantic roles, ARIA labels, keyboard pause, color contrast.

2) MVP TV — Featured Channels (Sidebar)

2.1 Features

  • Branding: title “MVP TV”, big 📺 icon above, “Featured Channels” subtitle in gold pill on black.
  • Player: Viloud
  • Rotation: random start; auto‑rotate every 70s (60s preview + 10s buffer). Timer is global/static and keeps ticking while window open.
  • Controls: Removed “Next”/mute UI; added two minimalist black icons under player:
    • Watch Now (opens current channel in a new window; continuation intent)
    • Copy Link (copies the current channel URL)
  • Now Watching (below screen): emoji + channel title + short description.
  • Linear vs OD: OD uses
  • Preload: next channel is prepared to minimize buffer; hover tooltips reflect the actual next item.
  • Powered by: small footnote: Powered by Melanated Voices Platform (MVP) → tv.melanatedvoices.com.

2.2 Channel Catalogue

  • OD (random): ThriveHope (adds sustainability initiatives), Locticians, ThriveHealth, ThriveCulture, ThriveBusiness, ThriveFinance, ThriveGaming.
  • Linear: MVP TV (flagship), MVP BLACK (linear), MVP+ FAST via m3u8:

2.3 UX/Interaction Rules

  • No logo overload; minimal header; no redundant pills; consistent “Now Watching” grammar across channels.
  • Sticky/PiP disabled unless we re‑enable only on manual user interaction (deferred).
  • Pop‑out seeks to preserve the current channel/continuity (best‑effort with Viloud).

2.4 Accessibility

  • role="complementary"
  • Keyboard users can pause rotation by focusing the widget; tooltips avoid motion surprise.

2.5 Engineering Notes

  • Timer: single interval; remains active as long as page is open; rotation gated by in‑view state.
  • Preload: image/link hints for “next” channel; avoids blocking main thread.
  • Sync: rotation clock dictates channel change; progress/timer UI matches the 70s cadence.
  • Removal list: mute button, browse/expand variants, duplicate pills, PiP, full‑width buttons.

2.6 Event Map (CrownLytics)

  • mvtv_view
  • mvtv_channel_change
  • mvtv_popout_click
  • mvtv_copy_click

Data layer snippet (example): 

window.dataLayer = window.dataLayer || [];
function track(evt, payload){ try{ dataLayer.push({event: evt, ...payload}); }catch(e){} }

3) BD Related Posts — Auto‑Rotating Card Deck

3.1 Why we rebuilt

  • Prior attempts broke images (protocol/path issues) and introduced stray chars (e.g.,
  • Needed strict compatibility with BD’s default query + media resolution to ensure thumbnails always render.

3.2 What’s inside

  • Queries: identical to BD’s
  • Media: re‑runs
  • Deck: 8–10 items; single-card rotation, no bullets/arrows; pauses on hover/off‑screen.
  • Titles: one line + explicit
  • Header: rotating single‑emoji hook (e.g.,
  • Actions: Open and Copy link (with robust clipboard fallback).
  • No stray preload: removed

3.3 Known BD Quirks + Fixes

  • Mixed PHP/HTML can duplicate blocks — keep the render layer clean.
  • Avoid
  • mysql()

3.4 Events

  • bdrel_impression
  • bdrel_card_view
  • bdrel_copy_click

4) eco3 — Collapsible All‑in‑One Sidebar (Closed by default)

4.1 Composition

  • Header: “Verified Integrations”.
  • Brand/Platform Pills: Rotating strip (if more than visible count) prioritizing active socials; backfilled with ecosystem placeholders (Locticians, ThriveSeat, CrownRewards, CrownFluence, Mane Experience, Artful Mane, CrownLytics).
  • Main Rotator: 5–8s slides with randomized animations (fade/up/left/zoom/tilt).
  • Collapsible Ecosystem: one‑open‑at‑a‑time accordion; QuickNav select jumps; deep‑link hash mapping.

4.2 Content Pools

  • Core Integrations (conditional on member fields): ThriveSeat, ThrivePeer, CrownThriveU, CrownRewards, Crown Affiliates.
  • Go‑Flipbooks: normalized and classified (Services / Lookbook / Guide / Catalog / Booking).
  • Sustainability: EcoDrive (water, plastics, trees, kelp, etc.) + Stripe Climate (DAC, Mineralization, Bio, OAE, EW).
  • XENThrive: added and positioned with correct brand tone; links active.

4.3 Link Decoration Policy

  • Append UTMs/affiliate to all ecosystem/internal links originating from this widget, except: Social media domains, EcoDrive, Stripe.
  • Ensure

4.4 Events

  • eco3_pill_rotate

5) Release Notes & Changelog

Dates/times omitted; sequence reflects our iteration order.

MVP TV — Sidebar

  • v1.0: Base widget; random channel; minimal header; Now Watching; Preview/Pop‑out.
  • v1.1: Remove logo; center all; unify design across channels; Featured Channels gold; Powered by MVP link.
  • v1.2: Add channels: ThriveHealth, ThriveCulture, ThriveBusiness, MVP TV (linear), MVP BLACK (linear).
  • v1.3: Add big 📺 icon; “Loading…” pill above screen; fix browse/expand.
  • v1.4: Convert dropdown → rotating badge; 10s timers; add ThriveFinance & ThriveGaming; remove bottom pill.
  • v1.5: Button → Preview Channel; Now Watching + description below TV; add Pop‑out.
  • v1.6: Sync progress & channel; Featured subtitle in black pill; refine typography.
  • v1.7: Static 70s timer (60+10 buffer); pop‑out preserves continuity; remove PiP; autoplay in view / pause out of view.
  • v1.8: Remove “Next” button; preload next channel; accurate hover tooltip; icons only (black) for Watch and Copy; remove mute UI (bottom reminder removed per latest).
  • v1.9: Add MVP+ FAST (m3u8); OD vs linear rules hardened.

BD Related Posts — Deck

  • v1.0: Port BD queries exactly; 8–10 rotating cards; ellipsis; copy/open actions.
  • v1.1: Fix double emoji in hooks; remove stray
  • v1.2: Image bullet‑proofing: re‑run BD media; normalize

eco3 — Collapsible Sidebar

  • v1.0: Verified Integrations header; rotating social/brand pills; main slide rotator; collapsible ecosystem.
  • v1.1: UTM/affiliate appending to ecosystem/internal links; exemptions: socials, EcoDrive, Stripe.
  • v1.2: Go‑Flipbooks pool; classification; sustainability interleaving cadence; XENThrive links added; pill rotation bug fixed in header.

6) Architecture & Key Implementation Details

6.1 Common

  • IntersectionObserver for auto‑pause out of view (MVP TV & BD Deck) to save CPU and avoid dissonance.
  • Timers: one interval per component; cleared/resumed on hover/focus, re‑scheduled on view change.
  • Preload strategy: lightweight image hints in hidden container—no
  • Responsiveness: narrow (≤420px) rules set buttons to stack or size to text; no full‑width buttons unless requested.
  • A11y/ARIA: roles on landmarks & slides;

6.2 MVP TV specifics

  • Channel object:
  • Rotation:
  • Preload Next: prepare next URL/tooltip; swap on tick.
  • Pop‑out:

6.3 BD Deck specifics

  • Media Normalizer: if
  • Title Clamp: explicit

6.4 eco3 specifics

  • Pill Rotation: if more items than visible, rotate every ~6s; pause on hover; no rotation if only placeholders.
  • Link Decorator: read UTM/affiliate params from
  • Accordion: only one

7) Install Guides

7.1 MVP TV (Sidebar)

  1. Include the widget PHP/HTML/CSS/JS in a BD widget or theme partial that renders in the sidebar.
  2. Ensure Font Awesome is available (for icons).
  3. Add/maintain the
  4. Confirm

7.2 BD Related Posts Deck

  1. Replace the stock “Bootstrap Theme – Display – Related Posts by Category” widget with our image‑safe v3.6 render layer.
  2. Do not change the BD queries or
  3. Place CSS in widget header or theme CSS; JS at bottom of widget.

7.3 eco3 Sidebar

  1. Drop
  2. Map member fields (
  3. Confirm brand pill icons (Font Awesome) load; verify QuickNav ids; confirm link decoration exemptions.

8) QA & Acceptance Checklist

  • Visual:
    • MVP TV header center‑aligned; gold pill subtitle on black; no extra pills.
    • “Now Watching” shows correct emoji/title/desc for each channel.
    • BD Deck cards show real images; titles never wrap to two lines; no layout shift.
    • eco3 pills rotate (if socials active) and stop on hover.
  • Behavior:
    • MVP TV: auto‑starts when in view; pauses out of view; rotates every 70s; pop‑out continues current channel; copy link puts full absolute URL on clipboard.
    • BD Deck: rotates 6.5s, pauses on hover/off‑screen; copy link works with fallback.
    • eco3: slides rotate 5–8s; QuickNav opens correct section; only one accordion open.
  • Perf: no console errors; CPU stable when not in view; no network floods.
  • A11y: focusable controls;

9) Analytics & Attribution

  • UTM & Affiliate decoration: eco3 appends for internal/ecosystem links; exempt socials/EcoDrive/Stripe.
  • Suggested UTM defaults:
  • Event names aligned to CrownLytics; confirm GA4 or CDP mapping.

10) Roadmap (Short‑Term)

  • MVP TV: lightweight channel lineup tooltip w/ next‑up preview art; optional keyboard shortcuts (←/→) when focused.
  • BD Deck: add post type badges (Article/Video/Event) via a small corner pill; optional “Save” action for logged‑in users.
  • eco3: add campaign‑of‑the‑day slot; A/B test slide order/cadence; progressive image loading per slide.

11) Troubleshooting

  • Images not showing (BD): verify
  • Auto‑rotation stuck: IntersectionObserver may be paused (not in viewport); hover/focus stops the timer; test by scrolling slightly.
  • Pop‑out restarts: Viloud linear streams may not support mid‑point seek; continuity is best‑effort.

12) Security & Compliance

  • Open in new window always with
  • No third‑party preload injections; adhere to BD output constraints.
  • Privacy: events include generic IDs only; no PII in analytics payloads.

13) Appendix — Key Snippets (for reference)

These are illustrative only; actual widgets in codebase are canonical.

A. MVP TV: Channel map → embed URL

$random = $c['isLinear'] ? 0 : 1;
$embed  = "https://player.viloud.tv/embed/channel/{$c['id']}?autoplay=1&volume=1&controls=1&title=1&share=1&open_playlist=0&random={$random}";

B. BD Deck: image hardening

$img = $r['img'];
if ($img && strpos($img, 'http') !== 0) {
  $img = preg_replace('~^.*?/public_html~i', '', $img);
  if ($img === '' || $img[0] !== '/') $img = '/'.$img;
}

C. eco3: decorate links with UTMs (exempt list)

const EXEMPT = ['soundcloud.com','youtube.com','instagram.com','facebook.com','twitter.com','x.com','pinterest.com','tiktok.com','snapchat.com','wa.me','app.ecodrive.community','climate.stripe.com'];
function decorate(url){
  try{ const u=new URL(url,location.origin);
    if(!/^https?:$/.test(u.protocol)) return url;
    if(EXEMPT.some(d=>u.hostname.endsWith(d))) return url;
    const s=new URLSearchParams(location.search);
    ['utm_source','utm_medium','utm_campaign','utm_term','utm_content','crown-aff'].forEach(k=>{
      const v=s.get(k)||sessionStorage.getItem(k); if(v && !u.searchParams.has(k)) u.searchParams.set(k,v);
    });
    return u.toString();
  }catch(e){return url}
}

End of Document

Was this article helpful?

MVP TV & Ecosystem Widgets — Public Release Notes & Guide (v2025.09)
Master Changelog — Locticians Enhancements (Aug–Sep 2025)