@instructure/studio-player 0.2.7 → 0.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/{index-aLp7_0kW.css → index-BEdzBQV0.css} +1 -1
  2. package/dist/studio-player.es.js +163 -157
  3. package/package.json +1 -1
package/dist/{index-aLp7_0kW.css → index-BEdzBQV0.css} RENAMED
@@ -1 +1 @@
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_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_fph0z_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 >= 500px) and (height <= 300px){._root_fph0z_1{grid-template-columns:auto auto 1fr auto;grid-template-areas:"left-controls indicators slider right-controls"}}[data-fullscreen] ._root_fph0z_1,[data-darkmode=true]._root_fph0z_1{background-color:#000}._left-controls_fph0z_28{display:flex;gap:.25rem;grid-area:left-controls}._right-controls_fph0z_34{display:flex;gap:.25rem;grid-area:right-controls}._indicators_fph0z_40{grid-area:indicators;font-size:.875rem}@container player (width > 425px) and (height > 300px){._indicators_fph0z_40{font-size:1rem}}@container player (width >= 500px) and (height <= 300px){div._normal-timeline_fph0z_49{display:none}}div._compact-timeline_fph0z_55{display:none}@container player (width >= 500px) and (height <= 300px){div._compact-timeline_fph0z_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_19b45_1{display:flex;position:relative;width:100%;height:.375rem;-webkit-user-select:none;user-select:none;pointer-events:none}@container player (width >= 500px) and (height <= 300px){._comment-markers_19b45_1{display:none}}._comment-marker_19b45_1{position:absolute;height:100%;background:linear-gradient(90deg,#2b7abc,#abd9ff);border-radius:.125rem}._timeline-wrapper_19b45_21{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 var(--spacing-1);grid-area:slider;padding-bottom:.375rem}._timeline-wrapper_19b45_21:has(._comment-markers_19b45_1){padding-bottom:0}._track_19b45_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_19b45_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_19b45_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_19b45_62[data-active] ._track_19b45_35{border-radius:var(--radius-2);height:.625rem}._root_19b45_62[data-focus] ._track_19b45_35{outline:2px solid var(--focus-outline-color);outline-offset:1px;border-radius:2px}._root_19b45_62[data-active] ._thumb_19b45_48{opacity:1}._track-inner_19b45_92{position:absolute;will-change:width;height:100%}._progress_19b45_98{z-index:0;width:var(--slider-progress, 0%);background-color:var(--timeline-track-progress-bg-color, #adb2b6)}._track-fill_19b45_104{z-index:1;width:var(--slider-fill, 0%);background-color:var(--timeline-track-fill-bg-color, #2b7abc)}:is([data-fullscreen] ._root_19b45_62,[data-darkmode=true] ._root_19b45_62) ._track_19b45_35{background-color:#333}:is([data-fullscreen] ._root_19b45_62,[data-darkmode=true] ._root_19b45_62) ._progress_19b45_98{background-color:#666}._pins_19b45_121{display:flex;position:relative;height:2rem;width:100%;-webkit-user-select:none;user-select:none;margin-top:var(--spacing-1)}@container player (width >= 500px) and (height <= 300px){._pins_19b45_121{display:none}}._pin-button_19b45_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_19b45_134:hover{transform:translate(-50%) scale(1.25);z-index:1}._annotation-pin_19b45_154{fill:var(--pin-color-1);stroke:var(--pin-color-2)}._quiz-pin_19b45_159{fill:var(--pin-color-2);stroke:none}._annotation-pin-child_19b45_164{fill:var(--pin-color-3)}._quiz-pin-child_19b45_168{fill:#fff;font-size:.875rem}._interactive-pin-container_19b45_173{position:absolute;top:0;right:0;bottom:0;left:0;padding:0 var(--spacing-1)}@container player (width >= 500px) and (height <= 300px){._interactive-pin-container_19b45_173{display:none}}._interactive-pin-wrapper_19b45_183{position:relative;width:100%;height:100%}._interactive-pin-icon_19b45_189{transform-box:fill-box;transform-origin:center;transition:transform .2s ease-out}._interactive-pin-icon_19b45_189[data-open=true]{transform:rotate(45deg)}._interactive-pin_19b45_173{filter:drop-shadow(0 3px 6px rgba(0 0 0 / .16)) drop-shadow(0 3px 6px rgba(0 0 0 / .1))}._interactive-pin_19b45_173>._bg_19b45_203{fill:var(--timeline-thumb-color)}._interactive-pin_19b45_173>._symbol_19b45_207{stroke:var(--controls-layout-bg-color)}._interactive-pin-button_19b45_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_19b45_212:hover ._interactive-pin_19b45_173>._bg_19b45_203{fill:#225f92}._interactive-pin-menu_19b45_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_19b45_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_19b45_246:hover{background-color:#e8eaec}._arrow_19b45_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}
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_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}
package/dist/studio-player.es.js CHANGED
@@ -1,13 +1,13 @@
1
- import './index-aLp7_0kW.css';var ze = Object.defineProperty;
2
- var Ke = (e, n, o) => n in e ? ze(e, n, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[n] = o;
3
- var x = (e, n, o) => Ke(e, typeof n != "symbol" ? n + "" : n, o);
1
+ import './index-BEdzBQV0.css';var Ke = Object.defineProperty;
2
+ var De = (e, n, o) => n in e ? Ke(e, n, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[n] = o;
3
+ var N = (e, n, o) => De(e, typeof n != "symbol" ? n + "" : n, o);
4
4
  import { jsx as t, jsxs as s, Fragment as ee } from "react/jsx-runtime";
5
5
  import { createContext as te, useContext as P, useState as M, useCallback as p, useEffect as E, useMemo as Z, useRef as ve } from "react";
6
- import { useMediaPlayer as q, Spinner as Y, useMediaRemote as W, useMediaState as _, isTrackCaptionKind as De, Track as je, Captions as Ue, usePlaybackRateOptions as qe, useCaptionOptions as We, useVideoQualityOptions as Ge, useMediaStore as be, FullscreenButton as Ce, PlayButton as Qe, Poster as Ye, Time as re, TimeSlider as A, MuteButton as Je, VolumeSlider as D, MediaPlayer as Xe, MediaProvider as et } from "@vidstack/react";
7
- import { initReactI18next as tt, useTranslation as g } from "react-i18next";
6
+ 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";
7
+ import { initReactI18next as tt, useTranslation as b } from "react-i18next";
8
8
  import nt from "i18next";
9
9
  import ot from "i18next-resources-to-backend";
10
- import { useFloating as ge, autoUpdate as ke, flip as ye, arrow as we, useDismiss as Le, useInteractions as Pe, FloatingFocusManager as it, FloatingArrow as Ne, shift as at, offset as st } from "@floating-ui/react";
10
+ 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";
11
11
  const ct = (e, n, o) => {
12
12
  const i = e[n];
13
13
  return i ? typeof i == "function" ? i() : Promise.resolve(i) : new Promise((a, c) => {
@@ -34,15 +34,15 @@ nt.use(tt).use(
34
34
  escapeValue: !1
35
35
  }
36
36
  });
37
- const xe = te(null);
37
+ const Ne = te(null);
38
38
  function lt({
39
39
  children: e,
40
40
  contextValue: n
41
41
  }) {
42
- return /* @__PURE__ */ t(xe.Provider, { value: n, children: e });
42
+ return /* @__PURE__ */ t(Ne.Provider, { value: n, children: e });
43
43
  }
44
44
  function v() {
45
- const e = P(xe);
45
+ const e = P(Ne);
46
46
  if (!e)
47
47
  throw new Error(
48
48
  "useStudioPlayerContext must be used within a StudioPlayerContextProvider"
@@ -61,11 +61,11 @@ function rt({
61
61
  onInteractivePinClick: u,
62
62
  interactiveMenuElements: m,
63
63
  darkMode: h,
64
- children: b,
64
+ children: C,
65
65
  forceComments: w,
66
66
  disableCaptionSettings: y
67
67
  }) {
68
- const C = {
68
+ const g = {
69
69
  hideFullScreen: e,
70
70
  comments: n,
71
71
  annotations: o,
@@ -82,7 +82,7 @@ function rt({
82
82
  forceComments: w,
83
83
  disableCaptionSettings: y
84
84
  };
85
- return /* @__PURE__ */ t(Me.Provider, { value: C, children: b });
85
+ return /* @__PURE__ */ t(Me.Provider, { value: g, children: C });
86
86
  }
87
87
  function S() {
88
88
  const e = P(Me);
@@ -118,12 +118,12 @@ function ht({ annotations: e }) {
118
118
  return;
119
119
  const m = [];
120
120
  for (const h of e) {
121
- const b = mt(h, l);
122
- n.addEventListener("time-update", b), m.push(b);
121
+ const C = mt(h, l);
122
+ n.addEventListener("time-update", C), m.push(C);
123
123
  }
124
124
  if (a) {
125
125
  const h = e.find(
126
- (b) => b.id === a.id
126
+ (C) => C.id === a.id
127
127
  );
128
128
  h ? c(h) : (c(null), o.enableInteractions());
129
129
  }
@@ -133,7 +133,7 @@ function ht({ annotations: e }) {
133
133
  };
134
134
  }, [n, e]), a ? /* @__PURE__ */ t("div", { className: dt.annotationOverlay, children: a.render(u) }) : null;
135
135
  }
136
- 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", bt = "_media-buffering-track-fill_1fwjr_27", j = {
136
+ 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 = {
137
137
  "media-buffering-indicator": "_media-buffering-indicator_1fwjr_1",
138
138
  mediaBufferingIndicator: pt,
139
139
  "media-buffering-spinner": "_media-buffering-spinner_1fwjr_17",
@@ -143,9 +143,9 @@ const pt = "_media-buffering-indicator_1fwjr_1", _t = "_media-buffering-spinner_
143
143
  "media-buffering-track": "_media-buffering-track_1fwjr_22",
144
144
  mediaBufferingTrack: vt,
145
145
  "media-buffering-track-fill": "_media-buffering-track-fill_1fwjr_27",
146
- mediaBufferingTrackFill: bt
146
+ mediaBufferingTrackFill: Ct
147
147
  };
148
- function Ct() {
148
+ function gt() {
149
149
  return /* @__PURE__ */ t("div", { className: j.mediaBufferingIndicator, children: /* @__PURE__ */ s(Y.Root, { className: j.mediaBufferingSpinner, size: 96, children: [
150
150
  /* @__PURE__ */ t(Y.Track, { className: j.mediaBufferingTrack, width: 8 }),
151
151
  /* @__PURE__ */ t(
@@ -164,8 +164,8 @@ const Te = (e) => /* @__PURE__ */ s("svg", { width: 24, height: 24, viewBox: "0
164
164
  /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_149_104406", children: /* @__PURE__ */ t("rect", { width: 24, height: 24, fill: "white" }) }) }),
165
165
  /* @__PURE__ */ t("g", { clipPath: "url(#clip0_149_104406)", children: /* @__PURE__ */ t("path", { d: "M21.3333 0H2.66666C1.18666 0 0 1.35 0 3V21C0 22.65 1.18666 24 2.66666 24H21.3333C22.8 24 24 22.65 24 21V3C24 1.35 22.8 0 21.3333 0ZM10.6667 10.6667H8.66666V10H6V14H8.66666V13.3333H10.6667V14.6667C10.6667 15.4 10.0667 16 9.33334 16H5.33334C4.6 16 4 15.4 4 14.6667V9.33334C4 8.6 4.6 8 5.33334 8H9.33334C10.0667 8 10.6667 8.6 10.6667 9.33334V10.6667ZM20.0042 10.6667H18.0042V10H15.3375V14H18.0042V13.3333H20.0042V14.6667C20.0042 15.4 19.4042 16 18.6708 16H14.6708C13.9375 16 13.3375 15.4 13.3375 14.6667V9.33334C13.3375 8.6 13.9375 8 14.6708 8H18.6708C19.4042 8 20.0042 8.6 20.0042 9.33334V10.6667Z", fill: "currentColor" }) })
166
166
  ] });
167
- function gt() {
168
- const e = W(), n = _("textTrack"), o = _("hasCaptions"), i = n && De(n), a = v(), c = p(
167
+ function bt() {
168
+ const e = W(), n = _("textTrack"), o = _("hasCaptions"), i = n && ze(n), a = v(), c = p(
169
169
  (l) => {
170
170
  e.toggleCaptions(l.nativeEvent);
171
171
  },
@@ -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)
234
234
  }
235
235
  };
236
236
  }, []);
237
- }, Nt = (e, n, o) => {
237
+ }, xt = (e, n, o) => {
238
238
  let i = !1;
239
239
  return (a) => {
240
240
  const c = a.detail.currentTime;
241
241
  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);
242
242
  };
243
- }, xt = (e, n = 5) => {
243
+ }, Nt = (e, n = 5) => {
244
244
  const o = q(), i = Pt(n);
245
245
  return E(() => {
246
246
  if (!o)
247
247
  return;
248
248
  const a = [];
249
249
  for (const c of e) {
250
- const l = Nt(c, Se, i);
250
+ const l = xt(c, Se, i);
251
251
  a.push(l), o.addEventListener("time-update", l);
252
252
  }
253
253
  return o.dispatchEvent(
@@ -289,7 +289,7 @@ function Bt({ comment: e }) {
289
289
  }
290
290
  const Rt = 5;
291
291
  function Et({ comments: e }) {
292
- const n = v(), o = xt(e, Rt), i = !!_("textTrack"), a = o.map((c) => /* @__PURE__ */ t(Bt, { comment: c }, c.id));
292
+ const n = v(), o = Nt(e, Rt), i = !!_("textTrack"), a = o.map((c) => /* @__PURE__ */ t(Bt, { comment: c }, c.id));
293
293
  return e.length > 0 && n.state.commentsEnabled ? /* @__PURE__ */ t(
294
294
  "div",
295
295
  {
@@ -301,19 +301,19 @@ function Et({ comments: e }) {
301
301
  }
302
302
  ) : null;
303
303
  }
304
- const At = "_root_fph0z_1", Ot = "_left-controls_fph0z_28", Ft = "_right-controls_fph0z_34", Zt = "_indicators_fph0z_40", $t = "_normal-timeline_fph0z_49", zt = "_compact-timeline_fph0z_55", V = {
304
+ const At = "_root_1x28e_1", Ot = "_left-controls_1x28e_28", Ft = "_right-controls_1x28e_34", Zt = "_indicators_1x28e_40", $t = "_normal-timeline_1x28e_49", Kt = "_compact-timeline_1x28e_55", V = {
305
305
  root: At,
306
- "left-controls": "_left-controls_fph0z_28",
306
+ "left-controls": "_left-controls_1x28e_28",
307
307
  leftControls: Ot,
308
- "right-controls": "_right-controls_fph0z_34",
308
+ "right-controls": "_right-controls_1x28e_34",
309
309
  rightControls: Ft,
310
310
  indicators: Zt,
311
- "normal-timeline": "_normal-timeline_fph0z_49",
311
+ "normal-timeline": "_normal-timeline_1x28e_49",
312
312
  normalTimeline: $t,
313
- "compact-timeline": "_compact-timeline_fph0z_55",
314
- compactTimeline: zt
313
+ "compact-timeline": "_compact-timeline_1x28e_55",
314
+ compactTimeline: Kt
315
315
  };
316
- function Kt({
316
+ function Dt({
317
317
  darkMode: e,
318
318
  playerRef: n,
319
319
  showCaptionsButton: o = !0
@@ -330,13 +330,13 @@ function Kt({
330
330
  /* @__PURE__ */ t("div", { className: V.indicators, children: /* @__PURE__ */ t(wo, {}) }),
331
331
  /* @__PURE__ */ t(he, { className: V.compactTimeline }),
332
332
  /* @__PURE__ */ s("div", { className: V.rightControls, children: [
333
- o && /* @__PURE__ */ t(gt, {}),
333
+ o && /* @__PURE__ */ t(bt, {}),
334
334
  /* @__PURE__ */ t(Rn, {}),
335
335
  /* @__PURE__ */ t(Yn, {})
336
336
  ] })
337
337
  ] });
338
338
  }
339
- const N = te(null), Dt = (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 = {
339
+ 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 = {
340
340
  "menu-hint": "_menu-hint_k49ve_1",
341
341
  menuHint: jt,
342
342
  "menu-button": "_menu-button_k49ve_5",
@@ -351,12 +351,12 @@ function $({ label: e, hint: n, onClick: o, Icon: i }) {
351
351
  i && /* @__PURE__ */ t(i, { className: U.menuIcon }),
352
352
  /* @__PURE__ */ t("span", { className: U.menuLabel, children: e }),
353
353
  /* @__PURE__ */ t("span", { className: U.menuHint, children: n }),
354
- /* @__PURE__ */ t(Dt, {})
354
+ /* @__PURE__ */ t(zt, {})
355
355
  ] });
356
356
  }
357
357
  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" }) });
358
358
  function Qt() {
359
- const e = P(N), n = _("playbackRate"), { t: o } = g(), i = p(() => {
359
+ const e = P(x), n = _("playbackRate"), { t: o } = b(), i = p(() => {
360
360
  e && e.setPage("speed");
361
361
  }, [e]);
362
362
  return e ? /* @__PURE__ */ t(
@@ -370,7 +370,7 @@ function Qt() {
370
370
  ) : null;
371
371
  }
372
372
  function Yt() {
373
- const e = P(N), n = _("hasCaptions"), o = _("textTrack"), { t: i } = g(), a = p(() => {
373
+ const e = P(x), n = _("hasCaptions"), o = _("textTrack"), { t: i } = b(), a = p(() => {
374
374
  e && e.setPage("captions");
375
375
  }, [e]);
376
376
  return e && n ? /* @__PURE__ */ t(
@@ -392,7 +392,7 @@ const Jt = (e) => /* @__PURE__ */ s("svg", { width: 18, height: 18, viewBox: "0
392
392
  ] })
393
393
  ] });
394
394
  function Xt() {
395
- const e = P(N), n = _("autoQuality"), o = _("quality"), { t: i } = g(), a = p(() => {
395
+ const e = P(x), n = _("autoQuality"), o = _("quality"), { t: i } = b(), a = p(() => {
396
396
  e && e.setPage("quality");
397
397
  }, [e]);
398
398
  return e && o ? /* @__PURE__ */ t(
@@ -450,7 +450,7 @@ function ne({
450
450
  }
451
451
  const rn = (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: "M1 0V12.7489H5.44V18L10.5007 12.7489H16.582V0H1ZM2 1H15.58V11.7339H9.98655L6.52667 15.25V11.7339H2V1ZM5.24963 5.35011H12.3323V4.24835H5.24963V5.35011ZM5.24963 8.18462H9.50067V7.08285H5.24963V8.18462Z", fill: "currentColor" }) });
452
452
  function un() {
453
- const { t: e } = g(), n = S(), o = v();
453
+ const { t: e } = b(), n = S(), o = v();
454
454
  return !n.forceComments && n.hasComments ? /* @__PURE__ */ t(
455
455
  ne,
456
456
  {
@@ -476,7 +476,7 @@ const dn = "_main-menu_7h96l_1", mn = {
476
476
  mainMenu: dn
477
477
  };
478
478
  function hn() {
479
- const e = P(N);
479
+ const e = P(x);
480
480
  return H(e == null ? void 0 : e.toggle), /* @__PURE__ */ s("div", { className: mn.mainMenu, children: [
481
481
  /* @__PURE__ */ t(Qt, {}),
482
482
  /* @__PURE__ */ t(Yt, {}),
@@ -484,7 +484,7 @@ function hn() {
484
484
  /* @__PURE__ */ t(Xt, {})
485
485
  ] });
486
486
  }
487
- const G = (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: "M17.1347 3.00061L6.55157 13.5825L0.865302 7.89624L0 8.76154L6.55157 15.3131L17.9988 3.86469L17.1347 3.00061Z", fill: "currentColor" }) }), z = (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: "M12.037 3.03704L6.07407 9L12.037 14.963L11 16L4 9L11 2L12.037 3.03704Z", fill: "currentColor" }) }), pn = "_menu-container_1bjr3_1", _n = "_menu-options_1bjr3_6", fn = "_menu-heading_1bjr3_11", vn = "_check-icon_1bjr3_27", bn = "_menu-item-label_1bjr3_33", Cn = "_menu-item_1bjr3_33", gn = "_menu-back-button_1bjr3_66", r = {
487
+ const G = (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: "M17.1347 3.00061L6.55157 13.5825L0.865302 7.89624L0 8.76154L6.55157 15.3131L17.9988 3.86469L17.1347 3.00061Z", fill: "currentColor" }) }), K = (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: "M12.037 3.03704L6.07407 9L12.037 14.963L11 16L4 9L11 2L12.037 3.03704Z", fill: "currentColor" }) }), pn = "_menu-container_1bjr3_1", _n = "_menu-options_1bjr3_6", fn = "_menu-heading_1bjr3_11", vn = "_check-icon_1bjr3_27", Cn = "_menu-item-label_1bjr3_33", gn = "_menu-item_1bjr3_33", bn = "_menu-back-button_1bjr3_66", r = {
488
488
  "menu-container": "_menu-container_1bjr3_1",
489
489
  menuContainer: pn,
490
490
  "menu-options": "_menu-options_1bjr3_6",
@@ -494,17 +494,17 @@ const G = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0
494
494
  "check-icon": "_check-icon_1bjr3_27",
495
495
  checkIcon: vn,
496
496
  "menu-item-label": "_menu-item-label_1bjr3_33",
497
- menuItemLabel: bn,
497
+ menuItemLabel: Cn,
498
498
  "menu-item": "_menu-item_1bjr3_33",
499
- menuItem: Cn,
499
+ menuItem: gn,
500
500
  "menu-back-button": "_menu-back-button_1bjr3_66",
501
- menuBackButton: gn
501
+ menuBackButton: bn
502
502
  };
503
503
  function kn() {
504
- const e = P(N), n = qe({
504
+ const e = P(x), n = qe({
505
505
  rates: B,
506
506
  normalLabel: "1x"
507
- }), { t: o } = g();
507
+ }), { t: o } = b();
508
508
  return H(e == null ? void 0 : e.backToMain), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
509
509
  /* @__PURE__ */ s(
510
510
  "button",
@@ -513,7 +513,7 @@ function kn() {
513
513
  className: r.menuBackButton,
514
514
  onClick: e.backToMain,
515
515
  children: [
516
- /* @__PURE__ */ t(z, {}),
516
+ /* @__PURE__ */ t(K, {}),
517
517
  /* @__PURE__ */ t("span", { children: o("BACK") })
518
518
  ]
519
519
  }
@@ -539,7 +539,7 @@ function kn() {
539
539
  ] }) : null;
540
540
  }
541
541
  function yn() {
542
- const e = P(N), n = _("textTrack"), { t: o } = g(), i = p(() => {
542
+ const e = P(x), n = _("textTrack"), { t: o } = b(), i = p(() => {
543
543
  e && e.setPage("captionLanguage");
544
544
  }, [e]);
545
545
  return e ? /* @__PURE__ */ t(
@@ -552,7 +552,7 @@ function yn() {
552
552
  ) : null;
553
553
  }
554
554
  function wn() {
555
- const { t: e } = g(), n = v(), o = P(N), i = p(() => {
555
+ const { t: e } = b(), n = v(), o = P(x), i = p(() => {
556
556
  o && o.setPage("captionFontSize");
557
557
  }, [o]);
558
558
  return o ? /* @__PURE__ */ t(
@@ -565,7 +565,7 @@ function wn() {
565
565
  ) : null;
566
566
  }
567
567
  function Ln() {
568
- const { t: e } = g(), n = v();
568
+ const { t: e } = b(), n = v();
569
569
  return /* @__PURE__ */ t(
570
570
  ne,
571
571
  {
@@ -576,7 +576,7 @@ function Ln() {
576
576
  );
577
577
  }
578
578
  function Pn() {
579
- const { t: e } = g(), n = v();
579
+ const { t: e } = b(), n = v();
580
580
  return /* @__PURE__ */ t(
581
581
  ne,
582
582
  {
@@ -586,8 +586,8 @@ function Pn() {
586
586
  }
587
587
  );
588
588
  }
589
- function Nn() {
590
- const e = P(N), { t: n } = g(), { disableCaptionSettings: o } = v();
589
+ function xn() {
590
+ const e = P(x), { t: n } = b(), { disableCaptionSettings: o } = v();
591
591
  return H(e == null ? void 0 : e.backToMain), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
592
592
  /* @__PURE__ */ s(
593
593
  "button",
@@ -596,7 +596,7 @@ function Nn() {
596
596
  className: r.menuBackButton,
597
597
  onClick: e.backToMain,
598
598
  children: [
599
- /* @__PURE__ */ t(z, {}),
599
+ /* @__PURE__ */ t(K, {}),
600
600
  /* @__PURE__ */ t("span", { children: n("BACK") })
601
601
  ]
602
602
  }
@@ -608,8 +608,8 @@ function Nn() {
608
608
  /* @__PURE__ */ t(Pn, {})
609
609
  ] }) : null;
610
610
  }
611
- function xn() {
612
- const e = P(N), n = We(), { t: o } = g();
611
+ function Nn() {
612
+ const e = P(x), n = We(), { t: o } = b();
613
613
  return H(e == null ? void 0 : e.backToCaptions), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
614
614
  /* @__PURE__ */ s(
615
615
  "button",
@@ -618,7 +618,7 @@ function xn() {
618
618
  className: r.menuBackButton,
619
619
  onClick: e.backToCaptions,
620
620
  children: [
621
- /* @__PURE__ */ t(z, {}),
621
+ /* @__PURE__ */ t(K, {}),
622
622
  /* @__PURE__ */ t("span", { children: o("BACK") })
623
623
  ]
624
624
  }
@@ -644,7 +644,7 @@ function xn() {
644
644
  ] }) : null;
645
645
  }
646
646
  function Mn() {
647
- const e = v(), n = P(N), { t: o } = g();
647
+ const e = v(), n = P(x), { t: o } = b();
648
648
  return H(n == null ? void 0 : n.backToCaptions), n ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
649
649
  /* @__PURE__ */ s(
650
650
  "button",
@@ -653,7 +653,7 @@ function Mn() {
653
653
  className: r.menuBackButton,
654
654
  onClick: n.backToCaptions,
655
655
  children: [
656
- /* @__PURE__ */ t(z, {}),
656
+ /* @__PURE__ */ t(K, {}),
657
657
  /* @__PURE__ */ t("span", { children: o("BACK") })
658
658
  ]
659
659
  }
@@ -682,7 +682,7 @@ function Mn() {
682
682
  ] }) : null;
683
683
  }
684
684
  function Tn() {
685
- const e = P(N), n = Ge({ sort: "descending" }), o = _("autoQuality"), { t: i } = g();
685
+ const e = P(x), n = Ge({ sort: "descending" }), o = _("autoQuality"), { t: i } = b();
686
686
  return H(e == null ? void 0 : e.backToMain), e ? /* @__PURE__ */ s("div", { className: r.menuContainer, children: [
687
687
  /* @__PURE__ */ s(
688
688
  "button",
@@ -691,7 +691,7 @@ function Tn() {
691
691
  className: r.menuBackButton,
692
692
  onClick: e.backToMain,
693
693
  children: [
694
- /* @__PURE__ */ t(z, {}),
694
+ /* @__PURE__ */ t(K, {}),
695
695
  /* @__PURE__ */ t("span", { children: i("BACK") })
696
696
  ]
697
697
  }
@@ -719,8 +719,8 @@ function Tn() {
719
719
  const In = {
720
720
  main: hn,
721
721
  speed: kn,
722
- captions: Nn,
723
- captionLanguage: xn,
722
+ captions: xn,
723
+ captionLanguage: Nn,
724
724
  captionFontSize: Mn,
725
725
  quality: Tn
726
726
  };
@@ -733,7 +733,7 @@ function Sn() {
733
733
  n("captions");
734
734
  }, []), u = p(() => {
735
735
  n("main");
736
- }, []), m = Z(() => In[e], [e]), h = ve(null), { refs: b, floatingStyles: w, context: y } = ge({
736
+ }, []), m = Z(() => In[e], [e]), h = ve(null), { refs: C, floatingStyles: w, context: y } = be({
737
737
  open: o,
738
738
  onOpenChange: (T) => {
739
739
  i(T), u();
@@ -746,7 +746,7 @@ function Sn() {
746
746
  element: h
747
747
  })
748
748
  ]
749
- }), C = Le(y, { escapeKey: !1 }), { getReferenceProps: f, getFloatingProps: k } = Pe([C]);
749
+ }), g = Le(y, { escapeKey: !1 }), { getReferenceProps: f, getFloatingProps: k } = Pe([g]);
750
750
  return {
751
751
  Page: m,
752
752
  open: o,
@@ -755,7 +755,7 @@ function Sn() {
755
755
  backToCaptions: l,
756
756
  backToMain: u,
757
757
  arrowRef: h,
758
- refs: b,
758
+ refs: C,
759
759
  floatingStyles: w,
760
760
  context: y,
761
761
  getReferenceProps: f,
@@ -779,9 +779,9 @@ function Rn() {
779
779
  getReferenceProps: u,
780
780
  open: m,
781
781
  refs: h,
782
- setPage: b,
782
+ setPage: C,
783
783
  toggle: w
784
- } = Sn(), y = v(), { t: C } = g();
784
+ } = Sn(), y = v(), { t: g } = b();
785
785
  return /* @__PURE__ */ s(ee, { children: [
786
786
  /* @__PURE__ */ t(
787
787
  "button",
@@ -789,7 +789,7 @@ function Rn() {
789
789
  ref: h.setReference,
790
790
  type: "button",
791
791
  className: "controls-button",
792
- "aria-label": C("SETTINGS"),
792
+ "aria-label": g("SETTINGS"),
793
793
  onClick: w,
794
794
  "aria-expanded": m,
795
795
  tabIndex: y != null && y.state.interactionsDisabled ? -1 : 0,
@@ -806,14 +806,14 @@ function Rn() {
806
806
  ...l(),
807
807
  children: [
808
808
  /* @__PURE__ */ t(
809
- N.Provider,
809
+ x.Provider,
810
810
  {
811
- value: { setPage: b, backToMain: i, backToCaptions: o, toggle: w },
811
+ value: { setPage: C, backToMain: i, backToCaptions: o, toggle: w },
812
812
  children: /* @__PURE__ */ t(e, {})
813
813
  }
814
814
  ),
815
815
  /* @__PURE__ */ t(
816
- Ne,
816
+ xe,
817
817
  {
818
818
  ref: n,
819
819
  context: a,
@@ -845,9 +845,9 @@ const oe = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0
845
845
  "feedback-icon-animation": "_feedback-icon-animation_v4lbu_1",
846
846
  feedbackIconAnimation: $n
847
847
  };
848
- function zn() {
848
+ function Kn() {
849
849
  var o;
850
- const e = be();
850
+ const e = Ce();
851
851
  switch ((o = e.lastKeyboardAction) == null ? void 0 : o.action) {
852
852
  case "togglePaused":
853
853
  return /* @__PURE__ */ t("i", { className: L.feedbackIcon, children: e.paused ? /* @__PURE__ */ t(oe, {}) : /* @__PURE__ */ t(ie, {}) });
@@ -869,9 +869,9 @@ function zn() {
869
869
  return null;
870
870
  }
871
871
  }
872
- function Kn() {
872
+ function Dn() {
873
873
  var i;
874
- const { t: e } = g(), n = be();
874
+ const { t: e } = b(), n = Ce();
875
875
  switch ((i = n.lastKeyboardAction) == null ? void 0 : i.action) {
876
876
  case "toggleCaptions":
877
877
  case "nextCaptionLanguage":
@@ -897,10 +897,10 @@ function Kn() {
897
897
  return null;
898
898
  }
899
899
  }
900
- const Dn = He(zn, 500), jn = He(Kn, 1e3);
900
+ const zn = He(Kn, 500), jn = He(Dn, 1e3);
901
901
  function Un() {
902
902
  return /* @__PURE__ */ s("div", { className: L.feedbackOverlay, children: [
903
- /* @__PURE__ */ t(Dn, {}),
903
+ /* @__PURE__ */ t(zn, {}),
904
904
  /* @__PURE__ */ t(jn, {})
905
905
  ] });
906
906
  }
@@ -911,7 +911,7 @@ const qn = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0
911
911
  function Yn() {
912
912
  const e = _("fullscreen"), n = v();
913
913
  return S().hideFullScreen ? null : /* @__PURE__ */ t(
914
- Ce,
914
+ ge,
915
915
  {
916
916
  tabIndex: n.state.interactionsDisabled ? -1 : 0,
917
917
  className: `controls-button ${Qn.fullScreenButton}`,
@@ -939,7 +939,7 @@ const to = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0
939
939
  closeButton: io
940
940
  };
941
941
  function ao({ onClose: e }) {
942
- const { t: n } = g();
942
+ const { t: n } = b();
943
943
  H(e);
944
944
  const o = (i) => {
945
945
  i && i.focus();
@@ -1052,12 +1052,12 @@ function ao({ onClose: e }) {
1052
1052
  );
1053
1053
  }
1054
1054
  function so() {
1055
- const [e, n] = M(!1), [o, i] = M(!1), [a, c] = M(!1), l = v(), u = _("playing"), m = W(), { t: h } = g(), b = p(() => {
1055
+ const [e, n] = M(!1), [o, i] = M(!1), [a, c] = M(!1), l = v(), u = _("playing"), m = W(), { t: h } = b(), C = p(() => {
1056
1056
  n(!0), l.disableInteractions(), u && (c(!0), m.pause());
1057
1057
  }, [u, m, l]), w = p(() => {
1058
1058
  n(!1), i(!0), l.enableInteractions(), a && (c(!1), m.play());
1059
1059
  }, [a, m, l]), y = p(
1060
- (C) => o && (C == null ? void 0 : C.focus()),
1060
+ (g) => o && (g == null ? void 0 : g.focus()),
1061
1061
  [o]
1062
1062
  );
1063
1063
  return e ? /* @__PURE__ */ t(ao, { onClose: w }) : /* @__PURE__ */ t(
@@ -1067,7 +1067,7 @@ function so() {
1067
1067
  "aria-label": h("KEYBOARD_SHORTCUTS"),
1068
1068
  type: "button",
1069
1069
  className: X.keyboardShortcutsButton,
1070
- onClick: b,
1070
+ onClick: C,
1071
1071
  tabIndex: l.state.interactionsDisabled ? -1 : 0,
1072
1072
  children: /* @__PURE__ */ t(to, {})
1073
1073
  }
@@ -1101,7 +1101,7 @@ function ho({ src: e }) {
1101
1101
  const n = _("source");
1102
1102
  return n.type === "video/youtube" || n.type === "video/vimeo" ? null : /* @__PURE__ */ t(Ye, { src: e, className: mo.poster });
1103
1103
  }
1104
- const po = "_small-layout-overlay_1vli4_1", _o = "_small-layout-button_1vli4_14", fo = "_small-layout-icon-play_1vli4_24", vo = "_small-layout-icon-pause_1vli4_30", bo = "_full-screen-close-icon_1vli4_36", Co = "_fade-out_1vli4_1", O = {
1104
+ const po = "_small-layout-overlay_1vli4_1", _o = "_small-layout-button_1vli4_14", fo = "_small-layout-icon-play_1vli4_24", vo = "_small-layout-icon-pause_1vli4_30", Co = "_full-screen-close-icon_1vli4_36", go = "_fade-out_1vli4_1", O = {
1105
1105
  "small-layout-overlay": "_small-layout-overlay_1vli4_1",
1106
1106
  smallLayoutOverlay: po,
1107
1107
  "small-layout-button": "_small-layout-button_1vli4_14",
@@ -1111,13 +1111,13 @@ const po = "_small-layout-overlay_1vli4_1", _o = "_small-layout-button_1vli4_14"
1111
1111
  "small-layout-icon-pause": "_small-layout-icon-pause_1vli4_30",
1112
1112
  smallLayoutIconPause: vo,
1113
1113
  "full-screen-close-icon": "_full-screen-close-icon_1vli4_36",
1114
- fullScreenCloseIcon: bo,
1114
+ fullScreenCloseIcon: Co,
1115
1115
  "fade-out": "_fade-out_1vli4_1",
1116
- fadeOut: Co
1116
+ fadeOut: go
1117
1117
  };
1118
- function go() {
1118
+ function bo() {
1119
1119
  return /* @__PURE__ */ s("div", { className: O.smallLayoutOverlay, children: [
1120
- /* @__PURE__ */ t(Ce, { className: O.fullScreenCloseIcon, children: /* @__PURE__ */ t(Ee, {}) }),
1120
+ /* @__PURE__ */ t(ge, { className: O.fullScreenCloseIcon, children: /* @__PURE__ */ t(Ee, {}) }),
1121
1121
  /* @__PURE__ */ s("i", { className: O.smallLayoutButton, children: [
1122
1122
  /* @__PURE__ */ t(ie, { className: O.smallLayoutIconPlay }),
1123
1123
  /* @__PURE__ */ t(oe, { className: O.smallLayoutIconPause })
@@ -1135,47 +1135,47 @@ function wo() {
1135
1135
  /* @__PURE__ */ t(re, { type: "duration" })
1136
1136
  ] });
1137
1137
  }
1138
- const Lo = "_comment-markers_19b45_1", Po = "_comment-marker_19b45_1", No = "_timeline-wrapper_19b45_21", xo = "_track_19b45_35", Mo = "_thumb_19b45_48", To = "_root_19b45_62", Io = "_track-inner_19b45_92", So = "_progress_19b45_98", Ho = "_track-fill_19b45_104", Vo = "_pins_19b45_121", Bo = "_pin-button_19b45_134", Ro = "_annotation-pin_19b45_154", Eo = "_quiz-pin_19b45_159", Ao = "_annotation-pin-child_19b45_164", Oo = "_quiz-pin-child_19b45_168", Fo = "_interactive-pin-container_19b45_173", Zo = "_interactive-pin-wrapper_19b45_183", $o = "_interactive-pin-icon_19b45_189", zo = "_interactive-pin_19b45_173", Ko = "_bg_19b45_203", Do = "_symbol_19b45_207", jo = "_interactive-pin-button_19b45_212", Uo = "_interactive-pin-menu_19b45_232", qo = "_interactive-pin-menu-item_19b45_246", Wo = "_arrow_19b45_267", d = {
1139
- "comment-markers": "_comment-markers_19b45_1",
1138
+ 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 = {
1139
+ "comment-markers": "_comment-markers_49pse_1",
1140
1140
  commentMarkers: Lo,
1141
- "comment-marker": "_comment-marker_19b45_1",
1141
+ "comment-marker": "_comment-marker_49pse_1",
1142
1142
  commentMarker: Po,
1143
- "timeline-wrapper": "_timeline-wrapper_19b45_21",
1144
- timelineWrapper: No,
1145
- track: xo,
1143
+ "timeline-wrapper": "_timeline-wrapper_49pse_21",
1144
+ timelineWrapper: xo,
1145
+ track: No,
1146
1146
  thumb: Mo,
1147
1147
  root: To,
1148
- "track-inner": "_track-inner_19b45_92",
1148
+ "track-inner": "_track-inner_49pse_92",
1149
1149
  trackInner: Io,
1150
1150
  progress: So,
1151
- "track-fill": "_track-fill_19b45_104",
1151
+ "track-fill": "_track-fill_49pse_104",
1152
1152
  trackFill: Ho,
1153
1153
  pins: Vo,
1154
- "pin-button": "_pin-button_19b45_134",
1154
+ "pin-button": "_pin-button_49pse_134",
1155
1155
  pinButton: Bo,
1156
- "annotation-pin": "_annotation-pin_19b45_154",
1156
+ "annotation-pin": "_annotation-pin_49pse_154",
1157
1157
  annotationPin: Ro,
1158
- "quiz-pin": "_quiz-pin_19b45_159",
1158
+ "quiz-pin": "_quiz-pin_49pse_159",
1159
1159
  quizPin: Eo,
1160
- "annotation-pin-child": "_annotation-pin-child_19b45_164",
1160
+ "annotation-pin-child": "_annotation-pin-child_49pse_164",
1161
1161
  annotationPinChild: Ao,
1162
- "quiz-pin-child": "_quiz-pin-child_19b45_168",
1162
+ "quiz-pin-child": "_quiz-pin-child_49pse_168",
1163
1163
  quizPinChild: Oo,
1164
- "interactive-pin-container": "_interactive-pin-container_19b45_173",
1164
+ "interactive-pin-container": "_interactive-pin-container_49pse_173",
1165
1165
  interactivePinContainer: Fo,
1166
- "interactive-pin-wrapper": "_interactive-pin-wrapper_19b45_183",
1166
+ "interactive-pin-wrapper": "_interactive-pin-wrapper_49pse_183",
1167
1167
  interactivePinWrapper: Zo,
1168
- "interactive-pin-icon": "_interactive-pin-icon_19b45_189",
1168
+ "interactive-pin-icon": "_interactive-pin-icon_49pse_189",
1169
1169
  interactivePinIcon: $o,
1170
- "interactive-pin": "_interactive-pin_19b45_173",
1171
- interactivePin: zo,
1172
- bg: Ko,
1173
- symbol: Do,
1174
- "interactive-pin-button": "_interactive-pin-button_19b45_212",
1170
+ "interactive-pin": "_interactive-pin_49pse_173",
1171
+ interactivePin: Ko,
1172
+ bg: Do,
1173
+ symbol: zo,
1174
+ "interactive-pin-button": "_interactive-pin-button_49pse_212",
1175
1175
  interactivePinButton: jo,
1176
- "interactive-pin-menu": "_interactive-pin-menu_19b45_232",
1176
+ "interactive-pin-menu": "_interactive-pin-menu_49pse_232",
1177
1177
  interactivePinMenu: Uo,
1178
- "interactive-pin-menu-item": "_interactive-pin-menu-item_19b45_246",
1178
+ "interactive-pin-menu-item": "_interactive-pin-menu-item_49pse_246",
1179
1179
  interactivePinMenuItem: qo,
1180
1180
  arrow: Wo
1181
1181
  }, Go = {
@@ -1310,24 +1310,30 @@ function ti() {
1310
1310
  }
1311
1311
  function ni() {
1312
1312
  const e = _("duration"), n = S(), o = v();
1313
- return n.hasComments && o.state.commentsEnabled ? /* @__PURE__ */ t("div", { className: d.commentMarkers, children: n.comments.map((i) => /* @__PURE__ */ t(
1314
- "span",
1315
- {
1316
- className: d.commentMarker,
1317
- style: {
1318
- left: `${i.timestamp / e * 100}%`,
1319
- width: `${Se / e * 100}%`
1320
- }
1321
- },
1322
- i.id
1323
- )) }) : null;
1313
+ return n.hasComments && o.state.commentsEnabled ? /* @__PURE__ */ t("div", { className: d.commentMarkers, children: n.comments.map((i) => {
1314
+ const a = Math.min(
1315
+ Math.abs(e - i.timestamp),
1316
+ Se
1317
+ );
1318
+ return /* @__PURE__ */ t(
1319
+ "span",
1320
+ {
1321
+ className: d.commentMarker,
1322
+ style: {
1323
+ left: `${i.timestamp / e * 100}%`,
1324
+ width: `${a / e * 100}%`
1325
+ }
1326
+ },
1327
+ i.id
1328
+ );
1329
+ }) }) : null;
1324
1330
  }
1325
1331
  function oi({ currentTime: e, position: n }) {
1326
- const [o, i] = M(!1), a = S(), c = p(() => a.interactiveMenuElements.length > 0 ? i((C) => !C) : a.onInteractivePinClick(e), [
1332
+ const [o, i] = M(!1), a = S(), c = p(() => a.interactiveMenuElements.length > 0 ? i((g) => !g) : a.onInteractivePinClick(e), [
1327
1333
  a.interactiveMenuElements,
1328
1334
  a.onInteractivePinClick,
1329
1335
  e
1330
- ]), l = ve(null), { refs: u, floatingStyles: m, context: h } = ge({
1336
+ ]), l = ve(null), { refs: u, floatingStyles: m, context: h } = be({
1331
1337
  open: o,
1332
1338
  onOpenChange: i,
1333
1339
  whileElementsMounted: ke,
@@ -1340,7 +1346,7 @@ function oi({ currentTime: e, position: n }) {
1340
1346
  element: l
1341
1347
  })
1342
1348
  ]
1343
- }), b = Le(h), { getReferenceProps: w, getFloatingProps: y } = Pe([b]);
1349
+ }), C = Le(h), { getReferenceProps: w, getFloatingProps: y } = Pe([C]);
1344
1350
  return /* @__PURE__ */ s(ee, { children: [
1345
1351
  /* @__PURE__ */ t(
1346
1352
  "button",
@@ -1399,13 +1405,13 @@ function oi({ currentTime: e, position: n }) {
1399
1405
  className: d.interactivePinMenu,
1400
1406
  ...y(),
1401
1407
  children: [
1402
- a.interactiveMenuElements.map(({ id: C, text: f, onClick: k }) => /* @__PURE__ */ s(
1408
+ a.interactiveMenuElements.map(({ id: g, text: f, onClick: k }) => /* @__PURE__ */ s(
1403
1409
  "button",
1404
1410
  {
1405
1411
  type: "button",
1406
1412
  className: d.interactivePinMenuItem,
1407
1413
  onClick: () => {
1408
- k(C, e), i(!1);
1414
+ k(g, e), i(!1);
1409
1415
  },
1410
1416
  children: [
1411
1417
  /* @__PURE__ */ t(
@@ -1430,10 +1436,10 @@ function oi({ currentTime: e, position: n }) {
1430
1436
  f
1431
1437
  ]
1432
1438
  },
1433
- C
1439
+ g
1434
1440
  )),
1435
1441
  /* @__PURE__ */ t(
1436
- Ne,
1442
+ xe,
1437
1443
  {
1438
1444
  ref: l,
1439
1445
  context: h,
@@ -1496,13 +1502,13 @@ function hi() {
1496
1502
  }
1497
1503
  ),
1498
1504
  /* @__PURE__ */ s(
1499
- D.Root,
1505
+ z.Root,
1500
1506
  {
1501
1507
  className: F.root,
1502
1508
  tabIndex: o.state.interactionsDisabled ? -1 : 0,
1503
1509
  children: [
1504
- /* @__PURE__ */ t(D.Track, { className: F.track, children: /* @__PURE__ */ t(D.TrackFill, { className: F.trackFill }) }),
1505
- /* @__PURE__ */ t(D.Thumb, { className: F.thumb })
1510
+ /* @__PURE__ */ t(z.Track, { className: F.track, children: /* @__PURE__ */ t(z.TrackFill, { className: F.trackFill }) }),
1511
+ /* @__PURE__ */ t(z.Thumb, { className: F.thumb })
1506
1512
  ]
1507
1513
  }
1508
1514
  )
@@ -1615,19 +1621,19 @@ const fe = {
1615
1621
  };
1616
1622
  class _i {
1617
1623
  constructor() {
1618
- x(this, "playerId", "studio-player");
1619
- x(this, "mediaId", null);
1620
- x(this, "data", fe);
1621
- x(this, "time", null);
1622
- x(this, "overrideTime", null);
1623
- x(this, "saveTime", () => {
1624
+ N(this, "playerId", "studio-player");
1625
+ N(this, "mediaId", null);
1626
+ N(this, "data", fe);
1627
+ N(this, "time", null);
1628
+ N(this, "overrideTime", null);
1629
+ N(this, "saveTime", () => {
1624
1630
  if (!this.mediaId) return;
1625
1631
  const n = (this.time ?? 0).toString();
1626
1632
  localStorage.setItem(this.mediaId, n);
1627
1633
  });
1628
- x(this, "saveTimeThrottled", pi(this.saveTime, 1e3));
1634
+ N(this, "saveTimeThrottled", pi(this.saveTime, 1e3));
1629
1635
  // only used for useStudioPlayer hook's state initialization
1630
- x(this, "initializeState", (n) => {
1636
+ N(this, "initializeState", (n) => {
1631
1637
  const o = localStorage.getItem(this.playerId);
1632
1638
  if (_e(n) && n >= 0 && (this.overrideTime = n), o)
1633
1639
  try {
@@ -1643,7 +1649,7 @@ class _i {
1643
1649
  disableCaptionSettings: !1
1644
1650
  };
1645
1651
  });
1646
- x(this, "saveData", (n, o) => {
1652
+ N(this, "saveData", (n, o) => {
1647
1653
  this.data = {
1648
1654
  ...this.data,
1649
1655
  [n]: o
@@ -1740,7 +1746,7 @@ function fi(e, n, o, i) {
1740
1746
  captionsInvertColors: k
1741
1747
  };
1742
1748
  });
1743
- }, [a]), b = p(() => {
1749
+ }, [a]), C = p(() => {
1744
1750
  l((f) => {
1745
1751
  const k = !f.commentsEnabled;
1746
1752
  return a.saveData("comments", k), {
@@ -1758,7 +1764,7 @@ function fi(e, n, o, i) {
1758
1764
  ...f,
1759
1765
  interactionsDisabled: !0
1760
1766
  }));
1761
- }, []), C = Z(() => e ? {
1767
+ }, []), g = Z(() => e ? {
1762
1768
  ...pe,
1763
1769
  toggleFullscreen: []
1764
1770
  } : pe, [e]);
@@ -1773,16 +1779,16 @@ function fi(e, n, o, i) {
1773
1779
  toggleCaptionsInvertColors: h,
1774
1780
  enableInteractions: w,
1775
1781
  disableInteractions: y,
1776
- toggleComments: b,
1782
+ toggleComments: C,
1777
1783
  disableCaptionSettings: o
1778
1784
  },
1779
- shortcuts: C,
1785
+ shortcuts: g,
1780
1786
  storage: a
1781
1787
  };
1782
1788
  }
1783
1789
  const vi = {}, J = () => {
1784
1790
  };
1785
- function Ni({
1791
+ function xi({
1786
1792
  title: e,
1787
1793
  playerRef: n,
1788
1794
  src: o,
@@ -1793,10 +1799,10 @@ function Ni({
1793
1799
  locale: u = "en",
1794
1800
  annotations: m = [],
1795
1801
  quizMarkers: h = [],
1796
- interactive: b = !1,
1802
+ interactive: C = !1,
1797
1803
  onAnnotationClick: w = J,
1798
1804
  onQuizMarkerClick: y = J,
1799
- onInteractivePinClick: C = J,
1805
+ onInteractivePinClick: g = J,
1800
1806
  interactiveMenuElements: f = [],
1801
1807
  darkMode: k = !1,
1802
1808
  autoLoadCaptionSrc: T = "",
@@ -1809,7 +1815,7 @@ function Ni({
1809
1815
  ae ?? !1,
1810
1816
  Q ?? !1,
1811
1817
  Oe
1812
- ), { i18n: ce } = g();
1818
+ ), { i18n: ce } = b();
1813
1819
  return E(() => {
1814
1820
  ce.changeLanguage(u);
1815
1821
  }, [ce, u]), /* @__PURE__ */ t(
@@ -1819,10 +1825,10 @@ function Ni({
1819
1825
  comments: l,
1820
1826
  annotations: m,
1821
1827
  quizMarkers: h,
1822
- interactive: b,
1828
+ interactive: C,
1823
1829
  onAnnotationClick: w,
1824
1830
  onQuizMarkerClick: y,
1825
- onInteractivePinClick: C,
1831
+ onInteractivePinClick: g,
1826
1832
  interactiveMenuElements: f,
1827
1833
  darkMode: k,
1828
1834
  forceComments: ae ?? !1,
@@ -1836,25 +1842,25 @@ function Ni({
1836
1842
  keyShortcuts: Fe,
1837
1843
  playsInline: !0,
1838
1844
  keyDisabled: se.state.interactionsDisabled,
1839
- onTextTracksChange: (K) => {
1840
- const le = K == null ? void 0 : K.findIndex(
1845
+ onTextTracksChange: (D) => {
1846
+ const le = D == null ? void 0 : D.findIndex(
1841
1847
  ($e) => $e.src === T
1842
1848
  );
1843
- le > -1 && (K[le].mode = "showing");
1849
+ le > -1 && (D[le].mode = "showing");
1844
1850
  },
1845
1851
  children: [
1846
1852
  /* @__PURE__ */ t(so, {}),
1847
1853
  /* @__PURE__ */ s(et, { className: vi.mediaProvider, children: [
1848
1854
  /* @__PURE__ */ t(ho, { src: a }),
1849
1855
  /* @__PURE__ */ t(Un, {}),
1850
- /* @__PURE__ */ t(Ct, {}),
1856
+ /* @__PURE__ */ t(gt, {}),
1851
1857
  /* @__PURE__ */ t(wt, { captions: i }),
1852
1858
  /* @__PURE__ */ t(Et, { comments: l }),
1853
- /* @__PURE__ */ t(go, {}),
1859
+ /* @__PURE__ */ t(bo, {}),
1854
1860
  /* @__PURE__ */ t(eo, {})
1855
1861
  ] }),
1856
1862
  /* @__PURE__ */ t(
1857
- Kt,
1863
+ Dt,
1858
1864
  {
1859
1865
  darkMode: k,
1860
1866
  playerRef: n,
@@ -1872,5 +1878,5 @@ export {
1872
1878
  Lt as CAPTION_FONT_SIZE_MULTIPLIERS,
1873
1879
  Se as COMMENT_DURATION,
1874
1880
  B as PLAYBACK_RATES,
1875
- Ni as StudioPlayer
1881
+ xi as StudioPlayer
1876
1882
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/studio-player",
3
- "version": "0.2.7",
3
+ "version": "0.2.9",
4
4
  "private": false,
5
5
  "description": "Next generation media player for Instructure",
6
6
  "module": "./dist/studio-player.es.js",