vidply 1.0.8 → 1.0.10

package/src/i18n/translations.js

@@ -96,10 +96,20 @@ export const translations = {
       settings: 'Transcript settings. Press Enter to open menu, or D to enable drag mode',
       keyboardDragMode: 'Toggle keyboard drag mode with arrow keys. Shortcut: D key',
       keyboardDragActive: '⌨️ Keyboard Drag Mode Active (Arrow keys to move, Shift+Arrows for large steps, D or ESC to exit)',
+      dragResizePrompt: 'Press D to drag or R to resize. Use Home to reset position, Esc to close.',
+      dragModeEnabled: 'Keyboard drag mode enabled. Use arrow keys to move, Shift+Arrow for larger steps. Press D or Esc to exit.',
+      dragModeDisabled: 'Keyboard drag mode disabled.',
       resizeWindow: 'Resize Window',
+      disableResizeWindow: 'Disable Resize Mode',
+      resizeModeHint: 'Resize handles enabled. Drag edges or corners to adjust. Press Esc or R to exit.',
+      resizeModeEnabled: 'Resize mode enabled. Drag edges or corners to adjust. Press Esc or R to exit.',
+      resizeModeDisabled: 'Resize mode disabled.',
+      positionReset: 'Transcript position reset.',
       styleTranscript: 'Open transcript style settings',
       closeMenu: 'Close Menu',
-      styleTitle: 'Transcript Style'
+      styleTitle: 'Transcript Style',
+      autoscroll: 'Autoscroll',
+      settingsMenu: 'Settings menu'
     },
     settings: {
       title: 'Settings',
@@ -218,10 +228,20 @@ export const translations = {
       settings: 'Transkript-Einstellungen. Eingabetaste zum Öffnen des Menüs drücken oder D zum Aktivieren des Verschiebemodus',
       keyboardDragMode: 'Tastatur-Verschiebemodus mit Pfeiltasten umschalten. Tastenkombination: D-Taste',
       keyboardDragActive: '⌨️ Tastatur-Verschiebemodus aktiv (Pfeiltasten zum Bewegen, Umschalt+Pfeiltasten für große Schritte, D oder ESC zum Beenden)',
+      dragResizePrompt: 'Drücken Sie D zum Verschieben oder R zur Größenänderung. Home setzt die Position zurück, Esc schließt.',
+      dragModeEnabled: 'Tastatur-Verschiebemodus aktiviert. Pfeiltasten zum Bewegen, Umschalt+Pfeiltasten für größere Schritte. D oder Esc zum Beenden.',
+      dragModeDisabled: 'Tastatur-Verschiebemodus deaktiviert.',
       resizeWindow: 'Fenster vergrößern/verkleinern',
+      disableResizeWindow: 'Resize-Modus deaktivieren',
+      resizeModeHint: 'Griffe aktiviert. Ziehen Sie Kanten oder Ecken zum Anpassen. Esc oder R zum Beenden.',
+      resizeModeEnabled: 'Resize-Modus aktiviert. Kanten oder Ecken ziehen; Esc oder R beendet.',
+      resizeModeDisabled: 'Resize-Modus deaktiviert.',
+      positionReset: 'Transkriptposition zurückgesetzt.',
       styleTranscript: 'Transkript-Stileinstellungen öffnen',
       closeMenu: 'Menü schließen',
-      styleTitle: 'Transkript-Stil'
+      styleTitle: 'Transkript-Stil',
+      autoscroll: 'Automatisches Scrollen',
+      settingsMenu: 'Einstellungsmenü'
     },
     settings: {
       title: 'Einstellungen',
@@ -340,10 +360,20 @@ export const translations = {
       settings: 'Configuración de transcripción. Presione Enter para abrir el menú o D para activar el modo de arrastre',
       keyboardDragMode: 'Alternar modo de arrastre con teclado usando teclas de flecha. Atajo: tecla D',
       keyboardDragActive: '⌨️ Modo de Arrastre con Teclado Activo (Teclas de flecha para mover, Mayús+Flechas para pasos grandes, D o ESC para salir)',
+      dragResizePrompt: 'Pulsa D para mover o R para cambiar el tamaño. Home restablece la posición; Esc cierra.',
+      dragModeEnabled: 'Modo de arrastre con teclado activado. Usa flechas para mover, Mayús+Flechas para pasos grandes. Pulsa D o Esc para salir.',
+      dragModeDisabled: 'Modo de arrastre con teclado desactivado.',
       resizeWindow: 'Cambiar tamaño de ventana',
+      disableResizeWindow: 'Desactivar modo de cambio de tamaño',
+      resizeModeHint: 'Controladores habilitados. Arrastra bordes o esquinas para ajustar. Pulsa Esc o R para salir.',
+      resizeModeEnabled: 'Modo de cambio de tamaño activado. Arrastra bordes o esquinas. Pulsa Esc o R para salir.',
+      resizeModeDisabled: 'Modo de cambio de tamaño desactivado.',
+      positionReset: 'Posición de la transcripción restablecida.',
       styleTranscript: 'Abrir configuración de estilo de transcripción',
       closeMenu: 'Cerrar menú',
-      styleTitle: 'Estilo de Transcripción'
+      styleTitle: 'Estilo de Transcripción',
+      autoscroll: 'Desplazamiento automático',
+      settingsMenu: 'Menú de configuración'
     },
     settings: {
       title: 'Configuración',
@@ -462,10 +492,20 @@ export const translations = {
       settings: 'Paramètres de transcription. Appuyez sur Entrée pour ouvrir le menu ou D pour activer le mode glissement',
       keyboardDragMode: 'Basculer le mode glissement avec les touches fléchées. Raccourci: touche D',
       keyboardDragActive: '⌨️ Mode Glissement Clavier Actif (Touches fléchées pour déplacer, Maj+Fléchées pour grands pas, D ou Échap pour quitter)',
+      dragResizePrompt: 'Appuyez sur D pour déplacer ou R pour redimensionner. Home réinitialise la position, Échap ferme.',
+      dragModeEnabled: 'Mode glissement clavier activé. Utilisez les flèches pour déplacer, Maj+Flèches pour de grands pas. Appuyez sur D ou Échap pour quitter.',
+      dragModeDisabled: 'Mode glissement clavier désactivé.',
       resizeWindow: 'Redimensionner la fenêtre',
+      disableResizeWindow: 'Désactiver le mode de redimensionnement',
+      resizeModeHint: 'Poignées activées. Faites glisser les bords ou les coins pour ajuster. Appuyez sur Échap ou R pour quitter.',
+      resizeModeEnabled: 'Mode redimensionnement activé. Faites glisser les bords ou coins. Appuyez sur Échap ou R pour quitter.',
+      resizeModeDisabled: 'Mode redimensionnement désactivé.',
+      positionReset: 'Position de la transcription réinitialisée.',
       styleTranscript: 'Ouvrir les paramètres de style de transcription',
       closeMenu: 'Fermer le menu',
-      styleTitle: 'Style de Transcription'
+      styleTitle: 'Style de Transcription',
+      autoscroll: 'Défilement automatique',
+      settingsMenu: 'Menu des paramètres'
     },
     settings: {
       title: 'Paramètres',
@@ -584,10 +624,20 @@ export const translations = {
       settings: '文字起こし設定。Enterキーでメニューを開く、またはDキーでドラッグモードを有効にする',
       keyboardDragMode: '矢印キーでキーボードドラッグモードを切り替え。ショートカット：Dキー',
       keyboardDragActive: '⌨️ キーボードドラッグモード有効（矢印キーで移動、Shift+矢印キーで大きく移動、DまたはESCで終了）',
+      dragResizePrompt: 'Dキーで移動、Rキーでサイズ変更。Homeで位置をリセット、Escで閉じます。',
+      dragModeEnabled: 'キーボードドラッグモードを有効にしました。矢印キーで移動、Shift+矢印キーで大きく移動できます。終了するには D または Esc を押します。',
+      dragModeDisabled: 'キーボードドラッグモードを無効にしました。',
       resizeWindow: 'ウィンドウのサイズ変更',
+      disableResizeWindow: 'サイズ変更モードを無効にする',
+      resizeModeHint: 'リサイズハンドルが有効になりました。辺や角をドラッグして調整します。Esc または R で終了します。',
+      resizeModeEnabled: 'サイズ変更モードを有効にしました。辺や角をドラッグして調整します。Esc または R で終了します。',
+      resizeModeDisabled: 'サイズ変更モードを無効にしました。',
+      positionReset: '文字起こしの位置をリセットしました。',
       styleTranscript: '文字起こしスタイル設定を開く',
       closeMenu: 'メニューを閉じる',
-      styleTitle: '文字起こしスタイル'
+      styleTitle: '文字起こしスタイル',
+      autoscroll: '自動スクロール',
+      settingsMenu: '設定メニュー'
     },
     settings: {
       title: '設定',

package/src/icons/Icons.js

@@ -71,9 +71,9 @@ const iconPaths = {
 
     transcript: `<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>`,
 
-    audioDescription: `<rect x="2" y="5" width="20" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><text x="12" y="16" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="currentColor">AD</text>`,
+    audioDescription: `<rect x="2" y="5" width="20" height="14" rx="2" fill="#ffffff" stroke="#ffffff" stroke-width="2"/><text x="12" y="16" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="#1a1a1a">AD</text>`,
     
-    audioDescriptionOn: `<rect x="2" y="5" width="20" height="14" rx="2" fill="#1a1a1a" stroke="#1a1a1a" stroke-width="2"/><text x="12" y="16" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="#ffffff">AD</text>`,
+    audioDescriptionOn: `<rect x="2" y="5" width="20" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><text x="12" y="16" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="currentColor">AD</text>`,
 
     signLanguage: `<g transform="scale(1.5)"><path d="M16 11.3c-.1-.9-4.8 1.3-5.4 1.1-2.6-1 5.8-1.3 5.1-2.9s-5.1 1.5-6 1.4C6.5 9.4 16.5 9.1 13.5 8c-1.9-.6-8.8 2.9-6.8.4.7-.6.7-1.9-.7-1.7-9.7 7.2-.7 12.2 8.8 7 0-1.3-3.5.4-4.1.4-2.6 0 5.6-2 5.4-3ZM3.9 7.8c3.2-4.2 3.7 1.2 6 .1s.2-.2.2-.3c.7-2.7 2.5-7.5-1.5-1.3-1.6 0 1.1-4 1-4.6C8.9-1 7.3 4.4 7.2 4.9c-1.6.7-.9-1.4-.7-1.5 3-6-.6-3.1-.9.4-2.5 1.8 0-2.8 0-3.5C2.8-.9 4 9.4 1.1 4.9S.1 4.6 0 5c-.4 2.7 2.6 7.2 3.9 2.8Z"/></g>`,
 

package/src/styles/vidply.css

@@ -35,27 +35,32 @@
     --vidply-border-hover: var(--vidply-white-30);
     --vidply-border-light: var(--vidply-white-10);
     --vidply-focus-outline: 2px solid var(--vidply-primary);
+    --vidply-focus-outline-player: 3px solid var(--vidply-primary-light);
     --vidply-focus-outline-white: 2px solid var(--vidply-primary-light);
     --vidply-hover-bg: var(--vidply-white-10);
     --vidply-primary: #0a406e;
     --vidply-primary-10: rgb(var(--vidply-primary-rgb), 0.1);
     --vidply-primary-15: rgb(var(--vidply-primary-rgb), 0.15);
-
-    /* Black Color Variations */
     --vidply-primary-20: rgb(var(--vidply-primary-rgb), 0.2);
     --vidply-primary-25: rgb(var(--vidply-primary-rgb), 0.25);
     --vidply-primary-30: rgb(var(--vidply-primary-rgb), 0.3);
     --vidply-primary-40: rgb(var(--vidply-primary-rgb), 0.4);
     --vidply-primary-50: rgb(var(--vidply-primary-rgb), 0.5);
+
+    /* Black Color Variations */
     --vidply-primary-60: rgb(var(--vidply-primary-rgb), 0.6);
     --vidply-primary-70: rgb(var(--vidply-primary-rgb), 0.7);
     --vidply-primary-80: rgb(var(--vidply-primary-rgb), 0.8);
     --vidply-primary-dark: #083358;
-
-    /* UI Background Colors */
     --vidply-primary-dark-rgb: 8, 51, 88;
     --vidply-primary-light: #71b7e2;
     --vidply-primary-rgb: 10, 64, 110;
+    --vidply-scrollbar-thumb: var(--vidply-white);
+    --vidply-scrollbar-thumb-hover: var(--vidply-white-90);
+
+    /* UI Background Colors */
+    --vidply-scrollbar-track: #404040;
+    --vidply-scrollbar-track-transcript: #555;
     --vidply-shadow-lg: 0 12px 48px var(--vidply-black-80);
     --vidply-shadow-md: 0 4px 12px var(--vidply-black-40);
     --vidply-shadow-sm: 0 2px 4px var(--vidply-black-30);
@@ -64,6 +69,7 @@
     --vidply-text-primary: var(--vidply-white);
     --vidply-text-secondary: var(--vidply-white-90);
     --vidply-text-subtle: var(--vidply-white-50);
+    --vidply-transition-default: all 0.2s ease;
 
     /* Border Colors */
     --vidply-white: #fff;
@@ -110,16 +116,11 @@
 
 /* Player Focus Outline */
 .vidply-player:focus {
-    outline: 3px solid var(--vidply-primary-light);
-    outline-offset: 4px;
-}
-
-.vidply-player:focus:not(:focus-visible) {
     outline: none;
 }
 
 .vidply-player:focus-visible {
-    outline: 3px solid var(--vidply-primary-light);
+    outline: var(--vidply-focus-outline-player);
     outline-offset: 4px;
 }
 
@@ -192,6 +193,17 @@
     z-index: 1; /* Base video layer */
 }
 
+.vidply-video-wrapper.vidply-forced-poster {
+    background-image: var(--vidply-poster-image);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.vidply-video-wrapper.vidply-forced-poster > video {
+    opacity: 0;
+}
+
 /* Mobile: Simplify video wrapper */
 @media (width <= 640px) {
     .vidply-video-wrapper {
@@ -311,9 +323,6 @@
 .vidply-progress-container:hover,
 .vidply-progress-container:focus {
     height: 8px;
-}
-
-.vidply-progress-container:focus {
     outline: var(--vidply-focus-outline-white);
     outline-offset: 2px;
 }
@@ -421,10 +430,6 @@
     outline-offset: 2px;
 }
 
-.vidply-button:focus:not(:focus-visible) {
-    outline: none;
-}
-
 .vidply-button:disabled {
     cursor: not-allowed;
     opacity: 0.5;
@@ -1310,12 +1315,16 @@
     }
 }
 
-/* Focus Visible Polyfill */
-.vidply-player :focus:not(:focus-visible) {
-    outline: none;
-}
-
-.vidply-player :focus-visible {
+/* Focus Visible */
+.vidply-player :focus-visible,
+.vidply-player button:hover,
+.vidply-player a:hover,
+.vidply-player input:hover,
+.vidply-player select:hover,
+.vidply-player textarea:hover,
+.vidply-player [role="button"]:hover,
+.vidply-player [role="link"]:hover,
+.vidply-player [tabindex]:not([tabindex="-1"]):hover {
     outline: var(--vidply-focus-outline-white);
     outline-offset: 2px;
 }
@@ -1402,7 +1411,7 @@
     gap: 12px;
     padding: 12px 16px;
     position: relative;
-    transition: all 0.2s ease;
+    transition: var(--vidply-transition-default);
 }
 
 .vidply-playlist-item:hover {
@@ -1413,19 +1422,14 @@
 .vidply-playlist-item:focus {
     background: var(--vidply-white-08);
     border-left-color: var(--vidply-primary);
-    outline: 2px solid var(--vidply-primary-light);
-    outline-offset: -2px;
-    z-index: 1;
-}
-
-.vidply-playlist-item:focus:not(:focus-visible) {
     outline: none;
+    z-index: 1;
 }
 
 .vidply-playlist-item:focus-visible {
     background: var(--vidply-white-08);
     border-left-color: var(--vidply-primary);
-    outline: 2px solid var(--vidply-primary-light);
+    outline: var(--vidply-focus-outline-white);
     outline-offset: -2px;
     z-index: 1;
 }
@@ -1439,10 +1443,14 @@
     background: var(--vidply-primary-20);
 }
 
-.vidply-playlist-item-active:focus,
+.vidply-playlist-item-active:focus {
+    background: var(--vidply-primary-20);
+    outline: none;
+}
+
 .vidply-playlist-item-active:focus-visible {
     background: var(--vidply-primary-20);
-    outline: 2px solid var(--vidply-primary-light);
+    outline: var(--vidply-focus-outline-white);
     outline-offset: -2px;
 }
 
@@ -1464,7 +1472,7 @@
 .vidply-playlist-thumbnail-icon {
     color: var(--vidply-text-subtle);
     height: 32px;
-    transition: all 0.2s ease;
+    transition: var(--vidply-transition-default);
     width: 32px;
 }
 
@@ -1525,21 +1533,26 @@
 }
 
 /* Playlist Scrollbar */
+.vidply-playlist-panel {
+    scrollbar-color: var(--vidply-scrollbar-thumb) var(--vidply-scrollbar-track);
+    scrollbar-width: thin;
+}
+
 .vidply-playlist-panel::-webkit-scrollbar {
     width: 8px;
 }
 
 .vidply-playlist-panel::-webkit-scrollbar-track {
-    background: var(--vidply-black-30);
+    background: var(--vidply-scrollbar-track);
 }
 
 .vidply-playlist-panel::-webkit-scrollbar-thumb {
-    background: var(--vidply-white-20);
+    background: var(--vidply-scrollbar-thumb);
     border-radius: 4px;
 }
 
 .vidply-playlist-panel::-webkit-scrollbar-thumb:hover {
-    background: var(--vidply-border-hover);
+    background: var(--vidply-scrollbar-thumb-hover);
 }
 
 /* Audio Player with Playlist */
@@ -1570,7 +1583,7 @@
     flex-direction: column;
     max-width: 400px;
     order: 4; /* After video-wrapper (1), track-info (2), and playlist-panel (3) */
-    position: absolute;
+    position: fixed;
     top: 0;
     width: 400px;
     z-index: 5;
@@ -1583,7 +1596,7 @@
 
 .vidply-transcript-header {
     align-items: center;
-    background: var(--vidply-active-bg);
+    background: #282828;
     border-bottom: 1px solid var(--vidply-border-light);
     border-radius: 8px 8px 0 0;
     cursor: move;
@@ -1593,11 +1606,24 @@
     user-select: none;
 }
 
+.vidply-transcript-header:focus,
+.vidply-transcript-header:focus-visible {
+    box-shadow: 0 0 0 4px rgb(91 144 255 / 35%);
+    outline: 3px solid var(--vidply-primary-light);
+    outline-offset: 2px;
+}
+
 .vidply-transcript-header h3 {
+    /* Visually hidden but accessible to screen readers */
     color: var(--vidply-white);
     font-size: 16px;
     font-weight: 600;
+    height: 1px;
+    left: -10000px;
     margin: 0;
+    overflow: hidden;
+    position: absolute;
+    width: 1px;
 }
 
 .vidply-transcript-close {
@@ -1611,7 +1637,7 @@
     height: 28px;
     justify-content: center;
     padding: 4px;
-    transition: all 0.2s ease;
+    transition: var(--vidply-transition-default);
     width: 28px;
 }
 
@@ -1714,31 +1740,92 @@
 }
 
 /* Transcript Scrollbar */
+.vidply-transcript-content {
+    scrollbar-color: var(--vidply-scrollbar-thumb) var(--vidply-scrollbar-track-transcript);
+    scrollbar-width: thin;
+}
+
 .vidply-transcript-content::-webkit-scrollbar {
     width: 8px;
 }
 
 .vidply-transcript-content::-webkit-scrollbar-track {
-    background: var(--vidply-black-30);
+    background: var(--vidply-scrollbar-track-transcript);
 }
 
 .vidply-transcript-content::-webkit-scrollbar-thumb {
-    background: var(--vidply-white-20);
+    background: var(--vidply-scrollbar-thumb);
     border-radius: 4px;
 }
 
 .vidply-transcript-content::-webkit-scrollbar-thumb:hover {
-    background: var(--vidply-border-hover);
+    background: var(--vidply-scrollbar-thumb-hover);
 }
 
 /* Transcript Header Left Side (Settings Button + Title) */
 .vidply-transcript-header-left {
     align-items: center;
     display: flex;
-    gap: 8px;
+    gap: 16px;
     position: relative;
 }
 
+/* Transcript Autoscroll Checkbox */
+.vidply-transcript-autoscroll-label {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    gap: 6px;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.vidply-transcript-autoscroll-label input[type="checkbox"] {
+    cursor: pointer;
+    height: 16px;
+    margin: 0;
+    width: 16px;
+}
+
+.vidply-transcript-autoscroll-text {
+    color: var(--vidply-text-muted);
+    font-size: 13px;
+    transition: color 0.2s ease;
+}
+
+.vidply-transcript-autoscroll-label:hover .vidply-transcript-autoscroll-text {
+    color: var(--vidply-white);
+}
+
+/* Transcript Language Selector */
+.vidply-transcript-language-select {
+    background: var(--vidply-white-10);
+    border: 1px solid var(--vidply-white-20);
+    border-radius: 4px;
+    color: var(--vidply-white);
+    cursor: pointer;
+    font-size: 13px;
+    padding: 4px 8px;
+    transition: var(--vidply-transition-default);
+}
+
+.vidply-transcript-language-select:hover {
+    background: var(--vidply-white-15);
+    border-color: var(--vidply-border-hover);
+}
+
+.vidply-transcript-language-select:focus {
+    background: var(--vidply-white-15);
+    border-color: var(--vidply-border-focus);
+    box-shadow: 0 0 0 3px var(--vidply-primary-20);
+    outline: none;
+}
+
+.vidply-transcript-language-select option {
+    background: #1a1a1a;
+    color: var(--vidply-white);
+}
+
 /* Transcript Settings Button */
 .vidply-transcript-settings {
     align-items: center;
@@ -1752,7 +1839,7 @@
     justify-content: center;
     padding: 4px;
     position: relative;
-    transition: all 0.2s ease;
+    transition: var(--vidply-transition-default);
     width: 28px;
 }
 
@@ -1762,7 +1849,7 @@
 }
 
 .vidply-transcript-settings:focus {
-    outline: 2px solid var(--vidply-primary-light);
+    outline: var(--vidply-focus-outline-white);
     outline-offset: 2px;
 }
 
@@ -2006,6 +2093,22 @@
     z-index: 1000;
 }
 
+.vidply-transcript-resize-tooltip {
+    animation: fadeInDown 0.3s ease;
+    background: var(--vidply-primary);
+    border-radius: 4px;
+    color: var(--vidply-white);
+    font-size: 12px;
+    left: 50%;
+    padding: 6px 12px;
+    position: absolute;
+    text-align: center;
+    top: 100%;
+    transform: translateX(-50%);
+    white-space: nowrap;
+    z-index: 1000;
+}
+
 @keyframes fadeInDown {
     from {
         opacity: 0;
@@ -2084,7 +2187,7 @@
     font-size: 13px;
     outline: none;
     padding: 6px 10px;
-    transition: all 0.2s ease;
+    transition: var(--vidply-transition-default);
     width: 100%;
 }
 
@@ -2112,7 +2215,7 @@
     height: 32px;
     outline: none;
     padding: 4px;
-    transition: all 0.2s ease;
+    transition: var(--vidply-transition-default);
     width: 100%;
 }
 
@@ -2196,7 +2299,7 @@
     font-weight: 600;
     margin-top: 12px;
     padding: 8px 16px;
-    transition: all 0.2s ease;
+    transition: var(--vidply-transition-default);
     width: 100%;
 }
 
@@ -2218,9 +2321,8 @@
 .vidply-sign-language-wrapper {
     background: transparent;
     height: auto;
-    max-width: 400px;
+    max-width: none;
     min-height: 100px;
-    min-width: 150px;
     position: absolute;
     transition: opacity 0.3s ease;
     width: 280px;
@@ -2228,7 +2330,7 @@
 }
 
 .vidply-fullscreen .vidply-sign-language-wrapper {
-    max-width: 600px;
+    max-width: none;
 }
 
 .vidply-sign-language-wrapper:focus {