suada-components 1.18.1 → 1.20.0

package/dist/components/{index-BIuwQ7Ul.js → index-MyuG3QrE.js}

@@ -29998,7 +29998,7 @@ var RecordVoiceOverOutlined$1 = createSvgIcon$1( /*#__PURE__*/require$$2$2.jsx("
   d: "M9 13c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 8c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4m-6 4c.22-.72 3.31-2 6-2 2.7 0 5.8 1.29 6 2zM15.08 7.05c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14"
 }), 'RecordVoiceOverOutlined');
 
-var _templateObject$q, _templateObject2$k, _templateObject3$g, _templateObject4$d, _templateObject5$9, _templateObject6$8, _templateObject7$6, _templateObject8$6, _templateObject9$5, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32;
+var _templateObject$q, _templateObject2$k, _templateObject3$g, _templateObject4$d, _templateObject5$9, _templateObject6$8, _templateObject7$6, _templateObject8$6, _templateObject9$5, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$3, _templateObject15$3, _templateObject16$3, _templateObject17$3, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32;
 // CourseLayout
 dt.span(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral$1([""])));
 var GridItemContentHeader = dt.header(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteral$1(["\n  display: flex;\n  justify-content: space-between;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
@@ -30031,10 +30031,10 @@ var CourseStatusContainer = dt.div(_templateObject13$3 || (_templateObject13$3 =
   var $status = _ref6.$status;
   return !$status ? '#EA382A' : '#00905E';
 });
-dt.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  div {\n    font-size: 13px;\n  }\n"])));
-var TooltipContent = dt.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteral$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  & > :first-child {\n    font-size: 14px;\n    margin-bottom: 5px;\n  }\n  div {\n    font-size: 14px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    & > .tooltip-text {\n      font-size: 12px;\n      margin-top: 5px;\n      text-align: center;\n    }\n  }\n"])));
-var StyledCardBottomContainer = dt.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteral$1(["\n  display: flex;\n  width: 100%;\n  flex-direction: column !important;\n  align-self: flex-end;\n  gap: 10px;\n  padding-bottom: 10px;\n"])));
-var StyledActionsContainer = dt.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteral$1(["\n  display: flex;\n  flex-direction: row !important;\n  width: 100%;\n"])));
+dt.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  div {\n    font-size: 13px;\n  }\n"])));
+var TooltipContent = dt.div(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteral$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  & > :first-child {\n    font-size: 14px;\n    margin-bottom: 5px;\n  }\n  div {\n    font-size: 14px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    & > .tooltip-text {\n      font-size: 12px;\n      margin-top: 5px;\n      text-align: center;\n    }\n  }\n"])));
+var StyledCardBottomContainer = dt.div(_templateObject16$3 || (_templateObject16$3 = _taggedTemplateLiteral$1(["\n  display: flex;\n  width: 100%;\n  flex-direction: column !important;\n  align-self: flex-end;\n  gap: 10px;\n  padding-bottom: 10px;\n"])));
+var StyledActionsContainer = dt.div(_templateObject17$3 || (_templateObject17$3 = _taggedTemplateLiteral$1(["\n  display: flex;\n  flex-direction: row !important;\n  width: 100%;\n"])));
 var StyledActionItem = dt.span(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  height: 14px;\n  cursor: ", ";\n  color: ", ";\n  font-size: 14px;\n  padding-bottom: 10px;\n  width: 100%;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 4px;\n  svg path {\n    fill: ", ";\n    width: 16px;\n    height: 16px;\n  }\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n  &:hover {\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_ref7) {
   var disabled = _ref7.disabled;
   return disabled ? 'default' : 'pointer';
@@ -40677,7 +40677,7 @@ function requireCancel () {
 var CancelExports = /*@__PURE__*/ requireCancel();
 var CancelIcon = /*@__PURE__*/getDefaultExportFromCjs(CancelExports);
 
-var _templateObject$k, _templateObject2$f, _templateObject3$b, _templateObject4$8, _templateObject5$7, _templateObject6$6, _templateObject7$4, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
+var _templateObject$k, _templateObject2$f, _templateObject3$b, _templateObject4$8, _templateObject5$7, _templateObject6$6, _templateObject7$4, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
 dt.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral$1(["\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n  padding: 10px;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-radius: 4px;\n  height: 100%;\n  transition: border 0.2s ease;\n\n  .image_wrapper {\n    position: relative;\n    padding-top: 10px;\n    width: 100px;\n    height: 100px;\n    border-radius: 4px;\n    svg {\n      position: absolute;\n      right: -11px;\n      top: 0px;\n    }\n    img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n\n  .video_wrapper {\n    padding: 5px 10px;\n    background: #eee;\n    margin-top: 10px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    svg {\n      color: red;\n    }\n  }\n\n  .file_wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    box-sizing: border-box;\n    svg {\n      font-size: 20px;\n      color: red;\n      margin-left: 10px;\n    }\n  }\n\n  label {\n    cursor: pointer;\n    display: flex;\n    .MuiSvgIcon-fontSizeLarge {\n      font-size: 5.1875rem;\n    }\n\n    svg {\n      transform: scale(0.8);\n      transition: transform 0.2s ease;\n    }\n  }\n  input {\n    opacity: 0;\n    position: absolute;\n    z-index: -1;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n  }\n\n  &.full {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    header {\n      margin-right: 15px;\n    }\n\n    label {\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n    }\n\n    label svg {\n      transform: scale(1);\n    }\n  }\n\n  &.uploaded {\n    border: 1px solid rgba(0, 0, 0, 0.3);\n\n    header {\n      color: rgba(0, 0, 0, 0.74);\n    }\n\n    label svg {\n      transform: scale(1);\n    }\n  }\n"])));
 dt.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral$1(["\n  position: absolute;\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  background: #fff;\n  border-radius: 4px;\n"])));
 dt.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral$1(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  padding: 0 30px;\n  > div {\n    width: 100%;\n    text-align: center;\n  }\n"])));
@@ -40698,9 +40698,9 @@ var CancelButton = dt.div(_templateObject11$3 || (_templateObject11$3 = _taggedT
 });
 var InputFileContainer = dt.div(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteral$1(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  /* input {\n    opacity: 0;\n    position: absolute;\n    z-index: -1;\n    left: 0;\n    top: 0;\n    overflow: hidden;\n  }\n\n  &label {\n    width: 85%;\n    height: 100%;\n    cursor: pointer;\n  } */\n"])));
 var UploadInput = dt.input(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral$1(["\n  opacity: 0;\n  position: absolute;\n  z-index: -1;\n  left: 0;\n  width: 0;\n  top: 0;\n  overflow: hidden;\n"])));
-dt.div(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  left: 0px;\n  top: -15px;\n  background: #fff;\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.54);\n"])));
-var ImagePlaceholder = dt.div(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral$1(["\n  img {\n    position: relative;\n    width: 72px;\n    height: 48px;\n    border-radius: 4px;\n    padding: 4px;\n    top: 2px;\n  }\n"])));
-var InputLabel = dt.label(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteral$1(["\n  cursor: pointer;\n  color: #fff;\n  background: ", ";\n  font-size: 11px;\n  padding: 9px 6px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref3) {
+dt.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  left: 0px;\n  top: -15px;\n  background: #fff;\n  font-size: 12px;\n  color: rgba(0, 0, 0, 0.54);\n"])));
+var ImagePlaceholder = dt.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteral$1(["\n  img {\n    position: relative;\n    width: 72px;\n    height: 48px;\n    border-radius: 4px;\n    padding: 4px;\n    top: 2px;\n  }\n"])));
+var InputLabel = dt.label(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteral$1(["\n  cursor: pointer;\n  color: #fff;\n  background: ", ";\n  font-size: 11px;\n  padding: 9px 6px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_ref3) {
   var theme = _ref3.theme;
   var _a;
   var primaryColor = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary;
@@ -40709,7 +40709,7 @@ var InputLabel = dt.label(_templateObject16$1 || (_templateObject16$1 = _taggedT
   return 'var(--primary-color, #06c68f)';
 });
 // UploaderButton
-dt.label(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteral$1(["\n  cursor: pointer;\n  color: #fff;\n  background: ", ";\n  font-size: 11px;\n  padding: 4px 6px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n"])), function (_ref4) {
+dt.label(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteral$1(["\n  cursor: pointer;\n  color: #fff;\n  background: ", ";\n  font-size: 11px;\n  padding: 4px 6px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   var _a;
   var primaryColor = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary;
@@ -76987,7 +76987,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.youtube,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerYouTube' */
-	      './YouTube-aCsy9GCc.js'
+	      './YouTube-DAIEadSc.js'
 	    ); }).then(function (n) { return n.YouTube; }))
 	  },
 	  {
@@ -76996,7 +76996,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.soundcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerSoundCloud' */
-	      './SoundCloud-CLTAypO_.js'
+	      './SoundCloud-BhXPdJiG.js'
 	    ); }).then(function (n) { return n.SoundCloud; }))
 	  },
 	  {
@@ -77005,7 +77005,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vimeo,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerVimeo' */
-	      './Vimeo-D3_12JJC.js'
+	      './Vimeo-DvGEL0c6.js'
 	    ); }).then(function (n) { return n.Vimeo; }))
 	  },
 	  {
@@ -77014,7 +77014,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mux,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerMux' */
-	      './Mux-Bp6MFxPb.js'
+	      './Mux-CJzLFb5n.js'
 	    ); }).then(function (n) { return n.Mux; }))
 	  },
 	  {
@@ -77023,7 +77023,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.facebook,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerFacebook' */
-	      './Facebook-D96yZ-Wv.js'
+	      './Facebook-F1hTNyHn.js'
 	    ); }).then(function (n) { return n.Facebook; }))
 	  },
 	  {
@@ -77032,7 +77032,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.streamable,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerStreamable' */
-	      './Streamable-BYw1N66m.js'
+	      './Streamable-B2K7lHBF.js'
 	    ); }).then(function (n) { return n.Streamable; }))
 	  },
 	  {
@@ -77041,7 +77041,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.wistia,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerWistia' */
-	      './Wistia-DyxKLkXI.js'
+	      './Wistia-BuZhl_AZ.js'
 	    ); }).then(function (n) { return n.Wistia; }))
 	  },
 	  {
@@ -77050,7 +77050,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.twitch,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerTwitch' */
-	      './Twitch-BHVmZejB.js'
+	      './Twitch-Ci9mpiwN.js'
 	    ); }).then(function (n) { return n.Twitch; }))
 	  },
 	  {
@@ -77059,7 +77059,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.dailymotion,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerDailyMotion' */
-	      './DailyMotion-Dc8Jt5rL.js'
+	      './DailyMotion-ncf2EGzH.js'
 	    ); }).then(function (n) { return n.DailyMotion; }))
 	  },
 	  {
@@ -77068,7 +77068,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mixcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerMixcloud' */
-	      './Mixcloud-BlY20QI9.js'
+	      './Mixcloud-CQ_ABR83.js'
 	    ); }).then(function (n) { return n.Mixcloud; }))
 	  },
 	  {
@@ -77077,7 +77077,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vidyard,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerVidyard' */
-	      './Vidyard-ClFsw8nL.js'
+	      './Vidyard-CS8k2GVk.js'
 	    ); }).then(function (n) { return n.Vidyard; }))
 	  },
 	  {
@@ -77086,7 +77086,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.kaltura,
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerKaltura' */
-	      './Kaltura-DK-h5jtl.js'
+	      './Kaltura-UmW08K7Z.js'
 	    ); }).then(function (n) { return n.Kaltura; }))
 	  },
 	  {
@@ -77098,7 +77098,7 @@ function requirePlayers () {
 	    },
 	    lazyPlayer: (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	      /* webpackChunkName: 'reactPlayerFilePlayer' */
-	      './FilePlayer-B60YEygK.js'
+	      './FilePlayer-BIUb9xkU.js'
 	    ); }).then(function (n) { return n.FilePlayer; }))
 	  }
 	];
@@ -77919,7 +77919,7 @@ function requireReactPlayer () {
 	var import_Player = __toESM(/*@__PURE__*/ requirePlayer());
 	const Preview = (0, import_utils.lazy)(() => Promise.resolve().then(function () { return require(
 	  /* webpackChunkName: 'reactPlayerPreview' */
-	  './Preview-Ipafps1S.js'
+	  './Preview-BFqTVez2.js'
 	); }).then(function (n) { return n.Preview; }));
 	const IS_BROWSER = typeof window !== "undefined" && window.document && typeof document !== "undefined";
 	const IS_GLOBAL = typeof commonjsGlobal !== "undefined" && commonjsGlobal.window && commonjsGlobal.window.document;
@@ -78128,7 +78128,7 @@ function requireLib () {
 var libExports = /*@__PURE__*/ requireLib();
 var ReactPlayer = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
-var _templateObject$a, _templateObject2$8, _templateObject3$5, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$1;
+var _templateObject$a, _templateObject2$8, _templateObject3$5, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1;
 var StyledVideoPlayerWrapper = dt.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral$1(["\n  cursor: pointer;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > .react-player {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    border-radius: 8px;\n    height: 50%;\n\n    & > video {\n      height: fit-content;\n      width: 100%;\n      object-fit: contain;\n      border-radius: 8px;\n      background-color: var(--neutral-colors-dark);\n    }\n  }\n"])));
 var StyledWrapper = dt.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral$1(["\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  border-radius: 8px;\n  overflow: hidden;\n\n  &::before {\n    content: '';\n    display: block;\n    padding-top: 56.25%;\n  }\n\n  & > ", " {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n"])), StyledVideoPlayerWrapper);
 var StyledPlayerLoader = dt.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: 8px;\n  background: #e7e9ed;\n  display: flex;\n  align-items: center;\n  top: 0;\n  bottom: 0;\n  margin: auto 0;\n  color: var(--neutral-colors-light);\n  justify-content: center;\n  z-index: 5;\n"])));
@@ -78139,6 +78139,19 @@ var StyledSubtitles = dt.div(_templateObject7$2 || (_templateObject7$2 = _tagged
   var $controls = _ref.$controls;
   return $controls ? '60px' : '10px';
 });
+var StyledKeyboardIndicatorContainer = dt.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  ", "\n  z-index: 110;\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 88px;\n  min-height: 72px;\n  padding: 14px 18px;\n  border-radius: 12px;\n  background: rgba(2, 2, 16, 0.62);\n  color: #fff;\n  backdrop-filter: blur(4px);\n"])), function (_ref2) {
+  var $position = _ref2.$position;
+  if ($position === 'center') {
+    return "\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n      ";
+  }
+  if ($position === 'left') {
+    return "\n        top: 50%;\n        left: 24px;\n        transform: translateY(-50%);\n      ";
+  }
+  return "\n      top: 50%;\n      right: 24px;\n      transform: translateY(-50%);\n    ";
+});
+var StyledKeyboardSeekContainer = dt.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral$1(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 1;\n"])));
+var StyledKeyboardVolumeContainer = dt.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n"])));
+var StyledKeyboardVolumeLabel = dt.span(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral$1(["\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 1;\n"])));
 var HLS_SUBTITLE_STYLES = "\n  /* Hide native HLS subtitles completely - comprehensive approach */\n  video::cue {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n  }\n  \n  video::-webkit-media-text-track-display {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n  }\n  \n  video::cue-region {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n  }\n  \n  video::-webkit-media-text-track-container {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n  }\n  \n  /* Target ReactPlayer specifically */\n  .react-player video::cue {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n  }\n  \n  .react-player video::-webkit-media-text-track-display {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n  }\n  \n  .react-player video::cue-region {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n  }\n  \n  .react-player video::-webkit-media-text-track-container {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n  }\n  \n  /* Additional selectors for different browsers */\n  video::-moz-media-text-track-display {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n  }\n  \n  video::-ms-media-text-track-display {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n  }\n  \n  /* Hide any subtitle overlays */\n  .react-player video + div[style*=\"position: absolute\"] {\n    display: none !important;\n  }\n  \n  /* Target HLS video player specifically */\n  .hls-video-player::cue {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n  }\n  \n  .hls-video-player::-webkit-media-text-track-display {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n  }\n  \n  .hls-video-player::-webkit-media-text-track-container {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n  }\n  \n  .hls-video-player::cue-region {\n    display: none !important;\n    visibility: hidden !important;\n    opacity: 0 !important;\n  }\n";
 var injectHLSSubtitleStyles = function injectHLSSubtitleStyles() {
   var addSubtitleStyles = function addSubtitleStyles() {
@@ -78161,14 +78174,14 @@ var injectHLSSubtitleStyles = function injectHLSSubtitleStyles() {
   };
 };
 // Notes functionality styles
-var StyledNoteMarkersOverlay = dt.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  bottom: 45px;\n  left: 5px;\n  right: 5px;\n  height: 6px;\n  z-index: ", ";\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n  overflow: visible;\n\n  ", "\n\n  ", "\n\n  &.controls-visible {\n    opacity: 1 !important;\n  }\n"])), function (props) {
+var StyledNoteMarkersOverlay = dt.div(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  bottom: 45px;\n  left: 5px;\n  right: 5px;\n  height: 6px;\n  z-index: ", ";\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n  overflow: visible;\n\n  ", "\n\n  ", "\n\n  &.controls-visible {\n    opacity: 1 !important;\n  }\n"])), function (props) {
   return props.$isFullscreen ? 2147483646 : 15;
 }, function (props) {
   return props.$isFullscreen ? "\n    position: absolute;\n    left: 5px;\n    right: 5px;\n    bottom: 42px;\n    top: auto;\n    height: 6px;\n    z-index: 2147483646;\n    width: 100%;\n    opacity: 1;\n    visibility: visible;\n  " : '';
 }, function (props) {
   return !props.$isFullscreen ? "\n    ".concat(StyledWrapper, ":hover & {\n      opacity: 1 !important;\n    }\n  ") : '';
 });
-var StyledNoteMarker = dt.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  ", "\n  left: 0;\n  right: 0;\n  bottom: -3px;\n  width: ", ";\n  height: ", ";\n  background-color: #ffd700;\n  border-radius: 50%;\n  cursor: pointer;\n  pointer-events: auto;\n  border: 2px solid #fff;\n  box-shadow: ", ";\n  transition: all 0.2s ease;\n  z-index: ", ";\n\n  &:hover {\n    transform: translateX(-50%) scale(1.2);\n    background-color: #ffed4e;\n    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);\n  }\n"])), function (props) {
+var StyledNoteMarker = dt.div(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  ", "\n  left: 0;\n  right: 0;\n  bottom: -3px;\n  width: ", ";\n  height: ", ";\n  background-color: #ffd700;\n  border-radius: 50%;\n  cursor: pointer;\n  pointer-events: auto;\n  border: 2px solid #fff;\n  box-shadow: ", ";\n  transition: all 0.2s ease;\n  z-index: ", ";\n\n  &:hover {\n    transform: translateX(-50%) scale(1.2);\n    background-color: #ffed4e;\n    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);\n  }\n"])), function (props) {
   return props.$isFullscreen ? "top: auto; bottom: 0; transform: translateX(-50%);" : "bottom: -3px; transform: translateX(-50%);";
 }, function (props) {
   return props.$isFullscreen ? '12px' : '10px';
@@ -78179,12 +78192,12 @@ var StyledNoteMarker = dt.div(_templateObject9$2 || (_templateObject9$2 = _tagge
 }, function (props) {
   return props.$isFullscreen ? 2147483647 : 20;
 });
-var StyledNoteTooltip = dt.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  bottom: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n  background: rgba(0, 0, 0, 0.9);\n  color: white;\n  padding: 8px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n  max-width: 200px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  pointer-events: none;\n  z-index: 2147483647;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border: 4px solid transparent;\n    border-top-color: rgba(0, 0, 0, 0.9);\n  }\n"])));
-var StyledNoteTime = dt.div(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral$1(["\n  font-size: 10px;\n  opacity: 0.8;\n  margin-top: 2px;\n"])));
-dt.div(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ", ";\n  pointer-events: none;\n"])), function (props) {
+var StyledNoteTooltip = dt.div(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  bottom: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n  background: rgba(0, 0, 0, 0.9);\n  color: white;\n  padding: 8px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n  max-width: 200px;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  pointer-events: none;\n  z-index: 2147483647;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border: 4px solid transparent;\n    border-top-color: rgba(0, 0, 0, 0.9);\n  }\n"])));
+var StyledNoteTime = dt.div(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral$1(["\n  font-size: 10px;\n  opacity: 0.8;\n  margin-top: 2px;\n"])));
+dt.div(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: ", ";\n  pointer-events: none;\n"])), function (props) {
   return props.$isFullscreen ? 2147483646 : 999;
 });
-var StyledNoteModal = dt.div(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  bottom: 70px;\n  background: white;\n  border-radius: 16px;\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n  border: 1px solid #e2e8f0;\n  z-index: ", ";\n  width: 320px;\n  height: 270px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  pointer-events: auto;\n\n  ", "\n\n  &::after,\n  &::before {\n    content: '';\n    position: absolute;\n    top: 100%;\n    transform: translateX(-50%);\n    border: 8px solid transparent;\n  }\n\n  &::after {\n    border-top-color: white;\n    z-index: 2;\n  }\n\n  &::before {\n    border-top-color: #e2e8f0;\n    z-index: 1;\n    margin-top: 1px;\n  }\n"])), function (props) {
+var StyledNoteModal = dt.div(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteral$1(["\n  position: absolute;\n  bottom: 70px;\n  background: white;\n  border-radius: 16px;\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n  border: 1px solid #e2e8f0;\n  z-index: ", ";\n  width: 320px;\n  height: 270px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  pointer-events: auto;\n\n  ", "\n\n  &::after,\n  &::before {\n    content: '';\n    position: absolute;\n    top: 100%;\n    transform: translateX(-50%);\n    border: 8px solid transparent;\n  }\n\n  &::after {\n    border-top-color: white;\n    z-index: 2;\n  }\n\n  &::before {\n    border-top-color: #e2e8f0;\n    z-index: 1;\n    margin-top: 1px;\n  }\n"])), function (props) {
   return props.$isFullscreen ? 2147483647 : 1000;
 }, function (props) {
   var position = props.$position || 50;
@@ -84815,9 +84828,14 @@ function usePlayerControls(_ref) {
     _useState14 = _slicedToArray$1(_useState13, 2),
     currentSubtitle = _useState14[0],
     setCurrentSubtitle = _useState14[1];
+  var _useState15 = React.useState(null),
+    _useState16 = _slicedToArray$1(_useState15, 2),
+    keyboardIndicator = _useState16[0],
+    setKeyboardIndicator = _useState16[1];
   var lastSubtitleIndexRef = React.useRef(null);
   var lastPlaybackTimeRef = React.useRef(0);
   var lastCallTimeRef = React.useRef(Date.now());
+  var keyboardIndicatorTimeoutRef = React.useRef(null);
   // Use PiP context instead of local state
   var _usePiP = usePiP(),
     isPiPActive = _usePiP.isPiPActive,
@@ -84897,6 +84915,23 @@ function usePlayerControls(_ref) {
   React.useEffect(function () {
     setStartPlayed(false);
   }, [url]);
+  React.useEffect(function () {
+    var _a;
+    var activeElement = document.activeElement;
+    var isEditableTarget = activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement || activeElement instanceof HTMLElement && activeElement.isContentEditable;
+    if (!isEditableTarget) {
+      (_a = playerContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus({
+        preventScroll: true
+      });
+    }
+  }, [url]);
+  React.useEffect(function () {
+    return function () {
+      if (keyboardIndicatorTimeoutRef.current) {
+        window.clearTimeout(keyboardIndicatorTimeoutRef.current);
+      }
+    };
+  }, []);
   // Cleanup effect to handle component unmounting while in PiP mode
   React.useEffect(function () {
     var currentVideoPlayerRef = videoPlayerRef.current;
@@ -85158,21 +85193,51 @@ function usePlayerControls(_ref) {
       enterPiP(videoElement, pipVideoState);
     }
   };
+  var showKeyboardIndicator = React.useCallback(function (indicator) {
+    setKeyboardIndicator(indicator);
+    if (keyboardIndicatorTimeoutRef.current) {
+      window.clearTimeout(keyboardIndicatorTimeoutRef.current);
+    }
+    keyboardIndicatorTimeoutRef.current = window.setTimeout(function () {
+      setKeyboardIndicator(null);
+    }, 900);
+  }, []);
   var handleKeyDown = React.useCallback(function (event) {
     if ('code' in event) {
       switch (event.code) {
         case 'ArrowLeft':
           event.preventDefault();
-          rewindHandler();
+          if (videoPlayerRef.current) {
+            var current = videoPlayerRef.current.getCurrentTime();
+            videoPlayerRef.current.seekTo(Math.max(current - 15, 0));
+          }
+          showKeyboardIndicator({
+            type: 'seek-backward',
+            position: 'left'
+          });
           break;
         case 'ArrowRight':
           event.preventDefault();
-          handleFastForward();
+          if (videoPlayerRef.current) {
+            var _current = videoPlayerRef.current.getCurrentTime();
+            var _duration = videoPlayerRef.current.getDuration();
+            var nextTime = _current + 15;
+            videoPlayerRef.current.seekTo(_duration ? Math.min(nextTime, _duration) : nextTime);
+          }
+          showKeyboardIndicator({
+            type: 'seek-forward',
+            position: 'right'
+          });
           break;
         case 'ArrowUp':
           event.preventDefault();
           setVideoState(function (prev) {
             var newVolume = Math.min(prev.volume + 0.1, 1);
+            showKeyboardIndicator({
+              type: 'volume-up',
+              position: 'center',
+              volume: newVolume
+            });
             return _objectSpread2$1(_objectSpread2$1({}, prev), {}, {
               volume: newVolume,
               muted: newVolume === 0,
@@ -85184,6 +85249,11 @@ function usePlayerControls(_ref) {
           event.preventDefault();
           setVideoState(function (prev) {
             var newVolume = Math.max(prev.volume - 0.1, 0);
+            showKeyboardIndicator({
+              type: 'volume-down',
+              position: 'center',
+              volume: newVolume
+            });
             return _objectSpread2$1(_objectSpread2$1({}, prev), {}, {
               volume: newVolume,
               muted: newVolume === 0,
@@ -85193,7 +85263,7 @@ function usePlayerControls(_ref) {
           break;
       }
     }
-  }, [rewindHandler, handleFastForward, setVideoState]);
+  }, [setVideoState, showKeyboardIndicator]);
   var handleSpaceKeyDown = React.useCallback(function (event) {
     if ('code' in event) {
       switch (event.code) {
@@ -85252,6 +85322,7 @@ function usePlayerControls(_ref) {
     isControlsActive: isControlsActive,
     currentSubtitle: currentSubtitle,
     setCurrentSubtitle: setCurrentSubtitle,
+    keyboardIndicator: keyboardIndicator,
     playing: isPlaying
   };
 }
@@ -85421,28 +85492,138 @@ var NoteEditModal = function NoteEditModal(_ref) {
 
 var MAX_FULLSCREEN_Z_INDEX = 2147483646;
 var MAX_FULLSCREEN_MARKER_Z_INDEX = 2147483647;
-var VideoPlayer = function VideoPlayer(_ref) {
-  var customStyles = _ref.customStyles,
-    _ref$startTime = _ref.startTime,
-    startTime = _ref$startTime === void 0 ? 0 : _ref$startTime,
-    loading = _ref.loading,
-    setLoading = _ref.setLoading,
-    handleTrackProgress = _ref.handleTrackProgress,
-    url = _ref.url,
-    subtitleUrl = _ref.subtitle,
-    handleNextVideo = _ref.handleNextVideo,
-    handlePreviousVideo = _ref.handlePreviousVideo,
-    isNextVideo = _ref.isNextVideo,
-    isPreviousVideo = _ref.isPreviousVideo,
-    isPlaying = _ref.isPlaying,
-    setIsPlaying = _ref.setIsPlaying,
-    _ref$shouldPlayerBeFo = _ref.shouldPlayerBeFocusedOnSpaceClick,
-    shouldPlayerBeFocusedOnSpaceClick = _ref$shouldPlayerBeFo === void 0 ? false : _ref$shouldPlayerBeFo,
-    showFavorite = _ref.showFavorite,
-    _ref$isFavorite = _ref.isFavorite,
-    isFavorite = _ref$isFavorite === void 0 ? false : _ref$isFavorite,
-    _ref$toggleFavorite = _ref.toggleFavorite,
-    toggleFavorite = _ref$toggleFavorite === void 0 ? /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+var VolumeIndicatorIcon = function VolumeIndicatorIcon(_ref) {
+  var _ref$volume = _ref.volume,
+    volume = _ref$volume === void 0 ? 0 : _ref$volume,
+    isVolumeDown = _ref.isVolumeDown;
+  var percent = Math.round(volume * 100);
+  var isMuted = percent === 0;
+  var isLow = percent > 0 && percent <= 30;
+  var isMedium = percent > 30 && percent <= 70;
+  var isHigh = percent > 70;
+  return require$$2$2.jsxs("svg", {
+    width: '44',
+    height: '44',
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    "aria-hidden": true,
+    children: [require$$2$2.jsx("path", {
+      d: 'M3 9V15H7L12 20V4L7 9H3Z',
+      fill: 'white'
+    }), isMuted && require$$2$2.jsx("path", {
+      d: 'M14 9L20 15M20 9L14 15',
+      stroke: 'white',
+      strokeWidth: '2',
+      strokeLinecap: 'round'
+    }), (isLow || isMedium || isHigh) && require$$2$2.jsx("path", {
+      d: 'M15.8 12C15.8 11.08 15.27 10.28 14.5 9.9V14.1C15.27 13.72 15.8 12.92 15.8 12Z',
+      fill: 'white'
+    }), (isMedium || isHigh) && require$$2$2.jsx("path", {
+      d: 'M17.8 12C17.8 10.23 16.78 8.7 15.3 7.98V9.6C16.1 10.14 16.6 11.02 16.6 12C16.6 12.98 16.1 13.86 15.3 14.4V16.02C16.78 15.3 17.8 13.77 17.8 12Z',
+      fill: 'white'
+    }), isHigh && require$$2$2.jsx("path", {
+      d: 'M14.6 5.4V7.05C16.97 7.83 18.7 9.72 18.7 12C18.7 14.28 16.97 16.17 14.6 16.95V18.6C17.86 17.79 20.2 15.18 20.2 12C20.2 8.82 17.86 6.21 14.6 5.4Z',
+      fill: 'white'
+    }), isVolumeDown ? require$$2$2.jsxs(require$$2$2.Fragment, {
+      children: [require$$2$2.jsx("path", {
+        d: 'M9 12H15',
+        stroke: 'white',
+        strokeWidth: '2',
+        strokeLinecap: 'round'
+      }), require$$2$2.jsx("path", {
+        d: 'M17.6 9.4L20 12L17.6 14.6',
+        stroke: 'white',
+        strokeWidth: '1.6',
+        strokeLinecap: 'round'
+      })]
+    }) : require$$2$2.jsxs(require$$2$2.Fragment, {
+      children: [require$$2$2.jsx("path", {
+        d: 'M9 12H15',
+        stroke: 'white',
+        strokeWidth: '2',
+        strokeLinecap: 'round'
+      }), require$$2$2.jsx("path", {
+        d: 'M12 9V15',
+        stroke: 'white',
+        strokeWidth: '2',
+        strokeLinecap: 'round'
+      }), require$$2$2.jsx("path", {
+        d: 'M17.6 14.6L20 12L17.6 9.4',
+        stroke: 'white',
+        strokeWidth: '1.6',
+        strokeLinecap: 'round'
+      })]
+    })]
+  });
+};
+var KeyboardIndicator = function KeyboardIndicator(_ref2) {
+  var indicator = _ref2.indicator;
+  var _a;
+  if (!indicator) return null;
+  return require$$2$2.jsxs(StyledKeyboardIndicatorContainer, {
+    "$position": indicator.position,
+    children: [(indicator.type === 'volume-up' || indicator.type === 'volume-down') && require$$2$2.jsxs(StyledKeyboardVolumeContainer, {
+      children: [require$$2$2.jsx(VolumeIndicatorIcon, {
+        volume: indicator.volume,
+        isVolumeDown: indicator.type === 'volume-down'
+      }), require$$2$2.jsxs(StyledKeyboardVolumeLabel, {
+        children: [Math.round(((_a = indicator.volume) !== null && _a !== void 0 ? _a : 0) * 100), "%"]
+      })]
+    }), indicator.type === 'seek-backward' && require$$2$2.jsxs(StyledKeyboardSeekContainer, {
+      children: [require$$2$2.jsxs("svg", {
+        width: '34',
+        height: '34',
+        viewBox: '0 0 24 24',
+        fill: 'white',
+        "aria-hidden": true,
+        children: [require$$2$2.jsx("path", {
+          d: 'M15.7 6.3A1 1 0 0 1 17 7.9L12.9 12L17 16.1A1 1 0 1 1 15.6 17.5L10.8 12.7A1 1 0 0 1 10.8 11.3L15.7 6.3Z'
+        }), require$$2$2.jsx("path", {
+          d: 'M11.4 6.3A1 1 0 0 1 12.8 7.7L8.5 12L12.8 16.3A1 1 0 0 1 11.4 17.7L6.4 12.7A1 1 0 0 1 6.4 11.3L11.4 6.3Z'
+        })]
+      }), require$$2$2.jsx("span", {
+        children: "-15s"
+      })]
+    }), indicator.type === 'seek-forward' && require$$2$2.jsxs(StyledKeyboardSeekContainer, {
+      children: [require$$2$2.jsx("span", {
+        children: "+15s"
+      }), require$$2$2.jsxs("svg", {
+        width: '34',
+        height: '34',
+        viewBox: '0 0 24 24',
+        fill: 'white',
+        "aria-hidden": true,
+        children: [require$$2$2.jsx("path", {
+          d: 'M8.3 6.3A1 1 0 0 0 7 7.9L11.1 12L7 16.1A1 1 0 1 0 8.4 17.5L13.2 12.7A1 1 0 0 0 13.2 11.3L8.3 6.3Z'
+        }), require$$2$2.jsx("path", {
+          d: 'M12.6 6.3A1 1 0 0 0 11.2 7.7L15.5 12L11.2 16.3A1 1 0 0 0 12.6 17.7L17.6 12.7A1 1 0 0 0 17.6 11.3L12.6 6.3Z'
+        })]
+      })]
+    })]
+  });
+};
+var VideoPlayer = function VideoPlayer(_ref3) {
+  var customStyles = _ref3.customStyles,
+    _ref3$startTime = _ref3.startTime,
+    startTime = _ref3$startTime === void 0 ? 0 : _ref3$startTime,
+    loading = _ref3.loading,
+    setLoading = _ref3.setLoading,
+    handleTrackProgress = _ref3.handleTrackProgress,
+    url = _ref3.url,
+    subtitleUrl = _ref3.subtitle,
+    handleNextVideo = _ref3.handleNextVideo,
+    handlePreviousVideo = _ref3.handlePreviousVideo,
+    isNextVideo = _ref3.isNextVideo,
+    isPreviousVideo = _ref3.isPreviousVideo,
+    isPlaying = _ref3.isPlaying,
+    setIsPlaying = _ref3.setIsPlaying,
+    _ref3$shouldPlayerBeF = _ref3.shouldPlayerBeFocusedOnSpaceClick,
+    shouldPlayerBeFocusedOnSpaceClick = _ref3$shouldPlayerBeF === void 0 ? false : _ref3$shouldPlayerBeF,
+    showFavorite = _ref3.showFavorite,
+    _ref3$isFavorite = _ref3.isFavorite,
+    isFavorite = _ref3$isFavorite === void 0 ? false : _ref3$isFavorite,
+    _ref3$toggleFavorite = _ref3.toggleFavorite,
+    toggleFavorite = _ref3$toggleFavorite === void 0 ? /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -85450,22 +85631,22 @@ var VideoPlayer = function VideoPlayer(_ref) {
             return _context.stop();
         }
       }, _callee);
-    })) : _ref$toggleFavorite,
-    showDownload = _ref.showDownload,
-    downloadUrl = _ref.downloadUrl,
-    downloadFileName = _ref.downloadFileName,
-    onDownload = _ref.onDownload,
-    _ref$showPictureInPic = _ref.showPictureInPicture,
-    showPictureInPicture = _ref$showPictureInPic === void 0 ? true : _ref$showPictureInPic,
-    notes = _ref.notes,
-    videoDuration = _ref.videoDuration,
-    onNoteClick = _ref.onNoteClick,
-    editingNote = _ref.editingNote,
-    onNoteEdit = _ref.onNoteEdit,
-    onNoteSave = _ref.onNoteSave,
-    onNoteDelete = _ref.onNoteDelete,
-    onNoteCancelEdit = _ref.onNoteCancelEdit,
-    onAddNote = _ref.onAddNote;
+    })) : _ref3$toggleFavorite,
+    showDownload = _ref3.showDownload,
+    downloadUrl = _ref3.downloadUrl,
+    downloadFileName = _ref3.downloadFileName,
+    onDownload = _ref3.onDownload,
+    _ref3$showPictureInPi = _ref3.showPictureInPicture,
+    showPictureInPicture = _ref3$showPictureInPi === void 0 ? true : _ref3$showPictureInPi,
+    notes = _ref3.notes,
+    videoDuration = _ref3.videoDuration,
+    onNoteClick = _ref3.onNoteClick,
+    editingNote = _ref3.editingNote,
+    onNoteEdit = _ref3.onNoteEdit,
+    onNoteSave = _ref3.onNoteSave,
+    onNoteDelete = _ref3.onNoteDelete,
+    onNoteCancelEdit = _ref3.onNoteCancelEdit,
+    onAddNote = _ref3.onAddNote;
   var _a, _b, _c;
   var videoRef = React.useRef(null);
   var overlayRef = React.useRef(null);
@@ -85533,7 +85714,8 @@ var VideoPlayer = function VideoPlayer(_ref) {
     isPiPActive = _usePlayerControls.isPiPActive,
     isControlsActive = _usePlayerControls.isControlsActive,
     currentSubtitle = _usePlayerControls.currentSubtitle,
-    setCurrentSubtitle = _usePlayerControls.setCurrentSubtitle;
+    setCurrentSubtitle = _usePlayerControls.setCurrentSubtitle,
+    keyboardIndicator = _usePlayerControls.keyboardIndicator;
   // Initialize PiP state on component mount/URL change
   React.useEffect(function () {
     // Sync PiP state with actual browser state on mount and URL changes
@@ -85593,7 +85775,7 @@ var VideoPlayer = function VideoPlayer(_ref) {
     }
   }, [onNoteClick, onNoteEdit]);
   var handleSaveNote = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -85625,7 +85807,7 @@ var VideoPlayer = function VideoPlayer(_ref) {
       }, _callee2);
     }));
     return function handleSaveNote() {
-      return _ref3.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
   var handleCancelEdit = function handleCancelEdit() {
@@ -85638,7 +85820,7 @@ var VideoPlayer = function VideoPlayer(_ref) {
     }
   };
   var handleDeleteNote = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
@@ -85663,7 +85845,7 @@ var VideoPlayer = function VideoPlayer(_ref) {
       }, _callee3);
     }));
     return function handleDeleteNote() {
-      return _ref4.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
   // Sync editing state when external editing note changes
@@ -85795,10 +85977,18 @@ var VideoPlayer = function VideoPlayer(_ref) {
       videoRef.current = videoElement;
     }
   };
+  var handleWrapperInteraction = function handleWrapperInteraction() {
+    var _a;
+    (_a = playerContainerRef.current) === null || _a === void 0 ? void 0 : _a.focus({
+      preventScroll: true
+    });
+  };
   return require$$2$2.jsxs(StyledWrapper, {
     ref: playerContainerRef,
     tabIndex: 0,
     onMouseMove: mouseMoveHandler,
+    onMouseDown: handleWrapperInteraction,
+    onTouchStart: handleWrapperInteraction,
     style: customStyles,
     onClick: function onClick(e) {
       return e.stopPropagation();
@@ -85855,6 +86045,8 @@ var VideoPlayer = function VideoPlayer(_ref) {
       }), isSubtitlesChecked && currentSubtitle && require$$2$2.jsx(StyledSubtitles, {
         "$controls": isControlsActive,
         children: currentSubtitle
+      }), require$$2$2.jsx(KeyboardIndicator, {
+        indicator: keyboardIndicator
       })]
     }), require$$2$2.jsx(StyledControlsContainer, {
       ref: controlRef,