unified-video-framework 1.4.441 → 1.4.442

package/packages/web/src/WebPlayer.ts

@@ -2907,20 +2907,22 @@ export class WebPlayer extends BasePlayer {
     // 1. Globe Block (Left)
     const globeBlock = document.createElement('div');
     globeBlock.style.cssText = `
-      width: ${height}px;
+      width: ${height * 1.2}px;
       height: ${height}px;
-      background: linear-gradient(135deg, #cc0000 0%, #880000 100%);
+      background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
-      clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
-      z-index: 10;
-      box-shadow: 5px 0 15px rgba(0,0,0,0.5);
+      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);
+      position: relative;
     `;
     const globe = this.createGlobeElement(true);
-    globe.style.width = '60%';
-    globe.style.height = '60%';
+    globe.style.width = '45%';
+    globe.style.height = '45%';
+    globe.style.marginRight = '15%'; // Offset from the angle
     globeBlock.appendChild(globe);
     ticker.appendChild(globeBlock);
 
@@ -2930,19 +2932,21 @@ export class WebPlayer extends BasePlayer {
       flex-grow: 1;
       display: flex;
       flex-direction: column;
-      margin-left: -${height * 0.15}px;
+      margin-left: -${height * 0.3}px; /* Deeper overlap */
+      z-index: 10;
     `;
 
     // Row 1: Top Blue Bar (Headline)
     const topBar = document.createElement('div');
     topBar.style.cssText = `
-      height: 60%;
-      background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%);
+      height: 55%;
+      background: linear-gradient(90deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
       clip-path: polygon(5% 0, 100% 0, 98% 100%, 0% 100%);
       display: flex;
       align-items: center;
-      padding: 0 40px;
+      padding: 0 40px 0 60px;
       color: white;
+      border-bottom: 3px solid rgba(255,255,255,0.1);
     `;
 
     const breakingText = document.createElement('span');
@@ -2950,9 +2954,11 @@ export class WebPlayer extends BasePlayer {
     breakingText.style.cssText = `
       font-weight: 900;
       font-style: italic;
-      font-size: ${height * 0.22}px;
+      font-size: ${height * 0.2}px;
       margin-right: 20px;
-      border-bottom: 2px solid white;
+      white-space: nowrap;
+      color: #fff;
+      text-shadow: 0 0 10px rgba(255,255,255,0.5);
     `;
     topBar.appendChild(breakingText);
 
@@ -2971,33 +2977,33 @@ export class WebPlayer extends BasePlayer {
     // Row 2: Bottom Black Bar (Scrolling Items)
     const bottomBar = document.createElement('div');
     bottomBar.style.cssText = `
-      height: 40%;
-      background: #000;
+      height: 45%;
+      background: #0d0d0d;
       display: flex;
       align-items: center;
-      clip-path: polygon(1% 0, 100% 0, 100% 100%, 0% 100%);
+      clip-path: polygon(2% 0, 100% 0, 100% 100%, 0% 100%);
+      border-top: 1px solid rgba(255,255,255,0.05);
     `;
 
-    // LIVE badge
     const liveBadge = document.createElement('div');
     liveBadge.textContent = 'LIVE';
     liveBadge.style.cssText = `
       background: #f1c40f;
-      color: black;
+      color: #000;
       font-weight: 900;
-      font-size: ${height * 0.15}px;
-      padding: 2px 10px;
-      margin-left: 20px;
-      clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
+      font-size: ${height * 0.16}px;
+      padding: 2px 12px;
+      margin-left: 50px;
+      clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
     `;
     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';
     trackContainer.appendChild(track);
     bottomBar.appendChild(trackContainer);
 
@@ -3020,8 +3026,8 @@ export class WebPlayer extends BasePlayer {
       position: absolute;
       left: 5%;
       right: 5%;
+      bottom: ${bottomOffset}px;
       height: ${height}px;
-      ${position === 'top' ? `top: ${topOffset}px;` : `bottom: ${bottomOffset}px;`}
       display: flex;
       align-items: flex-end;
       font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -3029,28 +3035,38 @@ export class WebPlayer extends BasePlayer {
       pointer-events: none;
     `;
 
-    // Globe icon (floating on left)
+    // Globe icon (floating on left, nested for z-index control)
+    const globeWrapper = document.createElement('div');
+    globeWrapper.style.cssText = `
+      width: ${height * 0.75}px;
+      height: ${height * 0.75}px;
+      position: relative;
+      z-index: 30;
+      margin-right: 10px;
+      flex-shrink: 0;
+    `;
+
     const globeContainer = document.createElement('div');
     globeContainer.style.cssText = `
-      width: ${height * 0.8}px;
-      height: ${height * 0.8}px;
-      background: rgba(255,255,255,0.1);
+      width: 100%;
+      height: 100%;
+      background: radial-gradient(circle, #e74c3c 0%, #c0392b 100%);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-right: 15px;
-      box-shadow: 0 0 20px rgba(0,0,0,0.5);
-      border: 2px solid rgba(255,255,255,0.2);
+      box-shadow: 0 0 25px rgba(0,0,0,0.6);
+      border: 3px solid #fff;
     `;
     const globe = this.createGlobeElement(true);
     globe.style.width = '70%';
     globe.style.height = '70%';
     globeContainer.appendChild(globe);
-    ticker.appendChild(globeContainer);
+    globeWrapper.appendChild(globeContainer);
+    ticker.appendChild(globeWrapper);
 
     const content = document.createElement('div');
-    content.style.cssText = `flex-grow: 1; display: flex; flex-direction: column;`;
+    content.style.cssText = `flex-grow: 1; display: flex; flex-direction: column; z-index: 20;`;
 
     // Row 1: Yellow/Red Header
     const row1 = document.createElement('div');
@@ -3062,40 +3078,44 @@ export class WebPlayer extends BasePlayer {
       background: #f1c40f;
       color: black;
       font-weight: 900;
-      padding: 0 20px;
+      padding: 0 25px;
       display: flex;
       align-items: center;
-      clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
-      font-size: ${height * 0.18}px;
+      clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
+      font-size: ${height * 0.2}px;
+      position: relative;
+      z-index: 2;
     `;
     row1.appendChild(badge);
 
     const headline = document.createElement('div');
     headline.textContent = config.headline || 'LOREM IPSUM DOLOR SIT AMET, CONSECTETUER';
     headline.style.cssText = `
-      background: #e74c3c;
+      background: linear-gradient(90deg, #e74c3c 0%, #c1392b 100%);
       color: white;
       font-weight: 700;
-      padding: 0 30px;
+      padding: 0 40px;
       display: flex;
       align-items: center;
       flex-grow: 1;
-      margin-left: -10px;
-      clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
+      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);
     `;
     row1.appendChild(headline);
     content.appendChild(row1);
 
-    // Row 2: Blue Ticker
+    // Row 2: Blue Ticker (Semi-transparent)
     const row2 = document.createElement('div');
     row2.style.cssText = `
       height: 40%;
-      background: #2980b9;
+      background: rgba(41, 128, 185, 0.9);
       display: flex;
       align-items: center;
-      margin-top: 2px;
-      clip-path: polygon(0 0, 100% 0, 100% 100%, 1% 100%);
+      margin-top: 4px;
+      clip-path: polygon(1% 0, 100% 0, 100% 100%, 2% 100%);
+      backdrop-filter: blur(5px);
     `;
 
     const live = document.createElement('div');
@@ -3105,8 +3125,10 @@ export class WebPlayer extends BasePlayer {
       color: #2980b9;
       font-weight: 900;
       padding: 0 15px;
-      margin: 0 10px;
-      font-size: ${height * 0.15}px;
+      margin-left: 30px;
+      margin-right: 15px;
+      font-size: ${height * 0.16}px;
+      box-shadow: 2px 0 5px rgba(0,0,0,0.2);
     `;
     row2.appendChild(live);
 
@@ -3227,8 +3249,8 @@ export class WebPlayer extends BasePlayer {
       position: absolute;
       left: 15%;
       right: 15%;
+      bottom: ${bottomOffset}px;
       height: ${height}px;
-      ${position === 'top' ? `top: ${topOffset}px;` : `bottom: ${bottomOffset}px;`}
       display: flex;
       align-items: flex-end;
       font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -3239,35 +3261,37 @@ export class WebPlayer extends BasePlayer {
     // Large Blue Box
     const newsBox = document.createElement('div');
     newsBox.style.cssText = `
-      width: ${height * 1.5}px;
+      width: ${height * 1.6}px;
       height: 100%;
-      background: #1e3c72;
+      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
       display: flex;
       flex-direction: column;
       justify-content: center;
-      padding-left: 15px;
+      align-items: center;
       position: relative;
-      clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
+      clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
       flex-shrink: 0;
+      z-index: 30;
+      box-shadow: 5px 0 15px rgba(0,0,0,0.4);
     `;
 
     const bt = document.createElement('div');
-    bt.style.cssText = `display: flex; gap: 5px; margin-bottom: 5px;`;
+    bt.style.cssText = `display: flex; gap: 5px; margin-bottom: 2px; width: 100%; justify-content: center; padding-right: 15%;`;
 
     const b1 = document.createElement('span');
     b1.textContent = 'BREAKING';
-    b1.style.cssText = `background: #c0392b; font-size: 10px; font-weight: 800; padding: 2px 5px; border-radius: 2px; color: white;`;
+    b1.style.cssText = `background: #c0392b; font-size: ${height * 0.14}px; font-weight: 900; padding: 2px 6px; border-radius: 2px; color: white;`;
     bt.appendChild(b1);
 
     const b2 = document.createElement('span');
     b2.textContent = 'LIVE';
-    b2.style.cssText = `background: #f1c40f; font-size: 10px; font-weight: 800; padding: 2px 5px; border-radius: 2px; color: black;`;
+    b2.style.cssText = `background: #f1c40f; font-size: ${height * 0.14}px; font-weight: 900; padding: 2px 6px; border-radius: 2px; color: black;`;
     bt.appendChild(b2);
     newsBox.appendChild(bt);
 
     const nt = document.createElement('div');
     nt.textContent = 'NEWS';
-    nt.style.cssText = `font-size: ${height * 0.4}px; font-weight: 900; color: white; letter-spacing: 2px;`;
+    nt.style.cssText = `font-size: ${height * 0.45}px; font-weight: 900; color: white; letter-spacing: 4px; padding-right: 15%; line-height: 1;`;
     newsBox.appendChild(nt);
     ticker.appendChild(newsBox);
 
@@ -3276,18 +3300,20 @@ export class WebPlayer extends BasePlayer {
     redBar.style.cssText = `
       flex-grow: 1;
       height: 50%;
-      background: #c0392b;
-      margin-left: -${height * 0.1}px;
+      background: linear-gradient(90deg, #c0392b 0%, #e74c3c 100%);
+      margin-left: -${height * 0.2}px;
       display: flex;
       align-items: center;
-      padding-left: 20px;
-      clip-path: polygon(2% 0, 100% 0, 100% 100%, 0 100%);
+      padding-left: ${height * 0.3}px;
+      padding-right: 20px;
+      clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
+      z-index: 20;
     `;
 
     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.25}px`;
+    track.style.fontSize = `${height * 0.22}px`;
     track.style.fontWeight = '700';
     tCont.appendChild(track);
     redBar.appendChild(tCont);