fix(cxl-ui): cxl-jw-player setup crashes when transcripts aren't turn…

…ed on https://app.clickup.com/t/apru1v?comment=90140063544642
conversionxl · Oct 3, 2024 · 0c3b937 · 0c3b937
1 parent b5c4d29
commit 0c3b937
Showing 1 changed file with 40 additions and 44 deletions.
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
@@ -7,51 +7,47 @@ export const template = function () {
   return html`
     ${this.ready
       ? html`
-          <div class="grid height-100" id="container">
+          <div class="grid height-100" ?hidden=${this.captions} id="container">
             <slot></slot>
-            ${this.captions
-              ? html`
-                  <div class="center gap padding search">
-                    <vaadin-text-field
-                      @input=${this._debouncedSearch}
-                      clear-button-visible
-                      id="search"
-                      placeholder="Type and press enter to search"
-                      theme="small"
-                    >
-                      <vaadin-icon slot="prefix" icon="lumo:search"></vaadin-icon>
-                    </vaadin-text-field>
-                    ${this._isSearchMinimumLength
-                      ? html`<div id="search-result-count">(${this._matches} matches)</div>`
-                      : nothing}
-                    <vaadin-checkbox
-                      @change=${this._toggleShouldScroll}
-                      ?checked=${this._shouldScroll}
-                      label="Scroll"
-                    ></vaadin-checkbox>
-                  </div>
-                  <div class="captions padding scroll">
-                    ${this._tracks.map(
-                      (track, index) =>
-                        html`${track.data.text
-                          ? html`${track.isChapter
-                              ? html`<h2 @click=${this._onCaptionClick} data-index=${index}>
-                                  ${track.data.text}
-                                </h2>`
-                              : html`
-                                  <span
-                                    @click=${this._onCaptionClick}
-                                    ?active=${this._currentTrack === index}
-                                    data-index=${index}
-                                  >
-                                    ${track.data.text}
-                                  </span>
-                                `}`
-                          : nothing}`
-                    )}
-                  </div>
-                `
-              : nothing}
+            <div class="center gap padding search">
+              <vaadin-text-field
+                @input=${this._debouncedSearch}
+                clear-button-visible
+                id="search"
+                placeholder="Type and press enter to search"
+                theme="small"
+              >
+                <vaadin-icon slot="prefix" icon="lumo:search"></vaadin-icon>
+              </vaadin-text-field>
+              ${this._isSearchMinimumLength
+                ? html`<div id="search-result-count">(${this._matches} matches)</div>`
+                : nothing}
+              <vaadin-checkbox
+                @change=${this._toggleShouldScroll}
+                ?checked=${this._shouldScroll}
+                label="Scroll"
+              ></vaadin-checkbox>
+            </div>
+            <div class="captions padding scroll">
+              ${this._tracks.map(
+                (track, index) =>
+                  html`${track.data.text
+                    ? html`${track.isChapter
+                        ? html`<h2 @click=${this._onCaptionClick} data-index=${index}>
+                            ${track.data.text}
+                          </h2>`
+                        : html`
+                            <span
+                              @click=${this._onCaptionClick}
+                              ?active=${this._currentTrack === index}
+                              data-index=${index}
+                            >
+                              ${track.data.text}
+                            </span>
+                          `}`
+                    : nothing}`
+              )}
+            </div>
           </div>
         `
       : nothing}