@instructure/studio-player 0.2.9 → 0.2.10

package/dist/index-DAULLpyh.css

@@ -0,0 +1 @@
+._annotation-overlay_1kxzn_1{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-user-select:none;user-select:none;z-index:1;background-color:#000c;display:flex;flex-direction:column;justify-content:center;align-items:center}._media-buffering-indicator_1fwjr_1{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;z-index:1;background-color:#00000080;transition:opacity .2s ease}[data-media-player][data-buffering] ._media-buffering-spinner_1fwjr_17{pointer-events:none;animation:_media-buffering-spin_1fwjr_17 1s linear infinite}._media-buffering-track_1fwjr_22{color:#f5f5f5;opacity:.25}._media-buffering-track-fill_1fwjr_27{color:var(--media-brand, #f5f5f5);opacity:.75}[data-media-player][data-buffering] ._media-buffering-indicator_1fwjr_1{opacity:1}@keyframes _media-buffering-spin_1fwjr_17{to{transform:rotate(360deg)}}._captions_13epz_1{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:var(--captions-flex-direction, column);align-items:center;padding:var(--spacing-3)}._captions_13epz_1[aria-hidden=true]{display:none}._captions_13epz_1 [data-part=cue-display]{display:inline-block;padding:var(--spacing-2);background-color:var(--captions-background-color, rgba(22 22 22 / .75));border-radius:var(--radius-2)}._captions_13epz_1 [data-part=cue]{color:var(--captions-color, white);text-align:center;max-width:50ch;line-height:1.5;font-size:calc(var(--captions-base-font-size-small) * var(--captions-font-size-multiplier, 1))}@container player (width > 425px){._captions_13epz_1 [data-part=cue]{font-size:calc(var(--captions-base-font-size-normal) * var(--captions-font-size-multiplier, 1))}}._comments-overlay_2woxe_1{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--spacing-1);display:flex;align-items:end}._comments-container_2woxe_9{display:flex;flex-direction:column;gap:.25rem;width:15.625rem}@container player (width >= 900px) and (height >= 640px){._comments-container_2woxe_9{width:23.4375rem}}@media (hover: none) and (orientation: portrait) and (max-width: 720px){[data-fullscreen] ._comments-overlay_2woxe_1{justify-content:end}}._comment_2woxe_1{display:grid;grid-template-areas:"avatar text";grid-template-columns:auto 1fr;align-items:center;padding:var(--spacing-1);gap:var(--spacing-1);border-radius:var(--radius-2);background-color:var(--comments-background-color);cursor:pointer;border:1px solid #666}@container player (width >= 720px) and (height >= 540px){._comment_2woxe_1{grid-template-areas:"text text" "avatar name"}}._comment-text_2woxe_45{grid-area:text;color:var(--comments-color);font-size:var(--comments-font-size-small);line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;-webkit-user-select:none;user-select:none}@container player (height >= 400px){._comment-text_2woxe_45{-webkit-line-clamp:2;line-clamp:2}}@container player (width >= 900px) and (height >= 640px){._comment-text_2woxe_45{font-size:var(--comments-font-size-normal)}}._comment-author-avatar_2woxe_68{grid-area:avatar;box-sizing:border-box;display:inline-block;object-fit:cover;width:1.25rem;height:1.25rem;border-radius:50%;-webkit-user-select:none;user-select:none;pointer-events:none;background-color:#fff;contain:paint}@container player (width >= 900px) and (height >= 640px){._comment-author-avatar_2woxe_68{width:1.875rem;height:1.875rem}}._comment-author-name_2woxe_87{grid-area:name;color:var(--comments-author-color);font-size:var(--comments-font-size-small);font-weight:700;line-height:1.5;display:none}@container player (width >= 720px) and (height >= 540px){._comment-author-name_2woxe_87{display:inline}}@container player (width >= 900px) and (height >= 640px){._comment-author-name_2woxe_87{font-size:var(--comments-font-size-normal)}}._root_1x28e_1{background-color:var(--controls-layout-bg-color, #f5f5f5);padding:var(--spacing-1);display:grid;align-items:center;grid-template-columns:auto 1fr auto;grid-template-areas:"slider slider slider" "left-controls indicators right-controls";row-gap:.25rem;column-gap:1rem;border-bottom-left-radius:var(--radius-2);border-bottom-right-radius:var(--radius-2)}@container player (width >= 420px) and (height <= 300px){._root_1x28e_1{grid-template-columns:auto auto 1fr auto;grid-template-areas:"left-controls indicators slider right-controls"}}[data-fullscreen] ._root_1x28e_1,[data-darkmode=true]._root_1x28e_1{background-color:#000}._left-controls_1x28e_28{display:flex;gap:.25rem;grid-area:left-controls}._right-controls_1x28e_34{display:flex;gap:.25rem;grid-area:right-controls}._indicators_1x28e_40{grid-area:indicators;font-size:.875rem}@container player (width > 425px) and (height > 300px){._indicators_1x28e_40{font-size:1rem}}@container player (width >= 420px) and (height <= 300px){div._normal-timeline_1x28e_49{display:none}}div._compact-timeline_1x28e_55{display:none}@container player (width >= 420px) and (height <= 300px){div._compact-timeline_1x28e_55{display:flex;padding-bottom:0}}._menu-hint_k49ve_1{color:var(--settings-media-submenu-hint-color, #9ea6ad)}._menu-button_k49ve_5{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-1);padding:6px 11px;color:var(--settings-submenu-color, #2d3b45);font-size:1rem;line-height:1.5;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;outline:none;border:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-family:inherit}._menu-button_k49ve_5:hover,._menu-button_k49ve_5:focus{color:var(--settings-media-hover-color, white);background-color:var(--settings-media-hover-bg-color, rgb(43 122 188))}._menu-button_k49ve_5:hover ._menu-hint_k49ve_1,._menu-button_k49ve_5:focus ._menu-hint_k49ve_1{color:var(--settings-media-hover-color, white)}._menu-label_k49ve_37{flex-grow:1;text-align:left}._menu-icon_k49ve_42{width:1.125rem;height:1.125rem}._switch-track_vptv3_1{position:relative;background-color:#e8e8e8;width:2.625rem;height:1.75rem;border-radius:.875rem;will-change:background-color;transition:background-color .2s}._switch-thumb_vptv3_11{background-color:#fff;width:1.5rem;height:1.5rem;border-radius:.75rem;transform:translate(.125rem,.125rem);box-shadow:#e8eaec 0 0 0 .0625rem inset;will-change:transform;transition:transform .2s;display:flex;align-items:center;justify-content:center}._switch-icon_vptv3_25{width:.875rem;height:.875rem;color:var(--settings-submenu-color)}._switch-body_vptv3_31{display:flex;align-items:center;gap:var(--spacing-1);padding:.375rem .6875rem;color:var(--settings-submenu-color);font-size:1rem;line-height:1.5;cursor:pointer;outline:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._switch-body_vptv3_31[aria-checked=true] ._switch-track_vptv3_1{background-color:#03893d}._switch-body_vptv3_31[aria-checked=true] ._switch-icon_vptv3_25{color:#03893d}._switch-body_vptv3_31[aria-checked=true] ._switch-thumb_vptv3_11{transform:translate(1rem,.125rem)}._switch-body_vptv3_31:hover,._switch-body_vptv3_31:focus-visible{color:var(--settings-media-hover-color);background-color:var(--settings-media-hover-bg-color)}[aria-checked=true]:is(._switch-body_vptv3_31:hover,._switch-body_vptv3_31:focus-visible) ._switch-track_vptv3_1{background-color:#e8e8e8}._switch-label_vptv3_68{flex-grow:1}._menu-icon_vptv3_72{width:1.125rem;height:1.125rem}._main-menu_7h96l_1,._menu-container_1bjr3_1,._menu-options_1bjr3_6{display:flex;flex-direction:column}._menu-heading_1bjr3_11{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;display:block;margin:0 var(--spacing-2);padding-top:var(--spacing-2);padding-bottom:.5625rem;border-bottom:.0625rem solid #c7cdd1;font-weight:700;line-height:1.5}._check-icon_1bjr3_27{width:1.25rem;height:1.25rem;visibility:hidden}._menu-item-label_1bjr3_33{display:block}._menu-item_1bjr3_33{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;outline:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;padding:6px 11px;gap:var(--spacing-2);cursor:pointer;font-size:1rem;line-height:1.5;font-family:inherit;color:inherit}._menu-item_1bjr3_33:hover,._menu-item_1bjr3_33:focus{color:var(--settings-media-hover-color, white);background-color:var(--settings-media-hover-bg-color, rgb(43 122 188))}._menu-item_1bjr3_33[aria-checked=true] ._check-icon_1bjr3_27{visibility:visible}._menu-back-button_1bjr3_66{display:flex;align-items:center;gap:var(--spacing-1);padding:6px 11px;color:var(--settings-submenu-color, #2d3b45);font-size:1rem;line-height:1.5;cursor:pointer;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;outline:none;border:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-family:inherit}._menu-back-button_1bjr3_66:hover,._menu-back-button_1bjr3_66:focus{color:var(--settings-media-hover-color, white);background-color:var(--settings-media-hover-bg-color, rgb(43 122 188))}._settings-menu_hxlsv_1{display:flex;flex-direction:column;background-color:var(--settings-menu-bg-color, white);padding-top:.25rem;padding-bottom:.25rem;border-radius:var(--radius-2);width:294px;z-index:1000;filter:drop-shadow(0 .125rem .1875rem rgba(0 0 0 / .5))}._arrow_hxlsv_15{fill:#fff}._feedback-overlay_v4lbu_1{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;padding:var(--spacing-4);flex-direction:column;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;pointer-events:none}._feedback-message_v4lbu_14{font-weight:300;position:absolute;top:10%;display:flex;justify-content:center;align-items:center;padding:var(--spacing-2);background-color:var(--feedback-message-bg-color, black);color:var(--feedback-message-color, white);border-radius:var(--radius-2);font-size:1rem;line-height:1.5;opacity:.75}._feedback-icon_v4lbu_30{box-sizing:border-box;display:inline-flex;color:var(--feedback-icon-color, white);padding:var(--spacing-3);width:4.5rem;height:4.5rem;background-color:var(--feedback-icon-bg-color, black);border-radius:var(--radius-3);animation:_feedback-icon-animation_v4lbu_1 .4s linear;animation-fill-mode:forwards;will-change:transform,opacity}._feedback-icon_v4lbu_30:has(.right){align-self:end}._feedback-icon_v4lbu_30:has(.left){align-self:start}._feedback-icon_v4lbu_30>svg{width:100%;height:100%}@keyframes _feedback-icon-animation_v4lbu_1{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:.5}}@media (max-width: 425px){[data-fullscreen] ._full-screen-button_1xm32_2{display:none}}[data-media-player][data-view-type=audio] ._full-screen-button_1xm32_2{display:none}._gestures-container_1fn3b_1{display:contents}._gesture_1fn3b_1{position:absolute;top:0;right:0;bottom:0;left:0}[data-fullscreen] ._gesture_1fn3b_1{top:3.625rem}._keyboard-shortcuts-overlay_y5kv6_1{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background-color:#000000b3;color:#fff;padding:1.5rem;-webkit-user-select:none;user-select:none;overflow-y:auto;display:flex;flex-direction:column;align-items:center}._keyboard-shortcuts-overlay_y5kv6_1 header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}:is(._keyboard-shortcuts-overlay_y5kv6_1 header) h2{font-size:1rem;font-weight:500;margin:0}@container player (width > 400px) and (height > 300px){:is(._keyboard-shortcuts-overlay_y5kv6_1 header) h2{font-size:1.5rem}}._keyboard-shortcuts-overlay_y5kv6_1 table{width:100%;max-width:54rem;padding:0;border-collapse:collapse}@container player (width > 400px) and (height > 300px){._keyboard-shortcuts-overlay_y5kv6_1 table{padding:2rem}}:is(._keyboard-shortcuts-overlay_y5kv6_1 table) tr{border-bottom:1px solid rgba(232 234 236 / .2)}:is(._keyboard-shortcuts-overlay_y5kv6_1 table) tbody tr:last-child{border-bottom:none}:is(._keyboard-shortcuts-overlay_y5kv6_1 table) th,:is(._keyboard-shortcuts-overlay_y5kv6_1 table) td{text-align:left;font-size:.75rem;line-height:1.5}@container player (width > 400px) and (height > 300px){:is(._keyboard-shortcuts-overlay_y5kv6_1 table) th,:is(._keyboard-shortcuts-overlay_y5kv6_1 table) td{font-size:.875rem}}@container player (width >= 720px) and (height > 300px){:is(._keyboard-shortcuts-overlay_y5kv6_1 table) th,:is(._keyboard-shortcuts-overlay_y5kv6_1 table) td{font-size:1rem}}._keyboard-shortcuts-button_y5kv6_67{position:absolute;top:1rem;right:1rem;z-index:1;opacity:0;width:2.25rem;height:2.25rem;pointer-events:none;border-radius:var(--radius-2);border:1px solid #d7dade;background:var(--controls-layout-bg-color)}._keyboard-shortcuts-button_y5kv6_67:focus-visible{opacity:1;pointer-events:auto}[data-media-player][data-view-type=audio] ._keyboard-shortcuts-button_y5kv6_67{display:none}._close-button_y5kv6_93{background-color:transparent;border:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;width:2.25rem;height:2.25rem}@media (max-width: 425px) and (hover: none){button._play-pause-button_kyuc5_1{display:none}}._poster_195hi_1{width:100%;height:100%;object-fit:contain;position:absolute;display:none}._poster_195hi_1[data-visible]{display:block}._small-layout-overlay_1vli4_1{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;visibility:hidden;align-items:center;justify-content:center}@media (max-width: 425px) and (hover: none){._small-layout-overlay_1vli4_1{visibility:visible}}._small-layout-button_1vli4_14{width:5rem;height:5rem;background-color:#1616164d;display:flex;align-items:center;justify-content:center;border-radius:50%}._small-layout-icon-play_1vli4_24,._small-layout-icon-pause_1vli4_30{width:3rem;height:3rem;color:#fff}._full-screen-close-icon_1vli4_36{display:none}[data-fullscreen] ._full-screen-close-icon_1vli4_36{background-color:transparent;border:none;display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;padding:1.25rem;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none}[data-fullscreen][data-playing] ._full-screen-close-icon_1vli4_36,[data-media-player][data-playing] ._small-layout-button_1vli4_14{animation:_fade-out_1vli4_1 1s;animation-delay:1.5s;animation-fill-mode:forwards}[data-media-player][data-playing] ._small-layout-icon-play_1vli4_24,[data-media-player][data-paused] ._small-layout-icon-pause_1vli4_30{display:none}@keyframes _fade-out_1vli4_1{0%{opacity:1}to{opacity:0}}._time-indicator_1rlpb_1{display:flex;color:#556572;-webkit-user-select:none;user-select:none}[data-fullscreen] ._time-indicator_1rlpb_1,[data-darkmode=true] ._time-indicator_1rlpb_1{color:#fff}._comment-markers_49pse_1{display:flex;position:relative;width:100%;height:.375rem;-webkit-user-select:none;user-select:none;pointer-events:none}@container player (width >= 420px) and (height <= 300px){._comment-markers_49pse_1{display:none}}._comment-marker_49pse_1{position:absolute;height:100%;background:linear-gradient(90deg,#2b7abc,#abd9ff);border-radius:.125rem}._timeline-wrapper_49pse_21{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 var(--spacing-1);grid-area:slider;padding-bottom:.375rem}._timeline-wrapper_49pse_21:has(._comment-markers_49pse_1){padding-bottom:0}._track_49pse_35{width:100%;height:.25rem;will-change:height;position:relative;background-color:var(--timeline-track-bg-color, #ccd0d2);border-radius:var(--radius-1);contain:strict;transition:height .15s,border-radius .15s}._thumb_49pse_48{position:absolute;width:1.125rem;height:1.125rem;background-color:var(--timeline-thumb-color, #2b7abc);border-radius:var(--radius-3);cursor:pointer;opacity:0;transform:translate(-50%) translateZ(0);transition:opacity .15s ease-in;left:var(--slider-fill);will-change:left}._root_49pse_62{display:inline-flex;width:100%;height:1.25rem;position:relative;align-items:center;contain:layout style;outline:none;cursor:pointer;user-select:none;touch-action:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._root_49pse_62[data-active] ._track_49pse_35{border-radius:var(--radius-2);height:.625rem}._root_49pse_62[data-focus] ._track_49pse_35{outline:2px solid var(--focus-outline-color);outline-offset:1px;border-radius:2px}._root_49pse_62[data-active] ._thumb_49pse_48{opacity:1}._track-inner_49pse_92{position:absolute;will-change:width;height:100%}._progress_49pse_98{z-index:0;width:var(--slider-progress, 0%);background-color:var(--timeline-track-progress-bg-color, #adb2b6)}._track-fill_49pse_104{z-index:1;width:var(--slider-fill, 0%);background-color:var(--timeline-track-fill-bg-color, #2b7abc)}:is([data-fullscreen] ._root_49pse_62,[data-darkmode=true] ._root_49pse_62) ._track_49pse_35{background-color:#333}:is([data-fullscreen] ._root_49pse_62,[data-darkmode=true] ._root_49pse_62) ._progress_49pse_98{background-color:#666}._pins_49pse_121{display:flex;position:relative;height:2rem;width:100%;-webkit-user-select:none;user-select:none;margin-top:var(--spacing-1)}@container player (width >= 420px) and (height <= 300px){._pins_49pse_121{display:none}}._pin-button_49pse_134{display:flex;background-color:transparent;border:none;padding:0;position:absolute;transform:translate(-50%);cursor:pointer;transition:transform .2s ease-out;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._pin-button_49pse_134:hover{transform:translate(-50%) scale(1.25);z-index:1}._annotation-pin_49pse_154{fill:var(--pin-color-1);stroke:var(--pin-color-2)}._quiz-pin_49pse_159{fill:var(--pin-color-2);stroke:none}._annotation-pin-child_49pse_164{fill:var(--pin-color-3)}._quiz-pin-child_49pse_168{fill:#fff;font-size:.875rem}._interactive-pin-container_49pse_173{position:absolute;top:0;right:0;bottom:0;left:0;padding:0 var(--spacing-1)}@container player (width >= 420px) and (height <= 300px){._interactive-pin-container_49pse_173{display:none}}._interactive-pin-wrapper_49pse_183{position:relative;width:100%;height:100%}._interactive-pin-icon_49pse_189{transform-box:fill-box;transform-origin:center;transition:transform .2s ease-out}._interactive-pin-icon_49pse_189[data-open=true]{transform:rotate(45deg)}._interactive-pin_49pse_173{filter:drop-shadow(0 3px 6px rgba(0 0 0 / .16)) drop-shadow(0 3px 6px rgba(0 0 0 / .1))}._interactive-pin_49pse_173>._bg_49pse_203{fill:var(--timeline-thumb-color)}._interactive-pin_49pse_173>._symbol_49pse_207{stroke:var(--controls-layout-bg-color)}._interactive-pin-button_49pse_212{position:absolute;cursor:pointer;transform:translate(-50%);background-color:transparent;border:none;padding:0;display:flex;z-index:1;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._interactive-pin-button_49pse_212:hover ._interactive-pin_49pse_173>._bg_49pse_203{fill:#225f92}._interactive-pin-menu_49pse_232{display:flex;flex-direction:column;gap:.25rem;background-color:var(--settings-menu-bg-color, white);padding:.75rem .5rem;border-radius:var(--radius-2);width:169px;z-index:1000;filter:drop-shadow(0 .125rem .1875rem rgba(0 0 0 / .5))}._interactive-pin-menu-item_49pse_246{font-family:inherit;font-size:14px;text-rendering:geometricprecision;display:flex;align-items:center;gap:.25rem;color:var(--pin-color-3);padding:4px 6px;border-radius:var(--radius-2);border:1px solid #d7dade;background-color:var(--pin-color-1);cursor:pointer}._interactive-pin-menu-item_49pse_246:hover{background-color:#e8eaec}._arrow_49pse_267{fill:#fff}._wrapper_12cb0_1{display:flex;align-items:center}._track_12cb0_6{width:100%;height:.25rem;will-change:height;background-color:var(--volume-track-bg-color, #ccd0d2);border-radius:var(--radius-1);contain:strict;transition:height .15s,border-radius .15s}._thumb_12cb0_18{position:absolute;width:.875rem;height:.875rem;background-color:var(--volume-thumb-bg-color, #2d3b45);border-radius:var(--radius-3);cursor:pointer;opacity:0;transform:translate(-50%) translateZ(0);transition:opacity .15s ease-in;left:var(--slider-fill);will-change:left}._track-fill_12cb0_32{width:var(--slider-fill, 0%);will-change:width;height:100%;background-color:var(--volume-track-fill-bg-color, #2d3b45)}:is([data-fullscreen],[data-darkmode=true]) ._track_12cb0_6{background-color:#666}:is([data-fullscreen],[data-darkmode=true]) ._track-fill_12cb0_32,:is([data-fullscreen],[data-darkmode=true]) ._thumb_12cb0_18{background-color:#f5f5f5}._root_12cb0_51{display:inline-flex;height:1.25rem;align-items:center;contain:layout style;cursor:pointer;user-select:none;touch-action:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:0;will-change:width,margin;transition:all .15s;box-sizing:border-box}@media (max-width: 425px) and (hover: none){._root_12cb0_51{display:none}}._root_12cb0_51[data-active] ._track_12cb0_6{border-radius:.125rem;height:.3125rem}._root_12cb0_51[data-focus]{outline:none}._root_12cb0_51[data-focus] ._track_12cb0_6{outline:2px solid var(--focus-outline-color);outline-offset:1px;border-radius:2px}._root_12cb0_51[data-active] ._thumb_12cb0_18{opacity:1}._wrapper_12cb0_1:hover [data-media-volume-slider],[data-media-volume-slider][data-active]{margin-left:.5rem;width:4rem}[data-media-player]{--volume-track-bg-color: #ccd0d2;--volume-track-fill-bg-color: #2d3b45;--volume-thumb-bg-color: #2d3b45;--feedback-message-bg-color: black;--feedback-message-color: white;--feedback-icon-color: white;--feedback-icon-bg-color: black;--timeline-track-bg-color: #ccd0d2;--timeline-track-progress-bg-color: #adb2b6;--timeline-track-fill-bg-color: #2b7abc;--timeline-progress-bg-color: #adb2b6;--timeline-thumb-color: #2b7abc;--settings-menu-bg-color: white;--settings-submenu-color: #2d3b45;--settings-media-hover-color: white;--settings-media-hover-bg-color: rgb(43 122 188);--settings-media-submenu-hint-color: var(--settings-submenu-color);--captions-background-color: rgba(22 22 22 / .75);--captions-color: white;--captions-base-font-size-small: .75rem;--captions-base-font-size-normal: 1rem;--comments-background-color: rgba(0 0 0 / .8);--comments-color: white;--comments-font-size-small: .75rem;--comments-font-size-normal: .875rem;--comments-author-color: #c7cdd1;--controls-layout-bg-color: #f5f5f5;--media-button-icon-color: #2d3b45;--media-button-icon-hover-color: #e0e0e0;--focus-outline-color: #2b7abc;--spacing-1: .5rem;--spacing-2: .625rem;--spacing-3: 1rem;--spacing-4: 2rem;--radius-1: .0625rem;--radius-2: .25rem;--radius-3: 50%;--media-button-area-size-small: 2rem;--media-button-area-size-medium: 2.5rem;--media-button-area-size-large: 3rem;--media-button-icon-size-small: 1rem;--media-button-icon-size-medium: 1.5rem;--media-button-icon-size-large: 1.5rem;--action-buttons-color: #0374b5;--action-buttons-hover-color: #235f93;--action-buttons-border-color: #025483;--pin-color-1: #f2f4f4;--pin-color-2: #556572;--pin-color-3: #273540;outline:none;border-radius:var(--radius-2);position:relative;font-family:Lato,sans-serif;display:grid;container:player / size;width:100%;height:100%;grid-template-rows:1fr auto}[data-media-provider]{display:flex;position:relative;background-color:#000;contain:paint;border-top-left-radius:var(--radius-2);border-top-right-radius:var(--radius-2)}[data-media-provider] video,[data-media-provider] iframe{width:100%;height:100%;object-fit:contain;position:absolute}[data-media-player][data-view-type=audio]{container-type:normal;height:initial}[data-media-player][data-view-type=audio] [data-media-provider]{display:none}.controls-button{background-color:transparent;border:none;border-radius:var(--radius-2);cursor:pointer;padding:var(--spacing-1);margin:0;display:flex;align-items:center;justify-content:center;transition:background-color .2s;width:var(--media-button-area-size-small);height:var(--media-button-area-size-small)}@container player (width > 400px) and (height > 300px){.controls-button{width:var(--media-button-area-size-medium);height:var(--media-button-area-size-medium)}}@container player (width >= 720px) and (height > 300px){.controls-button{width:var(--media-button-area-size-large);height:var(--media-button-area-size-large)}}.controls-button[data-hover],.controls-button:hover{background-color:var(--media-button-icon-hover-color, #e0e0e0)}.controls-button:focus-visible,.controls-button[data-focus]{outline:2px solid var(--focus-outline-color)}.controls-button-icon{color:var(--media-button-icon-color);width:var(--media-button-icon-size-small);height:var(--media-button-icon-size-small)}@container player (width > 400px) and (height > 300px){.controls-button-icon{width:var(--media-button-icon-size-medium);height:var(--media-button-icon-size-medium)}}@container player (width >= 720px) and (height > 300px){.controls-button-icon{width:var(--media-button-icon-size-large);height:var(--media-button-icon-size-large)}}:is([data-fullscreen],[data-darkmode=true]) .controls-button-icon{color:#fff}:is([data-fullscreen],[data-darkmode=true]) .controls-button[data-hover],:is([data-fullscreen],[data-darkmode=true]) .controls-button:hover{background-color:#ffffff26}.icon-rotate{transition:transform .2s ease-out}.controls-button[aria-expanded=true] .icon-rotate{transform:rotate(60deg);transition:transform .1s ease-in}

package/dist/studio-player.es.js

@@ -1,13 +1,13 @@
-import './index-BEdzBQV0.css';var Ke = Object.defineProperty;
+import './index-DAULLpyh.css';var Ke = Object.defineProperty;
 var De = (e, n, o) => n in e ? Ke(e, n, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[n] = o;
 var N = (e, n, o) => De(e, typeof n != "symbol" ? n + "" : n, o);
 import { jsx as t, jsxs as s, Fragment as ee } from "react/jsx-runtime";
-import { createContext as te, useContext as P, useState as M, useCallback as p, useEffect as E, useMemo as Z, useRef as ve } from "react";
-import { useMediaPlayer as q, Spinner as Y, useMediaRemote as W, useMediaState as _, isTrackCaptionKind as ze, Track as je, Captions as Ue, usePlaybackRateOptions as qe, useCaptionOptions as We, useVideoQualityOptions as Ge, useMediaStore as Ce, FullscreenButton as ge, PlayButton as Qe, Poster as Ye, Time as re, TimeSlider as A, MuteButton as Je, VolumeSlider as z, MediaPlayer as Xe, MediaProvider as et } from "@vidstack/react";
+import { createContext as te, useContext as L, useState as M, useCallback as p, useEffect as E, useMemo as Z, useRef as ve } from "react";
+import { useMediaPlayer as q, Spinner as Y, useMediaRemote as W, useMediaState as _, isTrackCaptionKind as ze, Track as Ue, Captions as je, usePlaybackRateOptions as qe, useCaptionOptions as We, useVideoQualityOptions as Ge, useMediaStore as Ce, FullscreenButton as ge, PlayButton as Qe, Poster as Ye, Time as re, TimeSlider as A, MuteButton as Je, VolumeSlider as z, MediaPlayer as Xe, MediaProvider as et } from "@vidstack/react";
 import { initReactI18next as tt, useTranslation as b } from "react-i18next";
 import nt from "i18next";
 import ot from "i18next-resources-to-backend";
-import { useFloating as be, autoUpdate as ke, flip as ye, arrow as we, useDismiss as Le, useInteractions as Pe, FloatingFocusManager as it, FloatingArrow as xe, shift as at, offset as st } from "@floating-ui/react";
+import { useFloating as be, autoUpdate as we, flip as ke, arrow as ye, useDismiss as xe, useInteractions as Le, FloatingFocusManager as it, FloatingArrow as Pe, shift as at, offset as st } from "@floating-ui/react";
 const ct = (e, n, o) => {
   const i = e[n];
   return i ? typeof i == "function" ? i() : Promise.resolve(i) : new Promise((a, c) => {
@@ -42,7 +42,7 @@ function lt({
   return /* @__PURE__ */ t(Ne.Provider, { value: n, children: e });
 }
 function v() {
-  const e = P(Ne);
+  const e = L(Ne);
   if (!e)
     throw new Error(
       "useStudioPlayerContext must be used within a StudioPlayerContextProvider"
@@ -62,8 +62,8 @@ function rt({
   interactiveMenuElements: m,
   darkMode: h,
   children: C,
-  forceComments: w,
-  disableCaptionSettings: y
+  forceComments: y,
+  disableCaptionSettings: k
 }) {
   const g = {
     hideFullScreen: e,
@@ -79,13 +79,13 @@ function rt({
     hasComments: n.length > 0,
     hasAnnotations: o.length > 0,
     hasQuizmarkers: i.length > 0,
-    forceComments: w,
-    disableCaptionSettings: y
+    forceComments: y,
+    disableCaptionSettings: k
   };
   return /* @__PURE__ */ t(Me.Provider, { value: g, children: C });
 }
 function S() {
-  const e = P(Me);
+  const e = L(Me);
   if (!e)
     throw new Error(
       "useStudioPlayerPropsContext must be used within a StudioPlayerPropsContextProvider"
@@ -133,7 +133,7 @@ function ht({ annotations: e }) {
     };
   }, [n, e]), a ? /* @__PURE__ */ t("div", { className: dt.annotationOverlay, children: a.render(u) }) : null;
 }
-const pt = "_media-buffering-indicator_1fwjr_1", _t = "_media-buffering-spinner_1fwjr_17", ft = "_media-buffering-spin_1fwjr_17", vt = "_media-buffering-track_1fwjr_22", Ct = "_media-buffering-track-fill_1fwjr_27", j = {
+const pt = "_media-buffering-indicator_1fwjr_1", _t = "_media-buffering-spinner_1fwjr_17", ft = "_media-buffering-spin_1fwjr_17", vt = "_media-buffering-track_1fwjr_22", Ct = "_media-buffering-track-fill_1fwjr_27", U = {
   "media-buffering-indicator": "_media-buffering-indicator_1fwjr_1",
   mediaBufferingIndicator: pt,
   "media-buffering-spinner": "_media-buffering-spinner_1fwjr_17",
@@ -146,12 +146,12 @@ const pt = "_media-buffering-indicator_1fwjr_1", _t = "_media-buffering-spinner_
   mediaBufferingTrackFill: Ct
 };
 function gt() {
-  return /* @__PURE__ */ t("div", { className: j.mediaBufferingIndicator, children: /* @__PURE__ */ s(Y.Root, { className: j.mediaBufferingSpinner, size: 96, children: [
-    /* @__PURE__ */ t(Y.Track, { className: j.mediaBufferingTrack, width: 8 }),
+  return /* @__PURE__ */ t("div", { className: U.mediaBufferingIndicator, children: /* @__PURE__ */ s(Y.Root, { className: U.mediaBufferingSpinner, size: 96, children: [
+    /* @__PURE__ */ t(Y.Track, { className: U.mediaBufferingTrack, width: 8 }),
     /* @__PURE__ */ t(
       Y.TrackFill,
       {
-        className: j.mediaBufferingTrackFill,
+        className: U.mediaBufferingTrackFill,
         width: 8
       }
     )
@@ -183,14 +183,14 @@ function bt() {
     }
   ) : null;
 }
-const kt = "_captions_13epz_1", yt = {
-  captions: kt
+const wt = "_captions_13epz_1", kt = {
+  captions: wt
 };
-function wt({ captions: e }) {
+function yt({ captions: e }) {
   const n = _("hasCaptions"), o = v();
   return /* @__PURE__ */ s(ee, { children: [
     e.map((i) => /* @__PURE__ */ t(
-      je,
+      Ue,
       {
         kind: "subtitles",
         type: i.type,
@@ -210,12 +210,12 @@ function wt({ captions: e }) {
           "--captions-color": o.state.captionsInvertColors ? "rgba(22, 22, 22)" : "white",
           "--captions-background-color": o.state.captionsInvertColors ? "rgba(255, 255, 255, 0.75)" : "rgba(22, 22, 22, 0.75)"
         },
-        children: /* @__PURE__ */ t(Ue, { className: yt.captions })
+        children: /* @__PURE__ */ t(je, { className: kt.captions })
       }
     ) : null
   ] });
 }
-const B = [0.5, 0.75, 1, 1.25, 1.5, 2], Lt = [0.5, 1, 2, 3, 4], Se = 5, Pt = (e) => {
+const B = [0.5, 0.75, 1, 1.25, 1.5, 2], xt = [0.5, 1, 2, 3, 4], Se = 5, Lt = (e) => {
   const [, n] = M({});
   return Z(() => {
     let o = [];
@@ -234,20 +234,20 @@ const B = [0.5, 0.75, 1, 1.25, 1.5, 2], Lt = [0.5, 1, 2, 3, 4], Se = 5, Pt = (e)
       }
     };
   }, []);
-}, xt = (e, n, o) => {
+}, Pt = (e, n, o) => {
   let i = !1;
   return (a) => {
     const c = a.detail.currentTime;
     c >= e.timestamp && c < e.timestamp + n && !i && (o.add(e), i = !0), (c < e.timestamp || c >= e.timestamp + n) && i && (o.remove(e), i = !1);
   };
 }, Nt = (e, n = 5) => {
-  const o = q(), i = Pt(n);
+  const o = q(), i = Lt(n);
   return E(() => {
     if (!o)
       return;
     const a = [];
     for (const c of e) {
-      const l = xt(c, Se, i);
+      const l = Pt(c, Se, i);
       a.push(l), o.addEventListener("time-update", l);
     }
     return o.dispatchEvent(
@@ -260,17 +260,17 @@ const B = [0.5, 0.75, 1, 1.25, 1.5, 2], Lt = [0.5, 1, 2, 3, 4], Se = 5, Pt = (e)
       i.clear();
     };
   }, [o, i, e]), i;
-}, Mt = "_comments-overlay_agbjl_1", Tt = "_comments-container_agbjl_9", It = "_comment_agbjl_1", St = "_comment-text_agbjl_44", Ht = "_comment-author-avatar_agbjl_67", Vt = "_comment-author-name_agbjl_86", R = {
-  "comments-overlay": "_comments-overlay_agbjl_1",
+}, Mt = "_comments-overlay_2woxe_1", Tt = "_comments-container_2woxe_9", It = "_comment_2woxe_1", St = "_comment-text_2woxe_45", Ht = "_comment-author-avatar_2woxe_68", Vt = "_comment-author-name_2woxe_87", R = {
+  "comments-overlay": "_comments-overlay_2woxe_1",
   commentsOverlay: Mt,
-  "comments-container": "_comments-container_agbjl_9",
+  "comments-container": "_comments-container_2woxe_9",
   commentsContainer: Tt,
   comment: It,
-  "comment-text": "_comment-text_agbjl_44",
+  "comment-text": "_comment-text_2woxe_45",
   commentText: St,
-  "comment-author-avatar": "_comment-author-avatar_agbjl_67",
+  "comment-author-avatar": "_comment-author-avatar_2woxe_68",
   commentAuthorAvatar: Ht,
-  "comment-author-name": "_comment-author-name_agbjl_86",
+  "comment-author-name": "_comment-author-name_2woxe_87",
   commentAuthorName: Vt
 };
 function Bt({ comment: e }) {
@@ -327,7 +327,7 @@ function Dt({
       /* @__PURE__ */ t(ro, {}),
       /* @__PURE__ */ t(hi, {})
     ] }),
-    /* @__PURE__ */ t("div", { className: V.indicators, children: /* @__PURE__ */ t(wo, {}) }),
+    /* @__PURE__ */ t("div", { className: V.indicators, children: /* @__PURE__ */ t(yo, {}) }),
     /* @__PURE__ */ t(he, { className: V.compactTimeline }),
     /* @__PURE__ */ s("div", { className: V.rightControls, children: [
       o && /* @__PURE__ */ t(bt, {}),
@@ -336,27 +336,27 @@ function Dt({
     ] })
   ] });
 }
-const x = te(null), zt = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 3.03704L7.03704 2L14.037 9L7.03704 16L6 14.963L11.963 9L6 3.03704Z", fill: "currentColor" }) }), jt = "_menu-hint_k49ve_1", Ut = "_menu-button_k49ve_5", qt = "_menu-label_k49ve_37", Wt = "_menu-icon_k49ve_42", U = {
+const P = te(null), zt = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 3.03704L7.03704 2L14.037 9L7.03704 16L6 14.963L11.963 9L6 3.03704Z", fill: "currentColor" }) }), Ut = "_menu-hint_k49ve_1", jt = "_menu-button_k49ve_5", qt = "_menu-label_k49ve_37", Wt = "_menu-icon_k49ve_42", j = {
   "menu-hint": "_menu-hint_k49ve_1",
-  menuHint: jt,
+  menuHint: Ut,
   "menu-button": "_menu-button_k49ve_5",
-  menuButton: Ut,
+  menuButton: jt,
   "menu-label": "_menu-label_k49ve_37",
   menuLabel: qt,
   "menu-icon": "_menu-icon_k49ve_42",
   menuIcon: Wt
 };
 function $({ label: e, hint: n, onClick: o, Icon: i }) {
-  return /* @__PURE__ */ s("button", { type: "button", className: U.menuButton, onClick: o, children: [
-    i && /* @__PURE__ */ t(i, { className: U.menuIcon }),
-    /* @__PURE__ */ t("span", { className: U.menuLabel, children: e }),
-    /* @__PURE__ */ t("span", { className: U.menuHint, children: n }),
+  return /* @__PURE__ */ s("button", { type: "button", className: j.menuButton, onClick: o, children: [
+    i && /* @__PURE__ */ t(i, { className: j.menuIcon }),
+    /* @__PURE__ */ t("span", { className: j.menuLabel, children: e }),
+    /* @__PURE__ */ t("span", { className: j.menuHint, children: n }),
     /* @__PURE__ */ t(zt, {})
   ] });
 }
 const Gt = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.42229 2.82911C4.71149 1.83006 6.23876 1.19768 7.8383 1L7.96797 2.05432C6.55867 2.22862 5.21101 2.7866 4.07273 3.66874L3.42229 2.82911ZM5.44493 6.71393L9.49745 10.7665L17.0924 3.1705L17.8438 3.92297L9.49745 12.2693L4.69352 7.46534L5.44493 6.71393ZM17.932 8.83829C17.8618 8.27074 17.7364 7.70745 17.5589 7.16222L16.5482 7.49276C16.7055 7.97209 16.816 8.46843 16.8766 8.96689C16.917 9.29742 16.9372 9.6269 16.9372 9.96594C16.9372 10.305 16.917 10.6344 16.8777 10.9639C16.7033 12.3732 16.1454 13.7209 15.2632 14.8592L16.1029 15.5096C17.1019 14.2204 17.7343 12.6931 17.932 11.0925C17.9766 10.7205 18 10.3486 18 9.96594C18 9.58332 17.9766 9.21134 17.932 8.83829ZM1.05432 8.96795L0 8.83829C0.197684 7.23874 0.830061 5.71147 1.82911 4.42228L2.66874 5.07272C1.7866 6.211 1.22862 7.55865 1.05432 8.96795ZM0 11.0936C0.197684 12.6931 0.830061 14.2204 1.82911 15.5096L2.66874 14.8591C1.7866 13.7209 1.22862 12.3732 1.05432 10.9639L0 11.0936ZM10.0939 1.00011C11.6935 1.19673 13.2207 1.83017 14.5099 2.82922L13.8595 3.66884C12.7202 2.7867 11.3736 2.22872 9.96426 2.05442L10.0939 1.00011Z", fill: "currentColor" }) });
 function Qt() {
-  const e = P(x), n = _("playbackRate"), { t: o } = b(), i = p(() => {
+  const e = L(P), n = _("playbackRate"), { t: o } = b(), i = p(() => {
     e && e.setPage("speed");
   }, [e]);
   return e ? /* @__PURE__ */ t(
@@ -370,7 +370,7 @@ function Qt() {
   ) : null;
 }
 function Yt() {
-  const e = P(x), n = _("hasCaptions"), o = _("textTrack"), { t: i } = b(), a = p(() => {
+  const e = L(P), n = _("hasCaptions"), o = _("textTrack"), { t: i } = b(), a = p(() => {
     e && e.setPage("captions");
   }, [e]);
   return e && n ? /* @__PURE__ */ t(
@@ -392,7 +392,7 @@ const Jt = (e) => /* @__PURE__ */ s("svg", { width: 18, height: 18, viewBox: "0
   ] })
 ] });
 function Xt() {
-  const e = P(x), n = _("autoQuality"), o = _("quality"), { t: i } = b(), a = p(() => {
+  const e = L(P), n = _("autoQuality"), o = _("quality"), { t: i } = b(), a = p(() => {
     e && e.setPage("quality");
   }, [e]);
   return e && o ? /* @__PURE__ */ t(
@@ -476,7 +476,7 @@ const dn = "_main-menu_7h96l_1", mn = {
   mainMenu: dn
 };
 function hn() {
-  const e = P(x);
+  const e = L(P);
   return H(e == null ? void 0 : e.toggle), /* @__PURE__ */ s("div", { className: mn.mainMenu, children: [
     /* @__PURE__ */ t(Qt, {}),
     /* @__PURE__ */ t(Yt, {}),
@@ -500,8 +500,8 @@ const G = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0
   "menu-back-button": "_menu-back-button_1bjr3_66",
   menuBackButton: bn
 };
-function kn() {
-  const e = P(x), n = qe({
+function wn() {
+  const e = L(P), n = qe({
     rates: B,
     normalLabel: "1x"
   }), { t: o } = b();
@@ -538,8 +538,8 @@ function kn() {
     )) })
   ] }) : null;
 }
-function yn() {
-  const e = P(x), n = _("textTrack"), { t: o } = b(), i = p(() => {
+function kn() {
+  const e = L(P), n = _("textTrack"), { t: o } = b(), i = p(() => {
     e && e.setPage("captionLanguage");
   }, [e]);
   return e ? /* @__PURE__ */ t(
@@ -551,8 +551,8 @@ function yn() {
     }
   ) : null;
 }
-function wn() {
-  const { t: e } = b(), n = v(), o = P(x), i = p(() => {
+function yn() {
+  const { t: e } = b(), n = v(), o = L(P), i = p(() => {
     o && o.setPage("captionFontSize");
   }, [o]);
   return o ? /* @__PURE__ */ t(
@@ -564,7 +564,7 @@ function wn() {
     }
   ) : null;
 }
-function Ln() {
+function xn() {
   const { t: e } = b(), n = v();
   return /* @__PURE__ */ t(
     ne,
@@ -575,7 +575,7 @@ function Ln() {
     }
   );
 }
-function Pn() {
+function Ln() {
   const { t: e } = b(), n = v();
   return /* @__PURE__ */ t(
     ne,
@@ -586,8 +586,8 @@ function Pn() {
     }
   );
 }
-function xn() {
-  const e = P(x), { t: n } = b(), { disableCaptionSettings: o } = v();
+function Pn() {
+  const e = L(P), { t: n } = b(), { disableCaptionSettings: o } = v();
   return H(e == null ? void 0 : e.backToMain), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
     /* @__PURE__ */ s(
       "button",
@@ -602,14 +602,14 @@ function xn() {
       }
     ),
     /* @__PURE__ */ t("strong", { className: r.menuHeading, children: n("CAPTIONS") }),
-    !o && /* @__PURE__ */ t(yn, {}),
-    /* @__PURE__ */ t(wn, {}),
-    /* @__PURE__ */ t(Ln, {}),
-    /* @__PURE__ */ t(Pn, {})
+    !o && /* @__PURE__ */ t(kn, {}),
+    /* @__PURE__ */ t(yn, {}),
+    /* @__PURE__ */ t(xn, {}),
+    /* @__PURE__ */ t(Ln, {})
   ] }) : null;
 }
 function Nn() {
-  const e = P(x), n = We(), { t: o } = b();
+  const e = L(P), n = We(), { t: o } = b();
   return H(e == null ? void 0 : e.backToCaptions), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
     /* @__PURE__ */ s(
       "button",
@@ -644,7 +644,7 @@ function Nn() {
   ] }) : null;
 }
 function Mn() {
-  const e = v(), n = P(x), { t: o } = b();
+  const e = v(), n = L(P), { t: o } = b();
   return H(n == null ? void 0 : n.backToCaptions), n ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
     /* @__PURE__ */ s(
       "button",
@@ -659,7 +659,7 @@ function Mn() {
       }
     ),
     /* @__PURE__ */ t("strong", { className: r.menuHeading, children: o("CAPTIONS") }),
-    /* @__PURE__ */ t("div", { role: "menu", className: r.menuOptions, children: Lt.map((i) => /* @__PURE__ */ s(
+    /* @__PURE__ */ t("div", { role: "menu", className: r.menuOptions, children: xt.map((i) => /* @__PURE__ */ s(
       "button",
       {
         type: "button",
@@ -682,7 +682,7 @@ function Mn() {
   ] }) : null;
 }
 function Tn() {
-  const e = P(x), n = Ge({ sort: "descending" }), o = _("autoQuality"), { t: i } = b();
+  const e = L(P), n = Ge({ sort: "descending" }), o = _("autoQuality"), { t: i } = b();
   return H(e == null ? void 0 : e.backToMain), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
     /* @__PURE__ */ s(
       "button",
@@ -718,8 +718,8 @@ function Tn() {
 }
 const In = {
   main: hn,
-  speed: kn,
-  captions: xn,
+  speed: wn,
+  captions: Pn,
   captionLanguage: Nn,
   captionFontSize: Mn,
   quality: Tn
@@ -733,20 +733,20 @@ function Sn() {
     n("captions");
   }, []), u = p(() => {
     n("main");
-  }, []), m = Z(() => In[e], [e]), h = ve(null), { refs: C, floatingStyles: w, context: y } = be({
+  }, []), m = Z(() => In[e], [e]), h = ve(null), { refs: C, floatingStyles: y, context: k } = be({
     open: o,
     onOpenChange: (T) => {
       i(T), u();
     },
     placement: "top-end",
-    whileElementsMounted: ke,
+    whileElementsMounted: we,
     middleware: [
-      ye(),
-      we({
+      ke(),
+      ye({
         element: h
       })
     ]
-  }), g = Le(y, { escapeKey: !1 }), { getReferenceProps: f, getFloatingProps: k } = Pe([g]);
+  }), g = xe(k, { escapeKey: !1 }), { getReferenceProps: f, getFloatingProps: w } = Le([g]);
   return {
     Page: m,
     open: o,
@@ -756,10 +756,10 @@ function Sn() {
     backToMain: u,
     arrowRef: h,
     refs: C,
-    floatingStyles: w,
-    context: y,
+    floatingStyles: y,
+    context: k,
     getReferenceProps: f,
-    getFloatingProps: k
+    getFloatingProps: w
   };
 }
 const Hn = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.0692 12C21.0692 11.4776 21.0212 10.944 20.9238 10.4104L23.5511 8.13318L21.0579 3.87247L17.7431 4.97788C16.9059 4.28329 15.9515 3.73553 14.9449 3.37271L14.2616 0H9.28941L8.60612 3.37129C7.58823 3.73553 6.65082 4.27482 5.80659 4.97647L2.49318 3.87247L0 8.13318L2.62729 10.4104C2.52988 10.944 2.48188 11.4776 2.48188 12C2.48188 12.5224 2.52988 13.056 2.62729 13.5896L0 15.8668L2.49318 20.1275L5.808 19.0221C6.64518 19.7167 7.59953 20.2645 8.60612 20.6273L9.28941 24H14.2616L14.9449 20.6287C15.9614 20.2645 16.9002 19.7252 17.7445 19.0235L21.0579 20.1289L23.5511 15.8682L20.9238 13.5911C21.0212 13.056 21.0692 12.5224 21.0692 12ZM11.7755 16.9412C9.05082 16.9412 6.83435 14.7247 6.83435 12C6.83435 9.2753 9.05082 7.05883 11.7755 7.05883C14.5002 7.05883 16.7167 9.2753 16.7167 12C16.7167 14.7247 14.5002 16.9412 11.7755 16.9412Z", fill: "currentColor" }) }), Vn = "_settings-menu_hxlsv_1", Bn = "_arrow_hxlsv_15", de = {
@@ -780,8 +780,8 @@ function Rn() {
     open: m,
     refs: h,
     setPage: C,
-    toggle: w
-  } = Sn(), y = v(), { t: g } = b();
+    toggle: y
+  } = Sn(), k = v(), { t: g } = b();
   return /* @__PURE__ */ s(ee, { children: [
     /* @__PURE__ */ t(
       "button",
@@ -790,9 +790,9 @@ function Rn() {
         type: "button",
         className: "controls-button",
         "aria-label": g("SETTINGS"),
-        onClick: w,
+        onClick: y,
         "aria-expanded": m,
-        tabIndex: y != null && y.state.interactionsDisabled ? -1 : 0,
+        tabIndex: k != null && k.state.interactionsDisabled ? -1 : 0,
         ...u(),
         children: /* @__PURE__ */ t(Hn, { className: "controls-button-icon icon-rotate" })
       }
@@ -806,14 +806,14 @@ function Rn() {
         ...l(),
         children: [
           /* @__PURE__ */ t(
-            x.Provider,
+            P.Provider,
             {
-              value: { setPage: C, backToMain: i, backToCaptions: o, toggle: w },
+              value: { setPage: C, backToMain: i, backToCaptions: o, toggle: y },
               children: /* @__PURE__ */ t(e, {})
             }
           ),
           /* @__PURE__ */ t(
-            xe,
+            Pe,
             {
               ref: n,
               context: a,
@@ -835,7 +835,7 @@ function He(e, n = 1e3) {
     }, [i, n]), a ? /* @__PURE__ */ t(e, {}) : null;
   };
 }
-const oe = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { d: "M 11,21 H 5 V 3 h 6 z m 8,0 H 13 V 3 h 6 z", fill: "currentColor" }) }), ie = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { d: "M 5,2 V 22 L 21,12.000665 Z", fill: "currentColor" }) }), Ve = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1179 1.41211V22.589H11.2943L5.64717 16.9418V7.05928L11.2943 1.41211H14.1179ZM4.23537 7.05928V16.9418H2.11769C0.957618 16.9418 0.0189406 16.0147 0.00028305 14.8592L0 14.8241V9.17696C0 8.01689 0.927077 7.07822 2.0826 7.05956L2.11769 7.05928H4.23537ZM22.3744 7.93711L24 9.56119L21.5623 11.9988L24 14.4365L22.3744 16.0621L19.9383 13.6245L17.5006 16.0621L15.875 14.4365L18.3127 11.9988L15.875 9.56119L17.5006 7.93711L19.9383 10.3748L22.3744 7.93711Z", fill: "currentColor" }) }), Be = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.64714 6.98017V16.8627L11.2943 22.5099H14.1179V1.33301H11.2943L5.64714 6.98017ZM0 9.09785V14.745C0 15.9168 0.945899 16.8627 2.11768 16.8627H4.23537V6.98017H2.11768C0.945899 6.98017 0 7.92607 0 9.09785ZM18.3527 11.9207C18.3527 10.6134 17.8388 9.36962 16.9056 8.4209L17.9094 7.43123C19.1066 8.64396 19.7645 10.2393 19.7645 11.9207C19.7645 13.6036 19.1066 15.1989 17.9094 16.4116L16.9056 15.422C17.8388 14.4732 18.3527 13.2295 18.3527 11.9207Z", fill: "currentColor" }) }), Re = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.64714 16.8627V6.98017L11.2943 1.33301H14.1179V22.5099H11.2943L5.64714 16.8627ZM0 14.745V9.09785C0 7.92607 0.945899 6.98017 2.11768 6.98017H4.23537V16.8627H2.11768C0.945899 16.8627 0 15.9168 0 14.745ZM16.9056 8.4209C17.8388 9.36962 18.3527 10.6134 18.3527 11.9207C18.3527 13.2295 17.8388 14.4732 16.9056 15.422L17.9094 16.4116C19.1066 15.1989 19.7645 13.6036 19.7645 11.9207C19.7645 10.2393 19.1066 8.64396 17.9094 7.43123L16.9056 8.4209ZM19.9016 5.43185L20.8997 4.43372C22.9002 6.43422 24 9.09403 24 11.9219C24 14.7497 22.9002 17.4081 20.8997 19.4086L19.9016 18.4104C21.6353 16.6782 22.5882 14.3727 22.5882 11.9219C22.5882 9.46957 21.6353 7.16553 19.9016 5.43185Z", fill: "currentColor" }) }), En = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.691 3.99987V10.5281L0 4.00655V20.2596L10.691 13.7367V20.2663L23.9987 12.1331L10.691 3.99987Z", fill: "currentColor" }) }), An = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.309 3.99987L0 12.1331L13.309 20.2663V13.7367L23.9987 20.2596V4.00655L13.309 10.5281V3.99987Z", fill: "currentColor" }) }), On = "_feedback-overlay_v4lbu_1", Fn = "_feedback-message_v4lbu_14", Zn = "_feedback-icon_v4lbu_30", $n = "_feedback-icon-animation_v4lbu_1", L = {
+const oe = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { d: "M 11,21 H 5 V 3 h 6 z m 8,0 H 13 V 3 h 6 z", fill: "currentColor" }) }), ie = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { d: "M 5,2 V 22 L 21,12.000665 Z", fill: "currentColor" }) }), Ve = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1179 1.41211V22.589H11.2943L5.64717 16.9418V7.05928L11.2943 1.41211H14.1179ZM4.23537 7.05928V16.9418H2.11769C0.957618 16.9418 0.0189406 16.0147 0.00028305 14.8592L0 14.8241V9.17696C0 8.01689 0.927077 7.07822 2.0826 7.05956L2.11769 7.05928H4.23537ZM22.3744 7.93711L24 9.56119L21.5623 11.9988L24 14.4365L22.3744 16.0621L19.9383 13.6245L17.5006 16.0621L15.875 14.4365L18.3127 11.9988L15.875 9.56119L17.5006 7.93711L19.9383 10.3748L22.3744 7.93711Z", fill: "currentColor" }) }), Be = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.64714 6.98017V16.8627L11.2943 22.5099H14.1179V1.33301H11.2943L5.64714 6.98017ZM0 9.09785V14.745C0 15.9168 0.945899 16.8627 2.11768 16.8627H4.23537V6.98017H2.11768C0.945899 6.98017 0 7.92607 0 9.09785ZM18.3527 11.9207C18.3527 10.6134 17.8388 9.36962 16.9056 8.4209L17.9094 7.43123C19.1066 8.64396 19.7645 10.2393 19.7645 11.9207C19.7645 13.6036 19.1066 15.1989 17.9094 16.4116L16.9056 15.422C17.8388 14.4732 18.3527 13.2295 18.3527 11.9207Z", fill: "currentColor" }) }), Re = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.64714 16.8627V6.98017L11.2943 1.33301H14.1179V22.5099H11.2943L5.64714 16.8627ZM0 14.745V9.09785C0 7.92607 0.945899 6.98017 2.11768 6.98017H4.23537V16.8627H2.11768C0.945899 16.8627 0 15.9168 0 14.745ZM16.9056 8.4209C17.8388 9.36962 18.3527 10.6134 18.3527 11.9207C18.3527 13.2295 17.8388 14.4732 16.9056 15.422L17.9094 16.4116C19.1066 15.1989 19.7645 13.6036 19.7645 11.9207C19.7645 10.2393 19.1066 8.64396 17.9094 7.43123L16.9056 8.4209ZM19.9016 5.43185L20.8997 4.43372C22.9002 6.43422 24 9.09403 24 11.9219C24 14.7497 22.9002 17.4081 20.8997 19.4086L19.9016 18.4104C21.6353 16.6782 22.5882 14.3727 22.5882 11.9219C22.5882 9.46957 21.6353 7.16553 19.9016 5.43185Z", fill: "currentColor" }) }), En = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.691 3.99987V10.5281L0 4.00655V20.2596L10.691 13.7367V20.2663L23.9987 12.1331L10.691 3.99987Z", fill: "currentColor" }) }), An = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.309 3.99987L0 12.1331L13.309 20.2663V13.7367L23.9987 20.2596V4.00655L13.309 10.5281V3.99987Z", fill: "currentColor" }) }), On = "_feedback-overlay_v4lbu_1", Fn = "_feedback-message_v4lbu_14", Zn = "_feedback-icon_v4lbu_30", $n = "_feedback-icon-animation_v4lbu_1", x = {
   "feedback-overlay": "_feedback-overlay_v4lbu_1",
   feedbackOverlay: On,
   "feedback-message": "_feedback-message_v4lbu_14",
@@ -850,21 +850,21 @@ function Kn() {
   const e = Ce();
   switch ((o = e.lastKeyboardAction) == null ? void 0 : o.action) {
     case "togglePaused":
-      return /* @__PURE__ */ t("i", { className: L.feedbackIcon, children: e.paused ? /* @__PURE__ */ t(oe, {}) : /* @__PURE__ */ t(ie, {}) });
+      return /* @__PURE__ */ t("i", { className: x.feedbackIcon, children: e.paused ? /* @__PURE__ */ t(oe, {}) : /* @__PURE__ */ t(ie, {}) });
     case "toggleCaptions":
     case "nextCaptionLanguage":
     case "previousCaptionLanguage":
-      return e.hasCaptions ? /* @__PURE__ */ t("i", { className: L.feedbackIcon, children: /* @__PURE__ */ t(Ie, {}) }) : null;
+      return e.hasCaptions ? /* @__PURE__ */ t("i", { className: x.feedbackIcon, children: /* @__PURE__ */ t(Ie, {}) }) : null;
     case "volumeUp":
     case "volumeDown":
     case "toggleMuted":
-      return /* @__PURE__ */ t("i", { className: L.feedbackIcon, children: e.muted || e.volume === 0 ? /* @__PURE__ */ t(Ve, {}) : e.volume >= 0.5 ? /* @__PURE__ */ t(Re, {}) : /* @__PURE__ */ t(Be, {}) });
+      return /* @__PURE__ */ t("i", { className: x.feedbackIcon, children: e.muted || e.volume === 0 ? /* @__PURE__ */ t(Ve, {}) : e.volume >= 0.5 ? /* @__PURE__ */ t(Re, {}) : /* @__PURE__ */ t(Be, {}) });
     case "seekForward":
     case "seekForward10":
-      return /* @__PURE__ */ t("i", { className: L.feedbackIcon, children: /* @__PURE__ */ t(En, { className: "right" }) });
+      return /* @__PURE__ */ t("i", { className: x.feedbackIcon, children: /* @__PURE__ */ t(En, { className: "right" }) });
     case "seekBackward":
     case "seekBackward10":
-      return /* @__PURE__ */ t("i", { className: L.feedbackIcon, children: /* @__PURE__ */ t(An, { className: "left" }) });
+      return /* @__PURE__ */ t("i", { className: x.feedbackIcon, children: /* @__PURE__ */ t(An, { className: "left" }) });
     default:
       return null;
   }
@@ -876,32 +876,32 @@ function Dn() {
     case "toggleCaptions":
     case "nextCaptionLanguage":
     case "previousCaptionLanguage":
-      return /* @__PURE__ */ t("div", { className: L.feedbackMessage, children: n.textTrack ? e("CAPTION_LANGUAGE", { language: n.textTrack.label }) : `${e("CAPTIONS")}: ${e("OFF")}` });
+      return /* @__PURE__ */ t("div", { className: x.feedbackMessage, children: n.textTrack ? e("CAPTION_LANGUAGE", { language: n.textTrack.label }) : `${e("CAPTIONS")}: ${e("OFF")}` });
     case "volumeUp":
     case "volumeDown":
     case "toggleMuted":
-      return /* @__PURE__ */ t("div", { className: L.feedbackMessage, children: n.muted || n.volume === 0 ? e("MUTED") : e("VOLUME", { volume: (n.volume * 100).toFixed(0) }) });
+      return /* @__PURE__ */ t("div", { className: x.feedbackMessage, children: n.muted || n.volume === 0 ? e("MUTED") : e("VOLUME", { volume: (n.volume * 100).toFixed(0) }) });
     case "increasePlaybackRate":
     case "decreasePlaybackRate":
     case "resetPlaybackRate":
-      return /* @__PURE__ */ t("div", { className: L.feedbackMessage, children: e("PLAYBACK_SPEED_MESSAGE", { speed: n.playbackRate }) });
+      return /* @__PURE__ */ t("div", { className: x.feedbackMessage, children: e("PLAYBACK_SPEED_MESSAGE", { speed: n.playbackRate }) });
     case "seekForward":
-      return /* @__PURE__ */ t("div", { className: L.feedbackMessage, children: e("SEEK_FORWARD", { seconds: 5 }) });
+      return /* @__PURE__ */ t("div", { className: x.feedbackMessage, children: e("SEEK_FORWARD", { seconds: 5 }) });
     case "seekForward10":
-      return /* @__PURE__ */ t("div", { className: L.feedbackMessage, children: e("SEEK_FORWARD", { seconds: 10 }) });
+      return /* @__PURE__ */ t("div", { className: x.feedbackMessage, children: e("SEEK_FORWARD", { seconds: 10 }) });
     case "seekBackward":
-      return /* @__PURE__ */ t("div", { className: L.feedbackMessage, children: e("SEEK_BACKWARD", { seconds: 5 }) });
+      return /* @__PURE__ */ t("div", { className: x.feedbackMessage, children: e("SEEK_BACKWARD", { seconds: 5 }) });
     case "seekBackward10":
-      return /* @__PURE__ */ t("div", { className: L.feedbackMessage, children: e("SEEK_BACKWARD", { seconds: 10 }) });
+      return /* @__PURE__ */ t("div", { className: x.feedbackMessage, children: e("SEEK_BACKWARD", { seconds: 10 }) });
     default:
       return null;
   }
 }
-const zn = He(Kn, 500), jn = He(Dn, 1e3);
-function Un() {
-  return /* @__PURE__ */ s("div", { className: L.feedbackOverlay, children: [
+const zn = He(Kn, 500), Un = He(Dn, 1e3);
+function jn() {
+  return /* @__PURE__ */ s("div", { className: x.feedbackOverlay, children: [
     /* @__PURE__ */ t(zn, {}),
-    /* @__PURE__ */ t(jn, {})
+    /* @__PURE__ */ t(Un, {})
   ] });
 }
 const qn = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.1383 0.999867V3.66268H18.4561L3.66281 18.4546V14.1382H1V23H9.86449V20.3372H5.54542L20.3387 5.54528V9.86303H23.0001V0.999867H14.1383Z", fill: "currentColor" }) }), Wn = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.562 6.58944L22.1514 0L24.0005 1.84907L17.4111 8.43851H21.6506V11.0552H12.9453V2.34861H15.562V6.58944ZM2.34861 15.5615V12.9461H11.0539V21.6501H8.43982V17.4106L1.84907 24L0 22.1509L6.59075 15.5615H2.34861Z", fill: "currentColor" }) }), Gn = "_full-screen-button_1xm32_2", Qn = {
@@ -1054,16 +1054,16 @@ function ao({ onClose: e }) {
 function so() {
   const [e, n] = M(!1), [o, i] = M(!1), [a, c] = M(!1), l = v(), u = _("playing"), m = W(), { t: h } = b(), C = p(() => {
     n(!0), l.disableInteractions(), u && (c(!0), m.pause());
-  }, [u, m, l]), w = p(() => {
+  }, [u, m, l]), y = p(() => {
     n(!1), i(!0), l.enableInteractions(), a && (c(!1), m.play());
-  }, [a, m, l]), y = p(
+  }, [a, m, l]), k = p(
     (g) => o && (g == null ? void 0 : g.focus()),
     [o]
   );
-  return e ? /* @__PURE__ */ t(ao, { onClose: w }) : /* @__PURE__ */ t(
+  return e ? /* @__PURE__ */ t(ao, { onClose: y }) : /* @__PURE__ */ t(
     "button",
     {
-      ref: y,
+      ref: k,
       "aria-label": h("KEYBOARD_SHORTCUTS"),
       type: "button",
       className: X.keyboardShortcutsButton,
@@ -1124,24 +1124,24 @@ function bo() {
     ] })
   ] });
 }
-const ko = "_time-indicator_1rlpb_1", yo = {
+const wo = "_time-indicator_1rlpb_1", ko = {
   "time-indicator": "_time-indicator_1rlpb_1",
-  timeIndicator: ko
+  timeIndicator: wo
 };
-function wo() {
-  return /* @__PURE__ */ s("div", { className: yo.timeIndicator, children: [
+function yo() {
+  return /* @__PURE__ */ s("div", { className: ko.timeIndicator, children: [
     /* @__PURE__ */ t(re, { type: "current" }),
     "/",
     /* @__PURE__ */ t(re, { type: "duration" })
   ] });
 }
-const Lo = "_comment-markers_49pse_1", Po = "_comment-marker_49pse_1", xo = "_timeline-wrapper_49pse_21", No = "_track_49pse_35", Mo = "_thumb_49pse_48", To = "_root_49pse_62", Io = "_track-inner_49pse_92", So = "_progress_49pse_98", Ho = "_track-fill_49pse_104", Vo = "_pins_49pse_121", Bo = "_pin-button_49pse_134", Ro = "_annotation-pin_49pse_154", Eo = "_quiz-pin_49pse_159", Ao = "_annotation-pin-child_49pse_164", Oo = "_quiz-pin-child_49pse_168", Fo = "_interactive-pin-container_49pse_173", Zo = "_interactive-pin-wrapper_49pse_183", $o = "_interactive-pin-icon_49pse_189", Ko = "_interactive-pin_49pse_173", Do = "_bg_49pse_203", zo = "_symbol_49pse_207", jo = "_interactive-pin-button_49pse_212", Uo = "_interactive-pin-menu_49pse_232", qo = "_interactive-pin-menu-item_49pse_246", Wo = "_arrow_49pse_267", d = {
+const xo = "_comment-markers_49pse_1", Lo = "_comment-marker_49pse_1", Po = "_timeline-wrapper_49pse_21", No = "_track_49pse_35", Mo = "_thumb_49pse_48", To = "_root_49pse_62", Io = "_track-inner_49pse_92", So = "_progress_49pse_98", Ho = "_track-fill_49pse_104", Vo = "_pins_49pse_121", Bo = "_pin-button_49pse_134", Ro = "_annotation-pin_49pse_154", Eo = "_quiz-pin_49pse_159", Ao = "_annotation-pin-child_49pse_164", Oo = "_quiz-pin-child_49pse_168", Fo = "_interactive-pin-container_49pse_173", Zo = "_interactive-pin-wrapper_49pse_183", $o = "_interactive-pin-icon_49pse_189", Ko = "_interactive-pin_49pse_173", Do = "_bg_49pse_203", zo = "_symbol_49pse_207", Uo = "_interactive-pin-button_49pse_212", jo = "_interactive-pin-menu_49pse_232", qo = "_interactive-pin-menu-item_49pse_246", Wo = "_arrow_49pse_267", d = {
   "comment-markers": "_comment-markers_49pse_1",
-  commentMarkers: Lo,
+  commentMarkers: xo,
   "comment-marker": "_comment-marker_49pse_1",
-  commentMarker: Po,
+  commentMarker: Lo,
   "timeline-wrapper": "_timeline-wrapper_49pse_21",
-  timelineWrapper: xo,
+  timelineWrapper: Po,
   track: No,
   thumb: Mo,
   root: To,
@@ -1172,9 +1172,9 @@ const Lo = "_comment-markers_49pse_1", Po = "_comment-marker_49pse_1", xo = "_ti
   bg: Do,
   symbol: zo,
   "interactive-pin-button": "_interactive-pin-button_49pse_212",
-  interactivePinButton: jo,
+  interactivePinButton: Uo,
   "interactive-pin-menu": "_interactive-pin-menu_49pse_232",
-  interactivePinMenu: Uo,
+  interactivePinMenu: jo,
   "interactive-pin-menu-item": "_interactive-pin-menu-item_49pse_246",
   interactivePinMenuItem: qo,
   arrow: Wo
@@ -1336,17 +1336,17 @@ function oi({ currentTime: e, position: n }) {
   ]), l = ve(null), { refs: u, floatingStyles: m, context: h } = be({
     open: o,
     onOpenChange: i,
-    whileElementsMounted: ke,
+    whileElementsMounted: we,
     placement: "top",
     middleware: [
       at(),
       st(6),
-      ye(),
-      we({
+      ke(),
+      ye({
         element: l
       })
     ]
-  }), C = Le(h), { getReferenceProps: w, getFloatingProps: y } = Pe([C]);
+  }), C = xe(h), { getReferenceProps: y, getFloatingProps: k } = Le([C]);
   return /* @__PURE__ */ s(ee, { children: [
     /* @__PURE__ */ t(
       "button",
@@ -1356,7 +1356,7 @@ function oi({ currentTime: e, position: n }) {
         className: d.interactivePinButton,
         ref: u.setReference,
         style: { left: `${n}%` },
-        ...w(),
+        ...y(),
         children: /* @__PURE__ */ s(
           "svg",
           {
@@ -1403,15 +1403,15 @@ function oi({ currentTime: e, position: n }) {
         ref: u.setFloating,
         style: m,
         className: d.interactivePinMenu,
-        ...y(),
+        ...k(),
         children: [
-          a.interactiveMenuElements.map(({ id: g, text: f, onClick: k }) => /* @__PURE__ */ s(
+          a.interactiveMenuElements.map(({ id: g, text: f, onClick: w }) => /* @__PURE__ */ s(
             "button",
             {
               type: "button",
               className: d.interactivePinMenuItem,
               onClick: () => {
-                k(g, e), i(!1);
+                w(g, e), i(!1);
               },
               children: [
                 /* @__PURE__ */ t(
@@ -1439,7 +1439,7 @@ function oi({ currentTime: e, position: n }) {
             g
           )),
           /* @__PURE__ */ t(
-            xe,
+            Pe,
             {
               ref: l,
               context: h,
@@ -1724,42 +1724,42 @@ function fi(e, n, o, i) {
     a.initializeState(i)
   ), u = p(
     (f) => {
-      l((k) => (a.saveData("multiplier", f), {
-        ...k,
+      l((w) => (a.saveData("multiplier", f), {
+        ...w,
         captionsFontSizeMultiplier: f
       }));
     },
     [a]
   ), m = p(() => {
     l((f) => {
-      const k = !f.captionPositionOnTop;
-      return a.saveData("ontop", k), {
+      const w = !f.captionPositionOnTop;
+      return a.saveData("ontop", w), {
         ...f,
-        captionPositionOnTop: k
+        captionPositionOnTop: w
       };
     });
   }, [a]), h = p(() => {
     l((f) => {
-      const k = !f.captionsInvertColors;
-      return a.saveData("invert", k), {
+      const w = !f.captionsInvertColors;
+      return a.saveData("invert", w), {
         ...f,
-        captionsInvertColors: k
+        captionsInvertColors: w
       };
     });
   }, [a]), C = p(() => {
     l((f) => {
-      const k = !f.commentsEnabled;
-      return a.saveData("comments", k), {
+      const w = !f.commentsEnabled;
+      return a.saveData("comments", w), {
         ...f,
-        commentsEnabled: k
+        commentsEnabled: w
       };
     });
-  }, [a]), w = p(() => {
+  }, [a]), y = p(() => {
     l((f) => ({
       ...f,
       interactionsDisabled: !1
     }));
-  }, []), y = p(() => {
+  }, []), k = p(() => {
     l((f) => ({
       ...f,
       interactionsDisabled: !0
@@ -1777,8 +1777,8 @@ function fi(e, n, o, i) {
       setCaptionsFontSizeMultiplier: u,
       toggleCaptionPositionOnTop: m,
       toggleCaptionsInvertColors: h,
-      enableInteractions: w,
-      disableInteractions: y,
+      enableInteractions: y,
+      disableInteractions: k,
       toggleComments: C,
       disableCaptionSettings: o
     },
@@ -1788,7 +1788,7 @@ function fi(e, n, o, i) {
 }
 const vi = {}, J = () => {
 };
-function xi({
+function Pi({
   title: e,
   playerRef: n,
   src: o,
@@ -1800,11 +1800,11 @@ function xi({
   annotations: m = [],
   quizMarkers: h = [],
   interactive: C = !1,
-  onAnnotationClick: w = J,
-  onQuizMarkerClick: y = J,
+  onAnnotationClick: y = J,
+  onQuizMarkerClick: k = J,
   onInteractivePinClick: g = J,
   interactiveMenuElements: f = [],
-  darkMode: k = !1,
+  darkMode: w = !1,
   autoLoadCaptionSrc: T = "",
   forceComments: ae,
   disableCaptionSettings: Q,
@@ -1826,11 +1826,11 @@ function xi({
       annotations: m,
       quizMarkers: h,
       interactive: C,
-      onAnnotationClick: w,
-      onQuizMarkerClick: y,
+      onAnnotationClick: y,
+      onQuizMarkerClick: k,
       onInteractivePinClick: g,
       interactiveMenuElements: f,
-      darkMode: k,
+      darkMode: w,
       forceComments: ae ?? !1,
       disableCaptionSettings: Q ?? !1,
       children: /* @__PURE__ */ t(lt, { contextValue: se, children: /* @__PURE__ */ s(
@@ -1852,9 +1852,9 @@ function xi({
             /* @__PURE__ */ t(so, {}),
             /* @__PURE__ */ s(et, { className: vi.mediaProvider, children: [
               /* @__PURE__ */ t(ho, { src: a }),
-              /* @__PURE__ */ t(Un, {}),
+              /* @__PURE__ */ t(jn, {}),
               /* @__PURE__ */ t(gt, {}),
-              /* @__PURE__ */ t(wt, { captions: i }),
+              /* @__PURE__ */ t(yt, { captions: i }),
               /* @__PURE__ */ t(Et, { comments: l }),
               /* @__PURE__ */ t(bo, {}),
               /* @__PURE__ */ t(eo, {})
@@ -1862,7 +1862,7 @@ function xi({
             /* @__PURE__ */ t(
               Dt,
               {
-                darkMode: k,
+                darkMode: w,
                 playerRef: n,
                 showCaptionsButton: !Q
               }
@@ -1875,8 +1875,8 @@ function xi({
   );
 }
 export {
-  Lt as CAPTION_FONT_SIZE_MULTIPLIERS,
+  xt as CAPTION_FONT_SIZE_MULTIPLIERS,
   Se as COMMENT_DURATION,
   B as PLAYBACK_RATES,
-  xi as StudioPlayer
+  Pi as StudioPlayer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/studio-player",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "private": false,
   "description": "Next generation media player for Instructure",
   "module": "./dist/studio-player.es.js",

package/dist/index-BEdzBQV0.css

@@ -1 +0,0 @@
-._annotation-overlay_1kxzn_1{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-user-select:none;user-select:none;z-index:1;background-color:#000c;display:flex;flex-direction:column;justify-content:center;align-items:center}._media-buffering-indicator_1fwjr_1{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;z-index:1;background-color:#00000080;transition:opacity .2s ease}[data-media-player][data-buffering] ._media-buffering-spinner_1fwjr_17{pointer-events:none;animation:_media-buffering-spin_1fwjr_17 1s linear infinite}._media-buffering-track_1fwjr_22{color:#f5f5f5;opacity:.25}._media-buffering-track-fill_1fwjr_27{color:var(--media-brand, #f5f5f5);opacity:.75}[data-media-player][data-buffering] ._media-buffering-indicator_1fwjr_1{opacity:1}@keyframes _media-buffering-spin_1fwjr_17{to{transform:rotate(360deg)}}._captions_13epz_1{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:var(--captions-flex-direction, column);align-items:center;padding:var(--spacing-3)}._captions_13epz_1[aria-hidden=true]{display:none}._captions_13epz_1 [data-part=cue-display]{display:inline-block;padding:var(--spacing-2);background-color:var(--captions-background-color, rgba(22 22 22 / .75));border-radius:var(--radius-2)}._captions_13epz_1 [data-part=cue]{color:var(--captions-color, white);text-align:center;max-width:50ch;line-height:1.5;font-size:calc(var(--captions-base-font-size-small) * var(--captions-font-size-multiplier, 1))}@container player (width > 425px){._captions_13epz_1 [data-part=cue]{font-size:calc(var(--captions-base-font-size-normal) * var(--captions-font-size-multiplier, 1))}}._comments-overlay_agbjl_1{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--spacing-1);display:flex;align-items:end}._comments-container_agbjl_9{display:flex;flex-direction:column;gap:.25rem;width:15.625rem}@container player (width >= 900px) and (height >= 640px){._comments-container_agbjl_9{width:23.4375rem}}@media (hover: none) and (orientation: portrait) and (max-width: 720px){[data-fullscreen] ._comments-overlay_agbjl_1{justify-content:end}}._comment_agbjl_1{display:grid;grid-template-areas:"avatar text";grid-template-columns:auto 1fr;align-items:center;padding:var(--spacing-1);gap:var(--spacing-1);border-radius:var(--radius-2);background-color:var(--comments-background-color);cursor:pointer}@container player (width >= 720px) and (height >= 540px){._comment_agbjl_1{grid-template-areas:"text text" "avatar name"}}._comment-text_agbjl_44{grid-area:text;color:var(--comments-color);font-size:var(--comments-font-size-small);line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;-webkit-user-select:none;user-select:none}@container player (height >= 400px){._comment-text_agbjl_44{-webkit-line-clamp:2;line-clamp:2}}@container player (width >= 900px) and (height >= 640px){._comment-text_agbjl_44{font-size:var(--comments-font-size-normal)}}._comment-author-avatar_agbjl_67{grid-area:avatar;box-sizing:border-box;display:inline-block;object-fit:cover;width:1.25rem;height:1.25rem;border-radius:50%;-webkit-user-select:none;user-select:none;pointer-events:none;background-color:#fff;contain:paint}@container player (width >= 900px) and (height >= 640px){._comment-author-avatar_agbjl_67{width:1.875rem;height:1.875rem}}._comment-author-name_agbjl_86{grid-area:name;color:var(--comments-author-color);font-size:var(--comments-font-size-small);font-weight:700;line-height:1.5;display:none}@container player (width >= 720px) and (height >= 540px){._comment-author-name_agbjl_86{display:inline}}@container player (width >= 900px) and (height >= 640px){._comment-author-name_agbjl_86{font-size:var(--comments-font-size-normal)}}._root_1x28e_1{background-color:var(--controls-layout-bg-color, #f5f5f5);padding:var(--spacing-1);display:grid;align-items:center;grid-template-columns:auto 1fr auto;grid-template-areas:"slider slider slider" "left-controls indicators right-controls";row-gap:.25rem;column-gap:1rem;border-bottom-left-radius:var(--radius-2);border-bottom-right-radius:var(--radius-2)}@container player (width >= 420px) and (height <= 300px){._root_1x28e_1{grid-template-columns:auto auto 1fr auto;grid-template-areas:"left-controls indicators slider right-controls"}}[data-fullscreen] ._root_1x28e_1,[data-darkmode=true]._root_1x28e_1{background-color:#000}._left-controls_1x28e_28{display:flex;gap:.25rem;grid-area:left-controls}._right-controls_1x28e_34{display:flex;gap:.25rem;grid-area:right-controls}._indicators_1x28e_40{grid-area:indicators;font-size:.875rem}@container player (width > 425px) and (height > 300px){._indicators_1x28e_40{font-size:1rem}}@container player (width >= 420px) and (height <= 300px){div._normal-timeline_1x28e_49{display:none}}div._compact-timeline_1x28e_55{display:none}@container player (width >= 420px) and (height <= 300px){div._compact-timeline_1x28e_55{display:flex;padding-bottom:0}}._menu-hint_k49ve_1{color:var(--settings-media-submenu-hint-color, #9ea6ad)}._menu-button_k49ve_5{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-1);padding:6px 11px;color:var(--settings-submenu-color, #2d3b45);font-size:1rem;line-height:1.5;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;outline:none;border:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-family:inherit}._menu-button_k49ve_5:hover,._menu-button_k49ve_5:focus{color:var(--settings-media-hover-color, white);background-color:var(--settings-media-hover-bg-color, rgb(43 122 188))}._menu-button_k49ve_5:hover ._menu-hint_k49ve_1,._menu-button_k49ve_5:focus ._menu-hint_k49ve_1{color:var(--settings-media-hover-color, white)}._menu-label_k49ve_37{flex-grow:1;text-align:left}._menu-icon_k49ve_42{width:1.125rem;height:1.125rem}._switch-track_vptv3_1{position:relative;background-color:#e8e8e8;width:2.625rem;height:1.75rem;border-radius:.875rem;will-change:background-color;transition:background-color .2s}._switch-thumb_vptv3_11{background-color:#fff;width:1.5rem;height:1.5rem;border-radius:.75rem;transform:translate(.125rem,.125rem);box-shadow:#e8eaec 0 0 0 .0625rem inset;will-change:transform;transition:transform .2s;display:flex;align-items:center;justify-content:center}._switch-icon_vptv3_25{width:.875rem;height:.875rem;color:var(--settings-submenu-color)}._switch-body_vptv3_31{display:flex;align-items:center;gap:var(--spacing-1);padding:.375rem .6875rem;color:var(--settings-submenu-color);font-size:1rem;line-height:1.5;cursor:pointer;outline:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._switch-body_vptv3_31[aria-checked=true] ._switch-track_vptv3_1{background-color:#03893d}._switch-body_vptv3_31[aria-checked=true] ._switch-icon_vptv3_25{color:#03893d}._switch-body_vptv3_31[aria-checked=true] ._switch-thumb_vptv3_11{transform:translate(1rem,.125rem)}._switch-body_vptv3_31:hover,._switch-body_vptv3_31:focus-visible{color:var(--settings-media-hover-color);background-color:var(--settings-media-hover-bg-color)}[aria-checked=true]:is(._switch-body_vptv3_31:hover,._switch-body_vptv3_31:focus-visible) ._switch-track_vptv3_1{background-color:#e8e8e8}._switch-label_vptv3_68{flex-grow:1}._menu-icon_vptv3_72{width:1.125rem;height:1.125rem}._main-menu_7h96l_1,._menu-container_1bjr3_1,._menu-options_1bjr3_6{display:flex;flex-direction:column}._menu-heading_1bjr3_11{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;display:block;margin:0 var(--spacing-2);padding-top:var(--spacing-2);padding-bottom:.5625rem;border-bottom:.0625rem solid #c7cdd1;font-weight:700;line-height:1.5}._check-icon_1bjr3_27{width:1.25rem;height:1.25rem;visibility:hidden}._menu-item-label_1bjr3_33{display:block}._menu-item_1bjr3_33{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;outline:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;padding:6px 11px;gap:var(--spacing-2);cursor:pointer;font-size:1rem;line-height:1.5;font-family:inherit;color:inherit}._menu-item_1bjr3_33:hover,._menu-item_1bjr3_33:focus{color:var(--settings-media-hover-color, white);background-color:var(--settings-media-hover-bg-color, rgb(43 122 188))}._menu-item_1bjr3_33[aria-checked=true] ._check-icon_1bjr3_27{visibility:visible}._menu-back-button_1bjr3_66{display:flex;align-items:center;gap:var(--spacing-1);padding:6px 11px;color:var(--settings-submenu-color, #2d3b45);font-size:1rem;line-height:1.5;cursor:pointer;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;outline:none;border:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-family:inherit}._menu-back-button_1bjr3_66:hover,._menu-back-button_1bjr3_66:focus{color:var(--settings-media-hover-color, white);background-color:var(--settings-media-hover-bg-color, rgb(43 122 188))}._settings-menu_hxlsv_1{display:flex;flex-direction:column;background-color:var(--settings-menu-bg-color, white);padding-top:.25rem;padding-bottom:.25rem;border-radius:var(--radius-2);width:294px;z-index:1000;filter:drop-shadow(0 .125rem .1875rem rgba(0 0 0 / .5))}._arrow_hxlsv_15{fill:#fff}._feedback-overlay_v4lbu_1{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;padding:var(--spacing-4);flex-direction:column;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;pointer-events:none}._feedback-message_v4lbu_14{font-weight:300;position:absolute;top:10%;display:flex;justify-content:center;align-items:center;padding:var(--spacing-2);background-color:var(--feedback-message-bg-color, black);color:var(--feedback-message-color, white);border-radius:var(--radius-2);font-size:1rem;line-height:1.5;opacity:.75}._feedback-icon_v4lbu_30{box-sizing:border-box;display:inline-flex;color:var(--feedback-icon-color, white);padding:var(--spacing-3);width:4.5rem;height:4.5rem;background-color:var(--feedback-icon-bg-color, black);border-radius:var(--radius-3);animation:_feedback-icon-animation_v4lbu_1 .4s linear;animation-fill-mode:forwards;will-change:transform,opacity}._feedback-icon_v4lbu_30:has(.right){align-self:end}._feedback-icon_v4lbu_30:has(.left){align-self:start}._feedback-icon_v4lbu_30>svg{width:100%;height:100%}@keyframes _feedback-icon-animation_v4lbu_1{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:.5}}@media (max-width: 425px){[data-fullscreen] ._full-screen-button_1xm32_2{display:none}}[data-media-player][data-view-type=audio] ._full-screen-button_1xm32_2{display:none}._gestures-container_1fn3b_1{display:contents}._gesture_1fn3b_1{position:absolute;top:0;right:0;bottom:0;left:0}[data-fullscreen] ._gesture_1fn3b_1{top:3.625rem}._keyboard-shortcuts-overlay_y5kv6_1{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background-color:#000000b3;color:#fff;padding:1.5rem;-webkit-user-select:none;user-select:none;overflow-y:auto;display:flex;flex-direction:column;align-items:center}._keyboard-shortcuts-overlay_y5kv6_1 header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}:is(._keyboard-shortcuts-overlay_y5kv6_1 header) h2{font-size:1rem;font-weight:500;margin:0}@container player (width > 400px) and (height > 300px){:is(._keyboard-shortcuts-overlay_y5kv6_1 header) h2{font-size:1.5rem}}._keyboard-shortcuts-overlay_y5kv6_1 table{width:100%;max-width:54rem;padding:0;border-collapse:collapse}@container player (width > 400px) and (height > 300px){._keyboard-shortcuts-overlay_y5kv6_1 table{padding:2rem}}:is(._keyboard-shortcuts-overlay_y5kv6_1 table) tr{border-bottom:1px solid rgba(232 234 236 / .2)}:is(._keyboard-shortcuts-overlay_y5kv6_1 table) tbody tr:last-child{border-bottom:none}:is(._keyboard-shortcuts-overlay_y5kv6_1 table) th,:is(._keyboard-shortcuts-overlay_y5kv6_1 table) td{text-align:left;font-size:.75rem;line-height:1.5}@container player (width > 400px) and (height > 300px){:is(._keyboard-shortcuts-overlay_y5kv6_1 table) th,:is(._keyboard-shortcuts-overlay_y5kv6_1 table) td{font-size:.875rem}}@container player (width >= 720px) and (height > 300px){:is(._keyboard-shortcuts-overlay_y5kv6_1 table) th,:is(._keyboard-shortcuts-overlay_y5kv6_1 table) td{font-size:1rem}}._keyboard-shortcuts-button_y5kv6_67{position:absolute;top:1rem;right:1rem;z-index:1;opacity:0;width:2.25rem;height:2.25rem;pointer-events:none;border-radius:var(--radius-2);border:1px solid #d7dade;background:var(--controls-layout-bg-color)}._keyboard-shortcuts-button_y5kv6_67:focus-visible{opacity:1;pointer-events:auto}[data-media-player][data-view-type=audio] ._keyboard-shortcuts-button_y5kv6_67{display:none}._close-button_y5kv6_93{background-color:transparent;border:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;width:2.25rem;height:2.25rem}@media (max-width: 425px) and (hover: none){button._play-pause-button_kyuc5_1{display:none}}._poster_195hi_1{width:100%;height:100%;object-fit:contain;position:absolute;display:none}._poster_195hi_1[data-visible]{display:block}._small-layout-overlay_1vli4_1{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;visibility:hidden;align-items:center;justify-content:center}@media (max-width: 425px) and (hover: none){._small-layout-overlay_1vli4_1{visibility:visible}}._small-layout-button_1vli4_14{width:5rem;height:5rem;background-color:#1616164d;display:flex;align-items:center;justify-content:center;border-radius:50%}._small-layout-icon-play_1vli4_24,._small-layout-icon-pause_1vli4_30{width:3rem;height:3rem;color:#fff}._full-screen-close-icon_1vli4_36{display:none}[data-fullscreen] ._full-screen-close-icon_1vli4_36{background-color:transparent;border:none;display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;padding:1.25rem;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none}[data-fullscreen][data-playing] ._full-screen-close-icon_1vli4_36,[data-media-player][data-playing] ._small-layout-button_1vli4_14{animation:_fade-out_1vli4_1 1s;animation-delay:1.5s;animation-fill-mode:forwards}[data-media-player][data-playing] ._small-layout-icon-play_1vli4_24,[data-media-player][data-paused] ._small-layout-icon-pause_1vli4_30{display:none}@keyframes _fade-out_1vli4_1{0%{opacity:1}to{opacity:0}}._time-indicator_1rlpb_1{display:flex;color:#556572;-webkit-user-select:none;user-select:none}[data-fullscreen] ._time-indicator_1rlpb_1,[data-darkmode=true] ._time-indicator_1rlpb_1{color:#fff}._comment-markers_49pse_1{display:flex;position:relative;width:100%;height:.375rem;-webkit-user-select:none;user-select:none;pointer-events:none}@container player (width >= 420px) and (height <= 300px){._comment-markers_49pse_1{display:none}}._comment-marker_49pse_1{position:absolute;height:100%;background:linear-gradient(90deg,#2b7abc,#abd9ff);border-radius:.125rem}._timeline-wrapper_49pse_21{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 var(--spacing-1);grid-area:slider;padding-bottom:.375rem}._timeline-wrapper_49pse_21:has(._comment-markers_49pse_1){padding-bottom:0}._track_49pse_35{width:100%;height:.25rem;will-change:height;position:relative;background-color:var(--timeline-track-bg-color, #ccd0d2);border-radius:var(--radius-1);contain:strict;transition:height .15s,border-radius .15s}._thumb_49pse_48{position:absolute;width:1.125rem;height:1.125rem;background-color:var(--timeline-thumb-color, #2b7abc);border-radius:var(--radius-3);cursor:pointer;opacity:0;transform:translate(-50%) translateZ(0);transition:opacity .15s ease-in;left:var(--slider-fill);will-change:left}._root_49pse_62{display:inline-flex;width:100%;height:1.25rem;position:relative;align-items:center;contain:layout style;outline:none;cursor:pointer;user-select:none;touch-action:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._root_49pse_62[data-active] ._track_49pse_35{border-radius:var(--radius-2);height:.625rem}._root_49pse_62[data-focus] ._track_49pse_35{outline:2px solid var(--focus-outline-color);outline-offset:1px;border-radius:2px}._root_49pse_62[data-active] ._thumb_49pse_48{opacity:1}._track-inner_49pse_92{position:absolute;will-change:width;height:100%}._progress_49pse_98{z-index:0;width:var(--slider-progress, 0%);background-color:var(--timeline-track-progress-bg-color, #adb2b6)}._track-fill_49pse_104{z-index:1;width:var(--slider-fill, 0%);background-color:var(--timeline-track-fill-bg-color, #2b7abc)}:is([data-fullscreen] ._root_49pse_62,[data-darkmode=true] ._root_49pse_62) ._track_49pse_35{background-color:#333}:is([data-fullscreen] ._root_49pse_62,[data-darkmode=true] ._root_49pse_62) ._progress_49pse_98{background-color:#666}._pins_49pse_121{display:flex;position:relative;height:2rem;width:100%;-webkit-user-select:none;user-select:none;margin-top:var(--spacing-1)}@container player (width >= 420px) and (height <= 300px){._pins_49pse_121{display:none}}._pin-button_49pse_134{display:flex;background-color:transparent;border:none;padding:0;position:absolute;transform:translate(-50%);cursor:pointer;transition:transform .2s ease-out;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._pin-button_49pse_134:hover{transform:translate(-50%) scale(1.25);z-index:1}._annotation-pin_49pse_154{fill:var(--pin-color-1);stroke:var(--pin-color-2)}._quiz-pin_49pse_159{fill:var(--pin-color-2);stroke:none}._annotation-pin-child_49pse_164{fill:var(--pin-color-3)}._quiz-pin-child_49pse_168{fill:#fff;font-size:.875rem}._interactive-pin-container_49pse_173{position:absolute;top:0;right:0;bottom:0;left:0;padding:0 var(--spacing-1)}@container player (width >= 420px) and (height <= 300px){._interactive-pin-container_49pse_173{display:none}}._interactive-pin-wrapper_49pse_183{position:relative;width:100%;height:100%}._interactive-pin-icon_49pse_189{transform-box:fill-box;transform-origin:center;transition:transform .2s ease-out}._interactive-pin-icon_49pse_189[data-open=true]{transform:rotate(45deg)}._interactive-pin_49pse_173{filter:drop-shadow(0 3px 6px rgba(0 0 0 / .16)) drop-shadow(0 3px 6px rgba(0 0 0 / .1))}._interactive-pin_49pse_173>._bg_49pse_203{fill:var(--timeline-thumb-color)}._interactive-pin_49pse_173>._symbol_49pse_207{stroke:var(--controls-layout-bg-color)}._interactive-pin-button_49pse_212{position:absolute;cursor:pointer;transform:translate(-50%);background-color:transparent;border:none;padding:0;display:flex;z-index:1;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._interactive-pin-button_49pse_212:hover ._interactive-pin_49pse_173>._bg_49pse_203{fill:#225f92}._interactive-pin-menu_49pse_232{display:flex;flex-direction:column;gap:.25rem;background-color:var(--settings-menu-bg-color, white);padding:.75rem .5rem;border-radius:var(--radius-2);width:169px;z-index:1000;filter:drop-shadow(0 .125rem .1875rem rgba(0 0 0 / .5))}._interactive-pin-menu-item_49pse_246{font-family:inherit;font-size:14px;text-rendering:geometricprecision;display:flex;align-items:center;gap:.25rem;color:var(--pin-color-3);padding:4px 6px;border-radius:var(--radius-2);border:1px solid #d7dade;background-color:var(--pin-color-1);cursor:pointer}._interactive-pin-menu-item_49pse_246:hover{background-color:#e8eaec}._arrow_49pse_267{fill:#fff}._wrapper_12cb0_1{display:flex;align-items:center}._track_12cb0_6{width:100%;height:.25rem;will-change:height;background-color:var(--volume-track-bg-color, #ccd0d2);border-radius:var(--radius-1);contain:strict;transition:height .15s,border-radius .15s}._thumb_12cb0_18{position:absolute;width:.875rem;height:.875rem;background-color:var(--volume-thumb-bg-color, #2d3b45);border-radius:var(--radius-3);cursor:pointer;opacity:0;transform:translate(-50%) translateZ(0);transition:opacity .15s ease-in;left:var(--slider-fill);will-change:left}._track-fill_12cb0_32{width:var(--slider-fill, 0%);will-change:width;height:100%;background-color:var(--volume-track-fill-bg-color, #2d3b45)}:is([data-fullscreen],[data-darkmode=true]) ._track_12cb0_6{background-color:#666}:is([data-fullscreen],[data-darkmode=true]) ._track-fill_12cb0_32,:is([data-fullscreen],[data-darkmode=true]) ._thumb_12cb0_18{background-color:#f5f5f5}._root_12cb0_51{display:inline-flex;height:1.25rem;align-items:center;contain:layout style;cursor:pointer;user-select:none;touch-action:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:0;will-change:width,margin;transition:all .15s;box-sizing:border-box}@media (max-width: 425px) and (hover: none){._root_12cb0_51{display:none}}._root_12cb0_51[data-active] ._track_12cb0_6{border-radius:.125rem;height:.3125rem}._root_12cb0_51[data-focus]{outline:none}._root_12cb0_51[data-focus] ._track_12cb0_6{outline:2px solid var(--focus-outline-color);outline-offset:1px;border-radius:2px}._root_12cb0_51[data-active] ._thumb_12cb0_18{opacity:1}._wrapper_12cb0_1:hover [data-media-volume-slider],[data-media-volume-slider][data-active]{margin-left:.5rem;width:4rem}[data-media-player]{--volume-track-bg-color: #ccd0d2;--volume-track-fill-bg-color: #2d3b45;--volume-thumb-bg-color: #2d3b45;--feedback-message-bg-color: black;--feedback-message-color: white;--feedback-icon-color: white;--feedback-icon-bg-color: black;--timeline-track-bg-color: #ccd0d2;--timeline-track-progress-bg-color: #adb2b6;--timeline-track-fill-bg-color: #2b7abc;--timeline-progress-bg-color: #adb2b6;--timeline-thumb-color: #2b7abc;--settings-menu-bg-color: white;--settings-submenu-color: #2d3b45;--settings-media-hover-color: white;--settings-media-hover-bg-color: rgb(43 122 188);--settings-media-submenu-hint-color: var(--settings-submenu-color);--captions-background-color: rgba(22 22 22 / .75);--captions-color: white;--captions-base-font-size-small: .75rem;--captions-base-font-size-normal: 1rem;--comments-background-color: rgba(0 0 0 / .8);--comments-color: white;--comments-font-size-small: .75rem;--comments-font-size-normal: .875rem;--comments-author-color: #c7cdd1;--controls-layout-bg-color: #f5f5f5;--media-button-icon-color: #2d3b45;--media-button-icon-hover-color: #e0e0e0;--focus-outline-color: #2b7abc;--spacing-1: .5rem;--spacing-2: .625rem;--spacing-3: 1rem;--spacing-4: 2rem;--radius-1: .0625rem;--radius-2: .25rem;--radius-3: 50%;--media-button-area-size-small: 2rem;--media-button-area-size-medium: 2.5rem;--media-button-area-size-large: 3rem;--media-button-icon-size-small: 1rem;--media-button-icon-size-medium: 1.5rem;--media-button-icon-size-large: 1.5rem;--action-buttons-color: #0374b5;--action-buttons-hover-color: #235f93;--action-buttons-border-color: #025483;--pin-color-1: #f2f4f4;--pin-color-2: #556572;--pin-color-3: #273540;outline:none;border-radius:var(--radius-2);position:relative;font-family:Lato,sans-serif;display:grid;container:player / size;width:100%;height:100%;grid-template-rows:1fr auto}[data-media-provider]{display:flex;position:relative;background-color:#000;contain:paint;border-top-left-radius:var(--radius-2);border-top-right-radius:var(--radius-2)}[data-media-provider] video,[data-media-provider] iframe{width:100%;height:100%;object-fit:contain;position:absolute}[data-media-player][data-view-type=audio]{container-type:normal;height:initial}[data-media-player][data-view-type=audio] [data-media-provider]{display:none}.controls-button{background-color:transparent;border:none;border-radius:var(--radius-2);cursor:pointer;padding:var(--spacing-1);margin:0;display:flex;align-items:center;justify-content:center;transition:background-color .2s;width:var(--media-button-area-size-small);height:var(--media-button-area-size-small)}@container player (width > 400px) and (height > 300px){.controls-button{width:var(--media-button-area-size-medium);height:var(--media-button-area-size-medium)}}@container player (width >= 720px) and (height > 300px){.controls-button{width:var(--media-button-area-size-large);height:var(--media-button-area-size-large)}}.controls-button[data-hover],.controls-button:hover{background-color:var(--media-button-icon-hover-color, #e0e0e0)}.controls-button:focus-visible,.controls-button[data-focus]{outline:2px solid var(--focus-outline-color)}.controls-button-icon{color:var(--media-button-icon-color);width:var(--media-button-icon-size-small);height:var(--media-button-icon-size-small)}@container player (width > 400px) and (height > 300px){.controls-button-icon{width:var(--media-button-icon-size-medium);height:var(--media-button-icon-size-medium)}}@container player (width >= 720px) and (height > 300px){.controls-button-icon{width:var(--media-button-icon-size-large);height:var(--media-button-icon-size-large)}}:is([data-fullscreen],[data-darkmode=true]) .controls-button-icon{color:#fff}:is([data-fullscreen],[data-darkmode=true]) .controls-button[data-hover],:is([data-fullscreen],[data-darkmode=true]) .controls-button:hover{background-color:#ffffff26}.icon-rotate{transition:transform .2s ease-out}.controls-button[aria-expanded=true] .icon-rotate{transform:rotate(60deg);transition:transform .1s ease-in}