unified-video-framework 1.4.201 → 1.4.202

package/packages/web/src/WebPlayer.ts

@@ -3976,58 +3976,18 @@ export class WebPlayer extends BasePlayer {
         }
       }
 
-      // .uvf-top-btn {
-      //   width: 40px;
-      //   height: 40px;
-      //   background: rgba(255,255,255,0.1);
-      //   backdrop-filter: blur(10px);
-      //   border: 1px solid rgba(255,255,255,0.2);
-      //   border-radius: 50%;
-      //   cursor: pointer;
-      //   display: flex;
-      //   align-items: center;
-      //   justify-content: center;
-      //   transition: all 0.3s ease;
-      // }
-      
-      .uvf-top-btn:hover {
-        width: 40px;
-        height: 40px;
-        backdrop-filter: blur(10px);
-        border: 1px solid rgba(255,255,255,0.2);
-        border-radius: 50%;
-        background: rgba(255,255,255,0.2);
-        transform: scale(1.1);
-        box-shadow: 0 0 20px rgba(255,255,255,0.3);
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.3s ease;
-      }
 
-      .uvf-top-btn.cast-grey {
-        width: 40px;
-        height: 40px;
+      /* Cast button grey state when casting */
+      .uvf-control-btn.cast-grey {
         opacity: 0.6;
         filter: grayscale(0.6);
-        box-shadow: none;
-        background: rgba(255,255,255,0.08);
       }
-      .uvf-top-btn.cast-grey:hover {
-        width: 40px;
-        height: 40px;
+      
+      .uvf-control-btn.cast-grey:hover {
         transform: none;
-        background: rgba(255,255,255,0.12);
-        box-shadow: none;
+        opacity: 0.7;
       }
       
-      .uvf-top-btn svg {
-        width: 20px;
-        height: 20px;
-        fill: var(--uvf-icon-color);
-      }
-
       /* Pill-style button for prominent actions */
       .uvf-pill-btn {
         display: inline-flex;
@@ -4951,11 +4911,6 @@ export class WebPlayer extends BasePlayer {
         background: var(--uvf-overlay-medium);
       }
       
-      .uvf-top-btn:focus-visible {
-        outline: 2px solid var(--uvf-primary-color, #007bff);
-        outline-offset: 2px;
-      }
-      
       .uvf-progress-bar-wrapper:focus-visible {
         outline: 2px solid var(--uvf-primary-color, #007bff);
         outline-offset: 2px;
@@ -4991,10 +4946,6 @@ export class WebPlayer extends BasePlayer {
           border: 1px solid;
         }
         
-        // .uvf-top-btn {
-        //   border: 1px solid;
-        // }
-        
         .uvf-progress-bar {
           border: 1px solid;
         }
@@ -5186,22 +5137,22 @@ export class WebPlayer extends BasePlayer {
     const topControls = document.createElement('div');
     topControls.className = 'uvf-top-controls';
     topControls.innerHTML = `
-      <div class="uvf-top-btn" id="uvf-cast-btn" title="Cast" aria-label="Cast">
+      <button class="uvf-control-btn" id="uvf-cast-btn" title="Cast" aria-label="Cast">
         <svg viewBox="0 0 24 24">
           <path d="M1 18v3h3c0-1.66-1.34-3-3-3zm0-4v2c2.76 0 5 2.24 5 5h2c0-3.87-3.13-7-7-7zm18-7H5v1.63c3.96 1.28 7.09 4.41 8.37 8.37H19V7zM1 10v2c4.97 0 9 4.03 9 9h2c0-6.08-4.93-11-11-11zm20-7H3c-1.1 0-2 .9-2 2v3h2V5h18v14h-7v2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
         </svg>
-      </div>
+      </button>
       <button class="uvf-pill-btn uvf-stop-cast-btn" id="uvf-stop-cast-btn" title="Stop Casting" aria-label="Stop Casting" style="display: none;">
         <svg viewBox="0 0 24 24" aria-hidden="true">
           <path d="M6 6h12v12H6z"/>
         </svg>
         <span>Stop Casting</span>
       </button>
-      <div class="uvf-top-btn" id="uvf-share-btn" title="Share" aria-label="Share">
+      <button class="uvf-control-btn" id="uvf-share-btn" title="Share" aria-label="Share">
         <svg viewBox="0 0 24 24">
           <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
         </svg>
-      </div>
+      </button>
     `;
     topBar.appendChild(topControls);