unified-video-framework 1.4.442 → 1.4.443

package/packages/web/src/WebPlayer.ts

@@ -2902,27 +2902,39 @@ export class WebPlayer extends BasePlayer {
       font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
       z-index: 100;
       pointer-events: none;
+      filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
     `;
 
     // 1. Globe Block (Left)
     const globeBlock = document.createElement('div');
     globeBlock.style.cssText = `
-      width: ${height * 1.2}px;
+      width: ${height * 1.3}px;
       height: ${height}px;
-      background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
+      background: linear-gradient(135deg, #e74c3c 0%, #c0392b 50%, #962d22 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
-      clip-path: polygon(0% 0%, 75% 0%, 100% 100%, 0% 100%);
-      z-index: 20;
-      box-shadow: 10px 0 20px rgba(0,0,0,0.4);
+      clip-path: polygon(0% 0%, 78% 0%, 100% 100%, 0% 100%);
+      z-index: 30;
       position: relative;
+      overflow: hidden;
+    `;
+
+    // Glossy Overlay for Globe Block
+    const glossyGlobe = document.createElement('div');
+    glossyGlobe.style.cssText = `
+      position: absolute;
+      top: 0; left: 0; right: 0; height: 40%;
+      background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
+      pointer-events: none;
     `;
+    globeBlock.appendChild(glossyGlobe);
+
     const globe = this.createGlobeElement(true);
-    globe.style.width = '45%';
-    globe.style.height = '45%';
-    globe.style.marginRight = '15%'; // Offset from the angle
+    globe.style.width = '42%';
+    globe.style.height = '42%';
+    globe.style.marginRight = '18%';
     globeBlock.appendChild(globe);
     ticker.appendChild(globeBlock);
 
@@ -2932,7 +2944,7 @@ export class WebPlayer extends BasePlayer {
       flex-grow: 1;
       display: flex;
       flex-direction: column;
-      margin-left: -${height * 0.3}px; /* Deeper overlap */
+      margin-left: -${height * 0.35}px;
       z-index: 10;
     `;
 
@@ -2941,13 +2953,23 @@ export class WebPlayer extends BasePlayer {
     topBar.style.cssText = `
       height: 55%;
       background: linear-gradient(90deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
-      clip-path: polygon(5% 0, 100% 0, 98% 100%, 0% 100%);
+      clip-path: polygon(4% 0, 100% 0, 98.5% 100%, 0% 100%);
       display: flex;
       align-items: center;
-      padding: 0 40px 0 60px;
+      padding: 0 40px 0 65px;
       color: white;
-      border-bottom: 3px solid rgba(255,255,255,0.1);
+      position: relative;
+      overflow: hidden;
+      border-bottom: 2px solid rgba(255,255,255,0.15);
+    `;
+
+    const glossyTop = document.createElement('div');
+    glossyTop.style.cssText = `
+      position: absolute;
+      top: 0; left: 0; right: 0; height: 35%;
+      background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
     `;
+    topBar.appendChild(glossyTop);
 
     const breakingText = document.createElement('span');
     breakingText.textContent = 'BREAKING NEWS';
@@ -2955,21 +2977,23 @@ export class WebPlayer extends BasePlayer {
       font-weight: 900;
       font-style: italic;
       font-size: ${height * 0.2}px;
-      margin-right: 20px;
+      margin-right: 25px;
       white-space: nowrap;
       color: #fff;
-      text-shadow: 0 0 10px rgba(255,255,255,0.5);
+      text-shadow: 0 0 12px rgba(255,255,255,0.6);
+      letter-spacing: 0.5px;
     `;
     topBar.appendChild(breakingText);
 
     const headlineText = document.createElement('span');
     headlineText.textContent = config.headline || 'LOREM IPSUM DOLOR SIT AMET, CONSECTETUER';
     headlineText.style.cssText = `
-      font-weight: 700;
-      font-size: ${height * 0.25}px;
+      font-weight: 800;
+      font-size: ${height * 0.26}px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
     `;
     topBar.appendChild(headlineText);
     content.appendChild(topBar);
@@ -2978,32 +3002,34 @@ export class WebPlayer extends BasePlayer {
     const bottomBar = document.createElement('div');
     bottomBar.style.cssText = `
       height: 45%;
-      background: #0d0d0d;
+      background: linear-gradient(90deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
       display: flex;
       align-items: center;
-      clip-path: polygon(2% 0, 100% 0, 100% 100%, 0% 100%);
-      border-top: 1px solid rgba(255,255,255,0.05);
+      clip-path: polygon(1.5% 0, 100% 0, 100% 100%, 0% 100%);
+      border-top: 1px solid rgba(255,255,255,0.08);
     `;
 
     const liveBadge = document.createElement('div');
     liveBadge.textContent = 'LIVE';
     liveBadge.style.cssText = `
-      background: #f1c40f;
+      background: linear-gradient(180deg, #f1c40f 0%, #d4ac0d 100%);
       color: #000;
       font-weight: 900;
       font-size: ${height * 0.16}px;
-      padding: 2px 12px;
-      margin-left: 50px;
-      clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
+      padding: 2px 14px;
+      margin-left: 55px;
+      clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
+      box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
     `;
     bottomBar.appendChild(liveBadge);
 
-    // Scrolling track
     const trackContainer = document.createElement('div');
     trackContainer.style.cssText = `flex-grow: 1; overflow: hidden; height: 100%; display: flex; align-items: center;`;
     const track = this.createSeamlessScrollingTrack(config.items || [], config);
     track.style.fontSize = `${height * 0.18}px`;
     track.style.color = '#fff';
+    track.style.fontWeight = '700';
+    track.style.textShadow = '1px 1px 2px rgba(0,0,0,0.8)';
     trackContainer.appendChild(track);
     bottomBar.appendChild(trackContainer);
 
@@ -3020,7 +3046,6 @@ export class WebPlayer extends BasePlayer {
 
     const height = config.height || 75;
     const bottomOffset = config.bottomOffset || 0;
-    const topOffset = config.topOffset || 10;
 
     ticker.style.cssText = `
       position: absolute;
@@ -3033,16 +3058,17 @@ export class WebPlayer extends BasePlayer {
       font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
       z-index: 100;
       pointer-events: none;
+      filter: drop-shadow(0 8px 12px rgba(0,0,0,0.4));
     `;
 
-    // Globe icon (floating on left, nested for z-index control)
+    // Globe Wrapper
     const globeWrapper = document.createElement('div');
     globeWrapper.style.cssText = `
-      width: ${height * 0.75}px;
-      height: ${height * 0.75}px;
+      width: ${height * 0.8}px;
+      height: ${height * 0.8}px;
       position: relative;
-      z-index: 30;
-      margin-right: 10px;
+      z-index: 40;
+      margin-right: 12px;
       flex-shrink: 0;
     `;
 
@@ -3050,17 +3076,30 @@ export class WebPlayer extends BasePlayer {
     globeContainer.style.cssText = `
       width: 100%;
       height: 100%;
-      background: radial-gradient(circle, #e74c3c 0%, #c0392b 100%);
+      background: radial-gradient(circle at 30% 30%, #e74c3c 0%, #c1392b 60%, #962d22 100%);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      box-shadow: 0 0 25px rgba(0,0,0,0.6);
+      box-shadow: inset -5px -5px 15px rgba(0,0,0,0.5), 0 0 25px rgba(0,0,0,0.6);
       border: 3px solid #fff;
+      overflow: hidden;
     `;
+
+    const glossyGlobeEffect = document.createElement('div');
+    glossyGlobeEffect.style.cssText = `
+      position: absolute;
+      top: 10%; left: 15%; width: 40%; height: 30%;
+      background: rgba(255,255,255,0.3);
+      border-radius: 50%;
+      filter: blur(4px);
+      pointer-events: none;
+    `;
+    globeContainer.appendChild(glossyGlobeEffect);
+
     const globe = this.createGlobeElement(true);
-    globe.style.width = '70%';
-    globe.style.height = '70%';
+    globe.style.width = '75%';
+    globe.style.height = '75%';
     globeContainer.appendChild(globe);
     globeWrapper.appendChild(globeContainer);
     ticker.appendChild(globeWrapper);
@@ -3070,72 +3109,88 @@ export class WebPlayer extends BasePlayer {
 
     // Row 1: Yellow/Red Header
     const row1 = document.createElement('div');
-    row1.style.cssText = `display: flex; height: 50%;`;
+    row1.style.cssText = `display: flex; height: 50%; position: relative; overflow: hidden;`;
 
     const badge = document.createElement('div');
     badge.textContent = 'BREAKING NEWS';
     badge.style.cssText = `
-      background: #f1c40f;
-      color: black;
+      background: linear-gradient(180deg, #f1c40f 0%, #d4ac0d 100%);
+      color: #000;
       font-weight: 900;
-      padding: 0 25px;
+      padding: 0 30px;
       display: flex;
       align-items: center;
-      clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
+      clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
       font-size: ${height * 0.2}px;
       position: relative;
-      z-index: 2;
+      z-index: 5;
+      text-shadow: 0 1px 1px rgba(255,255,255,0.3);
     `;
     row1.appendChild(badge);
 
     const headline = document.createElement('div');
     headline.textContent = config.headline || 'LOREM IPSUM DOLOR SIT AMET, CONSECTETUER';
     headline.style.cssText = `
-      background: linear-gradient(90deg, #e74c3c 0%, #c1392b 100%);
+      background: linear-gradient(90deg, #e74c3c 0%, #c1392b 50%, #e74c3c 100%);
       color: white;
-      font-weight: 700;
-      padding: 0 40px;
+      font-weight: 800;
+      padding: 0 45px;
       display: flex;
       align-items: center;
       flex-grow: 1;
-      margin-left: -20px;
-      clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
-      font-size: ${height * 0.22}px;
-      border-bottom: 2px solid rgba(255,255,255,0.2);
+      margin-left: -25px;
+      clip-path: polygon(5% 0, 100% 0, 96% 100%, 0 100%);
+      font-size: ${height * 0.23}px;
+      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+      border-bottom: 3px solid rgba(255,255,255,0.15);
+    `;
+
+    const glossyHeader = document.createElement('div');
+    glossyHeader.style.cssText = `
+      position: absolute;
+      top: 0; left: 0; right: 0; height: 40%;
+      background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
     `;
+    headline.appendChild(glossyHeader);
+
     row1.appendChild(headline);
     content.appendChild(row1);
 
-    // Row 2: Blue Ticker (Semi-transparent)
+    // Row 2: Blue Ticker (Semi-transparent with Pro Blur)
     const row2 = document.createElement('div');
     row2.style.cssText = `
-      height: 40%;
-      background: rgba(41, 128, 185, 0.9);
+      height: 42%;
+      background: rgba(30, 60, 114, 0.85);
       display: flex;
       align-items: center;
-      margin-top: 4px;
-      clip-path: polygon(1% 0, 100% 0, 100% 100%, 2% 100%);
-      backdrop-filter: blur(5px);
+      margin-top: 5px;
+      clip-path: polygon(1.5% 0, 100% 0, 100% 100%, 2.5% 100%);
+      backdrop-filter: blur(12px);
+      border: 1px solid rgba(255,255,255,0.1);
+      box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
     `;
 
     const live = document.createElement('div');
     live.textContent = 'LIVE';
     live.style.cssText = `
-      background: white;
-      color: #2980b9;
-      font-weight: 900;
-      padding: 0 15px;
-      margin-left: 30px;
-      margin-right: 15px;
+      background: #fff;
+      color: #1e3c72;
+      font-weight: 950;
+      padding: 2px 18px;
+      margin-left: 35px;
+      margin-right: 20px;
       font-size: ${height * 0.16}px;
-      box-shadow: 2px 0 5px rgba(0,0,0,0.2);
+      box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
+      letter-spacing: 1px;
     `;
     row2.appendChild(live);
 
     const trackCont = document.createElement('div');
     trackCont.style.cssText = `flex-grow: 1; overflow: hidden; height: 100%; display: flex; align-items: center; color: white;`;
     const track = this.createSeamlessScrollingTrack(config.items || [], config);
-    track.style.fontSize = `${height * 0.16}px`;
+    track.style.fontSize = `${height * 0.17}px`;
+    track.style.fontWeight = '700';
+    track.style.textShadow = '1px 1px 3px rgba(0,0,0,0.9)';
     trackCont.appendChild(track);
     row2.appendChild(trackCont);
     content.appendChild(row2);
@@ -3243,7 +3298,6 @@ export class WebPlayer extends BasePlayer {
 
     const height = config.height || 65;
     const bottomOffset = config.bottomOffset || 0;
-    const topOffset = config.topOffset || 10;
 
     ticker.style.cssText = `
       position: absolute;
@@ -3256,65 +3310,109 @@ export class WebPlayer extends BasePlayer {
       font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
       z-index: 100;
       pointer-events: none;
+      filter: drop-shadow(0 12px 20px rgba(0,0,0,0.6));
     `;
 
-    // Large Blue Box
+    // Large Blue Box (Pro Upgrade)
     const newsBox = document.createElement('div');
     newsBox.style.cssText = `
-      width: ${height * 1.6}px;
+      width: ${height * 1.8}px;
       height: 100%;
-      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       position: relative;
-      clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
+      clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
       flex-shrink: 0;
-      z-index: 30;
-      box-shadow: 5px 0 15px rgba(0,0,0,0.4);
+      z-index: 40;
+      border-right: 2px solid rgba(255,255,255,0.2);
+    `;
+
+    const glossyNews = document.createElement('div');
+    glossyNews.style.cssText = `
+      position: absolute;
+      top: 0; left: 0; right: 0; height: 40%;
+      background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
     `;
+    newsBox.appendChild(glossyNews);
 
     const bt = document.createElement('div');
-    bt.style.cssText = `display: flex; gap: 5px; margin-bottom: 2px; width: 100%; justify-content: center; padding-right: 15%;`;
+    bt.style.cssText = `display: flex; gap: 6px; margin-bottom: 2px; width: 100%; justify-content: center; padding-right: 18%; position: relative; z-index: 2;`;
 
     const b1 = document.createElement('span');
     b1.textContent = 'BREAKING';
-    b1.style.cssText = `background: #c0392b; font-size: ${height * 0.14}px; font-weight: 900; padding: 2px 6px; border-radius: 2px; color: white;`;
+    b1.style.cssText = `
+      background: #c0392b; 
+      font-size: ${height * 0.14}px; 
+      font-weight: 900; 
+      padding: 2px 8px; 
+      border-radius: 2px; 
+      color: white;
+      box-shadow: 0 0 10px rgba(192, 57, 43, 0.8);
+    `;
     bt.appendChild(b1);
 
     const b2 = document.createElement('span');
     b2.textContent = 'LIVE';
-    b2.style.cssText = `background: #f1c40f; font-size: ${height * 0.14}px; font-weight: 900; padding: 2px 6px; border-radius: 2px; color: black;`;
+    b2.style.cssText = `
+      background: #f1c40f; 
+      font-size: ${height * 0.14}px; 
+      font-weight: 900; 
+      padding: 2px 8px; 
+      border-radius: 2px; 
+      color: black;
+      box-shadow: 0 0 10px rgba(241, 196, 15, 0.6);
+    `;
     bt.appendChild(b2);
     newsBox.appendChild(bt);
 
     const nt = document.createElement('div');
     nt.textContent = 'NEWS';
-    nt.style.cssText = `font-size: ${height * 0.45}px; font-weight: 900; color: white; letter-spacing: 4px; padding-right: 15%; line-height: 1;`;
+    nt.style.cssText = `
+      font-size: ${height * 0.5}px; 
+      font-weight: 900; 
+      color: white; 
+      letter-spacing: 6px; 
+      padding-right: 18%; 
+      line-height: 1;
+      text-shadow: 3px 3px 6px rgba(0,0,0,0.6);
+    `;
     newsBox.appendChild(nt);
     ticker.appendChild(newsBox);
 
-    // Red Scrolling Bar
+    // Red Scrolling Bar (Pro Upgrade)
     const redBar = document.createElement('div');
     redBar.style.cssText = `
       flex-grow: 1;
-      height: 50%;
-      background: linear-gradient(90deg, #c0392b 0%, #e74c3c 100%);
-      margin-left: -${height * 0.2}px;
+      height: 52%;
+      background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%);
+      margin-left: -${height * 0.3}px;
       display: flex;
       align-items: center;
-      padding-left: ${height * 0.3}px;
-      padding-right: 20px;
-      clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
+      padding-left: ${height * 0.45}px;
+      padding-right: 30px;
+      clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
       z-index: 20;
+      border-top: 1px solid rgba(255,255,255,0.1);
+      box-shadow: inset 0 0 15px rgba(0,0,0,0.4);
     `;
 
+    const glossyRed = document.createElement('div');
+    glossyRed.style.cssText = `
+      position: absolute;
+      top: 0; left: 0; right: 0; height: 35%;
+      background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
+    `;
+    redBar.appendChild(glossyRed);
+
     const tCont = document.createElement('div');
     tCont.style.cssText = `flex-grow: 1; overflow: hidden; height: 100%; display: flex; align-items: center; color: white;`;
     const track = this.createSeamlessScrollingTrack(config.items || [], config);
-    track.style.fontSize = `${height * 0.22}px`;
-    track.style.fontWeight = '700';
+    track.style.fontSize = `${height * 0.24}px`;
+    track.style.fontWeight = '800';
+    track.style.textShadow = '2px 2px 4px rgba(0,0,0,0.7)';
     tCont.appendChild(track);
     redBar.appendChild(tCont);
     ticker.appendChild(redBar);