@hanifhan1f/vidstack-react 1.12.19 → 1.12.22

package/dev/player/vidstack-default-components.js

@@ -1,14 +1,14 @@
 "use client"
 
-export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions } from '../chunks/vidstack-CkRXb9Ia.js';
+export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions } from '../chunks/vidstack-UWMPvwsa.js';
 export { defaultLayoutIcons } from './vidstack-default-icons.js';
 import 'react';
 import '../chunks/vidstack-D_bWd66h.js';
-import '../chunks/vidstack-f6WXkmfP.js';
-import '../chunks/vidstack-BDiAEW1N.js';
+import '../chunks/vidstack-H9OdEKUQ.js';
+import '../chunks/vidstack-CXrXBlpD.js';
 import '@floating-ui/dom';
-import '../chunks/vidstack-B-FM4-oZ.js';
+import '../chunks/vidstack-KntYDWMe.js';
 import 'react-dom';
-import '../chunks/vidstack-CvWDiSTs.js';
+import '../chunks/vidstack-DY2iivhG.js';
 import '../chunks/vidstack-D-hQD1eE.js';
 import '../chunks/vidstack-CBF7iUqu.js';

package/dev/player/vidstack-default-layout.js

@@ -1,14 +1,14 @@
 "use client"
 
-export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultLayoutContext, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions, i18n, useDefaultLayoutContext, useDefaultLayoutWord } from '../chunks/vidstack-CkRXb9Ia.js';
+export { DefaultAudioLayout, DefaultBufferingIndicator, DefaultKeyboardDisplay, DefaultLayoutContext, DefaultMenuButton, DefaultMenuCheckbox, DefaultMenuItem, DefaultMenuRadioGroup, DefaultMenuSection, DefaultMenuSliderItem, DefaultSliderParts, DefaultSliderSteps, DefaultTooltip, DefaultVideoGestures, DefaultVideoLargeLayout, DefaultVideoLayout, DefaultVideoSmallLayout, createRadioOptions, i18n, useDefaultLayoutContext, useDefaultLayoutWord } from '../chunks/vidstack-UWMPvwsa.js';
 export { defaultLayoutIcons } from './vidstack-default-icons.js';
 import 'react';
 import '../chunks/vidstack-D_bWd66h.js';
-import '../chunks/vidstack-f6WXkmfP.js';
-import '../chunks/vidstack-BDiAEW1N.js';
+import '../chunks/vidstack-H9OdEKUQ.js';
+import '../chunks/vidstack-CXrXBlpD.js';
 import '@floating-ui/dom';
-import '../chunks/vidstack-B-FM4-oZ.js';
+import '../chunks/vidstack-KntYDWMe.js';
 import 'react-dom';
-import '../chunks/vidstack-CvWDiSTs.js';
+import '../chunks/vidstack-DY2iivhG.js';
 import '../chunks/vidstack-D-hQD1eE.js';
 import '../chunks/vidstack-CBF7iUqu.js';

package/dev/player/vidstack-plyr-layout.js

@@ -1,11 +1,11 @@
 "use client"
 
-import { useMediaState, Primitive, IS_SERVER, isRemotionSrc, getDownloadFile } from '../chunks/vidstack-BDiAEW1N.js';
+import { useMediaState, Primitive, IS_SERVER, isRemotionSrc, getDownloadFile } from '../chunks/vidstack-CXrXBlpD.js';
 import * as React from 'react';
 import { effect, createDisposalBin, uppercaseFirstChar, isUndefined, signal, composeRefs, useSignal, isNumber, listenEvent, isString, isKeyboardEvent, isKeyboardClick } from '../chunks/vidstack-D_bWd66h.js';
-import { useMediaContext, PlayButton, Root, Img, Gesture, AirPlayButton, CaptionButton, FullscreenButton, PIPButton, SeekButton, Root$1, Value, Preview, Thumbnail, LiveButton, Time, appendParamsToURL, Root$2, Button, Items, useAudioOptions, Root$3, Item, useCaptionOptions, MuteButton, Root$4 } from '../chunks/vidstack-B-FM4-oZ.js';
-import { useMediaRemote, useVideoQualityOptions, usePlaybackRateOptions } from '../chunks/vidstack-CzU-uC5f.js';
-import { useLayoutName, useClassName } from '../chunks/vidstack-CvWDiSTs.js';
+import { useMediaContext, PlayButton, Root, Img, Gesture, AirPlayButton, CaptionButton, FullscreenButton, PIPButton, SeekButton, Root$1, Value, Preview, Thumbnail, LiveButton, Time, appendParamsToURL, Root$2, Button, Items, useAudioOptions, Root$3, Item, useCaptionOptions, MuteButton, Root$4 } from '../chunks/vidstack-KntYDWMe.js';
+import { useMediaRemote, useVideoQualityOptions, usePlaybackRateOptions } from '../chunks/vidstack-DwdhbP5c.js';
+import { useLayoutName, useClassName } from '../chunks/vidstack-DY2iivhG.js';
 import { RemotionThumbnail, RemotionPoster, RemotionSliderThumbnail } from '../chunks/vidstack-D-hQD1eE.js';
 export { plyrLayoutIcons } from './vidstack-plyr-icons.js';
 import '@floating-ui/dom';

package/dev/player/vidstack-remotion.js

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import { createDisposalBin, animationFrameThrottle, noop } from '../chunks/vidstack-D_bWd66h.js';
 import { Internals, random } from 'remotion';
-import { IS_SERVER, useMediaState, isRemotionSrc, Primitive, useSliderState } from '../chunks/vidstack-BDiAEW1N.js';
-export { isRemotionProvider } from '../chunks/vidstack-BDiAEW1N.js';
+import { IS_SERVER, useMediaState, isRemotionSrc, Primitive, useSliderState } from '../chunks/vidstack-CXrXBlpD.js';
+export { isRemotionProvider } from '../chunks/vidstack-CXrXBlpD.js';
 import { RemotionThumbnail as RemotionThumbnail$1, RemotionSliderThumbnail as RemotionSliderThumbnail$1, RemotionPoster as RemotionPoster$1 } from '../chunks/vidstack-D-hQD1eE.js';
 import '@floating-ui/dom';
 
@@ -338,7 +338,7 @@ class RemotionProviderLoader {
     return "video";
   }
   async load(ctx) {
-    return new (await import('../chunks/vidstack-D6_9yy0x.js')).RemotionProvider(this.target, ctx);
+    return new (await import('../chunks/vidstack-BSpAxhO6.js')).RemotionProvider(this.target, ctx);
   }
 }
 

package/dev/vidstack.js

@@ -1,16 +1,16 @@
 "use client"
 
-import { TextTrackSymbol, RadioGroupController, useMediaContext, menuContext, Primitive, MediaPlayerInstance, MediaProviderInstance, isRemotionProvider, mediaState, TextTrack, ToggleButtonInstance, PosterInstance, useMediaState, ThumbnailsLoader, updateSliderPreviewPlacement } from './chunks/vidstack-BDiAEW1N.js';
-export { ARIAKeyShortcuts, AUDIO_EXTENSIONS, AUDIO_TYPES, AirPlayButtonInstance, AudioGainSliderInstance, AudioProviderLoader, AudioTrackList, CaptionButtonInstance, CaptionsInstance, ControlsGroupInstance, ControlsInstance, DASHProviderLoader, DASH_VIDEO_EXTENSIONS, DASH_VIDEO_TYPES, FullscreenButtonInstance, FullscreenController, GestureInstance, GoogleCastButtonInstance, HLSProviderLoader, HLS_VIDEO_EXTENSIONS, HLS_VIDEO_TYPES, List, LiveButtonInstance, LocalMediaStorage, Logger, MEDIA_KEY_SHORTCUTS, MediaAnnouncerInstance, MediaControls, MediaRemoteControl, MenuButtonInstance, MenuInstance, MenuItemInstance, MenuItemsInstance, MenuPortalInstance, MuteButtonInstance, PIPButtonInstance, PlayButtonInstance, QualitySliderInstance, RadioGroupInstance, RadioInstance, ScreenOrientationController, SeekButtonInstance, SliderChaptersInstance, SliderInstance, SliderPreviewInstance, SliderThumbnailInstance, SliderValueInstance, SliderVideoInstance, SpeedSliderInstance, TextRenderers, TextTrackList, ThumbnailInstance, TimeInstance, TimeRange, TimeSliderInstance, TooltipContentInstance, TooltipInstance, TooltipTriggerInstance, VIDEO_EXTENSIONS, VIDEO_TYPES, VideoProviderLoader, VideoQualityList, VimeoProviderLoader, VolumeSliderInstance, YouTubeProviderLoader, boundTime, canChangeVolume, canFullscreen, canGoogleCastSrc, canOrientScreen, canPlayHLSNatively, canRotateScreen, canUsePictureInPicture, canUseVideoPresentation, findActiveCue, formatSpokenTime, formatTime, getDownloadFile, getTimeRangesEnd, getTimeRangesStart, isAudioProvider, isAudioSrc, isCueActive, isDASHProvider, isDASHSrc, isGoogleCastProvider, isHLSProvider, isHLSSrc, isHTMLAudioElement, isHTMLIFrameElement, isHTMLMediaElement, isHTMLVideoElement, isMediaStream, isTrackCaptionKind, isVideoProvider, isVideoQualitySrc, isVideoSrc, isVimeoProvider, isYouTubeProvider, mediaContext, normalizeTimeIntervals, parseJSONCaptionsFile, sliderState, softResetMediaState, sortVideoQualities, updateTimeIntervals, useMediaStore, useSliderState, useSliderStore, watchActiveTextTrack, watchCueTextChange } from './chunks/vidstack-BDiAEW1N.js';
+import { TextTrackSymbol, RadioGroupController, useMediaContext, menuContext, Primitive, MediaPlayerInstance, MediaProviderInstance, isRemotionProvider, mediaState, TextTrack, ToggleButtonInstance, PosterInstance, useMediaState, ThumbnailsLoader, updateSliderPreviewPlacement } from './chunks/vidstack-CXrXBlpD.js';
+export { ARIAKeyShortcuts, AUDIO_EXTENSIONS, AUDIO_TYPES, AirPlayButtonInstance, AudioGainSliderInstance, AudioProviderLoader, AudioTrackList, CaptionButtonInstance, CaptionsInstance, ControlsGroupInstance, ControlsInstance, DASHProviderLoader, DASH_VIDEO_EXTENSIONS, DASH_VIDEO_TYPES, FullscreenButtonInstance, FullscreenController, GestureInstance, GoogleCastButtonInstance, HLSProviderLoader, HLS_VIDEO_EXTENSIONS, HLS_VIDEO_TYPES, List, LiveButtonInstance, LocalMediaStorage, Logger, MEDIA_KEY_SHORTCUTS, MediaAnnouncerInstance, MediaControls, MediaRemoteControl, MenuButtonInstance, MenuInstance, MenuItemInstance, MenuItemsInstance, MenuPortalInstance, MuteButtonInstance, PIPButtonInstance, PlayButtonInstance, QualitySliderInstance, RadioGroupInstance, RadioInstance, ScreenOrientationController, SeekButtonInstance, SliderChaptersInstance, SliderInstance, SliderPreviewInstance, SliderThumbnailInstance, SliderValueInstance, SliderVideoInstance, SpeedSliderInstance, TextRenderers, TextTrackList, ThumbnailInstance, TimeInstance, TimeRange, TimeSliderInstance, TooltipContentInstance, TooltipInstance, TooltipTriggerInstance, VIDEO_EXTENSIONS, VIDEO_TYPES, VideoProviderLoader, VideoQualityList, VimeoProviderLoader, VolumeSliderInstance, YouTubeProviderLoader, boundTime, canChangeVolume, canFullscreen, canGoogleCastSrc, canOrientScreen, canPlayHLSNatively, canRotateScreen, canUsePictureInPicture, canUseVideoPresentation, findActiveCue, formatSpokenTime, formatTime, getDownloadFile, getTimeRangesEnd, getTimeRangesStart, isAudioProvider, isAudioSrc, isCueActive, isDASHProvider, isDASHSrc, isGoogleCastProvider, isHLSProvider, isHLSSrc, isHTMLAudioElement, isHTMLIFrameElement, isHTMLMediaElement, isHTMLVideoElement, isMediaStream, isTrackCaptionKind, isVideoProvider, isVideoQualitySrc, isVideoSrc, isVimeoProvider, isYouTubeProvider, mediaContext, normalizeTimeIntervals, parseJSONCaptionsFile, sliderState, softResetMediaState, sortVideoQualities, updateTimeIntervals, useMediaStore, useSliderState, useSliderStore, watchActiveTextTrack, watchCueTextChange } from './chunks/vidstack-CXrXBlpD.js';
 import * as React from 'react';
 import { isString, EventsController, DOMEvent, prop, method, Component, hasProvidedContext, useContext, effect, createReactComponent, useStateContext, useSignal, composeRefs, useSignalRecord, useReactScope, signal } from './chunks/vidstack-D_bWd66h.js';
 export { appendTriggerEvent, findTriggerEvent, hasTriggerEvent, isKeyboardClick, isKeyboardEvent, isPointerEvent, walkTriggerEventChain } from './chunks/vidstack-D_bWd66h.js';
-import { createSignal, useScoped } from './chunks/vidstack-f6WXkmfP.js';
-export { audioGainSlider as AudioGainSlider, Captions, ChapterTitle, controls as Controls, GoogleCastButton, MediaAnnouncer, qualitySlider as QualitySlider, speedSlider as SpeedSlider, spinner as Spinner, Title, tooltip as Tooltip, useActiveTextCues, useActiveTextTrack, useChapterOptions, useChapterTitle, useTextCues } from './chunks/vidstack-f6WXkmfP.js';
-import { useMediaContext as useMediaContext$1 } from './chunks/vidstack-B-FM4-oZ.js';
-export { AirPlayButton, CaptionButton, FullscreenButton, Gesture, LiveButton, menu as Menu, MuteButton, PIPButton, PlayButton, radioGroup as RadioGroup, SeekButton, slider as Slider, thumbnail as Thumbnail, Time, timeSlider as TimeSlider, volumeSlider as VolumeSlider, useAudioOptions, useCaptionOptions, useMediaPlayer } from './chunks/vidstack-B-FM4-oZ.js';
+import { createSignal, useScoped } from './chunks/vidstack-H9OdEKUQ.js';
+export { audioGainSlider as AudioGainSlider, Captions, ChapterTitle, controls as Controls, GoogleCastButton, MediaAnnouncer, qualitySlider as QualitySlider, speedSlider as SpeedSlider, spinner as Spinner, Title, tooltip as Tooltip, useActiveTextCues, useActiveTextTrack, useChapterOptions, useChapterTitle, useTextCues } from './chunks/vidstack-H9OdEKUQ.js';
+import { useMediaContext as useMediaContext$1 } from './chunks/vidstack-KntYDWMe.js';
+export { AirPlayButton, CaptionButton, FullscreenButton, Gesture, LiveButton, menu as Menu, MuteButton, PIPButton, PlayButton, radioGroup as RadioGroup, SeekButton, slider as Slider, thumbnail as Thumbnail, Time, timeSlider as TimeSlider, volumeSlider as VolumeSlider, useAudioOptions, useCaptionOptions, useMediaPlayer } from './chunks/vidstack-KntYDWMe.js';
 import { Icon } from './chunks/vidstack-CBF7iUqu.js';
-export { DEFAULT_PLAYBACK_RATES, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions } from './chunks/vidstack-CzU-uC5f.js';
+export { DEFAULT_PLAYBACK_RATES, useMediaRemote, usePlaybackRateOptions, useVideoQualityOptions } from './chunks/vidstack-DwdhbP5c.js';
 import '@floating-ui/dom';
 import 'react-dom';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hanifhan1f/vidstack-react",
   "description": "UI component library for building high-quality, accessible video and audio experiences on the web.",
-  "version": "1.12.19",
+  "version": "1.12.22",
   "license": "MIT",
   "type": "module",
   "types": "index.d.ts",

package/player/styles/default/layouts/video.css

@@ -775,18 +775,20 @@
 .vds-video-layout .vds-episodes-panel {
   position: absolute;
   top: 50%;
-  right: 20px;
-  width: min(36vw, 430px);
-  max-height: min(74vh, 620px);
-  overflow: auto;
+  right: max(16px, 1.5vw);
+  width: min(34vw, 400px);
+  max-height: min(78vh, 640px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   padding: 0;
-  background: linear-gradient(180deg, rgb(10 10 10 / 94%) 0%, rgb(4 4 4 / 92%) 100%);
-  border: 1px solid rgb(255 255 255 / 20%);
-  border-radius: 18px;
-  backdrop-filter: blur(14px);
+  background: linear-gradient(180deg, rgb(12 12 12 / 96%) 0%, rgb(6 6 6 / 94%) 100%);
+  border: 1px solid rgb(255 255 255 / 14%);
+  border-radius: 14px;
+  backdrop-filter: blur(16px) saturate(1.2);
   box-shadow:
-    0 26px 56px rgb(0 0 0 / 58%),
-    inset 0 1px 0 rgb(255 255 255 / 8%);
+    0 24px 48px rgb(0 0 0 / 55%),
+    inset 0 1px 0 rgb(255 255 255 / 6%);
   z-index: 20;
   opacity: 0;
   transform: translate3d(16px, -50%, 0);
@@ -808,16 +810,18 @@
 }
 
 .vds-video-layout .vds-episodes-panel-header {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 16px 12px;
-  border-bottom: 1px solid rgb(255 255 255 / 12%);
+  gap: 12px;
+  padding: 14px 16px 13px;
+  border-bottom: 1px solid rgb(255 255 255 / 10%);
   position: sticky;
   top: 0;
   z-index: 1;
-  background: linear-gradient(180deg, rgb(10 10 10 / 95%), rgb(10 10 10 / 74%));
-  backdrop-filter: blur(8px);
+  background: linear-gradient(180deg, rgb(12 12 12 / 98%), rgb(10 10 10 / 88%));
+  backdrop-filter: blur(10px);
 }
 
 .vds-video-layout .vds-episodes-close-btn {
@@ -839,19 +843,26 @@
 }
 
 .vds-video-layout .vds-episodes-panel-title {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 600;
-  letter-spacing: 0.01em;
+  letter-spacing: 0.02em;
+  line-height: 1.3;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  min-width: 0;
 }
 
 .vds-video-layout .vds-episodes-list {
+  flex: 1;
+  min-height: 0;
   margin: 0;
-  padding: 10px;
-  display: grid;
-  gap: 0;
+  padding: 10px 10px 14px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   scrollbar-width: thin;
   scrollbar-color: rgb(255 255 255 / 28%) transparent;
 }
@@ -936,34 +947,30 @@
 
 .vds-video-layout .vds-episode-item {
   display: grid !important;
-  grid-template-columns: 152px minmax(0, 1fr) !important;
+  grid-template-columns: 148px minmax(0, 1fr) !important;
   align-items: start;
   width: 100%;
-  min-height: 108px;
+  min-height: 0;
   gap: 12px;
-  padding: 11px 2px;
-  border-radius: 0;
-  border: 0;
-  border-bottom: 1px solid rgb(255 255 255 / 10%);
-  background: transparent;
+  padding: 10px 10px 10px 8px;
+  border-radius: 10px;
+  border: 1px solid rgb(255 255 255 / 6%);
+  background: rgb(255 255 255 / 3%);
   transition:
-    transform 0.18s ease,
-    opacity 0.18s ease;
+    background 0.18s ease,
+    border-color 0.18s ease,
+    transform 0.18s ease;
 }
 
 .vds-video-layout .vds-episode-item:hover {
-  transform: translateX(2px);
-  opacity: 0.98;
+  background: rgb(255 255 255 / 6%);
+  border-color: rgb(255 255 255 / 10%);
 }
 
 .vds-video-layout .vds-episode-item[data-active='true'] {
-  position: relative;
   cursor: default;
-  background: linear-gradient(90deg, rgb(229 9 20 / 12%) 0%, rgb(255 255 255 / 4%) 42%);
-  border-radius: 12px;
-  padding-inline: 8px;
-  margin-inline: -6px;
-  outline: 1px solid rgb(229 9 20 / 35%);
+  background: linear-gradient(135deg, rgb(229 9 20 / 14%) 0%, rgb(255 255 255 / 5%) 100%);
+  border-color: rgb(229 9 20 / 45%);
   box-shadow: inset 3px 0 0 #e50914;
 }
 
@@ -972,42 +979,43 @@
 }
 
 .vds-video-layout .vds-episode-item[data-active='true'] .vds-episode-thumb {
-  filter: brightness(0.78);
+  filter: brightness(0.88);
 }
 
 .vds-video-layout .vds-episode-item[data-active='true'] .vds-episode-label {
-  color: #ff6b6b;
+  color: #ffb4b4;
 }
 
 .vds-video-layout .vds-episode-item:focus-visible {
-  outline: 2px solid rgb(255 255 255 / 55%);
-  outline-offset: 2px;
+  outline: 2px solid rgb(255 255 255 / 45%);
+  outline-offset: 1px;
 }
 
 .vds-video-layout .vds-episode-item[data-active='true']:focus-visible {
-  outline-color: rgb(229 9 20 / 70%);
+  outline-color: rgb(229 9 20 / 55%);
 }
 
-.vds-video-layout .vds-episode-active-overlay {
-  position: absolute;
-  inset: 0;
+.vds-video-layout .vds-episode-meta-primary {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
-  background: linear-gradient(180deg, rgb(0 0 0 / 15%) 0%, rgb(0 0 0 / 45%) 100%);
-  pointer-events: none;
+  gap: 6px;
+  min-width: 0;
 }
 
-.vds-video-layout .vds-episode-playing-badge {
+.vds-video-layout .vds-episode-now-chip {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 7px;
+  border-radius: 4px;
   background: #e50914;
   color: #fff;
-  font-size: 10px;
+  font-size: 9px;
   font-weight: 700;
-  padding: 4px 8px;
-  border-radius: 6px;
+  letter-spacing: 0.07em;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
-  box-shadow: 0 4px 14px rgb(0 0 0 / 35%);
+  line-height: 1.2;
 }
 
 .vds-video-layout .vds-episode-progress-track {
@@ -1027,19 +1035,20 @@
 
 .vds-video-layout .vds-episode-thumb {
   display: block;
-  width: 152px;
-  height: 86px;
+  width: 148px;
+  height: 84px;
   object-fit: cover;
-  border-radius: 10px;
+  border-radius: 8px;
   background: #151515;
-  border: 1px solid rgb(255 255 255 / 12%);
+  border: 1px solid rgb(255 255 255 / 10%);
 }
 
 .vds-video-layout .vds-episode-thumb-wrap {
-  width: 152px;
-  height: 86px;
-  border-radius: 10px;
+  width: 148px;
+  height: 84px;
+  border-radius: 8px;
   overflow: hidden;
+  flex-shrink: 0;
 }
 
 .vds-video-layout .vds-episode-thumb-placeholder {
@@ -1050,7 +1059,8 @@
   min-width: 0;
   display: grid;
   align-content: start;
-  gap: 3px;
+  gap: 5px;
+  padding-top: 1px;
 }
 
 .vds-video-layout .vds-episode-title,
@@ -1063,28 +1073,34 @@
 
 .vds-video-layout .vds-episode-meta-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: 8px;
+  gap: 10px;
+}
+
+.vds-video-layout .vds-episode-meta-row .vds-episode-runtime {
+  flex-shrink: 0;
+  margin-top: 1px;
 }
 
 .vds-video-layout .vds-episode-label {
   font-size: 10px;
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.07em;
   text-transform: uppercase;
   color: #e50914;
 }
 
 .vds-video-layout .vds-episode-runtime {
   font-size: 11px;
-  color: rgb(255 255 255 / 65%);
+  font-variant-numeric: tabular-nums;
+  color: rgb(255 255 255 / 72%);
 }
 
 .vds-video-layout .vds-episode-title {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
-  line-height: 1.2;
+  line-height: 1.28;
 }
 
 .vds-video-layout .vds-episode-subtitle {
@@ -1095,12 +1111,13 @@
 
 .vds-video-layout .vds-episode-desc {
   margin: 0;
-  font-size: 12px;
-  line-height: 1.35;
-  color: rgb(255 255 255 / 78%);
-  line-clamp: 2;
+  margin-top: 2px;
+  font-size: 11px;
+  line-height: 1.45;
+  color: rgb(255 255 255 / 68%);
+  line-clamp: 3;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -1118,13 +1135,13 @@
   }
 
   .vds-video-layout .vds-episodes-panel {
-    left: 10px;
-    right: 10px;
+    left: 8px;
+    right: 8px;
     width: auto;
     top: auto;
-    bottom: 64px;
-    max-height: min(62vh, 480px);
-    border-radius: 14px;
+    bottom: 56px;
+    max-height: min(64vh, 520px);
+    border-radius: 12px;
     transform: translate3d(0, 10px, 0);
   }