feat(cxl-ui): [cxl-jw-player] fix poor refactoring

conversionxl · Sep 10, 2024 · 3373bf1 · 3373bf1
1 parent 8fcc612
commit 3373bf1
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 5 deletions.
diff --git a/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-shadow.scss b/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-shadow.scss
@@ -2,11 +2,16 @@
 
 :host {
   box-sizing: border-box;
+
+  [active] {
+    background-color: var(--lumo-shade-10pct);
+  }
 }
 
-:host([has-captions]) {
-  .cxl-jw-player-container {
+:host([captions]) {
+  #container {
     display: grid;
+    grid-template-rows: 1fr max-content 1fr;
   }
 }
 

diff --git a/packages/cxl-ui/src/components/cxl-jw-player/index.html.js b/packages/cxl-ui/src/components/cxl-jw-player/index.html.js
@@ -5,7 +5,7 @@ import '@vaadin/text-field';
 // eslint-disable-next-line func-names
 export const template = function () {
   return html`
-    <div class="cxl-jw-player-container" id="cxl-jw-player-container">
+    <div class="grid height-100" id="container">
       <slot></slot>
       ${this.captions
         ? html`

diff --git a/packages/cxl-ui/src/components/cxl-jw-player/index.js b/packages/cxl-ui/src/components/cxl-jw-player/index.js
@@ -21,6 +21,7 @@ export class CXLJWPlayerElement extends mixin(LitElement, [
   StateMixin,
 ]) {
   config = {
+    height: '100%',
     width: '100%',
     playbackRateControls: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
     plugins: {

diff --git a/packages/cxl-ui/src/components/cxl-jw-player/mixins/TranscriptMixin.js b/packages/cxl-ui/src/components/cxl-jw-player/mixins/TranscriptMixin.js
@@ -141,7 +141,7 @@ export function TranscriptMixin(BaseClass) {
       }
 
       if (this._tracks.length) {
-        this.hasCaptions = true;
+        this.captions = true;
 
         // Make sure the DOM is up to date
         await this.updateComplete;
@@ -155,7 +155,7 @@ export function TranscriptMixin(BaseClass) {
           'toggle-transcript'
         );
       } else {
-        this.hasCaptions = false;
+        this.captions = false;
         this._jwPlayer.removeButton('toggle-transcript');
       }
     }