@layers-app/editor-video 0.1.4 → 0.1.6

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 (48) hide show
  1. package/dist/context/VideoContext.d.ts +4 -2
  2. package/dist/context/VideoContext.d.ts.map +1 -1
  3. package/dist/factory.d.ts.map +1 -1
  4. package/dist/index.css +363 -181
  5. package/dist/index.d.ts +2 -0
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +1089 -709
  8. package/dist/index.js.map +1 -1
  9. package/dist/node/VideoNode.d.ts.map +1 -1
  10. package/dist/node/utils.d.ts.map +1 -1
  11. package/dist/plugin/VideoPlugin.d.ts.map +1 -1
  12. package/dist/types/index.d.ts +3 -0
  13. package/dist/types/index.d.ts.map +1 -1
  14. package/dist/ui/VideoBlock.d.ts.map +1 -1
  15. package/dist/ui/VideoUploadComponent.d.ts +2 -1
  16. package/dist/ui/VideoUploadComponent.d.ts.map +1 -1
  17. package/dist/ui/components/ActionButtons.d.ts.map +1 -1
  18. package/dist/ui/components/ProgressBar.d.ts +3 -1
  19. package/dist/ui/components/ProgressBar.d.ts.map +1 -1
  20. package/dist/ui/components/VideoCustomControls.d.ts +2 -1
  21. package/dist/ui/components/VideoCustomControls.d.ts.map +1 -1
  22. package/dist/ui/components/VideoIcons.d.ts +8 -1
  23. package/dist/ui/components/VideoIcons.d.ts.map +1 -1
  24. package/dist/ui/components/VideoMenu.d.ts +5 -1
  25. package/dist/ui/components/VideoMenu.d.ts.map +1 -1
  26. package/dist/ui/components/VideoQualityMenu/index.d.ts.map +1 -1
  27. package/dist/ui/components/VideoSettingsMenu/index.d.ts.map +1 -1
  28. package/dist/ui/components/VideoSettingsModal/ChaptersSection.d.ts +4 -5
  29. package/dist/ui/components/VideoSettingsModal/ChaptersSection.d.ts.map +1 -1
  30. package/dist/ui/components/VideoSettingsModal/CoverSection.d.ts +2 -1
  31. package/dist/ui/components/VideoSettingsModal/CoverSection.d.ts.map +1 -1
  32. package/dist/ui/components/VideoSettingsModal/ManualSubtitlesPanel.d.ts.map +1 -1
  33. package/dist/ui/components/VideoSettingsModal/index.d.ts +4 -1
  34. package/dist/ui/components/VideoSettingsModal/index.d.ts.map +1 -1
  35. package/dist/ui/components/VideoSpeedMenu/index.d.ts.map +1 -1
  36. package/dist/ui/components/VideoSubtitlesMenu/index.d.ts.map +1 -1
  37. package/dist/ui/hooks/useVideoTranscoding.d.ts.map +1 -1
  38. package/dist/ui/hooks/useVideoUpload.d.ts.map +1 -1
  39. package/dist/ui/states/ErrorStates.d.ts.map +1 -1
  40. package/dist/ui/states/LinkState.d.ts.map +1 -1
  41. package/dist/ui/states/UploadState.d.ts.map +1 -1
  42. package/dist/ui/states/VideoPlayerState.d.ts +4 -1
  43. package/dist/ui/states/VideoPlayerState.d.ts.map +1 -1
  44. package/dist/ui/utils/videoSettings.d.ts +2 -0
  45. package/dist/ui/utils/videoSettings.d.ts.map +1 -1
  46. package/dist/ui/utils/videoSubtitlesApi.d.ts +1 -0
  47. package/dist/ui/utils/videoSubtitlesApi.d.ts.map +1 -1
  48. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -2,22 +2,22 @@ var __defProp = Object.defineProperty;
2
2
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
3
  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
4
4
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
5
- import { createContext, useState, useRef, useCallback, useMemo, useContext, useEffect, forwardRef, createElement } from "react";
5
+ import { createContext, useState, useRef, useCallback, useMemo, useContext, forwardRef, createElement, useEffect } from "react";
6
6
  import { createCommand, $getNodeByKey, $setSelection, COMMAND_PRIORITY_LOW, DecoratorNode } from "lexical";
7
7
  import { useTranslation } from "react-i18next";
8
- import { Tooltip, ActionIcon, Text, Progress, Paper, Button, TextInput, Loader, Menu, Box, Slider, Flex, Select, Switch, Stack, Group, Textarea, Modal, Divider } from "@mantine/core";
8
+ import { Tooltip, ActionIcon, Text, Progress, Paper, Button, TextInput, Menu, Box, Slider, Flex, Select, Stack, Divider, Group, Textarea, Loader, Modal } from "@mantine/core";
9
9
  import { BlockWithAlignableContents } from "@lexical/react/LexicalBlockWithAlignableContents";
10
10
  import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
11
11
  import { Dropzone as Dropzone$1, IMAGE_MIME_TYPE } from "@mantine/dropzone";
12
12
  import ShakaPlayer from "shaka-player-react";
13
- import { IconDotsVertical, IconCheck, IconChevronLeft, IconChevronRight, IconHelpCircle } from "@tabler/icons-react";
14
13
  import { Carousel } from "@mantine/carousel";
15
14
  const VideoContext = createContext(null);
16
15
  function VideoPluginProvider({
17
16
  config,
18
17
  dependencies,
19
18
  callbacks,
20
- children
19
+ children,
20
+ imperativeHandleRef: editorImperativeHandleRef
21
21
  }) {
22
22
  const [uploadingCount, setUploadingCount] = useState(0);
23
23
  const uploadsRef = useRef(/* @__PURE__ */ new Set());
@@ -80,19 +80,27 @@ function VideoPluginProvider({
80
80
  },
81
81
  [callbacks]
82
82
  );
83
+ const mergedConfig = useMemo(() => {
84
+ if (config.imperativeHandleRef || !editorImperativeHandleRef) return config;
85
+ return {
86
+ ...config,
87
+ imperativeHandleRef: editorImperativeHandleRef
88
+ };
89
+ }, [config, editorImperativeHandleRef]);
83
90
  const value = useMemo(
84
91
  () => ({
85
- config,
92
+ config: mergedConfig,
86
93
  dependencies,
87
94
  callbacks,
88
95
  registerUpload,
89
96
  unregisterUpload,
90
97
  isUploading: uploadingCount > 0,
91
98
  uploadingCount,
92
- reportError
99
+ reportError,
100
+ onTrack: callbacks == null ? void 0 : callbacks.onTrack
93
101
  }),
94
102
  [
95
- config,
103
+ mergedConfig,
96
104
  dependencies,
97
105
  callbacks,
98
106
  registerUpload,
@@ -118,6 +126,56 @@ function useVideoPluginDependencies() {
118
126
  function useVideoPluginConfig() {
119
127
  return useVideoPluginContext().config;
120
128
  }
129
+ const Uo = [["circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M12 8V12.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }], ["path", { d: "M12 15.9883V15.9983", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.8", key: "2" }]], Qt = [["path", { d: "M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }]], un = [["path", { d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }]], SV = [["circle", { cx: "12", cy: "18", r: "3", stroke: "currentColor", strokeWidth: "1.5", key: "0" }], ["path", { d: "M12 15V10", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "1" }], ["path", { d: "M22 13C22 7.47715 17.5228 3 12 3C6.47715 3 2 7.47715 2 13", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "2" }]], tI = [["path", { d: "M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M9 11.7349H15", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "1" }], ["path", { d: "M10.5 15.6543H13.5", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "2" }], ["path", { d: "M3 5.5H21M16.0555 5.5L15.3729 4.09173C14.9194 3.15626 14.6926 2.68852 14.3015 2.39681C14.2148 2.3321 14.1229 2.27454 14.0268 2.2247C13.5937 2 13.0739 2 12.0343 2C10.9686 2 10.4358 2 9.99549 2.23412C9.89791 2.28601 9.80479 2.3459 9.7171 2.41317C9.32145 2.7167 9.10044 3.20155 8.65842 4.17126L8.05273 5.5", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "3" }]], qm = [["path", { d: "M19 14.0052V10.6606C19 9.84276 19 9.43383 18.8478 9.06613C18.6955 8.69843 18.4065 8.40927 17.8284 7.83096L13.0919 3.09236C12.593 2.59325 12.3436 2.3437 12.0345 2.19583C11.9702 2.16508 11.9044 2.13778 11.8372 2.11406C11.5141 2 11.1614 2 10.4558 2C7.21082 2 5.58831 2 4.48933 2.88646C4.26731 3.06554 4.06508 3.26787 3.88607 3.48998C3 4.58943 3 6.21265 3 9.45908V14.0052C3 17.7781 3 19.6645 4.17157 20.8366C5.11466 21.7801 6.52043 21.9641 9 22M12 2.50022V3.00043C12 5.83009 12 7.24492 12.8787 8.12398C13.7574 9.00304 15.1716 9.00304 18 9.00304H18.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M18 19.5L19.4453 20.4635C20.1297 20.9198 20.4719 21.1479 20.7359 21.0066C21 20.8653 21 20.454 21 19.6315V18.3685C21 17.546 21 17.1347 20.7359 16.9934C20.4719 16.8521 20.1297 17.0802 19.4453 17.5365L18 18.5M18 19.5V18.5M18 19.5C18 20.4346 18 20.9019 17.799 21.25C17.6674 21.478 17.478 21.6674 17.25 21.799C16.9019 22 16.4346 22 15.5 22H15C13.5858 22 12.8787 22 12.4393 21.5607C12 21.1213 12 20.4142 12 19C12 17.5858 12 16.8787 12.4393 16.4393C12.8787 16 13.5858 16 15 16H15.5C16.4346 16 16.9019 16 17.25 16.201C17.478 16.3326 17.6674 16.522 17.799 16.75C18 17.0981 18 17.5654 18 18.5", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }]], Lf = [["path", { d: "M15.5 21C16.8956 21 17.5933 21 18.1611 20.8278C19.4395 20.44 20.44 19.4395 20.8278 18.1611C21 17.5933 21 16.8956 21 15.5M21 8.5C21 7.10444 21 6.40666 20.8278 5.83886C20.44 4.56046 19.4395 3.56004 18.1611 3.17224C17.5933 3 16.8956 3 15.5 3M8.5 21C7.10444 21 6.40666 21 5.83886 20.8278C4.56046 20.44 3.56004 19.4395 3.17224 18.1611C3 17.5933 3 16.8956 3 15.5M3 8.5C3 7.10444 3 6.40666 3.17224 5.83886C3.56004 4.56046 4.56046 3.56004 5.83886 3.17224C6.40666 3 7.10444 3 8.5 3", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }]], yR = [["circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M9.5 9.5C9.5 8.11929 10.6193 7 12 7C13.3807 7 14.5 8.11929 14.5 9.5C14.5 10.3569 14.0689 11.1131 13.4117 11.5636C12.7283 12.0319 12 12.6716 12 13.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }], ["path", { d: "M12.0001 17H12.009", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.8", key: "2" }]], LD = [["path", { d: "M3 16L7.46967 11.5303C7.80923 11.1908 8.26978 11 8.75 11C9.23022 11 9.69077 11.1908 10.0303 11.5303L14 15.5M15.5 17L14 15.5M21 16L18.5303 13.5303C18.1908 13.1908 17.7302 13 17.25 13C16.7698 13 16.3092 13.1908 15.9697 13.5303L14 15.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M15.5 8C15.7761 8 16 7.77614 16 7.5C16 7.22386 15.7761 7 15.5 7M15.5 8C15.2239 8 15 7.77614 15 7.5C15 7.22386 15.2239 7 15.5 7M15.5 8V7", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }], ["path", { d: "M3.69797 19.7472C2.5 18.3446 2.5 16.2297 2.5 12C2.5 7.77027 2.5 5.6554 3.69797 4.25276C3.86808 4.05358 4.05358 3.86808 4.25276 3.69797C5.6554 2.5 7.77027 2.5 12 2.5C16.2297 2.5 18.3446 2.5 19.7472 3.69797C19.9464 3.86808 20.1319 4.05358 20.302 4.25276C21.5 5.6554 21.5 7.77027 21.5 12C21.5 16.2297 21.5 18.3446 20.302 19.7472C20.1319 19.9464 19.9464 20.1319 19.7472 20.302C18.3446 21.5 16.2297 21.5 12 21.5C7.77027 21.5 5.6554 21.5 4.25276 20.302C4.05358 20.1319 3.86808 19.9464 3.69797 19.7472Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }]], BQ = [["path", { d: "M11.9967 11.5C12.549 11.5 12.9967 11.9477 12.9967 12.5C12.9967 13.0523 12.549 13.5 11.9967 13.5C11.4444 13.5 10.9967 13.0523 10.9967 12.5C10.9967 11.9477 11.4444 11.5 11.9967 11.5Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M11.9967 5.5C12.549 5.5 12.9967 5.94772 12.9967 6.5C12.9967 7.05228 12.549 7.5 11.9967 7.5C11.4444 7.5 10.9967 7.05228 10.9967 6.5C10.9967 5.94772 11.4444 5.5 11.9967 5.5Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }], ["path", { d: "M11.9967 17.5C12.549 17.5 12.9967 17.9477 12.9967 18.5C12.9967 19.0523 12.549 19.5 11.9967 19.5C11.4444 19.5 10.9967 19.0523 10.9967 18.5C10.9967 17.9477 11.4444 17.5 11.9967 17.5Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }]], OJ = [["path", { d: "M18 6L12 12M12 12L6 18M12 12L18 18M12 12L6 6", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }]], h_ = [["path", { d: "M4 7C4 5.58579 4 4.87868 4.43934 4.43934C4.87868 4 5.58579 4 7 4C8.41421 4 9.12132 4 9.56066 4.43934C10 4.87868 10 5.58579 10 7V17C10 18.4142 10 19.1213 9.56066 19.5607C9.12132 20 8.41421 20 7 20C5.58579 20 4.87868 20 4.43934 19.5607C4 19.1213 4 18.4142 4 17V7Z", stroke: "currentColor", strokeWidth: "1.5", key: "0" }], ["path", { d: "M14 7C14 5.58579 14 4.87868 14.4393 4.43934C14.8787 4 15.5858 4 17 4C18.4142 4 19.1213 4 19.5607 4.43934C20 4.87868 20 5.58579 20 7V17C20 18.4142 20 19.1213 19.5607 19.5607C19.1213 20 18.4142 20 17 20C15.5858 20 14.8787 20 14.4393 19.5607C14 19.1213 14 18.4142 14 17V7Z", stroke: "currentColor", strokeWidth: "1.5", key: "1" }]], y1 = [["path", { d: "M11.5 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C21.947 6.29018 21.9976 8.05974 21.9999 11.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M20.5 14H15.5C14.6716 14 14 14.6716 14 15.5V18.5C14 19.3284 14.6716 20 15.5 20H20.5C21.3284 20 22 19.3284 22 18.5V15.5C22 14.6716 21.3284 14 20.5 14Z", stroke: "currentColor", strokeWidth: "1.5", key: "1" }], ["path", { d: "M11 9.5V12C11.0475 12.5744 10.6034 13.0238 10 13H7.5M6 8L10 12", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }]], c2 = [["path", { d: "M18.8906 12.846C18.5371 14.189 16.8667 15.138 13.5257 17.0361C10.296 18.8709 8.6812 19.7884 7.37983 19.4196C6.8418 19.2671 6.35159 18.9776 5.95624 18.5787C5 17.6139 5 15.7426 5 12C5 8.2574 5 6.3861 5.95624 5.42132C6.35159 5.02245 6.8418 4.73288 7.37983 4.58042C8.6812 4.21165 10.296 5.12907 13.5257 6.96393C16.8667 8.86197 18.5371 9.811 18.8906 11.154C19.0365 11.7084 19.0365 12.2916 18.8906 12.846Z", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }]], u0 = [["path", { d: "M21.3175 7.14139L20.8239 6.28479C20.4506 5.63696 20.264 5.31305 19.9464 5.18388C19.6288 5.05472 19.2696 5.15664 18.5513 5.36048L17.3311 5.70418C16.8725 5.80994 16.3913 5.74994 15.9726 5.53479L15.6357 5.34042C15.2766 5.11043 15.0004 4.77133 14.8475 4.37274L14.5136 3.37536C14.294 2.71534 14.1842 2.38533 13.9228 2.19657C13.6615 2.00781 13.3143 2.00781 12.6199 2.00781H11.5051C10.8108 2.00781 10.4636 2.00781 10.2022 2.19657C9.94085 2.38533 9.83106 2.71534 9.61149 3.37536L9.27753 4.37274C9.12465 4.77133 8.84845 5.11043 8.48937 5.34042L8.15249 5.53479C7.73374 5.74994 7.25259 5.80994 6.79398 5.70418L5.57375 5.36048C4.85541 5.15664 4.49625 5.05472 4.17867 5.18388C3.86109 5.31305 3.67445 5.63696 3.30115 6.28479L2.80757 7.14139C2.45766 7.74864 2.2827 8.05227 2.31666 8.37549C2.35061 8.69871 2.58483 8.95918 3.05326 9.48012L4.0843 10.6328C4.3363 10.9518 4.51521 11.5078 4.51521 12.0077C4.51521 12.5078 4.33636 13.0636 4.08433 13.3827L3.05326 14.5354C2.58483 15.0564 2.35062 15.3168 2.31666 15.6401C2.2827 15.9633 2.45766 16.2669 2.80757 16.8741L3.30114 17.7307C3.67443 18.3785 3.86109 18.7025 4.17867 18.8316C4.49625 18.9608 4.85542 18.8589 5.57377 18.655L6.79394 18.3113C7.25263 18.2055 7.73387 18.2656 8.15267 18.4808L8.4895 18.6752C8.84851 18.9052 9.12464 19.2442 9.2775 19.6428L9.61149 20.6403C9.83106 21.3003 9.94085 21.6303 10.2022 21.8191C10.4636 22.0078 10.8108 22.0078 11.5051 22.0078H12.6199C13.3143 22.0078 13.6615 22.0078 13.9228 21.8191C14.1842 21.6303 14.294 21.3003 14.5136 20.6403L14.8476 19.6428C15.0004 19.2442 15.2765 18.9052 15.6356 18.6752L15.9724 18.4808C16.3912 18.2656 16.8724 18.2055 17.3311 18.3113L18.5513 18.655C19.2696 18.8589 19.6288 18.9608 19.9464 18.8316C20.264 18.7025 20.4506 18.3785 20.8239 17.7307L21.3175 16.8741C21.6674 16.2669 21.8423 15.9633 21.8084 15.6401C21.7744 15.3168 21.5402 15.0564 21.0718 14.5354L20.0407 13.3827C19.7887 13.0636 19.6098 12.5078 19.6098 12.0077C19.6098 11.5078 19.7888 10.9518 20.0407 10.6328L21.0718 9.48012C21.5402 8.95918 21.7744 8.69871 21.8084 8.37549C21.8423 8.05227 21.6674 7.74864 21.3175 7.14139Z", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M15.5195 12C15.5195 13.933 13.9525 15.5 12.0195 15.5C10.0865 15.5 8.51953 13.933 8.51953 12C8.51953 10.067 10.0865 8.5 12.0195 8.5C13.9525 8.5 15.5195 10.067 15.5195 12Z", stroke: "currentColor", strokeWidth: "1.5", key: "1" }]], h0 = [["path", { d: "M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M8.5 10C7.67157 10 7 9.32843 7 8.5C7 7.67157 7.67157 7 8.5 7C9.32843 7 10 7.67157 10 8.5C10 9.32843 9.32843 10 8.5 10Z", stroke: "currentColor", strokeWidth: "1.5", key: "1" }], ["path", { d: "M15.5 17C16.3284 17 17 16.3284 17 15.5C17 14.6716 16.3284 14 15.5 14C14.6716 14 14 14.6716 14 15.5C14 16.3284 14.6716 17 15.5 17Z", stroke: "currentColor", strokeWidth: "1.5", key: "2" }], ["path", { d: "M10 8.5L17 8.5", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "3" }], ["path", { d: "M14 15.5L7 15.5", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "4" }]], Qor = [["path", { d: "M3.99963 5.00055L9.99963 5.00031", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M12.9996 5.00031L19.9996 5.00031", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "1" }], ["path", { d: "M15.9996 9.00031L15.9996 15.0003", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "2" }], ["path", { d: "M9.99963 2.00031L9.99963 8.00031", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "3" }], ["path", { d: "M11.9996 16.0003L11.9996 22.0003", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "4" }], ["path", { d: "M15.9996 12.0001L19.9996 12.0003", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "5" }], ["path", { d: "M3.99963 12.0005L12.9996 12.0003", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "6" }], ["path", { d: "M11.9996 19.0003L19.9996 19.0003", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "7" }], ["path", { d: "M3.99963 19.0005L8.99963 19.0003", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "8" }]], akr = [["path", { d: "M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z", stroke: "currentColor", strokeWidth: "1.5", key: "0" }], ["path", { d: "M18 18H10", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }], ["path", { d: "M18 14H15M12 14H10", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }]], Aur = [["path", { d: "M5 14L8.5 17.5L19 6.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }]], kMr = [["path", { d: "M14 14.8135V9.18646C14 6.04126 14 4.46866 13.0747 4.0773C12.1494 3.68593 11.0603 4.79793 8.88232 7.02192C7.75439 8.17365 7.11085 8.42869 5.50604 8.42869C4.10257 8.42869 3.40084 8.42869 2.89675 8.77262C1.85035 9.48655 2.00852 10.882 2.00852 12C2.00852 13.118 1.85035 14.5134 2.89675 15.2274C3.40084 15.5713 4.10257 15.5713 5.50604 15.5713C7.11085 15.5713 7.75439 15.8264 8.88232 16.9781C11.0603 19.2021 12.1494 20.3141 13.0747 19.9227C14 19.5313 14 17.9587 14 14.8135Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M17 9C17.6254 9.81968 18 10.8634 18 12C18 13.1366 17.6254 14.1803 17 15", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }], ["path", { d: "M20 7C21.2508 8.36613 22 10.1057 22 12C22 13.8943 21.2508 15.6339 20 17", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }]], aMr = [["path", { d: "M22 22L2 2", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M17 10C17.6296 10.7667 18 11.7054 18 12.7195C18 13.1635 17.929 13.593 17.7963 14", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }], ["path", { d: "M20 8C21.2508 9.22951 22 10.7952 22 12.5C22 13.9164 21.4829 15.2367 20.5906 16.348", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }], ["path", { d: "M14 14C14 17.1452 14 19.5313 13.074 19.9227C12.1481 20.3141 11.0583 19.2021 8.8787 16.9781C7.7499 15.8264 7.106 15.5713 5.5 15.5713C4.3879 15.5713 3.02749 15.7187 2.33706 14.6643C2 14.1496 2 13.4331 2 12C2 10.5669 2 9.85038 2.33706 9.33566C3.02749 8.28131 4.3879 8.42869 5.5 8.42869C6.60725 8.42869 7.3569 8.43869 7.96 7.96M14 9.5C14 6.3548 14.026 4.46866 13.1 4.0773C12.3292 3.75147 11.5323 4.46765 10 6", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "3" }]];
130
+ const defaultAttributes = {
131
+ xmlns: "http://www.w3.org/2000/svg",
132
+ width: 24,
133
+ height: 24,
134
+ viewBox: "0 0 24 24",
135
+ fill: "none"
136
+ };
137
+ const HugeiconsIcon = forwardRef(({ color = "currentColor", size = 24, strokeWidth, absoluteStrokeWidth = false, className = "", altIcon, showAlt = false, icon, primaryColor, secondaryColor, disableSecondaryOpacity = false, ...rest }, ref) => {
138
+ const calculatedStrokeWidth = strokeWidth !== void 0 ? absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth : void 0;
139
+ const strokeProps = calculatedStrokeWidth !== void 0 ? {
140
+ strokeWidth: calculatedStrokeWidth,
141
+ stroke: "currentColor"
142
+ } : {};
143
+ const elementProps = {
144
+ ref,
145
+ ...defaultAttributes,
146
+ width: size,
147
+ height: size,
148
+ color: primaryColor || color,
149
+ className,
150
+ ...strokeProps,
151
+ ...rest
152
+ };
153
+ const currentIcon = showAlt && altIcon ? altIcon : icon;
154
+ const svgChildren = [...currentIcon].sort(([, a], [, b]) => {
155
+ const hasOpacityA = a.opacity !== void 0;
156
+ const hasOpacityB = b.opacity !== void 0;
157
+ return hasOpacityB ? 1 : hasOpacityA ? -1 : 0;
158
+ }).map(([tag, attrs]) => {
159
+ const isSecondaryPath = attrs.opacity !== void 0;
160
+ const pathOpacity = isSecondaryPath && !disableSecondaryOpacity ? attrs.opacity : void 0;
161
+ const fillProps = secondaryColor ? {
162
+ ...attrs.stroke !== void 0 ? {
163
+ stroke: isSecondaryPath ? secondaryColor : primaryColor || color
164
+ } : {
165
+ fill: isSecondaryPath ? secondaryColor : primaryColor || color
166
+ }
167
+ } : {};
168
+ return createElement(tag, {
169
+ ...attrs,
170
+ ...strokeProps,
171
+ ...fillProps,
172
+ opacity: pathOpacity,
173
+ key: attrs.key
174
+ });
175
+ });
176
+ return createElement("svg", elementProps, svgChildren);
177
+ });
178
+ HugeiconsIcon.displayName = "HugeiconsIcon";
121
179
  const INSERT_VIDEO_COMMAND = createCommand(
122
180
  "INSERT_VIDEO_COMMAND"
123
181
  );
@@ -155,6 +213,12 @@ function parseVideoURL(url, isLink = false) {
155
213
  id: url
156
214
  };
157
215
  }
216
+ const uuidMatch = url.match(
217
+ /([0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})/i
218
+ );
219
+ if (uuidMatch) {
220
+ return { platform: "download", id: uuidMatch[1] };
221
+ }
158
222
  const id = url.split("/").pop();
159
223
  if (id) {
160
224
  return { platform: "download", id };
@@ -167,9 +231,11 @@ function getVideoIframeUrl(platform, id) {
167
231
  case "youtube":
168
232
  url = `https://www.youtube-nocookie.com/embed/${id}`;
169
233
  break;
170
- case "download":
171
- url = id;
234
+ case "download": {
235
+ const isUuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
236
+ url = isUuid.test(id) ? `/v1/vod/${id}/master.m3u8` : id;
172
237
  break;
238
+ }
173
239
  case "vk":
174
240
  const ids = id.split("-");
175
241
  url = `https://vk.com/video_ext.php?oid=-${ids[0]}&id=${ids[1]}`;
@@ -311,7 +377,7 @@ function StarsAnimation({ size = 32 }) {
311
377
  "path",
312
378
  {
313
379
  d: "M28.3337 14.444C28.3334 14.0149 27.9856 13.6669 27.5563 13.6666C27.3116 13.6666 27.0808 13.782 26.9339 13.9778L23.667 18.332V20.3333L26.9339 24.6888C27.0808 24.8846 27.3117 25 27.5563 25C27.9856 24.9997 28.3334 24.6517 28.3337 24.2226V14.444ZM30.3337 24.2226C30.3334 25.7563 29.09 26.9997 27.5563 27C26.7913 27 26.0643 26.6853 25.5433 26.138L25.3337 25.8893L21.8675 21.2669C21.7377 21.0938 21.667 20.883 21.667 20.6666V18C21.667 17.7836 21.7377 17.5728 21.8675 17.3997L25.3337 12.7773L25.5433 12.5286C26.0643 11.9813 26.7913 11.6666 27.5563 11.6666C29.09 11.6669 30.3334 12.9103 30.3337 14.444V24.2226Z",
314
- fill: "black"
380
+ fill: "currentColor"
315
381
  }
316
382
  ),
317
383
  /* @__PURE__ */ jsx(
@@ -326,7 +392,7 @@ function StarsAnimation({ size = 32 }) {
326
392
  "path",
327
393
  {
328
394
  d: "M1.6665 19.1634C1.6665 16.9963 1.66552 15.2828 1.82536 13.9303C1.98784 12.5557 2.32831 11.4237 3.104 10.4785C3.36704 10.158 3.66108 9.86395 3.98161 9.60086C4.88967 8.85562 5.97067 8.51046 7.27327 8.34045C7.82065 8.26937 8.32162 8.65631 8.39307 9.20373C8.46429 9.7512 8.07858 10.2534 7.53109 10.3248C6.42818 10.4688 5.76031 10.7286 5.25114 11.1464C5.03175 11.3265 4.82966 11.5273 4.64958 11.7467C4.21474 12.2766 3.9512 12.9788 3.81104 14.1647C3.66826 15.3726 3.6665 16.9472 3.6665 19.1634C3.6665 21.3779 3.6677 22.9977 3.81104 24.2506C3.95301 25.4913 4.22137 26.2274 4.64958 26.7493C4.82978 26.9688 5.03186 27.1696 5.25114 27.3496C5.78094 27.7843 6.4823 28.0492 7.66781 28.1894C8.87569 28.3322 10.4504 28.3339 12.6665 28.3339C14.8826 28.3339 16.4573 28.3322 17.6652 28.1894C18.8508 28.0492 19.5521 27.7843 20.0819 27.3496C20.3011 27.1697 20.5033 26.9688 20.6834 26.7493C21.1182 26.2195 21.3818 25.5171 21.522 24.3313C21.6647 23.1236 21.6665 21.5496 21.6665 19.3339C21.6665 16.3651 21.6585 14.5741 21.3423 13.3144C21.2078 12.7788 21.5333 12.2355 22.0688 12.1009C22.6045 11.9664 23.1479 12.2918 23.2824 12.8274C23.6739 14.3871 23.6665 16.4847 23.6665 19.3339C23.6665 21.5009 23.6675 23.2146 23.5076 24.567C23.3452 25.9412 23.0045 27.0725 22.229 28.0175C21.966 28.338 21.6724 28.6331 21.3514 28.8964C20.4062 29.6721 19.2742 30.0126 17.8996 30.1751C16.547 30.3349 14.8336 30.3339 12.6665 30.3339C10.4994 30.3339 8.78597 30.3349 7.43343 30.1751C6.05888 30.0126 4.92684 29.6721 3.98161 28.8964C3.66082 28.6332 3.36705 28.338 3.104 28.0175C2.32195 27.0644 1.98474 25.8816 1.82406 24.4772C1.66477 23.0846 1.6665 21.3316 1.6665 19.1634Z",
329
- fill: "black"
395
+ fill: "currentColor"
330
396
  }
331
397
  ),
332
398
  /* @__PURE__ */ jsx(
@@ -335,7 +401,7 @@ function StarsAnimation({ size = 32 }) {
335
401
  className: "stars-animation__star stars-animation__star--b",
336
402
  opacity: "0.5",
337
403
  d: "M20.1611 3.07952C20.2736 2.529 21.0601 2.529 21.1727 3.07952C21.4212 4.29541 22.3715 5.24561 23.5873 5.49413C24.1379 5.60666 24.1379 6.39325 23.5873 6.50578C22.3715 6.7543 21.4212 7.7045 21.1727 8.9204C21.0601 9.47092 20.2736 9.47092 20.1611 8.9204C19.9125 7.7045 18.9624 6.7543 17.7464 6.50578C17.1959 6.39325 17.1959 5.60666 17.7464 5.49413C18.9624 5.24561 19.9125 4.29541 20.1611 3.07952Z",
338
- fill: "black"
404
+ fill: "currentColor"
339
405
  }
340
406
  )
341
407
  ]
@@ -725,6 +791,7 @@ function useVideoTranscoding({
725
791
  const procStallReportedRef = useRef(false);
726
792
  const analysisCompletedRef = useRef(false);
727
793
  const conversionTriggeredRef = useRef(false);
794
+ const maxPercentRef = useRef(0);
728
795
  const onAnalysisCompleteRef = useRef(onAnalysisComplete);
729
796
  const onConversionCompleteRef = useRef(onConversionComplete);
730
797
  const onErrorRef = useRef(onError);
@@ -793,10 +860,12 @@ function useVideoTranscoding({
793
860
  stalledMs: now - lastProcChangeAtRef.current
794
861
  });
795
862
  }
863
+ const monotonicPercent = Math.max(maxPercentRef.current, percent);
864
+ maxPercentRef.current = monotonicPercent;
796
865
  setTranscodingProgress({
797
- percent,
866
+ percent: monotonicPercent,
798
867
  stage,
799
- remaining: percent < 100 ? Math.ceil((100 - percent) / 5) : void 0
868
+ remaining: monotonicPercent < 100 ? Math.ceil((100 - monotonicPercent) / 5) : void 0
800
869
  });
801
870
  }
802
871
  }, [isTranscoding, isPaused, status]);
@@ -808,6 +877,7 @@ function useVideoTranscoding({
808
877
  pausedRef.current = false;
809
878
  setIsPaused(false);
810
879
  analysisCompletedRef.current = false;
880
+ maxPercentRef.current = 0;
811
881
  setTranscodingProgress({
812
882
  percent: 0,
813
883
  stage: "analysis",
@@ -841,6 +911,7 @@ function useVideoTranscoding({
841
911
  setIsTranscoding(false);
842
912
  setIsPaused(false);
843
913
  pausedRef.current = false;
914
+ maxPercentRef.current = 0;
844
915
  setTranscodingProgress({
845
916
  percent: 0,
846
917
  stage: "analysis",
@@ -883,6 +954,7 @@ function useCancelUpload() {
883
954
  }
884
955
  const DEFAULT_CHUNK_SIZE = 8 * 1024 * 1024;
885
956
  const STALL_TIMEOUT_MS = 3e4;
957
+ const MAX_CONSECUTIVE_CONFLICTS = 3;
886
958
  function getBaseUrl() {
887
959
  return "";
888
960
  }
@@ -1000,13 +1072,17 @@ function useVideoUpload({
1000
1072
  startedAt: 0,
1001
1073
  isPaused: false,
1002
1074
  isPausing: false,
1003
- currentXhr: null
1075
+ currentXhr: null,
1076
+ uploadSession: 0
1004
1077
  });
1005
1078
  const progressIntervalRef = useRef(
1006
1079
  null
1007
1080
  );
1008
1081
  const speedHistoryRef = useRef([]);
1009
- const MAX_SPEED_HISTORY = 5;
1082
+ const lastDisplayedRemainingRef = useRef(0);
1083
+ const MAX_SPEED_HISTORY = 20;
1084
+ const EMA_ALPHA = 0.15;
1085
+ const emaSpeedRef = useRef(null);
1010
1086
  const calculateSpeed = useCallback(
1011
1087
  (uploaded, total, now) => {
1012
1088
  const state = uploadStateRef.current;
@@ -1014,21 +1090,36 @@ function useVideoUpload({
1014
1090
  state.lastTime = now;
1015
1091
  state.lastBytes = uploaded;
1016
1092
  speedHistoryRef.current = [];
1093
+ emaSpeedRef.current = null;
1094
+ lastDisplayedRemainingRef.current = 0;
1017
1095
  return { speed: 0, remaining: 0 };
1018
1096
  }
1019
1097
  const timeDiff = (now - state.lastTime) / 1e3;
1020
1098
  const uploadedDiff = uploaded - state.lastBytes;
1021
1099
  if (timeDiff > 0 && !state.isPaused) {
1022
- const speed = uploadedDiff / timeDiff;
1023
- speedHistoryRef.current.push(speed);
1100
+ const instantSpeed = Math.max(0, uploadedDiff / timeDiff);
1101
+ speedHistoryRef.current.push(instantSpeed);
1024
1102
  if (speedHistoryRef.current.length > MAX_SPEED_HISTORY) {
1025
1103
  speedHistoryRef.current.shift();
1026
1104
  }
1027
- const avgSpeed = speedHistoryRef.current.length > 0 ? speedHistoryRef.current.reduce((a, b) => a + b, 0) / speedHistoryRef.current.length : speed;
1105
+ if (emaSpeedRef.current === null) {
1106
+ emaSpeedRef.current = instantSpeed;
1107
+ } else {
1108
+ emaSpeedRef.current = EMA_ALPHA * instantSpeed + (1 - EMA_ALPHA) * emaSpeedRef.current;
1109
+ }
1110
+ const smoothSpeed = emaSpeedRef.current;
1028
1111
  state.lastTime = now;
1029
1112
  state.lastBytes = uploaded;
1030
- const remaining = total > uploaded && avgSpeed > 0 ? Math.ceil((total - uploaded) / avgSpeed) : 0;
1031
- return { speed: avgSpeed, remaining };
1113
+ const rawRemaining = total > uploaded && smoothSpeed > 0 ? Math.ceil((total - uploaded) / smoothSpeed) : 0;
1114
+ const prev = lastDisplayedRemainingRef.current;
1115
+ let displayRemaining;
1116
+ if (prev === 0 || rawRemaining <= prev) {
1117
+ displayRemaining = rawRemaining;
1118
+ } else {
1119
+ displayRemaining = Math.min(rawRemaining, prev + 1);
1120
+ }
1121
+ lastDisplayedRemainingRef.current = displayRemaining;
1122
+ return { speed: smoothSpeed, remaining: displayRemaining };
1032
1123
  }
1033
1124
  if (state.isPaused && speedHistoryRef.current.length > 0) {
1034
1125
  const lastSpeed = speedHistoryRef.current[speedHistoryRef.current.length - 1];
@@ -1077,7 +1168,9 @@ function useVideoUpload({
1077
1168
  if (!((_a2 = state.signal) == null ? void 0 : _a2.aborted) && state.currentOffset < total) {
1078
1169
  updateProgress(state.currentOffset, total);
1079
1170
  }
1080
- }, 100);
1171
+ }, 1e3);
1172
+ let consecutiveConflicts = 0;
1173
+ let hasSuccessfulChunk = false;
1081
1174
  if (offset > 0) {
1082
1175
  updateProgress(offset, total);
1083
1176
  } else {
@@ -1128,13 +1221,24 @@ function useVideoUpload({
1128
1221
  }
1129
1222
  );
1130
1223
  if (response.expectedOffset != null) {
1224
+ consecutiveConflicts++;
1131
1225
  console.warn("Offset mismatch detected", {
1132
1226
  expectedOffset: response.expectedOffset,
1133
- hadOffset: offset
1227
+ hadOffset: offset,
1228
+ attempt: consecutiveConflicts
1134
1229
  });
1230
+ if (consecutiveConflicts >= MAX_CONSECUTIVE_CONFLICTS) {
1231
+ throw {
1232
+ status: 409,
1233
+ statusText: "Conflict",
1234
+ data: { message: "Too many consecutive offset conflicts" }
1235
+ };
1236
+ }
1135
1237
  offset = response.expectedOffset;
1136
1238
  continue;
1137
1239
  }
1240
+ consecutiveConflicts = 0;
1241
+ hasSuccessfulChunk = true;
1138
1242
  offset = response.nextOffset != null ? response.nextOffset : end + 1;
1139
1243
  state.currentOffset = offset;
1140
1244
  state.currentXhr = null;
@@ -1151,7 +1255,7 @@ function useVideoUpload({
1151
1255
  }
1152
1256
  } catch (error) {
1153
1257
  state.currentXhr = null;
1154
- if ((error == null ? void 0 : error.isPaused) && state.isPaused) {
1258
+ if (state.isPaused || state.isPausing) {
1155
1259
  state.isPausing = false;
1156
1260
  break;
1157
1261
  }
@@ -1159,6 +1263,15 @@ function useVideoUpload({
1159
1263
  throw new Error("Upload cancelled");
1160
1264
  }
1161
1265
  if ((error == null ? void 0 : error.status) === 409 && ((_c = error == null ? void 0 : error.data) == null ? void 0 : _c.expectedOffset) != null) {
1266
+ consecutiveConflicts++;
1267
+ console.warn("Offset conflict in error handler", {
1268
+ expectedOffset: error.data.expectedOffset,
1269
+ hadOffset: offset,
1270
+ attempt: consecutiveConflicts
1271
+ });
1272
+ if (consecutiveConflicts >= MAX_CONSECUTIVE_CONFLICTS) {
1273
+ throw error;
1274
+ }
1162
1275
  offset = error.data.expectedOffset;
1163
1276
  continue;
1164
1277
  }
@@ -1169,6 +1282,13 @@ function useVideoUpload({
1169
1282
  clearInterval(progressIntervalRef.current);
1170
1283
  progressIntervalRef.current = null;
1171
1284
  }
1285
+ if (offset >= total && !hasSuccessfulChunk && consecutiveConflicts > 0 && !state.isPaused && !state.isPausing) {
1286
+ throw {
1287
+ status: 409,
1288
+ statusText: "Conflict",
1289
+ data: { message: "Upload completed via offset corrections without any successful chunk transfer" }
1290
+ };
1291
+ }
1172
1292
  if (offset >= total) {
1173
1293
  if (!state.isPaused && !state.isPausing) {
1174
1294
  updateProgress(total, total);
@@ -1187,6 +1307,8 @@ function useVideoUpload({
1187
1307
  setIsUploading(true);
1188
1308
  setIsPaused(false);
1189
1309
  const state = uploadStateRef.current;
1310
+ state.uploadSession++;
1311
+ const mySession = state.uploadSession;
1190
1312
  state.isPaused = false;
1191
1313
  state.isPausing = false;
1192
1314
  state.file = file;
@@ -1273,6 +1395,9 @@ function useVideoUpload({
1273
1395
  state.currentOffset = startOffset;
1274
1396
  state.file = file;
1275
1397
  await uploadFileChunks(file, videoId, startOffset);
1398
+ if (state.uploadSession !== mySession) {
1399
+ return;
1400
+ }
1276
1401
  if (state.isPaused) {
1277
1402
  return;
1278
1403
  }
@@ -1284,11 +1409,17 @@ function useVideoUpload({
1284
1409
  setUploadVideoId(null);
1285
1410
  }
1286
1411
  } catch (error) {
1287
- setIsUploading(false);
1412
+ if (state.uploadSession !== mySession) {
1413
+ return;
1414
+ }
1415
+ if (state.isPaused || state.isPausing) {
1416
+ return;
1417
+ }
1288
1418
  console.error("Upload error:", (error == null ? void 0 : error.message) || error);
1289
1419
  if ((error == null ? void 0 : error.message) === "Upload cancelled") {
1290
1420
  return;
1291
- } else if ((error == null ? void 0 : error.status) === 409) {
1421
+ }
1422
+ if ((error == null ? void 0 : error.status) === 409) {
1292
1423
  onError("offset-mismatch", uploadStateRef.current.videoId, error);
1293
1424
  } else if (error == null ? void 0 : error.status) {
1294
1425
  console.error(
@@ -1300,6 +1431,7 @@ function useVideoUpload({
1300
1431
  console.error("Unknown upload error:", error);
1301
1432
  onError("interrupted", uploadStateRef.current.videoId, error);
1302
1433
  }
1434
+ setIsUploading(false);
1303
1435
  }
1304
1436
  },
1305
1437
  [
@@ -1337,6 +1469,8 @@ function useVideoUpload({
1337
1469
  var _a;
1338
1470
  const state = uploadStateRef.current;
1339
1471
  if (state.file && state.videoId && state.currentOffset < (state.file.size || 0)) {
1472
+ state.uploadSession++;
1473
+ const mySession = state.uploadSession;
1340
1474
  setIsUploading(true);
1341
1475
  try {
1342
1476
  let startOffset = state.currentOffset;
@@ -1351,32 +1485,42 @@ function useVideoUpload({
1351
1485
  state.currentOffset = startOffset;
1352
1486
  }
1353
1487
  } catch {
1488
+ if (state.uploadSession === mySession) {
1489
+ setIsUploading(false);
1490
+ }
1491
+ return;
1492
+ }
1493
+ speedHistoryRef.current = [];
1494
+ state.lastTime = 0;
1495
+ state.lastBytes = startOffset;
1496
+ if (!state.signal || state.signal.aborted) {
1497
+ state.signal = start();
1354
1498
  }
1355
1499
  setIsPaused(false);
1356
1500
  state.isPaused = false;
1357
1501
  state.isPausing = false;
1358
1502
  await uploadFileChunks(state.file, state.videoId, startOffset);
1503
+ if (state.uploadSession !== mySession) return;
1359
1504
  if (!state.isPaused && !state.isPausing && state.videoId) {
1360
1505
  setIsUploading(false);
1361
1506
  setUploadVideoId(null);
1362
1507
  }
1363
1508
  } catch (error) {
1364
- setIsUploading(false);
1365
- console.error("Resume upload error:", (error == null ? void 0 : error.message) || error);
1509
+ if (state.uploadSession !== mySession) return;
1510
+ if (state.isPaused || state.isPausing) {
1511
+ return;
1512
+ }
1366
1513
  if ((error == null ? void 0 : error.message) === "Upload cancelled") {
1367
1514
  return;
1368
- } else if ((error == null ? void 0 : error.status) === 409) {
1369
- onError("offset-mismatch", uploadStateRef.current.videoId, error);
1370
- } else if (error == null ? void 0 : error.status) {
1371
- console.error(
1372
- `API error: ${error.status} ${error.statusText}`,
1373
- error.data
1374
- );
1375
- onError("interrupted", uploadStateRef.current.videoId, error);
1376
- } else {
1377
- console.error("Unknown upload error:", error);
1378
- onError("interrupted", uploadStateRef.current.videoId, error);
1379
1515
  }
1516
+ if (((error == null ? void 0 : error.status) === 0 || (error == null ? void 0 : error.status) === 409) && state.file) {
1517
+ state.videoId = null;
1518
+ state.attachmentId = null;
1519
+ handleUpload(state.file);
1520
+ return;
1521
+ }
1522
+ onError("interrupted", uploadStateRef.current.videoId, error);
1523
+ setIsUploading(false);
1380
1524
  }
1381
1525
  }
1382
1526
  if (state.file && state.videoId && state.currentOffset >= (state.file.size || 0)) {
@@ -1385,7 +1529,7 @@ function useVideoUpload({
1385
1529
  setUploadVideoId(null);
1386
1530
  }
1387
1531
  }
1388
- }, [baseUrl, authHeaders, uploadFileChunks, onError]);
1532
+ }, [baseUrl, authHeaders, uploadFileChunks, onError, start, handleUpload]);
1389
1533
  const handleCancel = useCallback(() => {
1390
1534
  const state = uploadStateRef.current;
1391
1535
  cancelUpload();
@@ -1429,56 +1573,156 @@ function useVideoUpload({
1429
1573
  uploadVideoId
1430
1574
  };
1431
1575
  }
1432
- const Uo = [["circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M12 8V12.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }], ["path", { d: "M12 15.9883V15.9983", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.8", key: "2" }]], Qt = [["path", { d: "M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }]], un = [["path", { d: "M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }]], sL = [["path", { d: "M18 6L6.00081 17.9992M17.9992 18L6 6.00085", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }]], qm = [["path", { d: "M19 14.0052V10.6606C19 9.84276 19 9.43383 18.8478 9.06613C18.6955 8.69843 18.4065 8.40927 17.8284 7.83096L13.0919 3.09236C12.593 2.59325 12.3436 2.3437 12.0345 2.19583C11.9702 2.16508 11.9044 2.13778 11.8372 2.11406C11.5141 2 11.1614 2 10.4558 2C7.21082 2 5.58831 2 4.48933 2.88646C4.26731 3.06554 4.06508 3.26787 3.88607 3.48998C3 4.58943 3 6.21265 3 9.45908V14.0052C3 17.7781 3 19.6645 4.17157 20.8366C5.11466 21.7801 6.52043 21.9641 9 22M12 2.50022V3.00043C12 5.83009 12 7.24492 12.8787 8.12398C13.7574 9.00304 15.1716 9.00304 18 9.00304H18.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M18 19.5L19.4453 20.4635C20.1297 20.9198 20.4719 21.1479 20.7359 21.0066C21 20.8653 21 20.454 21 19.6315V18.3685C21 17.546 21 17.1347 20.7359 16.9934C20.4719 16.8521 20.1297 17.0802 19.4453 17.5365L18 18.5M18 19.5V18.5M18 19.5C18 20.4346 18 20.9019 17.799 21.25C17.6674 21.478 17.478 21.6674 17.25 21.799C16.9019 22 16.4346 22 15.5 22H15C13.5858 22 12.8787 22 12.4393 21.5607C12 21.1213 12 20.4142 12 19C12 17.5858 12 16.8787 12.4393 16.4393C12.8787 16 13.5858 16 15 16H15.5C16.4346 16 16.9019 16 17.25 16.201C17.478 16.3326 17.6674 16.522 17.799 16.75C18 17.0981 18 17.5654 18 18.5", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }]], Lf = [["path", { d: "M15.5 21C16.8956 21 17.5933 21 18.1611 20.8278C19.4395 20.44 20.44 19.4395 20.8278 18.1611C21 17.5933 21 16.8956 21 15.5M21 8.5C21 7.10444 21 6.40666 20.8278 5.83886C20.44 4.56046 19.4395 3.56004 18.1611 3.17224C17.5933 3 16.8956 3 15.5 3M8.5 21C7.10444 21 6.40666 21 5.83886 20.8278C4.56046 20.44 3.56004 19.4395 3.17224 18.1611C3 17.5933 3 16.8956 3 15.5M3 8.5C3 7.10444 3 6.40666 3.17224 5.83886C3.56004 4.56046 4.56046 3.56004 5.83886 3.17224C6.40666 3 7.10444 3 8.5 3", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }]], LD = [["path", { d: "M3 16L7.46967 11.5303C7.80923 11.1908 8.26978 11 8.75 11C9.23022 11 9.69077 11.1908 10.0303 11.5303L14 15.5M15.5 17L14 15.5M21 16L18.5303 13.5303C18.1908 13.1908 17.7302 13 17.25 13C16.7698 13 16.3092 13.1908 15.9697 13.5303L14 15.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M15.5 8C15.7761 8 16 7.77614 16 7.5C16 7.22386 15.7761 7 15.5 7M15.5 8C15.2239 8 15 7.77614 15 7.5C15 7.22386 15.2239 7 15.5 7M15.5 8V7", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }], ["path", { d: "M3.69797 19.7472C2.5 18.3446 2.5 16.2297 2.5 12C2.5 7.77027 2.5 5.6554 3.69797 4.25276C3.86808 4.05358 4.05358 3.86808 4.25276 3.69797C5.6554 2.5 7.77027 2.5 12 2.5C16.2297 2.5 18.3446 2.5 19.7472 3.69797C19.9464 3.86808 20.1319 4.05358 20.302 4.25276C21.5 5.6554 21.5 7.77027 21.5 12C21.5 16.2297 21.5 18.3446 20.302 19.7472C20.1319 19.9464 19.9464 20.1319 19.7472 20.302C18.3446 21.5 16.2297 21.5 12 21.5C7.77027 21.5 5.6554 21.5 4.25276 20.302C4.05358 20.1319 3.86808 19.9464 3.69797 19.7472Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }]], h_ = [["path", { d: "M4 7C4 5.58579 4 4.87868 4.43934 4.43934C4.87868 4 5.58579 4 7 4C8.41421 4 9.12132 4 9.56066 4.43934C10 4.87868 10 5.58579 10 7V17C10 18.4142 10 19.1213 9.56066 19.5607C9.12132 20 8.41421 20 7 20C5.58579 20 4.87868 20 4.43934 19.5607C4 19.1213 4 18.4142 4 17V7Z", stroke: "currentColor", strokeWidth: "1.5", key: "0" }], ["path", { d: "M14 7C14 5.58579 14 4.87868 14.4393 4.43934C14.8787 4 15.5858 4 17 4C18.4142 4 19.1213 4 19.5607 4.43934C20 4.87868 20 5.58579 20 7V17C20 18.4142 20 19.1213 19.5607 19.5607C19.1213 20 18.4142 20 17 20C15.5858 20 14.8787 20 14.4393 19.5607C14 19.1213 14 18.4142 14 17V7Z", stroke: "currentColor", strokeWidth: "1.5", key: "1" }]], y1 = [["path", { d: "M11.5 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C21.947 6.29018 21.9976 8.05974 21.9999 11.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M20.5 14H15.5C14.6716 14 14 14.6716 14 15.5V18.5C14 19.3284 14.6716 20 15.5 20H20.5C21.3284 20 22 19.3284 22 18.5V15.5C22 14.6716 21.3284 14 20.5 14Z", stroke: "currentColor", strokeWidth: "1.5", key: "1" }], ["path", { d: "M11 9.5V12C11.0475 12.5744 10.6034 13.0238 10 13H7.5M6 8L10 12", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }]], c2 = [["path", { d: "M18.8906 12.846C18.5371 14.189 16.8667 15.138 13.5257 17.0361C10.296 18.8709 8.6812 19.7884 7.37983 19.4196C6.8418 19.2671 6.35159 18.9776 5.95624 18.5787C5 17.6139 5 15.7426 5 12C5 8.2574 5 6.3861 5.95624 5.42132C6.35159 5.02245 6.8418 4.73288 7.37983 4.58042C8.6812 4.21165 10.296 5.12907 13.5257 6.96393C16.8667 8.86197 18.5371 9.811 18.8906 11.154C19.0365 11.7084 19.0365 12.2916 18.8906 12.846Z", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }]], z8 = [["path", { d: "M20.0092 2V5.13219C20.0092 5.42605 19.6418 5.55908 19.4537 5.33333C17.6226 3.2875 14.9617 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }]], u0 = [["path", { d: "M21.3175 7.14139L20.8239 6.28479C20.4506 5.63696 20.264 5.31305 19.9464 5.18388C19.6288 5.05472 19.2696 5.15664 18.5513 5.36048L17.3311 5.70418C16.8725 5.80994 16.3913 5.74994 15.9726 5.53479L15.6357 5.34042C15.2766 5.11043 15.0004 4.77133 14.8475 4.37274L14.5136 3.37536C14.294 2.71534 14.1842 2.38533 13.9228 2.19657C13.6615 2.00781 13.3143 2.00781 12.6199 2.00781H11.5051C10.8108 2.00781 10.4636 2.00781 10.2022 2.19657C9.94085 2.38533 9.83106 2.71534 9.61149 3.37536L9.27753 4.37274C9.12465 4.77133 8.84845 5.11043 8.48937 5.34042L8.15249 5.53479C7.73374 5.74994 7.25259 5.80994 6.79398 5.70418L5.57375 5.36048C4.85541 5.15664 4.49625 5.05472 4.17867 5.18388C3.86109 5.31305 3.67445 5.63696 3.30115 6.28479L2.80757 7.14139C2.45766 7.74864 2.2827 8.05227 2.31666 8.37549C2.35061 8.69871 2.58483 8.95918 3.05326 9.48012L4.0843 10.6328C4.3363 10.9518 4.51521 11.5078 4.51521 12.0077C4.51521 12.5078 4.33636 13.0636 4.08433 13.3827L3.05326 14.5354C2.58483 15.0564 2.35062 15.3168 2.31666 15.6401C2.2827 15.9633 2.45766 16.2669 2.80757 16.8741L3.30114 17.7307C3.67443 18.3785 3.86109 18.7025 4.17867 18.8316C4.49625 18.9608 4.85542 18.8589 5.57377 18.655L6.79394 18.3113C7.25263 18.2055 7.73387 18.2656 8.15267 18.4808L8.4895 18.6752C8.84851 18.9052 9.12464 19.2442 9.2775 19.6428L9.61149 20.6403C9.83106 21.3003 9.94085 21.6303 10.2022 21.8191C10.4636 22.0078 10.8108 22.0078 11.5051 22.0078H12.6199C13.3143 22.0078 13.6615 22.0078 13.9228 21.8191C14.1842 21.6303 14.294 21.3003 14.5136 20.6403L14.8476 19.6428C15.0004 19.2442 15.2765 18.9052 15.6356 18.6752L15.9724 18.4808C16.3912 18.2656 16.8724 18.2055 17.3311 18.3113L18.5513 18.655C19.2696 18.8589 19.6288 18.9608 19.9464 18.8316C20.264 18.7025 20.4506 18.3785 20.8239 17.7307L21.3175 16.8741C21.6674 16.2669 21.8423 15.9633 21.8084 15.6401C21.7744 15.3168 21.5402 15.0564 21.0718 14.5354L20.0407 13.3827C19.7887 13.0636 19.6098 12.5078 19.6098 12.0077C19.6098 11.5078 19.7888 10.9518 20.0407 10.6328L21.0718 9.48012C21.5402 8.95918 21.7744 8.69871 21.8084 8.37549C21.8423 8.05227 21.6674 7.74864 21.3175 7.14139Z", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M15.5195 12C15.5195 13.933 13.9525 15.5 12.0195 15.5C10.0865 15.5 8.51953 13.933 8.51953 12C8.51953 10.067 10.0865 8.5 12.0195 8.5C13.9525 8.5 15.5195 10.067 15.5195 12Z", stroke: "currentColor", strokeWidth: "1.5", key: "1" }]], h0 = [["path", { d: "M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M8.5 10C7.67157 10 7 9.32843 7 8.5C7 7.67157 7.67157 7 8.5 7C9.32843 7 10 7.67157 10 8.5C10 9.32843 9.32843 10 8.5 10Z", stroke: "currentColor", strokeWidth: "1.5", key: "1" }], ["path", { d: "M15.5 17C16.3284 17 17 16.3284 17 15.5C17 14.6716 16.3284 14 15.5 14C14.6716 14 14 14.6716 14 15.5C14 16.3284 14.6716 17 15.5 17Z", stroke: "currentColor", strokeWidth: "1.5", key: "2" }], ["path", { d: "M10 8.5L17 8.5", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "3" }], ["path", { d: "M14 15.5L7 15.5", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5", key: "4" }]], Aur = [["path", { d: "M5 14L8.5 17.5L19 6.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }]], kMr = [["path", { d: "M14 14.8135V9.18646C14 6.04126 14 4.46866 13.0747 4.0773C12.1494 3.68593 11.0603 4.79793 8.88232 7.02192C7.75439 8.17365 7.11085 8.42869 5.50604 8.42869C4.10257 8.42869 3.40084 8.42869 2.89675 8.77262C1.85035 9.48655 2.00852 10.882 2.00852 12C2.00852 13.118 1.85035 14.5134 2.89675 15.2274C3.40084 15.5713 4.10257 15.5713 5.50604 15.5713C7.11085 15.5713 7.75439 15.8264 8.88232 16.9781C11.0603 19.2021 12.1494 20.3141 13.0747 19.9227C14 19.5313 14 17.9587 14 14.8135Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M17 9C17.6254 9.81968 18 10.8634 18 12C18 13.1366 17.6254 14.1803 17 15", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }], ["path", { d: "M20 7C21.2508 8.36613 22 10.1057 22 12C22 13.8943 21.2508 15.6339 20 17", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }]], aMr = [["path", { d: "M22 22L2 2", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }], ["path", { d: "M17 10C17.6296 10.7667 18 11.7054 18 12.7195C18 13.1635 17.929 13.593 17.7963 14", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "1" }], ["path", { d: "M20 8C21.2508 9.22951 22 10.7952 22 12.5C22 13.9164 21.4829 15.2367 20.5906 16.348", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "2" }], ["path", { d: "M14 14C14 17.1452 14 19.5313 13.074 19.9227C12.1481 20.3141 11.0583 19.2021 8.8787 16.9781C7.7499 15.8264 7.106 15.5713 5.5 15.5713C4.3879 15.5713 3.02749 15.7187 2.33706 14.6643C2 14.1496 2 13.4331 2 12C2 10.5669 2 9.85038 2.33706 9.33566C3.02749 8.28131 4.3879 8.42869 5.5 8.42869C6.60725 8.42869 7.3569 8.43869 7.96 7.96M14 9.5C14 6.3548 14.026 4.46866 13.1 4.0773C12.3292 3.75147 11.5323 4.46765 10 6", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "3" }]];
1433
- const defaultAttributes = {
1434
- xmlns: "http://www.w3.org/2000/svg",
1435
- width: 24,
1436
- height: 24,
1437
- viewBox: "0 0 24 24",
1438
- fill: "none"
1439
- };
1440
- const HugeiconsIcon = forwardRef(({ color = "currentColor", size = 24, strokeWidth, absoluteStrokeWidth = false, className = "", altIcon, showAlt = false, icon, primaryColor, secondaryColor, disableSecondaryOpacity = false, ...rest }, ref) => {
1441
- const calculatedStrokeWidth = strokeWidth !== void 0 ? absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth : void 0;
1442
- const strokeProps = calculatedStrokeWidth !== void 0 ? {
1443
- strokeWidth: calculatedStrokeWidth,
1444
- stroke: "currentColor"
1445
- } : {};
1446
- const elementProps = {
1447
- ref,
1448
- ...defaultAttributes,
1449
- width: size,
1450
- height: size,
1451
- color: primaryColor || color,
1452
- className,
1453
- ...strokeProps,
1454
- ...rest
1576
+ function createIcon(icon) {
1577
+ return function VideoIcon({
1578
+ size = 20,
1579
+ color = "currentColor"
1580
+ }) {
1581
+ return /* @__PURE__ */ jsx(HugeiconsIcon, { icon, size, color });
1455
1582
  };
1456
- const currentIcon = showAlt && altIcon ? altIcon : icon;
1457
- const svgChildren = [...currentIcon].sort(([, a], [, b]) => {
1458
- const hasOpacityA = a.opacity !== void 0;
1459
- const hasOpacityB = b.opacity !== void 0;
1460
- return hasOpacityB ? 1 : hasOpacityA ? -1 : 0;
1461
- }).map(([tag, attrs]) => {
1462
- const isSecondaryPath = attrs.opacity !== void 0;
1463
- const pathOpacity = isSecondaryPath && !disableSecondaryOpacity ? attrs.opacity : void 0;
1464
- const fillProps = secondaryColor ? {
1465
- ...attrs.stroke !== void 0 ? {
1466
- stroke: isSecondaryPath ? secondaryColor : primaryColor || color
1467
- } : {
1468
- fill: isSecondaryPath ? secondaryColor : primaryColor || color
1469
- }
1470
- } : {};
1471
- return createElement(tag, {
1472
- ...attrs,
1473
- ...strokeProps,
1474
- ...fillProps,
1475
- opacity: pathOpacity,
1476
- key: attrs.key
1477
- });
1478
- });
1479
- return createElement("svg", elementProps, svgChildren);
1480
- });
1481
- HugeiconsIcon.displayName = "HugeiconsIcon";
1583
+ }
1584
+ function PlayIcon({
1585
+ size = 20,
1586
+ color = "currentColor"
1587
+ }) {
1588
+ return /* @__PURE__ */ jsx(
1589
+ "svg",
1590
+ {
1591
+ xmlns: "http://www.w3.org/2000/svg",
1592
+ width: size,
1593
+ height: size * 44 / 42,
1594
+ viewBox: "0 0 42 44",
1595
+ fill: "none",
1596
+ "aria-hidden": "true",
1597
+ focusable: "false",
1598
+ children: /* @__PURE__ */ jsx(
1599
+ "path",
1600
+ {
1601
+ d: "M7.80209 0.289726C10.2068 -0.391222 12.6819 0.195277 15.3958 1.34962C18.1136 2.50569 21.4619 4.41001 25.724 6.83139C30.1341 9.33682 33.595 11.3004 36.0547 13.097C38.5092 14.8899 40.3262 16.7646 40.9766 19.235C41.4534 21.0471 41.4534 22.9542 40.9766 24.7663C40.3262 27.2368 38.5092 29.1114 36.0547 30.9043C33.595 32.7009 30.1341 34.6644 25.724 37.1699C21.4619 39.5912 18.1136 41.4956 15.3958 42.6517C12.6819 43.8061 10.2069 44.3926 7.80209 43.7116C6.03479 43.2107 4.4259 42.2585 3.13021 40.9512C1.3719 39.1771 0.664657 36.7249 0.330731 33.7741C-0.00366531 30.8183 1.69004e-06 26.9408 1.69004e-06 22.0007C1.68951e-06 17.0605 -0.00366606 13.183 0.330731 10.2272C0.664657 7.27644 1.37188 4.82417 3.13021 3.05014C4.42578 1.74306 6.03454 0.790589 7.80209 0.289726Z",
1602
+ fill: color
1603
+ }
1604
+ )
1605
+ }
1606
+ );
1607
+ }
1608
+ function PauseIcon({
1609
+ size = 20,
1610
+ color = "currentColor"
1611
+ }) {
1612
+ return /* @__PURE__ */ jsxs(
1613
+ "svg",
1614
+ {
1615
+ xmlns: "http://www.w3.org/2000/svg",
1616
+ width: size,
1617
+ height: size,
1618
+ viewBox: "0 0 20 20",
1619
+ fill: "none",
1620
+ "aria-hidden": "true",
1621
+ focusable: "false",
1622
+ children: [
1623
+ /* @__PURE__ */ jsx(
1624
+ "path",
1625
+ {
1626
+ d: "M8.9585 14.1666C8.9585 14.7382 8.9599 15.2299 8.90723 15.6217C8.85213 16.0313 8.72764 16.4238 8.40918 16.7423C8.09069 17.0607 7.69819 17.1852 7.28858 17.2403C6.89686 17.293 6.40509 17.2916 5.8335 17.2916C5.26191 17.2916 4.77014 17.293 4.37842 17.2403C3.96881 17.1852 3.5763 17.0607 3.25782 16.7423C2.93936 16.4238 2.81487 16.0313 2.75977 15.6217C2.7071 15.2299 2.7085 14.7382 2.7085 14.1666V5.83326C2.7085 5.26167 2.7071 4.7699 2.75977 4.37818C2.81486 3.96855 2.93933 3.57606 3.25782 3.25757C3.5763 2.93908 3.9688 2.81462 4.37842 2.75953C4.77014 2.70686 5.26191 2.70826 5.8335 2.70826C6.40509 2.70826 6.89686 2.70686 7.28858 2.75953C7.6982 2.81462 8.09069 2.93908 8.40918 3.25757C8.72767 3.57606 8.85213 3.96855 8.90723 4.37818C8.9599 4.7699 8.9585 5.26167 8.9585 5.83326V14.1666Z",
1627
+ fill: color
1628
+ }
1629
+ ),
1630
+ /* @__PURE__ */ jsx(
1631
+ "path",
1632
+ {
1633
+ d: "M17.2915 14.1666C17.2915 14.7382 17.2929 15.2299 17.2402 15.6217C17.1851 16.0313 17.0606 16.4238 16.7422 16.7423C16.4237 17.0607 16.0312 17.1852 15.6216 17.2403C15.2299 17.293 14.7381 17.2916 14.1665 17.2916C13.5949 17.2916 13.1031 17.293 12.7114 17.2403C12.3018 17.1852 11.9093 17.0607 11.5908 16.7423C11.2724 16.4238 11.1479 16.0313 11.0928 15.6217C11.0401 15.2299 11.0415 14.7382 11.0415 14.1666V5.83326C11.0415 5.26167 11.0401 4.76989 11.0928 4.37818C11.1479 3.96856 11.2724 3.57606 11.5908 3.25757C11.9093 2.93911 12.3018 2.81462 12.7114 2.75953C13.1032 2.70686 13.5949 2.70826 14.1665 2.70826C14.7381 2.70826 15.2299 2.70686 15.6216 2.75953C16.0312 2.81462 16.4237 2.93911 16.7422 3.25757C17.0607 3.57606 17.1851 3.96856 17.2402 4.37818C17.2929 4.76989 17.2915 5.26167 17.2915 5.83326V14.1666Z",
1634
+ fill: color
1635
+ }
1636
+ )
1637
+ ]
1638
+ }
1639
+ );
1640
+ }
1641
+ const VolumeIcon = createIcon(kMr);
1642
+ const VolumeMuteIcon = createIcon(aMr);
1643
+ const SettingsIcon = createIcon(h0);
1644
+ const SettingsPlayerIcon = createIcon(u0);
1645
+ const ChevronRightIcon = createIcon(un);
1646
+ const FullscreenIcon = createIcon(Lf);
1647
+ const PictureInPictureIcon = createIcon(y1);
1648
+ const ArrowLeftIcon = createIcon(Qt);
1649
+ const TickIcon = createIcon(Aur);
1650
+ const SubtitleIcon = createIcon(akr);
1651
+ const SpeedIcon = createIcon(SV);
1652
+ const QualityIcon = createIcon(Qor);
1653
+ const MoreVerticalIcon = createIcon(BQ);
1654
+ function CheckCircleIcon({
1655
+ size = 32
1656
+ }) {
1657
+ return /* @__PURE__ */ jsxs(
1658
+ "svg",
1659
+ {
1660
+ xmlns: "http://www.w3.org/2000/svg",
1661
+ width: size,
1662
+ height: size,
1663
+ viewBox: "0 0 32 32",
1664
+ fill: "none",
1665
+ "aria-hidden": "true",
1666
+ focusable: "false",
1667
+ children: [
1668
+ /* @__PURE__ */ jsx(
1669
+ "path",
1670
+ {
1671
+ d: "M16 1.66699C23.916 1.66699 30.333 8.08391 30.333 16C30.333 23.916 23.916 30.333 16 30.333C8.08391 30.333 1.66699 23.916 1.66699 16C1.66699 8.08392 8.08392 1.66699 16 1.66699Z",
1672
+ fill: "var(--mantine-primary-color-filled, #3B5BDB)"
1673
+ }
1674
+ ),
1675
+ /* @__PURE__ */ jsx(
1676
+ "path",
1677
+ {
1678
+ d: "M20.5961 11.3243C20.9693 10.9172 21.6018 10.8899 22.0089 11.2631C22.4159 11.6363 22.4432 12.2687 22.0701 12.6758L14.7367 20.6758C14.5525 20.8767 14.2944 20.994 14.0219 21C13.7492 21.006 13.4856 20.8999 13.2927 20.7071L9.9594 17.3737C9.56887 16.9832 9.56887 16.3502 9.9594 15.9597C10.3499 15.5691 10.9829 15.5691 11.3735 15.9597L13.9672 18.5534L20.5961 11.3243Z",
1679
+ fill: "white"
1680
+ }
1681
+ )
1682
+ ]
1683
+ }
1684
+ );
1685
+ }
1686
+ function Refresh04Icon({
1687
+ size = 20,
1688
+ color = "currentColor"
1689
+ }) {
1690
+ return /* @__PURE__ */ jsxs(
1691
+ "svg",
1692
+ {
1693
+ xmlns: "http://www.w3.org/2000/svg",
1694
+ width: size,
1695
+ height: size,
1696
+ viewBox: "0 0 16 16",
1697
+ fill: "none",
1698
+ "aria-hidden": "true",
1699
+ focusable: "false",
1700
+ children: [
1701
+ /* @__PURE__ */ jsx(
1702
+ "path",
1703
+ {
1704
+ d: "M13.5 8C13.5 7.79302 13.4883 7.58864 13.4661 7.38802C13.436 7.11376 13.634 6.86706 13.9082 6.83659C14.1827 6.80624 14.4299 7.00418 14.4603 7.27865C14.4865 7.51568 14.5 7.7564 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C5.95787 14.5 4.13548 13.5575 2.94466 12.0859C2.77102 11.8713 2.80424 11.5565 3.01888 11.3828C3.23354 11.2092 3.54832 11.2424 3.72201 11.457C4.73113 12.7041 6.27244 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C10.0422 1.5 11.8645 2.44246 13.0553 3.91406C13.229 4.12872 13.1958 4.4435 12.9811 4.61719C12.7665 4.79083 12.4517 4.75761 12.278 4.54297C11.2688 3.2959 9.72758 2.5 8 2.5C4.96244 2.5 2.5 4.96244 2.5 8C2.5 8.20695 2.51167 8.41133 2.53385 8.61198C2.56402 8.88625 2.36604 9.13295 2.0918 9.16341C1.81733 9.19376 1.57006 8.99582 1.53971 8.72135C1.51352 8.48435 1.5 8.24363 1.5 8Z",
1705
+ fill: color
1706
+ }
1707
+ ),
1708
+ /* @__PURE__ */ jsx(
1709
+ "path",
1710
+ {
1711
+ d: "M12.8337 2.66667V2C12.8337 1.72386 13.0575 1.5 13.3337 1.5C13.6098 1.5 13.8337 1.72386 13.8337 2V2.66667C13.8337 3.12394 13.8348 3.51736 13.7926 3.83073C13.7486 4.15842 13.649 4.47242 13.3942 4.72721C13.1394 4.98198 12.8254 5.08157 12.4977 5.12565C12.1843 5.16778 11.7909 5.16667 11.3337 5.16667H10.667C10.3908 5.16667 10.167 4.94281 10.167 4.66667C10.167 4.39052 10.3908 4.16667 10.667 4.16667H11.3337C11.8191 4.16667 12.133 4.16585 12.3643 4.13477C12.5811 4.10562 12.6491 4.05826 12.6872 4.02018C12.7252 3.98212 12.7726 3.91414 12.8018 3.69727C12.8328 3.46602 12.8337 3.15214 12.8337 2.66667Z",
1712
+ fill: color
1713
+ }
1714
+ ),
1715
+ /* @__PURE__ */ jsx(
1716
+ "path",
1717
+ {
1718
+ d: "M2.167 14V13.3334C2.167 12.8761 2.16588 12.4827 2.20801 12.1693C2.25209 11.8416 2.35168 11.5276 2.60645 11.2728C2.86124 11.0181 3.17524 10.9185 3.50293 10.8744C3.8163 10.8323 4.20973 10.8334 4.667 10.8334H5.33366C5.6098 10.8334 5.83366 11.0572 5.83366 11.3334C5.83366 11.6095 5.6098 11.8334 5.33366 11.8334H4.667C4.18152 11.8334 3.86764 11.8342 3.6364 11.8653C3.41952 11.8944 3.35154 11.9418 3.31348 11.9799C3.2754 12.018 3.22804 12.086 3.1989 12.3028C3.16781 12.534 3.167 12.8479 3.167 13.3334V14C3.167 14.2762 2.94314 14.5 2.667 14.5C2.39085 14.5 2.167 14.2762 2.167 14Z",
1719
+ fill: color
1720
+ }
1721
+ )
1722
+ ]
1723
+ }
1724
+ );
1725
+ }
1482
1726
  function ActionButtons({
1483
1727
  onPause,
1484
1728
  onResume,
@@ -1506,26 +1750,33 @@ function ActionButtons({
1506
1750
  )
1507
1751
  }
1508
1752
  ),
1509
- onCancel && /* @__PURE__ */ jsx(Tooltip, { label: t("editor.video.actions.cancel"), children: /* @__PURE__ */ jsx(
1753
+ showRetry && onRetry && /* @__PURE__ */ jsx(Tooltip, { label: t("editor.video.actions.retry"), children: /* @__PURE__ */ jsx(
1510
1754
  ActionIcon,
1511
1755
  {
1512
1756
  variant: "light",
1513
- color: "red",
1757
+ color: "gray",
1514
1758
  size: 28,
1515
1759
  radius: "md",
1516
- onClick: onCancel,
1517
- children: /* @__PURE__ */ jsx(HugeiconsIcon, { icon: sL, size: 16, color: "currentColor" })
1760
+ onClick: onRetry,
1761
+ children: /* @__PURE__ */ jsx(Refresh04Icon, { size: 16, color: "currentColor" })
1518
1762
  }
1519
1763
  ) }),
1520
- showRetry && onRetry && /* @__PURE__ */ jsx(Tooltip, { label: t("editor.video.actions.retry"), children: /* @__PURE__ */ jsx(
1764
+ onCancel && /* @__PURE__ */ jsx(Tooltip, { label: t("editor.video.actions.cancel"), children: /* @__PURE__ */ jsx(
1521
1765
  ActionIcon,
1522
1766
  {
1523
1767
  variant: "light",
1524
- color: "gray",
1768
+ color: "red",
1525
1769
  size: 28,
1526
1770
  radius: "md",
1527
- onClick: onRetry,
1528
- children: /* @__PURE__ */ jsx(HugeiconsIcon, { icon: z8, size: 16, color: "currentColor" })
1771
+ onClick: onCancel,
1772
+ children: /* @__PURE__ */ jsx(
1773
+ HugeiconsIcon,
1774
+ {
1775
+ icon: OJ,
1776
+ size: 16,
1777
+ color: "currentColor"
1778
+ }
1779
+ )
1529
1780
  }
1530
1781
  ) })
1531
1782
  ] });
@@ -1533,47 +1784,60 @@ function ActionButtons({
1533
1784
  function ProgressBar({
1534
1785
  progress,
1535
1786
  showSpeed = true,
1536
- showRemaining = false
1787
+ showRemaining = false,
1788
+ showInfo = true,
1789
+ isPaused = false
1537
1790
  }) {
1791
+ const { t } = useTranslation();
1538
1792
  const formatBytes = (bytes) => {
1539
- if (bytes === 0) return "0 MB";
1540
- const mb = bytes / (1024 * 1024);
1793
+ const safe = Math.max(0, bytes);
1794
+ if (safe === 0) return "0 MB";
1795
+ const mb = safe / (1024 * 1024);
1541
1796
  return `${mb.toFixed(2)} MB`;
1542
1797
  };
1543
1798
  const formatSpeed = (bytesPerSecond) => {
1544
- if (bytesPerSecond === 0) return "0.00 MB/s";
1545
- const mbps = bytesPerSecond / (1024 * 1024);
1799
+ const safe = Math.max(0, bytesPerSecond);
1800
+ if (safe === 0) return "0.00 MB/s";
1801
+ const mbps = safe / (1024 * 1024);
1546
1802
  return `${mbps.toFixed(2)} MB/s`;
1547
1803
  };
1548
1804
  const formatTime2 = (seconds) => {
1805
+ if (seconds <= 0) return "0s";
1549
1806
  if (seconds < 60) return `${seconds}s`;
1550
1807
  const minutes = Math.floor(seconds / 60);
1551
1808
  const secs = seconds % 60;
1552
1809
  return `${minutes}m ${secs}s`;
1553
1810
  };
1811
+ const clampedPercent = Math.min(100, Math.max(0, Math.round(progress.percent)));
1554
1812
  return /* @__PURE__ */ jsxs("div", { className: "video-upload-progress-container", children: [
1555
1813
  /* @__PURE__ */ jsxs("div", { className: "video-upload-progress-header", children: [
1556
- /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 400, children: [
1557
- Math.round(progress.percent),
1814
+ /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 400, c: "var(--mantine-color-bright)", children: [
1815
+ clampedPercent,
1558
1816
  "%"
1559
1817
  ] }),
1560
- showRemaining && progress.remaining > 0 && /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
1818
+ isPaused ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--mantine-color-text)", children: t("editor.video.actions.pause") }) : showRemaining && progress.remaining > 0 && /* @__PURE__ */ jsxs(Text, { size: "sm", c: "var(--mantine-color-dimmed)", children: [
1561
1819
  "Remaining:",
1562
- " ",
1563
- /* @__PURE__ */ jsx(Text, { component: "span", c: "dark", children: formatTime2(progress.remaining) })
1820
+ /* @__PURE__ */ jsxs(Text, { component: "span", c: "var(--mantine-color-text)", children: [
1821
+ " ",
1822
+ formatTime2(progress.remaining)
1823
+ ] })
1564
1824
  ] })
1565
1825
  ] }),
1566
- /* @__PURE__ */ jsx(Progress, { value: Math.round(progress.percent), size: "xs", radius: "md" }),
1567
- showSpeed && /* @__PURE__ */ jsxs("div", { className: "video-upload-progress-info", children: [
1826
+ /* @__PURE__ */ jsx(Progress, { value: clampedPercent, size: 6, radius: "md" }),
1827
+ showInfo && /* @__PURE__ */ jsxs("div", { className: "video-upload-progress-info", children: [
1568
1828
  /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
1569
- "Uploading: ",
1570
- formatBytes(progress.uploaded),
1571
- " /",
1572
- " ",
1573
- formatBytes(progress.total)
1829
+ "Uploading:",
1830
+ /* @__PURE__ */ jsxs(Text, { component: "span", size: "xs", c: "var(--mantine-color-text)", inherit: true, children: [
1831
+ " ",
1832
+ formatBytes(progress.uploaded),
1833
+ " / ",
1834
+ formatBytes(progress.total)
1835
+ ] })
1574
1836
  ] }),
1575
- /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "·" }),
1576
- /* @__PURE__ */ jsx(Text, { size: "xs", c: "dark", children: formatSpeed(progress.speed || 0) })
1837
+ showSpeed && !isPaused && /* @__PURE__ */ jsxs(Fragment, { children: [
1838
+ /* @__PURE__ */ jsx("span", { className: "video-upload-progress-dot" }),
1839
+ /* @__PURE__ */ jsx(Text, { size: "xs", c: "var(--mantine-color-text)", children: formatSpeed(progress.speed || 0) })
1840
+ ] })
1577
1841
  ] })
1578
1842
  ] });
1579
1843
  }
@@ -1658,7 +1922,7 @@ function AnalysisState({
1658
1922
  {
1659
1923
  p: "xl",
1660
1924
  withBorder: true,
1661
- radius: "md",
1925
+ radius: 12,
1662
1926
  style: {
1663
1927
  display: "flex",
1664
1928
  flexDirection: "column",
@@ -1672,56 +1936,58 @@ function AnalysisState({
1672
1936
  style: {
1673
1937
  display: "flex",
1674
1938
  flexDirection: "column",
1675
- gap: "var(--mantine-spacing-xs)",
1676
1939
  alignItems: "center",
1677
1940
  width: "100%"
1678
1941
  },
1679
1942
  children: [
1680
- /* @__PURE__ */ jsx(
1681
- "div",
1682
- {
1683
- style: {
1684
- display: "flex",
1685
- flexDirection: "row",
1686
- alignItems: "center",
1687
- gap: 8
1688
- },
1689
- children: isPaused ? /* @__PURE__ */ jsx(VideoAnalysisAnimation, { size: 32 }) : /* @__PURE__ */ jsx(StarsAnimation, { size: 32 })
1690
- }
1691
- ),
1692
1943
  /* @__PURE__ */ jsxs(
1693
1944
  "div",
1694
1945
  {
1695
1946
  style: {
1696
1947
  display: "flex",
1697
1948
  flexDirection: "column",
1698
- gap: 4,
1949
+ gap: "var(--mantine-spacing-xs)",
1699
1950
  alignItems: "center"
1700
1951
  },
1701
1952
  children: [
1702
- /* @__PURE__ */ jsx(Text, { size: "md", fw: 500, children: t("editor.video.transcoding.title") }),
1703
- /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: t("editor.video.transcoding.analysis") })
1953
+ isPaused ? /* @__PURE__ */ jsx(VideoAnalysisAnimation, { size: 32 }) : /* @__PURE__ */ jsx(StarsAnimation, { size: 32 }),
1954
+ /* @__PURE__ */ jsxs(
1955
+ "div",
1956
+ {
1957
+ style: {
1958
+ display: "flex",
1959
+ flexDirection: "column",
1960
+ gap: 4,
1961
+ alignItems: "center"
1962
+ },
1963
+ children: [
1964
+ /* @__PURE__ */ jsx(Text, { size: "md", fw: 500, children: t("editor.video.transcoding.title") }),
1965
+ /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: t("editor.video.transcoding.analysis") })
1966
+ ]
1967
+ }
1968
+ )
1704
1969
  ]
1705
1970
  }
1706
- )
1971
+ ),
1972
+ /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(
1973
+ ProgressBar,
1974
+ {
1975
+ progress: {
1976
+ percent: progress.percent,
1977
+ uploaded: 0,
1978
+ total: 100,
1979
+ speed: 0,
1980
+ // cSpell:ignore remaining
1981
+ remaining: progress.remaining || 0
1982
+ },
1983
+ showSpeed: false,
1984
+ showRemaining: false,
1985
+ showInfo: false
1986
+ }
1987
+ ) })
1707
1988
  ]
1708
1989
  }
1709
1990
  ),
1710
- /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(
1711
- ProgressBar,
1712
- {
1713
- progress: {
1714
- percent: progress.percent,
1715
- uploaded: 0,
1716
- total: 100,
1717
- speed: 0,
1718
- // cSpell:ignore remaining
1719
- remaining: progress.remaining || 0
1720
- },
1721
- showSpeed: false,
1722
- showRemaining: false
1723
- }
1724
- ) }),
1725
1991
  /* @__PURE__ */ jsx(
1726
1992
  ActionButtons,
1727
1993
  {
@@ -1748,7 +2014,7 @@ function ConversionState({
1748
2014
  {
1749
2015
  p: "xl",
1750
2016
  withBorder: true,
1751
- radius: "md",
2017
+ radius: 12,
1752
2018
  style: {
1753
2019
  display: "flex",
1754
2020
  flexDirection: "column",
@@ -1762,56 +2028,58 @@ function ConversionState({
1762
2028
  style: {
1763
2029
  display: "flex",
1764
2030
  flexDirection: "column",
1765
- gap: "var(--mantine-spacing-xs)",
1766
2031
  alignItems: "center",
1767
2032
  width: "100%"
1768
2033
  },
1769
2034
  children: [
1770
- /* @__PURE__ */ jsx(
1771
- "div",
1772
- {
1773
- style: {
1774
- display: "flex",
1775
- flexDirection: "row",
1776
- alignItems: "center",
1777
- gap: 8
1778
- },
1779
- children: isPaused ? /* @__PURE__ */ jsx(VideoAnalysisAnimation, { size: 32 }) : /* @__PURE__ */ jsx(StarsAnimation, { size: 32 })
1780
- }
1781
- ),
1782
2035
  /* @__PURE__ */ jsxs(
1783
2036
  "div",
1784
2037
  {
1785
2038
  style: {
1786
2039
  display: "flex",
1787
2040
  flexDirection: "column",
1788
- gap: 4,
2041
+ gap: "var(--mantine-spacing-xs)",
1789
2042
  alignItems: "center"
1790
2043
  },
1791
2044
  children: [
1792
- /* @__PURE__ */ jsx(Text, { size: "md", fw: 500, children: t("editor.video.transcoding.title") }),
1793
- /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: t("editor.video.transcoding.conversion") })
2045
+ isPaused ? /* @__PURE__ */ jsx(VideoAnalysisAnimation, { size: 32 }) : /* @__PURE__ */ jsx(StarsAnimation, { size: 32 }),
2046
+ /* @__PURE__ */ jsxs(
2047
+ "div",
2048
+ {
2049
+ style: {
2050
+ display: "flex",
2051
+ flexDirection: "column",
2052
+ gap: 4,
2053
+ alignItems: "center"
2054
+ },
2055
+ children: [
2056
+ /* @__PURE__ */ jsx(Text, { size: "md", fw: 500, children: t("editor.video.transcoding.title") }),
2057
+ /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: t("editor.video.transcoding.conversion") })
2058
+ ]
2059
+ }
2060
+ )
1794
2061
  ]
1795
2062
  }
1796
- )
2063
+ ),
2064
+ /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(
2065
+ ProgressBar,
2066
+ {
2067
+ progress: {
2068
+ percent: progress.percent,
2069
+ uploaded: 0,
2070
+ total: 100,
2071
+ speed: 0,
2072
+ // cSpell:ignore remaining
2073
+ remaining: progress.remaining || 0
2074
+ },
2075
+ showSpeed: false,
2076
+ showRemaining: !!progress.remaining,
2077
+ showInfo: false
2078
+ }
2079
+ ) })
1797
2080
  ]
1798
2081
  }
1799
2082
  ),
1800
- /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(
1801
- ProgressBar,
1802
- {
1803
- progress: {
1804
- percent: progress.percent,
1805
- uploaded: 0,
1806
- total: 100,
1807
- speed: 0,
1808
- // cSpell:ignore remaining
1809
- remaining: progress.remaining || 0
1810
- },
1811
- showSpeed: false,
1812
- showRemaining: !!progress.remaining
1813
- }
1814
- ) }),
1815
2083
  /* @__PURE__ */ jsx(
1816
2084
  ActionButtons,
1817
2085
  {
@@ -1825,14 +2093,14 @@ function ConversionState({
1825
2093
  }
1826
2094
  );
1827
2095
  }
1828
- const dropzone = "_dropzone_8gcr8_1";
1829
- const disabled = "_disabled_8gcr8_9";
1830
- const focused = "_focused_8gcr8_12";
1831
- const dropzoneContent = "_dropzoneContent_8gcr8_20";
1832
- const iconContainer = "_iconContainer_8gcr8_40";
1833
- const contentWrapper = "_contentWrapper_8gcr8_48";
1834
- const title = "_title_8gcr8_57";
1835
- const description = "_description_8gcr8_62";
2096
+ const dropzone = "_dropzone_12otc_1";
2097
+ const disabled = "_disabled_12otc_9";
2098
+ const focused = "_focused_12otc_12";
2099
+ const dropzoneContent = "_dropzoneContent_12otc_20";
2100
+ const iconContainer = "_iconContainer_12otc_40";
2101
+ const contentWrapper = "_contentWrapper_12otc_48";
2102
+ const title = "_title_12otc_57";
2103
+ const description = "_description_12otc_62";
1836
2104
  const styles = {
1837
2105
  dropzone,
1838
2106
  disabled,
@@ -1974,7 +2242,7 @@ function ErrorStates({
1974
2242
  {
1975
2243
  p: "xl",
1976
2244
  withBorder: true,
1977
- radius: "md",
2245
+ radius: 12,
1978
2246
  style: {
1979
2247
  display: "flex",
1980
2248
  flexDirection: "column",
@@ -1983,29 +2251,6 @@ function ErrorStates({
1983
2251
  justifyContent: "center"
1984
2252
  },
1985
2253
  children: [
1986
- /* @__PURE__ */ jsxs(
1987
- "div",
1988
- {
1989
- style: {
1990
- display: "flex",
1991
- flexDirection: "column",
1992
- gap: "var(--mantine-spacing-xs, 10px)",
1993
- alignItems: "center"
1994
- },
1995
- children: [
1996
- /* @__PURE__ */ jsx(
1997
- HugeiconsIcon,
1998
- {
1999
- icon: Uo,
2000
- size: 32,
2001
- color: "var(--mantine-color-red-6, #fa5252)",
2002
- className: "video-upload-error-icon"
2003
- }
2004
- ),
2005
- /* @__PURE__ */ jsx(Text, { size: "md", fw: 500, style: { lineHeight: 1.55 }, children: t("editor.video.errors.uploadFailed") })
2006
- ]
2007
- }
2008
- ),
2009
2254
  /* @__PURE__ */ jsxs(
2010
2255
  "div",
2011
2256
  {
@@ -2014,32 +2259,66 @@ function ErrorStates({
2014
2259
  flexDirection: "column",
2015
2260
  gap: "var(--mantine-spacing-xs, 10px)",
2016
2261
  alignItems: "center",
2017
- justifyContent: "center",
2018
2262
  width: "100%"
2019
2263
  },
2020
2264
  children: [
2021
- errorType === "interrupted" && /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(
2022
- Progress,
2265
+ /* @__PURE__ */ jsxs(
2266
+ "div",
2023
2267
  {
2024
- value: 100,
2025
- color: "red",
2026
- size: "xs",
2027
- radius: "md",
2028
2268
  style: {
2029
- height: 6,
2030
- backgroundColor: "var(--mantine-color-gray-2, #e9ecef)"
2031
- }
2269
+ display: "flex",
2270
+ flexDirection: "column",
2271
+ gap: "var(--mantine-spacing-xs, 10px)",
2272
+ alignItems: "center"
2273
+ },
2274
+ children: [
2275
+ /* @__PURE__ */ jsx(
2276
+ HugeiconsIcon,
2277
+ {
2278
+ icon: Uo,
2279
+ size: 32,
2280
+ color: "var(--mantine-color-red-filled)",
2281
+ className: "video-upload-error-icon"
2282
+ }
2283
+ ),
2284
+ /* @__PURE__ */ jsx(
2285
+ Text,
2286
+ {
2287
+ size: "md",
2288
+ fw: 500,
2289
+ c: "var(--mantine-color-bright)",
2290
+ style: { lineHeight: 1.55 },
2291
+ children: t("editor.video.errors.uploadFailed")
2292
+ }
2293
+ )
2294
+ ]
2032
2295
  }
2033
- ) }),
2034
- /* @__PURE__ */ jsx(
2035
- Text,
2296
+ ),
2297
+ /* @__PURE__ */ jsxs(
2298
+ "div",
2036
2299
  {
2037
- size: "xs",
2038
- c: "red",
2039
- ta: "center",
2040
- style: { lineHeight: 1.4, color: "#fa5252" },
2041
- className: "video-upload-error-message",
2042
- children: getErrorMessage()
2300
+ style: {
2301
+ display: "flex",
2302
+ flexDirection: "column",
2303
+ gap: "var(--mantine-spacing-xs, 10px)",
2304
+ alignItems: "center",
2305
+ justifyContent: "center",
2306
+ width: "100%"
2307
+ },
2308
+ children: [
2309
+ errorType === "interrupted" && /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(Progress, { value: 100, color: "red", size: 6, radius: "md" }) }),
2310
+ /* @__PURE__ */ jsx(
2311
+ Text,
2312
+ {
2313
+ size: "xs",
2314
+ c: "var(--mantine-color-red-text)",
2315
+ ta: "center",
2316
+ style: { lineHeight: 1.4 },
2317
+ className: "video-upload-error-message",
2318
+ children: getErrorMessage()
2319
+ }
2320
+ )
2321
+ ]
2043
2322
  }
2044
2323
  )
2045
2324
  ]
@@ -2092,6 +2371,7 @@ function LinkState({
2092
2371
  {
2093
2372
  value,
2094
2373
  type: "url",
2374
+ variant: "filled",
2095
2375
  size: "sm",
2096
2376
  placeholder: t("editor.video.link.placeholder"),
2097
2377
  disabled: disabled2,
@@ -2138,7 +2418,7 @@ function UploadState({
2138
2418
  {
2139
2419
  p: "xl",
2140
2420
  withBorder: true,
2141
- radius: "md",
2421
+ radius: 12,
2142
2422
  style: {
2143
2423
  display: "flex",
2144
2424
  flexDirection: "column",
@@ -2152,17 +2432,63 @@ function UploadState({
2152
2432
  style: {
2153
2433
  display: "flex",
2154
2434
  flexDirection: "column",
2155
- gap: "var(--mantine-spacing-xs)",
2156
2435
  alignItems: "center",
2157
2436
  width: "100%"
2158
2437
  },
2159
2438
  children: [
2160
- isPaused ? /* @__PURE__ */ jsx(VideoAnalysisAnimation, { size: 32 }) : /* @__PURE__ */ jsx(Loader, { size: 32, color: "var(--mantine-color-bright)" }),
2161
- /* @__PURE__ */ jsx(Text, { size: "md", fw: 500, children: "Uploading File" })
2439
+ /* @__PURE__ */ jsxs(
2440
+ "div",
2441
+ {
2442
+ style: {
2443
+ display: "flex",
2444
+ flexDirection: "column",
2445
+ gap: 8,
2446
+ alignItems: "center"
2447
+ },
2448
+ children: [
2449
+ /* @__PURE__ */ jsxs(
2450
+ "svg",
2451
+ {
2452
+ width: 32,
2453
+ height: 32,
2454
+ viewBox: "0 0 32 32",
2455
+ fill: "none",
2456
+ xmlns: "http://www.w3.org/2000/svg",
2457
+ className: isPaused ? void 0 : "video-upload-spinner",
2458
+ children: [
2459
+ /* @__PURE__ */ jsx(
2460
+ "circle",
2461
+ {
2462
+ cx: 16,
2463
+ cy: 16,
2464
+ r: 14,
2465
+ stroke: "var(--mantine-color-gray-light)",
2466
+ strokeWidth: 2.5
2467
+ }
2468
+ ),
2469
+ !isPaused && /* @__PURE__ */ jsx(
2470
+ "circle",
2471
+ {
2472
+ cx: 16,
2473
+ cy: 16,
2474
+ r: 14,
2475
+ stroke: "var(--mantine-color-bright)",
2476
+ strokeWidth: 2.5,
2477
+ strokeLinecap: "round",
2478
+ strokeDasharray: "66 22"
2479
+ }
2480
+ )
2481
+ ]
2482
+ }
2483
+ ),
2484
+ /* @__PURE__ */ jsx(Text, { size: "md", fw: 500, c: "var(--mantine-color-bright)", children: "Uploading File" })
2485
+ ]
2486
+ }
2487
+ ),
2488
+ /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(ProgressBar, { progress, showSpeed: true, showRemaining: true, isPaused }) })
2162
2489
  ]
2163
2490
  }
2164
2491
  ),
2165
- /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsx(ProgressBar, { progress, showSpeed: true, showRemaining: true }) }),
2166
2492
  /* @__PURE__ */ jsx(
2167
2493
  ActionButtons,
2168
2494
  {
@@ -2403,65 +2729,26 @@ function StoryboardPreview({
2403
2729
  container: { left, width, height },
2404
2730
  image: {
2405
2731
  backgroundImage: `url('${frame.sheetUrl}')`,
2406
- backgroundSize,
2407
- backgroundPosition
2408
- }
2409
- };
2410
- }, [frame, left, width]);
2411
- return /* @__PURE__ */ jsx("div", { className: "video-player-storyboard-preview", style: styles2.container, children: /* @__PURE__ */ jsx(
2412
- "div",
2413
- {
2414
- className: "video-player-storyboard-preview-image",
2415
- style: styles2.image
2416
- }
2417
- ) });
2418
- }
2419
- function createIcon(icon) {
2420
- return function VideoIcon({
2421
- size = 20,
2422
- color = "currentColor"
2423
- }) {
2424
- return /* @__PURE__ */ jsx(HugeiconsIcon, { icon, size, color });
2425
- };
2426
- }
2427
- function PlayIcon({
2428
- size = 20,
2429
- color = "currentColor"
2430
- }) {
2431
- return /* @__PURE__ */ jsx(
2432
- "svg",
2433
- {
2434
- xmlns: "http://www.w3.org/2000/svg",
2435
- width: size,
2436
- height: size * 44 / 42,
2437
- viewBox: "0 0 42 44",
2438
- fill: "none",
2439
- "aria-hidden": "true",
2440
- focusable: "false",
2441
- children: /* @__PURE__ */ jsx(
2442
- "path",
2443
- {
2444
- d: "M7.80209 0.289726C10.2068 -0.391222 12.6819 0.195277 15.3958 1.34962C18.1136 2.50569 21.4619 4.41001 25.724 6.83139C30.1341 9.33682 33.595 11.3004 36.0547 13.097C38.5092 14.8899 40.3262 16.7646 40.9766 19.235C41.4534 21.0471 41.4534 22.9542 40.9766 24.7663C40.3262 27.2368 38.5092 29.1114 36.0547 30.9043C33.595 32.7009 30.1341 34.6644 25.724 37.1699C21.4619 39.5912 18.1136 41.4956 15.3958 42.6517C12.6819 43.8061 10.2069 44.3926 7.80209 43.7116C6.03479 43.2107 4.4259 42.2585 3.13021 40.9512C1.3719 39.1771 0.664657 36.7249 0.330731 33.7741C-0.00366531 30.8183 1.69004e-06 26.9408 1.69004e-06 22.0007C1.68951e-06 17.0605 -0.00366606 13.183 0.330731 10.2272C0.664657 7.27644 1.37188 4.82417 3.13021 3.05014C4.42578 1.74306 6.03454 0.790589 7.80209 0.289726Z",
2445
- fill: color
2446
- }
2447
- )
2732
+ backgroundSize,
2733
+ backgroundPosition
2734
+ }
2735
+ };
2736
+ }, [frame, left, width]);
2737
+ return /* @__PURE__ */ jsx("div", { className: "video-player-storyboard-preview", "data-test-id": "video-storyboard-preview", style: styles2.container, children: /* @__PURE__ */ jsx(
2738
+ "div",
2739
+ {
2740
+ className: "video-player-storyboard-preview-image",
2741
+ style: styles2.image
2448
2742
  }
2449
- );
2743
+ ) });
2450
2744
  }
2451
- const PauseIcon = createIcon(h_);
2452
- const VolumeIcon = createIcon(kMr);
2453
- const VolumeMuteIcon = createIcon(aMr);
2454
- const SettingsIcon = createIcon(h0);
2455
- const SettingsPlayerIcon = createIcon(u0);
2456
- const ChevronRightIcon = createIcon(un);
2457
- const FullscreenIcon = createIcon(Lf);
2458
- const PictureInPictureIcon = createIcon(y1);
2459
- const ArrowLeftIcon = createIcon(Qt);
2460
- const TickIcon = createIcon(Aur);
2461
- function VideoMenu({ header, items }) {
2745
+ function VideoMenu({ header, items, width = 300, maxHeight }) {
2462
2746
  return /* @__PURE__ */ jsxs(
2463
2747
  Menu.Dropdown,
2464
2748
  {
2749
+ w: width,
2750
+ mah: maxHeight,
2751
+ style: maxHeight ? { overflowY: "auto" } : void 0,
2465
2752
  onClick: (event) => {
2466
2753
  event.stopPropagation();
2467
2754
  },
@@ -2477,8 +2764,20 @@ function VideoMenu({ header, items }) {
2477
2764
  disabled: header.disabled,
2478
2765
  leftSection: header.leftSection,
2479
2766
  closeMenuOnClick: false,
2480
- w: "169",
2481
- children: /* @__PURE__ */ jsx(Text, { c: "var(--mantine-color-bright)", className: "video-menu-header", children: header.label })
2767
+ className: "video-menu-item",
2768
+ children: /* @__PURE__ */ jsxs("div", { className: "video-menu-row", children: [
2769
+ /* @__PURE__ */ jsx(Text, { className: "video-menu-header", children: header.label }),
2770
+ header.rightSection && /* @__PURE__ */ jsx(
2771
+ "span",
2772
+ {
2773
+ className: "video-menu-icon",
2774
+ onClick: (event) => {
2775
+ event.stopPropagation();
2776
+ },
2777
+ children: header.rightSection
2778
+ }
2779
+ )
2780
+ ] })
2482
2781
  }
2483
2782
  ),
2484
2783
  /* @__PURE__ */ jsx(Menu.Divider, {})
@@ -2486,29 +2785,28 @@ function VideoMenu({ header, items }) {
2486
2785
  items.map((item) => /* @__PURE__ */ jsx(
2487
2786
  Menu.Item,
2488
2787
  {
2489
- w: "169",
2490
2788
  onClick: (event) => {
2491
2789
  event.stopPropagation();
2492
2790
  item.onClick();
2493
2791
  },
2494
2792
  disabled: item.disabled,
2495
2793
  closeMenuOnClick: false,
2496
- p: "xs",
2497
2794
  className: "video-menu-item",
2498
2795
  children: /* @__PURE__ */ jsxs("div", { className: "video-menu-row", children: [
2499
- /* @__PURE__ */ jsx("div", { className: "video-menu-left", children: /* @__PURE__ */ jsx(
2500
- Text,
2501
- {
2502
- c: "var(--mantine-color-bright)",
2503
- className: "video-menu-item-text",
2504
- children: item.leftLabel
2505
- }
2506
- ) }),
2796
+ /* @__PURE__ */ jsxs("div", { className: "video-menu-left", children: [
2797
+ item.leftIcon && /* @__PURE__ */ jsx("span", { className: "video-menu-icon", children: item.leftIcon }),
2798
+ /* @__PURE__ */ jsx(
2799
+ Text,
2800
+ {
2801
+ className: "video-menu-item-text",
2802
+ children: item.leftLabel
2803
+ }
2804
+ )
2805
+ ] }),
2507
2806
  /* @__PURE__ */ jsxs("div", { className: "video-menu-right", children: [
2508
2807
  /* @__PURE__ */ jsx(
2509
2808
  Text,
2510
2809
  {
2511
- c: "var(--mantine-color-bright)",
2512
2810
  className: "video-menu-item-text video-menu-value",
2513
2811
  children: item.centerLabel ?? ""
2514
2812
  }
@@ -2531,34 +2829,41 @@ function VideoQualityMenu({
2531
2829
  }) {
2532
2830
  const { t } = useTranslation();
2533
2831
  const items = [
2534
- ...settings.hasRealQualities ? [
2535
- {
2536
- key: "quality-auto",
2537
- onClick: () => onSelect(null),
2538
- disabled: disabled2,
2539
- leftLabel: t("editor.video.settings.auto"),
2540
- rightSection: settings.currentQualityId == null ? /* @__PURE__ */ jsx(TickIcon, { size: 18 }) : null
2541
- }
2542
- ] : [],
2543
2832
  ...settings.qualities.map((item) => {
2833
+ var _a;
2544
2834
  const isActive = item.id === settings.currentQualityId;
2835
+ const is1080p = (_a = item.label) == null ? void 0 : _a.includes("1080");
2545
2836
  return {
2546
2837
  key: `quality-${item.id}`,
2547
2838
  onClick: () => onSelect(item.id),
2548
2839
  disabled: disabled2,
2549
- leftLabel: item.label,
2550
- rightSection: isActive ? /* @__PURE__ */ jsx(TickIcon, { size: 18 }) : null
2840
+ leftLabel: is1080p ? /* @__PURE__ */ jsxs("span", { children: [
2841
+ item.label,
2842
+ " ",
2843
+ /* @__PURE__ */ jsx("sup", { className: "video-menu-hd-badge", children: "HD" })
2844
+ ] }) : item.label,
2845
+ rightSection: isActive ? /* @__PURE__ */ jsx(TickIcon, { size: 16 }) : null
2551
2846
  };
2552
- })
2847
+ }),
2848
+ ...settings.hasRealQualities ? [
2849
+ {
2850
+ key: "quality-auto",
2851
+ onClick: () => onSelect(null),
2852
+ disabled: disabled2,
2853
+ leftLabel: t("editor.video.settings.auto"),
2854
+ rightSection: settings.currentQualityId == null ? /* @__PURE__ */ jsx(TickIcon, { size: 16 }) : null
2855
+ }
2856
+ ] : []
2553
2857
  ];
2554
2858
  return /* @__PURE__ */ jsx(
2555
2859
  VideoMenu,
2556
2860
  {
2861
+ width: 264,
2557
2862
  header: {
2558
2863
  label: t("editor.video.settings.quality"),
2559
2864
  onClick: onBack,
2560
2865
  disabled: disabled2,
2561
- leftSection: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: 18 })
2866
+ leftSection: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: 16 })
2562
2867
  },
2563
2868
  items
2564
2869
  }
@@ -2571,37 +2876,47 @@ function VideoSettingsMenu({
2571
2876
  onQualityClick,
2572
2877
  onSubtitlesClick
2573
2878
  }) {
2574
- var _a;
2879
+ var _a, _b;
2575
2880
  const { t } = useTranslation();
2576
- const currentSpeedLabel = `${settings.currentSpeed}x`;
2881
+ const currentSpeedLabel = settings.currentSpeed === 1 ? t("editor.video.settings.normal") : `${settings.currentSpeed}x`;
2577
2882
  const currentQualityLabel = ((_a = settings.qualities.find((item) => item.id === settings.currentQualityId)) == null ? void 0 : _a.label) || t("editor.video.settings.auto");
2883
+ const currentSubtitleLabel = ((_b = settings.subtitles.find((item) => item.id === settings.currentSubtitleId)) == null ? void 0 : _b.label) || t("editor.video.settings.off");
2578
2884
  const items = [
2579
2885
  {
2580
2886
  key: "subtitles",
2581
2887
  onClick: onSubtitlesClick,
2582
2888
  disabled: disabled2,
2889
+ leftIcon: /* @__PURE__ */ jsx(SubtitleIcon, { size: 16 }),
2583
2890
  leftLabel: t("editor.video.settings.subtitlesCc"),
2584
- centerLabel: void 0,
2585
- rightSection: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 18 })
2891
+ centerLabel: currentSubtitleLabel,
2892
+ rightSection: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16 })
2586
2893
  },
2587
2894
  {
2588
2895
  key: "speed",
2589
2896
  onClick: onSpeedClick,
2590
2897
  disabled: disabled2 || !settings.hasRealSpeeds,
2898
+ leftIcon: /* @__PURE__ */ jsx(SpeedIcon, { size: 16 }),
2591
2899
  leftLabel: t("editor.video.settings.speed"),
2592
2900
  centerLabel: currentSpeedLabel,
2593
- rightSection: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 18 })
2901
+ rightSection: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16 })
2594
2902
  },
2595
2903
  {
2596
2904
  key: "quality",
2597
2905
  onClick: onQualityClick,
2598
2906
  disabled: disabled2 || !settings.hasRealQualities,
2907
+ leftIcon: /* @__PURE__ */ jsx(QualityIcon, { size: 16 }),
2599
2908
  leftLabel: t("editor.video.settings.quality"),
2600
2909
  centerLabel: currentQualityLabel,
2601
- rightSection: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 18 })
2910
+ rightSection: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16 })
2602
2911
  }
2603
2912
  ];
2604
- return /* @__PURE__ */ jsx(VideoMenu, { items });
2913
+ return /* @__PURE__ */ jsx(
2914
+ VideoMenu,
2915
+ {
2916
+ width: 300,
2917
+ items
2918
+ }
2919
+ );
2605
2920
  }
2606
2921
  function VideoSpeedMenu({
2607
2922
  disabled: disabled2,
@@ -2620,22 +2935,48 @@ function VideoSpeedMenu({
2620
2935
  onClick: () => onSelect(speed),
2621
2936
  disabled: disabled2,
2622
2937
  leftLabel: formatSpeedLabel(speed),
2623
- rightSection: isActive ? /* @__PURE__ */ jsx(TickIcon, { size: 18 }) : null
2938
+ rightSection: isActive ? /* @__PURE__ */ jsx(TickIcon, { size: 16 }) : null
2624
2939
  };
2625
2940
  });
2626
2941
  return /* @__PURE__ */ jsx(
2627
2942
  VideoMenu,
2628
2943
  {
2944
+ width: 264,
2945
+ maxHeight: 244,
2629
2946
  header: {
2630
2947
  label: t("editor.video.settings.speed"),
2631
2948
  onClick: onBack,
2632
2949
  disabled: disabled2,
2633
- leftSection: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: 18 })
2950
+ leftSection: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: 16 })
2634
2951
  },
2635
2952
  items
2636
2953
  }
2637
2954
  );
2638
2955
  }
2956
+ const LANG_NAMES = {
2957
+ en: "English",
2958
+ es: "Español",
2959
+ fr: "Français",
2960
+ de: "Deutsch",
2961
+ it: "Italiano",
2962
+ pt: "Português",
2963
+ ru: "Русский",
2964
+ uk: "Українська",
2965
+ pl: "Polski",
2966
+ nl: "Nederlands",
2967
+ sv: "Svenska",
2968
+ no: "Norsk",
2969
+ da: "Dansk",
2970
+ fi: "Suomi",
2971
+ tr: "Türkçe",
2972
+ ar: "العربية",
2973
+ he: "עברית",
2974
+ hi: "हिन्दी",
2975
+ ja: "日本語",
2976
+ ko: "한국어",
2977
+ zh: "中文",
2978
+ ro: "Română"
2979
+ };
2639
2980
  function VideoSubtitlesMenu({
2640
2981
  disabled: disabled2,
2641
2982
  settings,
@@ -2643,29 +2984,54 @@ function VideoSubtitlesMenu({
2643
2984
  onSelect
2644
2985
  }) {
2645
2986
  const { t } = useTranslation();
2987
+ const autoLabel = t("editor.video.settingsModal.autoGenerated");
2646
2988
  const items = settings.subtitles.map((item) => {
2647
2989
  const isActive = item.id === settings.currentSubtitleId;
2990
+ let label = item.label;
2991
+ if (item.isDefault) {
2992
+ const fullName = item.lang ? LANG_NAMES[item.lang.toLowerCase()] : null;
2993
+ if (fullName) label = fullName;
2994
+ label = `${label} (${autoLabel})`;
2995
+ }
2648
2996
  return {
2649
2997
  key: `subtitle-${item.id ?? "off"}`,
2650
2998
  onClick: () => onSelect(item.id),
2651
2999
  disabled: disabled2,
2652
- leftLabel: item.label,
2653
- rightSection: isActive ? /* @__PURE__ */ jsx(TickIcon, { size: 18 }) : null
3000
+ leftLabel: label,
3001
+ rightSection: isActive ? /* @__PURE__ */ jsx(TickIcon, { size: 16 }) : null
2654
3002
  };
2655
3003
  });
2656
3004
  return /* @__PURE__ */ jsx(
2657
3005
  VideoMenu,
2658
3006
  {
3007
+ width: 264,
2659
3008
  header: {
2660
3009
  label: t("editor.video.settings.subtitlesCc"),
2661
3010
  onClick: onBack,
2662
3011
  disabled: disabled2,
2663
- leftSection: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: 18 })
3012
+ leftSection: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: 16 })
2664
3013
  },
2665
3014
  items
2666
3015
  }
2667
3016
  );
2668
3017
  }
3018
+ function OverflowTooltip({ text }) {
3019
+ const ref = useRef(null);
3020
+ const [isTruncated, setIsTruncated] = useState(false);
3021
+ const checkOverflow = useCallback(() => {
3022
+ const el = ref.current;
3023
+ if (el) setIsTruncated(el.scrollWidth > el.clientWidth);
3024
+ }, []);
3025
+ return /* @__PURE__ */ jsx(Tooltip, { label: text, openDelay: 300, withinPortal: true, disabled: !isTruncated, children: /* @__PURE__ */ jsx(
3026
+ "span",
3027
+ {
3028
+ ref,
3029
+ className: "video-player-chapters-item-title",
3030
+ onMouseEnter: checkOverflow,
3031
+ children: text
3032
+ }
3033
+ ) });
3034
+ }
2669
3035
  function VideoCustomControls({
2670
3036
  video,
2671
3037
  containerRef,
@@ -2679,7 +3045,8 @@ function VideoCustomControls({
2679
3045
  storyboard,
2680
3046
  baseUrl,
2681
3047
  authHeaders,
2682
- chapters = []
3048
+ chapters = [],
3049
+ isProcessing = false
2683
3050
  }) {
2684
3051
  const { t } = useTranslation();
2685
3052
  const [currentTime, setCurrentTime] = useState(0);
@@ -2806,6 +3173,7 @@ function VideoCustomControls({
2806
3173
  setOptimisticSpeed(null);
2807
3174
  }, [settings.currentSpeed]);
2808
3175
  const progressRatio = duration > 0 ? clamp(currentTime / duration, 0, 1) : 0;
3176
+ const visibleBufferedRanges = isProcessing ? [] : bufferedRanges;
2809
3177
  const sortedChapters = useMemo(() => {
2810
3178
  if (!chapters || chapters.length === 0) return [];
2811
3179
  return [...chapters].sort((a, b) => a.startSec - b.startSec);
@@ -2813,6 +3181,10 @@ function VideoCustomControls({
2813
3181
  const chapterSegments = useMemo(() => {
2814
3182
  if (sortedChapters.length === 0 || duration <= 0) return [];
2815
3183
  const segments = [];
3184
+ const firstStart = clamp(sortedChapters[0].startSec / duration, 0, 1);
3185
+ if (firstStart > 0) {
3186
+ segments.push({ chapter: null, startRatio: 0, endRatio: firstStart });
3187
+ }
2816
3188
  for (let i = 0; i < sortedChapters.length; i++) {
2817
3189
  const chapter = sortedChapters[i];
2818
3190
  const startRatio = clamp(chapter.startSec / duration, 0, 1);
@@ -2927,7 +3299,7 @@ function VideoCustomControls({
2927
3299
  ["--video-subtitles-offset"]: hasChapters ? "48px" : "16px"
2928
3300
  },
2929
3301
  children: [
2930
- /* @__PURE__ */ jsxs("div", { className: "video-player-timeline", ref: timelineRef, children: [
3302
+ /* @__PURE__ */ jsxs("div", { className: "video-player-timeline", ref: timelineRef, "data-test-id": "video-player-timeline", children: [
2931
3303
  /* @__PURE__ */ jsx(
2932
3304
  "div",
2933
3305
  {
@@ -2959,7 +3331,7 @@ function VideoCustomControls({
2959
3331
  style: { width: `${segmentProgressRatio * 100}%` }
2960
3332
  }
2961
3333
  ),
2962
- bufferedRanges.map((range, bufIndex) => {
3334
+ visibleBufferedRanges.map((range, bufIndex) => {
2963
3335
  const bufStart = clamp(
2964
3336
  (range.start - segment.startRatio) / segmentWidth,
2965
3337
  0,
@@ -2988,7 +3360,7 @@ function VideoCustomControls({
2988
3360
  `chapter-${index}`
2989
3361
  );
2990
3362
  }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
2991
- bufferedRanges.map((range, index) => /* @__PURE__ */ jsx(
3363
+ visibleBufferedRanges.map((range, index) => /* @__PURE__ */ jsx(
2992
3364
  "span",
2993
3365
  {
2994
3366
  className: "video-player-buffered",
@@ -3022,6 +3394,7 @@ function VideoCustomControls({
3022
3394
  hoverLeft != null && /* @__PURE__ */ jsxs(
3023
3395
  "div",
3024
3396
  {
3397
+ "data-test-id": "video-player-hover-preview",
3025
3398
  className: "video-player-hover-preview",
3026
3399
  style: {
3027
3400
  left: hoverLeft,
@@ -3059,27 +3432,34 @@ function VideoCustomControls({
3059
3432
  alignItems: "center",
3060
3433
  height: 28,
3061
3434
  borderRadius: 8,
3062
- padding: "0 4px",
3435
+ padding: isVolumeHovered ? "0 8px" : 0,
3063
3436
  gap: 6,
3064
3437
  background: isVolumeHovered ? "rgba(134, 142, 150, 0.15)" : "transparent",
3065
- backdropFilter: isVolumeHovered ? "blur(2px)" : "none"
3438
+ backdropFilter: isVolumeHovered ? "blur(4px)" : "none",
3439
+ transition: "padding 120ms ease, background 120ms ease, backdrop-filter 120ms ease"
3066
3440
  },
3067
3441
  children: [
3068
3442
  /* @__PURE__ */ jsx(
3069
- ActionIcon,
3443
+ "button",
3070
3444
  {
3071
- variant: "subtle",
3445
+ type: "button",
3446
+ className: isVolumeHovered ? void 0 : "video-player-button",
3072
3447
  onClick: handleMuteToggle,
3073
3448
  "aria-label": isMuted || volume === 0 ? t("editor.video.player.unmute") : t("editor.video.player.mute"),
3074
- styles: {
3075
- root: {
3076
- width: 28,
3077
- height: 28,
3078
- borderRadius: 8,
3079
- color: "#fff"
3080
- }
3081
- },
3082
- children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeMuteIcon, { size: 20 }) : /* @__PURE__ */ jsx(VolumeIcon, { size: 20 })
3449
+ style: isVolumeHovered ? {
3450
+ display: "inline-flex",
3451
+ alignItems: "center",
3452
+ justifyContent: "center",
3453
+ flexShrink: 0,
3454
+ width: 16,
3455
+ height: 16,
3456
+ padding: 0,
3457
+ border: "none",
3458
+ background: "transparent",
3459
+ color: "#fff",
3460
+ cursor: "pointer"
3461
+ } : void 0,
3462
+ children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(VolumeMuteIcon, { size: isVolumeHovered ? 16 : 20 }) : /* @__PURE__ */ jsx(VolumeIcon, { size: isVolumeHovered ? 16 : 20 })
3083
3463
  }
3084
3464
  ),
3085
3465
  /* @__PURE__ */ jsx(
@@ -3089,6 +3469,7 @@ function VideoCustomControls({
3089
3469
  style: {
3090
3470
  width: isVolumeHovered ? 57 : 0,
3091
3471
  opacity: isVolumeHovered ? 1 : 0,
3472
+ overflow: isVolumeHovered ? "visible" : "hidden",
3092
3473
  pointerEvents: isVolumeHovered ? "auto" : "none",
3093
3474
  transition: "width 120ms ease, opacity 120ms ease",
3094
3475
  display: "flex",
@@ -3105,22 +3486,7 @@ function VideoCustomControls({
3105
3486
  onChange: handleVolumeChangeValue,
3106
3487
  label: null,
3107
3488
  "aria-label": t("editor.video.player.volume"),
3108
- styles: {
3109
- track: {
3110
- height: 2,
3111
- background: "rgba(255, 255, 255, 0.6)"
3112
- },
3113
- bar: {
3114
- height: 2,
3115
- background: "rgba(255, 255, 255, 0.6)"
3116
- },
3117
- thumb: {
3118
- width: 10,
3119
- height: 10,
3120
- borderColor: "#fff",
3121
- background: "#fff"
3122
- }
3123
- }
3489
+ size: 3
3124
3490
  }
3125
3491
  )
3126
3492
  }
@@ -3135,11 +3501,11 @@ function VideoCustomControls({
3135
3501
  ] }),
3136
3502
  currentChapter && /* @__PURE__ */ jsxs("div", { className: "video-player-chapter-title", children: [
3137
3503
  /* @__PURE__ */ jsx("span", { children: currentChapter.title }),
3138
- /* @__PURE__ */ jsx(ChevronRightIcon, { size: 18 })
3504
+ /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16 })
3139
3505
  ] }),
3140
3506
  !currentChapter && title2 && /* @__PURE__ */ jsxs("div", { className: "video-player-title", children: [
3141
3507
  /* @__PURE__ */ jsx("span", { children: title2 }),
3142
- /* @__PURE__ */ jsx(ChevronRightIcon, { size: 18 })
3508
+ /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16 })
3143
3509
  ] })
3144
3510
  ] }),
3145
3511
  /* @__PURE__ */ jsxs("div", { className: "video-player-right", children: [
@@ -3271,7 +3637,7 @@ function VideoCustomControls({
3271
3637
  onClick: () => handleChapterClick(chapter),
3272
3638
  children: [
3273
3639
  /* @__PURE__ */ jsx("span", { className: "video-player-chapters-item-time", children: formatTime(chapter.startSec) }),
3274
- /* @__PURE__ */ jsx("span", { className: "video-player-chapters-item-title", children: chapter.title })
3640
+ /* @__PURE__ */ jsx(OverflowTooltip, { text: chapter.title })
3275
3641
  ]
3276
3642
  },
3277
3643
  `chapter-list-${index}`
@@ -3315,7 +3681,9 @@ const getSettingsSnapshot = (player, videoElement) => {
3315
3681
  { id: null, label: "Off" },
3316
3682
  ...nativeTracks.map((track, index) => ({
3317
3683
  id: index,
3318
- label: track.label || track.language || "Unknown"
3684
+ label: track.label || track.language || "Unknown",
3685
+ lang: track.language || void 0,
3686
+ isDefault: track.default ?? false
3319
3687
  }))
3320
3688
  ] : [{ id: null, label: "Off" }, ...MOCK_SUBTITLES];
3321
3689
  return {
@@ -3346,7 +3714,9 @@ const getSettingsSnapshot = (player, videoElement) => {
3346
3714
  { id: null, label: "Off" },
3347
3715
  ...textTracks.map((track) => ({
3348
3716
  id: track.id,
3349
- label: track.label || track.language || "Unknown"
3717
+ label: track.label || track.language || "Unknown",
3718
+ lang: track.language || void 0,
3719
+ isDefault: Boolean(track.default ?? track.isDefault ?? false)
3350
3720
  }))
3351
3721
  ] : [{ id: null, label: "Off" }, ...MOCK_SUBTITLES];
3352
3722
  const activeTextTrack = textTracks.find((track) => track.active);
@@ -3441,6 +3811,7 @@ function normalizeSubtitleTrack(raw) {
3441
3811
  const url = typeof (raw == null ? void 0 : raw.url) === "string" ? raw.url : typeof (raw == null ? void 0 : raw.vttUrl) === "string" ? raw.vttUrl : typeof (raw == null ? void 0 : raw.src) === "string" ? raw.src : void 0;
3442
3812
  const createdAt = typeof (raw == null ? void 0 : raw.createdAt) === "string" ? raw.createdAt : void 0;
3443
3813
  const fileName = typeof (raw == null ? void 0 : raw.fileName) === "string" ? raw.fileName : void 0;
3814
+ const auto = Boolean((raw == null ? void 0 : raw.auto) ?? (raw == null ? void 0 : raw.isAuto) ?? (raw == null ? void 0 : raw.source) === "auto");
3444
3815
  return {
3445
3816
  id: String(id),
3446
3817
  lang,
@@ -3450,22 +3821,10 @@ function normalizeSubtitleTrack(raw) {
3450
3821
  url,
3451
3822
  createdAt,
3452
3823
  fileName,
3453
- status: "ready"
3824
+ status: "ready",
3825
+ auto
3454
3826
  };
3455
3827
  }
3456
- async function listTracks(videoId, options = {}) {
3457
- const url = buildApiUrl$1(`/v1/videos/${videoId}/subtitles`, options.baseUrl);
3458
- const response = await fetch(url, {
3459
- method: "GET",
3460
- credentials: "include",
3461
- headers: {
3462
- ...getAuthHeaders$1(options.authToken)
3463
- }
3464
- });
3465
- const data = await handleResponse$1(response);
3466
- const rawTracks = Array.isArray(data) ? data : Array.isArray(data == null ? void 0 : data.tracks) ? data.tracks : [];
3467
- return rawTracks.map(normalizeSubtitleTrack).filter((track) => track.id);
3468
- }
3469
3828
  async function uploadTrack(videoId, file, uploadOptions, options = {}) {
3470
3829
  const params = new URLSearchParams();
3471
3830
  params.set("lang", uploadOptions.lang);
@@ -3555,21 +3914,25 @@ function getSubtitleUrl(track, baseUrl) {
3555
3914
  }
3556
3915
  function VideoPlayerState({
3557
3916
  videoId,
3917
+ language,
3558
3918
  baseUrl,
3559
3919
  videoUrl,
3560
3920
  primaryUrl,
3561
3921
  optimizedReady,
3562
3922
  nativeVideoUrl,
3923
+ rawUrl,
3563
3924
  storyboard,
3564
3925
  chapters,
3565
3926
  subtitles,
3927
+ isProcessing = false,
3566
3928
  posterUrl,
3567
3929
  onPlayerInfo
3568
3930
  }) {
3569
- const { t } = useTranslation();
3931
+ const { t, i18n } = useTranslation();
3570
3932
  const [currentVideoUrl, setCurrentVideoUrl] = useState(null);
3571
3933
  const [currentNativeVideoUrl, setCurrentNativeVideoUrl] = useState(null);
3572
3934
  const [playerError, setPlayerError] = useState(null);
3935
+ const [hlsFailed, setHlsFailed] = useState(false);
3573
3936
  const playerRef = useRef(null);
3574
3937
  const nativeVideoRef = useRef(null);
3575
3938
  const containerRef = useRef(null);
@@ -3590,11 +3953,16 @@ function VideoPlayerState({
3590
3953
  );
3591
3954
  const shakaAddedIdsRef = useRef([]);
3592
3955
  const shakaFilterRegisteredRef = useRef(false);
3593
- const subtitlesFetchedRef = useRef(false);
3956
+ useEffect(() => {
3957
+ if (!language) {
3958
+ return;
3959
+ }
3960
+ i18n.changeLanguage(language).catch(() => {
3961
+ });
3962
+ }, [language]);
3594
3963
  useEffect(() => {
3595
3964
  if (!videoId) {
3596
3965
  setSubtitleTracks([]);
3597
- subtitlesFetchedRef.current = false;
3598
3966
  return;
3599
3967
  }
3600
3968
  if (subtitles != null) {
@@ -3605,24 +3973,11 @@ function VideoPlayerState({
3605
3973
  useEffect(() => {
3606
3974
  setIsAutoQualityEnabled(true);
3607
3975
  }, [videoId]);
3608
- const handleSubtitlesOpen = useCallback(async () => {
3609
- if (!videoId) return;
3610
- if (subtitles != null) {
3611
- const normalized = (subtitles || []).map(normalizeSubtitleTrack).filter((track) => track.id);
3612
- setSubtitleTracks(normalized);
3613
- return;
3614
- }
3615
- if (subtitlesFetchedRef.current) {
3616
- return;
3617
- }
3618
- try {
3619
- const tracks = await listTracks(videoId, { baseUrl });
3620
- subtitlesFetchedRef.current = true;
3621
- setSubtitleTracks(tracks);
3622
- } catch {
3623
- subtitlesFetchedRef.current = true;
3624
- }
3625
- }, [videoId, subtitles, baseUrl]);
3976
+ const handleSubtitlesOpen = useCallback(() => {
3977
+ if (!videoId || subtitles == null) return;
3978
+ const normalized = (subtitles || []).map(normalizeSubtitleTrack).filter((track) => track.id);
3979
+ setSubtitleTracks(normalized);
3980
+ }, [videoId, subtitles]);
3626
3981
  useEffect(() => {
3627
3982
  if (subtitleTracks.length === 0) {
3628
3983
  setMenuSubtitleItems([
@@ -3635,7 +3990,9 @@ function VideoPlayerState({
3635
3990
  { id: null, label: t("editor.video.settings.off") },
3636
3991
  ...subtitleTracks.map((track, index) => ({
3637
3992
  id: index,
3638
- label: track.label || track.lang || "Unknown"
3993
+ label: track.label || track.lang || "Unknown",
3994
+ lang: track.lang || void 0,
3995
+ isDefault: track.isDefault || false
3639
3996
  }))
3640
3997
  ];
3641
3998
  setMenuSubtitleItems(nextItems);
@@ -3746,9 +4103,18 @@ function VideoPlayerState({
3746
4103
  data: error.data
3747
4104
  });
3748
4105
  if (error.severity === 2) {
3749
- setPlayerError(
3750
- t("editor.video.player.playbackError", { code: error.code })
3751
- );
4106
+ const fallback = normalizeUrl(nativeVideoUrl, baseUrl) || normalizeUrl(rawUrl ?? null, baseUrl);
4107
+ if (fallback) {
4108
+ console.warn(
4109
+ `[VideoPlayer] HLS failed (code=${error.code}), falling back to native video:`,
4110
+ fallback
4111
+ );
4112
+ setHlsFailed(true);
4113
+ } else {
4114
+ setPlayerError(
4115
+ t("editor.video.player.playbackError", { code: error.code })
4116
+ );
4117
+ }
3752
4118
  } else {
3753
4119
  try {
3754
4120
  player.recover();
@@ -3768,7 +4134,7 @@ function VideoPlayerState({
3768
4134
  }
3769
4135
  }
3770
4136
  };
3771
- }, [currentVideoUrl]);
4137
+ }, [currentVideoUrl, nativeVideoUrl, rawUrl, baseUrl]);
3772
4138
  useEffect(() => {
3773
4139
  var _a, _b;
3774
4140
  if (optimizedReady && primaryUrl) {
@@ -3791,6 +4157,7 @@ function VideoPlayerState({
3791
4157
  }
3792
4158
  setCurrentVideoUrl(normalizedUrl);
3793
4159
  setPlayerError(null);
4160
+ setHlsFailed(false);
3794
4161
  previousVideoUrlRef.current = normalizedUrl;
3795
4162
  }
3796
4163
  } else if (nativeVideoUrl) {
@@ -3859,9 +4226,9 @@ function VideoPlayerState({
3859
4226
  }, [optimizedReady, currentVideoUrl]);
3860
4227
  useEffect(() => {
3861
4228
  var _a;
3862
- const nextVideoElement = optimizedReady ? ((_a = playerRef.current) == null ? void 0 : _a.videoElement) || null : nativeVideoRef.current;
4229
+ const nextVideoElement = optimizedReady && !hlsFailed ? ((_a = playerRef.current) == null ? void 0 : _a.videoElement) || null : nativeVideoRef.current;
3863
4230
  setActiveVideoElement(nextVideoElement);
3864
- }, [optimizedReady, currentVideoUrl, currentNativeVideoUrl]);
4231
+ }, [optimizedReady, hlsFailed, currentVideoUrl, currentNativeVideoUrl]);
3865
4232
  useEffect(() => {
3866
4233
  if (!activeVideoElement) return;
3867
4234
  const updatePaused = () => {
@@ -3895,9 +4262,9 @@ function VideoPlayerState({
3895
4262
  const shakaPlayer = ((_a = playerRef.current) == null ? void 0 : _a.player) || null;
3896
4263
  const nativeVideo = nativeVideoRef.current || null;
3897
4264
  const containerEl = containerRef.current || null;
3898
- const mode = optimizedReady && shakaPlayer ? "shaka" : "native";
4265
+ const mode = optimizedReady && !hlsFailed && shakaPlayer ? "shaka" : "native";
3899
4266
  onPlayerInfo({ shakaPlayer, nativeVideo, mode, containerEl });
3900
- }, [onPlayerInfo, optimizedReady, currentVideoUrl, currentNativeVideoUrl]);
4267
+ }, [onPlayerInfo, optimizedReady, hlsFailed, currentVideoUrl, currentNativeVideoUrl]);
3901
4268
  useEffect(() => {
3902
4269
  var _a;
3903
4270
  const nativeVideo = nativeVideoRef.current;
@@ -4180,6 +4547,7 @@ function VideoPlayerState({
4180
4547
  }
4181
4548
  );
4182
4549
  }
4550
+ const fallbackVideoUrl = currentNativeVideoUrl || normalizeUrl(rawUrl ?? null, baseUrl);
4183
4551
  const isCompact = playerWidth > 0 && playerWidth < 500;
4184
4552
  const isNarrow = playerWidth > 0 && playerWidth < 380;
4185
4553
  const hasChapters = ((chapters == null ? void 0 : chapters.length) ?? 0) > 0;
@@ -4200,6 +4568,7 @@ function VideoPlayerState({
4200
4568
  children: /* @__PURE__ */ jsxs(
4201
4569
  "div",
4202
4570
  {
4571
+ "data-test-id": "video-player-container",
4203
4572
  className: `video-player-container video-player-container--with-player ${isCompact ? "video-player--compact" : ""} ${isNarrow ? "video-player--narrow" : ""}`,
4204
4573
  style: {
4205
4574
  ["--video-subtitles-offset"]: subtitlesOffset
@@ -4207,16 +4576,16 @@ function VideoPlayerState({
4207
4576
  ref: containerRef,
4208
4577
  onClick: handleContainerClick,
4209
4578
  children: [
4210
- !optimizedReady && /* @__PURE__ */ jsx(
4579
+ (!optimizedReady || hlsFailed) && /* @__PURE__ */ jsx(
4211
4580
  "video",
4212
4581
  {
4213
4582
  ref: nativeVideoRef,
4214
- src: currentNativeVideoUrl || void 0,
4583
+ src: (hlsFailed ? fallbackVideoUrl : currentNativeVideoUrl) || void 0,
4215
4584
  className: "video-player-media",
4216
4585
  poster: posterUrl || void 0
4217
4586
  }
4218
4587
  ),
4219
- optimizedReady && currentVideoUrl && /* @__PURE__ */ jsx(
4588
+ optimizedReady && !hlsFailed && currentVideoUrl && /* @__PURE__ */ jsx(
4220
4589
  ShakaPlayer,
4221
4590
  {
4222
4591
  ref: playerRef,
@@ -4225,7 +4594,7 @@ function VideoPlayerState({
4225
4594
  className: "video-player-media"
4226
4595
  }
4227
4596
  ),
4228
- (currentNativeVideoUrl || currentVideoUrl) && /* @__PURE__ */ jsxs(Fragment, { children: [
4597
+ (currentNativeVideoUrl || currentVideoUrl || hlsFailed && fallbackVideoUrl) && /* @__PURE__ */ jsxs(Fragment, { children: [
4229
4598
  isPaused && !isCompact && /* @__PURE__ */ jsx(
4230
4599
  "button",
4231
4600
  {
@@ -4237,7 +4606,7 @@ function VideoPlayerState({
4237
4606
  activeVideoElement == null ? void 0 : activeVideoElement.play().catch(() => {
4238
4607
  });
4239
4608
  },
4240
- children: /* @__PURE__ */ jsx(PlayIcon, { size: 28 })
4609
+ children: /* @__PURE__ */ jsx(PlayIcon, { size: 32 })
4241
4610
  }
4242
4611
  ),
4243
4612
  /* @__PURE__ */ jsxs("div", { className: "video-player-overlay", children: [
@@ -4251,28 +4620,21 @@ function VideoPlayerState({
4251
4620
  isSettingsDisabled: false,
4252
4621
  onSubtitlesOpen: handleSubtitlesOpen,
4253
4622
  storyboard,
4254
- chapters,
4623
+ chapters: optimizedReady ? chapters : void 0,
4624
+ isProcessing,
4255
4625
  baseUrl,
4256
4626
  onSpeedClick: (speed) => {
4257
4627
  var _a;
4258
4628
  const shakaPlayer = ((_a = playerRef.current) == null ? void 0 : _a.player) || null;
4259
- const nextSpeed = speed;
4260
4629
  setSettingsSnapshot((prev) => ({
4261
4630
  ...prev,
4262
- currentSpeed: nextSpeed
4631
+ currentSpeed: speed
4263
4632
  }));
4264
- if (activeVideoElement) {
4265
- activeVideoElement.playbackRate = nextSpeed;
4266
- }
4267
4633
  if (shakaPlayer) {
4268
- setPlaybackRate(shakaPlayer, nextSpeed);
4269
- setSettingsSnapshot(
4270
- getSettingsSnapshot(shakaPlayer, activeVideoElement)
4271
- );
4272
- } else {
4273
- setSettingsSnapshot(
4274
- getSettingsSnapshot(null, activeVideoElement)
4275
- );
4634
+ setPlaybackRate(shakaPlayer, speed);
4635
+ }
4636
+ if (activeVideoElement) {
4637
+ activeVideoElement.playbackRate = speed;
4276
4638
  }
4277
4639
  },
4278
4640
  onQualityClick: (qualityId) => {
@@ -4398,13 +4760,15 @@ function VideoUploadComponent({
4398
4760
  fallbackNativeVideoUrl,
4399
4761
  onStatusAvailabilityChange,
4400
4762
  onOptimizedReadyChange,
4763
+ onStatusChange,
4401
4764
  onPlayerInfo
4402
4765
  }) {
4403
4766
  var _a, _b;
4404
4767
  const [editor] = useLexicalComposerContext();
4405
- const { t } = useTranslation();
4406
- const { config, registerUpload, unregisterUpload, reportError } = useVideoPluginContext();
4768
+ const { t, i18n } = useTranslation();
4769
+ const { config, dependencies, registerUpload, unregisterUpload, reportError } = useVideoPluginContext();
4407
4770
  const { maxFileSize = 5, pageId } = config;
4771
+ const SelectComponent = dependencies.Select || Select;
4408
4772
  const [currentState, setCurrentState] = useState(
4409
4773
  initialVideoState ?? "default"
4410
4774
  );
@@ -4495,7 +4859,7 @@ function VideoUploadComponent({
4495
4859
  isStatusAvailable
4496
4860
  } = useVideoStatus({
4497
4861
  videoId,
4498
- enabled: sourceType === "upload"
4862
+ enabled: sourceType === "upload" && !isUploading
4499
4863
  });
4500
4864
  const resolvedStatus = sourceType === "upload" ? status : null;
4501
4865
  const resolvedPlayback = sourceType === "upload" ? playback : null;
@@ -4524,6 +4888,9 @@ function VideoUploadComponent({
4524
4888
  useEffect(() => {
4525
4889
  onOptimizedReadyChange == null ? void 0 : onOptimizedReadyChange(resolvedOptimizedReady);
4526
4890
  }, [resolvedOptimizedReady, onOptimizedReadyChange]);
4891
+ useEffect(() => {
4892
+ onStatusChange == null ? void 0 : onStatusChange(resolvedStatus);
4893
+ }, [resolvedStatus, onStatusChange]);
4527
4894
  useEffect(() => {
4528
4895
  if (sourceType !== "upload") {
4529
4896
  return;
@@ -4594,10 +4961,15 @@ function VideoUploadComponent({
4594
4961
  const isProcessingStatus = (resolvedStatus == null ? void 0 : resolvedStatus.state) === "PROCESSING" || (resolvedStatus == null ? void 0 : resolvedStatus.state) === "UPLOADING";
4595
4962
  const hasProcessingPercent = typeof ((_a = resolvedStatus == null ? void 0 : resolvedStatus.processing) == null ? void 0 : _a.percent) === "number";
4596
4963
  const showProcessingBanner = currentState === "video-preview" && sourceType === "upload" && !!resolvedNativeVideoUrl && resolvedStatusAvailable && !resolvedOptimizedReady && (isProcessingStatus || hasProcessingPercent);
4597
- const processingPercent = Math.max(
4598
- 0,
4599
- Math.min(100, ((_b = resolvedStatus == null ? void 0 : resolvedStatus.processing) == null ? void 0 : _b.percent) ?? 0)
4600
- );
4964
+ const maxBannerPercentRef = useRef(0);
4965
+ const rawPercent = Math.max(0, Math.min(100, ((_b = resolvedStatus == null ? void 0 : resolvedStatus.processing) == null ? void 0 : _b.percent) ?? 0));
4966
+ if (rawPercent > maxBannerPercentRef.current) {
4967
+ maxBannerPercentRef.current = rawPercent;
4968
+ }
4969
+ if (!showProcessingBanner) {
4970
+ maxBannerPercentRef.current = 0;
4971
+ }
4972
+ const processingPercent = maxBannerPercentRef.current;
4601
4973
  const handleFileSelect = (file) => {
4602
4974
  if (sourceType !== "upload") {
4603
4975
  return;
@@ -4800,12 +5172,15 @@ function VideoUploadComponent({
4800
5172
  VideoPlayerState,
4801
5173
  {
4802
5174
  videoId,
5175
+ language: i18n.resolvedLanguage || i18n.language,
4803
5176
  videoUrl: resolvedVideoUrl,
4804
5177
  primaryUrl: resolvedPrimaryUrl,
4805
5178
  optimizedReady: resolvedOptimizedReady,
4806
5179
  nativeVideoUrl: resolvedNativeVideoUrl,
5180
+ rawUrl,
4807
5181
  storyboard: (resolvedStatus == null ? void 0 : resolvedStatus.storyboard) ?? null,
4808
- chapters,
5182
+ chapters: showProcessingBanner ? void 0 : chapters,
5183
+ isProcessing: showProcessingBanner,
4809
5184
  subtitles,
4810
5185
  posterUrl: posterUrl ?? ((_a2 = resolvedStatus == null ? void 0 : resolvedStatus.cover) == null ? void 0 : _a2.url) ?? null,
4811
5186
  onPlayerInfo
@@ -4842,23 +5217,21 @@ function VideoUploadComponent({
4842
5217
  onMouseDown: (e) => e.stopPropagation(),
4843
5218
  onPointerDown: (e) => e.stopPropagation(),
4844
5219
  children: /* @__PURE__ */ jsx(
4845
- Select,
5220
+ SelectComponent,
4846
5221
  {
4847
5222
  data: [
4848
- {
4849
- value: "link",
4850
- label: t("editor.video.source.embedLink")
4851
- },
4852
5223
  {
4853
5224
  value: "upload",
4854
5225
  label: t("editor.video.source.uploadVideo")
5226
+ },
5227
+ {
5228
+ value: "link",
5229
+ label: t("editor.video.source.embedLink")
4855
5230
  }
4856
5231
  ],
4857
5232
  value: sourceType,
4858
5233
  w: "max-content",
4859
- miw: 0,
4860
5234
  disabled: selectDisabled,
4861
- radius: "md",
4862
5235
  size: "sm",
4863
5236
  className: "video-upload-source-select",
4864
5237
  classNames: {
@@ -4866,8 +5239,10 @@ function VideoUploadComponent({
4866
5239
  wrapper: "video-upload-source-select__wrapper",
4867
5240
  input: "editor-select__input video-upload-source-select__input"
4868
5241
  },
5242
+ rightSectionWidth: 32,
4869
5243
  comboboxProps: {
4870
- position: "bottom-start"
5244
+ position: "bottom-start",
5245
+ width: 237
4871
5246
  },
4872
5247
  onChange: (value) => {
4873
5248
  if (value) {
@@ -4963,21 +5338,6 @@ async function listChaptersEffective(videoId, options = {}) {
4963
5338
  const data = await handleResponse(response);
4964
5339
  return Array.isArray(data) ? data : [];
4965
5340
  }
4966
- async function listChaptersSuggest(videoId, options = {}) {
4967
- const url = buildApiUrl(
4968
- `/v1/videos/${videoId}/chapters/suggest`,
4969
- options.baseUrl
4970
- );
4971
- const response = await fetch(url, {
4972
- method: "GET",
4973
- credentials: "include",
4974
- headers: {
4975
- ...getAuthHeaders(options.authToken)
4976
- }
4977
- });
4978
- const data = await handleResponse(response);
4979
- return Array.isArray(data) ? data : [];
4980
- }
4981
5341
  async function saveChapters(videoId, chapters, options = {}) {
4982
5342
  const url = buildApiUrl(`/v1/videos/${videoId}/chapters`, options.baseUrl);
4983
5343
  const response = await fetch(url, {
@@ -5220,7 +5580,7 @@ function ChapterRow({
5220
5580
  "aria-label": "Chapter actions",
5221
5581
  disabled: disabled2,
5222
5582
  radius: 8,
5223
- children: /* @__PURE__ */ jsx(IconDotsVertical, { size: 16 })
5583
+ children: /* @__PURE__ */ jsx(MoreVerticalIcon, { size: 16 })
5224
5584
  }
5225
5585
  ) }),
5226
5586
  /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsx(Menu.Item, { color: "red", onClick: () => onRemove(index), children: deleteChapterLabel }) })
@@ -5238,10 +5598,8 @@ function ChaptersSection({
5238
5598
  baseUrl,
5239
5599
  authToken,
5240
5600
  title: title2,
5241
- disableChaptersLabel,
5242
- toggleLabel,
5243
- autoChaptersEnabled,
5244
- onAutoChaptersChange,
5601
+ customLabel,
5602
+ dontShowLabel,
5245
5603
  chaptersDisabled,
5246
5604
  onChaptersDisabledChange,
5247
5605
  onSave,
@@ -5252,8 +5610,11 @@ function ChaptersSection({
5252
5610
  deleteChapterLabel,
5253
5611
  emptyLabel,
5254
5612
  errorLabel,
5255
- invalidRangeLabel
5613
+ invalidRangeLabel,
5614
+ addTranscriptManuallyLabel
5256
5615
  }) {
5616
+ const dependencies = useVideoPluginDependencies();
5617
+ const SelectComponent = dependencies.Select || Select;
5257
5618
  const [editableChapters, setEditableChapters] = useState(
5258
5619
  []
5259
5620
  );
@@ -5308,25 +5669,19 @@ function ChaptersSection({
5308
5669
  setIsLoading(false);
5309
5670
  }
5310
5671
  }, [videoId, apiOptions, applyChapters, errorLabel]);
5311
- const handleSuggest = useCallback(async () => {
5312
- if (!videoId) return;
5313
- hasLocalEditsRef.current = true;
5314
- setIsLoading(true);
5315
- setError(null);
5316
- setValidationError(null);
5317
- try {
5318
- const next = await listChaptersSuggest(videoId, apiOptions);
5319
- applyChapters(next);
5320
- } catch (err) {
5321
- setError(err instanceof Error ? err.message : errorLabel);
5322
- } finally {
5323
- setIsLoading(false);
5324
- }
5325
- }, [videoId, apiOptions, applyChapters, errorLabel]);
5326
- const getMaxAllowedSec = useCallback(() => {
5672
+ const reliableDurationSec = useMemo(() => {
5327
5673
  if (durationSec == null) return null;
5328
- return Math.floor(durationSec);
5329
- }, [durationSec]);
5674
+ const maxChapterStart = editableChapters.reduce(
5675
+ (max, ch) => Math.max(max, ch.startSec),
5676
+ 0
5677
+ );
5678
+ if (maxChapterStart > durationSec) return null;
5679
+ return durationSec;
5680
+ }, [durationSec, editableChapters]);
5681
+ const getMaxAllowedSec = useCallback(() => {
5682
+ if (reliableDurationSec == null) return null;
5683
+ return Math.floor(reliableDurationSec);
5684
+ }, [reliableDurationSec]);
5330
5685
  const validateChapters = useCallback(() => {
5331
5686
  const list = [...editableChapters].filter((ch) => ch.title.trim()).sort((a, b) => a.startSec - b.startSec);
5332
5687
  const maxAllowed = getMaxAllowedSec();
@@ -5381,7 +5736,7 @@ function ChaptersSection({
5381
5736
  hasLocalEditsRef.current = true;
5382
5737
  setValidationError(null);
5383
5738
  setEditableChapters((prev) => {
5384
- const maxAllowed = durationSec != null ? Math.floor(durationSec) : null;
5739
+ const maxAllowed = reliableDurationSec != null ? Math.floor(reliableDurationSec) : null;
5385
5740
  const sorted = [...prev].sort((a, b) => a.startSec - b.startSec);
5386
5741
  const lastStart = sorted.length > 0 ? Math.floor(sorted[sorted.length - 1].startSec) : -1;
5387
5742
  const nextStart = Math.max(0, lastStart + 1);
@@ -5457,115 +5812,102 @@ function ChaptersSection({
5457
5812
  loadEffective().catch(() => {
5458
5813
  });
5459
5814
  }, [videoId, initialChapters, applyChapters, loadEffective]);
5460
- return /* @__PURE__ */ jsxs(Box, { children: [
5815
+ return /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
5461
5816
  /* @__PURE__ */ jsx(
5462
5817
  Text,
5463
5818
  {
5464
- fw: 600,
5465
- size: "sm",
5466
- mb: "xs",
5467
5819
  className: "video-settings-modal-section-title",
5468
5820
  children: title2
5469
5821
  }
5470
5822
  ),
5471
- /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", mb: "xs", children: [
5472
- /* @__PURE__ */ jsx(Text, { size: "sm", className: "video-settings-modal-text-label", children: disableChaptersLabel }),
5473
- /* @__PURE__ */ jsx(
5474
- Switch,
5475
- {
5476
- size: "sm",
5477
- color: "var(--mantine-primary-color-filled)",
5478
- checked: chaptersDisabled,
5479
- onChange: (e) => {
5480
- const disabled2 = e.currentTarget.checked;
5481
- onChaptersDisabledChange(disabled2);
5482
- if (disabled2 && autoChaptersEnabled) {
5483
- onAutoChaptersChange(false);
5484
- }
5485
- }
5823
+ /* @__PURE__ */ jsx(
5824
+ SelectComponent,
5825
+ {
5826
+ size: "sm",
5827
+ radius: 8,
5828
+ allowDeselect: false,
5829
+ value: chaptersDisabled ? "disabled" : "custom",
5830
+ data: [
5831
+ { value: "custom", label: customLabel },
5832
+ { value: "disabled", label: dontShowLabel }
5833
+ ],
5834
+ onChange: (value) => {
5835
+ onChaptersDisabledChange(value === "disabled");
5836
+ },
5837
+ classNames: {
5838
+ root: "video-settings-modal-select-fullwidth",
5839
+ input: "video-settings-modal-language-select"
5840
+ },
5841
+ comboboxProps: {
5842
+ position: "bottom-start"
5486
5843
  }
5487
- )
5488
- ] }),
5489
- /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", mb: "xs", children: [
5490
- /* @__PURE__ */ jsx(Text, { size: "sm", className: "video-settings-modal-text-label", children: toggleLabel }),
5844
+ }
5845
+ ),
5846
+ !chaptersDisabled && /* @__PURE__ */ jsxs(Fragment, { children: [
5847
+ /* @__PURE__ */ jsx(Divider, { my: 4 }),
5848
+ addTranscriptManuallyLabel && /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, className: "video-settings-modal-text-label", children: addTranscriptManuallyLabel }),
5849
+ error && /* @__PURE__ */ jsx(Text, { size: "sm", c: "red", mb: "xs", children: error }),
5850
+ validationError && /* @__PURE__ */ jsx(Text, { size: "sm", c: "red", mb: "xs", children: validationError }),
5851
+ /* @__PURE__ */ jsx(Stack, { gap: 12, children: [...editableChapters].sort((a, b) => a.startSec - b.startSec).map((chapter, index, list) => {
5852
+ const next = list[index + 1] || null;
5853
+ const nextNext = list[index + 2] || null;
5854
+ const maxAllowed = reliableDurationSec != null ? Math.floor(reliableDurationSec) : null;
5855
+ const endSec = next != null ? Math.floor(next.startSec) : maxAllowed != null ? maxAllowed : null;
5856
+ const startSec = Math.floor(chapter.startSec);
5857
+ const prevStart = index > 0 ? Math.floor(list[index - 1].startSec) : null;
5858
+ const nextStart = next != null ? Math.floor(next.startSec) : null;
5859
+ const startMin = prevStart != null ? prevStart + 1 : 0;
5860
+ const startMaxByNext = nextStart != null ? nextStart - 1 : null;
5861
+ const startMaxByDuration = maxAllowed != null ? maxAllowed - 1 : null;
5862
+ const startMax = startMaxByNext != null && startMaxByDuration != null ? Math.min(startMaxByNext, startMaxByDuration) : startMaxByNext != null ? startMaxByNext : startMaxByDuration;
5863
+ const endMin = index < list.length - 1 ? startSec + 1 : null;
5864
+ const nextNextStart = nextNext != null ? Math.floor(nextNext.startSec) : null;
5865
+ const endMaxByNextNext = nextNextStart != null ? nextNextStart - 1 : null;
5866
+ const endMaxByDuration = maxAllowed != null ? maxAllowed : null;
5867
+ const endMax = endMaxByNextNext != null && endMaxByDuration != null ? Math.min(endMaxByNextNext, endMaxByDuration) : endMaxByNextNext != null ? endMaxByNextNext : endMaxByDuration;
5868
+ return /* @__PURE__ */ jsx(
5869
+ ChapterRow,
5870
+ {
5871
+ chapter,
5872
+ index,
5873
+ startSec,
5874
+ endSec,
5875
+ isLast: index === list.length - 1,
5876
+ startMin,
5877
+ startMax,
5878
+ endMin,
5879
+ endMax,
5880
+ disabled: false,
5881
+ startTimePlaceholder: timePlaceholder,
5882
+ endTimePlaceholder: reliableDurationSec != null ? secondsToTimestamp(Math.floor(reliableDurationSec)) : endTimePlaceholder,
5883
+ titlePlaceholder,
5884
+ deleteChapterLabel,
5885
+ onStartSecChange: handleStartSecChange,
5886
+ onEndSecChange: handleEndSecChange,
5887
+ onTitleChange: handleTitleChange,
5888
+ onRemove: handleChapterRemove
5889
+ },
5890
+ chapter.id
5891
+ );
5892
+ }) }),
5491
5893
  /* @__PURE__ */ jsx(
5492
- Switch,
5894
+ Text,
5493
5895
  {
5494
- size: "sm",
5495
- color: "var(--mantine-primary-color-filled)",
5496
- checked: autoChaptersEnabled,
5497
- disabled: chaptersDisabled,
5498
- onChange: (e) => {
5499
- const enabled = e.currentTarget.checked;
5500
- onAutoChaptersChange(enabled);
5501
- if (enabled) {
5502
- handleSuggest();
5503
- }
5504
- }
5896
+ component: "button",
5897
+ type: "button",
5898
+ className: "video-settings-modal-link",
5899
+ onClick: handleAddChapter,
5900
+ children: addChapterLabel
5505
5901
  }
5506
- )
5507
- ] }),
5508
- error && /* @__PURE__ */ jsx(Text, { size: "sm", c: "red", mb: "xs", children: error }),
5509
- validationError && /* @__PURE__ */ jsx(Text, { size: "sm", c: "red", mb: "xs", children: validationError }),
5510
- /* @__PURE__ */ jsx(Stack, { gap: 12, children: [...editableChapters].sort((a, b) => a.startSec - b.startSec).map((chapter, index, list) => {
5511
- const next = list[index + 1] || null;
5512
- const nextNext = list[index + 2] || null;
5513
- const maxAllowed = durationSec != null ? Math.floor(durationSec) : null;
5514
- const endSec = next != null ? Math.floor(next.startSec) : maxAllowed != null ? maxAllowed : null;
5515
- const startSec = Math.floor(chapter.startSec);
5516
- const prevStart = index > 0 ? Math.floor(list[index - 1].startSec) : null;
5517
- const nextStart = next != null ? Math.floor(next.startSec) : null;
5518
- const startMin = prevStart != null ? prevStart + 1 : 0;
5519
- const startMaxByNext = nextStart != null ? nextStart - 1 : null;
5520
- const startMaxByDuration = maxAllowed != null ? maxAllowed - 1 : null;
5521
- const startMax = startMaxByNext != null && startMaxByDuration != null ? Math.min(startMaxByNext, startMaxByDuration) : startMaxByNext != null ? startMaxByNext : startMaxByDuration;
5522
- const endMin = index < list.length - 1 ? startSec + 1 : null;
5523
- const nextNextStart = nextNext != null ? Math.floor(nextNext.startSec) : null;
5524
- const endMaxByNextNext = nextNextStart != null ? nextNextStart - 1 : null;
5525
- const endMaxByDuration = maxAllowed != null ? maxAllowed : null;
5526
- const endMax = endMaxByNextNext != null && endMaxByDuration != null ? Math.min(endMaxByNextNext, endMaxByDuration) : endMaxByNextNext != null ? endMaxByNextNext : endMaxByDuration;
5527
- return /* @__PURE__ */ jsx(
5528
- ChapterRow,
5529
- {
5530
- chapter,
5531
- index,
5532
- startSec,
5533
- endSec,
5534
- isLast: index === list.length - 1,
5535
- startMin,
5536
- startMax,
5537
- endMin,
5538
- endMax,
5539
- disabled: autoChaptersEnabled || chaptersDisabled,
5540
- startTimePlaceholder: timePlaceholder,
5541
- endTimePlaceholder,
5542
- titlePlaceholder,
5543
- deleteChapterLabel,
5544
- onStartSecChange: handleStartSecChange,
5545
- onEndSecChange: handleEndSecChange,
5546
- onTitleChange: handleTitleChange,
5547
- onRemove: handleChapterRemove
5548
- },
5549
- chapter.id
5550
- );
5551
- }) }),
5552
- /* @__PURE__ */ jsx(Flex, { gap: "xs", mt: "sm", wrap: "wrap", align: "center", children: /* @__PURE__ */ jsx(
5553
- Text,
5554
- {
5555
- component: "button",
5556
- type: "button",
5557
- className: "video-settings-modal-link",
5558
- onClick: handleAddChapter,
5559
- disabled: autoChaptersEnabled || chaptersDisabled,
5560
- children: addChapterLabel
5561
- }
5562
- ) }),
5563
- editableChapters.length === 0 && !isLoading && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", mt: "xs", children: emptyLabel })
5902
+ ),
5903
+ editableChapters.length === 0 && !isLoading && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: emptyLabel })
5904
+ ] })
5564
5905
  ] });
5565
5906
  }
5566
5907
  function CoverSection({
5567
5908
  opened,
5568
5909
  videoId,
5910
+ initialStatus,
5569
5911
  title: title2,
5570
5912
  uploadLabel,
5571
5913
  cropLabel,
@@ -5704,9 +6046,21 @@ function CoverSection({
5704
6046
  return ((_a2 = previews.find((p) => p.id === effectiveSelected)) == null ? void 0 : _a2.url) ?? ((_b2 = status == null ? void 0 : status.cover) == null ? void 0 : _b2.url) ?? null;
5705
6047
  }, [selectedPosterUrl, previews, effectiveSelected, (_b = status == null ? void 0 : status.cover) == null ? void 0 : _b.url]);
5706
6048
  useEffect(() => {
6049
+ var _a2, _b2, _c;
5707
6050
  if (!opened || !videoId) return;
5708
- loadStatus();
5709
- }, [opened, videoId, loadStatus]);
6051
+ if (initialStatus) {
6052
+ setStatus(initialStatus);
6053
+ const fallbackId = ((_b2 = (_a2 = initialStatus == null ? void 0 : initialStatus.previews) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.id) ?? null;
6054
+ const nextCoverId = ((_c = initialStatus == null ? void 0 : initialStatus.cover) == null ? void 0 : _c.previewId) ?? fallbackId;
6055
+ setSelectedPreviewId(nextCoverId);
6056
+ setLoadingIds(/* @__PURE__ */ new Set());
6057
+ setErrorIds(/* @__PURE__ */ new Set());
6058
+ setIsLoading(false);
6059
+ setLoadError(false);
6060
+ } else {
6061
+ loadStatus();
6062
+ }
6063
+ }, [opened, videoId]);
5710
6064
  useEffect(() => {
5711
6065
  if (!optimisticPreviewUrl) return;
5712
6066
  const api = emblaApiRef.current;
@@ -5734,13 +6088,10 @@ function CoverSection({
5734
6088
  },
5735
6089
  []
5736
6090
  );
5737
- return /* @__PURE__ */ jsxs(Box, { children: [
6091
+ return /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
5738
6092
  /* @__PURE__ */ jsx(
5739
6093
  Text,
5740
6094
  {
5741
- fw: 600,
5742
- size: "sm",
5743
- mb: "xs",
5744
6095
  className: "video-settings-modal-section-title",
5745
6096
  children: title2
5746
6097
  }
@@ -5757,13 +6108,13 @@ function CoverSection({
5757
6108
  controls: "video-settings-modal-cover-controls",
5758
6109
  control: "video-settings-modal-cover-control"
5759
6110
  },
5760
- slideSize: "129.333px",
6111
+ slideSize: "33.333%",
5761
6112
  slideGap: "10px",
5762
6113
  emblaOptions: { loop: false },
5763
6114
  withControls: showControls,
5764
6115
  draggable: slidesCount > 1,
5765
- nextControlIcon: /* @__PURE__ */ jsx(IconChevronRight, { size: 16 }),
5766
- previousControlIcon: /* @__PURE__ */ jsx(IconChevronLeft, { size: 16 }),
6116
+ nextControlIcon: /* @__PURE__ */ jsx(HugeiconsIcon, { icon: un, size: 20, color: "currentColor" }),
6117
+ previousControlIcon: /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Qt, size: 20, color: "currentColor" }),
5767
6118
  getEmblaApi: (embla) => {
5768
6119
  emblaApiRef.current = embla;
5769
6120
  },
@@ -5782,7 +6133,7 @@ function CoverSection({
5782
6133
  HugeiconsIcon,
5783
6134
  {
5784
6135
  icon: LD,
5785
- size: 24,
6136
+ size: 20,
5786
6137
  color: "var(--mantine-color-bright)"
5787
6138
  }
5788
6139
  ),
@@ -5805,7 +6156,7 @@ function CoverSection({
5805
6156
  return /* @__PURE__ */ jsx(Carousel.Slide, { children: /* @__PURE__ */ jsxs(
5806
6157
  Box,
5807
6158
  {
5808
- className: `video-settings-modal-cover-cell video-settings-modal-cover-thumb ${isSelected ? "selected" : ""} ${isLoading2 ? "loading" : ""} ${isError ? "error" : ""}`,
6159
+ className: `video-settings-modal-cover-cell video-settings-modal-cover-thumb ${isSelected && !isError ? "selected" : ""} ${isLoading2 ? "loading" : ""} ${isError ? "error" : ""}`,
5809
6160
  onClick: () => {
5810
6161
  if (isError) return;
5811
6162
  setSelectedPreviewId(preview.id);
@@ -5840,15 +6191,15 @@ function CoverSection({
5840
6191
  {
5841
6192
  className: "video-settings-modal-cover-error-icon",
5842
6193
  "aria-hidden": true,
5843
- children: "!"
6194
+ children: /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Uo, size: 24, color: "#fff" })
5844
6195
  }
5845
6196
  ),
5846
- isSelected && /* @__PURE__ */ jsx(
6197
+ isSelected && !isError && /* @__PURE__ */ jsx(
5847
6198
  "span",
5848
6199
  {
5849
6200
  className: "video-settings-modal-cover-check",
5850
6201
  "aria-hidden": true,
5851
- children: /* @__PURE__ */ jsx(IconCheck, { size: 12, stroke: 2.5 })
6202
+ children: /* @__PURE__ */ jsx(CheckCircleIcon, { size: 32 })
5852
6203
  }
5853
6204
  )
5854
6205
  ]
@@ -5858,7 +6209,7 @@ function CoverSection({
5858
6209
  ]
5859
6210
  }
5860
6211
  ),
5861
- !hasCoverCandidates && !isLoading && !loadError && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", mt: "xs", children: emptyCoverLabel })
6212
+ !hasCoverCandidates && !isLoading && !loadError && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: emptyCoverLabel })
5862
6213
  ] });
5863
6214
  }
5864
6215
  function FooterActions({
@@ -5874,8 +6225,8 @@ function FooterActions({
5874
6225
  size: "sm",
5875
6226
  variant: "subtle",
5876
6227
  color: "gray",
6228
+ radius: "md",
5877
6229
  onClick: onCancel,
5878
- styles: { root: { borderRadius: "var(--radius-radius-default, 8px)" } },
5879
6230
  children: cancelLabel
5880
6231
  }
5881
6232
  ),
@@ -5884,8 +6235,8 @@ function FooterActions({
5884
6235
  {
5885
6236
  size: "sm",
5886
6237
  color: "blue",
6238
+ radius: "md",
5887
6239
  onClick: onSave,
5888
- styles: { root: { borderRadius: "var(--radius-radius-default, 8px)" } },
5889
6240
  children: saveLabel
5890
6241
  }
5891
6242
  )
@@ -5934,6 +6285,8 @@ function ManualSubtitlesPanel({
5934
6285
  onTracksChange
5935
6286
  }) {
5936
6287
  const { t } = useTranslation();
6288
+ const dependencies = useVideoPluginDependencies();
6289
+ const SelectComponent = dependencies.Select || Select;
5937
6290
  const [tracks, setTracks] = useState([]);
5938
6291
  const [drafts, setDrafts] = useState([]);
5939
6292
  const [loadError, setLoadError] = useState(null);
@@ -5957,7 +6310,8 @@ function ManualSubtitlesPanel({
5957
6310
  return;
5958
6311
  }
5959
6312
  try {
5960
- const nextTracks = await listTracks(videoId, apiOptions);
6313
+ const status = await fetchStatus(videoId);
6314
+ const nextTracks = ((status == null ? void 0 : status.subtitles) || []).map(normalizeSubtitleTrack).filter((track) => track.id);
5961
6315
  setTracks(nextTracks);
5962
6316
  setLoadError(null);
5963
6317
  } catch (error) {
@@ -5965,7 +6319,7 @@ function ManualSubtitlesPanel({
5965
6319
  setLoadError(message);
5966
6320
  }
5967
6321
  },
5968
- [videoId, apiOptions, t, statusSubtitles]
6322
+ [videoId, t, statusSubtitles]
5969
6323
  );
5970
6324
  useEffect(() => {
5971
6325
  if (!videoId) {
@@ -5975,7 +6329,7 @@ function ManualSubtitlesPanel({
5975
6329
  }
5976
6330
  refreshTracks().catch(() => {
5977
6331
  });
5978
- }, [videoId, refreshTracks, statusSubtitles]);
6332
+ }, [videoId, refreshTracks]);
5979
6333
  useEffect(() => {
5980
6334
  onTracksChange == null ? void 0 : onTracksChange(tracks);
5981
6335
  }, [tracks, onTracksChange]);
@@ -6044,10 +6398,10 @@ function ManualSubtitlesPanel({
6044
6398
  const handleDelete = useCallback(
6045
6399
  async (trackId) => {
6046
6400
  if (!videoId) return;
6401
+ setTracks((prev) => prev.filter((t2) => t2.id !== trackId));
6047
6402
  await deleteTrack(videoId, trackId, apiOptions);
6048
- await refreshTracks(true);
6049
6403
  },
6050
- [videoId, apiOptions, refreshTracks]
6404
+ [videoId, apiOptions]
6051
6405
  );
6052
6406
  useEffect(() => {
6053
6407
  if (mode !== "native" || !nativeVideo) return;
@@ -6148,7 +6502,7 @@ function ManualSubtitlesPanel({
6148
6502
  children: t("editor.video.settingsModal.uploadSubtitlesManually")
6149
6503
  }
6150
6504
  ),
6151
- tracks.map((track) => /* @__PURE__ */ jsxs(
6505
+ tracks.filter((track) => !track.isDefault).map((track) => /* @__PURE__ */ jsxs(
6152
6506
  Flex,
6153
6507
  {
6154
6508
  align: "center",
@@ -6157,24 +6511,25 @@ function ManualSubtitlesPanel({
6157
6511
  className: "video-settings-modal-subtitles-row",
6158
6512
  children: [
6159
6513
  /* @__PURE__ */ jsx(
6160
- Select,
6514
+ SelectComponent,
6161
6515
  {
6162
6516
  size: "sm",
6163
6517
  data: LANGUAGE_OPTIONS,
6164
6518
  value: track.lang,
6165
- allowDeselect: false,
6166
6519
  disabled: true,
6167
6520
  flex: 1,
6168
- miw: 140
6521
+ miw: 140,
6522
+ w: "auto",
6523
+ comboboxProps: { width: "target" },
6524
+ classNames: { input: "video-settings-modal-language-select" }
6169
6525
  }
6170
6526
  ),
6171
6527
  /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 6, flex: 1, children: [
6172
6528
  /* @__PURE__ */ jsx(
6173
- IconCheck,
6529
+ TickIcon,
6174
6530
  {
6175
6531
  size: 20,
6176
- color: "var(--mantine-color-green-6)",
6177
- stroke: 2
6532
+ color: "var(--mantine-color-green-6)"
6178
6533
  }
6179
6534
  ),
6180
6535
  /* @__PURE__ */ jsx(Text, { size: "sm", children: t("editor.video.settingsModal.successfullyLoaded") })
@@ -6183,11 +6538,11 @@ function ManualSubtitlesPanel({
6183
6538
  /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(
6184
6539
  ActionIcon,
6185
6540
  {
6186
- size: "sm",
6541
+ size: 36,
6187
6542
  variant: "subtle",
6188
6543
  color: "gray",
6189
6544
  "aria-label": "Subtitle actions",
6190
- children: /* @__PURE__ */ jsx(IconDotsVertical, { size: 16 })
6545
+ children: /* @__PURE__ */ jsx(MoreVerticalIcon, { size: 20 })
6191
6546
  }
6192
6547
  ) }),
6193
6548
  /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsx(Menu.Item, { color: "red", onClick: () => handleDelete(track.id), children: t("editor.video.settingsModal.deleteSubtitle") }) })
@@ -6202,7 +6557,8 @@ function ManualSubtitlesPanel({
6202
6557
  draft,
6203
6558
  onChange: (updates) => updateDraft(draft.id, updates),
6204
6559
  onUpload: (file) => handleUploadDraft(draft.id, file),
6205
- onRemove: () => handleRemoveDraft(draft.id)
6560
+ onRemove: () => handleRemoveDraft(draft.id),
6561
+ SelectComponent
6206
6562
  },
6207
6563
  draft.id
6208
6564
  )),
@@ -6213,13 +6569,12 @@ function ManualSubtitlesPanel({
6213
6569
  type: "button",
6214
6570
  className: "video-settings-modal-link",
6215
6571
  onClick: handleAddDraft,
6216
- mt: "sm",
6217
6572
  children: t("editor.video.settingsModal.addSubtitleTrack")
6218
6573
  }
6219
6574
  )
6220
6575
  ] });
6221
6576
  }
6222
- function DraftRow({ draft, onChange, onUpload, onRemove }) {
6577
+ function DraftRow({ draft, onChange, onUpload, onRemove, SelectComponent }) {
6223
6578
  const { t } = useTranslation();
6224
6579
  const inputRef = useRef(null);
6225
6580
  const handleFileChange = (e) => {
@@ -6233,12 +6588,12 @@ function DraftRow({ draft, onChange, onUpload, onRemove }) {
6233
6588
  Flex,
6234
6589
  {
6235
6590
  align: "center",
6236
- gap: "xs",
6591
+ gap: "md",
6237
6592
  wrap: "nowrap",
6238
6593
  className: "video-settings-modal-subtitles-row",
6239
6594
  children: [
6240
6595
  /* @__PURE__ */ jsx(
6241
- Select,
6596
+ SelectComponent,
6242
6597
  {
6243
6598
  size: "sm",
6244
6599
  placeholder: t("editor.video.settingsModal.selectLanguage"),
@@ -6249,7 +6604,10 @@ function DraftRow({ draft, onChange, onUpload, onRemove }) {
6249
6604
  label: value ? LANGUAGE_LABELS[value] : null
6250
6605
  }),
6251
6606
  flex: 1,
6252
- miw: 140
6607
+ miw: 140,
6608
+ w: "auto",
6609
+ comboboxProps: { width: "target" },
6610
+ inputClassName: "video-settings-modal-language-select"
6253
6611
  }
6254
6612
  ),
6255
6613
  /* @__PURE__ */ jsx(Flex, { align: "center", gap: 6, flex: 1, children: draft.status === "uploading" ? /* @__PURE__ */ jsx(Loader, { size: 22, color: "blue" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -6266,7 +6624,7 @@ function DraftRow({ draft, onChange, onUpload, onRemove }) {
6266
6624
  /* @__PURE__ */ jsx(
6267
6625
  Button,
6268
6626
  {
6269
- variant: "default",
6627
+ variant: "light",
6270
6628
  size: "sm",
6271
6629
  className: "video-settings-modal-upload-button",
6272
6630
  disabled: !draft.lang,
@@ -6282,11 +6640,11 @@ function DraftRow({ draft, onChange, onUpload, onRemove }) {
6282
6640
  /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(
6283
6641
  ActionIcon,
6284
6642
  {
6285
- size: "sm",
6643
+ size: 36,
6286
6644
  variant: "subtle",
6287
6645
  color: "gray",
6288
6646
  "aria-label": "Subtitle actions",
6289
- children: /* @__PURE__ */ jsx(IconDotsVertical, { size: 16 })
6647
+ children: /* @__PURE__ */ jsx(MoreVerticalIcon, { size: 20 })
6290
6648
  }
6291
6649
  ) }),
6292
6650
  /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsx(Menu.Item, { color: "red", onClick: onRemove, children: t("editor.video.settingsModal.deleteSubtitle") }) })
@@ -6300,6 +6658,8 @@ function VideoSettingsModal({
6300
6658
  opened,
6301
6659
  onClose,
6302
6660
  videoId,
6661
+ initialStatus,
6662
+ onStatusChange,
6303
6663
  onPosterChange,
6304
6664
  onChaptersSaved,
6305
6665
  onChaptersDisabledChange,
@@ -6311,12 +6671,11 @@ function VideoSettingsModal({
6311
6671
  playerMode = "native"
6312
6672
  }) {
6313
6673
  const { t } = useTranslation();
6314
- const [autoChaptersEnabled, setAutoChaptersEnabled] = useState(true);
6315
6674
  const [chaptersDisabledValue, setChaptersDisabledValue] = useState(chaptersDisabled);
6316
6675
  const [selectedPosterUrl, setSelectedPosterUrl] = useState(
6317
6676
  null
6318
6677
  );
6319
- const [status, setStatus] = useState(null);
6678
+ const [status, setStatus] = useState(initialStatus ?? null);
6320
6679
  const [subtitlesSnapshot, setSubtitlesSnapshot] = useState(
6321
6680
  []
6322
6681
  );
@@ -6331,7 +6690,10 @@ function VideoSettingsModal({
6331
6690
  setStatus(null);
6332
6691
  return;
6333
6692
  }
6334
- fetchStatus(videoId).then((nextStatus) => setStatus(nextStatus)).catch(() => {
6693
+ fetchStatus(videoId).then((nextStatus) => {
6694
+ setStatus(nextStatus);
6695
+ onStatusChange == null ? void 0 : onStatusChange(nextStatus);
6696
+ }).catch(() => {
6335
6697
  });
6336
6698
  }, [opened, videoId]);
6337
6699
  useEffect(() => {
@@ -6374,97 +6736,95 @@ function VideoSettingsModal({
6374
6736
  onClose,
6375
6737
  title: t("editor.video.settingsModal.title"),
6376
6738
  size: "md",
6739
+ radius: "lg",
6377
6740
  withinPortal: true,
6378
6741
  zIndex: 300,
6379
6742
  className: "video-settings-modal",
6380
- children: /* @__PURE__ */ jsx(Box, { className: "video-settings-modal-body", children: /* @__PURE__ */ jsxs(Stack, { gap: "lg", children: [
6381
- /* @__PURE__ */ jsx(
6382
- CoverSection,
6383
- {
6384
- opened,
6385
- videoId,
6386
- title: t("editor.video.settingsModal.cover"),
6387
- uploadLabel: t("editor.video.settingsModal.uploadFile"),
6388
- cropLabel: t("editor.video.settingsModal.cropCoverImage"),
6389
- emptyCoverLabel: t("editor.video.settingsModal.emptyCovers"),
6390
- loadErrorLabel: t("editor.video.settingsModal.loadError"),
6391
- retryLabel: t("editor.video.settingsModal.retry"),
6392
- onCoverUpload: handleCoverUpload,
6393
- onSelectedPosterChange: handlePosterSelect,
6394
- selectedPosterUrl: selectedPosterUrl ?? posterUrl ?? null
6395
- }
6396
- ),
6397
- /* @__PURE__ */ jsx(Divider, {}),
6398
- /* @__PURE__ */ jsxs(Box, { children: [
6399
- /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 6, mb: "xs", children: [
6400
- /* @__PURE__ */ jsx(
6401
- Text,
6402
- {
6403
- fw: 600,
6404
- size: "sm",
6405
- className: "video-settings-modal-section-title",
6406
- children: t("editor.video.settingsModal.subtitles")
6407
- }
6408
- ),
6743
+ children: /* @__PURE__ */ jsx(Box, { className: "video-settings-modal-body", children: /* @__PURE__ */ jsxs(Stack, { gap: 24, children: [
6744
+ /* @__PURE__ */ jsxs(Stack, { gap: 32, children: [
6745
+ /* @__PURE__ */ jsx(
6746
+ CoverSection,
6747
+ {
6748
+ opened,
6749
+ videoId,
6750
+ title: t("editor.video.settingsModal.cover"),
6751
+ uploadLabel: t("editor.video.settingsModal.uploadFile"),
6752
+ cropLabel: t("editor.video.settingsModal.cropCoverImage"),
6753
+ emptyCoverLabel: t("editor.video.settingsModal.emptyCovers"),
6754
+ loadErrorLabel: t("editor.video.settingsModal.loadError"),
6755
+ retryLabel: t("editor.video.settingsModal.retry"),
6756
+ onCoverUpload: handleCoverUpload,
6757
+ onSelectedPosterChange: handlePosterSelect,
6758
+ selectedPosterUrl: selectedPosterUrl ?? posterUrl ?? null
6759
+ }
6760
+ ),
6761
+ /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
6762
+ /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 6, children: [
6763
+ /* @__PURE__ */ jsx(
6764
+ Text,
6765
+ {
6766
+ className: "video-settings-modal-section-title",
6767
+ children: t("editor.video.settingsModal.subtitles")
6768
+ }
6769
+ ),
6770
+ /* @__PURE__ */ jsx(
6771
+ Tooltip,
6772
+ {
6773
+ label: t("editor.video.settingsModal.subtitlesFormatHint"),
6774
+ position: "right",
6775
+ withArrow: true,
6776
+ children: /* @__PURE__ */ jsx(HugeiconsIcon, { icon: yR, size: 16, color: "var(--mantine-color-dimmed)" })
6777
+ }
6778
+ )
6779
+ ] }),
6409
6780
  /* @__PURE__ */ jsx(
6410
- Tooltip,
6781
+ ManualSubtitlesPanel,
6411
6782
  {
6412
- label: t("editor.video.settingsModal.subtitlesFormatHint"),
6413
- position: "right",
6414
- withArrow: true,
6415
- children: /* @__PURE__ */ jsx(IconHelpCircle, { size: 20, stroke: 1.5, color: "var(--mantine-color-dimmed)" })
6783
+ videoId,
6784
+ mode: playerMode,
6785
+ shakaPlayer,
6786
+ nativeVideo,
6787
+ statusSubtitles: status == null ? void 0 : status.subtitles,
6788
+ onTracksChange: setSubtitlesSnapshot
6416
6789
  }
6417
6790
  )
6418
6791
  ] }),
6419
6792
  /* @__PURE__ */ jsx(
6420
- ManualSubtitlesPanel,
6793
+ ChaptersSection,
6421
6794
  {
6422
6795
  videoId,
6423
- mode: playerMode,
6424
- shakaPlayer,
6796
+ initialChapters: status == null ? void 0 : status.chapters,
6425
6797
  nativeVideo,
6426
- statusSubtitles: status == null ? void 0 : status.subtitles,
6427
- onTracksChange: setSubtitlesSnapshot
6798
+ title: t("editor.video.settingsModal.chapters"),
6799
+ customLabel: t("editor.video.settingsModal.chaptersCustom"),
6800
+ dontShowLabel: t("editor.video.settingsModal.chaptersDontShow"),
6801
+ chaptersDisabled: chaptersDisabledValue,
6802
+ onChaptersDisabledChange: setChaptersDisabledValue,
6803
+ onSave: (handler) => {
6804
+ saveChaptersRef.current = handler;
6805
+ },
6806
+ timePlaceholder: t(
6807
+ "editor.video.settingsModal.chaptersTimePlaceholder"
6808
+ ),
6809
+ titlePlaceholder: t(
6810
+ "editor.video.settingsModal.chaptersTitlePlaceholder"
6811
+ ),
6812
+ endTimePlaceholder: t(
6813
+ "editor.video.settingsModal.chaptersEndTimePlaceholder"
6814
+ ),
6815
+ addChapterLabel: t("editor.video.settingsModal.addChapter"),
6816
+ deleteChapterLabel: t("editor.video.settingsModal.deleteChapter"),
6817
+ emptyLabel: t("editor.video.settingsModal.emptyChapters"),
6818
+ errorLabel: t("editor.video.settingsModal.chaptersError"),
6819
+ invalidRangeLabel: t(
6820
+ "editor.video.settingsModal.chaptersInvalidTimeRange"
6821
+ ),
6822
+ addTranscriptManuallyLabel: t(
6823
+ "editor.video.settingsModal.addTranscriptManually"
6824
+ )
6428
6825
  }
6429
6826
  )
6430
6827
  ] }),
6431
- /* @__PURE__ */ jsx(Divider, {}),
6432
- /* @__PURE__ */ jsx(
6433
- ChaptersSection,
6434
- {
6435
- videoId,
6436
- initialChapters: status == null ? void 0 : status.chapters,
6437
- nativeVideo,
6438
- title: t("editor.video.settingsModal.chapters"),
6439
- toggleLabel: t("editor.video.settingsModal.enableAutoChapters"),
6440
- disableChaptersLabel: t(
6441
- "editor.video.settingsModal.disableChapters"
6442
- ),
6443
- autoChaptersEnabled,
6444
- onAutoChaptersChange: setAutoChaptersEnabled,
6445
- chaptersDisabled: chaptersDisabledValue,
6446
- onChaptersDisabledChange: setChaptersDisabledValue,
6447
- onSave: (handler) => {
6448
- saveChaptersRef.current = handler;
6449
- },
6450
- timePlaceholder: t(
6451
- "editor.video.settingsModal.chaptersTimePlaceholder"
6452
- ),
6453
- titlePlaceholder: t(
6454
- "editor.video.settingsModal.chaptersTitlePlaceholder"
6455
- ),
6456
- endTimePlaceholder: t(
6457
- "editor.video.settingsModal.chaptersEndTimePlaceholder"
6458
- ),
6459
- addChapterLabel: t("editor.video.settingsModal.addChapter"),
6460
- deleteChapterLabel: t("editor.video.settingsModal.deleteChapter"),
6461
- emptyLabel: t("editor.video.settingsModal.emptyChapters"),
6462
- errorLabel: t("editor.video.settingsModal.chaptersError"),
6463
- invalidRangeLabel: t(
6464
- "editor.video.settingsModal.chaptersInvalidTimeRange"
6465
- )
6466
- }
6467
- ),
6468
6828
  /* @__PURE__ */ jsx(
6469
6829
  FooterActions,
6470
6830
  {
@@ -6499,7 +6859,7 @@ function VideoBlock({
6499
6859
  alignment
6500
6860
  }) {
6501
6861
  const { dependencies } = useVideoPluginContext();
6502
- const { ResizableContainer, AlignmentComponent, Icon, deleteNode } = dependencies;
6862
+ const { ResizableContainer, AlignmentComponent, deleteNode } = dependencies;
6503
6863
  const [, setInvalidUrl] = useState(false);
6504
6864
  const [isPreviewVisible, setIsPreviewVisible] = useState(true);
6505
6865
  const [openedAlignment, setOpenedAlignment] = useState(false);
@@ -6508,6 +6868,7 @@ function VideoBlock({
6508
6868
  const [chaptersDisabled, setChaptersDisabled] = useState(false);
6509
6869
  const [chaptersOverride, setChaptersOverride] = useState(null);
6510
6870
  const [subtitlesOverride, setSubtitlesOverride] = useState(null);
6871
+ const [videoStatus, setVideoStatus] = useState(null);
6511
6872
  const [isStatusAvailable, setIsStatusAvailable] = useState(true);
6512
6873
  const [isOptimizedReady, setIsOptimizedReady] = useState(false);
6513
6874
  const [playerInfo, setPlayerInfo] = useState({
@@ -6586,6 +6947,7 @@ function VideoBlock({
6586
6947
  });
6587
6948
  }, [editor, nodeKey]);
6588
6949
  const resolvedChaptersOverride = chaptersDisabled ? [] : chaptersOverride;
6950
+ const TrashIcon = /* @__PURE__ */ jsx(HugeiconsIcon, { icon: tI, size: 16, color: "var(--mantine-color-red-outline)" });
6589
6951
  const uploadComponentProps = {
6590
6952
  className,
6591
6953
  format,
@@ -6596,8 +6958,6 @@ function VideoBlock({
6596
6958
  onStateChange: handleUploadStateChange,
6597
6959
  initialVideoState: videoID && (platform === "download" || platform === "link" || platform === "youtube" || platform === "vk" || platform === "rutube") ? "video-preview" : void 0
6598
6960
  };
6599
- const IconComponent = Icon;
6600
- const TrashIcon = IconComponent ? /* @__PURE__ */ jsx(IconComponent, { name: "trash", size: 14 }) : /* @__PURE__ */ jsx("span", { children: "🗑" });
6601
6961
  return /* @__PURE__ */ jsx(
6602
6962
  ResizableContainer,
6603
6963
  {
@@ -6620,12 +6980,13 @@ function VideoBlock({
6620
6980
  "aria-label": "Settings",
6621
6981
  className: "media-action",
6622
6982
  variant: "default",
6623
- size: 24,
6983
+ size: 32,
6984
+ radius: 8,
6624
6985
  onClick: (event) => {
6625
6986
  event.stopPropagation();
6626
6987
  setSettingsModalOpened(true);
6627
6988
  },
6628
- children: /* @__PURE__ */ jsx(SettingsIcon, { size: 14 })
6989
+ children: /* @__PURE__ */ jsx(SettingsIcon, { size: 16 })
6629
6990
  }
6630
6991
  ) }),
6631
6992
  /* @__PURE__ */ jsx(
@@ -6634,6 +6995,8 @@ function VideoBlock({
6634
6995
  opened: settingsModalOpened,
6635
6996
  onClose: () => setSettingsModalOpened(false),
6636
6997
  videoId: videoID,
6998
+ initialStatus: videoStatus,
6999
+ onStatusChange: setVideoStatus,
6637
7000
  posterUrl,
6638
7001
  onPosterChange: handlePosterChange,
6639
7002
  onChaptersSaved: (chapters) => setChaptersOverride(chapters),
@@ -6660,10 +7023,11 @@ function VideoBlock({
6660
7023
  ActionIcon,
6661
7024
  {
6662
7025
  color: "gray",
6663
- "aria-label": "Settings",
7026
+ "aria-label": "Delete",
6664
7027
  className: "media-action",
6665
7028
  variant: "default",
6666
- size: 24,
7029
+ size: 32,
7030
+ radius: 8,
6667
7031
  onClick: handleDelete,
6668
7032
  children: TrashIcon
6669
7033
  }
@@ -6679,6 +7043,7 @@ function VideoBlock({
6679
7043
  subtitlesOverride,
6680
7044
  platform,
6681
7045
  fallbackNativeVideoUrl,
7046
+ onStatusChange: setVideoStatus,
6682
7047
  onStatusAvailabilityChange: setIsStatusAvailable,
6683
7048
  onOptimizedReadyChange: setIsOptimizedReady,
6684
7049
  onPlayerInfo: handlePlayerInfo
@@ -6785,9 +7150,19 @@ class VideoNode extends DecoratorNode {
6785
7150
  return cloned;
6786
7151
  }
6787
7152
  static importJSON(serializedNode) {
7153
+ let videoID = serializedNode.videoID;
7154
+ const isUuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
7155
+ if (!isUuid.test(videoID) && serializedNode.url) {
7156
+ const match = serializedNode.url.match(
7157
+ /([0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12})/i
7158
+ );
7159
+ if (match) {
7160
+ videoID = match[1];
7161
+ }
7162
+ }
6788
7163
  const node = new VideoNode(
6789
7164
  serializedNode.platform,
6790
- serializedNode.videoID,
7165
+ videoID,
6791
7166
  serializedNode.format ?? null,
6792
7167
  serializedNode.width,
6793
7168
  serializedNode.height,
@@ -7000,7 +7375,7 @@ function $isVideoNode(node) {
7000
7375
  function VideoPlugin() {
7001
7376
  const [editor] = useLexicalComposerContext();
7002
7377
  const { t } = useTranslation();
7003
- const { config, dependencies } = useVideoPluginContext();
7378
+ const { config, dependencies, onTrack } = useVideoPluginContext();
7004
7379
  const { imperativeHandleRef, maxFileSize = 5 } = config;
7005
7380
  const {
7006
7381
  createMediaComponent,
@@ -7039,6 +7414,7 @@ function VideoPlugin() {
7039
7414
  });
7040
7415
  return;
7041
7416
  }
7417
+ onTrack == null ? void 0 : onTrack("media_video_added", { source: "upload" });
7042
7418
  editor.dispatchCommand(INSERT_VIDEO_COMMAND, "upload");
7043
7419
  setTimeout(() => {
7044
7420
  editor.dispatchCommand(UPLOAD_VIDEO_COMMAND, files);
@@ -7060,6 +7436,7 @@ function VideoPlugin() {
7060
7436
  imperativeHandleRef,
7061
7437
  maxFileSize,
7062
7438
  t,
7439
+ onTrack,
7063
7440
  createMediaComponent,
7064
7441
  showErrorNotification,
7065
7442
  showMessageNotification
@@ -7075,12 +7452,13 @@ function videoPlugin(options) {
7075
7452
  node: VideoNode,
7076
7453
  Plugin: VideoPlugin,
7077
7454
  modes: { comment: false, default: true, editor: true },
7078
- Provider: ({ children }) => /* @__PURE__ */ jsx(
7455
+ Provider: ({ children, imperativeHandleRef }) => /* @__PURE__ */ jsx(
7079
7456
  VideoPluginProvider,
7080
7457
  {
7081
7458
  config,
7082
7459
  dependencies,
7083
7460
  callbacks,
7461
+ imperativeHandleRef,
7084
7462
  children
7085
7463
  }
7086
7464
  ),
@@ -7110,6 +7488,7 @@ export {
7110
7488
  INSERT_VIDEO_COMMAND,
7111
7489
  UPLOAD_VIDEO_COMMAND,
7112
7490
  VideoNode,
7491
+ VideoPlayerState,
7113
7492
  VideoPlugin,
7114
7493
  VideoPluginProvider,
7115
7494
  applyVideoSource,
@@ -7126,6 +7505,7 @@ export {
7126
7505
  useVideoPluginConfig,
7127
7506
  useVideoPluginContext,
7128
7507
  useVideoPluginDependencies,
7508
+ useVideoStatus,
7129
7509
  videoPlugin
7130
7510
  };
7131
7511
  //# sourceMappingURL=index.js.map