From 85266bab3b5b01a6cf6d769a16f662bffa57c208 Mon Sep 17 00:00:00 2001 From: rahim Date: Tue, 10 Mar 2026 21:50:17 -0700 Subject: [PATCH] fix(skins): remove legacy caption markup artifacts (#882) --- .../presets/video/minimal-skin.tailwind.tsx | 8 --- .../react/src/presets/video/minimal-skin.tsx | 9 --- .../react/src/presets/video/skin.tailwind.tsx | 8 --- packages/react/src/presets/video/skin.tsx | 9 --- .../src/default/css/components/captions.css | 65 +------------------ .../default/tailwind/components/captions.ts | 23 ------- .../src/default/tailwind/video.tailwind.ts | 1 - .../src/minimal/css/components/captions.css | 65 +------------------ .../minimal/tailwind/components/captions.ts | 23 ------- .../src/minimal/tailwind/video.tailwind.ts | 1 - 10 files changed, 2 insertions(+), 210 deletions(-) delete mode 100644 packages/skins/src/default/tailwind/components/captions.ts delete mode 100644 packages/skins/src/minimal/tailwind/components/captions.ts diff --git a/packages/react/src/presets/video/minimal-skin.tailwind.tsx b/packages/react/src/presets/video/minimal-skin.tailwind.tsx index 8104d7f8..02a156d6 100644 --- a/packages/react/src/presets/video/minimal-skin.tailwind.tsx +++ b/packages/react/src/presets/video/minimal-skin.tailwind.tsx @@ -330,14 +330,6 @@ export function MinimalVideoSkinTailwind(props: MinimalVideoSkinProps): ReactNod - {/*
-
- - An example cue - -
-
*/} -
); diff --git a/packages/react/src/presets/video/minimal-skin.tsx b/packages/react/src/presets/video/minimal-skin.tsx index a1661986..a8164899 100644 --- a/packages/react/src/presets/video/minimal-skin.tsx +++ b/packages/react/src/presets/video/minimal-skin.tsx @@ -257,15 +257,6 @@ export function MinimalVideoSkin(props: MinimalVideoSkinProps): ReactNode { - {/*
-
- An example cue - -

Another example cue with HTML

- -
-
*/} -
); diff --git a/packages/react/src/presets/video/skin.tailwind.tsx b/packages/react/src/presets/video/skin.tailwind.tsx index 638836a9..98c067b3 100644 --- a/packages/react/src/presets/video/skin.tailwind.tsx +++ b/packages/react/src/presets/video/skin.tailwind.tsx @@ -324,14 +324,6 @@ export function VideoSkinTailwind(props: VideoSkinProps): ReactNode { - {/*
-
- - An example cue - -
-
*/} -
); diff --git a/packages/react/src/presets/video/skin.tsx b/packages/react/src/presets/video/skin.tsx index 5e3fcd5e..3a7596e9 100644 --- a/packages/react/src/presets/video/skin.tsx +++ b/packages/react/src/presets/video/skin.tsx @@ -251,15 +251,6 @@ export function VideoSkin(props: VideoSkinProps): ReactNode { - {/*
-
- An example cue - -

Another example cue with HTML

- -
-
*/} -
); diff --git a/packages/skins/src/default/css/components/captions.css b/packages/skins/src/default/css/components/captions.css index 624f8f4d..2befb520 100644 --- a/packages/skins/src/default/css/components/captions.css +++ b/packages/skins/src/default/css/components/captions.css @@ -1,60 +1,7 @@ /* ========================================================================== - Captions + Native Caption Track ========================================================================== */ -.media-default-skin .media-captions { - position: absolute; - inset: auto 1rem 1.5rem 1rem; - z-index: 20; - font-size: 1rem; - text-wrap: balance; - pointer-events: none; - - @container media-root (width > 20rem) { - font-size: 1.5rem; - } - - @container media-root (width > 48rem) { - font-size: 1.875rem; - } - - @container media-root (width > 80rem) { - font-size: 2.25rem; - } -} - -.media-default-skin .media-captions__container { - display: flex; - flex-direction: column; - align-items: center; - max-width: 42ch; - margin: 0 auto; - text-align: center; -} - -.media-default-skin .media-captions__text { - display: block; - padding: 0.125rem 0.5rem; - color: oklch(1 0 0); - text-shadow: - 0 0 1px oklch(0 0 0 / 0.7), - 0 0 8px oklch(0 0 0 / 0.7); - text-align: center; - white-space: pre-wrap; - line-height: 1.2; - - @media (prefers-contrast: more) { - background: oklch(0 0 0 / 0.7); - text-shadow: none; - box-decoration-break: clone; - } - - & > * { - display: inline; - } -} - -/* Caption shifting styles (custom and native) */ .media-default-skin { --media-caption-track-delay: 600ms; --media-caption-track-y: -0.5rem; @@ -65,26 +12,16 @@ } } -.media-default-skin .media-captions, .media-default-skin video::-webkit-media-text-track-container { /* NOTE: The delay must account for the controls delay/duration */ transition: transform 150ms ease-out; transition-delay: var(--media-caption-track-delay); -} - -.media-default-skin video::-webkit-media-text-track-container { transform: translateY(var(--media-caption-track-y)) scale(0.98); z-index: 1; font-family: inherit; } -/* When controls are visible, shift captions up to avoid overlap */ -.media-default-skin .media-controls[data-visible] ~ .media-captions { - transform: translateY(calc(var(--media-caption-track-y) - 0.5rem)); -} - @media (prefers-reduced-motion: reduce) { - .media-default-skin .media-captions, .media-default-skin video::-webkit-media-text-track-container { transition-duration: 50ms; } diff --git a/packages/skins/src/default/tailwind/components/captions.ts b/packages/skins/src/default/tailwind/components/captions.ts deleted file mode 100644 index f04d69e0..00000000 --- a/packages/skins/src/default/tailwind/components/captions.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { cn } from '@videojs/utils/style'; - -export const captions = { - root: cn( - 'absolute z-20 pointer-events-none text-balance text-base', - 'inset-x-4 bottom-6', - 'transition-transform duration-150 ease-out delay-600', - 'motion-reduce:duration-50', - // Responsive font sizes - '@xs/media-root:text-2xl', - '@3xl/media-root:text-3xl', - '@7xl/media-root:text-4xl', - // Shift up when controls visible - 'peer-data-visible/controls:-translate-y-12 peer-data-visible/controls:delay-25' - ), - container: 'max-w-[42ch] mx-auto text-center flex flex-col items-center', - cue: cn( - 'block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2', - '[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]', - 'contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70', - '*:inline' - ), -}; diff --git a/packages/skins/src/default/tailwind/video.tailwind.ts b/packages/skins/src/default/tailwind/video.tailwind.ts index 03aaf857..ee281fc2 100644 --- a/packages/skins/src/default/tailwind/video.tailwind.ts +++ b/packages/skins/src/default/tailwind/video.tailwind.ts @@ -136,7 +136,6 @@ export const error = { ========================================================================== */ export { button } from './components/button'; -export { captions } from './components/captions'; export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon'; export { iconState } from './components/icon-state'; export { overlay } from './components/overlay'; diff --git a/packages/skins/src/minimal/css/components/captions.css b/packages/skins/src/minimal/css/components/captions.css index f57b061a..b80450b2 100644 --- a/packages/skins/src/minimal/css/components/captions.css +++ b/packages/skins/src/minimal/css/components/captions.css @@ -1,60 +1,7 @@ /* ========================================================================== - Captions + Native Caption Track ========================================================================== */ -.media-minimal-skin .media-captions { - position: absolute; - inset: auto 1rem 1.5rem 1rem; - z-index: 20; - font-size: 1rem; - text-wrap: balance; - pointer-events: none; - - @container media-root (width > 20rem) { - font-size: 1.5rem; - } - - @container media-root (width > 48rem) { - font-size: 1.875rem; - } - - @container media-root (width > 80rem) { - font-size: 2.25rem; - } -} - -.media-minimal-skin .media-captions__container { - display: flex; - flex-direction: column; - align-items: center; - max-width: 42ch; - margin: 0 auto; - text-align: center; -} - -.media-minimal-skin .media-captions__text { - display: block; - padding: 0.125rem 0.5rem; - color: oklch(1 0 0); - text-shadow: - 0 0 1px oklch(0 0 0 / 0.7), - 0 0 8px oklch(0 0 0 / 0.7); - text-align: center; - white-space: pre-wrap; - line-height: 1.2; - - @media (prefers-contrast: more) { - background: oklch(0 0 0 / 0.7); - text-shadow: none; - box-decoration-break: clone; - } - - & > * { - display: inline; - } -} - -/* Caption shifting styles (custom and native) */ .media-minimal-skin { --media-caption-track-delay: 600ms; --media-caption-track-y: -0.5rem; @@ -65,26 +12,16 @@ } } -.media-minimal-skin .media-captions, .media-minimal-skin video::-webkit-media-text-track-container { /* NOTE: The delay must account for the controls delay/duration */ transition: transform 150ms ease-out; transition-delay: var(--media-caption-track-delay); -} - -.media-minimal-skin video::-webkit-media-text-track-container { transform: translateY(var(--media-caption-track-y)) scale(0.98); z-index: 1; font-family: inherit; } -/* When controls are visible, shift captions up to avoid overlap */ -.media-minimal-skin .media-controls[data-visible] ~ .media-captions { - transform: translateY(calc(var(--media-caption-track-y) - 0.5rem)); -} - @media (prefers-reduced-motion: reduce) { - .media-minimal-skin .media-captions, .media-minimal-skin video::-webkit-media-text-track-container { transition-duration: 50ms; } diff --git a/packages/skins/src/minimal/tailwind/components/captions.ts b/packages/skins/src/minimal/tailwind/components/captions.ts deleted file mode 100644 index 15043fb7..00000000 --- a/packages/skins/src/minimal/tailwind/components/captions.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { cn } from '@videojs/utils/style'; - -export const captions = { - root: cn( - 'absolute z-20 pointer-events-none text-balance text-base', - 'inset-x-4 bottom-6', - 'transition-transform duration-150 ease-out delay-600', - 'motion-reduce:duration-50', - // Responsive font sizes - '@xs/media-root:text-2xl', - '@3xl/media-root:text-3xl', - '@7xl/media-root:text-4xl', - // Shift up when controls visible - 'peer-data-visible/controls:-translate-y-10 peer-data-visible/controls:delay-25' - ), - container: 'max-w-[42ch] mx-auto text-center flex flex-col items-center', - cue: cn( - 'block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2', - '[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]', - 'contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70', - '*:inline' - ), -}; diff --git a/packages/skins/src/minimal/tailwind/video.tailwind.ts b/packages/skins/src/minimal/tailwind/video.tailwind.ts index 25ac610b..7d638243 100644 --- a/packages/skins/src/minimal/tailwind/video.tailwind.ts +++ b/packages/skins/src/minimal/tailwind/video.tailwind.ts @@ -102,7 +102,6 @@ export const popup = { export { bufferingIndicator } from './components/buffering'; export { button } from './components/button'; export { buttonGroup } from './components/button-group'; -export { captions } from './components/captions'; export { error } from './components/error'; export { icon, iconContainer, iconFlipped, iconHidden } from './components/icon'; export { iconState } from './components/icon-state';