From 14d811a7af58efee5e7bdb4534f65ba1dcc2b4d4 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Sat, 18 Jul 2026 14:05:23 -0700
Subject: [PATCH 1/4] Add media file-extractor extension derivation and shared
 strings

Derive source extensions from the MIME type, then the URL suffix,
falling back to the container default, so extracted sources never
carry a null type. Read src via getAttribute so extraction works on
detached nodes. Add VIDEO_PRESETS to classify content as video vs
audio, and a mediaStrings module for the extracted components.
---
 .../utils/__tests__/fileExtractors.spec.js    | 213 ++++++++++++++++++
 .../frontend/utils/fileExtractors.js          |  51 ++++-
 .../frontend/utils/mediaStrings.js            | 122 ++++++++++
 3 files changed, 380 insertions(+), 6 deletions(-)
 create mode 100644 kolibri/plugins/media_player/frontend/utils/__tests__/fileExtractors.spec.js
 create mode 100644 kolibri/plugins/media_player/frontend/utils/mediaStrings.js

diff --git a/kolibri/plugins/media_player/frontend/utils/__tests__/fileExtractors.spec.js b/kolibri/plugins/media_player/frontend/utils/__tests__/fileExtractors.spec.js
new file mode 100644
index 00000000000..4a1a066dac8
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/utils/__tests__/fileExtractors.spec.js
@@ -0,0 +1,213 @@
+import extractors from '../fileExtractors';
+
+/**
+ * Helper to create a mock DOM element
+ * @param {string} tagName - Tag name to create
+ * @param {object} attributes - Attributes to set on the element
+ * @param {Element[]} children - Child elements to append
+ * @returns {Element}
+ */
+function createElement(tagName, attributes = {}, children = []) {
+  const element = document.createElement(tagName);
+  for (const [key, value] of Object.entries(attributes)) {
+    element.setAttribute(key, value);
+  }
+  for (const child of children) {
+    element.appendChild(child);
+  }
+  return element;
+}
+
+describe('fileExtractors', () => {
+  describe('video extractor', () => {
+    it('extracts file from video element with src attribute', () => {
+      const video = createElement('video', { src: 'http://example.com/video.mp4' });
+      const files = extractors.video(video);
+
+      expect(files).toHaveLength(1);
+      expect(files[0]).toMatchObject({
+        storage_url: 'http://example.com/video.mp4',
+        preset: 'high_res_video',
+        available: true,
+        supplementary: false,
+        thumbnail: false,
+        extension: 'mp4',
+      });
+    });
+
+    it('extracts files from video with source children', () => {
+      const source1 = createElement('source', { src: 'video.mp4', type: 'video/mp4' });
+      const source2 = createElement('source', { src: 'video.webm', type: 'video/webm' });
+      const video = createElement('video', {}, [source1, source2]);
+
+      const files = extractors.video(video);
+
+      expect(files).toHaveLength(2);
+      // getAttribute('src') returns the raw attribute, so the URL is the value set
+      expect(files[0].storage_url).toMatch(/video\.mp4$/);
+      expect(files[0].extension).toBe('mp4');
+      expect(files[1].storage_url).toMatch(/video\.webm$/);
+      expect(files[1].extension).toBe('webm');
+    });
+
+    it('extracts subtitle tracks from video', () => {
+      const source = createElement('source', { src: 'video.mp4', type: 'video/mp4' });
+      const track = createElement('track', {
+        src: 'subtitles.vtt',
+        kind: 'subtitles',
+        srclang: 'en',
+        label: 'English',
+      });
+      const video = createElement('video', {}, [source, track]);
+
+      const files = extractors.video(video);
+
+      // Should have 2 files: 1 video source + 1 subtitle
+      expect(files).toHaveLength(2);
+
+      const subtitleFile = files.find(f => f.preset === 'video_subtitle');
+      expect(subtitleFile).toBeDefined();
+      expect(subtitleFile.storage_url).toMatch(/subtitles\.vtt$/);
+      expect(subtitleFile.supplementary).toBe(true);
+      expect(subtitleFile.lang).toBe('en');
+    });
+
+    it('ignores metadata tracks', () => {
+      const source = createElement('source', { src: 'video.mp4', type: 'video/mp4' });
+      const metadataTrack = createElement('track', {
+        src: 'chapters.vtt',
+        kind: 'metadata',
+      });
+      const video = createElement('video', {}, [source, metadataTrack]);
+
+      const files = extractors.video(video);
+
+      // Should only have 1 file (the video source)
+      expect(files).toHaveLength(1);
+      expect(files[0].preset).toBe('high_res_video');
+    });
+
+    it('ignores chapters tracks', () => {
+      const source = createElement('source', { src: 'video.mp4', type: 'video/mp4' });
+      const chaptersTrack = createElement('track', {
+        src: 'chapters.vtt',
+        kind: 'chapters',
+      });
+      const video = createElement('video', {}, [source, chaptersTrack]);
+
+      const files = extractors.video(video);
+
+      expect(files).toHaveLength(1);
+      expect(files[0].preset).toBe('high_res_video');
+    });
+
+    it('combines src attribute and source children', () => {
+      const source = createElement('source', { src: 'video-alt.webm', type: 'video/webm' });
+      const video = createElement('video', { src: 'video.mp4' }, [source]);
+
+      const files = extractors.video(video);
+
+      expect(files).toHaveLength(2);
+      expect(files[0].storage_url).toMatch(/video\.mp4$/);
+      expect(files[1].storage_url).toMatch(/video-alt\.webm$/);
+    });
+
+    it('derives extension from the URL suffix for a direct src', () => {
+      const video = createElement('video', { src: 'http://example.com/clip.webm' });
+      const files = extractors.video(video);
+
+      expect(files[0].extension).toBe('webm');
+    });
+
+    it('falls back to the URL suffix when the source type is not in the map', () => {
+      const source = createElement('source', { src: 'clip.ogv', type: 'video/ogg' });
+      const video = createElement('video', {}, [source]);
+
+      const files = extractors.video(video);
+
+      expect(files[0].extension).toBe('ogv');
+    });
+
+    it('derives extension from the URL suffix when source has no type', () => {
+      const source = createElement('source', { src: 'clip.webm' });
+      const video = createElement('video', {}, [source]);
+
+      const files = extractors.video(video);
+
+      expect(files[0].extension).toBe('webm');
+    });
+
+    it('falls back to the container default when source has no type and no URL suffix', () => {
+      const source = createElement('source', { src: 'stream' });
+      const video = createElement('video', {}, [source]);
+
+      const files = extractors.video(video);
+
+      expect(files[0].extension).toBe('mp4');
+    });
+
+    it('assigns correct priority to multiple sources', () => {
+      const source1 = createElement('source', { src: 'video1.mp4', type: 'video/mp4' });
+      const source2 = createElement('source', { src: 'video2.webm', type: 'video/webm' });
+      const video = createElement('video', {}, [source1, source2]);
+
+      const files = extractors.video(video);
+
+      expect(files[0].priority).toBe(1);
+      expect(files[1].priority).toBe(2);
+    });
+  });
+
+  describe('audio extractor', () => {
+    it('extracts file from audio element with src attribute', () => {
+      const audio = createElement('audio', { src: 'http://example.com/audio.mp3' });
+      const files = extractors.audio(audio);
+
+      expect(files).toHaveLength(1);
+      expect(files[0]).toMatchObject({
+        storage_url: 'http://example.com/audio.mp3',
+        preset: 'audio',
+        available: true,
+        supplementary: false,
+        thumbnail: false,
+        extension: 'mp3',
+      });
+    });
+
+    it('extracts files from audio with source children', () => {
+      const source = createElement('source', { src: 'audio.mp3', type: 'audio/mpeg' });
+      const audio = createElement('audio', {}, [source]);
+
+      const files = extractors.audio(audio);
+
+      expect(files).toHaveLength(1);
+      expect(files[0].storage_url).toMatch(/audio\.mp3$/);
+      expect(files[0].preset).toBe('audio');
+    });
+
+    it('returns empty array for audio without sources', () => {
+      const audio = createElement('audio', {});
+      const files = extractors.audio(audio);
+
+      expect(files).toHaveLength(0);
+    });
+
+    it('falls back to the container default when source has no type and no URL suffix', () => {
+      const source = createElement('source', { src: 'stream' });
+      const audio = createElement('audio', {}, [source]);
+
+      const files = extractors.audio(audio);
+
+      expect(files[0].extension).toBe('mp3');
+    });
+  });
+
+  describe('extractor exports', () => {
+    it('exports video and audio extractors', () => {
+      expect(extractors).toHaveProperty('video');
+      expect(extractors).toHaveProperty('audio');
+      expect(typeof extractors.video).toBe('function');
+      expect(typeof extractors.audio).toBe('function');
+    });
+  });
+});
diff --git a/kolibri/plugins/media_player/frontend/utils/fileExtractors.js b/kolibri/plugins/media_player/frontend/utils/fileExtractors.js
index 55d6609659c..e18efa32f25 100644
--- a/kolibri/plugins/media_player/frontend/utils/fileExtractors.js
+++ b/kolibri/plugins/media_player/frontend/utils/fileExtractors.js
@@ -2,6 +2,9 @@
  * File extractor functions for media elements (video/audio)
  */
 
+// Content presets that route to the video player (vs. the audio player).
+export const VIDEO_PRESETS = new Set(['high_res_video', 'low_res_video']);
+
 /**
  * Generate file data object for media files
  * @param {string} url - The file's storage URL
@@ -21,6 +24,27 @@ function _generateFileData(url, preset, options = {}) {
   };
 }
 
+const mimeTypeToExtensionMap = {
+  'video/mp4': 'mp4',
+  'video/webm': 'webm',
+  'audio/mpeg': 'mp3',
+};
+
+/**
+ * Derive a file extension from a URL's path suffix, ignoring query/hash.
+ * @param {string} url - The file's URL (absolute or relative)
+ * @returns {string|null} lowercased extension, or null if none is present
+ */
+function _extensionFromUrl(url) {
+  const path = url.split(/[?#]/)[0];
+  const lastSegment = path.split('/').pop();
+  const dotIndex = lastSegment.lastIndexOf('.');
+  if (dotIndex <= 0 || dotIndex === lastSegment.length - 1) {
+    return null;
+  }
+  return lastSegment.slice(dotIndex + 1).toLowerCase();
+}
+
 /**
  * Extract files from media elements (video/audio)
  * @param {HTMLMediaElement} element - Source for file extraction
@@ -28,12 +52,20 @@ function _generateFileData(url, preset, options = {}) {
  */
 function extractMediaFiles(element) {
   const files = [];
-  const preset = element.tagName.toLowerCase() === 'video' ? 'high_res_video' : 'audio';
+  const isVideo = element.tagName.toLowerCase() === 'video';
+  const preset = isVideo ? 'high_res_video' : 'audio';
+  // The container's typical extension, used when neither the type nor the URL
+  // suffix yields one.
+  const defaultExtension = isVideo ? 'mp4' : 'mp3';
   let sourceCount = 0;
 
-  // Direct src attribute
-  if (element.src) {
-    files.push(_generateFileData(element.src, preset, { priority: 1 }));
+  // Use getAttribute to read raw attribute values, since .src resolves
+  // against the document base URL which is unavailable on detached nodes.
+  const src = element.getAttribute('src');
+  if (src) {
+    // Prefer the URL suffix; fall back to the container's typical extension.
+    const extension = _extensionFromUrl(src) || defaultExtension;
+    files.push(_generateFileData(src, preset, { extension, priority: 1 }));
     sourceCount++;
   }
 
@@ -42,8 +74,15 @@ function extractMediaFiles(element) {
     const childTag = child.tagName.toLowerCase();
     const childSrc = child.getAttribute('src');
 
-    if (childTag === 'source' && child.src) {
-      files.push(_generateFileData(child.src, preset, { priority: sourceCount + 1 }));
+    if (childTag === 'source' && childSrc) {
+      // Map the MIME type first; fall back to the URL suffix for types the map
+      // doesn't cover (e.g. video/ogg) or when type is absent, then to the
+      // container default so the source type never becomes video/null.
+      const extension =
+        (child.type && mimeTypeToExtensionMap[child.type]) ||
+        _extensionFromUrl(childSrc) ||
+        defaultExtension;
+      files.push(_generateFileData(childSrc, preset, { extension, priority: sourceCount + 1 }));
       sourceCount++;
     } else if (childTag === 'track' && childSrc && !['metadata', 'chapters'].includes(child.kind)) {
       files.push(
diff --git a/kolibri/plugins/media_player/frontend/utils/mediaStrings.js b/kolibri/plugins/media_player/frontend/utils/mediaStrings.js
new file mode 100644
index 00000000000..ef32b3dadd3
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/utils/mediaStrings.js
@@ -0,0 +1,122 @@
+import { createTranslator } from 'kolibri/utils/i18n';
+
+export default createTranslator('MediaPlayerStrings', {
+  // Transport controls (shared across audio and video players)
+  play: {
+    message: 'Play',
+    context: 'Button to start media playback.',
+  },
+  pause: {
+    message: 'Pause',
+    context: 'Button to pause media playback.',
+  },
+  replay: {
+    message: 'Go back 10 seconds',
+    context: 'Button to rewind media by 10 seconds.',
+  },
+  forward: {
+    message: 'Go forward 10 seconds',
+    context: 'Button to advance media by 10 seconds.',
+  },
+  mute: {
+    message: 'Mute',
+    context: 'Button to mute media.',
+  },
+  unmute: {
+    message: 'Unmute',
+    context: 'Button to unmute media.',
+  },
+  playbackRate: {
+    message: 'Playback rate',
+    context: 'Button to change media playback speed.',
+  },
+  playbackRateWithValue: {
+    message: 'Playback rate: {rate, number}×',
+    context:
+      'Accessible label for the button that changes media playback speed, including the current speed, e.g. "Playback rate: 1.5×".',
+  },
+  playbackRateLabel: {
+    message: '{rate, number}×',
+    context: 'Label showing the current playback speed multiplier, e.g. "1.5×".',
+  },
+  progressBar: {
+    message: 'Progress bar',
+    context: 'Seek bar for navigating through the media.',
+  },
+  currentTime: {
+    message: 'Current time',
+    context: 'Indicates the current playback position in the media.',
+  },
+  durationTime: {
+    message: 'Duration time',
+    context: 'Indicates the total length of the media.',
+  },
+  loaded: {
+    message: 'Loaded',
+    context: 'Indicates the media has loaded into the player.',
+  },
+  fullscreen: {
+    message: 'Enter fullscreen',
+    context: 'Button to open the media player in fullscreen view.',
+  },
+  nonFullscreen: {
+    message: 'Exit fullscreen',
+    context: 'Button to exit the media player from fullscreen view.',
+  },
+  volumeLevel: {
+    message: 'Volume level',
+    context: 'Indicates the volume control.',
+  },
+
+  // Caption/transcript controls
+  captions: {
+    message: 'Captions',
+    context: 'Button to access subtitle/caption options in the media player.',
+  },
+  captionsOff: {
+    message: 'Captions off',
+    context: 'Option to turn off subtitles (captions) in the media player.',
+  },
+  transcriptOff: {
+    message: 'Transcript off',
+    context: 'Option to turn off the transcript.',
+  },
+  languages: {
+    message: 'Languages',
+    context: 'Button to access language options for media captions.',
+  },
+
+  // Transcript toggle (AudioPlayer) — display casing is applied via CSS text-transform
+  showTranscript: {
+    message: 'Show transcript',
+    context: 'Button to display the transcript panel.',
+  },
+  hideTranscript: {
+    message: 'Hide transcript',
+    context: 'Button to hide the transcript panel.',
+  },
+
+  // Error messages (used in video.js config)
+  networkError: {
+    message: 'A network error caused the media download to fail part-way',
+    context: 'Error message displayed when a media download fails due to a network error.',
+  },
+  formatError: {
+    message:
+      'The media could not be loaded, either because the server or network failed or because the format is not supported',
+    context: 'Error message displayed when a media file cannot be loaded.',
+  },
+  corruptionOrSupportError: {
+    message:
+      'The media playback was aborted due to a corruption problem or because the media used features your browser did not support',
+    context: 'Error message displayed when media playback is aborted.',
+  },
+  sourceError: {
+    message: 'No compatible source was found for this media',
+    context: 'Error message displayed when no compatible media source is found.',
+  },
+  encryptionError: {
+    message: 'The media is encrypted and we do not have the keys to decrypt it',
+    context: 'Error message displayed when encrypted media cannot be decrypted.',
+  },
+});

From 2150bd4266cefe298ccea21b68408b53da52d735 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Sat, 18 Jul 2026 14:05:37 -0700
Subject: [PATCH 2/4] Add media player composables

Replace the Vuex store module with instance-scoped composables:
useMediaPlayer owns player lifecycle and state, composing useCaptions,
useMediaProgress, and useScrollContainer; useSeekBar derives scrub-bar
state. useMediaProgress isolates the shared progress-tracking logic so
video and audio report progress identically. Add a videojs mock and a
useMediaPlayer manual mock for testing consumers.
---
 .../composables/__tests__/useCaptions.spec.js | 135 +++++
 .../__tests__/useMediaProgress.spec.js        | 214 +++++++
 .../frontend/composables/useCaptions.js       | 290 ++++++++++
 .../frontend/composables/useMediaPlayer.js    | 532 ++++++++++++++++++
 .../frontend/composables/useMediaProgress.js  | 115 ++++
 .../frontend/composables/useSeekBar.js        | 156 +++++
 .../media_player/frontend/test/videojsMock.js | 268 +++++++++
 .../components/NumericKeypad/index.vue        |   6 +-
 .../__tests__/useScrollContainer.spec.js      |  29 +-
 .../composables/useScrollContainer.js         | 101 ++--
 10 files changed, 1783 insertions(+), 63 deletions(-)
 create mode 100644 kolibri/plugins/media_player/frontend/composables/__tests__/useCaptions.spec.js
 create mode 100644 kolibri/plugins/media_player/frontend/composables/__tests__/useMediaProgress.spec.js
 create mode 100644 kolibri/plugins/media_player/frontend/composables/useCaptions.js
 create mode 100644 kolibri/plugins/media_player/frontend/composables/useMediaPlayer.js
 create mode 100644 kolibri/plugins/media_player/frontend/composables/useMediaProgress.js
 create mode 100644 kolibri/plugins/media_player/frontend/composables/useSeekBar.js
 create mode 100644 kolibri/plugins/media_player/frontend/test/videojsMock.js

diff --git a/kolibri/plugins/media_player/frontend/composables/__tests__/useCaptions.spec.js b/kolibri/plugins/media_player/frontend/composables/__tests__/useCaptions.spec.js
new file mode 100644
index 00000000000..767dd5dc52a
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/composables/__tests__/useCaptions.spec.js
@@ -0,0 +1,135 @@
+import { ref } from 'vue';
+
+jest.mock('video.js', () => require('../../test/videojsMock').videojsModuleMock());
+
+/* eslint-disable import-x/first */
+import useCaptions from '../useCaptions';
+import Settings from '../../utils/settings';
+import { createTrack, createFakePlayer } from '../../test/videojsMock';
+/* eslint-enable import-x/first */
+
+function createCaptions() {
+  return useCaptions(ref(createFakePlayer()));
+}
+
+describe('useCaptions', () => {
+  beforeEach(() => {
+    // Settings persists via Lockr → localStorage; isolate each test.
+    window.localStorage.clear();
+  });
+
+  it('loads default caption settings (subtitles on, transcript off)', () => {
+    const captions = createCaptions();
+    expect(captions.subtitles.value).toBe(true);
+    expect(captions.transcript.value).toBe(false);
+  });
+
+  it('enables the track matching the active language and exposes its cues', () => {
+    const captions = createCaptions();
+    captions.setLanguage('en');
+
+    const enCues = [{}, {}];
+    const en = createTrack({ language: 'en', cues: enCues, activeCues: [enCues[0]] });
+    const es = createTrack({ language: 'es', cues: [{}] });
+    captions.setTrackList([en, es]);
+
+    expect(en.mode).toBe('showing');
+    expect(es.mode).toBe('disabled');
+    expect(captions.cues.value).toHaveLength(2);
+    expect(captions.activeCueIds.value).toEqual(['en-cue-0']);
+  });
+
+  it('persists caption preferences when toggled', () => {
+    const captions = createCaptions();
+    captions.toggleSubtitles();
+
+    expect(captions.subtitles.value).toBe(false);
+    expect(new Settings().captionSubtitles).toBe(false);
+  });
+
+  it('toggleTranscript flips transcript state', () => {
+    const captions = createCaptions();
+    captions.toggleTranscript();
+    expect(captions.transcript.value).toBe(true);
+  });
+
+  it('setLanguage switches the active caption track', () => {
+    const captions = createCaptions();
+    const en = createTrack({ language: 'en', cues: [{}, {}] });
+    const es = createTrack({ language: 'es', cues: [{}] });
+    captions.setLanguage('en');
+    captions.setTrackList([en, es]);
+
+    captions.setLanguage('es');
+
+    expect(captions.language.value).toBe('es');
+    expect(es.mode).toBe('showing');
+    expect(en.mode).toBe('disabled');
+    expect(captions.cues.value).toHaveLength(1);
+  });
+
+  it('picks up cues that load after a language switch', () => {
+    const captions = createCaptions();
+    const en = createTrack({ language: 'en', cues: [{}, {}] });
+    // Tracks are fetched lazily, so a track only enabled later starts empty.
+    const es = createTrack({ language: 'es' });
+    captions.setLanguage('en');
+    captions.setTrackList([en, es]);
+
+    captions.setLanguage('es');
+    expect(captions.cues.value).toEqual([]);
+
+    // The VTT finishes parsing after the switch: addCue is the only signal.
+    es.cues = [{}];
+    es.addCue({});
+
+    expect(captions.cues.value).toHaveLength(1);
+  });
+
+  it('initCaptionState disables captions when no track matches the language', () => {
+    const captions = createCaptions();
+    captions.setLanguage('fr'); // no track for fr
+    captions.setTrackList([createTrack({ language: 'en', cues: [{}] })]);
+
+    captions.initCaptionState();
+
+    expect(captions.subtitles.value).toBe(false);
+    expect(captions.transcript.value).toBe(false);
+  });
+
+  it('isDefaultTrack compares by short language code', () => {
+    const captions = createCaptions();
+    captions.setLanguage('en');
+    expect(captions.isDefaultTrack('en')).toBe(true);
+    expect(captions.isDefaultTrack('es')).toBe(false);
+  });
+
+  it('resetState clears cue state', () => {
+    const captions = createCaptions();
+    captions.setLanguage('en');
+    captions.setTrackList([createTrack({ language: 'en', cues: [{}, {}] })]);
+    expect(captions.cues.value.length).toBeGreaterThan(0);
+
+    captions.resetState();
+
+    expect(captions.cues.value).toEqual([]);
+    expect(captions.activeCueIds.value).toEqual([]);
+  });
+
+  it('resetState detaches cuechange listeners so later track events are ignored', () => {
+    const captions = createCaptions();
+    captions.setLanguage('en');
+    const cues = [{}, {}];
+    const en = createTrack({ language: 'en', cues, activeCues: [cues[0]] });
+    captions.setTrackList([en]);
+    expect(captions.activeCueIds.value).toEqual(['en-cue-0']);
+
+    captions.resetState();
+    expect(captions.activeCueIds.value).toEqual([]);
+
+    // A cuechange fired after teardown must not repopulate active cues.
+    en.activeCues = [cues[1]];
+    en.trigger('cuechange');
+    expect(captions.activeCueIds.value).toEqual([]);
+  });
+});
diff --git a/kolibri/plugins/media_player/frontend/composables/__tests__/useMediaProgress.spec.js b/kolibri/plugins/media_player/frontend/composables/__tests__/useMediaProgress.spec.js
new file mode 100644
index 00000000000..aefe7bb0bb5
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/composables/__tests__/useMediaProgress.spec.js
@@ -0,0 +1,214 @@
+import { ref, computed } from 'vue';
+import useMediaProgress from '../useMediaProgress';
+import { createFakePlayer } from '../../test/videojsMock';
+
+function createMockPlayer({ duration = 100, ...state } = {}) {
+  return ref(createFakePlayer({ duration, ...state }));
+}
+
+function setup(overrides = {}) {
+  const emit = jest.fn();
+  const player = overrides.player || createMockPlayer(overrides.playerState);
+  const extraFields = overrides.extraFields || ref(null);
+  const savedLocation =
+    overrides.savedLocation ||
+    computed(() => {
+      if (extraFields.value && extraFields.value.contentState) {
+        return extraFields.value.contentState.savedLocation;
+      }
+      return 0;
+    });
+
+  const result = useMediaProgress({
+    player,
+    emit,
+    forceDurationBasedProgress: overrides.forceDurationBasedProgress || ref(false),
+    durationBasedProgress: overrides.durationBasedProgress || ref(0),
+    extraFields,
+    savedLocation,
+  });
+
+  return { emit, player, ...result };
+}
+
+describe('useMediaProgress', () => {
+  describe('recordProgress', () => {
+    it('reports the absolute durationBasedProgress and ignores elapsed time when forced', () => {
+      const timeSpent = 30;
+      const contentDuration = 300;
+      const player = createMockPlayer({ duration: 100, currentTime: 0 });
+      const { emit, updateTime } = setup({
+        player,
+        forceDurationBasedProgress: ref(true),
+        durationBasedProgress: ref(timeSpent / contentDuration),
+      });
+
+      player.value.currentTime(50);
+      updateTime();
+
+      expect(emit).toHaveBeenCalledWith('updateProgress', timeSpent / contentDuration);
+      expect(emit).not.toHaveBeenCalledWith('addProgress', expect.anything());
+    });
+
+    it('emits addProgress as the fraction of duration newly elapsed since the last record', () => {
+      const player = createMockPlayer({ duration: 100, currentTime: 0 });
+      const { emit, updateTime } = setup({ player });
+
+      player.value.currentTime(30);
+      updateTime();
+      player.value.currentTime(50);
+      updateTime();
+
+      expect(emit.mock.calls).toEqual([
+        ['addProgress', 0.3],
+        ['addProgress', 0.2],
+      ]);
+    });
+  });
+
+  describe('updateTime', () => {
+    it('updates dummyTime from player currentTime', () => {
+      const player = createMockPlayer({ currentTime: 3 });
+      const { emit, updateTime } = setup({ player });
+
+      updateTime();
+
+      // 3 seconds elapsed, but less than 5s threshold — no progress emitted
+      expect(emit).not.toHaveBeenCalled();
+    });
+
+    it('records progress once playback crosses the 5 second threshold', () => {
+      const player = createMockPlayer({ duration: 100, currentTime: 6 });
+      const { emit, updateTime } = setup({ player });
+
+      updateTime();
+
+      expect(emit).toHaveBeenCalledWith('addProgress', 0.06);
+    });
+
+    it('does not re-record until another 5 seconds have elapsed', () => {
+      const player = createMockPlayer({ duration: 100, currentTime: 6 });
+      const { emit, updateTime } = setup({ player });
+
+      updateTime();
+      emit.mockClear();
+
+      player.value.currentTime(9);
+      updateTime();
+      expect(emit).not.toHaveBeenCalled();
+
+      player.value.currentTime(11);
+      updateTime();
+      expect(emit).toHaveBeenCalledWith('addProgress', 0.05);
+    });
+
+    it('skips update while seeking', () => {
+      const player = createMockPlayer({ currentTime: 50, seeking: true });
+      const { emit, updateTime } = setup({ player });
+
+      updateTime();
+
+      expect(emit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('handleSeek', () => {
+    it('flushes sub-threshold progress before a seek and rebaselines after it', () => {
+      const player = createMockPlayer({ duration: 100, currentTime: 0 });
+      const { emit, updateTime, handleSeek } = setup({ player });
+
+      player.value.currentTime(3);
+      updateTime();
+      expect(emit).not.toHaveBeenCalled();
+
+      player.value.currentTime(80);
+      handleSeek();
+      expect(emit).toHaveBeenCalledWith('addProgress', 0.03);
+
+      emit.mockClear();
+      player.value.currentTime(85);
+      updateTime();
+      expect(emit).toHaveBeenCalledWith('addProgress', 0.05);
+    });
+  });
+
+  describe('setPlayState', () => {
+    it('emits startTracking when state is true', () => {
+      const player = createMockPlayer();
+      const { emit, setPlayState } = setup({ player });
+
+      setPlayState(true);
+
+      expect(emit).toHaveBeenCalledWith('startTracking');
+    });
+
+    it('emits stopTracking when state is false', () => {
+      const player = createMockPlayer();
+      const { emit, setPlayState } = setup({ player });
+
+      setPlayState(false);
+
+      expect(emit).toHaveBeenCalledWith('stopTracking');
+    });
+
+    it('records progress before changing state', () => {
+      const player = createMockPlayer({ duration: 100 });
+      const { emit, setPlayState } = setup({
+        player,
+        forceDurationBasedProgress: ref(true),
+        durationBasedProgress: ref(0.5),
+      });
+
+      setPlayState(true);
+
+      // recordProgress should be called before startTracking
+      const calls = emit.mock.calls.map(c => c[0]);
+      expect(calls.indexOf('updateProgress')).toBeLessThan(calls.indexOf('startTracking'));
+    });
+
+    it('skips recording progress while seeking', () => {
+      const player = createMockPlayer({ seeking: true });
+      const { emit, setPlayState } = setup({ player });
+
+      setPlayState(true);
+
+      // Only startTracking, no progress recording
+      expect(emit).toHaveBeenCalledTimes(1);
+      expect(emit).toHaveBeenCalledWith('startTracking');
+    });
+  });
+
+  describe('updateContentState', () => {
+    it('emits updateContentState with saved location', () => {
+      const player = createMockPlayer({ currentTime: 42 });
+      const { emit, updateContentState } = setup({ player });
+
+      updateContentState();
+
+      expect(emit).toHaveBeenCalledWith('updateContentState', { savedLocation: 42 });
+    });
+
+    it('preserves existing contentState fields', () => {
+      const player = createMockPlayer({ currentTime: 42 });
+      const { emit, updateContentState } = setup({
+        player,
+        extraFields: ref({ contentState: { someField: 'value', savedLocation: 10 } }),
+      });
+
+      updateContentState();
+
+      expect(emit).toHaveBeenCalledWith('updateContentState', {
+        someField: 'value',
+        savedLocation: 42,
+      });
+    });
+
+    it('does nothing when player is null', () => {
+      const { emit, updateContentState } = setup({ player: ref(null) });
+
+      updateContentState();
+
+      expect(emit).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/kolibri/plugins/media_player/frontend/composables/useCaptions.js b/kolibri/plugins/media_player/frontend/composables/useCaptions.js
new file mode 100644
index 00000000000..a3ae2d7a87c
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/composables/useCaptions.js
@@ -0,0 +1,290 @@
+import vue, { ref, computed } from 'vue';
+import videojs from 'video.js';
+import { languageIdToCode } from 'kolibri/utils/i18n';
+import trackUtils from '../utils/track';
+import Settings from '../utils/settings';
+
+const { handleSelectedLanguageChange } = videojs.getComponent('TextTrackMenuItem').prototype;
+
+/**
+ * Default caption settings.
+ * @returns {{captionLanguage: string, captionSubtitles: boolean, captionTranscript: boolean}}
+ */
+const defaultSettings = () => ({
+  captionLanguage: vue.locale,
+  captionSubtitles: true,
+  captionTranscript: false,
+});
+
+/**
+ * Composable for caption / text-track state and behavior: the active language,
+ * subtitles vs. transcript, cue tracking, and synchronization with the video.js
+ * text-track API. Caption preferences persist to localStorage.
+ *
+ * The player-driven lifecycle methods (setTrackList, updateTrackList,
+ * initCaptionState, resetState) are called by useMediaPlayer as the player
+ * emits its track events.
+ * @param {import('vue').Ref} player - Ref to the video.js player instance
+ * @returns {object} Caption state, actions, and lifecycle hooks:
+ *   - language {Ref<string>} - Current caption language
+ *   - subtitles {Ref<boolean>} - Whether subtitles are enabled
+ *   - transcript {Ref<boolean>} - Whether transcript is enabled
+ *   - cues {Ref<Array>} - Caption cues for the current language
+ *   - activeCueIds {Ref<Array>} - Currently active cue IDs
+ *   - captionTracks {ComputedRef<Array>} - Available caption tracks
+ *   - setLanguage {Function} - Set the caption language
+ *   - toggleSubtitles {Function} - Toggle subtitles on/off
+ *   - toggleTranscript {Function} - Toggle transcript on/off
+ *   - isDefaultTrack {Function} - Check if a language is the default track
+ *   - setTrackList {Function} - Bind a new text-track list
+ *   - updateTrackList {Function} - Reconcile a changed text-track list
+ *   - initCaptionState {Function} - Disable captions with no matching track
+ *   - resetState {Function} - Clear cue state
+ */
+export default function useCaptions(player) {
+  const language = ref(null);
+  const subtitles = ref(true);
+  const transcript = ref(false);
+  const trackList = ref(null);
+  const cues = ref([]);
+  const activeCueIds = ref([]);
+  // Plain array (not a ref): used only imperatively, never exposed reactively.
+  let trackListeners = [];
+
+  // Caption settings (persisted to localStorage)
+  const captionSettings = new Settings(defaultSettings());
+  language.value = captionSettings.captionLanguage;
+  subtitles.value = captionSettings.captionSubtitles;
+  transcript.value = captionSettings.captionTranscript;
+
+  const captionTracks = computed(() => tracks());
+
+  function tracks() {
+    return trackUtils.listToArray(trackList.value || []);
+  }
+
+  function activeTrack() {
+    return tracks().find(track => trackUtils.isEnabled(track));
+  }
+
+  function languageTrack() {
+    return tracks().find(track => language.value === track.language);
+  }
+
+  function setCuesFromTrack(track) {
+    const newCues = trackUtils.listToArray(track.cues || []);
+    // Ensure cues have ids
+    newCues.forEach((cue, i) => {
+      cue.id = track.id + '-cue-' + i;
+    });
+
+    cues.value = newCues;
+  }
+
+  function setActiveCuesFromTrack(track) {
+    // In case we get triggered to set active cues but haven't added cues yet, do that now
+    // This helps an issue in Safari where we don't get an updated cue list
+    if (track.cues && track.cues.length !== cues.value.length) {
+      setCuesFromTrack(track);
+    }
+
+    activeCueIds.value = trackUtils
+      .listToArray(track.activeCues || [])
+      .map(cue => cue.id)
+      .filter(Boolean);
+  }
+
+  function synchronizeTrackList() {
+    captionSettings.save({
+      captionSubtitles: subtitles.value,
+      captionTranscript: transcript.value,
+    });
+
+    tracks().forEach(track => {
+      if (track.language === language.value) {
+        trackUtils.setMode(track, subtitles.value || transcript.value, !subtitles.value);
+      } else {
+        trackUtils.setMode(track, false);
+      }
+
+      if (trackUtils.isEnabled(track)) {
+        setCuesFromTrack(track);
+        setActiveCuesFromTrack(track);
+        setLanguage(track.language);
+      }
+    });
+  }
+
+  function checkLanguageTrack() {
+    let newLanguage;
+
+    // When we enable either subtitles or transcript, ensure we have appropriate language track
+    if ((subtitles.value || transcript.value) && !languageTrack()) {
+      if (activeTrack()) {
+        newLanguage = activeTrack().language;
+      } else {
+        // Just use language of first track as fallback
+        const tl = tracks();
+        if (tl.length > 0) {
+          newLanguage = tl[0].language;
+        }
+      }
+    }
+
+    if (newLanguage && newLanguage !== language.value) {
+      language.value = newLanguage;
+    }
+  }
+
+  function initCaptionState() {
+    // If no track for saved language, disable subtitles and transcript
+    if (!languageTrack()) {
+      subtitles.value = false;
+      transcript.value = false;
+    }
+  }
+
+  // Detach the cuechange listeners recorded in setTrackList. Idempotent and a
+  // no-op when none are registered, so it is safe to call from both a track-list
+  // swap and resetState.
+  function removeTrackListeners() {
+    const ts = tracks();
+    trackListeners.forEach(({ trackId, event, listener }) => {
+      const track = ts.find(t => t.id === trackId);
+      if (track) {
+        track.removeEventListener(event, listener);
+      }
+    });
+    trackListeners = [];
+  }
+
+  function setTrackList(newTrackList) {
+    removeTrackListeners();
+
+    trackList.value = newTrackList;
+    synchronizeTrackList();
+
+    tracks().forEach(track => {
+      const changeListener = () => {
+        if (trackUtils.isEnabled(track)) {
+          setActiveCuesFromTrack(track);
+        }
+      };
+      track.addEventListener('cuechange', changeListener);
+      trackListeners.push({
+        trackId: track.id,
+        event: 'cuechange',
+        listener: changeListener,
+      });
+
+      if (track.addCue.overridden) {
+        return;
+      }
+
+      // Override `addCue` method to hook into the addition of cues
+      const addCue = track.addCue.bind(track);
+      track.addCue = (...args) => {
+        const result = addCue(...args);
+
+        if (track.language == language.value) {
+          setCuesFromTrack(track);
+          setActiveCuesFromTrack(track);
+        }
+
+        return result;
+      };
+      track.addCue.overridden = true;
+    });
+  }
+
+  function updateTrackList(newTrackList) {
+    if (trackList.value.length !== newTrackList.length) {
+      return setTrackList(newTrackList);
+    }
+
+    trackList.value = newTrackList;
+    synchronizeTrackList();
+  }
+
+  // Public action: Set caption language
+  function setLanguage(newLanguage) {
+    if (language.value === newLanguage) {
+      return;
+    }
+
+    language.value = newLanguage;
+
+    captionSettings.captionLanguage = newLanguage;
+    synchronizeTrackList();
+
+    // When changing language, and there is no format enabled, enable subtitles
+    if (!subtitles.value && !transcript.value) {
+      toggleSubtitles();
+    }
+
+    const track = activeTrack();
+    if (!track) {
+      return;
+    }
+
+    // Retain video.js behavior on language change,
+    // see TextTrackMenuItem.handleSelectedLanguageChange
+    if (player.value) {
+      handleSelectedLanguageChange.call({
+        track,
+        player_: player.value,
+      });
+    }
+  }
+
+  // Public action: Toggle subtitles
+  function toggleSubtitles() {
+    subtitles.value = !subtitles.value;
+    checkLanguageTrack();
+    synchronizeTrackList();
+  }
+
+  // Public action: Toggle transcript
+  function toggleTranscript() {
+    transcript.value = !transcript.value;
+    checkLanguageTrack();
+    synchronizeTrackList();
+  }
+
+  function isDefaultTrack(langCode) {
+    if (!language.value) {
+      return false;
+    }
+    const shortLangCode = languageIdToCode(langCode);
+    const shortGlobalLangCode = languageIdToCode(language.value);
+    return shortLangCode === shortGlobalLangCode;
+  }
+
+  function resetState() {
+    removeTrackListeners();
+    cues.value = [];
+    activeCueIds.value = [];
+  }
+
+  return {
+    // State
+    language,
+    subtitles,
+    transcript,
+    cues,
+    activeCueIds,
+    captionTracks,
+
+    // Actions
+    setLanguage,
+    toggleSubtitles,
+    toggleTranscript,
+    isDefaultTrack,
+
+    // Player-driven lifecycle
+    setTrackList,
+    updateTrackList,
+    initCaptionState,
+    resetState,
+  };
+}
diff --git a/kolibri/plugins/media_player/frontend/composables/useMediaPlayer.js b/kolibri/plugins/media_player/frontend/composables/useMediaPlayer.js
new file mode 100644
index 00000000000..c38941504e0
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/composables/useMediaPlayer.js
@@ -0,0 +1,532 @@
+import {
+  ref,
+  computed,
+  provide,
+  inject,
+  readonly,
+  markRaw,
+  onBeforeUnmount,
+  onMounted,
+  watch,
+  nextTick,
+} from 'vue';
+import videojs from 'video.js';
+import mapValues from 'lodash/mapValues';
+import { useIntervalFn, useThrottleFn } from '@vueuse/core';
+import useContentViewer from 'kolibri/composables/useContentViewer';
+import useScrollContainer from 'kolibri-common/composables/useScrollContainer';
+import Settings from '../utils/settings';
+import customExtractors from '../utils/fileExtractors';
+import useMediaProgress from './useMediaProgress';
+import useCaptions from './useCaptions';
+
+const MEDIA_PLAYER_CONTEXT_KEY = 'mediaPlayerContext';
+
+/**
+ * Available playback rate options for audio/video players
+ */
+export const PLAYBACK_RATES = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0];
+
+/**
+ * Composable for managing media player state, progress tracking, and content viewer integration.
+ * Creates instance-specific state that can be safely used with multiple players.
+ *
+ * This composable integrates useContentViewer internally, so components using it
+ * do not need to call useContentViewer separately.
+ * @param {object} context - Vue component context ({ emit })
+ * @param {object} options - Configuration options
+ * @param {import('vue').Ref} [options.rootEl] - Root element ref for scroll container detection
+ * @param {import('vue').Ref} options.wrapperRef - Wrapper element ref for first-interaction play
+ * @param {import('vue').Ref} options.playerRef - The <video>/<audio> element ref for videojs.
+ * Its parent element must be keyed on the source url: video.js removes the tag
+ * it wrapped when the player is disposed, so re-init needs a fresh one.
+ * @param {Function} options.getPlayerConfig - Returns the videojs config object; called
+ * at init time so it can read component-specific state
+ * @param {Function} [options.onReady] - Callback after player is ready,
+ * for component-specific setup
+ * @returns {object} Media player API for the parent component. Playback state is
+ * returned as raw refs here; descendants get readonly copies (see injectMediaPlayer):
+ *   - player {Ref} - The video.js player instance, null until ready
+ *   - defaultFile {ComputedRef} - The primary media file
+ *   - files {ComputedRef<Array>} - All files for the content node
+ *   - supplementaryFiles {ComputedRef<Array>} - Non-primary files (e.g. VTT tracks)
+ *   - thumbnailFiles {ComputedRef<Array>} - Thumbnail files
+ *   - extraFields {Ref<object>} - Content session extra fields, including contentState
+ *   - embedded {Ref<boolean>} - Whether the player is embedded (suppresses autoplay)
+ *   - captionTracks {ComputedRef<Array>} - Available caption tracks
+ *   - transcript {Readonly<Ref<boolean>>} - Whether the transcript is shown
+ *   - toggleTranscript {Function} - Toggle the transcript on/off
+ *   - trackSources {ComputedRef<Array>} - VTT files to render as <track> sources
+ *   - isDefaultTrack {Function} - Check if a language is the default track
+ *   - loading {Ref<boolean>} - True until the player is ready
+ *   - currentTime {Ref<number>} - Playback position in seconds
+ *   - duration {Ref<number>} - Media duration in seconds
+ *   - isPlaying {Ref<boolean>} - Whether playback is running
+ *   - volume {Ref<number>} - Volume, 0-1
+ *   - muted {Ref<boolean>} - Whether audio is muted
+ *   - playbackRate {Ref<number>} - Playback speed multiplier
+ *   - isBuffering {Ref<boolean>} - Whether playback is stalled buffering
+ *   - togglePlay {Function} - Play if paused, pause if playing
+ *   - seek {Function} - Seek to a position in seconds
+ *   - rewind {Function} - Seek backwards (default 10s)
+ *   - forward {Function} - Seek forwards (default 10s)
+ *   - setVolume {Function} - Set volume, 0-1
+ *   - toggleMute {Function} - Toggle mute
+ *   - setPlaybackRate {Function} - Set the playback speed multiplier
+ */
+export default function useMediaPlayer(
+  context,
+  { rootEl, wrapperRef, playerRef, getPlayerConfig, onReady } = {},
+) {
+  // ---- Player state ----
+
+  const player = ref(null);
+
+  // ---- Caption state and behavior ----
+
+  // Caption/text-track logic lives in useCaptions; useMediaPlayer drives its
+  // player-facing lifecycle hooks (setTrackList/updateTrackList/initCaptionState)
+  // from the video.js track events below.
+  const captions = useCaptions(player);
+  const {
+    language,
+    subtitles,
+    transcript,
+    cues,
+    activeCueIds,
+    captionTracks,
+    setLanguage,
+    toggleSubtitles,
+    toggleTranscript,
+    isDefaultTrack,
+  } = captions;
+
+  // ---- Playback state - reactive refs driven by video.js events ----
+
+  const currentTime = ref(0);
+  const duration = ref(0);
+  const isPlaying = ref(false);
+  const volume = ref(1.0);
+  const muted = ref(false);
+  const playbackRate = ref(1.0);
+  const isBuffering = ref(false);
+
+  // ---- Loading state ----
+
+  const loading = ref(true);
+
+  // Player settings (volume, mute, rate — persisted to localStorage)
+  const playerSettings = new Settings({
+    playerVolume: 1.0,
+    playerMuted: false,
+    playerRate: 1.0,
+  });
+
+  // ---- Content viewer integration ----
+
+  // useContentViewer provides file resolution, progress reporting helpers,
+  // and content state management. The defaultDuration is derived from the
+  // player instance so it updates as media loads.
+  const contentViewer = useContentViewer(context, {
+    defaultDuration: computed(() => player.value?.duration()),
+    customExtractors,
+  });
+
+  const {
+    defaultFile,
+    files,
+    supplementaryFiles,
+    thumbnailFiles,
+    extraFields,
+    forceDurationBasedProgress,
+    durationBasedProgress,
+    reportLoadingError,
+    embedded,
+  } = contentViewer;
+
+  // ---- Computed values ----
+
+  const savedLocation = computed(() => extraFields.value?.contentState?.savedLocation ?? 0);
+
+  const trackSources = computed(() => {
+    return supplementaryFiles.value.filter(file => file.extension === 'vtt');
+  });
+
+  // Scroll container rect - computed from the root element's scroll ancestor
+  const { containerRect } = rootEl
+    ? useScrollContainer(rootEl)
+    : { containerRect: ref({ top: 0, bottom: 0, left: 0, width: 0 }) };
+
+  // ---- Playback state binding ----
+
+  // Bind video.js events: keep reactive state refs in sync, drive progress
+  // tracking, and persist setting changes.
+  function bindPlaybackEvents(vjsPlayer) {
+    vjsPlayer.on('timeupdate', () => {
+      currentTime.value = vjsPlayer.currentTime();
+      updateTime();
+    });
+    vjsPlayer.on('durationchange', () => {
+      duration.value = vjsPlayer.duration();
+    });
+    vjsPlayer.on('play', () => {
+      isPlaying.value = true;
+      setPlayState(true);
+    });
+    vjsPlayer.on('pause', () => {
+      isPlaying.value = false;
+      setPlayState(false);
+      updateContentState();
+    });
+    vjsPlayer.on('ended', () => {
+      isPlaying.value = false;
+      setPlayState(false);
+      context.emit('finished');
+    });
+    vjsPlayer.on('volumechange', () => {
+      volume.value = vjsPlayer.volume();
+      muted.value = vjsPlayer.muted();
+      throttledUpdateVolume();
+    });
+    vjsPlayer.on('ratechange', () => {
+      playbackRate.value = vjsPlayer.playbackRate();
+      updateRateSetting();
+    });
+    vjsPlayer.on('waiting', () => {
+      isBuffering.value = true;
+    });
+    vjsPlayer.on('playing', () => {
+      isBuffering.value = false;
+    });
+    vjsPlayer.on('seeking', handleSeek);
+    vjsPlayer.on('error', reportLoadingError);
+  }
+
+  // ---- Playback actions ----
+
+  function togglePlay() {
+    if (!player.value) return;
+    if (player.value.paused()) {
+      player.value.play();
+    } else {
+      player.value.pause();
+    }
+  }
+
+  function seek(time) {
+    if (!player.value) return;
+    player.value.currentTime(time);
+  }
+
+  function rewind(seconds = 10) {
+    if (!player.value) return;
+    player.value.currentTime(Math.max(0, player.value.currentTime() - seconds));
+  }
+
+  function forward(seconds = 10) {
+    if (!player.value) return;
+    player.value.currentTime(
+      Math.min(player.value.duration(), player.value.currentTime() + seconds),
+    );
+  }
+
+  function setVolume(val) {
+    if (!player.value) return;
+    player.value.volume(val);
+  }
+
+  function toggleMute() {
+    if (!player.value) return;
+    player.value.muted(!player.value.muted());
+  }
+
+  function setPlaybackRate(rate) {
+    if (!player.value) return;
+    player.value.playbackRate(rate);
+  }
+
+  // ---- Progress tracking ----
+
+  const { updateContentState, updateTime, handleSeek, setPlayState } = useMediaProgress({
+    player,
+    emit: context.emit,
+    forceDurationBasedProgress,
+    durationBasedProgress,
+    extraFields,
+    savedLocation,
+  });
+
+  // Periodic content-state persistence. useIntervalFn manages a single timer:
+  // resume() restarts it (clearing any prior timer, so re-init can't stack
+  // intervals) and it is auto-disposed when the component's scope unmounts.
+  const { pause: pauseContentStateSync, resume: resumeContentStateSync } = useIntervalFn(
+    updateContentState,
+    30000,
+    { immediate: false },
+  );
+
+  // ---- Settings persistence ----
+
+  function updateVolumeSetting() {
+    if (!player.value) return;
+    playerSettings.playerVolume = player.value.volume();
+    playerSettings.playerMuted = player.value.muted();
+  }
+
+  const throttledUpdateVolume = useThrottleFn(updateVolumeSetting, 1000);
+
+  function updateRateSetting() {
+    if (!player.value) return;
+    playerSettings.playerRate = player.value.playbackRate();
+  }
+
+  function useSavedSettings() {
+    player.value.volume(playerSettings.playerVolume);
+    player.value.muted(playerSettings.playerMuted);
+    player.value.playbackRate(playerSettings.playerRate);
+  }
+
+  // ---- Autoplay / first-interaction ----
+
+  function playOnFirstInteraction() {
+    wrapperRef.value.addEventListener(
+      'click',
+      () => {
+        player.value.play();
+      },
+      { once: true },
+    );
+  }
+
+  // ---- Player lifecycle ----
+
+  /**
+   * Called by videojs when the player is ready. Seeks to the saved location,
+   * attempts autoplay (or sets up first-interaction fallback), applies
+   * persisted settings, and invokes the optional onReady callback for
+   * component-specific setup.
+   */
+  function handleReadyPlayer() {
+    const startTime = savedLocation.value >= player.value.duration() ? 0 : savedLocation.value;
+    player.value.currentTime(startTime);
+
+    if (embedded.value) {
+      // When embedded, don't attempt autoplay — play on first interaction
+      playOnFirstInteraction();
+    } else {
+      // Attempt autoplay; if browser blocks it, fall back to play on first interaction
+      const playPromise = player.value.play();
+      if (playPromise !== undefined) {
+        playPromise.catch(() => {
+          playOnFirstInteraction();
+        });
+      }
+    }
+
+    useSavedSettings();
+    loading.value = false;
+    playerRef.value.tabIndex = -1;
+    resumeContentStateSync();
+
+    if (onReady) {
+      onReady();
+    }
+  }
+
+  // Create and initialize a videojs player instance. options.getPlayerConfig
+  // is a function (not a value) because the config references component-specific
+  // state that must be read at creation time.
+  function initPlayer() {
+    if (!defaultFile.value?.storage_url) {
+      return;
+    }
+    nextTick(() => {
+      // Dispose any existing player first so the re-init path starts from clean
+      // state. The element itself is not reused: consumers key the media
+      // element's parent on the source, so this runs against the old, already
+      // detached tag.
+      resetState();
+      const vjsPlayer = videojs(playerRef.value, getPlayerConfig(), handleReadyPlayer);
+      setPlayer(vjsPlayer);
+    });
+  }
+
+  // Public action: Initialize player
+  function setPlayer(vjsPlayer) {
+    if (!vjsPlayer) {
+      return;
+    }
+
+    vjsPlayer.one('loadstart', () => {
+      captions.setTrackList(vjsPlayer.textTracks());
+
+      const onTrackChange = () => {
+        captions.updateTrackList(vjsPlayer.textTracks());
+      };
+      vjsPlayer.on('texttrackchange', onTrackChange);
+      vjsPlayer.on('dispose', () => vjsPlayer.off('texttrackchange', onTrackChange));
+    });
+
+    vjsPlayer.one('loadedmetadata', () => {
+      captions.initCaptionState();
+    });
+
+    bindPlaybackEvents(vjsPlayer);
+    // markRaw so Vue never proxies the video.js player: it is a live stateful
+    // object, not reactive data, and a reactive/readonly proxy blocks its
+    // internal writes. The ref itself stays reactive for null->instance changes.
+    player.value = markRaw(vjsPlayer);
+  }
+
+  // Public action: Cleanup and reset
+  function resetState() {
+    pauseContentStateSync();
+    if (player.value) {
+      player.value.dispose();
+      player.value = null;
+    }
+
+    captions.resetState();
+    currentTime.value = 0;
+    duration.value = 0;
+    isPlaying.value = false;
+    volume.value = 1.0;
+    muted.value = false;
+    playbackRate.value = 1.0;
+    isBuffering.value = false;
+  }
+
+  // ---- Player init lifecycle ----
+
+  // Own the init lifecycle here rather than duplicating it in every consuming
+  // component: initialize on mount, and re-initialize when the source file
+  // changes (same instance, different content).
+  onMounted(initPlayer);
+  watch(defaultFile, (newVal, oldVal) => {
+    if (newVal?.storage_url !== oldVal?.storage_url) {
+      initPlayer();
+    }
+  });
+
+  // ---- Cleanup ----
+
+  onBeforeUnmount(() => {
+    updateContentState();
+    context.emit('stopTracking');
+    resetState();
+  });
+
+  // ---- Shared state/action groups ----
+
+  // Defined once and shared between the provided context (descendants get
+  // readonly refs) and the returned API (the parent gets the raw refs), so a
+  // new field is added in one place, not two.
+  const playbackState = {
+    currentTime,
+    duration,
+    isPlaying,
+    volume,
+    muted,
+    playbackRate,
+    isBuffering,
+  };
+  const playbackActions = {
+    togglePlay,
+    seek,
+    rewind,
+    forward,
+    setVolume,
+    toggleMute,
+    setPlaybackRate,
+  };
+
+  // ---- Provide context to descendant components ----
+
+  const injectedContext = {
+    // Player instance. Provided as the raw ref (not readonly): consumers call
+    // mutating video.js methods on it (seek, fullscreen toggle), which a
+    // readonly proxy would block. The instance is markRaw'd in setPlayer.
+    player,
+
+    // Caption state (readonly refs for reactivity)
+    language: readonly(language),
+    subtitles: readonly(subtitles),
+    transcript: readonly(transcript),
+    cues: readonly(cues),
+    activeCueIds: readonly(activeCueIds),
+
+    // Caption actions
+    setLanguage,
+    toggleSubtitles,
+    toggleTranscript,
+
+    // Playback state (readonly) and actions
+    ...mapValues(playbackState, readonly),
+    ...playbackActions,
+
+    // Scroll container positioning
+    containerRect: readonly(containerRect),
+  };
+
+  provide(MEDIA_PLAYER_CONTEXT_KEY, injectedContext);
+
+  // ---- Return API for parent component ----
+
+  return {
+    // Player instance
+    player,
+
+    // Content viewer values (from useContentViewer)
+    defaultFile,
+    files,
+    supplementaryFiles,
+    thumbnailFiles,
+    extraFields,
+    embedded,
+
+    // Caption state
+    captionTracks,
+    transcript: readonly(transcript),
+    toggleTranscript,
+
+    // Track utilities
+    trackSources,
+    isDefaultTrack,
+
+    // Progress/loading state
+    loading,
+
+    // Playback state and actions
+    ...playbackState,
+    ...playbackActions,
+  };
+}
+
+/**
+ * Inject media player context in descendant components
+ *
+ * This is the explicit API for child components to access the media player state.
+ * Call this in the setup() function of any component that needs access to the
+ * media player (e.g., TranscriptMenuItem, SubtitlesMenuItem, MediaPlayerTranscript).
+ * @returns {object} The media player context provided by useMediaPlayer:
+ * caption state/actions and playback state/actions. All state refs are readonly;
+ * `player` is the raw ref so consumers can call mutating video.js methods on it.
+ * @throws {Error} If called outside of a media player context
+ * @example
+ * // In a child component
+ * setup() {
+ *   const { subtitles, toggleSubtitles } = injectMediaPlayer();
+ *   return { subtitles, toggleSubtitles };
+ * }
+ */
+export function injectMediaPlayer() {
+  const context = inject(MEDIA_PLAYER_CONTEXT_KEY);
+
+  if (!context) {
+    throw new Error(
+      'injectMediaPlayer() must be called within a component that is a descendant of a component using useMediaPlayer()',
+    );
+  }
+
+  return context;
+}
diff --git a/kolibri/plugins/media_player/frontend/composables/useMediaProgress.js b/kolibri/plugins/media_player/frontend/composables/useMediaProgress.js
new file mode 100644
index 00000000000..0dc313221cd
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/composables/useMediaProgress.js
@@ -0,0 +1,115 @@
+/**
+ * Composable for tracking media playback progress and content state.
+ *
+ * Manages the time-based progress calculation, seeking behavior,
+ * play/pause state transitions, and content state persistence.
+ * @typedef {object} ProgressTrackingApi
+ * @param {object} options - Tracking configuration
+ * @param {import('vue').Ref} options.player - Ref to the video.js player instance
+ * @param {Function} options.emit - Component emit function
+ * @param {import('vue').Ref} options.forceDurationBasedProgress
+ * Whether to use duration-based tracking
+ * @param {import('vue').Ref} options.durationBasedProgress
+ * Duration-based progress value (0-1)
+ * @param {import('vue').Ref} options.extraFields
+ * Extra fields from content viewer (contains contentState)
+ * @param {import('vue').ComputedRef} options.savedLocation
+ * Saved playback position from content state
+ * @property {() => void} recordProgress Record current playback progress since last
+ * checkpoint.
+ * @property {() => void} updateContentState Persist current playback position to
+ * content state.
+ * @property {() => void} updateTime Handle time update events (records progress every
+ * 5 seconds).
+ * @property {() => void} handleSeek Handle seek events, recording pre-seek progress.
+ * @property {(state: boolean) => void} setPlayState Handle play/pause transitions with
+ * progress recording.
+ * @returns {ProgressTrackingApi}
+ */
+export default function useProgressTracking({
+  player,
+  emit,
+  forceDurationBasedProgress,
+  durationBasedProgress,
+  extraFields,
+  savedLocation,
+}) {
+  // Internal tracking state — plain locals, never exposed reactively.
+  let dummyTime = 0;
+  let progressStartingPoint = 0;
+  let lastUpdateTime = 0;
+
+  function recordProgress() {
+    if (forceDurationBasedProgress.value) {
+      emit('updateProgress', durationBasedProgress.value);
+    } else {
+      emit(
+        'addProgress',
+        Math.max(0, (dummyTime - progressStartingPoint) / Math.floor(player.value.duration())),
+      );
+    }
+    progressStartingPoint = dummyTime;
+  }
+
+  function updateContentState() {
+    if (!player.value) {
+      return;
+    }
+    const currentLocation = player.value.currentTime();
+    let contentState;
+    if (extraFields.value) {
+      contentState = {
+        ...extraFields.value.contentState,
+        savedLocation: currentLocation || savedLocation.value,
+      };
+    } else {
+      contentState = { savedLocation: currentLocation || savedLocation.value };
+    }
+    emit('updateContentState', contentState);
+  }
+
+  function updateTime() {
+    // Skip out of here if we're currently seeking,
+    // so we don't update dummyTime before calculating old progress
+    if (player.value.seeking()) {
+      return;
+    }
+    dummyTime = player.value.currentTime();
+    if (dummyTime - lastUpdateTime >= 5) {
+      recordProgress();
+      lastUpdateTime = dummyTime;
+    }
+  }
+
+  function handleSeek() {
+    // Record progress before updating the times,
+    // to capture any progress that happened pre-seeking
+    recordProgress();
+
+    // Now, update all the timestamps to set the new time location
+    // as the baseline starting point
+    dummyTime = player.value.currentTime();
+    lastUpdateTime = dummyTime;
+    progressStartingPoint = dummyTime;
+  }
+
+  function setPlayState(state) {
+    // Avoid recording progress if we're currently seeking,
+    // as timers are in an intermediate state
+    if (!player.value.seeking()) {
+      recordProgress();
+    }
+    if (state === true) {
+      emit('startTracking');
+    } else {
+      emit('stopTracking');
+    }
+  }
+
+  return {
+    updateContentState,
+    updateTime,
+    handleSeek,
+    setPlayState,
+  };
+}
diff --git a/kolibri/plugins/media_player/frontend/composables/useSeekBar.js b/kolibri/plugins/media_player/frontend/composables/useSeekBar.js
new file mode 100644
index 00000000000..85e4dfcbf43
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/composables/useSeekBar.js
@@ -0,0 +1,156 @@
+import { computed, onUnmounted } from 'vue';
+import videojs from 'video.js';
+import mediaStrings from '../utils/mediaStrings';
+import { PLAYBACK_RATES, injectMediaPlayer } from './useMediaPlayer';
+
+/**
+ * Composable for seek bar interaction logic used by AudioPlayerControls.
+ * @typedef {object} SeekBarApi
+ * @param {import('vue').Ref} progressBarRef - template ref to the progress bar element
+ * @property {import('vue').Ref<number>} currentTime Current playback position in seconds.
+ * @property {import('vue').Ref<number>} duration Total media duration in seconds.
+ * @property {import('vue').Ref<boolean>} isPlaying Whether media is currently playing.
+ * @property {import('vue').Ref<boolean>} muted Whether audio is muted.
+ * @property {import('vue').Ref<number>} playbackRate Playback speed multiplier.
+ * @property {import('vue').ComputedRef<number>} progressPercent Progress as 0–100.
+ * @property {import('vue').ComputedRef<string>} formattedCurrentTime Human-readable
+ * current time (e.g. "1:23").
+ * @property {import('vue').ComputedRef<string>} formattedDuration Human-readable total
+ * duration.
+ * @property {import('vue').ComputedRef<string>} playbackRateLabel Localized rate label
+ * with multiplier sign (e.g. "1.5×").
+ * @property {() => void} togglePlay Toggle play/pause.
+ * @property {(seconds?: number) => void} rewind Rewind by seconds (default 10).
+ * @property {(seconds?: number) => void} forward Fast-forward by seconds (default 10).
+ * @property {() => void} toggleMute Mute or unmute the audio.
+ * @property {() => void} cyclePlaybackRate Advance to the next rate in PLAYBACK_RATES.
+ * @property {(event: MouseEvent) => void} onProgressMouseDown Mouse-drag seek handler.
+ * @property {(event: TouchEvent) => void} onProgressTouchStart Touch-drag seek handler.
+ * @property {(event: KeyboardEvent) => void} onProgressKeyDown Keyboard seek handler
+ * (arrows, Home, End).
+ * @returns {SeekBarApi} Seek bar state and interaction handlers.
+ */
+export default function useSeekBar(progressBarRef) {
+  const {
+    currentTime,
+    duration,
+    isPlaying,
+    muted,
+    playbackRate,
+    togglePlay,
+    seek,
+    rewind,
+    forward,
+    toggleMute,
+    setPlaybackRate,
+  } = injectMediaPlayer();
+
+  const progressPercent = computed(() => {
+    if (!duration.value) return 0;
+    return (currentTime.value / duration.value) * 100;
+  });
+
+  const formattedCurrentTime = computed(() => {
+    return videojs.formatTime(currentTime.value, duration.value);
+  });
+
+  const formattedDuration = computed(() => {
+    return videojs.formatTime(duration.value, duration.value);
+  });
+
+  const playbackRateLabel = computed(() => {
+    return mediaStrings.playbackRateLabel$({ rate: playbackRate.value });
+  });
+
+  function cyclePlaybackRate() {
+    const currentIndex = PLAYBACK_RATES.indexOf(playbackRate.value);
+    const nextIndex = (currentIndex + 1) % PLAYBACK_RATES.length;
+    setPlaybackRate(PLAYBACK_RATES[nextIndex]);
+  }
+
+  function getSeekFraction(clientX) {
+    if (!progressBarRef.value) return 0;
+    const rect = progressBarRef.value.getBoundingClientRect();
+    return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+  }
+
+  // Cleanup for an in-progress drag, so document listeners are removed even if
+  // the component unmounts mid-drag (before mouseup/touchend fires).
+  let endActiveDrag = null;
+
+  function onProgressMouseDown(event) {
+    seek(getSeekFraction(event.clientX) * duration.value);
+
+    const onMouseMove = e => {
+      seek(getSeekFraction(e.clientX) * duration.value);
+    };
+    endActiveDrag = () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', endActiveDrag);
+      endActiveDrag = null;
+    };
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', endActiveDrag);
+  }
+
+  function onProgressTouchStart(event) {
+    seek(getSeekFraction(event.touches[0].clientX) * duration.value);
+
+    const onTouchMove = e => {
+      // Prevent the page/container from scrolling while dragging the seek bar.
+      // Requires the listener to be registered as non-passive.
+      e.preventDefault();
+      seek(getSeekFraction(e.touches[0].clientX) * duration.value);
+    };
+    endActiveDrag = () => {
+      document.removeEventListener('touchmove', onTouchMove);
+      document.removeEventListener('touchend', endActiveDrag);
+      endActiveDrag = null;
+    };
+    document.addEventListener('touchmove', onTouchMove, { passive: false });
+    document.addEventListener('touchend', endActiveDrag);
+  }
+
+  onUnmounted(() => {
+    if (endActiveDrag) {
+      endActiveDrag();
+    }
+  });
+
+  function onProgressKeyDown(event) {
+    const step = 5;
+    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      forward(step);
+    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+      event.preventDefault();
+      rewind(step);
+    } else if (event.key === 'Home') {
+      event.preventDefault();
+      seek(0);
+    } else if (event.key === 'End') {
+      event.preventDefault();
+      seek(duration.value);
+    }
+  }
+
+  return {
+    currentTime,
+    duration,
+    isPlaying,
+    muted,
+    playbackRate,
+    progressPercent,
+    formattedCurrentTime,
+    formattedDuration,
+    playbackRateLabel,
+    togglePlay,
+    rewind,
+    forward,
+    toggleMute,
+    cyclePlaybackRate,
+    onProgressMouseDown,
+    onProgressTouchStart,
+    onProgressKeyDown,
+  };
+}
diff --git a/kolibri/plugins/media_player/frontend/test/videojsMock.js b/kolibri/plugins/media_player/frontend/test/videojsMock.js
new file mode 100644
index 00000000000..a1a61af7077
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/test/videojsMock.js
@@ -0,0 +1,268 @@
+/* global jest */
+/**
+ * Shared video.js test double.
+ *
+ * video.js needs a real media element and browser media APIs that jsdom cannot
+ * provide, so it is the hard boundary to fake. Faking it here lets tests drive
+ * the REAL composables (useMediaPlayer / useCaptions / useMediaProgress) instead
+ * of mocking those internal modules.
+ *
+ * Usage in a spec:
+ *
+ *   jest.mock('video.js', () => require('../../test/videojsMock').videojsModuleMock());
+ *   import videojs from 'video.js';
+ *   // after the player initializes:
+ *   const player = videojs.mock.results.at(-1).value;
+ *   player.trigger('play');
+ */
+
+import { nextTick } from 'vue';
+
+/**
+ * Advance past the player's async ready sequence: Vue nextTick runs initPlayer's
+ * videojs() call + setPlayer, then a microtask fires handleReadyPlayer.
+ * @returns {Promise<void>} Resolves once the player is ready
+ */
+export async function flushPlayerReady() {
+  await nextTick();
+  await Promise.resolve();
+  await nextTick();
+}
+
+/**
+ * Default video.js formatTime implementation (mm:ss), matching video.js output
+ * closely enough for assertions.
+ * @param {number} seconds - Seconds to format
+ * @returns {string} Formatted "m:ss" string
+ */
+export function formatTime(seconds) {
+  const s = Math.floor(seconds % 60);
+  const m = Math.floor(seconds / 60);
+  return `${m}:${s < 10 ? '0' : ''}${s}`;
+}
+
+/**
+ * Build a fake TextTrack with only the surface useCaptions touches.
+ * @param {object} opts - Track options
+ * @param {string} opts.language - BCP-47 language code
+ * @param {string} [opts.id] - Track id (defaults to the language)
+ * @param {string} [opts.mode] - Initial mode ('disabled' | 'hidden' | 'showing')
+ * @param {Array} [opts.cues] - Cue objects for the track
+ * @param {Array} [opts.activeCues] - Currently active cue objects
+ * @returns {object} A fake TextTrack
+ */
+export function createTrack({ language, id, mode = 'disabled', cues = [], activeCues = [] }) {
+  const listeners = {};
+  const track = {
+    id: id || language,
+    language,
+    mode,
+    cues,
+    activeCues,
+    addCue: jest.fn(),
+    addEventListener: (event, cb) => {
+      (listeners[event] = listeners[event] || []).push(cb);
+    },
+    removeEventListener: (event, cb) => {
+      listeners[event] = (listeners[event] || []).filter(l => l !== cb);
+    },
+    // Test helper: fire a track event (e.g. 'cuechange').
+    trigger: event => (listeners[event] || []).slice().forEach(cb => cb()),
+  };
+  return track;
+}
+
+/**
+ * Build a fake TextTrackList (array-like, as video.js returns).
+ * @param {Array} tracks - Tracks to include
+ * @returns {Array} An array of tracks (array-like list)
+ */
+export function createTrackList(tracks = []) {
+  return tracks;
+}
+
+// The event each piece of player state announces when written, as video.js does.
+const STATE_EVENTS = {
+  currentTime: 'timeupdate',
+  duration: 'durationchange',
+  volume: 'volumechange',
+  muted: 'volumechange',
+  playbackRate: 'ratechange',
+};
+
+/**
+ * Build a fake video.js Player exposing only the surface the media_player
+ * composables call. Events are dispatched via `trigger(event)`.
+ * @param {object} [overrides] - Initial state / method overrides
+ * @returns {object} A fake video.js player
+ */
+export function createFakePlayer(overrides = {}) {
+  const listeners = {};
+  const state = {
+    currentTime: 0,
+    duration: 0,
+    paused: true,
+    seeking: false,
+    volume: 1,
+    muted: false,
+    playbackRate: 1,
+    textTracks: createTrackList(),
+    ...overrides,
+  };
+
+  // video.js getter/setter methods, which announce writes with an event.
+  const accessor = key => value => {
+    if (value === undefined) {
+      return state[key];
+    }
+    state[key] = value;
+    player.trigger(STATE_EVENTS[key]);
+    return undefined;
+  };
+
+  const player = {
+    on: (event, cb) => {
+      (listeners[event] = listeners[event] || []).push(cb);
+    },
+    one: (event, cb) => {
+      const wrapped = (...args) => {
+        player.off(event, wrapped);
+        cb(...args);
+      };
+      player.on(event, wrapped);
+    },
+    off: (event, cb) => {
+      listeners[event] = (listeners[event] || []).filter(l => l !== cb);
+    },
+    // Test helper: dispatch a player event to its listeners.
+    trigger: (event, ...args) => (listeners[event] || []).slice().forEach(cb => cb(...args)),
+
+    currentTime: accessor('currentTime'),
+    duration: accessor('duration'),
+    volume: accessor('volume'),
+    muted: accessor('muted'),
+    playbackRate: accessor('playbackRate'),
+    seeking: () => state.seeking,
+    paused: () => state.paused,
+    play: jest.fn(() => {
+      state.paused = false;
+      player.trigger('play');
+      return Promise.resolve();
+    }),
+    pause: jest.fn(() => {
+      state.paused = true;
+      player.trigger('pause');
+    }),
+    textTracks: () => state.textTracks,
+    // Test helper: attach a text-track list, then trigger('loadstart') to bind it.
+    _setTextTracks: list => {
+      state.textTracks = list;
+    },
+    isDisposed: () => state.disposed === true,
+    dispose: jest.fn(() => {
+      state.disposed = true;
+    }),
+    // video.js control/DOM surface used by VideoPlayer; harmless no-ops here.
+    addClass: jest.fn(),
+    removeClass: jest.fn(),
+    addChild: jest.fn(),
+    // Child lookups return a childless stub: consumers chain getChild and then
+    // guard on the missing grandchild (MediaPlayerFullscreen's toggle lookup).
+    getChild: jest.fn(() => ({ getChild: () => undefined })),
+    controlBar: { getChild: jest.fn() },
+    ...overrides.methods,
+  };
+  return player;
+}
+
+/**
+ * Put a fake player into a given state, firing the events a real player would.
+ * @param {object} player - Fake player from createFakePlayer
+ * @param {object} [state] - State to apply
+ * @param {boolean} [state.paused] - Whether playback is paused
+ * @param {number} [state.currentTime] - Playback position in seconds
+ * @param {number} [state.duration] - Media duration in seconds
+ * @param {number} [state.volume] - Volume, 0-1
+ * @param {boolean} [state.muted] - Whether audio is muted
+ * @param {number} [state.playbackRate] - Playback speed multiplier
+ */
+export function setPlayerState(player, { paused, ...values } = {}) {
+  for (const [key, value] of Object.entries(values)) {
+    player[key](value);
+  }
+  if (paused === true) {
+    player.pause();
+  } else if (paused === false) {
+    player.play();
+  }
+}
+
+/**
+ * Stand-in for any video.js component class returned by `videojs.getComponent`.
+ */
+class FakeComponent {
+  constructor(player) {
+    this._player = player;
+  }
+  player() {
+    return this._player;
+  }
+  el() {
+    return document.createElement('div');
+  }
+  controlText() {}
+  buildCSSClass() {
+    return '';
+  }
+  on() {}
+  off() {}
+  dispose() {}
+  handleSelectedLanguageChange() {}
+}
+
+/**
+ * Build the mocked `video.js` module object for a jest.mock factory. The default
+ * export is a jest.fn videojs(); read the created player from
+ * `videojs.mock.results.at(-1).value`.
+ *
+ * The ready callback is invoked asynchronously (as real video.js does, after
+ * `videojs()` returns) so useMediaPlayer's setPlayer has assigned `player.value`
+ * before handleReadyPlayer runs.
+ * @returns {object} A mocked video.js module ({ __esModule, default })
+ */
+export function videojsModuleMock() {
+  const videojs = jest.fn((el, config, ready) => {
+    // Model the DOM half of video.js: it moves the media element into a
+    // generated wrapper, and dispose() removes that wrapper — the media element
+    // with it (Component.dispose, video.cjs.js:3937). Without this a player
+    // rebuilt into a detached tree still looks fine to the tests.
+    let wrapper = null;
+    if (el && el.parentNode) {
+      wrapper = document.createElement('div');
+      el.parentNode.insertBefore(wrapper, el);
+      wrapper.appendChild(el);
+    }
+    const player = createFakePlayer();
+    const disposePlayer = player.dispose;
+    player.dispose = jest.fn(() => {
+      disposePlayer();
+      wrapper?.parentNode?.removeChild(wrapper);
+    });
+    if (ready) {
+      // Don't fire ready on a player disposed before the microtask runs (e.g.
+      // the component unmounted first), matching real video.js.
+      Promise.resolve().then(() => {
+        if (!player.isDisposed()) {
+          ready.call(player);
+        }
+      });
+    }
+    return player;
+  });
+  // Components are subclassed at module load (customButtons, the videojs mixins),
+  // so this must be constructable, with the surface those subclasses call through to.
+  videojs.getComponent = () => FakeComponent;
+  videojs.registerComponent = jest.fn();
+  videojs.formatTime = formatTime;
+  return { __esModule: true, default: videojs };
+}
diff --git a/packages/kolibri-common/components/NumericKeypad/index.vue b/packages/kolibri-common/components/NumericKeypad/index.vue
index 901d40b2bc3..354b09a65b6 100644
--- a/packages/kolibri-common/components/NumericKeypad/index.vue
+++ b/packages/kolibri-common/components/NumericKeypad/index.vue
@@ -161,11 +161,13 @@
       //
       // The keypad is a full-width bar pinned to the bottom of the content's
       // scrolling region, just above each host's bottom chrome. Rather than
-      // reason about each host's layout, we detect the nearest scrollable
+      // reason about each host's layout, we detect the outermost scrollable
       // ancestor and follow its visible viewport rect (clamped to the window).
+      // Outermost (not nearest) because the content nests inner scrollable
+      // cards (e.g. KPageContainer) that scroll within the real viewport.
       // A fixed-position bar at `window.innerHeight - rect.bottom` then sits at
       // that region's visible bottom regardless of how tall the content grows.
-      const { containerRect, updateRect } = useScrollContainer(anchor);
+      const { containerRect, updateRect } = useScrollContainer(anchor, { strategy: 'outermost' });
 
       const anchorStyle = computed(() => {
         const rect = containerRect.value;
diff --git a/packages/kolibri-common/composables/__tests__/useScrollContainer.spec.js b/packages/kolibri-common/composables/__tests__/useScrollContainer.spec.js
index 3688caf7cef..f938d58bbaf 100644
--- a/packages/kolibri-common/composables/__tests__/useScrollContainer.spec.js
+++ b/packages/kolibri-common/composables/__tests__/useScrollContainer.spec.js
@@ -5,7 +5,7 @@ import useScrollContainer from '../useScrollContainer';
 // Mounts a harness modelling the Perseus DOM: an outer scroll viewport
 // (like .column-pane) wrapping an inner scrollable card (like KPageContainer)
 // wrapping the element handed to the composable.
-function mountHarness({ outerStyle = '', innerStyle = '' } = {}) {
+function mountHarness({ outerStyle = '', innerStyle = '', strategy } = {}) {
   let api;
   const Harness = {
     template: `
@@ -21,7 +21,7 @@ function mountHarness({ outerStyle = '', innerStyle = '' } = {}) {
     `,
     setup() {
       const target = ref(null);
-      api = useScrollContainer(target);
+      api = useScrollContainer(target, strategy ? { strategy } : undefined);
       return { target, outerStyle, innerStyle };
     },
   };
@@ -34,11 +34,15 @@ function stubRect(el, rect) {
 }
 
 describe('useScrollContainer', () => {
-  it('pins to the outermost scrollable ancestor, skipping inner scrollable cards', () => {
+  it("strategy 'outermost' pins to the outer viewport, skipping inner scrollable cards", () => {
     // Both the outer viewport and the inner card are scrollable. The inner card
     // (KPageContainer) scrolls *within* the outer viewport, so we must select
     // the outer one — selecting the inner one was the keypad positioning bug.
-    const api = mountHarness({ outerStyle: 'overflow-y: auto;', innerStyle: 'overflow-y: auto;' });
+    const api = mountHarness({
+      outerStyle: 'overflow-y: auto;',
+      innerStyle: 'overflow-y: auto;',
+      strategy: 'outermost',
+    });
     stubRect(screen.getByTestId('outer'), { top: 64, bottom: 500, left: 16, width: 400 });
     stubRect(screen.getByTestId('inner'), { top: 64, bottom: 900, left: 16, width: 380 });
 
@@ -47,6 +51,23 @@ describe('useScrollContainer', () => {
     expect(api.containerRect.value).toEqual({ top: 64, bottom: 500, left: 16, width: 400 });
   });
 
+  it("strategy 'nearest' (default) pins to the closest scrollable ancestor", () => {
+    // Same nested-scroll DOM, but the default strategy tracks the inner card —
+    // what the media player layout wants, since it has no intermediate card.
+    const api = mountHarness({ outerStyle: 'overflow-y: auto;', innerStyle: 'overflow-y: auto;' });
+    stubRect(screen.getByTestId('outer'), { top: 64, bottom: 500, left: 16, width: 400 });
+    stubRect(screen.getByTestId('inner'), { top: 64, bottom: 900, left: 16, width: 380 });
+
+    api.updateRect();
+
+    expect(api.containerRect.value).toEqual({
+      top: 64,
+      bottom: window.innerHeight,
+      left: 16,
+      width: 380,
+    });
+  });
+
   it('clamps the container rect to the viewport', () => {
     const api = mountHarness({ outerStyle: 'overflow-y: auto;' });
     // Extends above the viewport top and below its bottom.
diff --git a/packages/kolibri-common/composables/useScrollContainer.js b/packages/kolibri-common/composables/useScrollContainer.js
index 319b26b0f51..0c90b09079b 100644
--- a/packages/kolibri-common/composables/useScrollContainer.js
+++ b/packages/kolibri-common/composables/useScrollContainer.js
@@ -1,28 +1,33 @@
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
+import { useEventListener, useResizeObserver } from '@vueuse/core';
 
 /**
- * Finds the outermost scrollable ancestor of the given element.
+ * Finds a scrollable ancestor of the given element.
  *
- * Walks up the DOM tree and returns the *last* ancestor with overflow-y
- * auto/scroll before reaching the document element. We want the outermost
- * rather than the nearest because the content is often wrapped in inner
- * scrollable cards (e.g. KPageContainer's overflow-y: auto) that scroll
- * within* the real layout viewport; it's that outer, viewport-fixed region
- * we want to position against. Falls back to the document element if there is
- * no scrollable ancestor.
+ * Walks up the DOM tree looking for ancestors with overflow-y auto/scroll,
+ * stopping at the document element. The `strategy` picks which match to
+ * return:
+ * - `'nearest'` — the first scrollable ancestor (default). Correct when the
+ *   element sits directly inside the region you want to position against.
+ * - `'outermost'` — the last scrollable ancestor before the document element.
+ *   Correct when the content is wrapped in inner scrollable cards (e.g.
+ *   KPageContainer's overflow-y: auto) that scroll *within* the real layout
+ *   viewport; it's that outer, viewport-fixed region we want.
  *
- * NB: this diverges from the media_player copy of this composable, which
- * returns the nearest scrollable ancestor — the Perseus content has an
- * intermediate scrollable card that the media player layout does not.
+ * Falls back to the document element if there is no scrollable ancestor.
  * @param {HTMLElement} el - Start point to search upward from
- * @returns {HTMLElement} Outermost scrollable ancestor, or the document element
+ * @param {'nearest'|'outermost'} strategy - Which scrollable ancestor to pick
+ * @returns {HTMLElement} Matching scrollable ancestor, or the document element
  */
-function findScrollableAncestor(el) {
+function findScrollableAncestor(el, strategy) {
   let current = el.parentElement;
   let outermost = null;
   while (current && current !== document.documentElement) {
     const overflowY = getComputedStyle(current).overflowY;
     if (overflowY === 'auto' || overflowY === 'scroll') {
+      if (strategy === 'nearest') {
+        return current;
+      }
       outermost = current;
     }
     current = current.parentElement;
@@ -31,10 +36,11 @@ function findScrollableAncestor(el) {
 }
 
 /**
- * Composable that detects the outermost scrollable ancestor of an element
- * and tracks its viewport position. Useful for positioning fixed elements
- * (like the numeric keypad) relative to a scroll container without coupling
- * to any specific layout context.
+ * Composable that detects a scrollable ancestor of an element and tracks its
+ * viewport position. Useful for positioning fixed elements (like the numeric
+ * keypad or the audio sticky player) relative to a scroll container without
+ * coupling to any specific layout context. Pass `strategy` to pick the nearest
+ * (default) or outermost scrollable ancestor — see findScrollableAncestor.
  *
  * The container is (re)detected and its rect recalculated when:
  * - The component mounts
@@ -47,49 +53,32 @@ function findScrollableAncestor(el) {
  * @typedef {object} ContainerRect
  * @typedef {object} ScrollContainerApi
  * @param {import('vue').Ref<HTMLElement>} elementRef - Ref to the DOM element to start from
+ * @param {object} [options] - Optional configuration
+ * @param {'nearest'|'outermost'} [options.strategy] - Which scrollable ancestor
+ * to track (default `'nearest'`)
  * @property {number} top Distance from viewport top to the container's visible top.
  * @property {number} bottom Distance from viewport top to the container's visible bottom.
  * @property {number} left Distance from viewport left to the container's left edge.
  * @property {number} width Container width in pixels.
  * @property {import('vue').Ref<ContainerRect>} containerRect Reactive rect of the
- * outermost scrollable ancestor, clamped to the viewport.
+ * detected scrollable ancestor, clamped to the viewport.
  * @property {() => void} updateRect Force a re-detection and recalculation of
  * containerRect (useful when layout changes outside of resize/ResizeObserver).
  * @returns {ScrollContainerApi} Reactive container rect and an updateRect trigger
  */
-export default function useScrollContainer(elementRef) {
+export default function useScrollContainer(elementRef, { strategy = 'nearest' } = {}) {
   const containerRect = ref({ top: 0, bottom: 0, left: 0, width: 0 });
 
-  let scrollContainer = null;
-  let resizeObserver = null;
-
-  function observe(container) {
-    if (resizeObserver) {
-      resizeObserver.disconnect();
-      resizeObserver = null;
-    }
-    if (
-      typeof ResizeObserver !== 'undefined' &&
-      container &&
-      container !== document.documentElement
-    ) {
-      resizeObserver = new ResizeObserver(updateRect);
-      resizeObserver.observe(container);
-    }
-  }
+  const scrollContainer = ref(null);
 
   function updateRect() {
     if (!elementRef.value) {
       return;
     }
 
-    const detected = findScrollableAncestor(elementRef.value);
-    if (detected !== scrollContainer) {
-      scrollContainer = detected;
-      observe(scrollContainer);
-    }
+    scrollContainer.value = findScrollableAncestor(elementRef.value, strategy);
 
-    if (scrollContainer === document.documentElement) {
+    if (scrollContainer.value === document.documentElement) {
       // If the scroll container is the document itself, the content viewport
       // starts at the top of the visible area
       containerRect.value = {
@@ -99,7 +88,7 @@ export default function useScrollContainer(elementRef) {
         width: window.innerWidth,
       };
     } else {
-      const rect = scrollContainer.getBoundingClientRect();
+      const rect = scrollContainer.value.getBoundingClientRect();
       containerRect.value = {
         top: Math.max(0, rect.top),
         bottom: Math.min(window.innerHeight, rect.bottom),
@@ -109,20 +98,18 @@ export default function useScrollContainer(elementRef) {
     }
   }
 
-  onMounted(() => {
-    if (!elementRef.value) {
-      return;
-    }
-    updateRect();
-    window.addEventListener('resize', updateRect);
-  });
+  onMounted(updateRect);
 
-  onUnmounted(() => {
-    window.removeEventListener('resize', updateRect);
-    if (resizeObserver) {
-      resizeObserver.disconnect();
-    }
-  });
+  // The document element resizes with the window, so observing it via
+  // ResizeObserver is redundant — the window resize listener covers that case.
+  const observedContainer = computed(() =>
+    scrollContainer.value === document.documentElement ? null : scrollContainer.value,
+  );
+
+  // Both auto-dispose on scope unmount; useResizeObserver no-ops when the
+  // ResizeObserver API is unavailable or the target is null.
+  useEventListener(window, 'resize', updateRect);
+  useResizeObserver(observedContainer, updateRect);
 
   return { containerRect, updateRect };
 }

From 102285bc62065caf39abb62004d499904568986c Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Sat, 18 Jul 2026 14:12:01 -0700
Subject: [PATCH 3/4] Extract VideoPlayer and add AudioPlayer components

VideoPlayer wraps the video.js instance previously inlined in
MediaPlayerIndex. AudioPlayer is a purpose-built audio experience:
AudioPlayerControls provides custom transport controls, AudioStickyPlayer
keeps them docked while scrolling, and an inline transcript replaces the
video captions UI. Add a centered BigPlayToggle custom button and
translate the existing transport buttons at construction time.
---
 .../frontend/test/mediaPlayerHost.js          |  88 ++
 .../frontend/views/AudioPlayer.vue            | 339 +++++++
 .../frontend/views/AudioPlayerControls.vue    | 421 +++++++++
 .../frontend/views/AudioStickyPlayer.vue      |  92 ++
 .../frontend/views/VideoPlayer.vue            | 837 ++++++++++++++++++
 .../views/__tests__/AudioPlayer.spec.js       | 240 +++++
 .../__tests__/AudioPlayerControls.spec.js     | 248 ++++++
 .../views/__tests__/AudioStickyPlayer.spec.js | 150 ++++
 .../views/__tests__/VideoPlayer.spec.js       | 176 ++++
 .../frontend/views/customButtons.js           |  24 +-
 kolibri/plugins/media_player/package.json     |   3 +
 11 files changed, 2615 insertions(+), 3 deletions(-)
 create mode 100644 kolibri/plugins/media_player/frontend/test/mediaPlayerHost.js
 create mode 100644 kolibri/plugins/media_player/frontend/views/AudioPlayer.vue
 create mode 100644 kolibri/plugins/media_player/frontend/views/AudioPlayerControls.vue
 create mode 100644 kolibri/plugins/media_player/frontend/views/AudioStickyPlayer.vue
 create mode 100644 kolibri/plugins/media_player/frontend/views/VideoPlayer.vue
 create mode 100644 kolibri/plugins/media_player/frontend/views/__tests__/AudioPlayer.spec.js
 create mode 100644 kolibri/plugins/media_player/frontend/views/__tests__/AudioPlayerControls.spec.js
 create mode 100644 kolibri/plugins/media_player/frontend/views/__tests__/AudioStickyPlayer.spec.js
 create mode 100644 kolibri/plugins/media_player/frontend/views/__tests__/VideoPlayer.spec.js

diff --git a/kolibri/plugins/media_player/frontend/test/mediaPlayerHost.js b/kolibri/plugins/media_player/frontend/test/mediaPlayerHost.js
new file mode 100644
index 00000000000..cd5c843a4ce
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/test/mediaPlayerHost.js
@@ -0,0 +1,88 @@
+/**
+ * Render a media player descendant inside a REAL useMediaPlayer provider.
+ *
+ * Child components (AudioPlayerControls, AudioStickyPlayer, the transcript and
+ * menu items) reach the player through injectMediaPlayer. Rather than faking
+ * that provide — a second, hand-maintained copy of the context shape — they are
+ * mounted under a minimal host that calls useMediaPlayer against the video.js
+ * fake, so assertions land on the player itself.
+ *
+ * The spec must mock both boundaries (jest.mock is hoisted per file):
+ *
+ *   jest.mock('video.js', () => require('../../test/videojsMock').videojsModuleMock());
+ *   jest.mock('kolibri/composables/useContentViewer');
+ *
+ *   const { player } = await renderWithMediaPlayer(AudioPlayerControls);
+ *   setPlayerState(player, { currentTime: 30, duration: 120 });
+ *   await nextTick();
+ */
+import { render } from '@testing-library/vue';
+import { ref, nextTick } from 'vue';
+import videojs from 'video.js';
+// eslint-disable-next-line import-x/named
+import useContentViewer, { useContentViewerMock } from 'kolibri/composables/useContentViewer';
+import useMediaPlayer from '../composables/useMediaPlayer';
+import { flushPlayerReady } from './videojsMock';
+
+const AUDIO_FILES = [
+  { storage_url: '/audio.mp3', preset: 'audio', extension: 'mp3', available: true },
+  { storage_url: '/audio.ogg', preset: 'audio', extension: 'ogg', available: true },
+];
+
+/**
+ * Build the host component: the media element and lifecycle useMediaPlayer needs,
+ * with the component under test as a descendant.
+ * @param {object} Component - Component under test
+ * @param {object} props - Props for the component under test
+ * @returns {object} A Vue component definition
+ */
+function createHost(Component, props) {
+  return {
+    name: 'MediaPlayerHost',
+    setup(_, context) {
+      const rootEl = ref(null);
+      const wrapper = ref(null);
+      const playerRef = ref(null);
+      useMediaPlayer(context, {
+        rootEl,
+        wrapperRef: wrapper,
+        playerRef,
+        getPlayerConfig: () => ({}),
+      });
+      return { rootEl, wrapper, playerRef };
+    },
+    render(h) {
+      return h('div', { ref: 'rootEl' }, [
+        h('div', { ref: 'wrapper' }, [h('audio', { ref: 'playerRef' }), h(Component, { props })]),
+      ]);
+    },
+  };
+}
+
+/**
+ * Render a component under a real media player context and return the fake
+ * video.js player driving it.
+ * @param {object} Component - Component under test
+ * @param {object} [options] - Host options
+ * @param {object} [options.props] - Props passed to the component under test
+ * @param {object} [options.content] - useContentViewer overrides (files, embedded, ...)
+ * @returns {Promise<object>} Testing Library utils plus the fake `player`
+ */
+export async function renderWithMediaPlayer(Component, { props, content } = {}) {
+  useContentViewer.mockImplementation(() =>
+    useContentViewerMock({ files: AUDIO_FILES, defaultFile: AUDIO_FILES[0], ...content }),
+  );
+
+  const utils = render(createHost(Component, props));
+  await flushPlayerReady();
+
+  const player = videojs.mock.results.at(-1).value;
+  // handleReadyPlayer autoplays. Settle on a known paused baseline and drop the
+  // ready-time calls so specs assert only the interactions they trigger.
+  player.pause();
+  player.play.mockClear();
+  player.pause.mockClear();
+  await nextTick();
+
+  return { ...utils, player };
+}
diff --git a/kolibri/plugins/media_player/frontend/views/AudioPlayer.vue b/kolibri/plugins/media_player/frontend/views/AudioPlayer.vue
new file mode 100644
index 00000000000..63cf88f8c4d
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/views/AudioPlayer.vue
@@ -0,0 +1,339 @@
+<template>
+
+  <div
+    ref="rootEl"
+    :class="{ 'standalone-wrapper': !embedded }"
+  >
+    <!-- Keyed on the source: video.js removes the element it wrapped when the
+    player is disposed, so re-init needs a freshly mounted <audio> tag. Keying
+    the tag itself does not work — video.js has moved it into its own wrapper,
+    so Vue's replacement insert is a no-op. -->
+    <div
+      :key="defaultFile && defaultFile.storage_url"
+      ref="wrapper"
+      class="audio-card"
+      :style="cardStyle"
+    >
+      <div
+        v-show="loading"
+        class="loading-container"
+      >
+        <KCircularLoader :delay="true" />
+      </div>
+
+      <!-- Audio element is always in DOM (hidden via CSS) so video.js can initialize it -->
+      <audio
+        ref="playerRef"
+        class="audio-element"
+      >
+        <source
+          v-for="audio in audioSources"
+          :key="audio.storage_url"
+          :src="audio.storage_url"
+          :type="audioSourceType(audio.extension)"
+        >
+        <track
+          v-for="track in trackSources"
+          :key="track.storage_url"
+          kind="captions"
+          :src="track.storage_url"
+          :srclang="track.lang.id"
+          :label="track.lang.lang_name"
+          :default="isDefaultTrack(track.lang.id)"
+        >
+      </audio>
+
+      <template v-if="!loading">
+        <img
+          v-if="posterUrl"
+          :src="posterUrl"
+          class="audio-poster"
+          alt=""
+        >
+
+        <!-- While the sticky player is showing, this card copy is scrolled
+        off-screen. Mark it inert so its duplicate slider/buttons leave the tab
+        order and the accessibility tree, leaving the sticky copy as the single
+        set of controls. (`inert` is a known Vue 2 boolean attr: false removes
+        it.) -->
+        <AudioPlayerControls :inert="stickyPlayerVisible" />
+
+        <div
+          v-if="captionTracks.length > 0"
+          class="transcript-toggle"
+          :style="{ borderColor: $themeTokens.fineLine }"
+        >
+          <button
+            class="transcript-toggle-button"
+            :class="$computedClass(transcriptToggleHoverStyle)"
+            :aria-pressed="transcriptVisible"
+            @click="toggleTranscript"
+          >
+            <ClosedCaptionIcon class="transcript-toggle-icon" />
+            {{
+              transcriptVisible ? mediaStrings.hideTranscript$() : mediaStrings.showTranscript$()
+            }}
+          </button>
+        </div>
+
+        <MediaPlayerTranscript
+          v-if="transcriptVisible"
+          class="audio-transcript"
+          :style="transcriptContainerStyle"
+        />
+      </template>
+    </div>
+
+    <AudioStickyPlayer v-if="stickyPlayerVisible" />
+  </div>
+
+</template>
+
+
+<script>
+
+  import vue, { computed, ref, onBeforeUnmount, getCurrentInstance } from 'vue';
+  import ClosedCaptionIcon from 'kolibri-design-system/lib/KIcon/precompiled-icons/material-icons/closed_caption/baseline.vue';
+  import useMediaPlayer, { PLAYBACK_RATES } from '../composables/useMediaPlayer';
+  import mediaStrings from '../utils/mediaStrings';
+  import MediaPlayerTranscript from './MediaPlayerTranscript';
+  import AudioPlayerControls from './AudioPlayerControls';
+  import AudioStickyPlayer from './AudioStickyPlayer';
+
+  const GlobalLangCode = vue.locale;
+
+  const audioExtensionToMimeType = {
+    mp3: 'audio/mpeg',
+    ogg: 'audio/ogg',
+    wav: 'audio/wav',
+    m4a: 'audio/mp4',
+    flac: 'audio/flac',
+  };
+
+  export default {
+    name: 'AudioPlayer',
+    components: {
+      AudioPlayerControls,
+      AudioStickyPlayer,
+      MediaPlayerTranscript,
+      ClosedCaptionIcon,
+    },
+    setup(props, context) {
+      const instance = getCurrentInstance().proxy;
+      const rootEl = ref(null);
+      const playerRef = ref(null);
+      const wrapper = ref(null);
+
+      // Sticky player state
+      const isIntersecting = ref(true);
+      let intersectionObserver = null;
+
+      function setupIntersectionObserver() {
+        if (typeof IntersectionObserver === 'undefined') {
+          return;
+        }
+        // onReady runs on every player init, including re-init on source change
+        if (intersectionObserver) {
+          intersectionObserver.disconnect();
+        }
+        intersectionObserver = new IntersectionObserver(
+          entries => {
+            isIntersecting.value = entries[0].isIntersecting;
+          },
+          { threshold: 0.5 },
+        );
+        intersectionObserver.observe(rootEl.value);
+      }
+
+      // Initialize media player composable (provides context to child components,
+      // handles progress tracking, settings, and player lifecycle)
+      const {
+        files,
+        defaultFile,
+        thumbnailFiles,
+        embedded,
+        captionTracks,
+        transcript,
+        toggleTranscript,
+        trackSources,
+        isDefaultTrack,
+        loading,
+        isPlaying,
+      } = useMediaPlayer(context, {
+        rootEl,
+        wrapperRef: wrapper,
+        playerRef,
+        getPlayerConfig,
+        onReady: setupIntersectionObserver,
+      });
+
+      // Computed
+      const audioSources = computed(() => {
+        return files.value.filter(file => file.preset === 'audio');
+      });
+
+      const posterUrl = computed(() => thumbnailFiles.value[0]?.storage_url ?? null);
+
+      const transcriptVisible = computed(() => {
+        return transcript.value && !loading.value && captionTracks.value.length > 0;
+      });
+
+      const stickyPlayerVisible = computed(() => {
+        return isPlaying.value && !isIntersecting.value;
+      });
+
+      // Only theme-derived (dynamic) styles are inline; static layout lives in
+      // the <style> block so RTLCSS can flip it.
+      const cardStyle = computed(() => ({
+        border: `1px solid ${instance.$themeTokens.fineLine}`,
+        backgroundColor: instance.$themePalette.grey.v_100,
+        color: instance.$themeTokens.annotation,
+      }));
+      // Only the theme-derived border is dynamic; max-height lives in the
+      // <style> block (.audio-transcript).
+      const transcriptContainerStyle = computed(() => ({
+        borderTop: `1px solid ${instance.$themeTokens.fineLine}`,
+      }));
+      const transcriptToggleHoverStyle = computed(() => ({
+        ':hover': {
+          backgroundColor: instance.$themePalette.grey.v_200,
+        },
+      }));
+
+      // Methods
+      function audioSourceType(extension) {
+        return audioExtensionToMimeType[extension] || `audio/${extension}`;
+      }
+
+      function getPlayerConfig() {
+        return {
+          controls: false,
+          preload: 'metadata',
+          playbackRates: PLAYBACK_RATES,
+          language: GlobalLangCode,
+          languages: {
+            [GlobalLangCode]: {
+              'A network error caused the media download to fail part-way.':
+                mediaStrings.networkError$(),
+              'The media could not be loaded, either because the server or network failed or because the format is not supported.':
+                mediaStrings.formatError$(),
+              'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.':
+                mediaStrings.corruptionOrSupportError$(),
+              'No compatible source was found for this media.': mediaStrings.sourceError$(),
+              'The media is encrypted and we do not have the keys to decrypt it.':
+                mediaStrings.encryptionError$(),
+            },
+          },
+        };
+      }
+
+      onBeforeUnmount(() => {
+        if (intersectionObserver) {
+          intersectionObserver.disconnect();
+        }
+      });
+
+      return {
+        rootEl,
+        playerRef,
+        wrapper,
+        defaultFile,
+        embedded,
+        captionTracks,
+        toggleTranscript,
+        loading,
+        audioSources,
+        trackSources,
+        posterUrl,
+        transcriptVisible,
+        stickyPlayerVisible,
+        audioSourceType,
+        isDefaultTrack,
+        cardStyle,
+        transcriptContainerStyle,
+        transcriptToggleHoverStyle,
+        mediaStrings,
+      };
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .standalone-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100%;
+  }
+
+  .audio-card {
+    width: 100%;
+    max-width: 640px;
+    margin: 0 auto;
+    overflow: hidden;
+    border-radius: 4px;
+  }
+
+  .loading-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+  }
+
+  .audio-element {
+    // Use visibility/height approach so video.js can still access the element
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+  }
+
+  .audio-poster {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  .transcript-toggle {
+    display: flex;
+    justify-content: center;
+    padding: 8px;
+    border-top: 1px solid;
+  }
+
+  .transcript-toggle-button {
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+    padding: 8px 16px;
+    font-size: 0.85rem;
+    font-weight: bold;
+    color: inherit;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: 4px;
+
+    &:focus {
+      outline: 3px solid currentcolor;
+      outline-offset: 4px;
+    }
+  }
+
+  .transcript-toggle-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .audio-transcript {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+</style>
diff --git a/kolibri/plugins/media_player/frontend/views/AudioPlayerControls.vue b/kolibri/plugins/media_player/frontend/views/AudioPlayerControls.vue
new file mode 100644
index 00000000000..0b9f80b9668
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/views/AudioPlayerControls.vue
@@ -0,0 +1,421 @@
+<template>
+
+  <div
+    :class="['audio-controls', `rows-${rows}`]"
+    :style="{ '--focus-color': $themeTokens.focusOutline }"
+  >
+    <div class="transport-row">
+      <button
+        class="icon-button"
+        :class="$computedClass(iconHoverStyle)"
+        :aria-label="mediaStrings.replay$()"
+        @click="rewind()"
+      >
+        <Replay10Icon />
+      </button>
+      <button
+        class="play-button"
+        :class="$computedClass(playButtonStyle)"
+        :aria-label="isPlaying ? mediaStrings.pause$() : mediaStrings.play$()"
+        @click="togglePlay"
+      >
+        <PauseIcon v-if="isPlaying" />
+        <PlayArrowIcon v-else />
+      </button>
+      <button
+        class="icon-button"
+        :class="$computedClass(iconHoverStyle)"
+        :aria-label="mediaStrings.forward$()"
+        @click="forward()"
+      >
+        <Forward10Icon />
+      </button>
+    </div>
+
+    <div class="progress-group">
+      <div class="time-row">
+        <span class="time-display">{{ formattedCurrentTime }}</span>
+        <span class="time-display">{{ formattedDuration }}</span>
+      </div>
+      <div
+        ref="progressBar"
+        class="progress-bar-container"
+        role="slider"
+        :aria-label="mediaStrings.progressBar$()"
+        :aria-valuemin="0"
+        :aria-valuemax="Math.floor(duration) || 0"
+        :aria-valuenow="Math.floor(currentTime) || 0"
+        :aria-valuetext="formattedCurrentTime"
+        tabindex="0"
+        @mousedown="onProgressMouseDown"
+        @touchstart.prevent="onProgressTouchStart"
+        @keydown="onProgressKeyDown"
+      >
+        <!-- Fill/thumb are positioned from the left in all locales: a media
+        timeline runs earlier-to-later left-to-right regardless of text
+        direction, matching the seek math (clientX - rect.left) in useSeekBar. -->
+        <div
+          class="progress-bar-track"
+          :style="{ backgroundColor: $themePalette.grey.v_300 }"
+        >
+          <div
+            class="progress-bar-fill"
+            :style="{ width: progressPercent + '%', backgroundColor: $themeTokens.primary }"
+          ></div>
+          <div
+            class="progress-bar-thumb"
+            :style="{ left: progressPercent + '%', backgroundColor: $themeTokens.primary }"
+          ></div>
+        </div>
+      </div>
+    </div>
+
+    <button
+      class="icon-button volume-button"
+      :class="$computedClass(iconHoverStyle)"
+      :aria-label="muted ? mediaStrings.unmute$() : mediaStrings.mute$()"
+      @click="toggleMute"
+    >
+      <VolumeOffIcon v-if="muted" />
+      <VolumeUpIcon v-else />
+    </button>
+
+    <button
+      class="rate-button"
+      :class="$computedClass(iconHoverStyle)"
+      :aria-label="mediaStrings.playbackRateWithValue$({ rate: playbackRate })"
+      @click="cyclePlaybackRate"
+    >
+      {{ playbackRateLabel }}
+    </button>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { ref, computed, getCurrentInstance } from 'vue';
+  // Direct SVG imports rather than KIcon — these render inside custom-sized
+  // circular buttons where KIcon's wrapper markup would conflict with sizing.
+  import PlayArrowIcon from 'kolibri-design-system/lib/KIcon/precompiled-icons/material-icons/play_arrow/baseline.vue';
+  import PauseIcon from 'kolibri-design-system/lib/KIcon/precompiled-icons/material-icons/pause/baseline.vue';
+  import Replay10Icon from 'kolibri-design-system/lib/KIcon/precompiled-icons/material-icons/replay_10/baseline.vue';
+  import Forward10Icon from 'kolibri-design-system/lib/KIcon/precompiled-icons/material-icons/forward_10/baseline.vue';
+  import VolumeUpIcon from 'kolibri-design-system/lib/KIcon/precompiled-icons/material-icons/volume_up/baseline.vue';
+  import VolumeOffIcon from 'kolibri-design-system/lib/KIcon/precompiled-icons/material-icons/volume_off/baseline.vue';
+  import useSeekBar from '../composables/useSeekBar';
+  import mediaStrings from '../utils/mediaStrings';
+
+  export default {
+    name: 'AudioPlayerControls',
+    components: {
+      PlayArrowIcon,
+      PauseIcon,
+      Replay10Icon,
+      Forward10Icon,
+      VolumeUpIcon,
+      VolumeOffIcon,
+    },
+    setup() {
+      const instance = getCurrentInstance().proxy;
+      const progressBar = ref(null);
+
+      const iconHoverStyle = computed(() => ({
+        ':hover': {
+          backgroundColor: instance.$themePalette.grey.v_200,
+        },
+      }));
+      const playButtonStyle = computed(() => ({
+        backgroundColor: instance.$themeTokens.primary,
+        color: instance.$themeTokens.textInverted,
+      }));
+
+      return {
+        progressBar,
+        ...useSeekBar(progressBar),
+        iconHoverStyle,
+        playButtonStyle,
+        mediaStrings,
+      };
+    },
+    props: {
+      rows: {
+        type: Number,
+        default: 3,
+        validator: value => [1, 2, 3].includes(value),
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  // Flexbox layout (not CSS grid, for wider browser support). The `rows` prop
+  // selects the arrangement and button sizes.
+
+  .audio-controls {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    // Media controls stay LTR in every locale, as on the video player and
+    // YouTube; rtl:ignore stops RTLCSS flipping this back.
+
+    /* rtl:ignore */
+    direction: ltr;
+  }
+
+  // Transport row, then progress row, then volume (left) / rate (right).
+  .rows-3 {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 16px;
+
+    .transport-row {
+      flex-basis: 100%;
+    }
+
+    .progress-group {
+      flex-basis: 100%;
+    }
+
+    .icon-button {
+      width: 40px;
+      height: 40px;
+
+      svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .play-button {
+      width: 56px;
+      height: 56px;
+
+      svg {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+
+  // Progress row on top; volume (left) / transport (centre) / rate (right) below.
+  .rows-2 {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 8px;
+
+    .progress-group {
+      flex-basis: 100%;
+    }
+
+    .volume-button {
+      order: 1;
+    }
+
+    .transport-row {
+      order: 2;
+    }
+
+    .rate-button {
+      order: 3;
+    }
+
+    .icon-button {
+      width: 36px;
+      height: 36px;
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .play-button {
+      width: 44px;
+      height: 44px;
+
+      svg {
+        width: 26px;
+        height: 26px;
+      }
+    }
+
+    .time-display,
+    .rate-button {
+      font-size: 0.8rem;
+    }
+
+    .progress-bar-thumb {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  // Single row: volume | transport | progress | rate (visual order set via `order`).
+  .rows-1 {
+    padding: 8px;
+
+    .volume-button {
+      order: 1;
+    }
+
+    .transport-row {
+      gap: 4px;
+      order: 2;
+    }
+
+    .progress-group {
+      flex: 1;
+      order: 3;
+      min-width: 0;
+    }
+
+    .rate-button {
+      order: 4;
+    }
+
+    .icon-button {
+      width: 32px;
+      height: 32px;
+
+      svg {
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    .play-button {
+      width: 36px;
+      height: 36px;
+
+      svg {
+        width: 22px;
+        height: 22px;
+      }
+    }
+
+    .time-display,
+    .rate-button {
+      font-size: 0.75rem;
+    }
+
+    .progress-bar-thumb {
+      width: 10px;
+      height: 10px;
+    }
+  }
+
+  // ---- Group internals ----
+
+  .transport-row {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .progress-group {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .time-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  // ---- Shared element styles ----
+
+  .icon-button,
+  .play-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    cursor: pointer;
+    border: 0;
+    border-radius: 50%;
+
+    &:focus {
+      outline: 3px solid var(--focus-color);
+      outline-offset: 4px;
+    }
+
+    svg {
+      fill: currentcolor;
+    }
+  }
+
+  // .play-button takes its colours from inline theme styles; .icon-button
+  // inherits text colour and stays transparent.
+  .icon-button {
+    color: inherit;
+    background: none;
+  }
+
+  .time-display {
+    font-size: 0.85rem;
+    white-space: nowrap;
+  }
+
+  .progress-bar-container {
+    position: relative;
+    height: 24px;
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+
+      .progress-bar-thumb {
+        box-shadow: 0 0 0 3px var(--focus-color);
+      }
+    }
+  }
+
+  .progress-bar-track {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    left: 0;
+    height: 4px;
+    border-radius: 2px;
+    transform: translateY(-50%);
+  }
+
+  .progress-bar-fill {
+    height: 100%;
+    border-radius: 2px;
+  }
+
+  .progress-bar-thumb {
+    position: absolute;
+    top: 50%;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .rate-button {
+    padding: 4px 8px;
+    font-weight: bold;
+    color: inherit;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: 4px;
+
+    &:focus {
+      outline: 3px solid var(--focus-color);
+      outline-offset: 4px;
+    }
+  }
+
+</style>
diff --git a/kolibri/plugins/media_player/frontend/views/AudioStickyPlayer.vue b/kolibri/plugins/media_player/frontend/views/AudioStickyPlayer.vue
new file mode 100644
index 00000000000..961cd55a6d7
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/views/AudioStickyPlayer.vue
@@ -0,0 +1,92 @@
+<template>
+
+  <div
+    class="sticky-player"
+    :class="{ 'sticky-top': !windowIsSmall, 'sticky-bottom': windowIsSmall }"
+    :style="containerStyle"
+  >
+    <AudioPlayerControls :rows="windowIsSmall ? 2 : 1" />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { computed, getCurrentInstance } from 'vue';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import { injectMediaPlayer } from '../composables/useMediaPlayer';
+  import AudioPlayerControls from './AudioPlayerControls';
+
+  export default {
+    name: 'AudioStickyPlayer',
+    components: {
+      AudioPlayerControls,
+    },
+    setup() {
+      const instance = getCurrentInstance().proxy;
+      const { windowIsSmall } = useKResponsiveWindow();
+      const { containerRect } = injectMediaPlayer();
+
+      // containerRect comes from useScrollContainer, which recomputes on
+      // mount/resize/ResizeObserver but NOT on scroll. This is correct because
+      // the player renders inside the learn layout's inner scroll pane, whose
+      // viewport rect is fixed while its content scrolls; the fixed bar stays
+      // put. If this is ever mounted where the scroll container itself moves in
+      // the viewport, containerRect would need a scroll listener too.
+      // left/top are physical overlay coordinates from getBoundingClientRect,
+      // so they are intentionally not RTL-flipped.
+      const containerStyle = computed(() => {
+        const rect = containerRect.value;
+        const style = {
+          backgroundColor: instance.$themeTokens.surface,
+          borderColor: instance.$themeTokens.fineLine,
+        };
+        if (windowIsSmall.value) {
+          // Mobile: full-width bar anchored to the bottom of the scroll container
+          const bottomOffset = window.innerHeight - rect.bottom;
+          style.bottom = bottomOffset + 'px';
+          style.left = rect.left + 'px';
+          style.width = rect.width + 'px';
+        } else {
+          // Desktop: floating card anchored to the top of the scroll container
+          const maxWidth = 640;
+          const playerWidth = Math.min(maxWidth, rect.width);
+          const centerOffset = rect.left + (rect.width - playerWidth) / 2;
+          style.top = rect.top + 8 + 'px';
+          style.left = centerOffset + 'px';
+          style.width = playerWidth + 'px';
+        }
+        return style;
+      });
+
+      return {
+        windowIsSmall,
+        containerStyle,
+      };
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .sticky-player {
+    position: fixed;
+    z-index: 10;
+    box-sizing: border-box;
+    padding: 8px 12px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  }
+
+  .sticky-top {
+    border-bottom: 1px solid;
+  }
+
+  .sticky-bottom {
+    border-radius: 0;
+  }
+
+</style>
diff --git a/kolibri/plugins/media_player/frontend/views/VideoPlayer.vue b/kolibri/plugins/media_player/frontend/views/VideoPlayer.vue
new file mode 100644
index 00000000000..4529abd8418
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/views/VideoPlayer.vue
@@ -0,0 +1,837 @@
+<template>
+
+  <div>
+    <MediaPlayerFullscreen
+      class="fill-space fullscreen-wrapper"
+      :style="{
+        'border-color': $themeTokens.fineLine,
+        padding: fullscreenWrapperPadding,
+      }"
+      @changeFullscreen="isFullscreen = $event"
+    >
+      <!-- Keyed on the source: video.js removes the element it wrapped when the
+      player is disposed, so re-init needs a freshly mounted <video> tag. Keying
+      the tag itself does not work — video.js has moved it into its own wrapper,
+      so Vue's replacement insert is a no-op. -->
+      <div
+        :key="defaultFile && defaultFile.storage_url"
+        ref="wrapper"
+        :style="{
+          '--video-primary': $themeTokens.primary,
+          '--video-unbuffered': $themePalette.grey.v_200,
+          '--video-fineline': $themeTokens.fineLine,
+          '--video-focus': $themeTokens.focusOutline,
+        }"
+        :class="[
+          'wrapper',
+          {
+            'keyboard-modality': $inputModality === 'keyboard',
+            'video-loading': loading,
+            'transcript-visible': transcriptVisible,
+            'transcript-wrap': transcriptWrap,
+          },
+        ]"
+      >
+        <div
+          v-show="loading"
+          class="fill-space loading-space"
+        >
+          <KCircularLoader
+            class="loader"
+            :delay="true"
+          />
+        </div>
+
+        <video
+          ref="playerRef"
+          class="custom-skin video-js"
+        >
+          <source
+            v-for="video in videoSources"
+            :key="video.storage_url"
+            :src="video.storage_url"
+            :type="`video/${video.extension}`"
+          >
+          <track
+            v-for="track in trackSources"
+            :key="track.storage_url"
+            kind="captions"
+            :src="track.storage_url"
+            :srclang="track.lang.id"
+            :label="track.lang.lang_name"
+            :default="isDefaultTrack(track.lang.id)"
+          >
+        </video>
+
+        <MediaPlayerTranscript
+          v-if="transcriptVisible"
+          ref="transcript"
+          :style="transcriptStyle"
+        />
+      </div>
+    </MediaPlayerFullscreen>
+  </div>
+
+</template>
+
+
+<script>
+
+  import vue, { computed, ref, watch, getCurrentInstance } from 'vue';
+  import videojs from 'video.js';
+  import { useThrottleFn, useEventListener } from '@vueuse/core';
+  import { coreString } from 'kolibri/uiText/commonCoreStrings';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import useKResponsiveElement from 'kolibri-design-system/lib/composables/useKResponsiveElement';
+  import useMediaPlayer, { PLAYBACK_RATES } from '../composables/useMediaPlayer';
+  import { VIDEO_PRESETS } from '../utils/fileExtractors';
+  import mediaStrings from '../utils/mediaStrings';
+  import { ReplayButton, ForwardButton, BigPlayToggle } from './customButtons';
+  import MediaPlayerFullscreen from './MediaPlayerFullscreen';
+  import MimicFullscreenToggle from './MediaPlayerFullscreen/mimicFullscreenToggle';
+  import MediaPlayerTranscript from './MediaPlayerTranscript';
+  import CaptionsButton from './MediaPlayerCaptions/captionsButton';
+  import LanguagesButton from './MediaPlayerLanguages/languagesButton';
+
+  const GlobalLangCode = vue.locale;
+  const componentsToRegister = {
+    MimicFullscreenToggle,
+    ReplayButton,
+    ForwardButton,
+    BigPlayToggle,
+    CaptionsButton,
+    LanguagesButton,
+  };
+  Object.entries(componentsToRegister).forEach(([name, component]) =>
+    videojs.registerComponent(name, component),
+  );
+
+  export default {
+    name: 'VideoPlayer',
+    components: { MediaPlayerFullscreen, MediaPlayerTranscript },
+    setup(props, context) {
+      const instance = getCurrentInstance().proxy;
+      const { windowIsSmall, windowIsPortrait } = useKResponsiveWindow();
+      const { elementWidth } = useKResponsiveElement();
+      const wrapper = ref(null);
+      const playerRef = ref(null);
+      const isFullscreen = ref(false);
+
+      // Initialize media player composable
+      const {
+        player,
+        files,
+        defaultFile,
+        captionTracks,
+        transcript,
+        trackSources,
+        isDefaultTrack,
+        loading,
+      } = useMediaPlayer(context, {
+        wrapperRef: wrapper,
+        playerRef,
+        getPlayerConfig,
+        onReady() {
+          const focusOnPlayControl = () => {
+            player.value.controlBar.getChild('PlayToggle')?.el().focus();
+          };
+          player.value.on('play', focusOnPlayControl);
+          player.value.on('pause', focusOnPlayControl);
+
+          // BigPlayButton is disabled in the player config; we add our own
+          // BigPlayToggle (which switches between play/pause icons) plus
+          // skip back/forward buttons as a centered cluster on the player.
+          // Default player children (with bigPlayButton: false) are:
+          // [mediaLoader, posterImage, textTrackDisplay, loadingSpinner,
+          //  liveTracker, controlBar, ...]
+          // Insert at index 4 so they sit between loadingSpinner and liveTracker.
+          player.value.addChild('ReplayButton', {}, 4);
+          player.value.addChild('BigPlayToggle', {}, 5);
+          player.value.addChild('ForwardButton', {}, 6);
+
+          updatePlayerSizeClass();
+          resizePlayer();
+        },
+      });
+
+      // Computed
+      const videoSources = computed(() => {
+        return files.value.filter(file => VIDEO_PRESETS.has(file.preset));
+      });
+
+      const transcriptVisible = computed(() => {
+        return transcript.value && !loading.value && captionTracks.value.length > 0;
+      });
+
+      const transcriptWrap = computed(() => {
+        return windowIsPortrait.value || (!isFullscreen.value && windowIsSmall.value);
+      });
+
+      const transcriptStyle = computed(() => {
+        const border = `1px solid ${instance.$themeTokens.fineLine}`;
+        if (!transcriptWrap.value) {
+          // Inline directional style: RTLCSS cannot flip inline styles, so pick
+          // the leading edge explicitly.
+          return instance.isRtl ? { borderRight: border } : { borderLeft: border };
+        }
+        return { borderTop: border };
+      });
+
+      const fullscreenWrapperPadding = computed(() => {
+        if (isFullscreen.value) {
+          return 0;
+        }
+        return transcriptWrap.value ? '16px' : '32px 24px';
+      });
+
+      // Functions
+      function updatePlayerSizeClass() {
+        if (!player.value) return;
+        player.value.removeClass('player-medium');
+        player.value.removeClass('player-small');
+        player.value.removeClass('player-tiny');
+        if (elementWidth.value < 600) {
+          player.value.addClass('player-medium');
+        }
+        if (elementWidth.value < 480) {
+          player.value.addClass('player-small');
+        }
+        if (elementWidth.value < 360) {
+          player.value.addClass('player-tiny');
+        }
+      }
+
+      function resizePlayer() {
+        // Can fire as a trailing throttled call after unmount, when wrapper is null.
+        if (!wrapper.value) {
+          return;
+        }
+        if (isFullscreen.value) {
+          wrapper.value.style.height = '100%';
+          return;
+        }
+        const aspectRatio = 16 / 9;
+        const adjustedHeight = wrapper.value.clientWidth * (1 / aspectRatio);
+        wrapper.value.style.height = `${adjustedHeight}px`;
+      }
+
+      const throttledResizePlayer = useThrottleFn(resizePlayer, 300);
+      // useEventListener auto-removes the listener when the component unmounts.
+      useEventListener(window, 'resize', throttledResizePlayer);
+
+      function getPlayerConfig() {
+        const controlBarChildren = [
+          { name: 'PlayToggle' },
+          { name: 'CurrentTimeDisplay' },
+          { name: 'ProgressControl' },
+          { name: 'TimeDivider' },
+          { name: 'DurationDisplay' },
+          {
+            name: 'VolumePanel',
+            inline: false,
+          },
+          { name: 'PlaybackRateMenuButton' },
+          {
+            name: 'CaptionsButton',
+            vueParent: instance,
+          },
+          {
+            name: 'LanguagesButton',
+            vueParent: instance,
+          },
+          { name: 'MimicFullscreenToggle' },
+        ];
+        return {
+          fluid: false,
+          fill: true,
+          controls: true,
+          textTrackDisplay: true,
+          // We use BigPlayToggle (added at runtime via addChild) instead of
+          // the default BigPlayButton, so the centered overlay button can
+          // toggle between play and pause icons based on player state.
+          bigPlayButton: false,
+          preload: 'metadata',
+          playbackRates: PLAYBACK_RATES,
+          controlBar: {
+            children: controlBarChildren,
+          },
+          language: GlobalLangCode,
+          languages: {
+            [GlobalLangCode]: {
+              Play: mediaStrings.play$(),
+              Pause: mediaStrings.pause$(),
+              Replay: mediaStrings.replay$(),
+              Forward: mediaStrings.forward$(),
+              'Current Time': mediaStrings.currentTime$(),
+              'Duration Time': mediaStrings.durationTime$(),
+              Loaded: mediaStrings.loaded$(),
+              Progress: coreString('progressLabel'),
+              'Progress Bar': mediaStrings.progressBar$(),
+              Fullscreen: mediaStrings.fullscreen$(),
+              'Non-Fullscreen': mediaStrings.nonFullscreen$(),
+              Mute: mediaStrings.mute$(),
+              Unmute: mediaStrings.unmute$(),
+              'Playback Rate': mediaStrings.playbackRate$(),
+              Captions: mediaStrings.captions$(),
+              'captions off': mediaStrings.captionsOff$(),
+              Transcript: coreString('transcript'),
+              'Transcript off': mediaStrings.transcriptOff$(),
+              Languages: mediaStrings.languages$(),
+              'Volume Level': mediaStrings.volumeLevel$(),
+              'A network error caused the media download to fail part-way.':
+                mediaStrings.networkError$(),
+              'The media could not be loaded, either because the server or network failed or because the format is not supported.':
+                mediaStrings.formatError$(),
+              'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.':
+                mediaStrings.corruptionOrSupportError$(),
+              'No compatible source was found for this media.': mediaStrings.sourceError$(),
+              'The media is encrypted and we do not have the keys to decrypt it.':
+                mediaStrings.encryptionError$(),
+            },
+          },
+        };
+      }
+
+      // Watchers
+      // Registered here in setup (not in onReady) so it is scope-disposed on
+      // unmount; guarded in updatePlayerSizeClass for the pre-ready null player.
+      watch(elementWidth, () => updatePlayerSizeClass());
+      watch(isFullscreen, () => resizePlayer());
+
+      return {
+        wrapper,
+        playerRef,
+        defaultFile,
+        isFullscreen,
+        videoSources,
+        transcriptVisible,
+        transcriptWrap,
+        transcriptStyle,
+        fullscreenWrapperPadding,
+        loading,
+        trackSources,
+        isDefaultTrack,
+      };
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  // Unable to reference the videojs using require since videojs doesn't have good webpack support
+  @import './videojs-style/video-js.min.css';
+  // Custom build icons.
+  @import './videojs-style/videojs-font/css/videojs-icons.css';
+  @import './videojs-style/variables';
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .fullscreen-wrapper {
+    box-sizing: border-box;
+  }
+
+  .wrapper {
+    box-sizing: content-box;
+    max-width: 100%;
+    max-height: #{$video-player-max-vh};
+  }
+
+  .wrapper.transcript-visible.transcript-wrap {
+    padding-bottom: #{$transcript-wrap-height};
+  }
+
+  .wrapper.video-loading video {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.1;
+  }
+
+  .fill-space,
+  /deep/ .fill-space {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border: 1px solid transparent;
+  }
+
+  .loading-space,
+  /deep/ .loading-space {
+    box-sizing: border-box;
+    padding-top: #{$video-player-height-by-width};
+  }
+
+  /deep/ .loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .media-player-transcript {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+    box-sizing: border-box;
+
+    /deep/ .fill-space {
+      height: auto;
+    }
+
+    [dir='rtl'] & {
+      right: auto;
+      left: 0;
+    }
+  }
+
+  .wrapper:not(.transcript-wrap) .media-player-transcript {
+    position: absolute;
+    top: 0;
+    width: 33.333%;
+
+    /deep/ .loading-space {
+      padding-top: #{300% * 9 / 16};
+    }
+  }
+
+  .wrapper.transcript-wrap .media-player-transcript {
+    position: relative;
+    left: 0;
+    height: #{$transcript-wrap-height};
+    max-height: 200px;
+
+    /deep/ .loading-space {
+      padding-top: 90px;
+    }
+
+    [dir='rtl'] & {
+      right: 0;
+    }
+  }
+
+  .normalize-fullscreen,
+  .mimic-fullscreen {
+    border-color: transparent !important;
+
+    .wrapper {
+      max-height: none;
+    }
+
+    .wrapper.transcript-visible.transcript-wrap {
+      padding-bottom: 0;
+    }
+
+    .wrapper.transcript-visible.transcript-wrap .media-player-transcript {
+      top: 0;
+      height: calc(100vh - #{$video-player-height-vw});
+    }
+
+    .wrapper.transcript-visible.transcript-wrap .video-js.vjs-fill {
+      height: #{$video-player-height-vw};
+    }
+  }
+
+  /***** PLAYER OVERRIDES *****/
+
+  /* !!rtl:begin:ignore */
+  .transcript-visible:not(.transcript-wrap) > .video-js.vjs-fill {
+    width: 66.666%;
+  }
+
+  /* Hide control bar when playing & inactive */
+  /deep/ .vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar {
+    visibility: hidden;
+
+    /* Always show control bar in keyboard modality */
+    .keyboard-modality & {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  /* Mimics glow video.js adds on fullscreen button when focused */
+  /deep/ .vjs-captions-button.active .vjs-icon-placeholder,
+  /deep/ .vjs-languages-button.active .vjs-icon-placeholder {
+    text-shadow: 0 0 1em #ffffff;
+  }
+
+  /*** CUSTOM VIDEOJS SKIN ***/
+  /deep/ .custom-skin {
+    $button-height-normal: 40px;
+    $button-font-size-normal: 24px;
+    @include font-family-noto;
+
+    font-size: $video-player-font-size;
+    color: $video-player-font-color;
+
+    /* Sliders */
+    .vjs-slider {
+      background-color: $video-player-color-2;
+    }
+
+    /* Seek Bar */
+    .vjs-progress-control {
+      height: initial;
+      visibility: inherit;
+      opacity: inherit;
+
+      .vjs-progress-holder {
+        height: 8px;
+        margin-right: 16px;
+        margin-left: 16px;
+        background-color: var(--video-unbuffered);
+
+        .vjs-load-progress {
+          background: transparent;
+
+          div {
+            background: rgba(255, 255, 255, 0.5);
+          }
+        }
+
+        .vjs-play-progress {
+          background-color: var(--video-primary);
+
+          // The blob: a font-icon character (filled circle) rendered via
+          // ::before. Stack 1px text-shadows in 8 directions to produce a
+          // fineLine outline around the character.
+          &::before {
+            top: -5px;
+            font-size: 18px;
+            text-shadow:
+              -1px -1px 0 var(--video-fineline),
+              1px -1px 0 var(--video-fineline),
+              -1px 1px 0 var(--video-fineline),
+              1px 1px 0 var(--video-fineline),
+              -1px 0 0 var(--video-fineline),
+              1px 0 0 var(--video-fineline),
+              0 -1px 0 var(--video-fineline),
+              0 1px 0 var(--video-fineline);
+          }
+        }
+      }
+    }
+
+    /* Control Bar — transparent so controls float over the video */
+    .vjs-control-bar {
+      display: flex;
+      height: $button-height-normal;
+      background-color: transparent;
+    }
+
+    /* Fixes volume panel appearing on hover. */
+    .vjs-volume-vertical {
+      display: none;
+    }
+
+    .vjs-volume-panel-vertical {
+      &:hover {
+        .vjs-volume-vertical {
+          display: block;
+        }
+      }
+    }
+
+    .vjs-volume-level {
+      background-color: $video-player-font-color;
+    }
+
+    /* Buttons */
+    .vjs-button {
+      .vjs-icon-placeholder {
+        &::before {
+          font-size: $button-font-size-normal;
+          line-height: $button-height-normal;
+        }
+      }
+    }
+
+    /* Replace video.js's default text-shadow glow with the KDS focus
+       outline (colour bound on the wrapper element as --video-focus). */
+    .vjs-control:focus {
+      text-shadow: none;
+      outline: 2px solid var(--video-focus);
+      outline-offset: 2px;
+    }
+
+    /* Replay & Forward Buttons */
+    .vjs-icon-replay_10,
+    .vjs-icon-forward_10 {
+      font-family: VideoJS; // override our global noto fonts with more specificity
+      &::before {
+        font-size: $button-font-size-normal;
+        line-height: $button-height-normal;
+      }
+    }
+
+    /* Centered overlay play/pause toggle (BigPlayToggle, our PlayToggle
+       subclass added at runtime). Styled to match the prior BigPlayButton. */
+    > .vjs-control.vjs-big-play-toggle {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: $button-height-normal * 2;
+      height: $button-height-normal * 2;
+      margin: 0;
+      color: white;
+      background-color: var(--video-primary);
+      border: 0;
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+
+      // The play/pause icon is a font character rendered by the inner
+      // placeholder's ::before. Size it explicitly so it fills the button
+      // rather than using the default small control-bar size.
+      .vjs-icon-placeholder::before {
+        font-size: $button-font-size-normal * 2;
+        line-height: $button-height-normal * 2;
+      }
+    }
+
+    /* Skip back/forward buttons sit on the player as siblings of BigPlayButton.
+       Override video.js's default `.video-js .vjs-control { height: 100% }`
+       which would otherwise make them cover the entire video. */
+    $skip-button-size: $button-height-normal * 1.2;
+
+    > .vjs-control.vjs-icon-replay_10,
+    > .vjs-control.vjs-icon-forward_10 {
+      position: absolute;
+      top: 50%;
+      width: $skip-button-size;
+      height: $skip-button-size;
+      color: white;
+      // Translucent dark underlay to keep the white glyph legible against
+      // light video frames or text behind the button.
+      background-color: rgba(0, 0, 0, 0.5);
+      border: 0;
+      border-radius: 50%;
+      transform: translateY(-50%);
+
+      // The icon character is rendered by ::before; size it relative to
+      // the button and use line-height matching the button height for
+      // vertical centering. Higher-specificity overrides the existing
+      // .vjs-icon-replay_10::before rule.
+      &::before {
+        font-size: $skip-button-size * 0.55;
+        line-height: $skip-button-size;
+      }
+    }
+
+    > .vjs-control.vjs-icon-replay_10 {
+      right: calc(50% + #{$button-height-normal * 1.5});
+    }
+
+    > .vjs-control.vjs-icon-forward_10 {
+      left: calc(50% + #{$button-height-normal * 1.5});
+    }
+
+    /* Match the visibility rule video.js uses for the control bar: only
+       hide the centered overlay buttons (BigPlayToggle + skip buttons)
+       when the video is actively playing AND the user is inactive. In
+       all other states (initial, paused, or hovered) they show. */
+    &.vjs-has-started.vjs-playing.vjs-user-inactive > .vjs-control.vjs-big-play-toggle,
+    &.vjs-has-started.vjs-playing.vjs-user-inactive > .vjs-control.vjs-icon-replay_10,
+    &.vjs-has-started.vjs-playing.vjs-user-inactive > .vjs-control.vjs-icon-forward_10 {
+      display: none;
+    }
+
+    .vjs-volume-panel {
+      margin-left: auto;
+    }
+
+    /* Transcript button */
+    .vjs-button-transcript img {
+      max-width: 20px;
+    }
+
+    .vjs-transcript-visible > .vjs-tech,
+    .vjs-transcript-visible > .vjs-modal-dialog,
+    .vjs-transcript-visible > .vjs-text-track-display,
+    .vjs-transcript-visible > .vjs-text-track-settings,
+    .vjs-transcript-visible > .vjs-control-bar {
+      right: auto;
+      width: calc(100% - 330px);
+    }
+
+    /* Menus */
+    .vjs-menu {
+      li {
+        padding: 8px;
+        font-size: $video-player-font-size;
+        background-color: $video-player-color;
+
+        &:focus,
+        &:hover {
+          background-color: $video-player-color-3;
+        }
+      }
+
+      li.vjs-selected {
+        font-weight: bold;
+        color: $video-player-font-color;
+        background-color: $video-player-color-2;
+
+        &:focus,
+        &:hover {
+          background-color: $video-player-color-3;
+        }
+      }
+    }
+
+    .vjs-menu-content {
+      @include font-family-noto;
+    }
+
+    .vjs-volume-control {
+      background-color: $video-player-color;
+    }
+
+    .vjs-playback-rate .vjs-menu {
+      min-width: 4em;
+    }
+
+    /* Time */
+    .vjs-current-time {
+      display: block;
+      padding-right: 0;
+
+      .vjs-current-time-display {
+        font-size: $video-player-font-size;
+        line-height: $button-height-normal;
+      }
+    }
+
+    .vjs-duration {
+      display: block;
+      padding-left: 0;
+
+      .vjs-duration-display {
+        font-size: $video-player-font-size;
+        line-height: $button-height-normal;
+      }
+    }
+
+    .vjs-time-divider {
+      padding: 0;
+      text-align: center;
+    }
+
+    /* Rate Button */
+    .vjs-playback-rate-value {
+      font-size: 20px;
+      line-height: $button-height-normal;
+    }
+
+    /* Captions Settings */
+    .vjs-texttrack-settings {
+      display: none;
+    }
+  }
+
+  /*** MEDIUM: < 600px ***/
+  /deep/ .player-medium {
+    /* Seek bar moves up. */
+    .vjs-progress-control {
+      position: absolute;
+      top: -16px;
+      right: 0;
+      left: 0;
+      width: auto;
+    }
+
+    /* Time divider is displayed. */
+    .vjs-time-divider {
+      display: block;
+    }
+
+    .vjs-slider-bar::before {
+      z-index: 0;
+    }
+  }
+
+  /*** SMALL: < 480px ***/
+
+  /* Shrink the centred overlay cluster (BigPlayToggle + skip buttons) so it
+     fits a narrow viewport. Compound selectors match the desktop sizing
+     rules' specificity, so source order wins. */
+  /deep/ .player-small {
+    $small-play-size: 56px;
+    $small-skip-size: 36px;
+
+    > .vjs-control.vjs-big-play-toggle {
+      width: $small-play-size;
+      height: $small-play-size;
+
+      .vjs-icon-placeholder::before {
+        font-size: $small-play-size * 0.5;
+        line-height: $small-play-size;
+      }
+    }
+
+    > .vjs-control.vjs-icon-replay_10,
+    > .vjs-control.vjs-icon-forward_10 {
+      width: $small-skip-size;
+      height: $small-skip-size;
+
+      &::before {
+        font-size: $small-skip-size * 0.55;
+        line-height: $small-skip-size;
+      }
+    }
+
+    > .vjs-control.vjs-icon-replay_10 {
+      right: calc(50% + #{$small-play-size * 0.6});
+    }
+
+    > .vjs-control.vjs-icon-forward_10 {
+      left: calc(50% + #{$small-play-size * 0.6});
+    }
+  }
+
+  /*** TINY: < 360px ***/
+  /deep/ .player-tiny {
+    $tiny-play-size: 44px;
+    $tiny-skip-size: 30px;
+
+    /* Time divider and duration hidden — only current time fits. */
+    .vjs-time-divider,
+    .vjs-duration {
+      display: none;
+    }
+
+    > .vjs-control.vjs-big-play-toggle {
+      width: $tiny-play-size;
+      height: $tiny-play-size;
+
+      .vjs-icon-placeholder::before {
+        font-size: $tiny-play-size * 0.5;
+        line-height: $tiny-play-size;
+      }
+    }
+
+    > .vjs-control.vjs-icon-replay_10,
+    > .vjs-control.vjs-icon-forward_10 {
+      width: $tiny-skip-size;
+      height: $tiny-skip-size;
+
+      &::before {
+        font-size: $tiny-skip-size * 0.55;
+        line-height: $tiny-skip-size;
+      }
+    }
+
+    > .vjs-control.vjs-icon-replay_10 {
+      right: calc(50% + #{$tiny-play-size * 0.6});
+    }
+
+    > .vjs-control.vjs-icon-forward_10 {
+      left: calc(50% + #{$tiny-play-size * 0.6});
+    }
+  }
+
+  /* !!rtl:end:ignore */
+
+</style>
diff --git a/kolibri/plugins/media_player/frontend/views/__tests__/AudioPlayer.spec.js b/kolibri/plugins/media_player/frontend/views/__tests__/AudioPlayer.spec.js
new file mode 100644
index 00000000000..7fb91172b83
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/views/__tests__/AudioPlayer.spec.js
@@ -0,0 +1,240 @@
+import { render, screen, fireEvent } from '@testing-library/vue';
+import { ref, nextTick } from 'vue';
+
+// Fake video.js (the hard boundary) so the REAL useMediaPlayer / useCaptions /
+// useMediaProgress run. useContentViewer is the content-data boundary.
+jest.mock('video.js', () => require('../../test/videojsMock').videojsModuleMock());
+jest.mock('kolibri/composables/useContentViewer');
+
+/* eslint-disable import-x/first, import-x/named */
+import videojs from 'video.js';
+import useContentViewer, { useContentViewerMock } from 'kolibri/composables/useContentViewer';
+import AudioPlayer from '../AudioPlayer';
+import mediaStrings from '../../utils/mediaStrings';
+import { createTrack, flushPlayerReady } from '../../test/videojsMock';
+/* eslint-enable import-x/first, import-x/named */
+
+const { progressBar$, showTranscript$, hideTranscript$ } = mediaStrings;
+
+const AUDIO_FILES = [
+  { storage_url: '/audio.mp3', preset: 'audio', extension: 'mp3', available: true },
+  { storage_url: '/audio.ogg', preset: 'audio', extension: 'ogg', available: true },
+];
+
+const mockWindowIsSmall = ref(false);
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => () => ({
+  windowIsSmall: mockWindowIsSmall,
+}));
+
+function mockContent(overrides = {}) {
+  useContentViewer.mockImplementation(() =>
+    useContentViewerMock({ files: AUDIO_FILES, defaultFile: AUDIO_FILES[0], ...overrides }),
+  );
+}
+
+async function renderReady(overrides) {
+  if (overrides) {
+    mockContent(overrides);
+  }
+  const utils = render(AudioPlayer);
+  await flushPlayerReady();
+  return utils;
+}
+
+// Access the fake player created during init and bind a text-track list to it.
+function bindTracks(tracks) {
+  const player = videojs.mock.results.at(-1).value;
+  player._setTextTracks(tracks);
+  player.trigger('loadstart');
+  return player;
+}
+
+describe('AudioPlayer', () => {
+  let intersectionCallback;
+  const mockObserve = jest.fn();
+  const mockDisconnect = jest.fn();
+
+  beforeAll(() => {
+    global.IntersectionObserver = jest.fn(callback => {
+      intersectionCallback = callback;
+      return { observe: mockObserve, disconnect: mockDisconnect };
+    });
+  });
+
+  beforeEach(() => {
+    window.localStorage.clear();
+    videojs.mockClear();
+    mockObserve.mockClear();
+    mockDisconnect.mockClear();
+    mockWindowIsSmall.value = false;
+    mockContent();
+  });
+
+  describe('loading state', () => {
+    it('shows the loader until the player is ready', () => {
+      // With no source file the player never initializes, so loading stays true.
+      mockContent({ defaultFile: null });
+      render(AudioPlayer);
+      expect(screen.getByRole('progressbar')).toBeVisible();
+    });
+
+    it('hides the controls while loading', () => {
+      mockContent({ defaultFile: null });
+      render(AudioPlayer);
+      expect(screen.queryByRole('slider', { name: progressBar$() })).not.toBeInTheDocument();
+    });
+
+    it('shows the controls once the player is ready', async () => {
+      await renderReady();
+      screen.getByRole('slider', { name: progressBar$() });
+    });
+  });
+
+  describe('audio sources', () => {
+    it('renders a source element per audio file', () => {
+      const { container } = render(AudioPlayer);
+      expect(container.querySelectorAll('audio source')).toHaveLength(2);
+    });
+
+    it('sets the MIME type on each source', () => {
+      const { container } = render(AudioPlayer);
+      const sources = container.querySelectorAll('audio source');
+      expect(sources[0]).toHaveAttribute('type', 'audio/mpeg');
+      expect(sources[1]).toHaveAttribute('type', 'audio/ogg');
+    });
+  });
+
+  describe('poster image', () => {
+    it('shows the poster once loaded when a thumbnail exists', async () => {
+      await renderReady({ thumbnailFiles: [{ storage_url: '/poster.jpg' }] });
+      expect(screen.getByRole('img')).toHaveAttribute('src', '/poster.jpg');
+    });
+
+    it('renders no poster when there are no thumbnails', async () => {
+      await renderReady();
+      expect(screen.queryByRole('img')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('transcript', () => {
+    it('shows the transcript toggle when the media has caption tracks', async () => {
+      await renderReady();
+      bindTracks([createTrack({ language: 'en' })]);
+      await nextTick();
+      screen.getByRole('button', { name: showTranscript$() });
+    });
+
+    it('hides the transcript toggle when there are no caption tracks', async () => {
+      await renderReady();
+      expect(screen.queryByRole('button', { name: showTranscript$() })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: hideTranscript$() })).not.toBeInTheDocument();
+    });
+
+    it('flips the toggle label when clicked', async () => {
+      await renderReady();
+      bindTracks([createTrack({ language: 'en' })]);
+      await nextTick();
+
+      await fireEvent.click(screen.getByRole('button', { name: showTranscript$() }));
+
+      screen.getByRole('button', { name: hideTranscript$() });
+    });
+  });
+
+  describe('sticky player', () => {
+    it('does not show the sticky player when paused', async () => {
+      const { container } = await renderReady();
+      videojs.mock.results.at(-1).value.trigger('pause');
+      intersectionCallback([{ isIntersecting: false }]);
+      await nextTick();
+      expect(container.querySelector('.sticky-top, .sticky-bottom')).toBeNull();
+    });
+
+    it('shows the sticky player when playing and scrolled out of view', async () => {
+      const { container } = await renderReady();
+      const player = videojs.mock.results.at(-1).value;
+      player.trigger('play');
+      intersectionCallback([{ isIntersecting: false }]);
+      await nextTick();
+      expect(container.querySelector('.sticky-top, .sticky-bottom')).toBeTruthy();
+    });
+
+    it('hides the sticky player again when scrolled back into view', async () => {
+      const { container } = await renderReady();
+      const player = videojs.mock.results.at(-1).value;
+      player.trigger('play');
+
+      intersectionCallback([{ isIntersecting: false }]);
+      await nextTick();
+      expect(container.querySelector('.sticky-top, .sticky-bottom')).toBeTruthy();
+
+      intersectionCallback([{ isIntersecting: true }]);
+      await nextTick();
+      expect(container.querySelector('.sticky-top, .sticky-bottom')).toBeNull();
+    });
+  });
+
+  describe('player initialization', () => {
+    it('initializes a video.js player on mount', async () => {
+      await renderReady();
+      expect(videojs).toHaveBeenCalledTimes(1);
+    });
+
+    it('observes the root element for intersection once ready', async () => {
+      await renderReady();
+      expect(mockObserve).toHaveBeenCalled();
+    });
+  });
+
+  describe('source change', () => {
+    // The element only takes a new player once the old one lets go of it, so
+    // re-init has to dispose before it constructs.
+    async function renderThenSwapSource() {
+      const content = useContentViewerMock({ files: AUDIO_FILES, defaultFile: AUDIO_FILES[0] });
+      useContentViewer.mockImplementation(() => content);
+      const utils = await renderReady();
+      const first = videojs.mock.results.at(-1).value;
+
+      content.defaultFile.value = { storage_url: '/other.mp3', preset: 'audio', extension: 'mp3' };
+      await flushPlayerReady();
+      return { first, ...utils };
+    }
+
+    it('disposes the previous player before constructing the new one', async () => {
+      const { first } = await renderThenSwapSource();
+
+      expect(videojs).toHaveBeenCalledTimes(2);
+      expect(first.dispose).toHaveBeenCalled();
+      expect(first.dispose.mock.invocationCallOrder[0]).toBeLessThan(
+        videojs.mock.invocationCallOrder[1],
+      );
+    });
+
+    it('leaves the new player attached to the document', async () => {
+      const { container } = await renderThenSwapSource();
+
+      const audio = videojs.mock.calls[1][0];
+      expect(container.contains(audio)).toBe(true);
+    });
+
+    it('re-observes intersection without leaking the previous observer', async () => {
+      await renderThenSwapSource();
+
+      expect(mockObserve).toHaveBeenCalledTimes(2);
+      expect(mockDisconnect).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('standalone vs embedded', () => {
+    it('applies the standalone wrapper when not embedded', () => {
+      const { container } = render(AudioPlayer);
+      expect(container.querySelector('.standalone-wrapper')).toBeTruthy();
+    });
+
+    it('drops the standalone wrapper when embedded', () => {
+      mockContent({ embedded: true });
+      const { container } = render(AudioPlayer);
+      expect(container.querySelector('.standalone-wrapper')).toBeNull();
+    });
+  });
+});
diff --git a/kolibri/plugins/media_player/frontend/views/__tests__/AudioPlayerControls.spec.js b/kolibri/plugins/media_player/frontend/views/__tests__/AudioPlayerControls.spec.js
new file mode 100644
index 00000000000..95b530a2595
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/views/__tests__/AudioPlayerControls.spec.js
@@ -0,0 +1,248 @@
+import { screen, fireEvent } from '@testing-library/vue';
+import { nextTick } from 'vue';
+
+// Fake video.js (the hard boundary) so the REAL useMediaPlayer / useSeekBar run
+// and the controls act on an actual player. useContentViewer is the content-data
+// boundary, required by the host in renderWithMediaPlayer.
+jest.mock('video.js', () => require('../../test/videojsMock').videojsModuleMock());
+jest.mock('kolibri/composables/useContentViewer');
+
+/* eslint-disable import-x/first */
+import videojs from 'video.js';
+import AudioPlayerControls from '../AudioPlayerControls';
+import mediaStrings from '../../utils/mediaStrings';
+import { setPlayerState } from '../../test/videojsMock';
+import { renderWithMediaPlayer } from '../../test/mediaPlayerHost';
+/* eslint-enable import-x/first */
+
+const {
+  play$,
+  pause$,
+  replay$,
+  forward$,
+  mute$,
+  unmute$,
+  playbackRateWithValue$,
+  playbackRateLabel$,
+  progressBar$,
+} = mediaStrings;
+
+// A 2 minute track, 30 seconds in.
+async function renderControls(state) {
+  const utils = await renderWithMediaPlayer(AudioPlayerControls);
+  setPlayerState(utils.player, { currentTime: 30, duration: 120, ...state });
+  await nextTick();
+  return utils;
+}
+
+describe('AudioPlayerControls', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    videojs.mockClear();
+  });
+
+  describe('transport controls', () => {
+    it('renders play button when paused', async () => {
+      await renderControls();
+      screen.getByRole('button', { name: play$() });
+    });
+
+    it('renders pause button when playing', async () => {
+      await renderControls({ paused: false });
+      screen.getByRole('button', { name: pause$() });
+    });
+
+    it('plays when the play button is clicked', async () => {
+      const { player } = await renderControls();
+      await fireEvent.click(screen.getByLabelText(play$()));
+      expect(player.play).toHaveBeenCalledTimes(1);
+      screen.getByRole('button', { name: pause$() });
+    });
+
+    it('pauses when the pause button is clicked', async () => {
+      const { player } = await renderControls({ paused: false });
+      await fireEvent.click(screen.getByLabelText(pause$()));
+      expect(player.pause).toHaveBeenCalledTimes(1);
+      screen.getByRole('button', { name: play$() });
+    });
+
+    it('renders rewind and forward buttons', async () => {
+      await renderControls();
+      screen.getByRole('button', { name: replay$() });
+      screen.getByRole('button', { name: forward$() });
+    });
+
+    it('rewinds ten seconds when the rewind button is clicked', async () => {
+      const { player } = await renderControls();
+      await fireEvent.click(screen.getByLabelText(replay$()));
+      expect(player.currentTime()).toBe(20);
+    });
+
+    it('forwards ten seconds when the forward button is clicked', async () => {
+      const { player } = await renderControls();
+      await fireEvent.click(screen.getByLabelText(forward$()));
+      expect(player.currentTime()).toBe(40);
+    });
+
+    it('does not rewind past the start', async () => {
+      const { player } = await renderControls({ currentTime: 4 });
+      await fireEvent.click(screen.getByLabelText(replay$()));
+      expect(player.currentTime()).toBe(0);
+    });
+
+    it('does not forward past the end', async () => {
+      const { player } = await renderControls({ currentTime: 115 });
+      await fireEvent.click(screen.getByLabelText(forward$()));
+      expect(player.currentTime()).toBe(120);
+    });
+  });
+
+  describe('progress display', () => {
+    it('displays formatted current time', async () => {
+      const { container } = await renderControls();
+      const [current] = container.querySelectorAll('.time-display');
+      expect(current).toHaveTextContent('0:30');
+    });
+
+    it('displays formatted duration', async () => {
+      const { container } = await renderControls();
+      const times = container.querySelectorAll('.time-display');
+      expect(times[1]).toHaveTextContent('2:00');
+    });
+
+    it('renders a progress slider with correct ARIA attributes', async () => {
+      await renderControls();
+      const slider = screen.getByRole('slider', { name: progressBar$() });
+      expect(slider).toHaveAttribute('aria-valuemin', '0');
+      expect(slider).toHaveAttribute('aria-valuemax', '120');
+      expect(slider).toHaveAttribute('aria-valuenow', '30');
+    });
+
+    it('tracks the player as it plays', async () => {
+      const { player } = await renderControls();
+      setPlayerState(player, { currentTime: 90 });
+      await nextTick();
+      const slider = screen.getByRole('slider', { name: progressBar$() });
+      expect(slider).toHaveAttribute('aria-valuenow', '90');
+    });
+  });
+
+  describe('secondary controls', () => {
+    it('renders mute button when not muted', async () => {
+      await renderControls();
+      screen.getByRole('button', { name: mute$() });
+    });
+
+    it('renders unmute button when muted', async () => {
+      await renderControls({ muted: true });
+      screen.getByRole('button', { name: unmute$() });
+    });
+
+    it('mutes the player when the mute button is clicked', async () => {
+      const { player } = await renderControls();
+      await fireEvent.click(screen.getByLabelText(mute$()));
+      expect(player.muted()).toBe(true);
+      screen.getByRole('button', { name: unmute$() });
+    });
+
+    it('displays playback rate label', async () => {
+      await renderControls();
+      const rateLabel = playbackRateLabel$({ rate: 1.0 });
+      const name = playbackRateWithValue$({ rate: 1.0 });
+      expect(screen.getByRole('button', { name })).toHaveTextContent(rateLabel);
+    });
+
+    it('cycles playback rate when the rate button is clicked', async () => {
+      const { player } = await renderControls();
+      await fireEvent.click(screen.getByLabelText(playbackRateWithValue$({ rate: 1.0 })));
+      expect(player.playbackRate()).toBe(1.25);
+    });
+
+    it('wraps back to 0.5X after 2X', async () => {
+      const { player } = await renderControls({ playbackRate: 2.0 });
+      await fireEvent.click(screen.getByLabelText(playbackRateWithValue$({ rate: 2.0 })));
+      expect(player.playbackRate()).toBe(0.5);
+    });
+  });
+
+  describe('pointer seek', () => {
+    // duration is 120; a 200px-wide bar maps 1px → 0.6s.
+    function mockBarWidth(slider, { left = 0, width = 200 } = {}) {
+      slider.getBoundingClientRect = () => ({
+        left,
+        width,
+        right: left + width,
+        top: 0,
+        bottom: 24,
+        height: 24,
+        x: left,
+        y: 0,
+      });
+    }
+
+    async function renderWithBar() {
+      const utils = await renderControls();
+      const slider = screen.getByRole('slider', { name: progressBar$() });
+      mockBarWidth(slider);
+      return { ...utils, slider };
+    }
+
+    it('seeks to the clicked fraction of the duration on mousedown', async () => {
+      const { player, slider } = await renderWithBar();
+      await fireEvent.mouseDown(slider, { clientX: 100 });
+      // 100/200 = 0.5 → 0.5 * 120
+      expect(player.currentTime()).toBe(60);
+    });
+
+    it('updates the seek position as the pointer is dragged', async () => {
+      const { player, slider } = await renderWithBar();
+      await fireEvent.mouseDown(slider, { clientX: 0 });
+      await fireEvent.mouseMove(document, { clientX: 50 });
+      // 50/200 = 0.25 → 0.25 * 120
+      expect(player.currentTime()).toBe(30);
+    });
+
+    it('clamps the seek position to the bar bounds', async () => {
+      const { player, slider } = await renderWithBar();
+      await fireEvent.mouseDown(slider, { clientX: 500 });
+      expect(player.currentTime()).toBe(120);
+    });
+
+    it('stops seeking once the pointer is released', async () => {
+      const { player, slider } = await renderWithBar();
+      await fireEvent.mouseDown(slider, { clientX: 0 });
+      await fireEvent.mouseUp(document);
+      await fireEvent.mouseMove(document, { clientX: 100 });
+      expect(player.currentTime()).toBe(0);
+    });
+  });
+
+  describe('keyboard navigation', () => {
+    async function pressKey(key) {
+      const utils = await renderControls();
+      const slider = screen.getByRole('slider', { name: progressBar$() });
+      await fireEvent.keyDown(slider, { key });
+      return utils;
+    }
+
+    it('seeks forward five seconds on ArrowRight', async () => {
+      const { player } = await pressKey('ArrowRight');
+      expect(player.currentTime()).toBe(35);
+    });
+
+    it('seeks backward five seconds on ArrowLeft', async () => {
+      const { player } = await pressKey('ArrowLeft');
+      expect(player.currentTime()).toBe(25);
+    });
+
+    it('seeks to start on Home', async () => {
+      const { player } = await pressKey('Home');
+      expect(player.currentTime()).toBe(0);
+    });
+
+    it('seeks to end on End', async () => {
+      const { player } = await pressKey('End');
+      expect(player.currentTime()).toBe(120);
+    });
+  });
+});
diff --git a/kolibri/plugins/media_player/frontend/views/__tests__/AudioStickyPlayer.spec.js b/kolibri/plugins/media_player/frontend/views/__tests__/AudioStickyPlayer.spec.js
new file mode 100644
index 00000000000..1f553ba95e2
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/views/__tests__/AudioStickyPlayer.spec.js
@@ -0,0 +1,150 @@
+import { screen, fireEvent } from '@testing-library/vue';
+import { ref, nextTick } from 'vue';
+
+// Fake video.js (the hard boundary) so the REAL useMediaPlayer / useSeekBar run
+// and the controls act on an actual player. useContentViewer is the content-data
+// boundary, required by the host in renderWithMediaPlayer.
+jest.mock('video.js', () => require('../../test/videojsMock').videojsModuleMock());
+jest.mock('kolibri/composables/useContentViewer');
+
+const mockWindowIsSmall = ref(false);
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveWindow', () => () => ({
+  windowIsSmall: mockWindowIsSmall,
+}));
+
+/* eslint-disable import-x/first */
+import videojs from 'video.js';
+import AudioStickyPlayer from '../AudioStickyPlayer';
+import mediaStrings from '../../utils/mediaStrings';
+import { setPlayerState } from '../../test/videojsMock';
+import { renderWithMediaPlayer } from '../../test/mediaPlayerHost';
+/* eslint-enable import-x/first */
+
+const { pause$, replay$, forward$, mute$, playbackRateWithValue$, progressBar$ } = mediaStrings;
+const rateName = (rate = 1.0) => playbackRateWithValue$({ rate });
+
+// A 5 minute track playing, 45 seconds in.
+async function renderSticky(state) {
+  const utils = await renderWithMediaPlayer(AudioStickyPlayer);
+  setPlayerState(utils.player, { currentTime: 45, duration: 300, paused: false, ...state });
+  await nextTick();
+  return utils;
+}
+
+describe('AudioStickyPlayer', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    videojs.mockClear();
+    mockWindowIsSmall.value = false;
+  });
+
+  describe('desktop layout', () => {
+    it('renders all transport buttons', async () => {
+      await renderSticky();
+      screen.getByRole('button', { name: pause$() });
+      screen.getByRole('button', { name: replay$() });
+      screen.getByRole('button', { name: forward$() });
+    });
+
+    it('displays current time and duration', async () => {
+      const { container } = await renderSticky();
+      const [current, duration] = container.querySelectorAll('.time-display');
+      expect(current).toHaveTextContent('0:45');
+      expect(duration).toHaveTextContent('5:00');
+    });
+
+    it('renders progress slider with ARIA attributes', async () => {
+      await renderSticky();
+      const slider = screen.getByRole('slider', { name: progressBar$() });
+      expect(slider).toHaveAttribute('aria-valuenow', '45');
+      expect(slider).toHaveAttribute('aria-valuemax', '300');
+    });
+
+    it('renders playback rate and volume buttons', async () => {
+      await renderSticky();
+      screen.getByRole('button', { name: rateName() });
+      screen.getByRole('button', { name: mute$() });
+    });
+
+    it('applies sticky-top class on desktop', async () => {
+      const { container } = await renderSticky();
+      expect(container.querySelector('.sticky-top')).toBeTruthy();
+      expect(container.querySelector('.sticky-bottom')).toBeNull();
+    });
+  });
+
+  describe('mobile layout', () => {
+    beforeEach(() => {
+      mockWindowIsSmall.value = true;
+    });
+
+    it('applies sticky-bottom class on mobile', async () => {
+      const { container } = await renderSticky();
+      expect(container.querySelector('.sticky-bottom')).toBeTruthy();
+      expect(container.querySelector('.sticky-top')).toBeNull();
+    });
+
+    it('renders two-row layout on mobile', async () => {
+      const { container } = await renderSticky();
+      expect(container.querySelector('.rows-2')).toBeTruthy();
+      expect(container.querySelector('.rows-1')).toBeNull();
+    });
+
+    it('renders all controls in mobile layout', async () => {
+      await renderSticky();
+      screen.getByRole('button', { name: pause$() });
+      screen.getByRole('button', { name: replay$() });
+      screen.getByRole('button', { name: forward$() });
+      screen.getByRole('button', { name: rateName() });
+      screen.getByRole('button', { name: mute$() });
+    });
+  });
+
+  describe('interactions', () => {
+    it('pauses when the pause button is clicked', async () => {
+      const { player } = await renderSticky();
+      await fireEvent.click(screen.getByLabelText(pause$()));
+      expect(player.pause).toHaveBeenCalledTimes(1);
+    });
+
+    it('rewinds when the rewind button is clicked', async () => {
+      const { player } = await renderSticky();
+      await fireEvent.click(screen.getByLabelText(replay$()));
+      expect(player.currentTime()).toBe(35);
+    });
+
+    it('forwards when the forward button is clicked', async () => {
+      const { player } = await renderSticky();
+      await fireEvent.click(screen.getByLabelText(forward$()));
+      expect(player.currentTime()).toBe(55);
+    });
+
+    it('cycles playback rate on click', async () => {
+      const { player } = await renderSticky();
+      await fireEvent.click(screen.getByLabelText(rateName()));
+      expect(player.playbackRate()).toBe(1.25);
+    });
+
+    it('mutes when the volume button is clicked', async () => {
+      const { player } = await renderSticky();
+      await fireEvent.click(screen.getByLabelText(mute$()));
+      expect(player.muted()).toBe(true);
+    });
+  });
+
+  describe('keyboard navigation on progress bar', () => {
+    it('seeks forward on ArrowRight key', async () => {
+      const { player } = await renderSticky();
+      const slider = screen.getByRole('slider', { name: progressBar$() });
+      await fireEvent.keyDown(slider, { key: 'ArrowRight' });
+      expect(player.currentTime()).toBe(50);
+    });
+
+    it('seeks backward on ArrowLeft key', async () => {
+      const { player } = await renderSticky();
+      const slider = screen.getByRole('slider', { name: progressBar$() });
+      await fireEvent.keyDown(slider, { key: 'ArrowLeft' });
+      expect(player.currentTime()).toBe(40);
+    });
+  });
+});
diff --git a/kolibri/plugins/media_player/frontend/views/__tests__/VideoPlayer.spec.js b/kolibri/plugins/media_player/frontend/views/__tests__/VideoPlayer.spec.js
new file mode 100644
index 00000000000..e32ee18a795
--- /dev/null
+++ b/kolibri/plugins/media_player/frontend/views/__tests__/VideoPlayer.spec.js
@@ -0,0 +1,176 @@
+import { render, screen } from '@testing-library/vue';
+import { ref, nextTick } from 'vue';
+
+// Fake video.js (the hard boundary) so the REAL useMediaPlayer / useCaptions /
+// useMediaProgress run. useContentViewer is the content-data boundary.
+jest.mock('video.js', () => require('../../test/videojsMock').videojsModuleMock());
+jest.mock('kolibri/composables/useContentViewer');
+
+const mockElementWidth = ref(800);
+jest.mock('kolibri-design-system/lib/composables/useKResponsiveElement', () => () => ({
+  elementWidth: mockElementWidth,
+}));
+
+/* eslint-disable import-x/first, import-x/named */
+import videojs from 'video.js';
+import useContentViewer, { useContentViewerMock } from 'kolibri/composables/useContentViewer';
+import VideoPlayer from '../VideoPlayer';
+import mediaStrings from '../../utils/mediaStrings';
+import { createTrack, flushPlayerReady } from '../../test/videojsMock';
+/* eslint-enable import-x/first, import-x/named */
+
+const VIDEO_FILES = [
+  { storage_url: '/video.mp4', preset: 'high_res_video', extension: 'mp4', available: true },
+  { storage_url: '/video.webm', preset: 'low_res_video', extension: 'webm', available: true },
+];
+
+function mockContent(overrides = {}) {
+  useContentViewer.mockImplementation(() =>
+    useContentViewerMock({ files: VIDEO_FILES, defaultFile: VIDEO_FILES[0], ...overrides }),
+  );
+}
+
+async function renderReady(overrides) {
+  if (overrides) {
+    mockContent(overrides);
+  }
+  const utils = render(VideoPlayer);
+  await flushPlayerReady();
+  return utils;
+}
+
+// Access the fake player created during init and bind a text-track list to it.
+function bindTracks(tracks) {
+  const player = videojs.mock.results.at(-1).value;
+  player._setTextTracks(tracks);
+  player.trigger('loadstart');
+  return player;
+}
+
+describe('VideoPlayer', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    videojs.mockClear();
+    mockElementWidth.value = 800;
+    mockContent();
+  });
+
+  describe('video sources', () => {
+    it('renders a source element per video file', () => {
+      const { container } = render(VideoPlayer);
+      expect(container.querySelectorAll('video source')).toHaveLength(2);
+    });
+
+    it('sets the MIME type from the file extension', () => {
+      const { container } = render(VideoPlayer);
+      const sources = container.querySelectorAll('video source');
+      expect(sources[0]).toHaveAttribute('type', 'video/mp4');
+      expect(sources[1]).toHaveAttribute('type', 'video/webm');
+    });
+
+    it('ignores files that are not video presets', () => {
+      mockContent({
+        files: [...VIDEO_FILES, { storage_url: '/a.mp3', preset: 'audio', extension: 'mp3' }],
+      });
+      const { container } = render(VideoPlayer);
+      expect(container.querySelectorAll('video source')).toHaveLength(2);
+    });
+  });
+
+  describe('loading state', () => {
+    it('shows the loader until the player is ready', () => {
+      // With no source file the player never initializes, so loading stays true.
+      mockContent({ defaultFile: null });
+      render(VideoPlayer);
+      expect(screen.getByRole('progressbar')).toBeVisible();
+    });
+
+    it('hides the loader once the player is ready', async () => {
+      await renderReady();
+      // v-show hides it, so it drops out of the accessibility tree
+      expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('player initialization', () => {
+    it('initializes a video.js player on mount', async () => {
+      await renderReady();
+      expect(videojs).toHaveBeenCalledTimes(1);
+    });
+
+    it('replaces the default big play button with the custom cluster', async () => {
+      await renderReady();
+      const [, config] = videojs.mock.calls[0];
+      expect(config.bigPlayButton).toBe(false);
+
+      const player = videojs.mock.results.at(-1).value;
+      const added = player.addChild.mock.calls.map(([name]) => name);
+      expect(added).toEqual(['ReplayButton', 'BigPlayToggle', 'ForwardButton']);
+    });
+
+    it('builds the control bar with the Kolibri captions and languages buttons', async () => {
+      await renderReady();
+      const [, config] = videojs.mock.calls[0];
+      const children = config.controlBar.children.map(({ name }) => name);
+      expect(children).toContain('CaptionsButton');
+      expect(children).toContain('LanguagesButton');
+      expect(children).toContain('MimicFullscreenToggle');
+    });
+
+    it('translates the video.js control strings', async () => {
+      await renderReady();
+      const [, config] = videojs.mock.calls[0];
+      expect(config.languages[config.language].Play).toBe(mediaStrings.play$());
+    });
+
+    it('leaves the new player attached to the document after a source change', async () => {
+      const content = useContentViewerMock({ files: VIDEO_FILES, defaultFile: VIDEO_FILES[0] });
+      useContentViewer.mockImplementation(() => content);
+      const { container } = await renderReady();
+
+      content.defaultFile.value = {
+        storage_url: '/other.mp4',
+        preset: 'high_res_video',
+        extension: 'mp4',
+      };
+      await flushPlayerReady();
+
+      const video = videojs.mock.calls[1][0];
+      expect(container.contains(video)).toBe(true);
+    });
+  });
+
+  describe('player size classes', () => {
+    it('adds no size class at full width', async () => {
+      await renderReady();
+      const player = videojs.mock.results.at(-1).value;
+      expect(player.addClass).not.toHaveBeenCalled();
+    });
+
+    it('narrows the skin as the element shrinks', async () => {
+      await renderReady();
+      const player = videojs.mock.results.at(-1).value;
+
+      mockElementWidth.value = 400;
+      await nextTick();
+
+      const added = player.addClass.mock.calls.map(([name]) => name);
+      expect(added).toEqual(['player-medium', 'player-small']);
+    });
+  });
+
+  describe('transcript', () => {
+    it('stays hidden when the media has no caption tracks', async () => {
+      const { container } = await renderReady();
+      expect(container.querySelector('.transcript-visible')).toBeNull();
+    });
+
+    it('is hidden until the transcript setting is enabled', async () => {
+      const { container } = await renderReady();
+      bindTracks([createTrack({ language: 'en' })]);
+      await nextTick();
+      // captionTranscript defaults to false
+      expect(container.querySelector('.transcript-visible')).toBeNull();
+    });
+  });
+});
diff --git a/kolibri/plugins/media_player/frontend/views/customButtons.js b/kolibri/plugins/media_player/frontend/views/customButtons.js
index bead6b81813..3ec8beb7686 100644
--- a/kolibri/plugins/media_player/frontend/views/customButtons.js
+++ b/kolibri/plugins/media_player/frontend/views/customButtons.js
@@ -1,8 +1,15 @@
 import videojs from 'video.js';
+import mediaStrings from '../utils/mediaStrings';
 
 const videojsButton = videojs.getComponent('Button');
 
 export class ReplayButton extends videojsButton {
+  constructor(...args) {
+    super(...args);
+    // Set the accessible tooltip at construction time so it is translated
+    // (evaluating the translator at instantiation, after i18n is initialized).
+    this.controlText(mediaStrings.replay$());
+  }
   buildCSSClass() {
     return `vjs-icon-replay_10 ${super.buildCSSClass()}`;
   }
@@ -12,9 +19,11 @@ export class ReplayButton extends videojsButton {
   }
 }
 
-ReplayButton.prototype.controlText_ = 'Replay';
-
 export class ForwardButton extends videojsButton {
+  constructor(...args) {
+    super(...args);
+    this.controlText(mediaStrings.forward$());
+  }
   buildCSSClass() {
     return `vjs-icon-forward_10 ${super.buildCSSClass()}`;
   }
@@ -24,4 +33,13 @@ export class ForwardButton extends videojsButton {
   }
 }
 
-ForwardButton.prototype.controlText_ = 'Forward';
+const PlayToggle = videojs.getComponent('PlayToggle');
+
+// Centered overlay play/pause toggle — extends PlayToggle so it inherits the
+// play/pause icon switching tied to player state, but adds a distinct class
+// so it can be styled separately from the small toggle in the control bar.
+export class BigPlayToggle extends PlayToggle {
+  buildCSSClass() {
+    return `vjs-big-play-toggle ${super.buildCSSClass()}`;
+  }
+}
diff --git a/kolibri/plugins/media_player/package.json b/kolibri/plugins/media_player/package.json
index 872cd5ccf6e..ae15d04d4cf 100644
--- a/kolibri/plugins/media_player/package.json
+++ b/kolibri/plugins/media_player/package.json
@@ -19,5 +19,8 @@
     "video.js": "^7.21.7",
     "vue": "catalog:",
     "vuex": "catalog:"
+  },
+  "devDependencies": {
+    "@testing-library/vue": "catalog:"
   }
 }

From 8e9b435b773ab37747f9397682da155ab0dedfa0 Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Sat, 18 Jul 2026 14:14:07 -0700
Subject: [PATCH 4/4] Swap MediaPlayerIndex to composables and drop the Vuex
 store

MediaPlayerIndex now delegates to VideoPlayer or AudioPlayer and drives
state through the media composables instead of the Vuex module. Remove
the store module and its injection in videojsVueMixin, and rewire the
captions, languages, fullscreen, and transcript views onto the
composable API.
---
 .../frontend/mixins/videojsVueMixin.js        |   18 +-
 .../plugins/media_player/frontend/module.js   |   10 -
 .../frontend/modules/captions/index.js        |  298 -----
 .../media_player/frontend/modules/index.js    |   49 -
 .../MediaPlayerCaptions/SubtitlesMenuItem.vue |   14 +-
 .../TranscriptMenuItem.vue                    |   14 +-
 .../MediaPlayerCaptions/captionsButton.js     |    7 +-
 .../views/MediaPlayerFullscreen/index.vue     |   29 +-
 .../frontend/views/MediaPlayerIndex.vue       | 1086 +----------------
 .../MediaPlayerLanguages/LanguagesMenu.vue    |    4 +-
 .../LanguagesMenuItem.vue                     |   20 +-
 .../MediaPlayerLanguages/languagesButton.js   |    4 +-
 .../MediaPlayerTranscript/TranscriptCue.vue   |    5 +-
 .../views/MediaPlayerTranscript/index.vue     |   36 +-
 .../views/__tests__/MediaPlayerIndex.spec.js  |   23 -
 kolibri/plugins/media_player/package.json     |    3 +-
 pnpm-lock.yaml                                |    5 +-
 17 files changed, 123 insertions(+), 1502 deletions(-)
 delete mode 100644 kolibri/plugins/media_player/frontend/modules/captions/index.js
 delete mode 100644 kolibri/plugins/media_player/frontend/modules/index.js
 delete mode 100644 kolibri/plugins/media_player/frontend/views/__tests__/MediaPlayerIndex.spec.js

diff --git a/kolibri/plugins/media_player/frontend/mixins/videojsVueMixin.js b/kolibri/plugins/media_player/frontend/mixins/videojsVueMixin.js
index e35486f9cad..32d618e7249 100644
--- a/kolibri/plugins/media_player/frontend/mixins/videojsVueMixin.js
+++ b/kolibri/plugins/media_player/frontend/mixins/videojsVueMixin.js
@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import store from 'kolibri/store';
 import videojs from 'video.js';
 
 /**
@@ -16,7 +15,11 @@ export default function videojsVueMixin(videojsComponent, vueComponent) {
     /**
      * This is called by video.js code that usually constructs an element, but here we'll leverage
      * vue by calling it manually.
-     * @returns {Element} Root DOM element from the mounted Vue component
+     *
+     * Note: This is called FROM WITHIN the video.js Component constructor, so we must
+     * access vueParent from this.options_ (set by video.js) not from a property we try
+     * to set in our own constructor (which hasn't run yet).
+     * @returns {Element} Root element of the mounted Vue component
      */
     createEl() {
       return this.createVueComponent().$el;
@@ -29,7 +32,16 @@ export default function videojsVueMixin(videojsComponent, vueComponent) {
      */
     createVueComponent(options) {
       this.clearVueComponent();
-      this._vueComponent = new VueComponent(Object.assign({ store }, options)).$mount();
+
+      // Access vueParent from this.options_ which video.js sets up in its constructor
+      const vueParent = this.options_.vueParent;
+
+      const vueOptions = {
+        parent: vueParent,
+        ...options,
+      };
+
+      this._vueComponent = new VueComponent(vueOptions).$mount();
       return this.getVueComponent();
     }
 
diff --git a/kolibri/plugins/media_player/frontend/module.js b/kolibri/plugins/media_player/frontend/module.js
index 2074914d2fb..d062a0f5f68 100644
--- a/kolibri/plugins/media_player/frontend/module.js
+++ b/kolibri/plugins/media_player/frontend/module.js
@@ -1,20 +1,10 @@
-import store from 'kolibri/store';
 import ContentViewerModule from 'kolibri-viewer';
 import MediaPlayerComponent from './views/MediaPlayerIndex';
-import storeModule from './modules';
 
 class MediaPlayerModule extends ContentViewerModule {
   get viewerComponent() {
     return MediaPlayerComponent;
   }
-
-  get store() {
-    return store;
-  }
-
-  ready() {
-    this.store.registerModule('mediaPlayer', storeModule);
-  }
 }
 
 const mediaPlayerModule = new MediaPlayerModule();
diff --git a/kolibri/plugins/media_player/frontend/modules/captions/index.js b/kolibri/plugins/media_player/frontend/modules/captions/index.js
deleted file mode 100644
index 92b56585953..00000000000
--- a/kolibri/plugins/media_player/frontend/modules/captions/index.js
+++ /dev/null
@@ -1,298 +0,0 @@
-import vue from 'vue';
-import videojs from 'video.js';
-import trackUtils from '../../utils/track';
-import Settings from '../../utils/settings';
-
-const { handleSelectedLanguageChange } = videojs.getComponent('TextTrackMenuItem').prototype;
-
-/**
- * Build the default captions settings, seeded from the active Vue locale.
- * @returns {{captionLanguage: string, captionSubtitles: boolean, captionTranscript: boolean}}
- * The default captions settings object.
- */
-const defaultSettings = () => ({
-  captionLanguage: vue.locale,
-  captionSubtitles: true,
-  captionTranscript: false,
-});
-
-/**
- * Resolve the captions module's track list to a plain array.
- * @param {object} state - The captions module's Vuex state.
- * @returns {TextTrack[]} The configured text tracks, or an empty array when none.
- */
-const tracks = state => {
-  return trackUtils.listToArray(state.trackList || []);
-};
-
-/**
- * Find the track matching the active captions language.
- * @param {object} state - The captions module's Vuex state.
- * @returns {?TextTrack} The matching track, or undefined when no track matches.
- */
-const languageTrack = state => {
-  return tracks(state).find(track => state.language === track.language);
-};
-
-export default {
-  namespaced: true,
-  state: () => {
-    const settings = new Settings(defaultSettings());
-
-    return {
-      language: settings.captionLanguage,
-      subtitles: settings.captionSubtitles,
-      transcript: settings.captionTranscript,
-
-      trackList: null,
-      cues: [],
-      activeCueIds: [],
-
-      trackListeners: [],
-    };
-  },
-  mutations: {
-    SET_LANGUAGE(state, language) {
-      state.language = language;
-    },
-    SET_SUBTITLES(state, subtitles) {
-      state.subtitles = subtitles;
-    },
-    SET_TRANSCRIPT(state, transcript) {
-      state.transcript = transcript;
-    },
-    SET_TRACK_LIST(state, trackList) {
-      state.trackList = trackList;
-    },
-    SET_CUES(state, cues) {
-      state.cues = cues;
-    },
-    DELETE_CUES(state) {
-      state.cues = [];
-    },
-    SET_ACTIVE_CUE_IDS(state, cueIds) {
-      state.activeCueIds = cueIds;
-    },
-    DELETE_ACTIVE_CUE_IDS(state) {
-      state.activeCueIds = [];
-    },
-    ADD_TRACK_LISTENERS(state, trackId, event, listeners) {
-      state.trackListeners.push({ trackId, event, listeners });
-    },
-    RESET_TRACK_LISTENERS(state) {
-      state.trackListeners = [];
-    },
-  },
-  getters: {
-    /**
-     * The display label for the track matching the active captions language.
-     * @param {object} state - The captions module's Vuex state.
-     * @returns {string} The matching track label, or empty string when none matches.
-     */
-    languageLabel(state) {
-      const track = languageTrack(state);
-      return track ? track.label : '';
-    },
-    /**
-     * Resolve the captions module's track list to a plain array.
-     * @param {object} state - The captions module's Vuex state.
-     * @returns {TextTrack[]} The configured text tracks.
-     */
-    tracks,
-    /**
-     * Find the currently enabled text track.
-     * @param {object} state - The captions module's Vuex state.
-     * @returns {?TextTrack} The enabled track, or undefined when none is enabled.
-     */
-    activeTrack(state) {
-      return tracks(state).find(track => trackUtils.isEnabled(track));
-    },
-    /**
-     * Find the track matching the active captions language.
-     * @param {object} state - The captions module's Vuex state.
-     * @returns {?TextTrack} The matching track, or undefined when no track matches.
-     */
-    languageTrack,
-  },
-  actions: {
-    initState(store) {
-      // If no track for saved language, disable subtitles and transcript
-      if (!store.getters.languageTrack) {
-        if (store.state.subtitles) {
-          store.commit('SET_SUBTITLES', false);
-        }
-        if (store.state.transcript) {
-          store.commit('SET_TRANSCRIPT', false);
-        }
-      }
-    },
-    setLanguage(store, language) {
-      if (store.state.language === language) {
-        return;
-      }
-
-      store.commit('SET_LANGUAGE', language);
-
-      const settings = new Settings(defaultSettings());
-      settings.captionLanguage = language;
-      store.dispatch('synchronizeTrackList');
-
-      // When changing language, and there is no format enabled, enable subtitles
-      if (!store.state.subtitles && !store.state.transcript) {
-        store.dispatch('toggleSubtitles');
-      }
-
-      const track = store.getters.activeTrack;
-      if (!track) {
-        return;
-      }
-
-      // Retain video.js behavior on language change,
-      // see TextTrackMenuItem.handleSelectedLanguageChange
-      store.dispatch(
-        'mediaPlayer/withPlayer',
-        player_ => {
-          handleSelectedLanguageChange.call({
-            track,
-            player_,
-          });
-        },
-        { root: true },
-      );
-    },
-    setTrackList(store, trackList) {
-      const { language } = store.state;
-
-      if (store.state.trackList) {
-        store.state.trackListeners.forEach(({ trackId, event, listener }) => {
-          const track = store.getters.tracks.find(track => track.id === trackId);
-
-          if (track) {
-            track.removeEventListener(event, listener);
-          }
-        });
-
-        store.commit('RESET_TRACK_LISTENERS');
-      }
-
-      store.commit('SET_TRACK_LIST', trackList);
-      store.dispatch('synchronizeTrackList');
-
-      store.getters.tracks.forEach(track => {
-        const changeListener = () => {
-          if (trackUtils.isEnabled(track)) {
-            store.dispatch('setActiveCuesFromTrack', track);
-          }
-        };
-        track.addEventListener('cuechange', changeListener);
-        store.commit('ADD_TRACK_LISTENERS', track.id, 'cuechange', changeListener);
-
-        if (track.addCue.overridden) {
-          return;
-        }
-
-        // Override `addCue` method to hook into the addition of cues
-        const addCue = track.addCue.bind(track);
-        track.addCue = (...args) => {
-          const result = addCue(...args);
-
-          if (track.language == language) {
-            store.dispatch('setCuesFromTrack', track);
-            store.dispatch('setActiveCuesFromTrack', track);
-          }
-
-          return result;
-        };
-        track.addCue.overridden = true;
-      });
-    },
-    updateTrackList(store, trackList) {
-      if (store.state.trackList.length !== trackList.length) {
-        return store.dispatch('setTrackList', trackList);
-      }
-
-      store.commit('SET_TRACK_LIST', trackList);
-      store.dispatch('synchronizeTrackList');
-    },
-    setCuesFromTrack(store, track) {
-      store.commit('DELETE_CUES');
-
-      const cues = trackUtils.listToArray(track.cues || []);
-      // Ensure cues have ids
-      cues.forEach((cue, i) => {
-        cue.id = track.id + '-cue-' + i;
-      });
-
-      store.commit('SET_CUES', cues);
-    },
-    setActiveCuesFromTrack(store, track) {
-      // In case we get triggered to set active cues but haven't added cues yet, do that now
-      // This helps an issue in Safari where we don't get an updated cue list
-      if (track.cues && track.cues.length !== store.state.cues.length) {
-        store.dispatch('setCuesFromTrack', track);
-      }
-
-      store.commit('DELETE_ACTIVE_CUE_IDS');
-      store.commit(
-        'SET_ACTIVE_CUE_IDS',
-        trackUtils
-          .listToArray(track.activeCues || [])
-          .map(cue => cue.id)
-          .filter(Boolean),
-      );
-    },
-    synchronizeTrackList(store) {
-      const { subtitles, transcript } = store.state;
-      const { language } = store.state;
-      const settings = new Settings(defaultSettings());
-      settings.captionSubtitles = subtitles;
-      settings.captionTranscript = transcript;
-
-      store.getters.tracks.forEach(track => {
-        if (track.language === language) {
-          trackUtils.setMode(track, subtitles || transcript, !subtitles);
-        } else {
-          trackUtils.setMode(track, false);
-        }
-
-        if (trackUtils.isEnabled(track)) {
-          store.dispatch('setCuesFromTrack', track);
-          store.dispatch('setActiveCuesFromTrack', track);
-          store.dispatch('setLanguage', track.language);
-        }
-      });
-    },
-    checkLanguageTrack(store) {
-      const { subtitles, transcript } = store.state;
-      let language;
-
-      // When we enable either subtitles or transcript, ensure we have appropriate language track
-      if ((subtitles || transcript) && !store.getters.languageTrack) {
-        if (store.getters.activeTrack) {
-          language = store.getters.activeTrack.language;
-        } else {
-          // Just use language of first track as fallback
-          language = store.getters.tracks[0].language;
-        }
-      }
-
-      if (language && language !== store.state.language) {
-        store.commit('SET_LANGUAGE', language);
-      }
-    },
-    toggleSubtitles(store) {
-      store.commit('SET_SUBTITLES', !store.state.subtitles);
-      store.dispatch('checkLanguageTrack');
-      store.dispatch('synchronizeTrackList');
-    },
-    toggleTranscript(store) {
-      store.commit('SET_TRANSCRIPT', !store.state.transcript);
-      store.dispatch('checkLanguageTrack');
-      store.dispatch('synchronizeTrackList');
-    },
-    resetState(store) {
-      store.commit('DELETE_CUES');
-      store.commit('DELETE_ACTIVE_CUE_IDS');
-    },
-  },
-};
diff --git a/kolibri/plugins/media_player/frontend/modules/index.js b/kolibri/plugins/media_player/frontend/modules/index.js
deleted file mode 100644
index 7051c827957..00000000000
--- a/kolibri/plugins/media_player/frontend/modules/index.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import captions from './captions';
-
-export default {
-  namespaced: true,
-  state: {
-    player: null,
-  },
-  mutations: {
-    SET_PLAYER(state, player) {
-      state.player = player;
-    },
-  },
-  getters: {},
-  actions: {
-    setPlayer(store, player) {
-      store.dispatch('resetState');
-
-      player.one('loadstart', () => {
-        store.dispatch('captions/setTrackList', player.textTracks());
-
-        const onTrackChange = () => {
-          store.dispatch('captions/updateTrackList', player.textTracks());
-        };
-        player.on('texttrackchange', onTrackChange);
-        player.on('dispose', () => player.off('texttrackchange', onTrackChange));
-      });
-
-      player.one('loadedmetadata', () => {
-        store.dispatch('captions/initState');
-      });
-
-      store.commit('SET_PLAYER', player);
-    },
-    withPlayer(store, callback) {
-      return callback(store.state.player);
-    },
-    resetState(store) {
-      if (store.state.player) {
-        store.state.player.dispose();
-        store.commit('SET_PLAYER', null);
-      }
-
-      store.dispatch('captions/resetState');
-    },
-  },
-  modules: {
-    captions,
-  },
-};
diff --git a/kolibri/plugins/media_player/frontend/views/MediaPlayerCaptions/SubtitlesMenuItem.vue b/kolibri/plugins/media_player/frontend/views/MediaPlayerCaptions/SubtitlesMenuItem.vue
index 05d4710422e..bde34c5c57f 100644
--- a/kolibri/plugins/media_player/frontend/views/MediaPlayerCaptions/SubtitlesMenuItem.vue
+++ b/kolibri/plugins/media_player/frontend/views/MediaPlayerCaptions/SubtitlesMenuItem.vue
@@ -17,17 +17,19 @@
 
 <script>
 
-  import { mapState, mapActions } from 'vuex';
+  import { injectMediaPlayer } from '../../composables/useMediaPlayer';
 
   export default {
     name: 'SubtitlesMenuItem',
-    computed: {
-      ...mapState('mediaPlayer/captions', {
-        selected: 'subtitles',
-      }),
+    setup() {
+      const { subtitles, toggleSubtitles } = injectMediaPlayer();
+
+      return {
+        selected: subtitles,
+        toggleSubtitles,
+      };
     },
     methods: {
-      ...mapActions('mediaPlayer/captions', ['toggleSubtitles']),
       /**
        * Accessible via parent component refs.
        * @public
diff --git a/kolibri/plugins/media_player/frontend/views/MediaPlayerCaptions/TranscriptMenuItem.vue b/kolibri/plugins/media_player/frontend/views/MediaPlayerCaptions/TranscriptMenuItem.vue
index bfb4c4a4aa9..9a9791961a4 100644
--- a/kolibri/plugins/media_player/frontend/views/MediaPlayerCaptions/TranscriptMenuItem.vue
+++ b/kolibri/plugins/media_player/frontend/views/MediaPlayerCaptions/TranscriptMenuItem.vue
@@ -20,19 +20,21 @@
 
 <script>
 
-  import { mapState, mapActions } from 'vuex';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import { injectMediaPlayer } from '../../composables/useMediaPlayer';
 
   export default {
     name: 'TranscriptMenuItem',
     mixins: [commonCoreStrings],
-    computed: {
-      ...mapState('mediaPlayer/captions', {
-        selected: 'transcript',
-      }),
+    setup() {
+      const { transcript, toggleTranscript } = injectMediaPlayer();
+
+      return {
+        selected: transcript,
+        toggleTranscript,
+      };
     },
     methods: {
-      ...mapActions('mediaPlayer/captions', ['toggleTranscript']),
       /**
        * Accessible via parent component refs.
        * @public
diff --git a/kolibri/plugins/media_player/frontend/views/MediaPlayerCaptions/captionsButton.js b/kolibri/plugins/media_player/frontend/views/MediaPlayerCaptions/captionsButton.js
index 96feb978661..70ef8d7fe76 100644
--- a/kolibri/plugins/media_player/frontend/views/MediaPlayerCaptions/captionsButton.js
+++ b/kolibri/plugins/media_player/frontend/views/MediaPlayerCaptions/captionsButton.js
@@ -10,6 +10,7 @@ class CaptionsButton extends buttonMixin('TextTrackButton') {
   buildMenu() {
     return new CaptionsMenu(this.player(), {
       menuButton: this,
+      vueParent: this.options_.vueParent,
     });
   }
 
@@ -45,7 +46,11 @@ class CaptionsButton extends buttonMixin('TextTrackButton') {
 
     this.hideThreshold_ = -1;
     const player = this.player();
-    return [new SubtitlesMenuItem(player, {}), new TranscriptMenuItem(player, {})];
+    const vueParent = this.options_.vueParent;
+    return [
+      new SubtitlesMenuItem(player, { vueParent }),
+      new TranscriptMenuItem(player, { vueParent }),
+    ];
   }
 }
 
diff --git a/kolibri/plugins/media_player/frontend/views/MediaPlayerFullscreen/index.vue b/kolibri/plugins/media_player/frontend/views/MediaPlayerFullscreen/index.vue
index b2be1b506b4..a754161170f 100755
--- a/kolibri/plugins/media_player/frontend/views/MediaPlayerFullscreen/index.vue
+++ b/kolibri/plugins/media_player/frontend/views/MediaPlayerFullscreen/index.vue
@@ -12,24 +12,35 @@
 
 <script>
 
-  import { mapState } from 'vuex';
   import CoreFullscreen from 'kolibri-common/components/CoreFullscreen';
+  import { injectMediaPlayer } from '../../composables/useMediaPlayer';
 
   export default {
     name: 'MediaPlayerFullscreen',
     components: { CoreFullscreen },
+    setup() {
+      const { player } = injectMediaPlayer();
+
+      return {
+        player,
+      };
+    },
     data: () => ({
-      registered: false,
+      // The handler wired to the current player's toggle. Re-init (VideoPlayer
+      // re-creates the player on a source change) swaps in a new player, so we
+      // detach the previous handler before wiring the new toggle. The videojs
+      // listener lives on the old toggle and dies with the disposed player.
+      onChangeFullscreen: null,
     }),
-    computed: {
-      ...mapState('mediaPlayer', ['player']),
-    },
     watch: {
       player(player) {
-        if (!player || this.registered) {
+        if (this.onChangeFullscreen) {
+          this.$off('changeFullscreen', this.onChangeFullscreen);
+          this.onChangeFullscreen = null;
+        }
+        if (!player) {
           return;
         }
-
         const toggle = player.getChild('ControlBar').getChild('MimicFullscreenToggle');
 
         if (!toggle) {
@@ -37,8 +48,8 @@
         }
 
         toggle.on('changeFullscreen', () => this.$refs.core.toggleFullscreen());
-        this.$on('changeFullscreen', isFullscreen => toggle.handleChangeFullscreen(isFullscreen));
-        this.registered = true;
+        this.onChangeFullscreen = isFullscreen => toggle.handleChangeFullscreen(isFullscreen);
+        this.$on('changeFullscreen', this.onChangeFullscreen);
       },
     },
     methods: {
diff --git a/kolibri/plugins/media_player/frontend/views/MediaPlayerIndex.vue b/kolibri/plugins/media_player/frontend/views/MediaPlayerIndex.vue
index 72bbbef44da..abbd066813b 100644
--- a/kolibri/plugins/media_player/frontend/views/MediaPlayerIndex.vue
+++ b/kolibri/plugins/media_player/frontend/views/MediaPlayerIndex.vue
@@ -1,1087 +1,39 @@
 <template>
 
-  <MediaPlayerFullscreen
-    ref="fullscreen"
-    class="fill-space fullscreen-wrapper"
-    :style="{
-      'border-color': $themeTokens.fineLine,
-      padding: fullscreenWrapperPadding,
-    }"
-    @changeFullscreen="isFullscreen = $event"
-  >
-    <div
-      ref="wrapper"
-      :class="[
-        'wrapper',
-        {
-          'keyboard-modality': $inputModality === 'keyboard',
-          'video-loading': loading,
-          'transcript-visible': transcriptVisible,
-          'transcript-wrap': transcriptWrap,
-        },
-        $computedClass(progressStyle),
-      ]"
-    >
-      <div
-        v-show="loading"
-        class="fill-space loading-space"
-      >
-        <KCircularLoader
-          class="loader"
-          :delay="true"
-        />
-      </div>
-
-      <video
-        v-if="isVideo"
-        ref="player"
-        class="custom-skin video-js vjs-big-play-centered vjs-show-big-play-button-on-pause"
-      >
-        <source
-          v-for="video in videoSources"
-          :key="video.storage_url"
-          :src="video.storage_url"
-          :type="`video/${video.extension}`"
-        >
-        <track
-          v-for="track in trackSources"
-          :key="track.storage_url"
-          kind="captions"
-          :src="track.storage_url"
-          :srclang="track.lang.id"
-          :label="track.lang.lang_name"
-          :default="isDefaultTrack(track.lang.id)"
-        >
-      </video>
-
-      <audio
-        v-else
-        ref="player"
-        class="custom-skin video-js"
-      >
-        <source
-          v-for="audio in audioSources"
-          :key="audio.storage_url"
-          :src="audio.storage_url"
-          :type="audioSourceType(audio.extension)"
-        >
-        <track
-          v-for="track in trackSources"
-          :key="track.storage_url"
-          kind="captions"
-          :src="track.storage_url"
-          :srclang="track.lang.id"
-          :label="track.lang.lang_name"
-          :default="isDefaultTrack(track.lang.id)"
-        >
-      </audio>
-
-      <MediaPlayerTranscript
-        v-if="transcriptVisible"
-        ref="transcript"
-      />
-    </div>
-  </MediaPlayerFullscreen>
+  <div>
+    <VideoPlayer
+      v-if="isVideo"
+      v-on="$listeners"
+    />
+    <AudioPlayer
+      v-else
+      v-on="$listeners"
+    />
+  </div>
 
 </template>
 
 
 <script>
 
-  import vue, { ref, computed } from 'vue';
-  import { mapActions, mapState, mapGetters } from 'vuex';
-  import videojs from 'video.js';
-  import throttle from 'lodash/throttle';
+  import { computed } from 'vue';
   import useContentViewer from 'kolibri/composables/useContentViewer';
-  import { languageIdToCode } from 'kolibri/utils/i18n';
-  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
-  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
-  import useKResponsiveElement from 'kolibri-design-system/lib/composables/useKResponsiveElement';
-  import customExtractors from '../utils/fileExtractors';
-  import Settings from '../utils/settings';
-  import { ReplayButton, ForwardButton } from './customButtons';
-  import MediaPlayerFullscreen from './MediaPlayerFullscreen';
-  import MimicFullscreenToggle from './MediaPlayerFullscreen/mimicFullscreenToggle';
-  import MediaPlayerTranscript from './MediaPlayerTranscript';
-  import CaptionsButton from './MediaPlayerCaptions/captionsButton';
-  import LanguagesButton from './MediaPlayerLanguages/languagesButton';
-  import audioIconPoster from './audio-icon-poster.svg';
+  import customExtractors, { VIDEO_PRESETS } from '../utils/fileExtractors';
+  import VideoPlayer from './VideoPlayer';
+  import AudioPlayer from './AudioPlayer';
 
-  const GlobalLangCode = vue.locale;
-  const componentsToRegister = {
-    MimicFullscreenToggle,
-    ReplayButton,
-    ForwardButton,
-    CaptionsButton,
-    LanguagesButton,
-  };
-  Object.entries(componentsToRegister).forEach(([name, component]) =>
-    videojs.registerComponent(name, component),
-  );
   export default {
     name: 'MediaPlayerIndex',
-    components: { MediaPlayerFullscreen, MediaPlayerTranscript },
-    mixins: [commonCoreStrings],
+    components: { VideoPlayer, AudioPlayer },
     setup(props, context) {
-      const player = ref(null);
-      const { windowIsSmall, windowIsPortrait } = useKResponsiveWindow();
-      const { elementWidth } = useKResponsiveElement();
-      const {
-        files,
-        thumbnailFiles,
-        supplementaryFiles,
-        extraFields,
-        forceDurationBasedProgress,
-        durationBasedProgress,
-        reportLoadingError,
-      } = useContentViewer(context, {
-        defaultDuration: computed(() => player?.value?.duration()),
-        customExtractors,
-      });
-      return {
-        windowIsSmall,
-        windowIsPortrait,
-        elementWidth,
-        files,
-        thumbnailFiles,
-        supplementaryFiles,
-        extraFields,
-        forceDurationBasedProgress,
-        durationBasedProgress,
-        reportLoadingError,
-        player,
-      };
-    },
-    data: () => ({
-      dummyTime: 0,
-      progressStartingPoint: 0,
-      lastUpdateTime: 0,
-      loading: true,
-      playerVolume: 1.0,
-      playerMuted: false,
-      playerRate: 1.0,
-      updateContentStateInterval: null,
-      isFullscreen: false,
-    }),
-    computed: {
-      ...mapState('mediaPlayer/captions', {
-        transcript: state => state.transcript,
-        captionLanguage: state => state.language,
-      }),
-      ...mapGetters('mediaPlayer/captions', {
-        captionTracks: 'tracks',
-      }),
-      posterSources() {
-        const posterFileExtensions = ['png', 'jpg'];
-        return this.thumbnailFiles.filter(file =>
-          posterFileExtensions.some(ext => ext === file.extension),
-        );
-      },
-      audioPoster() {
-        if (this.posterSources.length) {
-          return this.posterSources[0].storage_url;
-        }
-        return audioIconPoster;
-      },
-      videoSources() {
-        const videoFileExtensions = ['mp4', 'webm', 'ogg'];
-        return this.files.filter(file => videoFileExtensions.some(ext => ext === file.extension));
-      },
-      audioSources() {
-        const audioFileExtensions = ['mp3'];
-        return this.files.filter(file => audioFileExtensions.some(ext => ext === file.extension));
-      },
-      trackSources() {
-        const trackFileExtensions = ['vtt'];
-        return this.supplementaryFiles.filter(file =>
-          trackFileExtensions.some(ext => ext === file.extension),
-        );
-      },
-      audioSourceType() {
-        return function (extension) {
-          switch (extension) {
-            case 'mp3':
-              // the correct type for mp3
-              return 'audio/mpeg';
-            default:
-              // generally speaking, this should work for others
-              return `audio/${extension}`;
-          }
-        };
-      },
-      isVideo() {
-        return this.videoSources.length;
-      },
-      savedLocation() {
-        if (this.extraFields && this.extraFields.contentState) {
-          return this.extraFields.contentState.savedLocation;
-        }
-        return 0;
-      },
-      progressStyle() {
-        return {
-          '.vjs-play-progress': {
-            backgroundColor: this.$themeTokens.primary,
-            '::before': {
-              color: this.$themeTokens.primary,
-            },
-          },
-        };
-      },
-      transcriptVisible() {
-        return this.transcript && !this.loading && this.captionTracks.length > 0;
-      },
-      /**
-       * Returns the total duration of the currently loaded media in seconds.
-       * @returns {number} Duration in seconds.
-       * @public
-       */
-      defaultDuration() {
-        return this.player.duration();
-      },
-      transcriptWrap() {
-        return this.windowIsPortrait || (!this.isFullscreen && this.windowIsSmall);
-      },
-      fullscreenWrapperPadding() {
-        if (this.isFullscreen) {
-          return 0;
-        }
+      const { files } = useContentViewer(context, { customExtractors });
 
-        return this.transcriptWrap ? '16px' : '32px 24px';
-      },
-    },
-    watch: {
-      isFullscreen() {
-        this.resizePlayer();
-      },
-    },
-    created() {
-      this.settings = new Settings({
-        playerVolume: this.playerVolume,
-        playerMuted: this.playerMuted,
-        playerRate: this.playerRate,
+      const isVideo = computed(() => {
+        return files.value.some(file => VIDEO_PRESETS.has(file.preset));
       });
-    },
-    mounted() {
-      this.initPlayer();
-      window.addEventListener('resize', this.throttledResizePlayer);
-    },
-    beforeDestroy() {
-      clearInterval(this.updateContentStateInterval);
-      this.updateContentState();
-      this.$emit('stopTracking');
-      window.removeEventListener('resize', this.throttledResizePlayer);
-      this.resetState();
-    },
-    methods: {
-      ...mapActions('mediaPlayer', ['setPlayer', 'resetState']),
-      isDefaultTrack(langCode) {
-        if (!this.captionLanguage) {
-          return false;
-        }
-        const shortLangCode = languageIdToCode(langCode);
-        const shortGlobalLangCode = languageIdToCode(this.captionLanguage);
-        return shortLangCode === shortGlobalLangCode;
-      },
-      initPlayer() {
-        this.$nextTick(() => {
-          this.player = videojs(this.$refs.player, this.getPlayerConfig(), this.handleReadyPlayer);
-          this.setPlayer(this.player);
-        });
-      },
-      getPlayerConfig() {
-        const videojsConfig = {
-          fluid: false,
-          fill: true,
-          controls: true,
-          textTrackDisplay: true,
-          bigPlayButton: true,
-          preload: 'metadata',
-          playbackRates: [0.5, 0.75, 1.0, 1.25, 1.5, 2.0],
-          controlBar: {
-            children: [
-              { name: 'PlayToggle' },
-              { name: 'ReplayButton' },
-              { name: 'ForwardButton' },
-              { name: 'CurrentTimeDisplay' },
-              { name: 'ProgressControl' },
-              { name: 'TimeDivider' },
-              { name: 'DurationDisplay' },
-              {
-                name: 'VolumePanel',
-                inline: false,
-              },
-              { name: 'PlaybackRateMenuButton' },
-              {
-                name: 'CaptionsButton',
-                settings: this.settings,
-              },
-              {
-                name: 'LanguagesButton',
-                settings: this.settings,
-              },
-              { name: 'MimicFullscreenToggle' },
-            ],
-          },
-          language: GlobalLangCode,
-          languages: {
-            [GlobalLangCode]: {
-              Play: this.$tr('play'),
-              Pause: this.$tr('pause'),
-              Replay: this.$tr('replay'),
-              Forward: this.$tr('forward'),
-              'Current Time': this.$tr('currentTime'),
-              'Duration Time': this.$tr('durationTime'),
-              Loaded: this.$tr('loaded'),
-              Progress: this.coreString('progressLabel'),
-              'Progress Bar': this.$tr('progressBar'),
-              Fullscreen: this.$tr('fullscreen'),
-              'Non-Fullscreen': this.$tr('nonFullscreen'),
-              Mute: this.$tr('mute'),
-              Unmute: this.$tr('unmute'),
-              'Playback Rate': this.$tr('playbackRate'),
-              Captions: this.$tr('captions'),
-              'captions off': this.$tr('captionsOff'),
-              Transcript: this.coreString('transcript'),
-              'Transcript off': this.$tr('transcriptOff'),
-              Languages: this.$tr('languages'),
-              'Volume Level': this.$tr('volumeLevel'),
-              'A network error caused the media download to fail part-way.':
-                this.$tr('networkError'),
-              'The media could not be loaded, either because the server or network failed or because the format is not supported.':
-                this.$tr('formatError'),
-              'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.':
-                this.$tr('corruptionOrSupportError'),
-              'No compatible source was found for this media.': this.$tr('sourceError'),
-              'The media is encrypted and we do not have the keys to decrypt it.':
-                this.$tr('encryptionError'),
-            },
-          },
-        };
-        if (!this.isVideo) {
-          videojsConfig.poster = this.audioPoster;
-        }
-        return videojsConfig;
-      },
-      handleReadyPlayer() {
-        const startTime = this.savedLocation >= this.player.duration() ? 0 : this.savedLocation;
-        this.player.currentTime(startTime);
-        this.player.play();
-        this.player.on('play', () => {
-          this.focusOnPlayControl();
-          this.setPlayState(true);
-        });
-        this.player.on('pause', () => {
-          this.focusOnPlayControl();
-          this.setPlayState(false);
-          this.updateContentState();
-        });
-        this.player.on('timeupdate', this.updateTime);
-        this.player.on('seeking', this.handleSeek);
-        this.player.on('volumechange', this.throttledUpdateVolume);
-        this.player.on('ratechange', this.updateRate);
-        this.player.on('ended', () => {
-          this.setPlayState(false);
-          this.$emit('finished');
-        });
-        this.player.on('error', this.reportLoadingError);
-        this.$watch('elementWidth', this.updatePlayerSizeClass);
-        this.updatePlayerSizeClass();
-        this.resizePlayer();
-        this.useSavedSettings();
-        this.loading = false;
-        this.$refs.player.tabIndex = -1;
-        this.updateContentStateInterval = setInterval(this.updateContentState, 30000);
-      },
-      resizePlayer() {
-        if (this.isFullscreen) {
-          this.$refs.wrapper.style.height = `100%`;
-          return;
-        }
-        const aspectRatio = 16 / 9;
-        const adjustedHeight = this.$refs.wrapper.clientWidth * (1 / aspectRatio);
-        this.$refs.wrapper.style.height = `${adjustedHeight}px`;
-      },
-      throttledResizePlayer: throttle(function resizePlayer() {
-        this.resizePlayer();
-      }, 300),
-      throttledUpdateVolume: throttle(function updateVolume() {
-        this.updateVolume();
-      }, 1000),
-      updateVolume() {
-        this.settings.playerVolume = this.player.volume();
-        this.settings.playerMuted = this.player.muted();
-      },
-      updateRate() {
-        this.settings.playerRate = this.player.playbackRate();
-      },
-      useSavedSettings() {
-        this.playerVolume = this.settings.playerVolume;
-        this.playerMuted = this.settings.playerMuted;
-        this.playerRate = this.settings.playerRate;
-        this.player.volume(this.playerVolume);
-        this.player.muted(this.playerMuted);
-        this.player.playbackRate(this.playerRate);
-      },
-      focusOnPlayControl() {
-        this.$refs.wrapper.getElementsByClassName('vjs-play-control')[0].focus();
-      },
-      handleSeek() {
-        // record progress before updating the times,
-        // to capture any progress that happened pre-seeking
-        this.recordProgress();
 
-        // now, update all the timestamps to set the new time location
-        // as the baseline starting point
-        this.dummyTime = this.player.currentTime();
-        this.lastUpdateTime = this.dummyTime;
-        this.progressStartingPoint = this.dummyTime;
-      },
-      updateTime() {
-        // skip out of here if we're currently seeking,
-        // so we don't update this.dummyTime before calculating old progress
-        if (this.player.seeking()) {
-          return;
-        }
-        this.dummyTime = this.player.currentTime();
-        if (this.dummyTime - this.lastUpdateTime >= 5) {
-          this.recordProgress();
-          this.lastUpdateTime = this.dummyTime;
-        }
-      },
-      setPlayState(state) {
-        // avoid recording progress if we're currently seeking,
-        // as timers are in an intermediate state
-        if (!this.player.seeking()) {
-          this.recordProgress();
-        }
-        if (state === true) {
-          this.$emit('startTracking');
-        } else {
-          this.$emit('stopTracking');
-        }
-      },
-      recordProgress() {
-        if (this.forceDurationBasedProgress) {
-          this.$emit('updateProgress', this.durationBasedProgress);
-        } else {
-          this.$emit(
-            'addProgress',
-            Math.max(
-              0,
-              (this.dummyTime - this.progressStartingPoint) / Math.floor(this.player.duration()),
-            ),
-          );
-        }
-        this.progressStartingPoint = this.dummyTime;
-      },
-      updatePlayerSizeClass() {
-        this.player.removeClass('player-medium');
-        this.player.removeClass('player-small');
-        this.player.removeClass('player-tiny');
-        if (this.elementWidth < 600) {
-          this.player.addClass('player-medium');
-        }
-        if (this.elementWidth < 480) {
-          this.player.addClass('player-small');
-        }
-        if (this.elementWidth < 360) {
-          this.player.addClass('player-tiny');
-        }
-      },
-      updateContentState() {
-        const currentLocation = this.player.currentTime();
-        let contentState;
-        if (this.extraFields) {
-          contentState = {
-            ...this.extraFields.contentState,
-            savedLocation: currentLocation || this.savedLocation,
-          };
-        } else {
-          contentState = { savedLocation: currentLocation || this.savedLocation };
-        }
-        this.$emit('updateContentState', contentState);
-      },
-    },
-    $trs: {
-      replay: {
-        message: 'Go back 10 seconds',
-        context: 'Option to rewind a video or audio file by 10 seconds.',
-      },
-      // Pulled from https://github.com/videojs/video.js/blob/master/lang/en.json
-      forward: {
-        message: 'Go forward 10 seconds',
-        context: 'Option to advance a video or audio file by 10 seconds.',
-      },
-      play: {
-        message: 'Play',
-        context: 'Describes button used to play a media file. This toggles between play and pause.',
-      },
-      pause: {
-        message: 'Pause',
-        context:
-          'Describes button used to stop or pause a media file in the player. This toggles between play and pause.',
-      },
-      currentTime: {
-        message: 'Current time',
-        context:
-          'Indicates the moment in time that the video or audio is at. For example, 1:10, meaning one minute and 10 seconds.',
-      },
-      durationTime: {
-        message: 'Duration time',
-        context:
-          'Indicates the length of a video or audio file. For example, 5:15, meaning 5 minutes and 15 seconds.',
-      },
-      loaded: {
-        message: 'Loaded',
-        context: 'Indicates a media file has loaded into the player.',
-      },
-      progressBar: {
-        message: 'Progress bar',
-        context:
-          'Describes the time tracker indicator bar in the bottom of the media player which allows a learner to view the progress through a media file and skip to specific times. Not related to learner progress.',
-      },
-      fullscreen: {
-        message: 'Enter fullscreen',
-        context:
-          'Learners can use the full screen button in the bottom right corner to open the media player in fullscreen view.',
-      },
-      nonFullscreen: {
-        message: 'Exit fullscreen',
-        context:
-          'Learners can use the full screen button in the bottom right corner to exit the media player from fullscreen view. This text appears upon mouse over of the button.\n',
-      },
-      mute: {
-        message: 'Mute',
-        context: 'Option to silence the audio track of a media file.',
-      },
-      unmute: {
-        message: 'Unmute',
-        context: 'Option to un-silence the audio track of a media file.',
-      },
-      playbackRate: {
-        message: 'Playback rate',
-        context:
-          'Speed at which a media file can be played. For example, a video could be played a 1.5 times the original speed.',
-      },
-      captions: {
-        message: 'Captions',
-        context:
-          "The Kolibri media player allows learners to view audiovisual content with subtitles (captions) in different languages. These are accessed via the 'CC' option on the player.",
-      },
-      captionsOff: {
-        message: 'Captions off',
-        context: 'Option for the learner to turn off subtitles (captions) in the media player.',
-      },
-      transcriptOff: {
-        message: 'Transcript off',
-        context: 'Option to turn off the transcript on a video or audio file.',
-      },
-      languages: {
-        message: 'Languages',
-        context: 'Indicates languages which are used in a media file.',
-      },
-      volumeLevel: {
-        message: 'Volume level',
-        context: 'Indicates the volume control scrollbar.',
-      },
-      networkError: {
-        message: 'A network error caused the media download to fail part-way',
-        context:
-          'Error message displayed in the media player when a media download fails because the internet connection cuts out.\n',
-      },
-      formatError: {
-        message:
-          'The media could not be loaded, either because the server or network failed or because the format is not supported',
-        context: 'Error message displayed in the media player.\n',
-      },
-      corruptionOrSupportError: {
-        message:
-          'The media playback was aborted due to a corruption problem or because the media used features your browser did not support',
-        context: 'Error message displayed in the media player.',
-      },
-      sourceError: {
-        message: 'No compatible source was found for this media',
-        context: 'Error message displayed in the media player.',
-      },
-      encryptionError: {
-        message: 'The media is encrypted and we do not have the keys to decrypt it',
-        context: 'Error message displayed in the media player.\n',
-      },
+      return { isVideo };
     },
   };
 
 </script>
-
-
-<style lang="scss" scoped>
-
-  // Unable to reference the videojs using require since videojs doesn't have good webpack support
-  @import './videojs-style/video-js.min.css';
-  // Custom build icons.
-  @import './videojs-style/videojs-font/css/videojs-icons.css';
-  @import './videojs-style/variables';
-  @import '~kolibri-design-system/lib/styles/definitions';
-
-  .fullscreen-wrapper {
-    box-sizing: border-box;
-  }
-
-  .wrapper {
-    box-sizing: content-box;
-    max-width: 100%;
-    max-height: #{$video-player-max-vh};
-  }
-
-  .wrapper.transcript-visible.transcript-wrap {
-    padding-bottom: #{$transcript-wrap-height};
-  }
-
-  .wrapper.video-loading video {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0.1;
-  }
-
-  .fill-space,
-  /deep/ .fill-space {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border: 1px solid transparent;
-  }
-
-  .loading-space,
-  /deep/ .loading-space {
-    box-sizing: border-box;
-    padding-top: #{$video-player-height-by-width};
-  }
-
-  /deep/ .loader {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .media-player-transcript {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    z-index: 0;
-    box-sizing: border-box;
-
-    /deep/ .fill-space {
-      height: auto;
-    }
-
-    [dir='rtl'] & {
-      right: auto;
-      left: 0;
-    }
-  }
-
-  .wrapper:not(.transcript-wrap) .media-player-transcript {
-    position: absolute;
-    top: 0;
-    width: 33.333%;
-
-    /deep/ .loading-space {
-      padding-top: #{300% * 9 / 16};
-    }
-  }
-
-  .wrapper.transcript-wrap .media-player-transcript {
-    position: relative;
-    left: 0;
-    height: #{$transcript-wrap-height};
-
-    /deep/ .loading-space {
-      padding-top: 90px;
-    }
-
-    [dir='rtl'] & {
-      right: 0;
-    }
-  }
-
-  .normalize-fullscreen,
-  .mimic-fullscreen {
-    border-color: transparent !important;
-
-    .wrapper {
-      max-height: none;
-    }
-
-    .wrapper.transcript-visible.transcript-wrap {
-      padding-bottom: 0;
-    }
-
-    .wrapper.transcript-visible.transcript-wrap .media-player-transcript {
-      top: 0;
-      height: calc(100vh - #{$video-player-height-vw});
-    }
-
-    .wrapper.transcript-visible.transcript-wrap .video-js.vjs-fill {
-      height: #{$video-player-height-vw};
-    }
-  }
-
-  /***** PLAYER OVERRIDES *****/
-
-  /* !!rtl:begin:ignore */
-  .transcript-visible:not(.transcript-wrap) > .video-js.vjs-fill {
-    width: 66.666%;
-  }
-
-  /* Hide control bar when playing & inactive */
-  /deep/ .vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar {
-    visibility: hidden;
-
-    /* Always show control bar in keyboard modality */
-    .keyboard-modality & {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-
-  /* Mimics glow video.js adds on fullscreen button when focused */
-  /deep/ .vjs-captions-button.active .vjs-icon-placeholder,
-  /deep/ .vjs-languages-button.active .vjs-icon-placeholder {
-    text-shadow: 0 0 1em #ffffff;
-  }
-
-  /*** CUSTOM VIDEOJS SKIN ***/
-  /deep/ .custom-skin {
-    $button-height-normal: 40px;
-    $button-font-size-normal: 24px;
-    @include font-family-noto;
-
-    font-size: $video-player-font-size;
-    color: $video-player-font-color;
-
-    /* Sliders */
-    .vjs-slider {
-      background-color: $video-player-color-2;
-    }
-
-    /* Seek Bar */
-    .vjs-progress-control {
-      height: initial;
-      visibility: inherit;
-      opacity: inherit;
-
-      .vjs-progress-holder {
-        height: 8px;
-        margin-right: 16px;
-        margin-left: 16px;
-
-        .vjs-load-progress {
-          div {
-            background: $video-player-color-3;
-          }
-        }
-
-        .vjs-play-progress {
-          &::before {
-            top: -5px;
-            font-size: 18px;
-          }
-        }
-      }
-    }
-
-    /* Control Bar */
-    .vjs-control-bar {
-      display: flex;
-      height: $button-height-normal;
-      background-color: $video-player-color;
-    }
-
-    /* Fixes volume panel appearing on hover. */
-    .vjs-volume-vertical {
-      display: none;
-    }
-
-    .vjs-volume-panel-vertical {
-      &:hover {
-        .vjs-volume-vertical {
-          display: block;
-        }
-      }
-    }
-
-    .vjs-volume-level {
-      background-color: $video-player-font-color;
-    }
-
-    /* Buttons */
-    .vjs-button {
-      .vjs-icon-placeholder {
-        &::before {
-          font-size: $button-font-size-normal;
-          line-height: $button-height-normal;
-        }
-      }
-    }
-
-    /* Replay & Forward Buttons */
-    .vjs-icon-replay_10,
-    .vjs-icon-forward_10 {
-      font-family: VideoJS; // override our global noto fonts with more specificity
-      &::before {
-        font-size: $button-font-size-normal;
-        line-height: $button-height-normal;
-      }
-    }
-
-    .vjs-big-play-button {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: $button-height-normal * 2;
-      height: $button-height-normal * 2;
-      margin: 0;
-      font-size: $button-font-size-normal * 2;
-      line-height: $button-height-normal * 2;
-      background-color: $video-player-color;
-      border: 0;
-      border-radius: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    .vjs-volume-panel {
-      margin-left: auto;
-    }
-
-    /* Transcript button */
-    .vjs-button-transcript img {
-      max-width: 20px;
-    }
-
-    .vjs-transcript-visible > .vjs-tech,
-    .vjs-transcript-visible > .vjs-modal-dialog,
-    .vjs-transcript-visible > .vjs-text-track-display,
-    .vjs-transcript-visible > .vjs-text-track-settings,
-    .vjs-transcript-visible > .vjs-control-bar {
-      right: auto;
-      width: calc(100% - 330px);
-    }
-
-    /* Menus */
-    .vjs-menu {
-      li {
-        padding: 8px;
-        font-size: $video-player-font-size;
-        background-color: $video-player-color;
-
-        &:focus,
-        &:hover {
-          background-color: $video-player-color-3;
-        }
-      }
-
-      li.vjs-selected {
-        font-weight: bold;
-        color: $video-player-font-color;
-        background-color: $video-player-color-2;
-
-        &:focus,
-        &:hover {
-          background-color: $video-player-color-3;
-        }
-      }
-    }
-
-    .vjs-menu-content {
-      @include font-family-noto;
-    }
-
-    .vjs-volume-control {
-      background-color: $video-player-color;
-    }
-
-    .vjs-playback-rate .vjs-menu {
-      min-width: 4em;
-    }
-
-    /* Time */
-    .vjs-current-time {
-      display: block;
-      padding-right: 0;
-
-      .vjs-current-time-display {
-        font-size: $video-player-font-size;
-        line-height: $button-height-normal;
-      }
-    }
-
-    .vjs-duration {
-      display: block;
-      padding-left: 0;
-
-      .vjs-duration-display {
-        font-size: $video-player-font-size;
-        line-height: $button-height-normal;
-      }
-    }
-
-    .vjs-time-divider {
-      padding: 0;
-      text-align: center;
-    }
-
-    /* Rate Button */
-    .vjs-playback-rate-value {
-      font-size: 20px;
-      line-height: $button-height-normal;
-    }
-
-    /* Captions Settings */
-    .vjs-texttrack-settings {
-      display: none;
-    }
-  }
-
-  /*** MEDIUM: < 600px ***/
-  /deep/ .player-medium {
-    /* Seek bar moves up. */
-    .vjs-progress-control {
-      position: absolute;
-      top: -16px;
-      right: 0;
-      left: 0;
-      width: auto;
-    }
-
-    /* Time divider is displayed. */
-    .vjs-time-divider {
-      display: block;
-    }
-
-    .vjs-slider-bar::before {
-      z-index: 0;
-    }
-  }
-
-  /*** SMALL: < 480px ***/
-  /deep/ .player-small {
-    $button-height-small: 40px;
-    $button-font-size-normal: 24px;
-
-    /* Control bar buttons increase size. */
-    .vjs-control-bar {
-      height: $button-height-small;
-    }
-
-    .vjs-button {
-      .vjs-icon-placeholder {
-        &::before {
-          line-height: $button-height-small;
-        }
-      }
-    }
-
-    .vjs-icon-replay_10,
-    .vjs-icon-forward_10 {
-      &::before {
-        line-height: $button-height-small;
-      }
-    }
-
-    /* Play, replay, and forward buttons move up. */
-    .vjs-play-control,
-    .vjs-icon-replay_10,
-    .vjs-icon-forward_10 {
-      position: absolute;
-      top: -75px;
-      width: $button-height-small;
-      height: $button-height-small;
-      background-color: $video-player-color;
-      border-radius: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    .vjs-big-play-button {
-      display: none;
-    }
-
-    &.vjs-show-big-play-button-on-pause {
-      .vjs-big-play-button {
-        display: none;
-      }
-    }
-
-    /* Play button in center. */
-    .vjs-play-control {
-      left: 50%;
-    }
-
-    /* Replay play button on left. */
-    .vjs-icon-replay_10 {
-      left: 33%;
-    }
-
-    /* Forward button on right */
-    .vjs-icon-forward_10 {
-      left: 66%;
-    }
-
-    /* Adjust rate button text */
-    .vjs-playback-rate-value {
-      line-height: $button-height-small;
-    }
-
-    /* Adjust time text */
-    .vjs-current-time {
-      .vjs-current-time-display {
-        line-height: $button-height-small;
-      }
-    }
-
-    .vjs-duration {
-      .vjs-duration-display {
-        line-height: $button-height-small;
-      }
-    }
-
-    .vjs-time-divider {
-      line-height: $button-height-small;
-    }
-  }
-
-  /*** TINY: < 360px ***/
-  /deep/ .player-tiny {
-    /* Time divider is hidden */
-    .vjs-time-divider {
-      display: none;
-    }
-
-    /* Time duration is hidden */
-    .vjs-duration {
-      display: none;
-    }
-
-    /* Adjust play, replay, and forward buttons positioning. */
-    .vjs-play-control,
-    .vjs-icon-replay_10,
-    .vjs-icon-forward_10 {
-      top: -45px;
-    }
-
-    /* Adjust replay button position. */
-    .vjs-icon-replay_10 {
-      left: 25%;
-    }
-
-    /* Adjust forward button position. */
-    .vjs-icon-forward_10 {
-      left: 75%;
-    }
-  }
-
-  /* !!rtl:end:ignore */
-
-</style>
diff --git a/kolibri/plugins/media_player/frontend/views/MediaPlayerLanguages/LanguagesMenu.vue b/kolibri/plugins/media_player/frontend/views/MediaPlayerLanguages/LanguagesMenu.vue
index 0b835d77586..8b09f7fcb07 100644
--- a/kolibri/plugins/media_player/frontend/views/MediaPlayerLanguages/LanguagesMenu.vue
+++ b/kolibri/plugins/media_player/frontend/views/MediaPlayerLanguages/LanguagesMenu.vue
@@ -5,9 +5,7 @@
     class="languages-menu"
   >
     <!-- Languages get added dynamically through video.js -->
-    <KRadioButtonGroup>
-      <slot></slot>
-    </KRadioButtonGroup>
+    <slot></slot>
   </MediaPlayerMenu>
 
 </template>
diff --git a/kolibri/plugins/media_player/frontend/views/MediaPlayerLanguages/LanguagesMenuItem.vue b/kolibri/plugins/media_player/frontend/views/MediaPlayerLanguages/LanguagesMenuItem.vue
index 898c7e12633..528dfafe223 100644
--- a/kolibri/plugins/media_player/frontend/views/MediaPlayerLanguages/LanguagesMenuItem.vue
+++ b/kolibri/plugins/media_player/frontend/views/MediaPlayerLanguages/LanguagesMenuItem.vue
@@ -17,10 +17,21 @@
 
 <script>
 
-  import { mapActions, mapState } from 'vuex';
+  import { computed } from 'vue';
+  import { injectMediaPlayer } from '../../composables/useMediaPlayer';
 
   export default {
     name: 'LanguagesMenuItem',
+    setup(props) {
+      const { language, setLanguage } = injectMediaPlayer();
+
+      const selected = computed(() => language.value === props.value);
+
+      return {
+        selected,
+        setLanguage,
+      };
+    },
     props: {
       label: {
         type: String,
@@ -31,14 +42,7 @@
         required: true,
       },
     },
-    computed: {
-      ...mapState('mediaPlayer/captions', ['language']),
-      selected() {
-        return this.language === this.value;
-      },
-    },
     methods: {
-      ...mapActions('mediaPlayer/captions', ['setLanguage']),
       /**
        * Accessible via parent component refs.
        * @public
diff --git a/kolibri/plugins/media_player/frontend/views/MediaPlayerLanguages/languagesButton.js b/kolibri/plugins/media_player/frontend/views/MediaPlayerLanguages/languagesButton.js
index 45bf8c2f6a3..2831a72b326 100644
--- a/kolibri/plugins/media_player/frontend/views/MediaPlayerLanguages/languagesButton.js
+++ b/kolibri/plugins/media_player/frontend/views/MediaPlayerLanguages/languagesButton.js
@@ -22,7 +22,7 @@ class LanguagesButton extends buttonMixin('TextTrackButton') {
   constructor(player, options, ready) {
     super(player, options, ready);
 
-    this.icon = new LanguageIcon(player, {});
+    this.icon = new LanguageIcon(player, { vueParent: this.options_.vueParent });
 
     // Hackily add our icon to the button to avoid recreating all the button handling video.js adds
     const iconPlaceholder = this.menuButton_.el().getElementsByClassName('vjs-icon-placeholder')[0];
@@ -36,6 +36,7 @@ class LanguagesButton extends buttonMixin('TextTrackButton') {
   buildMenu() {
     return new LanguagesMenu(this.player(), {
       menuButton: this,
+      vueParent: this.options_.vueParent,
     });
   }
 
@@ -83,6 +84,7 @@ class LanguagesButton extends buttonMixin('TextTrackButton') {
         selectable: true,
         multiSelectable: false,
         selected: trackUtils.isEnabled(track),
+        vueParent: this.options_.vueParent,
       });
     });
   }
diff --git a/kolibri/plugins/media_player/frontend/views/MediaPlayerTranscript/TranscriptCue.vue b/kolibri/plugins/media_player/frontend/views/MediaPlayerTranscript/TranscriptCue.vue
index 04150d329ca..eeed3c6d013 100755
--- a/kolibri/plugins/media_player/frontend/views/MediaPlayerTranscript/TranscriptCue.vue
+++ b/kolibri/plugins/media_player/frontend/views/MediaPlayerTranscript/TranscriptCue.vue
@@ -69,6 +69,9 @@
           ? {
             backgroundColor: this.$themePalette.grey.v_400,
             borderLeftColor: this.$themeTokens.watch,
+            // Darken text on the grey highlight: annotation grey on grey.v_400
+            // is only 2:1, below the WCAG AA 4.5:1 threshold.
+            color: this.$themeTokens.text,
           }
           : {};
 
@@ -89,7 +92,7 @@
       },
       timeStyle() {
         return {
-          color: this.$themeTokens.annotation,
+          color: this.active ? this.$themeTokens.text : this.$themeTokens.annotation,
         };
       },
     },
diff --git a/kolibri/plugins/media_player/frontend/views/MediaPlayerTranscript/index.vue b/kolibri/plugins/media_player/frontend/views/MediaPlayerTranscript/index.vue
index fbe35f7e37c..5765c0a420b 100755
--- a/kolibri/plugins/media_player/frontend/views/MediaPlayerTranscript/index.vue
+++ b/kolibri/plugins/media_player/frontend/views/MediaPlayerTranscript/index.vue
@@ -53,16 +53,34 @@
 
 <script>
 
-  import { mapState } from 'vuex';
+  import { computed } from 'vue';
   import { throttle } from 'frame-throttle';
   import { getLangDir } from 'kolibri/utils/i18n';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import { injectMediaPlayer } from '../../composables/useMediaPlayer';
   import TranscriptCue from './TranscriptCue';
 
   export default {
     name: 'MediaPlayerTranscript',
     components: { TranscriptCue },
     mixins: [commonCoreStrings],
+    setup() {
+      const { transcript, language, cues, activeCueIds, duration, seek } = injectMediaPlayer();
+
+      // Only rendered while the transcript is on (the parent gates it behind
+      // transcriptVisible), so transcript being true is the readiness signal.
+      const showing = computed(() => transcript.value);
+      const languageDir = computed(() => getLangDir(language.value));
+
+      return {
+        cues,
+        activeCueIds,
+        showing,
+        mediaDuration: duration,
+        languageDir,
+        seek,
+      };
+    },
     data() {
       return {
         // TODO figure if this is supposed to be used
@@ -73,20 +91,9 @@
       };
     },
     computed: {
-      ...mapState('mediaPlayer', ['player']),
-      ...mapState('mediaPlayer/captions', ['transcript', 'language', 'cues', 'activeCueIds']),
-      showing() {
-        return this.player && this.transcript;
-      },
-      mediaDuration() {
-        return this.player ? this.player.duration() : 0;
-      },
       capStyle() {
         return { color: this.$themeTokens.annotation };
       },
-      languageDir() {
-        return getLangDir(this.language);
-      },
     },
     watch: {
       activeCueIds(newActiveCueIds) {
@@ -131,7 +138,7 @@
     methods: {
       handleSeekEvent(cueTime) {
         // Add 10ms to cueTime to avoid triggering two cues if they overlap on end and start time
-        this.player.currentTime(cueTime + 0.01);
+        this.seek(cueTime + 0.01);
       },
       /**
        * Move keyboard focus to the first or last cue in the transcript.
@@ -253,6 +260,9 @@
   @import '~kolibri-design-system/lib/styles/definitions';
 
   .media-player-transcript {
+    // Positioned so it is the offsetParent of the cues: the scroll logic reads
+    // each cue's offsetTop as an offset within this scroll container.
+    position: relative;
     overflow-x: hidden;
     overflow-y: auto;
   }
diff --git a/kolibri/plugins/media_player/frontend/views/__tests__/MediaPlayerIndex.spec.js b/kolibri/plugins/media_player/frontend/views/__tests__/MediaPlayerIndex.spec.js
deleted file mode 100644
index a2b24b34a0a..00000000000
--- a/kolibri/plugins/media_player/frontend/views/__tests__/MediaPlayerIndex.spec.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import MediaPlayerIndex from '../MediaPlayerIndex';
-
-const { methods } = MediaPlayerIndex;
-
-describe('updateProgress', () => {
-  let context = {};
-
-  beforeEach(() => {
-    context = {
-      forceDurationBasedProgress: null,
-      $emit: jest.fn(),
-      durationBasedProgress: 0.1,
-    };
-  });
-
-  it('should be able to calculate progress using time-based tracking', () => {
-    context.forceDurationBasedProgress = true;
-    methods.recordProgress.call(context);
-
-    expect(context.$emit.mock.calls[0][0]).toBe('updateProgress');
-    expect(context.$emit.mock.calls[0][1]).toBe(0.1);
-  });
-});
diff --git a/kolibri/plugins/media_player/package.json b/kolibri/plugins/media_player/package.json
index ae15d04d4cf..a590694764a 100644
--- a/kolibri/plugins/media_player/package.json
+++ b/kolibri/plugins/media_player/package.json
@@ -17,8 +17,7 @@
     "lodash": "catalog:",
     "safe-json-parse": "^4.0.0",
     "video.js": "^7.21.7",
-    "vue": "catalog:",
-    "vuex": "catalog:"
+    "vue": "catalog:"
   },
   "devDependencies": {
     "@testing-library/vue": "catalog:"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b9c1bf9da6a..a277e7e4f71 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -566,9 +566,10 @@ importers:
       vue:
         specifier: 'catalog:'
         version: 2.7.16
-      vuex:
+    devDependencies:
+      '@testing-library/vue':
         specifier: 'catalog:'
-        version: 3.6.2(vue@2.7.16)
+        version: 5.9.0(vue-template-compiler@2.7.16)(vue@2.7.16)
 
   kolibri/plugins/pdf_viewer:
     dependencies: