unified-video-framework 1.4.441 → 1.4.443

package/packages/web/src/WebPlayer.ts

@@ -2902,25 +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}px;
+      width: ${height * 1.3}px;
       height: ${height}px;
-      background: linear-gradient(135deg, #cc0000 0%, #880000 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, 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%, 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 = '60%';
-    globe.style.height = '60%';
+    globe.style.width = '42%';
+    globe.style.height = '42%';
+    globe.style.marginRight = '18%';
     globeBlock.appendChild(globe);
     ticker.appendChild(globeBlock);
 
@@ -2930,40 +2944,56 @@ export class WebPlayer extends BasePlayer {
       flex-grow: 1;
       display: flex;
       flex-direction: column;
-      margin-left: -${height * 0.15}px;
+      margin-left: -${height * 0.35}px;
+      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%);
-      clip-path: polygon(5% 0, 100% 0, 98% 100%, 0% 100%);
+      height: 55%;
+      background: linear-gradient(90deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
+      clip-path: polygon(4% 0, 100% 0, 98.5% 100%, 0% 100%);
       display: flex;
       align-items: center;
-      padding: 0 40px;
+      padding: 0 40px 0 65px;
       color: white;
+      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';
     breakingText.style.cssText = `
       font-weight: 900;
       font-style: italic;
-      font-size: ${height * 0.22}px;
-      margin-right: 20px;
-      border-bottom: 2px solid white;
+      font-size: ${height * 0.2}px;
+      margin-right: 25px;
+      white-space: nowrap;
+      color: #fff;
+      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);
@@ -2971,33 +3001,35 @@ 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: linear-gradient(90deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
       display: flex;
       align-items: center;
-      clip-path: polygon(1% 0, 100% 0, 100% 100%, 0% 100%);
+      clip-path: polygon(1.5% 0, 100% 0, 100% 100%, 0% 100%);
+      border-top: 1px solid rgba(255,255,255,0.08);
     `;
 
-    // LIVE badge
     const liveBadge = document.createElement('div');
     liveBadge.textContent = 'LIVE';
     liveBadge.style.cssText = `
-      background: #f1c40f;
-      color: black;
+      background: linear-gradient(180deg, #f1c40f 0%, #d4ac0d 100%);
+      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 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);
 
@@ -3014,106 +3046,151 @@ 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;
       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;
       z-index: 100;
       pointer-events: none;
+      filter: drop-shadow(0 8px 12px rgba(0,0,0,0.4));
     `;
 
-    // Globe icon (floating on left)
-    const globeContainer = document.createElement('div');
-    globeContainer.style.cssText = `
+    // Globe Wrapper
+    const globeWrapper = document.createElement('div');
+    globeWrapper.style.cssText = `
       width: ${height * 0.8}px;
       height: ${height * 0.8}px;
-      background: rgba(255,255,255,0.1);
+      position: relative;
+      z-index: 40;
+      margin-right: 12px;
+      flex-shrink: 0;
+    `;
+
+    const globeContainer = document.createElement('div');
+    globeContainer.style.cssText = `
+      width: 100%;
+      height: 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;
-      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: 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);
-    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');
-    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 20px;
+      padding: 0 30px;
       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, 88% 0, 100% 100%, 0 100%);
+      font-size: ${height * 0.2}px;
+      position: relative;
+      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: #e74c3c;
+      background: linear-gradient(90deg, #e74c3c 0%, #c1392b 50%, #e74c3c 100%);
       color: white;
-      font-weight: 700;
-      padding: 0 30px;
+      font-weight: 800;
+      padding: 0 45px;
       display: flex;
       align-items: center;
       flex-grow: 1;
-      margin-left: -10px;
-      clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
-      font-size: ${height * 0.22}px;
+      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
+    // Row 2: Blue Ticker (Semi-transparent with Pro Blur)
     const row2 = document.createElement('div');
     row2.style.cssText = `
-      height: 40%;
-      background: #2980b9;
+      height: 42%;
+      background: rgba(30, 60, 114, 0.85);
       display: flex;
       align-items: center;
-      margin-top: 2px;
-      clip-path: polygon(0 0, 100% 0, 100% 100%, 1% 100%);
+      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: 0 10px;
-      font-size: ${height * 0.15}px;
+      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 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);
@@ -3221,74 +3298,121 @@ 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;
       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;
       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.5}px;
+      width: ${height * 1.8}px;
       height: 100%;
-      background: #1e3c72;
+      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 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, 82% 100%, 0 100%);
       flex-shrink: 0;
+      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: 5px;`;
+    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: 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 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: 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 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.4}px; font-weight: 900; color: white; letter-spacing: 2px;`;
+    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: #c0392b;
-      margin-left: -${height * 0.1}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: 20px;
-      clip-path: polygon(2% 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.25}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);