From 4b18e8521b3f6ea734292bb2f208f9537b7f51bd Mon Sep 17 00:00:00 2001
From: jakubroch <jakub.roch@cloudinary.com>
Date: Fri, 25 Jul 2025 15:10:56 +0200
Subject: [PATCH 1/3] feat: text tracks on demand POC

---
 docs/subtitles-and-captions.html              | 459 +-----------------
 .../dynamic-text-tracks-button.js             | 109 +++++
 .../dynamic-text-tracks-button.scss           |  31 ++
 src/components/index.js                       |   4 +-
 src/index.all.js                              |   1 +
 .../dynamic-text-tracks.scss                  | 102 ++++
 src/plugins/dynamic-text-tracks/index.js      | 120 +++++
 .../dynamic-text-tracks/languages.json        | 195 ++++++++
 .../dynamic-text-tracks/parse-transcript.js   |  38 ++
 src/plugins/index.js                          |   2 +
 src/video-player.js                           |  25 +-
 11 files changed, 627 insertions(+), 459 deletions(-)
 create mode 100644 src/components/dynamicTextTracksButton/dynamic-text-tracks-button.js
 create mode 100644 src/components/dynamicTextTracksButton/dynamic-text-tracks-button.scss
 create mode 100644 src/plugins/dynamic-text-tracks/dynamic-text-tracks.scss
 create mode 100644 src/plugins/dynamic-text-tracks/index.js
 create mode 100644 src/plugins/dynamic-text-tracks/languages.json
 create mode 100644 src/plugins/dynamic-text-tracks/parse-transcript.js

diff --git a/docs/subtitles-and-captions.html b/docs/subtitles-and-captions.html
index 4f5b2da68..39e60b1a5 100644
--- a/docs/subtitles-and-captions.html
+++ b/docs/subtitles-and-captions.html
@@ -26,180 +26,14 @@
 
   <script type="text/javascript">
     window.addEventListener('load', function(){
-
-      var player = cloudinary.videoPlayer('player', {
-        cloud_name: 'prod',
-        muted: true
-      });
-
-      player.source(
-        'video/examples/big_buck_bunny_trailer_720p',
-        {
-          info: { title: 'SRT & VTT from URL' },
-          textTracks: {
-            options: {
-              theme: "videojs-default"
-            },
-            captions: {
-              label: 'VTT from URL',
-              default: true,
-              url: 'https://res.cloudinary.com/prod/raw/upload/video/examples/big_buck_bunny_trailer_720p.vtt'
-            },
-            subtitles: [
-              {
-                label: 'SRT from URL',
-                url: 'https://res.cloudinary.com/prod/raw/upload/video/examples/big_buck_bunny_trailer_720p.srt'
-              }
-            ]
-          }
-        }
-      );
-
-      // Playlist
-      var playlist = cloudinary.videoPlayer('playlist', {
-        cloud_name: 'demo'
-      });
-
-      var source1 = {
-        publicId: 'video-player/stubhub',
-        info: { title: 'Subtitles & Captions playlist' },
-        textTracks: {
-          captions: {
-            label: 'English captions',
-            language: 'en',
-            default: true,
-            url: 'https://res.cloudinary.com/demo/raw/upload/v1636972013/video-player/vtt/Meetup_english.vtt'
-          },
-          subtitles: [
-            {
-              label: 'German subtitles',
-              language: 'de',
-              url: 'https://res.cloudinary.com/demo/raw/upload/v1636970250/video-player/vtt/Meetup_german.vtt'
-            },
-            {
-              label: 'Russian subtitles',
-              language: 'ru',
-              url: 'https://res.cloudinary.com/demo/raw/upload/v1636970275/video-player/vtt/Meetup_russian.vtt'
-            }
-          ]
-        }
-      };
-
-      var source2 = {
-        publicId: 'video-player/outdoors',
-        info: { title: 'Outdoors', subtitle: 'Outdoors movie with captions' },
-        textTracks: {
-          captions: {
-            label: 'English captions',
-            language: 'en',
-            default: true,
-            url: 'https://res.cloudinary.com/demo/raw/upload/v1636971261/video-player/vtt/outdoors.vtt',
-          }
-        }
-      };
-
-      var source3 = {
-        publicId: 'video-player/dog',
-        info: { title: 'Dog', subtitle: 'Video of a dog, no captions' }
-      };
-
-      var playlistSources = [source1, source2, source3];
-
-      var playlistOptions = {
-          autoAdvance: true,
-          repeat: true,
-          presentUpcoming: 8
-      };
-
-      playlist.playlist(playlistSources, playlistOptions);
-
-      // Paced
-      const pacedPlayer = cloudinary.videoPlayer('paced', {
-        cloudName: 'prod'
-      });
-
-      const publicId = 'video/examples/cloudinary-marketing';
-
-      const textTracks = {
-        options: {
-          // theme: "", // one of 'default', 'videojs-default', 'yellow-outlined', 'player-colors' & '3d'
-          // fontFace: "", // any Google font
-          // fontSize: "", // any CSS value
-          // gravity: "", // i.e. 'top-left', 'center' etc
-          // box: { // Object of x/y/width/height
-          //   x: "0%",
-          //   y: "0%",
-          //   width: "100%",
-          //   height: "100%"
-          // },
-          // style: { // Styles key-value object
-          //   color: "hotpink"
-          // }
-        },
-        captions: {
-          label: 'English Paced',
-          maxWords: 4,
-          default: true,
-        }
-      }
-      pacedPlayer.source(publicId, {
-        textTracks
-      });
-
-      const maxWordsInput = document.getElementById('maxWords');
-      const themeSelect = document.getElementById('theme');
-      const fontSelect = document.getElementById('font');
-      const gravitySelect = document.getElementById('gravity');
-      const applyButton = document.getElementById('apply');
-      applyButton.addEventListener('click', function () {
-        textTracks.captions.maxWords = parseInt(maxWordsInput.value);
-        textTracks.options.theme = themeSelect.value;
-        textTracks.options.fontFace = fontSelect.value;
-        textTracks.options.gravity = gravitySelect.value;
-        pacedPlayer.source(publicId, {
-          textTracks
-        });
-      });
-
-      // Karaoke
-      const karaokePlayer = cloudinary.videoPlayer('karaoke', {
-        cloudName: 'prod'
-      });
-
-      karaokePlayer.source('video/examples/cld-imagine_1080p', {
-        textTracks: {
-          options: {
-            fontFace: 'Lobster',
-            fontSize: '200%',
-            gravity: 'top',
-            wordHighlightStyle: {
-              color: 'white',
-              'text-shadow': `2px 2px 0px violet,
-                4px 4px 0px indigo,
-                6px 6px 0px blue,
-                8px 8px 0px green,
-                10px 10px 0px yellow,
-                12px 12px 0px orange,
-                14px 14px 0px red`
-            }
-          },
-          captions: {
-            label: 'KARAOKE',
-            wordHighlight: true,
-            maxWords: 8,
-            url: 'https://res.cloudinary.com/prod/raw/upload/v1/video/examples/cld-imagine_1080p.transcript',
-            default: true
-          }
-        }
-      });
-
       // Auto-translated transcript
       const translatedTranscriptPlayer = cloudinary.videoPlayer('translated-transcript', {
         cloudName: 'prod'
       });
 
       translatedTranscriptPlayer.source('video/examples/cloudinary-marketing-pm', {
-        textTracks: {
+        textTracks: 'auto',
+        /*textTracks: {
           captions: {
             label: "Original",
             default: true,
@@ -226,7 +60,7 @@
               language: "uk-UA",
             }
           ]
-        }
+        }*/
       });
     }, false);
   </script>
@@ -239,86 +73,6 @@
     <h1>Cloudinary Video Player</h1>
     <h3 class="mb-4">Subtitles & Captions</h3>
 
-    <video
-      id="player"
-      playsinline
-      controls
-      class="cld-video-player cld-fluid"
-      crossorigin="anonymous"
-      width="500"
-    ></video>
-
-    <h4 class="mt-4 mb-2">Playlist Subtitles (switch per source)</h4>
-
-    <video
-      id="playlist"
-      playsinline
-      controls
-      class="cld-video-player cld-fluid"
-      crossorigin="anonymous"
-      width="500"
-    ></video>
-
-    <h4 class="mt-4 mb-2">Paced & Styled Captions</h4>
-
-    <form>
-      <label for="maxWords">Max Words</label>
-      <input type="number" id="maxWords" name="maxWords" min="1" max="100" value="4" />
-      <label for="theme">Theme</label>
-      <select id="theme" name="theme">
-        <option value="default" selected>Default</option>
-        <option value="videojs-default">VideoJS Default</option>
-        <option value="player-colors">Player Colors</option>
-        <option value="yellow-outlined">Yellow Outlined</option>
-        <option value="3d">3D</option>
-      </select>
-      <label for="font">Font</label>
-      <select id="font" name="font">
-        <option value="Inter" selected>Inter</option>
-        <option value="Ceviche One">Ceviche One</option>
-        <option value="Merienda">Merienda</option>
-        <option value="Ultra">Ultra</option>
-        <option value="Kavoon">Kavoon</option>
-        <option value="Erica One">Erica One</option>
-        <option value="Corben">Corben</option>
-        <option value="Bungee Spice">Bungee Spice (Color)</option>
-        <option value="Nabla">Nabla (Color)</option>
-      </select>
-      <label for="gravity">Gravity</label>
-      <select id="gravity" name="gravity">
-        <option value="bottom" selected>Bottom</option>
-        <option value="bottom-left">Bottom Left</option>
-        <option value="bottom-right">Bottom Right</option>
-        <option value="top">Top</option>
-        <option value="top-left">Top Left</option>
-        <option value="top-right">Top Right</option>
-        <option value="center">Center</option>
-        <option value="center-left">Center Left</option>
-        <option value="center-right">Center Right</option>
-      </select>
-      <button type="button" id="apply">Apply</button>
-    </form>
-
-    <video
-      id="paced"
-      playsinline
-      controls
-      class="cld-video-player cld-fluid"
-      crossorigin="anonymous"
-      width="500"
-    ></video>
-
-    <h4 class="mt-4 mb-2">Karaoke player (transcript URL)</h4>
-
-    <video
-      id="karaoke"
-      playsinline
-      controls
-      class="cld-video-player cld-fluid"
-      crossorigin="anonymous"
-      width="500"
-    ></video>
-
     <h4 class="mt-4 mb-2">Translated Transcript</h4>
 
     <video
@@ -334,212 +88,5 @@ <h4 class="mt-4 mb-2">Translated Transcript</h4>
       <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
     </p>
 
-    <h3 class="mt-4">Example Code:</h3>
-    <pre>
-      <code class="language-html">
-        &lt;video
-          id="player"
-          controls
-          class="cld-video-player"
-          crossorigin="anonymous"
-          width="500"&gt;
-        &lt;/video&gt;
-
-        &lt;!-- ... a few more &lt;video&gt; tags --&gt;
-      </code>
-      <code class="language-javascript">
-
-        // Initialize players
-        var player = cloudinary.videoPlayer('player', {
-          cloud_name: 'prod'
-        });
-
-        player.source(
-          'video/examples/big_buck_bunny_trailer_720p',
-          {
-            info: { title: 'SRT & VTT from URL' },
-            textTracks: {
-              options: {
-                theme: "videojs-default"
-              },
-              captions: {
-                label: 'VTT from URL',
-                default: true,
-                url: 'https://res.cloudinary.com/prod/raw/upload/video/examples/big_buck_bunny_trailer_720p.vtt'
-              },
-              subtitles: [
-                {
-                  label: 'SRT from URL',
-                  url: 'https://res.cloudinary.com/prod/raw/upload/video/examples/big_buck_bunny_trailer_720p.srt'
-                }
-              ]
-            }
-          }
-        );
-
-        // Playlist
-        var playlist = cloudinary.videoPlayer('playlist', {
-          cloud_name: 'demo'
-        });
-
-        var source1 = {
-          publicId: 'video-player/stubhub',
-          info: { title: 'Subtitles & Captions playlist' },
-          textTracks: {
-            captions: {
-              label: 'English captions',
-              language: 'en',
-              default: true,
-              url: 'https://res.cloudinary.com/demo/raw/upload/v1636972013/video-player/vtt/Meetup_english.vtt'
-            },
-            subtitles: [
-              {
-                label: 'German subtitles',
-                language: 'de',
-                url: 'https://res.cloudinary.com/demo/raw/upload/v1636970250/video-player/vtt/Meetup_german.vtt'
-              },
-              {
-                label: 'Russian subtitles',
-                language: 'ru',
-                url: 'https://res.cloudinary.com/demo/raw/upload/v1636970275/video-player/vtt/Meetup_russian.vtt'
-              }
-            ]
-          }
-        };
-
-        var source2 = {
-          publicId: 'video-player/outdoors',
-          info: { title: 'Outdoors', subtitle: 'Outdoors movie with captions' },
-          textTracks: {
-            captions: {
-              label: 'English captions',
-              language: 'en',
-              default: true,
-              url: 'https://res.cloudinary.com/demo/raw/upload/v1636971261/video-player/vtt/outdoors.vtt',
-            }
-          }
-        };
-
-        var source3 = {
-          publicId: 'video-player/dog',
-          info: { title: 'Dog', subtitle: 'Video of a dog, no captions' }
-        };
-
-        var playlistSources = [source1, source2, source3];
-
-        var playlistOptions = {
-            autoAdvance: true,
-            repeat: true,
-            presentUpcoming: 8
-        };
-
-        playlist.playlist(playlistSources, playlistOptions);
-
-        // Paced
-        const pacedPlayer = cloudinary.videoPlayer('paced', {
-          cloudName: 'prod'
-        });
-
-        const publicId = 'video/examples/cloudinary-marketing';
-
-        const textTracks = {
-          options: {
-            // theme: "", // one of 'default', 'videojs-default', 'yellow-outlined', 'player-colors' & '3d'
-            // fontFace: "", // any Google font
-            // fontSize: "", // any CSS value
-            // gravity: "", // i.e. 'top-left', 'center' etc
-            // box: { // Object of x/y/width/height
-            //   x: "0%",
-            //   y: "0%",
-            //   width: "100%",
-            //   height: "100%"
-            // },
-            // style: { // Styles key-value object
-            //   color: "hotpink"
-            // }
-          },
-          captions: {
-            label: 'English Paced',
-            maxWords: 4,
-            default: true,
-          }
-        }
-        pacedPlayer.source(publicId, {
-          textTracks
-        });
-
-        // Karaoke
-        const karaokePlayer = cloudinary.videoPlayer('karaoke', {
-          cloudName: 'prod'
-        });
-
-        karaokePlayer.source('video/examples/cld-imagine_1080p', {
-          textTracks: {
-            options: {
-              fontFace: 'Lobster',
-              fontSize: '200%',
-              gravity: 'top',
-              wordHighlightStyle: {
-                color: 'white',
-                'text-shadow': `2px 2px 0px violet,
-                  4px 4px 0px indigo,
-                  6px 6px 0px blue,
-                  8px 8px 0px green,
-                  10px 10px 0px yellow,
-                  12px 12px 0px orange,
-                  14px 14px 0px red`
-              }
-            },
-            captions: {
-              label: 'KARAOKE',
-              wordHighlight: true,
-              maxWords: 8,
-              url: 'https://res.cloudinary.com/prod/raw/upload/v1/video/examples/cld-imagine_1080p.transcript',
-              default: true
-            }
-          }
-        });
-
-        // Auto-translated transcript
-        const translatedTranscriptPlayer = cloudinary.videoPlayer('translated-transcript', {
-          cloudName: 'prod'
-        });
-
-        translatedTranscriptPlayer.source('video/examples/cloudinary-marketing-pm', {
-          textTracks: {
-            captions: {
-              label: "Original",
-              default: true,
-            },
-            subtitles: [
-              {
-                label: "English",
-                language: "en-US",
-              },
-              {
-                label: "Polish",
-                language: "pl-PL",
-              },
-              {
-                label: "Hebrew",
-                language: "he-IL",
-              },
-              {
-                label: "Italian",
-                language: "it-IT",
-              },
-              {
-                label: "Ukrainian",
-                language: "uk-UA",
-              }
-            ]
-          }
-        });
-
-
-      </code>
-    </pre>
-  </div>
-
 </body>
 </html>
diff --git a/src/components/dynamicTextTracksButton/dynamic-text-tracks-button.js b/src/components/dynamicTextTracksButton/dynamic-text-tracks-button.js
new file mode 100644
index 000000000..860d4f5c3
--- /dev/null
+++ b/src/components/dynamicTextTracksButton/dynamic-text-tracks-button.js
@@ -0,0 +1,109 @@
+/* eslint-disable  */
+import videojs from 'video.js';
+
+const Component = videojs.getComponent('Component');
+
+class SearchableLanguageDropdown extends Component {
+  constructor(player, options = {}) {
+    super(player, options);
+
+    this.languages = options.languages || [];
+    this.onSelect = options.onSelect || (() => {});
+    this.open = false;
+
+    this.el().addEventListener('click', (e) => this.handleToggle(e));
+    document.addEventListener('click', (e) => {
+      if (!this.el().contains(e.target)) this.hideDropdown();
+    });
+  }
+
+  createEl() {
+    return videojs.dom.createEl('div', {
+      className: 'vjs-searchable-language-dropdown vjs-control vjs-button',
+      innerHTML: `
+      <button class="vjs-lang-toggle" aria-label="Select Language" title="Select Language">
+        🌐
+      </button>
+      <div class="vjs-lang-popover hidden">
+        <input type="text" placeholder="Search..." class="vjs-lang-search">
+        <div class="vjs-lang-header">Languages</div>
+        <ul class="vjs-lang-list"></ul>
+      </div>
+    `
+    });
+  }
+
+  handleToggle(e) {
+    const isToggle = e.target.classList.contains('vjs-lang-toggle');
+    if (isToggle) {
+      this.open ? this.hideDropdown() : this.showDropdown();
+      e.stopPropagation();
+    }
+  }
+
+  showDropdown() {
+    this.open = true;
+    const popover = this.el().querySelector('.vjs-lang-popover');
+    popover.classList.remove('hidden');
+
+    const input = popover.querySelector('.vjs-lang-search');
+    input.value = '';
+    input.focus();
+    input.addEventListener('input', () => {
+      this.renderList(input.value.toLowerCase());
+    });
+
+    this.renderList('');
+  }
+
+  hideDropdown() {
+    this.open = false;
+    this.el().querySelector('.vjs-lang-popover').classList.add('hidden');
+  }
+
+  renderList(query = '') {
+    const ul = this.el().querySelector('.vjs-lang-list');
+    ul.innerHTML = '';
+
+    const filtered = this.languages.filter(l =>
+      l.label.toLowerCase().includes(query)
+    );
+
+    if (filtered.length === 0) {
+      const li = document.createElement('li');
+      li.className = 'vjs-lang-empty';
+      li.textContent = 'No results...';
+      ul.appendChild(li);
+      return;
+    }
+
+    filtered.forEach(lang => {
+      const iconMap = {
+        idle: '',
+        loading: '⏳',
+        loaded: '✅',
+        error: '❌'
+      };
+      const icon = iconMap[lang.status || 'idle'] || '';
+      const li = document.createElement('li');
+      li.className = `vjs-lang-item vjs-lang-${lang.status || 'idle'} ${lang.selected ? 'vjs-lang-selected' : ''}`;
+      li.innerHTML = `<span>${lang.label}</span><span class="vjs-lang-icon">${icon}</span>`;
+      li.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.onSelect(lang);
+      });
+      ul.appendChild(li);
+    });
+  }
+
+  updateLanguages(languages) {
+    this.languages = languages;
+    if (this.open) {
+      const q = this.el().querySelector('.vjs-lang-search').value.toLowerCase();
+      this.renderList(q);
+    }
+  }
+}
+
+videojs.registerComponent('SearchableLanguageDropdown', SearchableLanguageDropdown);
+export default SearchableLanguageDropdown;
diff --git a/src/components/dynamicTextTracksButton/dynamic-text-tracks-button.scss b/src/components/dynamicTextTracksButton/dynamic-text-tracks-button.scss
new file mode 100644
index 000000000..e9d26acae
--- /dev/null
+++ b/src/components/dynamicTextTracksButton/dynamic-text-tracks-button.scss
@@ -0,0 +1,31 @@
+// Player Cloudinary button
+.vjs-control-bar a.vjs-control.vjs-cloudinary-button {
+  background-image: url("../../assets/icons/cloudinary_icon_for_black_bg.svg");
+  background-size: 25px;
+  background-position: center;
+  background-repeat: no-repeat;
+  color: inherit;
+
+  .cld-video-player-skin-light & {
+    background-image: url("../../assets/icons/cloudinary_icon_for_white_bg.svg");
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:last-child {
+    margin-right: 0.4em;
+    margin-left: 0.8em;
+    &::before {
+      content: '';
+      position: absolute;
+      left: -0.25em;
+      top: 0.3em;
+      bottom: 0.3em;
+      border-left: 1px solid currentColor;
+      opacity: 0.25;
+    }
+  }
+
+}
diff --git a/src/components/index.js b/src/components/index.js
index 8dd2f8fa7..2504f556f 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -3,11 +3,13 @@ import JumpBackButton from './jumpButtons/jump-10-minus';
 import LogoButton from './logoButton/logo-button';
 import ProgressControlEventsBlocker from './progress-control-events-blocker/progress-control-events-blocker';
 import TitleBar from './title-bar/title-bar';
+import DynamicTextTracksButton from './dynamicTextTracksButton/dynamic-text-tracks-button';
 
 export {
   JumpForwardButton,
   JumpBackButton,
   LogoButton,
   ProgressControlEventsBlocker,
-  TitleBar
+  TitleBar,
+  DynamicTextTracksButton
 };
diff --git a/src/index.all.js b/src/index.all.js
index b17324d50..5c672c492 100644
--- a/src/index.all.js
+++ b/src/index.all.js
@@ -10,6 +10,7 @@ import cloudinary from './index.js';
 export * from './index.js';
 export * from './plugins/adaptive-streaming/adaptive-streaming.js';
 export * from './plugins/chapters/chapters.js';
+export * from './plugins/dynamic-text-tracks/index.js';
 export * from './plugins/colors/colors.js';
 export * from './plugins/ima/ima.js';
 export * from './plugins/playlist/playlist.js';
diff --git a/src/plugins/dynamic-text-tracks/dynamic-text-tracks.scss b/src/plugins/dynamic-text-tracks/dynamic-text-tracks.scss
new file mode 100644
index 000000000..bc16b602e
--- /dev/null
+++ b/src/plugins/dynamic-text-tracks/dynamic-text-tracks.scss
@@ -0,0 +1,102 @@
+.vjs-subs-caps-button {
+  display: none !important;
+}
+
+
+.vjs-searchable-language-dropdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .vjs-lang-toggle {
+    background: transparent;
+    border: none;
+    color: white;
+    font-size: 16px;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .vjs-lang-popover {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    background: #1c1c1c;
+    border: 1px solid #333;
+    padding: 8px;
+    width: 200px;
+    z-index: 9999;
+    border-radius: 4px;
+    margin-bottom: 8px;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .vjs-lang-search {
+    width: 100%;
+    padding: 5px;
+    margin-bottom: 6px;
+    border: 1px solid #444;
+    background: #111;
+    color: white;
+    border-radius: 3px;
+  }
+
+  .vjs-lang-header {
+    font-size: 12px;
+    color: #aaa;
+    font-weight: bold;
+    margin-bottom: 6px;
+    border-bottom: 1px solid #333;
+    padding-bottom: 2px;
+  }
+
+  .vjs-lang-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    max-height: 160px;
+    overflow-y: auto;
+
+    .vjs-lang-item {
+      padding: 6px 5px;
+      display: flex;
+      justify-content: space-between;
+      cursor: pointer;
+      color: white;
+
+      &:hover {
+        background: #333;
+      }
+
+      &.vjs-lang-loaded {
+        opacity: 0.6;
+      }
+
+      &.vjs-lang-error {
+        color: #f44;
+      }
+
+      &.vjs-lang-loading {
+        color: #ffcc00;
+      }
+
+      .vjs-lang-icon {
+        padding-left: 6px;
+      }
+    }
+
+    .vjs-lang-empty {
+      padding: 6px;
+      color: #888;
+      font-style: italic;
+    }
+  }
+}
diff --git a/src/plugins/dynamic-text-tracks/index.js b/src/plugins/dynamic-text-tracks/index.js
new file mode 100644
index 000000000..3e0ec9970
--- /dev/null
+++ b/src/plugins/dynamic-text-tracks/index.js
@@ -0,0 +1,120 @@
+// import videojs from 'video.js';
+/* eslint-disable */
+
+import languagesList from './languages.json';
+import './dynamic-text-tracks.scss';
+import { utf8ToBase64 } from '../../utils/utf8Base64';
+import { getCloudinaryUrlPrefix } from '../cloudinary/common';
+import { parseTranscript } from './parse-transcript';
+
+const dynamicTextTracksPlugin = function () {
+  this.player.dynamicTextTracks = new DynamicTextTracks(this);
+};
+
+const getTranscriptUrl = (player, languageCode) => {
+  const source = player.cloudinary.source();
+  const sourcePublicId = source.publicId();
+  const sourceDeliveryType = source.resourceConfig().type;
+  const urlPrefix = getCloudinaryUrlPrefix(player.cloudinary.cloudinaryConfig());
+  return `${urlPrefix}/_applet_/video_service/transcription/${sourceDeliveryType}/${languageCode}/${utf8ToBase64(sourcePublicId)}.transcript`;
+};
+
+
+const DynamicTextTracks = (function () {
+  function DynamicTextTracksPlugin(player) {
+    this.player = player;
+    this.player.one('loadedmetadata', this.initialize.bind(this));
+    return this;
+  }
+
+  DynamicTextTracksPlugin.prototype.initialize = async function() {
+    const player = this;
+
+    const languages = languagesList.map(({ code, name }) => ({
+      code,
+      label: name,
+      status: 'idle',
+    }));
+
+    const updateDropdown = () => {
+      const dropdown = this.player.controlBar.getChild('SearchableLanguageDropdown');
+      if (dropdown) {
+        dropdown.updateLanguages(languages);
+      }
+    };
+
+    const setStatus = (code, status) => {
+      console.log('xxx', code, status);
+      const lang = languages.find(l => l.code === code);
+      if (lang) lang.status = status;
+      updateDropdown();
+    };
+
+    const addTextTrack = (lang, src, transcriptData) => {
+      setStatus(lang.code, 'loaded');
+      const captions = parseTranscript(JSON.parse(transcriptData));
+
+      const tracks = this.player.textTracks();
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        if (track.kind === 'subtitles') {
+          track.mode = 'disabled';
+        }
+      }
+
+      const captionsTrack = this.player.addRemoteTextTrack({
+        kind: 'subtitles',
+        label: lang.label,
+        srclang: src,
+        default: false,
+        mode: 'showing',
+      });
+
+      captions.forEach(caption => {
+        captionsTrack.track.addCue(new VTTCue(caption.startTime, caption.endTime, caption.text));
+      });
+
+      languages.forEach(l => {
+        l.selected = l.code === lang.code;
+      });
+    };
+
+    const pollTrackUntilReady = (lang, src, attempt = 0) => {
+      fetch(src).then(res => {
+        if (res.status === 200) {
+          return res.text().then((value) => addTextTrack(lang, src, value)).catch((e) => {});
+        } else if (res.status === 202 && attempt < 15) {
+          setTimeout(() => pollTrackUntilReady(lang, src, attempt + 1), 2000);
+        } else {
+          setStatus(lang.code, 'error');
+        }
+      }).catch(() => {
+        setStatus(lang.code, 'error');
+      });
+    };
+
+    const selectLanguage = (lang) => {
+      if (lang.status === 'loaded') {
+        const tracks = player.textTracks();
+        for (let i = 0; i < tracks.length; i++) {
+          tracks[i].mode = (tracks[i].language === lang.code) ? 'showing' : 'disabled';
+        }
+        return;
+      }
+
+      setStatus(lang.code, 'loading');
+
+      const src = getTranscriptUrl(this.player, lang.code);
+      pollTrackUntilReady(lang, src);
+    };
+
+    this.player.controlBar.addChild('SearchableLanguageDropdown', {
+      languages,
+      onSelect: selectLanguage,
+    });
+  };
+
+  return DynamicTextTracksPlugin;
+}());
+
+export default dynamicTextTracksPlugin;
diff --git a/src/plugins/dynamic-text-tracks/languages.json b/src/plugins/dynamic-text-tracks/languages.json
new file mode 100644
index 000000000..cefbea520
--- /dev/null
+++ b/src/plugins/dynamic-text-tracks/languages.json
@@ -0,0 +1,195 @@
+[
+  { "code": "aa", "name": "Afar" },
+  { "code": "ab", "name": "Abkhazian" },
+  { "code": "ae", "name": "Avestan" },
+  { "code": "af", "name": "Afrikaans" },
+  { "code": "ak", "name": "Akan" },
+  { "code": "am", "name": "Amharic" },
+  { "code": "an", "name": "Aragonese" },
+  { "code": "ar", "name": "Arabic" },
+  { "code": "as", "name": "Assamese" },
+  { "code": "av", "name": "Avaric" },
+  { "code": "ay", "name": "Aymara" },
+  { "code": "az", "name": "Azerbaijani" },
+  { "code": "ba", "name": "Bashkir" },
+  { "code": "be", "name": "Belarusian" },
+  { "code": "bg", "name": "Bulgarian" },
+  { "code": "bh", "name": "Bihari languages" },
+  { "code": "bi", "name": "Bislama" },
+  { "code": "bm", "name": "Bambara" },
+  { "code": "bn", "name": "Bengali" },
+  { "code": "bo", "name": "Tibetan" },
+  { "code": "br", "name": "Breton" },
+  { "code": "bs", "name": "Bosnian" },
+  { "code": "ca", "name": "Catalan; Valencian" },
+  { "code": "ce", "name": "Chechen" },
+  { "code": "ch", "name": "Chamorro" },
+  { "code": "co", "name": "Corsican" },
+  { "code": "cr", "name": "Cree" },
+  { "code": "cs", "name": "Czech" },
+  {
+    "code": "cu",
+    "name": "Church Slavic; Old Slavonic; Church Slavonic; Old Bulgarian; Old Church Slavonic"
+  },
+  { "code": "cv", "name": "Chuvash" },
+  { "code": "cy", "name": "Welsh" },
+  { "code": "da", "name": "Danish" },
+  { "code": "de", "name": "German" },
+  { "code": "dv", "name": "Divehi; Dhivehi; Maldivian" },
+  { "code": "dz", "name": "Dzongkha" },
+  { "code": "ee", "name": "Ewe" },
+  { "code": "el", "name": "Greek, Modern (1453-)" },
+  { "code": "en", "name": "English" },
+  { "code": "eo", "name": "Esperanto" },
+  { "code": "es", "name": "Spanish; Castilian" },
+  { "code": "et", "name": "Estonian" },
+  { "code": "eu", "name": "Basque" },
+  { "code": "fa", "name": "Persian" },
+  { "code": "ff", "name": "Fulah" },
+  { "code": "fi", "name": "Finnish" },
+  { "code": "fj", "name": "Fijian" },
+  { "code": "fo", "name": "Faroese" },
+  { "code": "fr", "name": "French" },
+  { "code": "fy", "name": "Western Frisian" },
+  { "code": "ga", "name": "Irish" },
+  { "code": "gd", "name": "Gaelic; Scomttish Gaelic" },
+  { "code": "gl", "name": "Galician" },
+  { "code": "gn", "name": "Guarani" },
+  { "code": "gu", "name": "Gujarati" },
+  { "code": "gv", "name": "Manx" },
+  { "code": "ha", "name": "Hausa" },
+  { "code": "he", "name": "Hebrew" },
+  { "code": "hi", "name": "Hindi" },
+  { "code": "ho", "name": "Hiri Motu" },
+  { "code": "hr", "name": "Croatian" },
+  { "code": "ht", "name": "Haitian; Haitian Creole" },
+  { "code": "hu", "name": "Hungarian" },
+  { "code": "hy", "name": "Armenian" },
+  { "code": "hz", "name": "Herero" },
+  {
+    "code": "ia",
+    "name": "Interlingua (International Auxiliary Language Association)"
+  },
+  { "code": "id", "name": "Indonesian" },
+  { "code": "ie", "name": "Interlingue; Occidental" },
+  { "code": "ig", "name": "Igbo" },
+  { "code": "ii", "name": "Sichuan Yi; Nuosu" },
+  { "code": "ik", "name": "Inupiaq" },
+  { "code": "io", "name": "Ido" },
+  { "code": "is", "name": "Icelandic" },
+  { "code": "it", "name": "Italian" },
+  { "code": "iu", "name": "Inuktitut" },
+  { "code": "ja", "name": "Japanese" },
+  { "code": "jv", "name": "Javanese" },
+  { "code": "ka", "name": "Georgian" },
+  { "code": "kg", "name": "Kongo" },
+  { "code": "ki", "name": "Kikuyu; Gikuyu" },
+  { "code": "kj", "name": "Kuanyama; Kwanyama" },
+  { "code": "kk", "name": "Kazakh" },
+  { "code": "kl", "name": "Kalaallisut; Greenlandic" },
+  { "code": "km", "name": "Central Khmer" },
+  { "code": "kn", "name": "Kannada" },
+  { "code": "ko", "name": "Korean" },
+  { "code": "kr", "name": "Kanuri" },
+  { "code": "ks", "name": "Kashmiri" },
+  { "code": "ku", "name": "Kurdish" },
+  { "code": "kv", "name": "Komi" },
+  { "code": "kw", "name": "Cornish" },
+  { "code": "ky", "name": "Kirghiz; Kyrgyz" },
+  { "code": "la", "name": "Latin" },
+  { "code": "lb", "name": "Luxembourgish; Letzeburgesch" },
+  { "code": "lg", "name": "Ganda" },
+  { "code": "li", "name": "Limburgan; Limburger; Limburgish" },
+  { "code": "ln", "name": "Lingala" },
+  { "code": "lo", "name": "Lao" },
+  { "code": "lt", "name": "Lithuanian" },
+  { "code": "lu", "name": "Luba-Katanga" },
+  { "code": "lv", "name": "Latvian" },
+  { "code": "mg", "name": "Malagasy" },
+  { "code": "mh", "name": "Marshallese" },
+  { "code": "mi", "name": "Maori" },
+  { "code": "mk", "name": "Macedonian" },
+  { "code": "ml", "name": "Malayalam" },
+  { "code": "mn", "name": "Mongolian" },
+  { "code": "mr", "name": "Marathi" },
+  { "code": "ms", "name": "Malay" },
+  { "code": "mt", "name": "Maltese" },
+  { "code": "my", "name": "Burmese" },
+  { "code": "na", "name": "Nauru" },
+  {
+    "code": "nb",
+    "name": "Bokmål, Norwegian; Norwegian Bokmål"
+  },
+  { "code": "nd", "name": "Ndebele, North; North Ndebele" },
+  { "code": "ne", "name": "Nepali" },
+  { "code": "ng", "name": "Ndonga" },
+  { "code": "nl", "name": "Dutch; Flemish" },
+  { "code": "nn", "name": "Norwegian Nynorsk; Nynorsk, Norwegian" },
+  { "code": "no", "name": "Norwegian" },
+  { "code": "nr", "name": "Ndebele, South; South Ndebele" },
+  { "code": "nv", "name": "Navajo; Navaho" },
+  { "code": "ny", "name": "Chichewa; Chewa; Nyanja" },
+  { "code": "oc", "name": "Occitan (post 1500)" },
+  { "code": "oj", "name": "Ojibwa" },
+  { "code": "om", "name": "Oromo" },
+  { "code": "or", "name": "Oriya" },
+  { "code": "os", "name": "Ossetian; Ossetic" },
+  { "code": "pa", "name": "Panjabi; Punjabi" },
+  { "code": "pi", "name": "Pali" },
+  { "code": "pl", "name": "Polish" },
+  { "code": "ps", "name": "Pushto; Pashto" },
+  { "code": "pt", "name": "Portuguese" },
+  { "code": "qu", "name": "Quechua" },
+  { "code": "rm", "name": "Romansh" },
+  { "code": "rn", "name": "Rundi" },
+  { "code": "ro", "name": "Romanian; Moldavian; Moldovan" },
+  { "code": "ru", "name": "Russian" },
+  { "code": "rw", "name": "Kinyarwanda" },
+  { "code": "sa", "name": "Sanskrit" },
+  { "code": "sc", "name": "Sardinian" },
+  { "code": "sd", "name": "Sindhi" },
+  { "code": "se", "name": "Northern Sami" },
+  { "code": "sg", "name": "Sango" },
+  { "code": "si", "name": "Sinhala; Sinhalese" },
+  { "code": "sk", "name": "Slovak" },
+  { "code": "sl", "name": "Slovenian" },
+  { "code": "sm", "name": "Samoan" },
+  { "code": "sn", "name": "Shona" },
+  { "code": "so", "name": "Somali" },
+  { "code": "sq", "name": "Albanian" },
+  { "code": "sr", "name": "Serbian" },
+  { "code": "ss", "name": "Swati" },
+  { "code": "st", "name": "Sotho, Southern" },
+  { "code": "su", "name": "Sundanese" },
+  { "code": "sv", "name": "Swedish" },
+  { "code": "sw", "name": "Swahili" },
+  { "code": "ta", "name": "Tamil" },
+  { "code": "te", "name": "Telugu" },
+  { "code": "tg", "name": "Tajik" },
+  { "code": "th", "name": "Thai" },
+  { "code": "ti", "name": "Tigrinya" },
+  { "code": "tk", "name": "Turkmen" },
+  { "code": "tl", "name": "Tagalog" },
+  { "code": "tn", "name": "Tswana" },
+  { "code": "to", "name": "Tonga (Tonga Islands)" },
+  { "code": "tr", "name": "Turkish" },
+  { "code": "ts", "name": "Tsonga" },
+  { "code": "tt", "name": "Tatar" },
+  { "code": "tw", "name": "Twi" },
+  { "code": "ty", "name": "Tahitian" },
+  { "code": "ug", "name": "Uighur; Uyghur" },
+  { "code": "uk", "name": "Ukrainian" },
+  { "code": "ur", "name": "Urdu" },
+  { "code": "uz", "name": "Uzbek" },
+  { "code": "ve", "name": "Venda" },
+  { "code": "vi", "name": "Vietnamese" },
+  { "code": "vo", "name": "Volapük" },
+  { "code": "wa", "name": "Walloon" },
+  { "code": "wo", "name": "Wolof" },
+  { "code": "xh", "name": "Xhosa" },
+  { "code": "yi", "name": "Yiddish" },
+  { "code": "yo", "name": "Yoruba" },
+  { "code": "za", "name": "Zhuang; Chuang" },
+  { "code": "zh", "name": "Chinese" },
+  { "code": "zu", "name": "Zulu" }
+]
diff --git a/src/plugins/dynamic-text-tracks/parse-transcript.js b/src/plugins/dynamic-text-tracks/parse-transcript.js
new file mode 100644
index 000000000..e535c4aef
--- /dev/null
+++ b/src/plugins/dynamic-text-tracks/parse-transcript.js
@@ -0,0 +1,38 @@
+/* eslint-disable */
+export const parseTranscript = (transcriptionData) => {
+  const captions = [];
+
+  const addCaption = ({ startTime, endTime, text }) => {
+    captions.push({
+      startTime: startTime,
+      endTime: endTime,
+      text
+    });
+  };
+
+  transcriptionData.forEach(segment => {
+    const words = segment.words;
+
+    if (words) {
+      const maxWords = words.length;
+      for (let i = 0; i < words.length; i += maxWords) {
+        captions.push({
+          startTime: words[i].start_time,
+          endTime: words[Math.min(i + maxWords - 1, words.length - 1)].end_time,
+          text: words
+            .slice(i, i + maxWords)
+            .map(word => word.word)
+            .join(' ')
+        });
+      }
+    } else {
+      addCaption({
+        startTime: segment.start_time,
+        endTime: segment.end_time,
+        text: segment.transcript
+      });
+    }
+  });
+
+  return captions;
+};
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 497382349..b2a22e2d1 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -10,6 +10,7 @@ import floatingPlayer from './floating-player';
 import pacedTranscript from './paced-transcript';
 import styledTextTracks from './styled-text-tracks';
 import vttThumbnails from './vtt-thumbnails';
+import dynamicTextTracksPlugin from './dynamic-text-tracks';
 
 // Lazy loaded plugins
 import chapters from './chapters';
@@ -33,6 +34,7 @@ const plugins = {
   pacedTranscript,
   styledTextTracks,
   vttThumbnails,
+  dynamicTextTracks: dynamicTextTracksPlugin,
 
   // Lazy loaded plugins
   chapters,
diff --git a/src/video-player.js b/src/video-player.js
index acdc8d807..4ad7ca720 100644
--- a/src/video-player.js
+++ b/src/video-player.js
@@ -197,6 +197,7 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     this._initHighlightsGraph();
     this._initSeekThumbs();
     this._initChapters();
+    this._initDynamicTextTracks();
     this._initInteractionAreas();
   }
 
@@ -218,6 +219,12 @@ class VideoPlayer extends Utils.mixin(Eventable) {
         this.videojs.removeRemoteTextTrack(currentTracks.tracks_[i]);
       }
     }
+
+    if (conf === 'auto') {
+      this.customTextTracks();
+      return;
+    }
+
     if (conf) {
       const kinds = Object.keys(conf);
       const allTracks = [];
@@ -244,6 +251,10 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     }
   }
 
+  customTextTracks() {
+    console.log('customTextTracks');
+  }
+
   _initSeekThumbs() {
     if (this.playerOptions.seekThumbnails) {
 
@@ -331,6 +342,16 @@ class VideoPlayer extends Utils.mixin(Eventable) {
     });
   }
 
+  _initDynamicTextTracks() {
+    if (!this.playerOptions.textTracks !== true && this.videojs.controlBar) {
+      this.videojs.controlBar.removeChild('chaptersButton');
+    }
+
+    if (this.videojs.dynamicTextTracks) {
+      this.videojs.dynamicTextTracks();
+    }
+  }
+
   _initInteractionAreas() {
     this.videojs.on(PLAYER_EVENT.READY, async () => {
       if (this.options.videojsOptions.interactionDisplay && this.videojs.interactionAreas) {
@@ -497,7 +518,7 @@ class VideoPlayer extends Utils.mixin(Eventable) {
 
     if (source) {
       const sourceOptions = Object.assign({}, this.playerOptions.cloudinary);
-      
+
       this.source(source, sourceOptions);
     }
   }
@@ -567,7 +588,7 @@ class VideoPlayer extends Utils.mixin(Eventable) {
         }
       });
     }
-    
+
     if (publicId instanceof VideoSource) {
       return this.videojs.cloudinary.source(publicId, options);
     }

From b558f2b43034bf2272c2a7e21c8422e776b0692e Mon Sep 17 00:00:00 2001
From: jakubroch <jakub.roch@cloudinary.com>
Date: Fri, 25 Jul 2025 21:10:36 +0200
Subject: [PATCH 2/3] feat: text tracks on demand POC

---
 docs/subtitles-and-captions.html              |  28 ----
 .../dynamic-text-tracks-button.js             |  71 ++++++---
 .../dynamic-text-tracks-button.scss           | 139 +++++++++++++++---
 src/plugins/dynamic-text-tracks/index.js      |  38 +++--
 4 files changed, 190 insertions(+), 86 deletions(-)

diff --git a/docs/subtitles-and-captions.html b/docs/subtitles-and-captions.html
index 39e60b1a5..f1af2aa08 100644
--- a/docs/subtitles-and-captions.html
+++ b/docs/subtitles-and-captions.html
@@ -33,34 +33,6 @@
 
       translatedTranscriptPlayer.source('video/examples/cloudinary-marketing-pm', {
         textTracks: 'auto',
-        /*textTracks: {
-          captions: {
-            label: "Original",
-            default: true,
-          },
-          subtitles: [
-            {
-              label: "English",
-              language: "en-US",
-            },
-            {
-              label: "Polish",
-              language: "pl-PL",
-            },
-            {
-              label: "Hebrew",
-              language: "he-IL",
-            },
-            {
-              label: "Italian",
-              language: "it-IT",
-            },
-            {
-              label: "Ukrainian",
-              language: "uk-UA",
-            }
-          ]
-        }*/
       });
     }, false);
   </script>
diff --git a/src/components/dynamicTextTracksButton/dynamic-text-tracks-button.js b/src/components/dynamicTextTracksButton/dynamic-text-tracks-button.js
index 860d4f5c3..04fdb159e 100644
--- a/src/components/dynamicTextTracksButton/dynamic-text-tracks-button.js
+++ b/src/components/dynamicTextTracksButton/dynamic-text-tracks-button.js
@@ -1,5 +1,6 @@
 /* eslint-disable  */
 import videojs from 'video.js';
+import './dynamic-text-tracks-button.scss';
 
 const Component = videojs.getComponent('Component');
 
@@ -7,29 +8,21 @@ class SearchableLanguageDropdown extends Component {
   constructor(player, options = {}) {
     super(player, options);
 
+    this.player = player;
     this.languages = options.languages || [];
     this.onSelect = options.onSelect || (() => {});
     this.open = false;
+    this.dropdownEl = null;
 
     this.el().addEventListener('click', (e) => this.handleToggle(e));
-    document.addEventListener('click', (e) => {
-      if (!this.el().contains(e.target)) this.hideDropdown();
-    });
   }
 
   createEl() {
     return videojs.dom.createEl('div', {
-      className: 'vjs-searchable-language-dropdown vjs-control vjs-button',
+      className: 'vjs-searchable-language-dropdown vjs-control vjs-button vjs-icon-placeholder',
       innerHTML: `
-      <button class="vjs-lang-toggle" aria-label="Select Language" title="Select Language">
-        🌐
-      </button>
-      <div class="vjs-lang-popover hidden">
-        <input type="text" placeholder="Search..." class="vjs-lang-search">
-        <div class="vjs-lang-header">Languages</div>
-        <ul class="vjs-lang-list"></ul>
-      </div>
-    `
+        <button class="vjs-lang-toggle" aria-label="Select Language" title="Select Language"></button>
+      `
     });
   }
 
@@ -41,12 +34,29 @@ class SearchableLanguageDropdown extends Component {
     }
   }
 
+  createDropdown() {
+    this.dropdownEl = document.createElement('div');
+    this.dropdownEl.className = 'vjs-lang-popover';
+    this.dropdownEl.innerHTML = `
+      <input type="text" placeholder="Search..." class="vjs-lang-search">
+      <div class="vjs-lang-header">Languages</div>
+      <ul class="vjs-lang-list"></ul>
+    `;
+    const container = this.player.el_ || document.body;
+    container.appendChild(this.dropdownEl);
+  }
+
   showDropdown() {
+    if (!this.dropdownEl) this.createDropdown();
+
     this.open = true;
-    const popover = this.el().querySelector('.vjs-lang-popover');
-    popover.classList.remove('hidden');
+    this.dropdownEl.style.position = 'absolute';
+    this.dropdownEl.style.right = 0;
+    this.dropdownEl.style.bottom = '43px';
+    this.dropdownEl.style.zIndex = 9999;
+    this.dropdownEl.style.display = 'block';
 
-    const input = popover.querySelector('.vjs-lang-search');
+    const input = this.dropdownEl.querySelector('.vjs-lang-search');
     input.value = '';
     input.focus();
     input.addEventListener('input', () => {
@@ -58,11 +68,13 @@ class SearchableLanguageDropdown extends Component {
 
   hideDropdown() {
     this.open = false;
-    this.el().querySelector('.vjs-lang-popover').classList.add('hidden');
+    if (this.dropdownEl) {
+      this.dropdownEl.style.display = 'none';
+    }
   }
 
   renderList(query = '') {
-    const ul = this.el().querySelector('.vjs-lang-list');
+    const ul = this.dropdownEl.querySelector('.vjs-lang-list');
     ul.innerHTML = '';
 
     const filtered = this.languages.filter(l =>
@@ -78,20 +90,31 @@ class SearchableLanguageDropdown extends Component {
     }
 
     filtered.forEach(lang => {
-      const iconMap = {
+      const status = lang.status || 'idle';
+      const icon = {
         idle: '',
         loading: '⏳',
         loaded: '✅',
         error: '❌'
-      };
-      const icon = iconMap[lang.status || 'idle'] || '';
+      }[status] || '';
+
       const li = document.createElement('li');
-      li.className = `vjs-lang-item vjs-lang-${lang.status || 'idle'} ${lang.selected ? 'vjs-lang-selected' : ''}`;
-      li.innerHTML = `<span>${lang.label}</span><span class="vjs-lang-icon">${icon}</span>`;
+      li.className = `vjs-lang-item vjs-lang-${status}`;
+      li.innerHTML = `
+        <span>${lang.label}</span>
+        <span class="vjs-lang-icon">${icon}</span>
+      `;
+
+      if (lang.selected) {
+        li.classList.add('vjs-lang-selected');
+      }
+
       li.addEventListener('click', (e) => {
         e.stopPropagation();
         this.onSelect(lang);
+        // Keep dropdown open
       });
+
       ul.appendChild(li);
     });
   }
@@ -99,7 +122,7 @@ class SearchableLanguageDropdown extends Component {
   updateLanguages(languages) {
     this.languages = languages;
     if (this.open) {
-      const q = this.el().querySelector('.vjs-lang-search').value.toLowerCase();
+      const q = this.dropdownEl.querySelector('.vjs-lang-search').value.toLowerCase();
       this.renderList(q);
     }
   }
diff --git a/src/components/dynamicTextTracksButton/dynamic-text-tracks-button.scss b/src/components/dynamicTextTracksButton/dynamic-text-tracks-button.scss
index e9d26acae..8f6d5faa1 100644
--- a/src/components/dynamicTextTracksButton/dynamic-text-tracks-button.scss
+++ b/src/components/dynamicTextTracksButton/dynamic-text-tracks-button.scss
@@ -1,31 +1,126 @@
-// Player Cloudinary button
-.vjs-control-bar a.vjs-control.vjs-cloudinary-button {
-  background-image: url("../../assets/icons/cloudinary_icon_for_black_bg.svg");
-  background-size: 25px;
-  background-position: center;
-  background-repeat: no-repeat;
+.cld-video-player {
+  position: relative;
+}
+
+.vjs-searchable-language-dropdown.vjs-control.vjs-button {
+  font-size: 1.8em;
+  cursor: pointer;
+  position: relative;
+  padding: 0;
   color: inherit;
+  width: 36px;
 
-  .cld-video-player-skin-light & {
-    background-image: url("../../assets/icons/cloudinary_icon_for_white_bg.svg");
+  .vjs-lang-toggle {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: inherit;
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+    z-index: 9999;
   }
 
-  &:hover {
-    cursor: pointer;
+  &:hover,
+  &:focus-within {
+    background-color: rgba(255, 255, 255, 0.2);
   }
 
-  &:last-child {
-    margin-right: 0.4em;
-    margin-left: 0.8em;
-    &::before {
-      content: '';
-      position: absolute;
-      left: -0.25em;
-      top: 0.3em;
-      bottom: 0.3em;
-      border-left: 1px solid currentColor;
-      opacity: 0.25;
-    }
+  &.vjs-icon-placeholder button::after {
+    font-family: "VideoJS";
+    content: "\f10b";
+    font-style: normal;
+    font-weight: normal;
+    text-transform: none;
+    speak: none;
+    line-height: 1;
   }
+}
+
+.vjs-lang-popover {
+  position: absolute;
+  background: #1c1c1c;
+  border: 1px solid #444;
+  color: white;
+  width: 220px;
+  padding: 10px;
+  z-index: 10000;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  font-family: sans-serif;
+  font-size: 13px;
+}
+
+.vjs-lang-search {
+  width: 100%;
+  padding: 6px 8px;
+  margin-bottom: 8px;
+  border: 1px solid #555;
+  border-radius: 3px;
+  background: #111;
+  color: white;
+  font-size: 13px;
+}
+
+.vjs-lang-header {
+  font-weight: bold;
+  color: #ccc;
+  font-size: 12px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid #333;
+  padding-bottom: 4px;
+}
+
+.vjs-lang-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 160px;
+  overflow-y: auto;
+}
+
+.vjs-lang-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 8px;
+  cursor: pointer;
+  border-radius: 3px;
+  transition: background 0.2s;
+  color: white;
+}
+
+.vjs-lang-item:hover {
+  background: #333;
+}
+
+.vjs-lang-item.vjs-lang-loaded {
+  opacity: 0.5;
+}
+
+.vjs-lang-item.vjs-lang-error {
+  color: #f66;
+}
+
+.vjs-lang-item.vjs-lang-loading {
+  color: #ffc107;
+}
+
+.vjs-lang-selected {
+  background: #6c8bd5 !important;
+  font-weight: bold;
+}
+
+.vjs-lang-icon {
+  padding-left: 8px;
+}
 
+.vjs-lang-empty {
+  padding: 6px 8px;
+  font-style: italic;
+  color: #888;
 }
diff --git a/src/plugins/dynamic-text-tracks/index.js b/src/plugins/dynamic-text-tracks/index.js
index 3e0ec9970..11917fa7f 100644
--- a/src/plugins/dynamic-text-tracks/index.js
+++ b/src/plugins/dynamic-text-tracks/index.js
@@ -28,8 +28,6 @@ const DynamicTextTracks = (function () {
   }
 
   DynamicTextTracksPlugin.prototype.initialize = async function() {
-    const player = this;
-
     const languages = languagesList.map(({ code, name }) => ({
       code,
       label: name,
@@ -44,7 +42,6 @@ const DynamicTextTracks = (function () {
     };
 
     const setStatus = (code, status) => {
-      console.log('xxx', code, status);
       const lang = languages.find(l => l.code === code);
       if (lang) lang.status = status;
       updateDropdown();
@@ -52,7 +49,7 @@ const DynamicTextTracks = (function () {
 
     const addTextTrack = (lang, src, transcriptData) => {
       setStatus(lang.code, 'loaded');
-      const captions = parseTranscript(JSON.parse(transcriptData));
+      const data = parseTranscript(JSON.parse(transcriptData));
 
       const tracks = this.player.textTracks();
       for (let i = 0; i < tracks.length; i++) {
@@ -65,18 +62,14 @@ const DynamicTextTracks = (function () {
       const captionsTrack = this.player.addRemoteTextTrack({
         kind: 'subtitles',
         label: lang.label,
-        srclang: src,
+        srclang: lang.code,
         default: false,
         mode: 'showing',
       });
 
-      captions.forEach(caption => {
+      data.forEach(caption => {
         captionsTrack.track.addCue(new VTTCue(caption.startTime, caption.endTime, caption.text));
       });
-
-      languages.forEach(l => {
-        l.selected = l.code === lang.code;
-      });
     };
 
     const pollTrackUntilReady = (lang, src, attempt = 0) => {
@@ -94,11 +87,32 @@ const DynamicTextTracks = (function () {
     };
 
     const selectLanguage = (lang) => {
+      if (lang.selected) {
+        languages.forEach(l => l.selected = false);
+        const tracks = this.player.textTracks();
+        for (let i = 0; i < tracks.length; i++) {
+          if (tracks[i].kind === 'subtitles') {
+            tracks[i].mode = 'disabled';
+          }
+        }
+        updateDropdown();
+        return;
+      }
+
+      languages.forEach(l => {
+        l.selected = l.code === lang.code;
+      });
+
       if (lang.status === 'loaded') {
-        const tracks = player.textTracks();
+        languages.forEach(l => l.selected = (l.code === lang.code));
+        const tracks = this.player.textTracks();
         for (let i = 0; i < tracks.length; i++) {
-          tracks[i].mode = (tracks[i].language === lang.code) ? 'showing' : 'disabled';
+          const track = tracks[i];
+          if (track.kind === 'subtitles') {
+            track.mode = (track.language === lang.code || track.srclang === lang.code) ? 'showing' : 'disabled';
+          }
         }
+        updateDropdown();
         return;
       }
 

From 4d028c66c606f51447a5991282c729be439d8c05 Mon Sep 17 00:00:00 2001
From: jakubroch <jakub.roch@cloudinary.com>
Date: Fri, 25 Jul 2025 21:17:01 +0200
Subject: [PATCH 3/3] feat: text tracks on demand POC

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 794b093a6..526a00c19 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
       },
       {
         "path": "./lib/all.js",
-        "maxSize": "320kb"
+        "maxSize": "325kb"
       }
     ]
   },