vidply 1.2.1 → 1.2.3

package/src/core/Player.ts

@@ -8,6 +8,7 @@ import {DOMUtils} from '../utils/DOMUtils.js';
 import {ControlBar} from '../controls/ControlBar.js';
 import {CaptionManager} from '../controls/CaptionManager.js';
 import {KeyboardManager} from '../controls/KeyboardManager.js';
+import {MediaSessionManager} from './MediaSessionManager.js';
 import {HTML5Renderer} from '../renderers/HTML5Renderer.js';
 import {createPlayOverlay} from '../icons/Icons.js';
 import {i18n} from '../i18n/i18n.js';
@@ -41,6 +42,7 @@ import type {FloatingPlayerManager} from './FloatingPlayerManager.js';
 import type {TranscriptManager} from '../controls/TranscriptManager.js';
 import type {PlaylistManager} from '../features/PlaylistManager.js';
 import type {SettingsDialog} from '../controls/SettingsDialog.js';
+import {KeyboardHelp} from '../controls/KeyboardHelp.js';
 
 // Typed dynamic loaders. Each loader returns the constructor for the
 // lazily imported manager, so call sites get full IntelliSense and
@@ -167,9 +169,11 @@ export class Player extends EventEmitter<PlayerEventMap> {
   controlBar: ControlBar | null = null;
   captionManager: CaptionManager | null = null;
   keyboardManager: KeyboardManager | null = null;
+  mediaSessionManager: MediaSessionManager | null = null;
   transcriptManager: TranscriptManager | null = null;
   playlistManager: PlaylistManager | null = null;
   settingsDialog: SettingsDialog | null = null;
+  keyboardHelp: KeyboardHelp | null = null;
   audioDescriptionManager: AudioDescriptionManager | null = null;
   signLanguageManager: SignLanguageManager | null = null;
   floatingPlayerManager: FloatingPlayerManager | null = null;
@@ -310,6 +314,12 @@ export class Player extends EventEmitter<PlayerEventMap> {
       responsive: true,
       fillContainer: false,
 
+      // Media metadata + OS media controls (Media Session API)
+      title: null,
+      artist: null,
+      album: null,
+      mediaSession: true,
+
       // Playback
       autoplay: false,
       loop: false,
@@ -357,6 +367,7 @@ export class Player extends EventEmitter<PlayerEventMap> {
       captionsButton: true,
       transcriptButton: true,
       fullscreenButton: true,
+      helpButton: true,
       pipButton: false,
       floating: false,
       floatingPosition: 'bottom-right',
@@ -417,7 +428,8 @@ export class Player extends EventEmitter<PlayerEventMap> {
         'speed-menu': ['s'],
         'quality-menu': ['q'],
         'chapters-menu': ['j'],
-        'transcript-toggle': ['t']
+        'transcript-toggle': ['t'],
+        'help': ['?']
       },
 
       // Accessibility
@@ -817,6 +829,11 @@ export class Player extends EventEmitter<PlayerEventMap> {
         this.keyboardManager = new KeyboardManager(this);
       }
 
+      // Integrate with OS media controls (Media Session API)
+      if (this.options.mediaSession) {
+        this.mediaSessionManager = new MediaSessionManager(this);
+      }
+
       // Set up responsive handlers
       this.setupResponsiveHandlers();
 
@@ -2607,6 +2624,29 @@ export class Player extends EventEmitter<PlayerEventMap> {
     // No-op - settings dialog removed
   }
 
+  /**
+   * Lazily build (on first use) and toggle the keyboard-shortcuts help
+   * dialog. Reflects the live `keyboardShortcuts` bindings, including any
+   * consumer overrides.
+   */
+  toggleKeyboardHelp() {
+    if (!this.keyboardHelp) {
+      this.keyboardHelp = new KeyboardHelp(this);
+    }
+    this.keyboardHelp.toggle();
+  }
+
+  showKeyboardHelp() {
+    if (!this.keyboardHelp) {
+      this.keyboardHelp = new KeyboardHelp(this);
+    }
+    this.keyboardHelp.show();
+  }
+
+  hideKeyboardHelp() {
+    this.keyboardHelp?.hide();
+  }
+
   // Utility methods
   getCurrentTime() {
     return this.state.currentTime;
@@ -2778,6 +2818,24 @@ export class Player extends EventEmitter<PlayerEventMap> {
       this.settingsDialog = null;
     }
 
+    if (this.keyboardHelp && typeof this.keyboardHelp.destroy === 'function') {
+      try {
+        this.keyboardHelp.destroy();
+      } catch (err) {
+        this.log(`KeyboardHelp.destroy failed: ${err}`, 'warn');
+      }
+      this.keyboardHelp = null;
+    }
+
+    if (this.mediaSessionManager && typeof this.mediaSessionManager.destroy === 'function') {
+      try {
+        this.mediaSessionManager.destroy();
+      } catch (err) {
+        this.log(`MediaSessionManager.destroy failed: ${err}`, 'warn');
+      }
+      this.mediaSessionManager = null;
+    }
+
     // Clean up floating player manager (disconnects IntersectionObserver,
     // returns the container to its original parent if still floating)
     if (this.floatingPlayerManager) {

package/src/i18n/languages/de.ts

@@ -175,6 +175,33 @@ export const de = {
         reset: 'Zurücksetzen',
         close: 'Schließen'
     },
+    help: {
+        title: 'Tastaturkürzel',
+        button: 'Tastaturkürzel',
+        close: 'Schließen',
+        or: 'oder',
+        keys: {
+            space: 'Leertaste'
+        },
+        actions: {
+            'play-pause': 'Wiedergabe / Pause',
+            'seek-backward': 'Zurückspulen',
+            'seek-forward': 'Vorspulen',
+            'volume-up': 'Lauter',
+            'volume-down': 'Leiser',
+            'mute': 'Stumm / Ton an',
+            'captions': 'Untertitel umschalten',
+            'caption-style-menu': 'Untertitel-Stil',
+            'speed-down': 'Langsamer',
+            'speed-up': 'Schneller',
+            'speed-menu': 'Wiedergabegeschwindigkeit',
+            'quality-menu': 'Qualität',
+            'chapters-menu': 'Kapitel',
+            'transcript-toggle': 'Transkript umschalten',
+            'fullscreen': 'Vollbild umschalten',
+            'help': 'Tastaturkürzel'
+        }
+    },
     speeds: {
         normal: 'Normal'
     },

package/src/i18n/languages/en.ts

@@ -176,6 +176,33 @@ export const en = {
     reset: 'Reset to defaults',
     close: 'Close'
   },
+  help: {
+    title: 'Keyboard shortcuts',
+    button: 'Keyboard shortcuts',
+    close: 'Close',
+    or: 'or',
+    keys: {
+      space: 'Space'
+    },
+    actions: {
+      'play-pause': 'Play / Pause',
+      'seek-backward': 'Seek backward',
+      'seek-forward': 'Seek forward',
+      'volume-up': 'Volume up',
+      'volume-down': 'Volume down',
+      'mute': 'Mute / Unmute',
+      'captions': 'Toggle captions',
+      'caption-style-menu': 'Caption styling',
+      'speed-down': 'Decrease speed',
+      'speed-up': 'Increase speed',
+      'speed-menu': 'Playback speed',
+      'quality-menu': 'Quality',
+      'chapters-menu': 'Chapters',
+      'transcript-toggle': 'Toggle transcript',
+      'fullscreen': 'Toggle fullscreen',
+      'help': 'Keyboard shortcuts'
+    }
+  },
   speeds: {
     normal: 'Normal'
   },

package/src/i18n/languages/es.ts

@@ -172,6 +172,33 @@ export const es = {
     reset: 'Restablecer',
     close: 'Cerrar'
   },
+  help: {
+    title: 'Atajos de teclado',
+    button: 'Atajos de teclado',
+    close: 'Cerrar',
+    or: 'o',
+    keys: {
+      space: 'Espacio'
+    },
+    actions: {
+      'play-pause': 'Reproducir / Pausar',
+      'seek-backward': 'Retroceder',
+      'seek-forward': 'Avanzar',
+      'volume-up': 'Subir volumen',
+      'volume-down': 'Bajar volumen',
+      'mute': 'Silenciar / Activar sonido',
+      'captions': 'Alternar subtítulos',
+      'caption-style-menu': 'Estilo de subtítulos',
+      'speed-down': 'Reducir velocidad',
+      'speed-up': 'Aumentar velocidad',
+      'speed-menu': 'Velocidad de reproducción',
+      'quality-menu': 'Calidad',
+      'chapters-menu': 'Capítulos',
+      'transcript-toggle': 'Alternar transcripción',
+      'fullscreen': 'Alternar pantalla completa',
+      'help': 'Atajos de teclado'
+    }
+  },
   speeds: {
     normal: 'Normal'
   },

package/src/i18n/languages/fr.ts

@@ -172,6 +172,33 @@ export const fr = {
     reset: 'Réinitialiser',
     close: 'Fermer'
   },
+  help: {
+    title: 'Raccourcis clavier',
+    button: 'Raccourcis clavier',
+    close: 'Fermer',
+    or: 'ou',
+    keys: {
+      space: 'Espace'
+    },
+    actions: {
+      'play-pause': 'Lecture / Pause',
+      'seek-backward': 'Reculer',
+      'seek-forward': 'Avancer',
+      'volume-up': 'Augmenter le volume',
+      'volume-down': 'Baisser le volume',
+      'mute': 'Couper / Activer le son',
+      'captions': 'Activer/désactiver les sous-titres',
+      'caption-style-menu': 'Style des sous-titres',
+      'speed-down': 'Ralentir',
+      'speed-up': 'Accélérer',
+      'speed-menu': 'Vitesse de lecture',
+      'quality-menu': 'Qualité',
+      'chapters-menu': 'Chapitres',
+      'transcript-toggle': 'Activer/désactiver la transcription',
+      'fullscreen': 'Activer/désactiver le plein écran',
+      'help': 'Raccourcis clavier'
+    }
+  },
   speeds: {
     normal: 'Normal'
   },

package/src/i18n/languages/ja.ts

@@ -172,6 +172,33 @@ export const ja = {
     reset: 'リセット',
     close: '閉じる'
   },
+  help: {
+    title: 'キーボードショートカット',
+    button: 'キーボードショートカット',
+    close: '閉じる',
+    or: 'または',
+    keys: {
+      space: 'スペース'
+    },
+    actions: {
+      'play-pause': '再生 / 一時停止',
+      'seek-backward': '巻き戻し',
+      'seek-forward': '早送り',
+      'volume-up': '音量を上げる',
+      'volume-down': '音量を下げる',
+      'mute': 'ミュート / ミュート解除',
+      'captions': '字幕の切り替え',
+      'caption-style-menu': '字幕スタイル',
+      'speed-down': '速度を下げる',
+      'speed-up': '速度を上げる',
+      'speed-menu': '再生速度',
+      'quality-menu': '画質',
+      'chapters-menu': 'チャプター',
+      'transcript-toggle': '文字起こしの切り替え',
+      'fullscreen': '全画面表示の切り替え',
+      'help': 'キーボードショートカット'
+    }
+  },
   speeds: {
     normal: '通常'
   },

package/src/icons/Icons.ts

@@ -37,7 +37,8 @@ const iconPaths: Record<string, string> = {
   move: `<path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"/>`,
   resize: `<path d="M21.71 11.29l-9-9c-.39-.39-1.02-.39-1.41 0l-9 9c-.39.39-.39 1.02 0 1.41l9 9c.39.39 1.02.39 1.41 0l9-9c.39-.38.39-1.01 0-1.41zM14 14.5V12h-4v2.5L7 11l3-3.5V10h4V7.5l3 3.5-3 3.5z"/>`,
   clock: `<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>`,
-  download: `<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>`
+  download: `<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>`,
+  help: `<path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>`
 };
 
 // The `xmlns` declaration is mandatory for `DOMParser.parseFromString`

package/src/styles/vidply.css

@@ -2707,6 +2707,62 @@ video[data-vidply]:not(.vidply-initialized) {
   background: var(--vidply-white-20);
 }
 
+/* Keyboard shortcuts help dialog */
+.vidply-help-list {
+  align-items: center;
+  column-gap: var(--vidply-gap-lg);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  margin: 0;
+  row-gap: var(--vidply-gap-md);
+}
+
+.vidply-help-action {
+  color: var(--vidply-white-90);
+  font-size: var(--vidply-font-md);
+  grid-column: 1;
+  margin: 0;
+}
+
+.vidply-help-keys {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--vidply-gap-xs);
+  grid-column: 2;
+  justify-content: flex-end;
+  margin: 0;
+}
+
+.vidply-help-key {
+  background: var(--vidply-white-10);
+  border: 0.0625rem solid var(--vidply-white-20);
+  border-radius: var(--vidply-radius-md);
+  color: var(--vidply-white);
+  font-family: monospace;
+  font-size: var(--vidply-font-base);
+  line-height: 1;
+  min-width: 1.5rem;
+  padding: 0.25rem 0.4rem;
+  text-align: center;
+}
+
+.vidply-help-key-sep {
+  color: var(--vidply-text-muted);
+  font-size: var(--vidply-font-base);
+  padding: 0 0.15rem;
+}
+
+.vidply-theme-light .vidply-help-action {
+  color: #1a1a1a;
+}
+
+.vidply-theme-light .vidply-help-key {
+  background: #f0f0f0;
+  border-color: rgb(0 0 0 / 20%);
+  color: #1a1a1a;
+}
+
 /* Fullscreen Styles */
 .vidply-player:is(.vidply-fullscreen, :fullscreen) {
   background: #000;

package/src/types/events.ts

@@ -78,6 +78,10 @@ export interface PlayerEventMap {
   settingsopen: void;
   settingsclose: void;
 
+  // Keyboard shortcuts help
+  keyboardhelpopen: void;
+  keyboardhelpclose: void;
+
   // Audio description
   audiodescriptionenabled: void;
   audiodescriptiondisabled: void;

package/src/types/options.ts

@@ -16,6 +16,7 @@ export interface KeyboardShortcuts {
   'quality-menu'?: string[];
   'chapters-menu'?: string[];
   'transcript-toggle'?: string[];
+  'help'?: string[];
 }
 
 export interface PlayerOptions {
@@ -27,6 +28,18 @@ export interface PlayerOptions {
   fillContainer: boolean;
   mediaType?: 'video' | 'audio';
 
+  // Media metadata (used for the Media Session API: OS / lock-screen
+  // controls and now-playing info). For playlists, the per-track
+  // title/artist/poster take precedence over these.
+  title?: string | null;
+  artist?: string | null;
+  album?: string | null;
+
+  // Integrate with the OS media controls via the Media Session API
+  // (lock-screen / notification controls, headset buttons, now-playing
+  // metadata and artwork). Set to false to opt out.
+  mediaSession: boolean;
+
   // Playback
   autoplay: boolean;
   loop: boolean;
@@ -70,6 +83,7 @@ export interface PlayerOptions {
   downloadFileSize: number | null;
   downloadFetchSize: boolean;
   playlistToggleButton?: boolean;
+  helpButton: boolean;
 
   // Seeking
   seekInterval: number;

package/dist/dev/vidply.HTML5Renderer-P7ICKYU4.js

@@ -1,12 +0,0 @@
-/*!
- * VidPly v1.2.1 - Universal, Accessible Video Player
- * (c) 2026 Matthias Peltzer
- * Released under GPL-2.0-or-later License
- */
-import {
-  HTML5Renderer
-} from "./vidply.chunk-XAK3DPTO.js";
-export {
-  HTML5Renderer
-};
-//# sourceMappingURL=vidply.HTML5Renderer-P7ICKYU4.js.map

package/dist/prod/vidply.HTML5Renderer-7TQDMIGY.min.js

@@ -1,6 +0,0 @@
-/*!
- * VidPly v1.2.1 - Universal, Accessible Video Player
- * (c) 2026 Matthias Peltzer
- * Released under GPL-2.0-or-later License
- */
-import{HTML5Renderer as i}from"./vidply.chunk-2HNCP64N.min.js";export{i as HTML5Renderer};