v0.1.42: new-tab bittorrented — all media types + in-modal player

- show Live TV, Podcasts, Radio, Movies favorites; playable items (TV, latest
  podcast episode) open bittorrented.com/api/player in a themed modal iframe
  (autoplay/fullscreen), passing TronBrowser's dark+cyan theme
- radio/movies link out (gated streams)

Author: ralyodio

apps/desktop/extensions/ai-sidebar/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "TronBrowser",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "description": "TronBrowser — privacy-first, AI-native. Branded new tab, private search, CoinPay login, and a bring-your-own-keys AI sidebar.",
   "icons": {
     "16": "icons/icon-16.png",

apps/desktop/extensions/ai-sidebar/newtab.css

@@ -37,6 +37,17 @@ body {
   border-radius: 10px; padding: 14px 16px; white-space: pre-wrap; font-size: 13px; color: var(--fg); }
 .motd-body a { color: var(--cyan); text-decoration: none; }
 
+/* Embeddable player modal */
+.modal { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.82); display: grid; place-items: center; }
+.modal[hidden] { display: none; }
+.modal-box { position: relative; width: min(92vw, 1040px); height: min(82vh, 660px);
+  background: #000; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
+  box-shadow: 0 20px 80px rgba(0,0,0,.6); }
+.modal-box iframe { width: 100%; height: 100%; border: 0; display: block; }
+.modal-close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px;
+  background: rgba(0,0,0,.6); color: #fff; border: 1px solid var(--line); border-radius: 8px;
+  cursor: pointer; font: inherit; }
+
 .btrgrid { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }
 .btr-group h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: 1px; color: var(--cyan); }
 .btr-items { display: flex; flex-wrap: wrap; gap: 10px; }

apps/desktop/extensions/ai-sidebar/newtab.html

@@ -40,6 +40,13 @@
     <div id="motd" class="motd-body"></div>
   </section>
 
+  <div id="player-modal" class="modal" hidden>
+    <div class="modal-box">
+      <button id="player-close" class="modal-close" title="Close">✕</button>
+      <iframe id="player-frame" allow="autoplay; fullscreen; encrypted-media" allowfullscreen></iframe>
+    </div>
+  </div>
+
   <section class="strip" id="btr-sec" hidden>
     <div class="strip-head"><h2>bittorrented</h2><a class="edit" href="https://bittorrented.com" target="_blank">open</a></div>
     <div id="btr" class="btrgrid"></div>

apps/desktop/extensions/ai-sidebar/newtab.js

@@ -246,24 +246,42 @@ async function renderBtr() {
     data = await r.json();
   } catch { sec.hidden = true; return; }
 
-  const tv = data.tv || [];
-  const pods = data.podcasts || [];
+  const tv = data.tv || [], radio = data.radio || [], pods = data.podcasts || [], movies = data.movies || [];
   sec.hidden = false;
-  const item = (href, img, ph, label) =>
-    `<a class="btr-item" href="${escAttr(href)}" target="_blank">` +
+
+  // Playable tiles carry data-player (open in a modal); the rest link out.
+  const tile = (player, url, img, ph, label) =>
+    `<a class="btr-item" ${player ? `href="#" data-player="${escAttr(player)}"` : `href="${escAttr(url)}" target="_blank"`}>` +
     (img ? `<img src="${escAttr(img)}" alt="" loading="lazy" referrerpolicy="no-referrer" />` : `<span class="btr-ph">${ph}</span>`) +
     `<span class="btr-label">${escapeHtml(label)}</span></a>`;
   const group = (title, items) => items.length
     ? `<div class="btr-group"><h3>${title}</h3><div class="btr-items">${items.join('')}</div></div>` : '';
 
-  if (!tv.length && !pods.length) {
-    el('btr').innerHTML = '<p class="muted">Connected — add Live TV or podcast favorites on bittorrented.com and they’ll show up here.</p>';
+  if (!tv.length && !radio.length && !pods.length && !movies.length) {
+    el('btr').innerHTML = '<p class="muted">Connected — add Live TV, radio, podcast or movie favorites on bittorrented.com and they’ll show up here.</p>';
     return;
   }
   el('btr').innerHTML =
-    group('Live TV', tv.slice(0, 12).map((c) => item(c.url, c.logo, '📺', c.name))) +
-    group('Podcasts', pods.slice(0, 12).map((p) => item(p.url, p.image, '🎙', p.title)));
+    group('Live TV', tv.slice(0, 12).map((c) => tile(c.player, c.url, c.logo, '📺', c.name))) +
+    group('Podcasts', pods.slice(0, 12).map((p) => tile((p.episodes || [])[0]?.player, p.url, p.image, '🎙', p.title))) +
+    group('Radio', radio.slice(0, 12).map((s) => tile(null, s.url, s.logo, '📻', s.name))) +
+    group('Movies', movies.slice(0, 12).map((m) => tile(null, m.url, m.poster, '🎬', m.title)));
+}
+
+// Open a bittorrented /api/player URL in a themed modal iframe.
+function openPlayer(url) {
+  const sep = url.includes('?') ? '&' : '?';
+  el('player-frame').src = `${url}${sep}theme=dark&bg=${encodeURIComponent('#05070d')}&accent=${encodeURIComponent('#34e7ff')}`;
+  el('player-modal').hidden = false;
 }
+function closePlayer() { el('player-modal').hidden = true; el('player-frame').src = 'about:blank'; }
+el('btr').addEventListener('click', (e) => {
+  const a = e.target.closest('[data-player]');
+  if (a) { e.preventDefault(); openPlayer(a.getAttribute('data-player')); }
+});
+el('player-close').addEventListener('click', closePlayer);
+el('player-modal').addEventListener('click', (e) => { if (e.target === el('player-modal')) closePlayer(); });
+document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closePlayer(); });
 
 renderMotd();
 renderBtr();

apps/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tronbrowser/desktop",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "private": true,
   "description": "Desktop shell for the TronBrowser Chromium fork",
   "type": "module",

apps/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tronbrowser/docs",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "private": true,
   "description": "Documentation site",
   "type": "module",

apps/mobile/app.json

@@ -4,7 +4,7 @@
     "slug": "tronbrowserdev",
     "owner": "profullstack",
     "scheme": "tronbrowser",
-    "version": "0.1.41",
+    "version": "0.1.42",
     "orientation": "portrait",
     "userInterfaceStyle": "dark",
     "platforms": [

apps/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tronbrowser/mobile",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "private": true,
   "description": "TronBrowser mobile (Expo / React Native) — Phase 2",
   "type": "module",

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tronbrowser/web",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "private": true,
   "description": "TronBrowser marketing site + web dashboard",
   "type": "module",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tronbrowser",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "private": true,
   "description": "TronBrowser.dev — open-source, privacy-first, AI-native browser",
   "packageManager": "pnpm@9.12.0",