Scope: Public, shareable documentation for site owners and partners. This guide summarizes features, safe snippets, install steps, UX notes, and a public changelog. Internal credentials, private endpoints, and admin-only notes have been removed.
1) Overview
MVP TV is a lightweight, sidebar-ready experience that previews channels from the Melanated Voices Platform (MVP). It rotates channels automatically, keeps copy tight and centered, and drives viewers to the full channel experience at tv.melanatedvoices.com. Two companion widgets increase dwell time and discovery: a Related Posts Rotator and the Ecosystem (eco3) Sidebar.
Why this matters: faster time-to-content, more meaningful impressions for ads/sponsorships, and clean paths to watch, share, and explore.
2) MVP TV — Featured Channels (Sidebar)
What it is: a compact, auto-rotating TV card that loads a random MVP channel on page load and rotates every 70s (60s preview + ~10s buffer). Titles, emoji icons, and short descriptions sit directly under the player. Users can “Watch Now” (pop-out) or copy the link without breaking their session.
Included channels (sample)
- 🙏 ThriveHope OD — faith, service, impact, sustainability
- ✂️ Locticians OD — pros, culture, technique
- 🧬 ThriveHealth OD — wellness, recovery, longevity
- 🎵 ThriveCulture OD — music, art, style, stories
- 💼 ThriveBusiness OD — builders, brands, playbooks
- 💰 ThriveFinance OD — wealth, funding, flows
- 🎮 ThriveGaming OD — play, compete, create
- 📡 MVP TV (Linear) — flagship live stream
- 🖤 MVP BLACK (Linear) — Black-led culture in motion
- ⭐ MVP+ FAST (HLS) — flagship FAST stream (auto-muted by browsers)
Note: Linear channels play in-order; on‑demand (OD) channels can randomize their playlist.
UX & behavior
- Autoplay/pause by visibility: plays when in view; pauses when not.
- 70s rotation: static global timer; next channel preloaded.
- Session continuity: “Watch Now” opens the current stream in a new window (same time/place, not a fresh random).
- Clean controls: no extra pills, single “Featured Channels” subtitle (gold), minimal centered layout.
- Mute reminder only: unobtrusive note replaces a dedicated mute button.
- A11y: semantic roles, focus states, keyboard support, and sanely sized tap targets.
Public embed (vanilla HTML/CSS/JS)
Paste into your theme’s sidebar/content block. Requires Font Awesome (for icons) and jQuery (most BD themes include it). Replace or extend the CHANNELS array as needed.
<!-- MVP TV — Featured Channels (Public) -->
<link rel="preconnect" href="https://player.viloud.tv"/>
<style>
.mvtv-wrap{--mv-gold:#ffbf00;--mv-accent:#0d9488;--ink:#111827;--bg:#fff;--muted:#6b7280;--r:14px;background:var(--bg);color:var(--ink);border-radius:var(--r);box-shadow:0 10px 22px rgba(0,0,0,.18),0 6px 10px rgba(0,0,0,.12);margin:12px 0 18px;overflow:hidden;text-align:center}
.mvtv-head{padding:12px 12px 6px}.mvtv-hero{font-size:30px;line-height:1;margin:2px 0 6px}
.mvtv-title{font-weight:900;font-size:15px;letter-spacing:.2px}
.mvtv-sub{font-size:12.25px;margin-top:4px}
.mvtv-sub .pill{display:inline-block;border-radius:999px;padding:4px 10px;background:#000;color:var(--mv-gold);font-weight:900}
.mvtv-player{position:relative;padding-bottom:56.25%;height:0;margin:6px 12px;border-radius:12px;overflow:hidden;background:#000}
.mvtv-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mvtv-now{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:6px 12px 4px}
.mvtv-pill{display:inline-flex;align-items:center;gap:8px;background:#0f172a;color:#fff;font-weight:800;font-size:12.25px;padding:6px 12px;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.mvtv-desc{width:100%;font-size:12.5px;color:var(--muted);padding:0 8px}
.mvtv-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:6px 12px 12px}
.mvtv-iconBtn{display:inline-flex;align-items:center;gap:6px;color:#111827;text-decoration:none;font-size:13px;font-weight:900}
.mvtv-iconBtn i{font-size:15px}
.mvtv-foot{padding:2px 8px 10px;font-size:11.75px;color:#6b7280}
@media (max-width:420px){.mvtv-iconBtn{width:100%;justify-content:center}}
</style>
<div class="mvtv-wrap" id="mvtvWidget" role="complementary" aria-label="MVP TV Featured Channels">
<div class="mvtv-head">
<div class="mvtv-hero">📺</div>
<div class="mvtv-title">MVP TV</div>
<div class="mvtv-sub"><span class="pill">Featured Channels</span></div>
</div>
<div class="mvtv-player"><iframe id="mvtvPlayer" src="" allow="autoplay; fullscreen" allowfullscreen title="MVP TV Player"></iframe></div>
<div class="mvtv-now">
<div class="mvtv-pill"><span id="mvtvNowEmoji">📺</span> <span id="mvtvNowTitle">Loading…</span></div>
<div class="mvtv-desc" id="mvtvNowDesc"></div>
</div>
<div class="mvtv-actions">
<a class="mvtv-iconBtn" id="mvtvWatch" href="#" target="_blank" rel="noopener" title="Open this channel in a new window">
<i class="fa fa-external-link"></i> <span>Watch Now</span>
</a>
<a class="mvtv-iconBtn" id="mvtvCopy" href="#" title="Copy channel link">
<i class="fa fa-link"></i> <span>Copy Link</span>
</a>
</div>
<div class="mvtv-foot">Powered by <a href="https://tv.melanatedvoices.com" target="_blank" rel="noopener">Melanated Voices Platform (MVP)</a></div>
</div>
<script>
(function(){
var CHANNELS=[
{t:'ThriveHope OD',e:'🙏',d:'Faith • service • impact • sustainability.',id:'2aa9a0c12aa1d6d95362f697feb9d8b3',linear:false},
{t:'Locticians OD',e:'✂️',d:'Pros • culture • technique.',id:'5873bac4f8108a8b68b7dbe16ffa934d',linear:false},
{t:'ThriveHealth OD',e:'🧬',d:'Wellness, recovery, longevity.',id:'a2af56da8e9b907066d484035e3f582a',linear:false},
{t:'ThriveCulture OD',e:'🎵',d:'Music • art • style • stories.',id:'6b956bccaed0884336b03c6eef5190d1',linear:false},
{t:'ThriveBusiness OD',e:'💼',d:'Builders, brands, playbooks.',id:'36d5c00b559110fde70c88157aeacf86',linear:false},
{t:'ThriveFinance OD',e:'💰',d:'Money moves: wealth, funding, flows.',id:'bbd4c4d967aeb2564f7c44f36dc4ab86',linear:false},
{t:'ThriveGaming OD',e:'🎮',d:'Play • compete • create.',id:'1732ce914994b875e85fadf8f3418182',linear:false},
{t:'MVP TV (Linear)',e:'📡',d:'Flagship live stream.',id:'9becdcb45a687ea3a5b49da3c2a80f47',linear:true},
{t:'MVP BLACK (Linear)',e:'🖤',d:'Black-led culture in motion.',id:'4212bf6a28ef0a96f8e30cf541a664e9',linear:true},
{t:'MVP+ FAST',e:'⭐',d:'Flagship FAST stream (auto-muted).',hls:'https://app.viloud.tv/hls/channel/b7ddef689472e34a0ecd715dbeb7d6f9.m3u8',linear:true}
];
var $=window.jQuery; if(!$) return; // Requires jQuery on page
var $p=$('#mvtvPlayer'), $t=$('#mvtvNowTitle'), $e=$('#mvtvNowEmoji'), $d=$('#mvtvNowDesc');
var $watch=$('#mvtvWatch'), $copy=$('#mvtvCopy');
// Shuffle channels for variety on each visit
CHANNELS=CHANNELS.sort(function(){return Math.random()-.5});
function embedUrl(c){
if(c.hls){
// Allow simple HLS embed via generic player page (fallback). Replace with your own player if desired.
return 'https://player.viloud.tv/embed/?source='+encodeURIComponent(c.hls)+'&autoplay=1&muted=1&controls=1&title=1&share=1';
}
var rnd = c.linear ? 0 : 1; // OD can randomize
return 'https://player.viloud.tv/embed/channel/'+c.id+'?autoplay=1&volume=1&controls=1&title=1&share=1&open_playlist=0&random='+rnd;
}
// Rotation
var idx=0, ROT_MS=70000, timer=null, inView=true; // 70s global
function setNow(i){
var c=CHANNELS[i]; if(!c) return;
var src=embedUrl(c);
$p.attr('src', src);
$t.text(c.t); $e.text(c.e||'📺'); $d.text(c.d||'');
$watch.attr('href', src); // open the same stream
$copy.data('href', src);
idx=i;
}
function next(){ var n=(idx+1)%CHANNELS.length; setNow(n); }
function start(){ if(timer) clearInterval(timer); timer=setInterval(function(){ if(inView) next(); }, ROT_MS); }
if('IntersectionObserver' in window){
var io=new IntersectionObserver(function(es){ es.forEach(function(e){ inView=e.isIntersecting; }); }, {threshold:.2});
io.observe(document.getElementById('mvtvWidget'));
}
// Copy current link
$copy.on('click', function(ev){ ev.preventDefault(); var u=$(this).data('href')||''; if(!u) return; navigator.clipboard?.writeText(u).then(function(){ $copy.find('span').text('Copied!'); setTimeout(function(){ $copy.find('span').text('Copy Link'); }, 1000); }); });
setNow(0); start();
})();
</script>
Branding: Subtitle reads Featured Channels on a black pill with gold text. Footer: “Powered by Melanated Voices Platform (MVP)”.
3) Related Posts — Auto-Rotating Card (Public)
What it is: A single-card “you may also like” unit that pulls from your CMS’s related items (e.g., Brilliant Directories defaults). One card is visible at a time; it rotates every ~6.5s, pauses on hover and when off-screen, and keeps titles on one line with ellipsis.
Why: low cognitive load, constant motion, and a high CTR path back into your content.
Front-end skeleton (uses the images your platform already returns):
<div class="bd-related-rotator" aria-label="More You’ll Love">
<h2 class="nomargin"><span class="em">✨</span>More You’ll Love</h2>
<div class="bd-rel-wrap" id="bdRelDeck">
<!-- Server prints ~8–10 .bd-rel-card articles here with <img>, title link, Open/Copy buttons -->
</div>
</div>
<script>
(function($){
var $deck=$('#bdRelDeck'), $cards=$deck.find('.bd-rel-card'); if(!$cards.length) return;
var cur=0, max=$cards.length, ROT_MS=6500, timer=null, inView=true;
function show(i){ $cards.removeClass('active').eq(i).addClass('active'); cur=i; }
function next(){ show((cur+1)%max); }
if('IntersectionObserver' in window){ var io=new IntersectionObserver(function(es){ es.forEach(function(e){inView=e.isIntersecting;});},{threshold:.2}); io.observe($deck[0]); }
function start(){ if(timer) clearInterval(timer); timer=setInterval(function(){ if(inView) next(); }, ROT_MS); }
$deck.on('mouseenter focusin', function(){ clearInterval(timer); timer=null; });
$deck.on('mouseleave focusout', start);
show(0); start();
})(jQuery);
</script>
Implementation note: On BD, keep your standard related-posts query intact and only replace the front-end markup/styles with this skeleton.
4) Ecosystem (eco3) Sidebar — Collapsible All‑in‑One
What it is: A compact card with a brand/social pill strip, a rotating “badge” carousel (5–8s cadence), and a collapsible ecosystem hub with neatly grouped links to Locticians, ThriveSeat, CrownRewards, MVP TV, courses, AI tools, business tools, galleries, and labs.
Highlights
- Pill strip: rotates if social accounts are connected; otherwise shows static ecosystem badges.
- Badge rotator: random in/out animations; pauses on hover and off-screen.
- UTM/affiliate friendly: optional client‑side decoration that appends public parameters to outbound links. (Skip decoration for social networks.)
- A11y/Perf: minimal DOM churn, intersection observers, keyboard‑friendly.
Affiliate/UTM decoration (public-safe example):
<script>
(function(){
var KEYS=['utm_source','utm_medium','utm_campaign','utm_term','utm_content','crown-aff'];
try{
var p=new URLSearchParams(location.search);
KEYS.forEach(function(k){ if(p.has(k)) sessionStorage.setItem(k,p.get(k)); });
}catch(e){}
document.addEventListener('click',function(ev){
var a=ev.target.closest('a[href]'); if(!a) return;
try{
var u=new URL(a.href, location.origin);
if(/^(https?:)/i.test(u.protocol) && !/(facebook|instagram|twitter|tiktok|snapchat)\./i.test(u.hostname)){
KEYS.forEach(function(k){ var v=sessionStorage.getItem(k); if(v && !u.searchParams.has(k)) u.searchParams.set(k,v); });
a.href=u.toString();
}
}catch(e){}
}, true);
})();
</script>
5) Branding & Copy Guidelines
- Use MVP TV for product name in UI and copy.
- Subtitle: Featured Channels (gold text on black pill).
- Footer attribution: “Powered by Melanated Voices Platform (MVP)” linking to
- Keep channel descriptions to a single concise line (40–90 chars) to prevent layout shift.
6) Analytics & Attribution (Public Summary)
- All outbound ecosystem links can receive public UTM and
- Social media links are deliberately excluded from decoration.
- The widgets use standard iframes and anchors; they are compatible with common analytics pixels and tag managers.
7) Installation (Quick)
- Include Font Awesome (for icons) and ensure jQuery is loaded.
- Paste the MVP TV embed snippet in your sidebar/widget area.
- Paste the Affiliate/UTM decorator if you want automatic parameter passthrough.
- (Optional) Add the Related Posts Rotator markup on content pages.
- (Optional) Add the eco3 Sidebar where appropriate.
Performance tips
- Keep only one TV widget per page for best performance.
- Avoid loading heavy scripts before the widgets; they are async‑friendly but benefit from a clean render path.
8) Public Changelog (Highlights)
2025‑09 (v2025.09)
- New: MVP TV Featured Channels widget — auto‑rotate, preloading, in‑view play/pause, session‑preserving “Watch Now”.
- New: Support for MVP+ FAST (m3u8/HLS) via generic embed fallback.
- New: Gold “Featured Channels” pill; simplified controls; consolidated icons.
- New: Related Posts Rotator — single card, 6.5s cadence, off‑screen pause.
- New: Ecosystem (eco3) card — rotating badge carousel + collapsible hub.
- Upgrade: Title ellipsis to prevent reflow; tighter spacing; mobile scaling.
- Upgrade: Accessible roles/labels, keyboard focus, and hover states.
9) Roadmap (Public)
- Optional captions toggle on TV widget (where available).
- Low‑bandwidth thumbnail fallback for slower connections.
- Optional per‑channel preview durations.
10) Support
- TV: tv.melanatedvoices.com
- General: melanatedvoices.com
- Feedback: contact page on either site
Thanks for building with the Melanated Voices Platform. ✊🏾📺