@netless/fastboard-react 0.2.11 → 0.3.0-canary.0

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 (105) hide show
  1. package/README.md +49 -0
  2. package/dist/index.d.ts +11 -140
  3. package/dist/index.js +73 -2130
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +71 -2129
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +16 -24
  8. package/src/Fastboard.tsx +12 -0
  9. package/src/PageControl.tsx +11 -0
  10. package/src/RedoUndo.tsx +8 -0
  11. package/src/Toolbar.tsx +8 -0
  12. package/src/ZoomControl.tsx +11 -0
  13. package/src/hooks.tsx +53 -0
  14. package/src/index.tsx +19 -0
  15. package/src/style.scss +3 -26
  16. package/src/behaviors/style.ts +0 -4
  17. package/src/components/Fastboard.scss +0 -46
  18. package/src/components/Fastboard.tsx +0 -108
  19. package/src/components/PageControl/PageControl.scss +0 -84
  20. package/src/components/PageControl/PageControl.tsx +0 -101
  21. package/src/components/PageControl/hooks.ts +0 -24
  22. package/src/components/PageControl/index.ts +0 -2
  23. package/src/components/PlayerControl/PlayerControl.scss +0 -146
  24. package/src/components/PlayerControl/PlayerControl.tsx +0 -131
  25. package/src/components/PlayerControl/components/Button.tsx +0 -44
  26. package/src/components/PlayerControl/hooks.ts +0 -88
  27. package/src/components/PlayerControl/icons/Loading.tsx +0 -13
  28. package/src/components/PlayerControl/icons/Pause.tsx +0 -13
  29. package/src/components/PlayerControl/icons/Play.tsx +0 -13
  30. package/src/components/PlayerControl/icons/index.ts +0 -10
  31. package/src/components/PlayerControl/index.ts +0 -2
  32. package/src/components/RedoUndo/RedoUndo.scss +0 -56
  33. package/src/components/RedoUndo/RedoUndo.tsx +0 -76
  34. package/src/components/RedoUndo/hooks.ts +0 -18
  35. package/src/components/RedoUndo/index.ts +0 -2
  36. package/src/components/ReplayFastboard.tsx +0 -36
  37. package/src/components/Toolbar/Content.tsx +0 -89
  38. package/src/components/Toolbar/Toolbar.scss +0 -343
  39. package/src/components/Toolbar/Toolbar.tsx +0 -84
  40. package/src/components/Toolbar/components/ApplianceButtons.tsx +0 -108
  41. package/src/components/Toolbar/components/AppsButton.tsx +0 -134
  42. package/src/components/Toolbar/components/Button.tsx +0 -45
  43. package/src/components/Toolbar/components/ColorBox.tsx +0 -55
  44. package/src/components/Toolbar/components/CutLine.tsx +0 -8
  45. package/src/components/Toolbar/components/PencilButton.tsx +0 -66
  46. package/src/components/Toolbar/components/ShapesButton.tsx +0 -135
  47. package/src/components/Toolbar/components/Slider.tsx +0 -26
  48. package/src/components/Toolbar/components/TextButton.tsx +0 -62
  49. package/src/components/Toolbar/components/UpDownButtons.tsx +0 -49
  50. package/src/components/Toolbar/components/assets/cocos.png +0 -0
  51. package/src/components/Toolbar/components/assets/collapsed.png +0 -0
  52. package/src/components/Toolbar/components/assets/countdown.png +0 -0
  53. package/src/components/Toolbar/components/assets/expanded.png +0 -0
  54. package/src/components/Toolbar/components/assets/geogebra.png +0 -0
  55. package/src/components/Toolbar/components/assets/vscode.png +0 -0
  56. package/src/components/Toolbar/const.ts +0 -32
  57. package/src/components/Toolbar/hooks.ts +0 -89
  58. package/src/components/Toolbar/icons/Apps.tsx +0 -16
  59. package/src/components/Toolbar/icons/Arrow.tsx +0 -13
  60. package/src/components/Toolbar/icons/Circle.tsx +0 -13
  61. package/src/components/Toolbar/icons/Clean.tsx +0 -16
  62. package/src/components/Toolbar/icons/Clicker.tsx +0 -19
  63. package/src/components/Toolbar/icons/Collapse.tsx +0 -13
  64. package/src/components/Toolbar/icons/Diamond.tsx +0 -13
  65. package/src/components/Toolbar/icons/Down.tsx +0 -13
  66. package/src/components/Toolbar/icons/Eraser.tsx +0 -16
  67. package/src/components/Toolbar/icons/Expand.tsx +0 -13
  68. package/src/components/Toolbar/icons/Laser.tsx +0 -21
  69. package/src/components/Toolbar/icons/Line.tsx +0 -13
  70. package/src/components/Toolbar/icons/Loading.tsx +0 -13
  71. package/src/components/Toolbar/icons/Pencil.tsx +0 -16
  72. package/src/components/Toolbar/icons/Rectangle.tsx +0 -13
  73. package/src/components/Toolbar/icons/Selector.tsx +0 -13
  74. package/src/components/Toolbar/icons/SpeechBalloon.tsx +0 -17
  75. package/src/components/Toolbar/icons/Star.tsx +0 -17
  76. package/src/components/Toolbar/icons/Text.tsx +0 -13
  77. package/src/components/Toolbar/icons/Triangle.tsx +0 -13
  78. package/src/components/Toolbar/icons/Up.tsx +0 -13
  79. package/src/components/Toolbar/icons/index.ts +0 -42
  80. package/src/components/Toolbar/index.ts +0 -2
  81. package/src/components/ZoomControl/ZoomControl.scss +0 -84
  82. package/src/components/ZoomControl/ZoomControl.tsx +0 -96
  83. package/src/components/ZoomControl/hooks.ts +0 -50
  84. package/src/components/ZoomControl/index.ts +0 -2
  85. package/src/components/hooks.ts +0 -66
  86. package/src/components/tippy-util.ts +0 -8
  87. package/src/i18n/en.json +0 -31
  88. package/src/i18n/index.ts +0 -29
  89. package/src/i18n/zh-CN.json +0 -32
  90. package/src/icons/Left.tsx +0 -15
  91. package/src/icons/Minus.tsx +0 -15
  92. package/src/icons/Plus.tsx +0 -15
  93. package/src/icons/Redo.tsx +0 -19
  94. package/src/icons/Reset.tsx +0 -17
  95. package/src/icons/Right.tsx +0 -15
  96. package/src/icons/Undo.tsx +0 -19
  97. package/src/icons/WhiteboardAdd.tsx +0 -26
  98. package/src/icons/index.tsx +0 -11
  99. package/src/index.ts +0 -12
  100. package/src/internal/helpers.ts +0 -31
  101. package/src/internal/hooks.ts +0 -23
  102. package/src/internal/index.ts +0 -2
  103. package/src/theme.ts +0 -36
  104. package/src/typings.ts +0 -15
  105. package/src/vanilla/index.tsx +0 -28
package/dist/index.mjs CHANGED
@@ -1,2149 +1,91 @@
1
- var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
- var __spreadValues = (a, b) => {
9
- for (var prop in b || (b = {}))
10
- if (__hasOwnProp.call(b, prop))
11
- __defNormalProp(a, prop, b[prop]);
12
- if (__getOwnPropSymbols)
13
- for (var prop of __getOwnPropSymbols(b)) {
14
- if (__propIsEnum.call(b, prop))
15
- __defNormalProp(a, prop, b[prop]);
16
- }
17
- return a;
18
- };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- var __objRest = (source, exclude) => {
21
- var target = {};
22
- for (var prop in source)
23
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
- target[prop] = source[prop];
25
- if (source != null && __getOwnPropSymbols)
26
- for (var prop of __getOwnPropSymbols(source)) {
27
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
- target[prop] = source[prop];
29
- }
30
- return target;
31
- };
32
-
33
- // src/internal/helpers.ts
34
- function noop() {
35
- return;
36
- }
37
- function applyStyles(css) {
38
- const el = document.createElement("style");
39
- el.appendChild(document.createTextNode(css));
40
- document.head.appendChild(el);
41
- return el;
42
- }
43
- function clamp(value, min, max) {
44
- return value < min ? min : value > max ? max : value;
45
- }
46
- function isEqualArray(a, b) {
47
- return a.length === b.length && a.every((e, i) => e === b[i]);
48
- }
49
- var defaultHotKeys = {
50
- changeToSelector: "s",
51
- changeToLaserPointer: "z",
52
- changeToPencil: "p",
53
- changeToRectangle: "r",
54
- changeToEllipse: "c",
55
- changeToEraser: "e",
56
- changeToText: "t",
57
- changeToStraight: "l",
58
- changeToArrow: "a",
59
- changeToHand: "h"
60
- };
61
-
62
- // src/internal/hooks.ts
63
- import { useCallback, useEffect, useRef, useState } from "react";
64
- function useLastValue(value) {
65
- const ref = useRef(value);
66
- useEffect(() => {
67
- ref.current = value;
68
- }, [value]);
69
- return ref.current;
70
- }
71
- function useAsyncValue(fn) {
72
- const [value, setValue] = useState(null);
73
- useEffect(() => {
74
- fn().then(setValue);
75
- }, []);
76
- return value;
77
- }
78
- function useForceUpdate() {
79
- const [, forceUpdate] = useState({});
80
- return useCallback(() => forceUpdate({}), []);
81
- }
82
-
83
- // src/style.scss?inline
84
- var style_default = '@charset "UTF-8";.vjs-modal-dialog .vjs-modal-dialog-content,.video-js .vjs-modal-dialog,.vjs-button>.vjs-icon-placeholder:before,.video-js .vjs-big-play-button .vjs-icon-placeholder:before{position:absolute;top:0;left:0;width:100%;height:100%}.vjs-button>.vjs-icon-placeholder:before,.video-js .vjs-big-play-button .vjs-icon-placeholder:before{text-align:center}@font-face{font-family:VideoJS;src:url(data:application/font-woff;charset=utf-8;base64,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) format("woff");font-weight:400;font-style:normal}.vjs-icon-play,.video-js .vjs-play-control .vjs-icon-placeholder,.video-js .vjs-big-play-button .vjs-icon-placeholder:before{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-play:before,.video-js .vjs-play-control .vjs-icon-placeholder:before,.video-js .vjs-big-play-button .vjs-icon-placeholder:before{content:"\\f101"}.vjs-icon-play-circle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-play-circle:before{content:"\\f102"}.vjs-icon-pause,.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-pause:before,.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before{content:"\\f103"}.vjs-icon-volume-mute,.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-volume-mute:before,.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before{content:"\\f104"}.vjs-icon-volume-low,.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-volume-low:before,.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before{content:"\\f105"}.vjs-icon-volume-mid,.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-volume-mid:before,.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before{content:"\\f106"}.vjs-icon-volume-high,.video-js .vjs-mute-control .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-volume-high:before,.video-js .vjs-mute-control .vjs-icon-placeholder:before{content:"\\f107"}.vjs-icon-fullscreen-enter,.video-js .vjs-fullscreen-control .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-fullscreen-enter:before,.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before{content:"\\f108"}.vjs-icon-fullscreen-exit,.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-fullscreen-exit:before,.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before{content:"\\f109"}.vjs-icon-square{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-square:before{content:"\\f10a"}.vjs-icon-spinner{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-spinner:before{content:"\\f10b"}.vjs-icon-subtitles,.video-js .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js .vjs-subtitles-button .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-subtitles:before,.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js .vjs-subtitles-button .vjs-icon-placeholder:before{content:"\\f10c"}.vjs-icon-captions,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js .vjs-captions-button .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-captions:before,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js .vjs-captions-button .vjs-icon-placeholder:before{content:"\\f10d"}.vjs-icon-chapters,.video-js .vjs-chapters-button .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-chapters:before,.video-js .vjs-chapters-button .vjs-icon-placeholder:before{content:"\\f10e"}.vjs-icon-share{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-share:before{content:"\\f10f"}.vjs-icon-cog{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-cog:before{content:"\\f110"}.vjs-icon-circle,.vjs-seek-to-live-control .vjs-icon-placeholder,.video-js .vjs-volume-level,.video-js .vjs-play-progress{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle:before,.vjs-seek-to-live-control .vjs-icon-placeholder:before,.video-js .vjs-volume-level:before,.video-js .vjs-play-progress:before{content:"\\f111"}.vjs-icon-circle-outline{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle-outline:before{content:"\\f112"}.vjs-icon-circle-inner-circle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle-inner-circle:before{content:"\\f113"}.vjs-icon-hd{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-hd:before{content:"\\f114"}.vjs-icon-cancel,.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-cancel:before,.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before{content:"\\f115"}.vjs-icon-replay,.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-replay:before,.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before{content:"\\f116"}.vjs-icon-facebook{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-facebook:before{content:"\\f117"}.vjs-icon-gplus{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-gplus:before{content:"\\f118"}.vjs-icon-linkedin{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-linkedin:before{content:"\\f119"}.vjs-icon-twitter{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-twitter:before{content:"\\f11a"}.vjs-icon-tumblr{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-tumblr:before{content:"\\f11b"}.vjs-icon-pinterest{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-pinterest:before{content:"\\f11c"}.vjs-icon-audio-description,.video-js .vjs-descriptions-button .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-audio-description:before,.video-js .vjs-descriptions-button .vjs-icon-placeholder:before{content:"\\f11d"}.vjs-icon-audio,.video-js .vjs-audio-button .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-audio:before,.video-js .vjs-audio-button .vjs-icon-placeholder:before{content:"\\f11e"}.vjs-icon-next-item{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-next-item:before{content:"\\f11f"}.vjs-icon-previous-item{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-previous-item:before{content:"\\f120"}.vjs-icon-picture-in-picture-enter,.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-picture-in-picture-enter:before,.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before{content:"\\f121"}.vjs-icon-picture-in-picture-exit,.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-picture-in-picture-exit:before,.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before{content:"\\f122"}.video-js{display:block;vertical-align:top;box-sizing:border-box;color:#fff;background-color:#000;position:relative;padding:0;font-size:10px;line-height:1;font-weight:400;font-style:normal;font-family:Arial,Helvetica,sans-serif;word-break:initial}.video-js:-moz-full-screen{position:absolute}.video-js:-webkit-full-screen{width:100%!important;height:100%!important}.video-js[tabindex="-1"]{outline:none}.video-js *,.video-js *:before,.video-js *:after{box-sizing:inherit}.video-js ul{font-family:inherit;font-size:inherit;line-height:inherit;list-style-position:outside;margin:0}.video-js.vjs-fluid,.video-js.vjs-16-9,.video-js.vjs-4-3,.video-js.vjs-9-16,.video-js.vjs-1-1{width:100%;max-width:100%;height:0}.video-js.vjs-16-9{padding-top:56.25%}.video-js.vjs-4-3{padding-top:75%}.video-js.vjs-9-16{padding-top:177.7777777778%}.video-js.vjs-1-1{padding-top:100%}.video-js.vjs-fill{width:100%;height:100%}.video-js .vjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}body.vjs-full-window{padding:0;margin:0;height:100%}.vjs-full-window .video-js.vjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;inset:0}.video-js.vjs-fullscreen:not(.vjs-ios-native-fs){width:100%!important;height:100%!important;padding-top:0!important}.video-js.vjs-fullscreen.vjs-user-inactive{cursor:none}.vjs-hidden{display:none!important}.vjs-disabled{opacity:.5;cursor:default}.video-js .vjs-offscreen{height:1px;left:-9999px;position:absolute;top:0;width:1px}.vjs-lock-showing{display:block!important;opacity:1!important;visibility:visible!important}.vjs-no-js{padding:20px;color:#fff;background-color:#000;font-size:18px;font-family:Arial,Helvetica,sans-serif;text-align:center;width:300px;height:150px;margin:0 auto}.vjs-no-js a,.vjs-no-js a:visited{color:#66a8cc}.video-js .vjs-big-play-button{font-size:3em;line-height:1.5em;height:1.63332em;width:3em;display:block;position:absolute;top:10px;left:10px;padding:0;cursor:pointer;opacity:1;border:.06666em solid #fff;background-color:#2b333f;background-color:#2b333fb3;border-radius:.3em;transition:all .4s}.vjs-big-play-centered .vjs-big-play-button{top:50%;left:50%;margin-top:-.81666em;margin-left:-1.5em}.video-js:hover .vjs-big-play-button,.video-js .vjs-big-play-button:focus{border-color:#fff;background-color:#73859f;background-color:#73859f80;transition:all 0s}.vjs-controls-disabled .vjs-big-play-button,.vjs-has-started .vjs-big-play-button,.vjs-using-native-controls .vjs-big-play-button,.vjs-error .vjs-big-play-button{display:none}.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button{display:block}.video-js button{background:none;border:none;color:inherit;display:inline-block;font-size:inherit;line-height:inherit;text-transform:none;text-decoration:none;transition:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vjs-control .vjs-button{width:100%;height:100%}.video-js .vjs-control.vjs-close-button{cursor:pointer;height:3em;position:absolute;right:0;top:.5em;z-index:2}.video-js .vjs-modal-dialog{background:rgba(0,0,0,.8);background:linear-gradient(180deg,rgba(0,0,0,.8),rgba(255,255,255,0));overflow:auto}.video-js .vjs-modal-dialog>*{box-sizing:border-box}.vjs-modal-dialog .vjs-modal-dialog-content{font-size:1.2em;line-height:1.5;padding:20px 24px;z-index:1}.vjs-menu-button{cursor:pointer}.vjs-menu-button.vjs-disabled{cursor:default}.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu{display:none}.vjs-menu .vjs-menu-content{display:block;padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;overflow:auto}.vjs-menu .vjs-menu-content>*{box-sizing:border-box}.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu{display:none}.vjs-menu li{list-style:none;margin:0;padding:.2em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.vjs-menu li.vjs-menu-item:focus,.vjs-menu li.vjs-menu-item:hover,.js-focus-visible .vjs-menu li.vjs-menu-item:hover{background-color:#73859f;background-color:#73859f80}.vjs-menu li.vjs-selected,.vjs-menu li.vjs-selected:focus,.vjs-menu li.vjs-selected:hover,.js-focus-visible .vjs-menu li.vjs-selected:hover{background-color:#fff;color:#2b333f}.video-js .vjs-menu *:not(.vjs-selected):focus:not(:focus-visible),.js-focus-visible .vjs-menu *:not(.vjs-selected):focus:not(.focus-visible){background:none}.vjs-menu li.vjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.vjs-menu-button-popup .vjs-menu{display:none;position:absolute;bottom:0;width:10em;left:-3em;height:0em;margin-bottom:1.5em;border-top-color:#2b333fb3}.vjs-menu-button-popup .vjs-menu .vjs-menu-content{background-color:#2b333f;background-color:#2b333fb3;position:absolute;width:100%;bottom:1.5em;max-height:15em}.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:5em}.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:10em}.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:14em}.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:25em}.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu,.vjs-menu-button-popup .vjs-menu.vjs-lock-showing{display:block}.video-js .vjs-menu-button-inline{transition:all .4s;overflow:hidden}.video-js .vjs-menu-button-inline:before{width:2.222222222em}.video-js .vjs-menu-button-inline:hover,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline.vjs-slider-active,.video-js.vjs-no-flex .vjs-menu-button-inline{width:12em}.vjs-menu-button-inline .vjs-menu{opacity:0;height:100%;width:auto;position:absolute;left:4em;top:0;padding:0;margin:0;transition:all .4s}.vjs-menu-button-inline:hover .vjs-menu,.vjs-menu-button-inline:focus .vjs-menu,.vjs-menu-button-inline.vjs-slider-active .vjs-menu{display:block;opacity:1}.vjs-no-flex .vjs-menu-button-inline .vjs-menu{display:block;opacity:1;position:relative;width:auto}.vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu,.vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu,.vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu{width:auto}.vjs-menu-button-inline .vjs-menu-content{width:auto;height:100%;margin:0;overflow:hidden}.video-js .vjs-control-bar{display:none;width:100%;position:absolute;bottom:0;left:0;right:0;height:3em;background-color:#2b333f;background-color:#2b333fb3}.vjs-has-started .vjs-control-bar{display:flex;visibility:visible;opacity:1;transition:visibility .1s,opacity .1s}.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{visibility:visible;opacity:0;transition:visibility 1s,opacity 1s}.vjs-controls-disabled .vjs-control-bar,.vjs-using-native-controls .vjs-control-bar,.vjs-error .vjs-control-bar{display:none!important}.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{opacity:1;visibility:visible}.vjs-has-started.vjs-no-flex .vjs-control-bar{display:table}.video-js .vjs-control{position:relative;text-align:center;margin:0;padding:0;height:100%;width:4em;flex:none}.vjs-button>.vjs-icon-placeholder:before{font-size:1.8em;line-height:1.67}.vjs-button>.vjs-icon-placeholder{display:block}.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before,.video-js .vjs-control:focus{text-shadow:0em 0em 1em white}.video-js .vjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.vjs-no-flex .vjs-control{display:table-cell;vertical-align:middle}.video-js .vjs-custom-control-spacer{display:none}.video-js .vjs-progress-control{cursor:pointer;flex:auto;display:flex;align-items:center;min-width:4em;touch-action:none}.video-js .vjs-progress-control.disabled{cursor:default}.vjs-live .vjs-progress-control{display:none}.vjs-liveui .vjs-progress-control{display:flex;align-items:center}.vjs-no-flex .vjs-progress-control{width:auto}.video-js .vjs-progress-holder{flex:auto;transition:all .2s;height:.3em}.video-js .vjs-progress-control .vjs-progress-holder{margin:0 10px}.video-js .vjs-progress-control:hover .vjs-progress-holder{font-size:1.6666666667em}.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled{font-size:1em}.video-js .vjs-progress-holder .vjs-play-progress,.video-js .vjs-progress-holder .vjs-load-progress,.video-js .vjs-progress-holder .vjs-load-progress div{position:absolute;display:block;height:100%;margin:0;padding:0;width:0}.video-js .vjs-play-progress{background-color:#fff}.video-js .vjs-play-progress:before{font-size:.9em;position:absolute;right:-.5em;top:-.3333333333em;z-index:1}.video-js .vjs-load-progress{background:rgba(115,133,159,.5)}.video-js .vjs-load-progress div{background:rgba(115,133,159,.75)}.video-js .vjs-time-tooltip{background-color:#fff;background-color:#fffc;border-radius:.3em;color:#000;float:right;font-family:Arial,Helvetica,sans-serif;font-size:1em;padding:6px 8px 8px;pointer-events:none;position:absolute;top:-3.4em;visibility:hidden;z-index:1}.video-js .vjs-progress-holder:focus .vjs-time-tooltip{display:none}.video-js .vjs-progress-control:hover .vjs-time-tooltip,.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip{display:block;font-size:.6em;visibility:visible}.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip{font-size:1em}.video-js .vjs-progress-control .vjs-mouse-display{display:none;position:absolute;width:1px;height:100%;background-color:#000;z-index:1}.vjs-no-flex .vjs-progress-control .vjs-mouse-display{z-index:0}.video-js .vjs-progress-control:hover .vjs-mouse-display{display:block}.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display{visibility:hidden;opacity:0;transition:visibility 1s,opacity 1s}.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display{display:none}.vjs-mouse-display .vjs-time-tooltip{color:#fff;background-color:#000;background-color:#000c}.video-js .vjs-slider{position:relative;cursor:pointer;padding:0;margin:0 .45em;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#73859f;background-color:#73859f80}.video-js .vjs-slider.disabled{cursor:default}.video-js .vjs-slider:focus{text-shadow:0em 0em 1em white;box-shadow:0 0 1em #fff}.video-js .vjs-mute-control{cursor:pointer;flex:none}.video-js .vjs-volume-control{cursor:pointer;margin-right:1em;display:flex}.video-js .vjs-volume-control.vjs-volume-horizontal{width:5em}.video-js .vjs-volume-panel .vjs-volume-control{visibility:visible;opacity:0;width:1px;height:1px;margin-left:-1px}.video-js .vjs-volume-panel{transition:width 1s}.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control,.video-js .vjs-volume-panel:active .vjs-volume-control,.video-js .vjs-volume-panel:focus .vjs-volume-control,.video-js .vjs-volume-panel .vjs-volume-control:active,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control,.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active{visibility:visible;opacity:1;position:relative;transition:visibility .1s,opacity .1s,height .1s,width .1s,left 0s,top 0s}.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal{width:5em;height:3em;margin-right:0}.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical{left:-3.5em;transition:left 0s}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active{width:10em;transition:width .1s}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only{width:4em}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical{height:8em;width:3em;left:-3000em;transition:visibility 1s,opacity 1s,height 1s 1s,width 1s 1s,left 1s 1s,top 1s 1s}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{transition:visibility 1s,opacity 1s,height 1s 1s,width 1s,left 1s 1s,top 1s 1s}.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{width:5em;height:3em;visibility:visible;opacity:1;position:relative;transition:none}.video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical,.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical{position:absolute;bottom:3em;left:.5em}.video-js .vjs-volume-panel{display:flex}.video-js .vjs-volume-bar{margin:1.35em .45em}.vjs-volume-bar.vjs-slider-horizontal{width:5em;height:.3em}.vjs-volume-bar.vjs-slider-vertical{width:.3em;height:5em;margin:1.35em auto}.video-js .vjs-volume-level{position:absolute;bottom:0;left:0;background-color:#fff}.video-js .vjs-volume-level:before{position:absolute;font-size:.9em;z-index:1}.vjs-slider-vertical .vjs-volume-level{width:.3em}.vjs-slider-vertical .vjs-volume-level:before{top:-.5em;left:-.3em;z-index:1}.vjs-slider-horizontal .vjs-volume-level{height:.3em}.vjs-slider-horizontal .vjs-volume-level:before{top:-.3em;right:-.5em}.video-js .vjs-volume-panel.vjs-volume-panel-vertical{width:4em}.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level{height:100%}.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level{width:100%}.video-js .vjs-volume-vertical{width:3em;height:8em;bottom:8em;background-color:#2b333f;background-color:#2b333fb3}.video-js .vjs-volume-horizontal .vjs-menu{left:-2em}.video-js .vjs-volume-tooltip{background-color:#fff;background-color:#fffc;border-radius:.3em;color:#000;float:right;font-family:Arial,Helvetica,sans-serif;font-size:1em;padding:6px 8px 8px;pointer-events:none;position:absolute;top:-3.4em;visibility:hidden;z-index:1}.video-js .vjs-volume-control:hover .vjs-volume-tooltip,.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip{display:block;font-size:1em;visibility:visible}.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip,.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip{left:1em;top:-12px}.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip{font-size:1em}.video-js .vjs-volume-control .vjs-mouse-display{display:none;position:absolute;width:100%;height:1px;background-color:#000;z-index:1}.video-js .vjs-volume-horizontal .vjs-mouse-display{width:1px;height:100%}.vjs-no-flex .vjs-volume-control .vjs-mouse-display{z-index:0}.video-js .vjs-volume-control:hover .vjs-mouse-display{display:block}.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display{visibility:hidden;opacity:0;transition:visibility 1s,opacity 1s}.video-js.vjs-user-inactive.vjs-no-flex .vjs-volume-control .vjs-mouse-display{display:none}.vjs-mouse-display .vjs-volume-tooltip{color:#fff;background-color:#000;background-color:#000c}.vjs-poster{display:inline-block;vertical-align:middle;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#000;cursor:pointer;margin:0;padding:0;position:absolute;inset:0;height:100%}.vjs-has-started .vjs-poster{display:none}.vjs-audio.vjs-has-started .vjs-poster{display:block}.vjs-using-native-controls .vjs-poster{display:none}.video-js .vjs-live-control{display:flex;align-items:flex-start;flex:auto;font-size:1em;line-height:3em}.vjs-no-flex .vjs-live-control{display:table-cell;width:auto;text-align:left}.video-js:not(.vjs-live) .vjs-live-control,.video-js.vjs-liveui .vjs-live-control{display:none}.video-js .vjs-seek-to-live-control{align-items:center;cursor:pointer;flex:none;display:inline-flex;height:100%;padding-left:.5em;padding-right:.5em;font-size:1em;line-height:3em;width:auto;min-width:4em}.vjs-no-flex .vjs-seek-to-live-control{display:table-cell;width:auto;text-align:left}.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,.video-js:not(.vjs-live) .vjs-seek-to-live-control{display:none}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{cursor:auto}.vjs-seek-to-live-control .vjs-icon-placeholder{margin-right:.5em;color:#888}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder{color:red}.video-js .vjs-time-control{flex:none;font-size:1em;line-height:3em;min-width:2em;width:auto;padding-left:1em;padding-right:1em}.vjs-live .vjs-time-control,.video-js .vjs-current-time,.vjs-no-flex .vjs-current-time,.video-js .vjs-duration,.vjs-no-flex .vjs-duration{display:none}.vjs-time-divider{display:none;line-height:3em}.vjs-live .vjs-time-divider{display:none}.video-js .vjs-play-control{cursor:pointer}.video-js .vjs-play-control .vjs-icon-placeholder{flex:none}.vjs-text-track-display{position:absolute;inset:0 0 3em;pointer-events:none}.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:1em}.video-js .vjs-text-track{font-size:1.4em;text-align:center;margin-bottom:.1em}.vjs-subtitles{color:#fff}.vjs-captions{color:#fc6}.vjs-tt-cue{display:block}video::-webkit-media-text-track-display{transform:translateY(-3em)}.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display{transform:translateY(-1.5em)}.video-js .vjs-picture-in-picture-control,.video-js .vjs-fullscreen-control{cursor:pointer;flex:none}.vjs-playback-rate>.vjs-menu-button,.vjs-playback-rate .vjs-playback-rate-value{position:absolute;top:0;left:0;width:100%;height:100%}.vjs-playback-rate .vjs-playback-rate-value{pointer-events:none;font-size:1.5em;line-height:2;text-align:center}.vjs-playback-rate .vjs-menu{width:4em;left:0}.vjs-error .vjs-error-display .vjs-modal-dialog-content{font-size:1.4em;text-align:center}.vjs-error .vjs-error-display:before{color:#fff;content:"X";font-family:Arial,Helvetica,sans-serif;font-size:4em;left:0;line-height:1;margin-top:-.5em;position:absolute;text-shadow:.05em .05em .1em #000;text-align:center;top:50%;vertical-align:middle;width:100%}.vjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;opacity:.85;text-align:left;border:6px solid rgba(43,51,63,.7);box-sizing:border-box;background-clip:padding-box;width:50px;height:50px;border-radius:25px;visibility:hidden}.vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner{display:block;-webkit-animation:vjs-spinner-show 0s linear .3s forwards;animation:vjs-spinner-show 0s linear .3s forwards}.vjs-loading-spinner:before,.vjs-loading-spinner:after{content:"";position:absolute;margin:-6px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:1;border:inherit;border-color:transparent;border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:before,.vjs-seeking .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:after{-webkit-animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite;animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite}.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:before{border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:after{border-top-color:#fff;-webkit-animation-delay:.44s;animation-delay:.44s}@keyframes vjs-spinner-show{to{visibility:visible}}@-webkit-keyframes vjs-spinner-show{to{visibility:visible}}@keyframes vjs-spinner-spin{to{transform:rotate(360deg)}}@-webkit-keyframes vjs-spinner-spin{to{-webkit-transform:rotate(360deg)}}@keyframes vjs-spinner-fade{0%{border-top-color:#73859f}20%{border-top-color:#73859f}35%{border-top-color:#fff}60%{border-top-color:#73859f}to{border-top-color:#73859f}}@-webkit-keyframes vjs-spinner-fade{0%{border-top-color:#73859f}20%{border-top-color:#73859f}35%{border-top-color:#fff}60%{border-top-color:#73859f}to{border-top-color:#73859f}}.vjs-chapters-button .vjs-menu ul{width:24em}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder{vertical-align:middle;display:inline-block;margin-bottom:-.1em}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{font-family:VideoJS;content:"\\f10d";font-size:1.5em;line-height:inherit}.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder{vertical-align:middle;display:inline-block;margin-bottom:-.1em}.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{font-family:VideoJS;content:" \\f11d";font-size:1.5em;line-height:inherit}.video-js.vjs-layout-small .vjs-current-time,.video-js.vjs-layout-small .vjs-time-divider,.video-js.vjs-layout-small .vjs-duration,.video-js.vjs-layout-small .vjs-remaining-time,.video-js.vjs-layout-small .vjs-playback-rate,.video-js.vjs-layout-small .vjs-chapters-button,.video-js.vjs-layout-small .vjs-descriptions-button,.video-js.vjs-layout-small .vjs-captions-button,.video-js.vjs-layout-small .vjs-subtitles-button,.video-js.vjs-layout-small .vjs-audio-button,.video-js.vjs-layout-small .vjs-volume-control,.video-js.vjs-layout-x-small .vjs-current-time,.video-js.vjs-layout-x-small .vjs-time-divider,.video-js.vjs-layout-x-small .vjs-duration,.video-js.vjs-layout-x-small .vjs-remaining-time,.video-js.vjs-layout-x-small .vjs-playback-rate,.video-js.vjs-layout-x-small .vjs-chapters-button,.video-js.vjs-layout-x-small .vjs-descriptions-button,.video-js.vjs-layout-x-small .vjs-captions-button,.video-js.vjs-layout-x-small .vjs-subtitles-button,.video-js.vjs-layout-x-small .vjs-audio-button,.video-js.vjs-layout-x-small .vjs-volume-control,.video-js.vjs-layout-tiny .vjs-current-time,.video-js.vjs-layout-tiny .vjs-time-divider,.video-js.vjs-layout-tiny .vjs-duration,.video-js.vjs-layout-tiny .vjs-remaining-time,.video-js.vjs-layout-tiny .vjs-playback-rate,.video-js.vjs-layout-tiny .vjs-chapters-button,.video-js.vjs-layout-tiny .vjs-descriptions-button,.video-js.vjs-layout-tiny .vjs-captions-button,.video-js.vjs-layout-tiny .vjs-subtitles-button,.video-js.vjs-layout-tiny .vjs-audio-button,.video-js.vjs-layout-tiny .vjs-volume-control{display:none!important}.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active{width:auto;width:initial}.video-js.vjs-layout-x-small:not(.vjs-liveui) .vjs-subs-caps-button,.video-js.vjs-layout-x-small:not(.vjs-live) .vjs-subs-caps-button,.video-js.vjs-layout-tiny .vjs-subs-caps-button{display:none}.video-js.vjs-layout-x-small.vjs-liveui .vjs-custom-control-spacer,.video-js.vjs-layout-tiny .vjs-custom-control-spacer{flex:auto;display:block}.video-js.vjs-layout-x-small.vjs-liveui.vjs-no-flex .vjs-custom-control-spacer,.video-js.vjs-layout-tiny.vjs-no-flex .vjs-custom-control-spacer{width:auto}.video-js.vjs-layout-x-small.vjs-liveui .vjs-progress-control,.video-js.vjs-layout-tiny .vjs-progress-control{display:none}.vjs-modal-dialog.vjs-text-track-settings{background-color:#2b333f;background-color:#2b333fbf;color:#fff;height:70%}.vjs-text-track-settings .vjs-modal-dialog-content{display:table}.vjs-text-track-settings .vjs-track-settings-colors,.vjs-text-track-settings .vjs-track-settings-font,.vjs-text-track-settings .vjs-track-settings-controls{display:table-cell}.vjs-text-track-settings .vjs-track-settings-controls{text-align:right;vertical-align:bottom}@supports (display: grid){.vjs-text-track-settings .vjs-modal-dialog-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;padding:20px 24px 0}.vjs-track-settings-controls .vjs-default-button{margin-bottom:20px}.vjs-text-track-settings .vjs-track-settings-controls{grid-column:1/-1}.vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content{grid-template-columns:1fr}}.vjs-track-setting>select{margin-right:1em;margin-bottom:.5em}.vjs-text-track-settings fieldset{margin:5px;padding:3px;border:none}.vjs-text-track-settings fieldset span{display:inline-block}.vjs-text-track-settings fieldset span>select{max-width:7.3em}.vjs-text-track-settings legend{color:#fff;margin:0 0 5px}.vjs-text-track-settings .vjs-label{position:absolute;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);display:block;margin:0 0 5px;padding:0;border:0;height:1px;width:1px;overflow:hidden}.vjs-track-settings-controls button:focus,.vjs-track-settings-controls button:active{outline-style:solid;outline-width:medium;background-image:linear-gradient(0deg,#fff 88%,#73859f 100%)}.vjs-track-settings-controls button:hover{color:#2b333fbf}.vjs-track-settings-controls button{background-color:#fff;background-image:linear-gradient(-180deg,#fff 88%,#73859f 100%);color:#2b333f;cursor:pointer;border-radius:2px}.vjs-track-settings-controls .vjs-default-button{margin-right:1em}@media print{.video-js>*:not(.vjs-tech):not(.vjs-poster){visibility:hidden}}.vjs-resize-manager{position:absolute;top:0;left:0;width:100%;height:100%;border:none;z-index:-1000}.js-focus-visible .video-js *:focus:not(.focus-visible){outline:none}.video-js *:focus:not(:focus-visible){outline:none}.netless-window-manager-playground{width:100%;height:100%;position:relative;z-index:1;overflow:hidden;user-select:none}.netless-window-manager-sizer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;display:flex}.netless-window-manager-sizer-horizontal{flex-direction:column}.netless-window-manager-sizer:before,.netless-window-manager-sizer:after{flex:1;content:"";display:block}.netless-window-manager-chess-sizer:before,.netless-window-manager-chess-sizer:after{background-image:linear-gradient(45deg,#b0b0b0 25%,transparent 25%),linear-gradient(-45deg,#b0b0b0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#b0b0b0 75%),linear-gradient(-45deg,transparent 75%,#b0b0b0 75%);background-color:#fff;background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.netless-window-manager-wrapper{position:relative;z-index:1;width:100%;height:100%;overflow:hidden}.netless-window-manager-main-view{width:100%;height:100%}.netless-window-manager-cursor-pencil-image,.netless-window-manager-cursor-eraser-image{width:26px;height:26px}.netless-window-manager-cursor-selector-image{width:24px;height:24px}.netless-window-manager-cursor-selector-avatar{border-radius:50%;border-style:solid;border-width:2px;border-color:#fff;margin-bottom:2px}.netless-window-manager-cursor-selector-avatar img{width:12px}.netless-window-manager-cursor-inner{border-radius:4px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:4px;padding-right:4px;font-size:12px}.netless-window-manager-cursor-inner-mellow{height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:16px;padding-right:16px}.netless-window-manager-cursor-tag-name{font-size:12px;margin-left:4px;padding:2px 8px;border-radius:4px}.netless-window-manager-cursor-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:26px;height:26px;z-index:2147483647;left:0;top:0;will-change:transform;transition:transform .1s;transform-origin:0 0;user-select:none}.netless-window-manager-cursor-pencil-offset{margin-left:-20px}.netless-window-manager-cursor-selector-offset{margin-left:-22px;margin-top:56px}.netless-window-manager-cursor-text-offset{margin-left:-30px;margin-top:18px}.netless-window-manager-cursor-shape-offset{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:180px;height:64px;margin-left:-30px;margin-top:12px}.netless-window-manager-cursor-laserPointer-image{margin-left:-22px;margin-top:3px}.netless-window-manager-cursor-name{width:100%;height:48px;display:flex;align-items:center;justify-content:center;position:absolute;top:-40px}.cursor-image-wrapper{display:flex;justify-content:center}.telebox-collector{position:absolute;right:10px;bottom:15px}.tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:#444e601a;background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:#444e601a}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-box{position:absolute;top:0;left:0;z-index:100;transition:width .4s cubic-bezier(.4,.9,.71,1.02),height .4s cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .4s ease}.telebox-box-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#f9f9fc;box-shadow:0 4px 10px #2f419226;border-radius:6px;border:1px solid #e3e3ec}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-content-wrap{flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}.telebox-content{width:100%;height:100%;position:relative}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap:before{content:"";display:block;flex:1}.telebox-resize-handle{position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{transition:width 50ms cubic-bezier(.4,.9,.71,1.02),height 50ms cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7,0,.84,0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark .telebox-box-main{color:#e9e9e9;background:#212126;border-color:#43434d}.telebox-titlebar{box-sizing:border-box;height:26px;display:flex;align-items:center;background:#fff;user-select:none;border-bottom:1px solid #eeeef7;touch-action:manipulation}.telebox-title-area{padding-left:16px;overflow:hidden;position:relative;height:100%;flex:1;display:flex;align-items:center}.telebox-title{overflow:hidden;margin:0;padding:0;font-size:14px;font-weight:400;font-family:PingFangSC-Regular,PingFang SC;white-space:nowrap;word-break:keep-all;text-overflow:ellipsis;color:#191919}.telebox-drag-area{position:absolute;inset:0;margin:auto;z-index:10}.telebox-titlebar-btns{padding-right:16px;white-space:nowrap;word-break:keep-all;margin-left:auto;font-size:0}.telebox-titlebar-btn{width:22px;height:22px;padding:0;outline:0;border:none;background:0 0;cursor:pointer}.telebox-titlebar-btn~.telebox-titlebar-btn{margin-left:10px}.telebox-titlebar-btn-icon{width:22px;height:22px}.telebox-readonly .telebox-titlebar-btn{cursor:not-allowed}.telebox-titlebar-icon-minimize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-titlebar-icon-maximize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==)}.telebox-titlebar-icon-maximize.is-active{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K)}.telebox-titlebar-icon-close{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-color-scheme-dark .telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-collector{visibility:hidden;display:block;position:absolute;z-index:200;width:40px;height:40px;margin:0;padding:0;border:none;outline:0;font-size:0;border-radius:50%;background:#fff;box-shadow:0 2px 6px #2f419226;cursor:pointer;user-select:none;pointer-events:none;background-repeat:no-repeat;background-size:18px 16px;background-position:center;-webkit-tap-highlight-color:transparent}.telebox-collector-visible{visibility:visible;pointer-events:initial}.telebox-collector-readonly{cursor:not-allowed}.telebox-color-scheme-dark.telebox-collector{background-color:#43434d}.telebox-max-titlebar{display:none;position:absolute;top:0;left:0;z-index:50000;user-select:none}.telebox-max-titlebar .telebox-title,.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-titles{display:none}.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title{display:block}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{height:100%;margin:0;overflow-y:hidden;overflow-x:scroll;overflow-x:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.telebox-titles::-webkit-scrollbar{height:8px;width:8px}.telebox-titles::-webkit-scrollbar-track{background-color:transparent}.telebox-titles::-webkit-scrollbar-thumb{background-color:#eeeef7cc;background-color:transparent;border-radius:4px;transition:background-color .4s}.telebox-titles:hover::-webkit-scrollbar-thumb{background-color:#eeeef7cc}.telebox-titles::-webkit-scrollbar-thumb:hover{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:active{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:vertical{min-height:50px}.telebox-titles::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-titles-content{height:100%;display:flex;flex-wrap:nowrap;align-items:center;padding:0}.telebox-titles-tab{height:100%;overflow:hidden;max-width:182px;min-width:50px;padding:0 26px 0 16px;outline:0;font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;border:none;border-right:1px solid #e5e5f0;color:#7b88a0;background:0 0;cursor:pointer;user-select:none}.telebox-titles-tab-focus{color:#357bf6}.telebox-readonly .telebox-titles-tab{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-color-scheme-dark .telebox-titles-tab{border-right-color:#7b88a0}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}.rc-slider{position:relative;height:14px;padding:5px 0;width:100%;border-radius:6px;touch-action:none;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-rail{position:absolute;width:100%;background-color:#e9e9e9;height:4px;border-radius:6px}.rc-slider-track{position:absolute;left:0;height:4px;border-radius:6px;background-color:#abe2fb}.rc-slider-handle{position:absolute;width:14px;height:14px;cursor:pointer;cursor:-webkit-grab;margin-top:-5px;cursor:grab;border-radius:50%;border:solid 2px #96dbfa;background-color:#fff;touch-action:pan-x}.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging{border-color:#57c5f7;box-shadow:0 0 0 5px #96dbfa}.rc-slider-handle:focus{outline:none}.rc-slider-handle-click-focused:focus{border-color:#96dbfa;box-shadow:unset}.rc-slider-handle:hover{border-color:#57c5f7}.rc-slider-handle:active{border-color:#57c5f7;box-shadow:0 0 5px #57c5f7;cursor:-webkit-grabbing;cursor:grabbing}.rc-slider-mark{position:absolute;top:18px;left:0;width:100%;font-size:12px}.rc-slider-mark-text{position:absolute;display:inline-block;vertical-align:middle;text-align:center;cursor:pointer;color:#999}.rc-slider-mark-text-active{color:#666}.rc-slider-step{position:absolute;width:100%;height:4px;background:transparent}.rc-slider-dot{position:absolute;bottom:-2px;margin-left:-4px;width:8px;height:8px;border:2px solid #e9e9e9;background-color:#fff;cursor:pointer;border-radius:50%;vertical-align:middle}.rc-slider-dot-active{border-color:#96dbfa}.rc-slider-dot-reverse{margin-right:-4px}.rc-slider-disabled{background-color:#e9e9e9}.rc-slider-disabled .rc-slider-track{background-color:#ccc}.rc-slider-disabled .rc-slider-handle,.rc-slider-disabled .rc-slider-dot{border-color:#ccc;box-shadow:none;background-color:#fff;cursor:not-allowed}.rc-slider-disabled .rc-slider-mark-text,.rc-slider-disabled .rc-slider-dot{cursor:not-allowed!important}.rc-slider-vertical{width:14px;height:100%;padding:0 5px}.rc-slider-vertical .rc-slider-rail{height:100%;width:4px}.rc-slider-vertical .rc-slider-track{left:5px;bottom:0;width:4px}.rc-slider-vertical .rc-slider-handle{margin-left:-5px;touch-action:pan-y}.rc-slider-vertical .rc-slider-mark{top:0;left:18px;height:100%}.rc-slider-vertical .rc-slider-step{height:100%;width:4px}.rc-slider-vertical .rc-slider-dot{left:2px;margin-bottom:-4px}.rc-slider-vertical .rc-slider-dot:first-child{margin-bottom:-4px}.rc-slider-vertical .rc-slider-dot:last-child{margin-bottom:-4px}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear,.rc-slider-tooltip-zoom-down-leave{animation-duration:.3s;animation-fill-mode:both;display:block!important;animation-play-state:paused}.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active{animation-name:rcSliderTooltipZoomDownIn;animation-play-state:running}.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active{animation-name:rcSliderTooltipZoomDownOut;animation-play-state:running}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear{transform:scale(0);animation-timing-function:cubic-bezier(.23,1,.32,1)}.rc-slider-tooltip-zoom-down-leave{animation-timing-function:cubic-bezier(.755,.05,.855,.06)}@keyframes rcSliderTooltipZoomDownIn{0%{opacity:0;transform-origin:50% 100%;transform:scale(0)}to{transform-origin:50% 100%;transform:scale(1)}}@keyframes rcSliderTooltipZoomDownOut{0%{transform-origin:50% 100%;transform:scale(1)}to{opacity:0;transform-origin:50% 100%;transform:scale(0)}}.rc-slider-tooltip{position:absolute;left:-9999px;top:-9999px;visibility:visible;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip-hidden{display:none}.rc-slider-tooltip-placement-top{padding:4px 0 8px}.rc-slider-tooltip-inner{padding:6px 2px;min-width:24px;height:24px;font-size:12px;line-height:1;color:#fff;text-align:center;text-decoration:none;background-color:#6c6c6c;border-radius:6px;box-shadow:0 0 4px #d9d9d9}.rc-slider-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow{bottom:4px;left:50%;margin-left:-4px;border-width:4px 4px 0;border-top-color:#6c6c6c}.fastboard-root{position:relative;width:100%;height:100%;overflow:hidden}.fastboard-view{position:absolute;top:0;left:0;width:100%;height:100%}.fastboard-left{position:absolute;top:0;left:0;height:calc(100% - 48px);padding:16px;z-index:201;display:flex;align-items:center}.fastboard-bottom-left,.fastboard-bottom,.fastboard-bottom-right{display:flex;gap:10px;position:absolute;bottom:8px;left:8px;padding:8px;z-index:200}.fastboard-bottom-right{left:auto;right:8px}.fastboard-bottom{right:8px}.fastboard-redo-undo{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-redo-undo.light{color:#333;background-color:#ffffffe6;border:1px solid #e5e8f0}.fastboard-redo-undo.dark{color:#ddd;background-color:#14181e;border:1px solid #383b42}.fastboard-redo-undo-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-redo-undo-btn svg,.fastboard-redo-undo-btn img{width:100%;height:100%}.fastboard-redo-undo-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-redo-undo-btn.light:not(:disabled):hover{background-color:#ebf2ff}.fastboard-redo-undo-btn.dark:not(:disabled):hover{background-color:#383b42}.fastboard-page-control{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-page-control.light{color:#333;background-color:#ffffffe6;border:1px solid #e5e8f0}.fastboard-page-control.dark{color:#ddd;background-color:#14181e;border:1px solid #383b42}.fastboard-page-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-page-control-btn svg,.fastboard-page-control-btn img{width:100%;height:100%}.fastboard-page-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-page-control-btn.light:not(:disabled):hover{background-color:#ebf2ff}.fastboard-page-control-btn.dark:not(:disabled):hover{background-color:#383b42}.fastboard-page-control-cut-line{height:24px;width:.5px}.fastboard-page-control-cut-line.light{background-color:#e7e7e7}.fastboard-page-control-cut-line.dark{background-color:#ffffff26}.fastboard-page-control-slash{opacity:.6}.fastboard-page-control-text{line-height:24px}.fastboard-page-control-page,.fastboard-page-control-slash,.fastboard-page-control-page-count{font-size:14px;font-variant-numeric:tabular-nums}.fastboard-zoom-control{position:relative;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-zoom-control.light{color:#333;background-color:#ffffffe6;border:1px solid #e5e8f0}.fastboard-zoom-control.dark{color:#ddd;background-color:#14181e;border:1px solid #383b42}.fastboard-zoom-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-zoom-control-btn svg,.fastboard-zoom-control-btn img{width:100%;height:100%}.fastboard-zoom-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-zoom-control-btn.light:not(:disabled):hover{background-color:#ebf2ff}.fastboard-zoom-control-btn.dark:not(:disabled):hover{background-color:#383b42}.fastboard-zoom-control-cut-line{height:24px;width:.5px}.fastboard-zoom-control-cut-line.light{background-color:#e7e7e7}.fastboard-zoom-control-cut-line.dark{background-color:#ffffff26}.fastboard-zoom-control-text{line-height:24px}.fastboard-zoom-control-percent{opacity:.6}.fastboard-zoom-control-scale,.fastboard-zoom-control-percent{font-size:14px;font-variant-numeric:tabular-nums}.fastboard-toolbar{display:flex;align-items:center;padding:4px;border-radius:4px;flex-direction:column;gap:4px;position:absolute;z-index:100;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-toolbar .rc-slider{padding:6px 0}.fastboard-toolbar .rc-slider-rail,.fastboard-toolbar .rc-slider-track{height:2px}.fastboard-toolbar .tippy-content{padding:8px}.fastboard-toolbar .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-toolbar .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-toolbar.light{color:#333;background-color:#ffffffe6;border:1px solid #e5e8f0}.fastboard-toolbar.dark{color:#ddd;background-color:#14181e;border:1px solid #383b42}.fastboard-toolbar.expanded{border:1px solid rgba(0,0,0,.15)}.fastboard-toolbar.expanded:hover{box-shadow:0 0 5px #00000040;transform:translateZ(0)}.fastboard-toolbar.collapsed{padding:0;background-color:transparent}.fastboard-toolbar-tooltip{display:inline-flex;align-items:center;gap:4px}.fastboard-toolbar-hotkey{margin-right:-4px;width:24px;height:24px;border-radius:4px;background-color:#ffffff1a;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:4px;width:32px;height:32px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;position:relative}.fastboard-toolbar-btn-interactive{display:inline-block;width:32px;height:32px}.fastboard-toolbar-btn svg,.fastboard-toolbar-btn img{width:100%;height:100%}.fastboard-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-toolbar-btn.light:not(:disabled):hover{background-color:#ebf2ff}.fastboard-toolbar-btn.dark:not(:disabled):hover{background-color:#383b42}.fastboard-toolbar-triangle{width:0px;height:0px;border-bottom:4px solid;border-left:4px solid transparent;position:absolute;bottom:0;right:0}.fastboard-toolbar-cut-line{display:inline-block;height:.5px;width:100%}.fastboard-toolbar-cut-line.light{background-color:#e7e7e7}.fastboard-toolbar-cut-line.dark{background-color:#ffffff26}.fastboard-toolbar-section{display:inline-flex;flex-flow:column nowrap;gap:4px;scroll-behavior:smooth}.fastboard-toolbar-section.collapsed{transform:translate(-100%);transition:1s transform}.fastboard-toolbar-section~.fastboard-toolbar-mask{opacity:0;transition:.5s opacity .4s}.fastboard-toolbar-section:hover~.fastboard-toolbar-mask,.fastboard-toolbar-mask:hover{opacity:1;transition:.2s opacity}.fastboard-toolbar-panel{width:120px;padding:0;display:flex;flex-flow:column nowrap;align-items:center;gap:8px}.fastboard-toolbar-panel.apps{width:256px}.fastboard-toolbar-color-box,.fastboard-toolbar-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-color-box .fastboard-toolbar-btn,.fastboard-toolbar-shapes .fastboard-toolbar-btn{padding:0;width:24px;height:24px}.fastboard-toolbar-apps{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-apps .fastboard-toolbar-btn{width:40px;height:40px;font-size:0}.fastboard-toolbar-app-icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.fastboard-toolbar-app-icon-mask{position:absolute;width:36px;height:36px;animation:fastboard-app-loading-rotate .5s linear infinite;transform-origin:center}.fastboard-toolbar-app-is-loading{cursor:wait}.fastboard-toolbar-app-is-loading button:disabled{cursor:wait}.fastboard-toolbar-app-is-failed{cursor:not-allowed}.fastboard-toolbar-app-is-failed button:disabled{cursor:not-allowed}.fastboard-toolbar-app-icon{padding-top:4px;display:inline-flex;flex-flow:column nowrap;align-items:center;gap:4px}.fastboard-toolbar-app-icon .fastboard-toolbar-btn{padding:0}.fastboard-toolbar-app-icon-text{font-size:14px;color:#5d5d5d;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fastboard-toolbar-color-item{width:24px;height:24px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-item *.light:hover{background-color:#f5f5f5}.fastboard-toolbar-color-item *.dark:hover{background-color:#333}.fastboard-toolbar-color-border{width:24px;height:24px;border:1px solid transparent;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-color-border.active.light,.fastboard-toolbar-color-border.active.dark{border:1px solid rgba(51,129,255,.8)}.fastboard-toolbar-color-btn{margin:0;border:1px solid rgba(0,0,0,.24);padding:0;appearance:none;width:16px;height:16px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-btn:focus-visible{outline-offset:2px}.fastboard-toolbar-mask{position:absolute;left:calc(100% + 1px);top:50%;transform:translateY(-50%);opacity:.85}.fastboard-toolbar-mask.dark{left:100%}.fastboard-toolbar-mask-btn{width:17px;height:62px;cursor:pointer;opacity:.85}.fastboard-toolbar-mask-btn.dark{filter:invert(.8)}.fastboard-toolbar-expand-btn{display:flex;align-items:center;position:absolute;left:0}@keyframes fastboard-app-loading-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fastboard-player-control{width:100%;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:100}.fastboard-player-control.auto-hide{opacity:0;transition:opacity .2s}.fastboard-player-control.auto-hide:hover{opacity:1}.fastboard-player-control .rc-slider-disabled{background:transparent;opacity:.5}.fastboard-player-control .rc-slider-rail,.fastboard-player-control .rc-slider-track{height:2px}.fastboard-player-control .tippy-content{padding:8px}.fastboard-player-control .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-player-control .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-player-control.light{color:#333;background-color:#ffffffe6;border:1px solid #e5e8f0}.fastboard-player-control.dark{color:#ddd;background-color:#14181e;border:1px solid #383b42}.fastboard-player-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;min-width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.fastboard-player-control-btn svg,.fastboard-player-control-btn img{width:100%;height:100%}.fastboard-player-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-player-control-btn.light:not(:disabled):hover{background-color:#ebf2ff}.fastboard-player-control-btn.dark:not(:disabled):hover{background-color:#383b42}.fastboard-player-control-btn.loading{animation:fastboard-player-control-rotate .5s linear infinite}@keyframes fastboard-player-control-rotate{to{transform:rotate(360deg)}}.fastboard-player-control-panel{padding:0;display:flex;flex-flow:column nowrap;align-items:stretch;gap:4px}.fastboard-player-control-panel .fastboard-player-control-btn{width:initial;height:initial;user-select:none;font-size:14px;padding:4px;justify-content:flex-end}.fastboard-player-control-panel .fastboard-player-control-btn.active{color:#3381ff}.fastboard-player-control-slider{width:100%;padding:0 7px}.fastboard-player-control-slider.loading{cursor:not-allowed}.fastboard-player-control-slash{opacity:.6}.fastboard-player-control-current,.fastboard-player-control-slash,.fastboard-player-control-total,.fastboard-player-control-speed-text{font-size:14px;font-variant-numeric:tabular-nums}.tippy-box.fastboard-tip{color:#eee;background-color:#000000f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.tippy-box.fastboard-tip[data-placement^=right]>.tippy-arrow:before{top:4px;border-width:4px;border-right-color:#000}.tippy-box.fastboard-tip[data-placement^=top]>.tippy-arrow:before{left:4px;border-width:4px;border-top-color:#000}\n';
85
-
86
- // src/behaviors/style.ts
87
- applyStyles(style_default);
88
-
89
- // src/components/hooks.ts
90
- import { BuiltinApps } from "@netless/window-manager";
91
- import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
92
- var FastboardAppContext = /* @__PURE__ */ createContext(null);
93
- var ThemeContext = /* @__PURE__ */ createContext("light");
94
- function useTheme(userTheme) {
95
- const themeFromContext = useContext(ThemeContext);
96
- return userTheme || themeFromContext;
97
- }
98
- function useFastboardApp() {
99
- const app = useContext(FastboardAppContext);
100
- if (!app) {
101
- throw new Error("useFastboardApp() can only be called inside of <Fastboard>");
102
- }
103
- return app;
104
- }
105
- function useFastboardValue(val) {
106
- const [value, setValue] = useState2(val.value);
107
- useEffect2(() => val.subscribe(setValue), [val]);
108
- return value;
109
- }
110
- function useWritable() {
111
- return useFastboardValue(useFastboardApp().writable);
112
- }
113
- function useBoxState() {
114
- return useFastboardValue(useFastboardApp().boxState);
115
- }
116
- function useFocusedApp() {
117
- return useFastboardValue(useFastboardApp().focusedApp);
118
- }
119
- function useMaximized() {
120
- return useBoxState() === "maximized";
121
- }
122
- var AppsShouldShowToolbar = /* @__PURE__ */ (() => [BuiltinApps.DocsViewer, "Slide"])();
123
- function useHideControls() {
124
- const writable = useWritable();
125
- const maximized = useMaximized();
126
- const focusedApp = useFocusedApp();
127
- if (!writable) {
128
- return true;
129
- }
130
- if (maximized) {
131
- if (AppsShouldShowToolbar.some((kind) => focusedApp == null ? void 0 : focusedApp.includes(kind))) {
132
- return "toolbar-only";
133
- } else {
134
- return true;
135
- }
136
- }
137
- return false;
138
- }
139
-
140
- // src/components/RedoUndo/hooks.ts
141
- import { useCallback as useCallback2 } from "react";
142
- function useRedoUndo() {
143
- const app = useFastboardApp();
144
- const undoSteps = useFastboardValue(app.canUndoSteps);
145
- const redoSteps = useFastboardValue(app.canRedoSteps);
146
- const undo = useCallback2(() => {
147
- app.undo();
148
- }, [app]);
149
- const redo = useCallback2(() => {
150
- app.redo();
151
- }, [app]);
152
- return { redoSteps, undoSteps, redo, undo };
153
- }
154
-
155
- // src/components/RedoUndo/RedoUndo.tsx
156
- import Tippy from "@tippyjs/react";
157
- import clsx from "clsx";
158
- import React4 from "react";
159
-
160
- // src/i18n/index.ts
161
- import { createContext as createContext2, useContext as useContext2, useMemo } from "react";
162
- import i18next from "i18next";
163
-
164
- // src/i18n/en.json
165
- var translation = {
166
- clicker: "clicker",
167
- selector: "selector",
168
- text: "text",
169
- pencil: "pencil",
170
- arrow: "arrow",
171
- hand: "hand",
172
- eraser: "eraser",
173
- laser: "laser",
174
- collapse: "Collapse",
175
- expand: "Expand",
176
- zoomIn: "Zoom In",
177
- zoomOut: "Zoom Out",
178
- reset: "Reset",
179
- prevPage: "Prev Page",
180
- nextPage: "Next Page",
181
- addPage: "Add Page",
182
- redo: "Redo",
183
- undo: "Undo",
184
- shape: "Shape",
185
- triangle: "Triangle",
186
- rhombus: "Rhombus",
187
- pentagram: "Pentagram",
188
- speechBalloon: "Speech Balloon",
189
- rectangle: "Rectangle",
190
- ellipse: "Ellipse",
191
- straight: "Straight",
192
- speed: "Speed"
193
- };
194
- var en_default = {
195
- translation
196
- };
197
-
198
- // src/i18n/zh-CN.json
199
- var translation2 = {
200
- clicker: "\u70B9\u51FB",
201
- selector: "\u9009\u62E9",
202
- text: "\u6587\u5B57",
203
- pencil: "\u94C5\u7B14",
204
- arrow: "\u7BAD\u5934",
205
- hand: "\u6293\u624B",
206
- eraser: "\u6A61\u76AE",
207
- laser: "\u6FC0\u5149\u7B14",
208
- zoomIn: "\u653E\u5927",
209
- zoomOut: "\u7F29\u5C0F",
210
- reset: "\u91CD\u7F6E",
211
- prevPage: "\u4E0A\u4E00\u9875",
212
- nextPage: "\u4E0B\u4E00\u9875",
213
- addPage: "\u6DFB\u52A0\u9875\u9762",
214
- redo: "\u91CD\u505A",
215
- undo: "\u64A4\u9500",
216
- collapse: "\u6536\u8D77",
217
- expand: "\u5C55\u5F00",
218
- clean: "\u6E05\u5C4F",
219
- shape: "\u5F62\u72B6",
220
- triangle: "\u4E09\u89D2\u5F62",
221
- rhombus: "\u83F1\u5F62",
222
- pentagram: "\u4E94\u89D2\u661F",
223
- speechBalloon: "\u6C14\u7403",
224
- rectangle: "\u77E9\u5F62",
225
- ellipse: "\u692D\u5706",
226
- straight: "\u76F4\u7EBF",
227
- speed: "\u901F\u5EA6"
228
- };
229
- var zh_CN_default = {
230
- translation: translation2
231
- };
232
-
233
- // src/i18n/index.ts
234
- var createI18n = async ({
235
- language = navigator.language || "zh-CN"
236
- } = {}) => {
237
- await i18next.init({
238
- lng: language,
239
- resources: { en: en_default, "zh-CN": zh_CN_default }
240
- });
241
- return i18next;
242
- };
243
- var I18nContext = /* @__PURE__ */ createContext2(null);
244
- function useTranslation() {
245
- const i18n = useContext2(I18nContext);
246
- const t = useMemo(() => i18n ? i18n.getFixedT(null, ["translation"]) : (id) => id, [i18n]);
247
- return { t, i18n };
248
- }
249
-
250
- // src/icons/index.tsx
251
- import React from "react";
252
- function Icon({ fallback, src, alt = "[icon]" }) {
253
- return src ? /* @__PURE__ */ React.createElement("img", {
254
- src,
255
- alt,
256
- title: alt
257
- }) : fallback;
258
- }
259
-
260
- // src/icons/Redo.tsx
261
- import React2 from "react";
262
-
263
- // src/theme.ts
264
- var light = {
265
- color: "#5D5D5D",
266
- activeColor: "#3381FF",
267
- backgroundColor: "#fff",
268
- hoverBackgroundColor: "rgba(51, 129, 255, 0.1)"
269
- };
270
- var dark = __spreadProps(__spreadValues({}, light), {
271
- color: "#eee",
272
- backgroundColor: "#111"
273
- });
274
- var themes = { light, dark };
275
- var getStroke = (props) => {
276
- let config;
277
- if (props.theme) {
278
- config = themes[props.theme];
279
- } else {
280
- config = themes.light;
281
- }
282
- return props.active ? config.activeColor : config.color;
283
- };
284
- var TopOffset = [0, 11];
285
- var RightOffset = [0, 11];
286
-
287
- // src/icons/Redo.tsx
288
- function Redo({ theme = "light", active }) {
289
- const config = themes[theme];
290
- const stroke = active ? config.activeColor : config.color;
291
- return /* @__PURE__ */ React2.createElement("svg", {
292
- viewBox: "0 0 24 24",
293
- fill: "none"
294
- }, /* @__PURE__ */ React2.createElement("path", {
295
- d: "M19 9.625H9v-1.25h10v1.25ZM5.625 13v6h-1.25v-6h1.25ZM9 9.625A3.375 3.375 0 0 0 5.625 13h-1.25A4.625 4.625 0 0 1 9 8.375v1.25Z",
296
- fill: stroke
297
- }), /* @__PURE__ */ React2.createElement("path", {
298
- d: "m15 5 4 4-4 4",
299
- stroke,
300
- strokeLinejoin: "round",
301
- strokeWidth: "1.25"
302
- }));
303
- }
304
-
305
- // src/icons/Undo.tsx
306
- import React3 from "react";
307
- function Undo({ theme = "light", active }) {
308
- const config = themes[theme];
309
- const stroke = active ? config.activeColor : config.color;
310
- return /* @__PURE__ */ React3.createElement("svg", {
311
- viewBox: "0 0 24 24",
312
- fill: "none"
313
- }, /* @__PURE__ */ React3.createElement("path", {
314
- d: "M5 9.625h10v-1.25H5v1.25ZM18.375 13v6h1.25v-6h-1.25ZM15 9.625A3.375 3.375 0 0 1 18.375 13h1.25A4.625 4.625 0 0 0 15 8.375v1.25Z",
315
- fill: stroke
316
- }), /* @__PURE__ */ React3.createElement("path", {
317
- d: "M9 5 5 9l4 4",
318
- stroke,
319
- strokeLinejoin: "round",
320
- strokeWidth: "1.25"
321
- }));
322
- }
323
-
324
- // src/components/RedoUndo/RedoUndo.tsx
325
- var name = "fastboard-redo-undo";
326
- function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable }) {
327
- theme = useTheme(theme);
328
- const { t } = useTranslation();
329
- const writable = useWritable();
330
- const { redoSteps, undoSteps, redo, undo } = useRedoUndo();
331
- const disabled = !writable;
332
- return /* @__PURE__ */ React4.createElement("div", {
333
- className: clsx(name, theme)
334
- }, /* @__PURE__ */ React4.createElement(Tippy, {
335
- className: "fastboard-tip",
336
- content: t("undo"),
337
- theme,
338
- disabled,
339
- placement: "top",
340
- delay: [1e3, 400],
341
- duration: 300,
342
- offset: TopOffset
343
- }, /* @__PURE__ */ React4.createElement("button", {
344
- className: clsx(`${name}-btn`, "undo", theme),
345
- disabled: disabled || undoSteps === 0,
346
- onClick: undo
347
- }, /* @__PURE__ */ React4.createElement(Icon, {
348
- fallback: /* @__PURE__ */ React4.createElement(Undo, {
349
- theme
350
- }),
351
- src: undoSteps === 0 ? undoIconDisable : undoIcon,
352
- alt: "[undo]"
353
- }))), /* @__PURE__ */ React4.createElement(Tippy, {
354
- className: "fastboard-tip",
355
- content: t("redo"),
356
- theme,
357
- disabled,
358
- placement: "top",
359
- delay: [1e3, 400],
360
- duration: 300,
361
- offset: TopOffset
362
- }, /* @__PURE__ */ React4.createElement("button", {
363
- className: clsx(`${name}-btn`, "redo", theme),
364
- disabled: disabled || redoSteps === 0,
365
- onClick: redo
366
- }, /* @__PURE__ */ React4.createElement(Icon, {
367
- fallback: /* @__PURE__ */ React4.createElement(Redo, {
368
- theme
369
- }),
370
- src: redoSteps === 0 ? redoIconDisable : redoIcon,
371
- alt: "[redo]"
372
- }))));
373
- }
374
-
375
- // src/components/ZoomControl/hooks.ts
376
- import { useCallback as useCallback3 } from "react";
377
- var ScalePoints = [
378
- 0.3,
379
- 0.4096000000000002,
380
- 0.5120000000000001,
381
- 0.6400000000000001,
382
- 0.8,
383
- 1,
384
- 1.26,
385
- 1.5876000000000001,
386
- 2.000376,
387
- 2.5204737600000002,
388
- 3
389
- ];
390
- function nextScale(scale, delta) {
391
- const { length } = ScalePoints;
392
- const last = length - 1;
393
- if (scale < ScalePoints[0])
394
- return ScalePoints[0];
395
- if (scale > ScalePoints[last])
396
- return ScalePoints[last];
397
- for (let i = 0; i < length; ++i) {
398
- const curr = ScalePoints[i];
399
- const prev = i === 0 ? -Infinity : (ScalePoints[i - 1] + curr) / 2;
400
- const next = i === last ? Infinity : (ScalePoints[i + 1] + curr) / 2;
401
- if (prev <= scale && scale <= next)
402
- return ScalePoints[clamp(i + delta, 0, last)];
403
- }
404
- return 1;
405
- }
406
- function useZoomControl() {
407
- const app = useFastboardApp();
408
- const scale = useFastboardValue(app.camera).scale || 1;
409
- const resetCamera = useCallback3(() => {
410
- app.moveCamera({ scale: 1, centerX: 0, centerY: 0 });
411
- }, [app]);
412
- const zoomIn = useCallback3(() => {
413
- app.moveCamera({
414
- scale: nextScale(scale, 1),
415
- centerX: 0,
416
- centerY: 0
417
- });
418
- }, [app, scale]);
419
- const zoomOut = useCallback3(() => {
420
- app.moveCamera({
421
- scale: nextScale(scale, -1),
422
- centerX: 0,
423
- centerY: 0
424
- });
425
- }, [app, scale]);
426
- return { scale, resetCamera, zoomIn, zoomOut };
427
- }
428
-
429
- // src/components/ZoomControl/ZoomControl.tsx
430
- import Tippy2 from "@tippyjs/react";
431
- import clsx2 from "clsx";
432
- import React8 from "react";
433
-
434
- // src/icons/Minus.tsx
435
- import React5 from "react";
436
- function Minus({ theme = "light", active }) {
437
- const config = themes[theme];
438
- const stroke = active ? config.activeColor : config.color;
439
- return /* @__PURE__ */ React5.createElement("svg", {
440
- viewBox: "0 0 24 24",
441
- fill: "none"
442
- }, /* @__PURE__ */ React5.createElement("path", {
443
- d: "M5 12h14",
444
- stroke,
445
- strokeLinejoin: "round",
446
- strokeWidth: "1.25"
447
- }));
448
- }
449
-
450
- // src/icons/Plus.tsx
451
- import React6 from "react";
452
- function Plus({ theme = "light", active }) {
453
- const config = themes[theme];
454
- const stroke = active ? config.activeColor : config.color;
455
- return /* @__PURE__ */ React6.createElement("svg", {
456
- viewBox: "0 0 24 24",
457
- fill: "none"
458
- }, /* @__PURE__ */ React6.createElement("path", {
459
- d: "M5 12h14m-7-7v14",
460
- stroke,
461
- strokeLinejoin: "round",
462
- strokeWidth: "1.25"
463
- }));
464
- }
465
-
466
- // src/icons/Reset.tsx
467
- import React7 from "react";
468
- function Reset({ theme = "light", active }) {
469
- const config = themes[theme];
470
- const stroke = active ? config.activeColor : config.color;
471
- return /* @__PURE__ */ React7.createElement("svg", {
472
- viewBox: "0 0 24 24",
473
- fill: "none"
474
- }, /* @__PURE__ */ React7.createElement("circle", {
475
- cx: "12",
476
- cy: "12",
477
- fill: stroke,
478
- r: "2"
479
- }), /* @__PURE__ */ React7.createElement("path", {
480
- d: "M12 3v4m0 10v4m9-9h-4M7 12H3",
481
- stroke,
482
- strokeLinejoin: "round",
483
- strokeWidth: "1.25"
484
- }), /* @__PURE__ */ React7.createElement("circle", {
485
- cx: "12",
486
- cy: "12",
487
- r: "7",
488
- stroke,
489
- strokeLinejoin: "round",
490
- strokeWidth: "1.25"
491
- }));
492
- }
493
-
494
- // src/components/ZoomControl/ZoomControl.tsx
495
- var name2 = "fastboard-zoom-control";
496
- function ZoomControl({
497
- theme,
498
- resetIcon,
499
- resetIconDisable,
500
- minusIcon,
501
- minusIconDisable,
502
- plusIcon,
503
- plusIconDisable
504
- }) {
505
- theme = useTheme(theme);
506
- const { t } = useTranslation();
507
- const writable = useWritable();
508
- const { scale, resetCamera, zoomIn, zoomOut } = useZoomControl();
509
- const disabled = !writable;
510
- return /* @__PURE__ */ React8.createElement("div", {
511
- className: clsx2(name2, theme)
512
- }, /* @__PURE__ */ React8.createElement(Tippy2, {
513
- className: "fastboard-tip",
514
- content: t("zoomOut"),
515
- theme,
516
- disabled,
517
- placement: "top",
518
- delay: [1e3, 400],
519
- duration: 300,
520
- offset: TopOffset
521
- }, /* @__PURE__ */ React8.createElement("button", {
522
- className: clsx2(`${name2}-btn`, "minus", theme),
523
- disabled,
524
- onClick: zoomOut
525
- }, /* @__PURE__ */ React8.createElement(Icon, {
526
- fallback: /* @__PURE__ */ React8.createElement(Minus, {
527
- theme
528
- }),
529
- src: disabled ? minusIconDisable : minusIcon,
530
- alt: "[minus]"
531
- }))), /* @__PURE__ */ React8.createElement("span", {
532
- className: clsx2(`${name2}-text`, theme)
533
- }, /* @__PURE__ */ React8.createElement("span", {
534
- className: clsx2(`${name2}-scale`, theme)
535
- }, Math.ceil(scale * 100)), /* @__PURE__ */ React8.createElement("span", {
536
- className: clsx2(`${name2}-percent`, theme)
537
- }, "%")), /* @__PURE__ */ React8.createElement(Tippy2, {
538
- className: "fastboard-tip",
539
- content: t("zoomIn"),
540
- theme,
541
- disabled,
542
- placement: "top",
543
- delay: [1e3, 400],
544
- duration: 300,
545
- offset: TopOffset
546
- }, /* @__PURE__ */ React8.createElement("button", {
547
- className: clsx2(`${name2}-btn`, "plus", theme),
548
- disabled,
549
- onClick: zoomIn
550
- }, /* @__PURE__ */ React8.createElement(Icon, {
551
- fallback: /* @__PURE__ */ React8.createElement(Plus, {
552
- theme
553
- }),
554
- src: disabled ? plusIconDisable : plusIcon,
555
- alt: "[plus]"
556
- }))), /* @__PURE__ */ React8.createElement(Tippy2, {
557
- className: "fastboard-tip",
558
- content: t("reset"),
559
- theme,
560
- disabled,
561
- placement: "top",
562
- delay: [1e3, 400],
563
- duration: 300,
564
- offset: TopOffset
565
- }, /* @__PURE__ */ React8.createElement("button", {
566
- className: clsx2(`${name2}-btn`, "reset", theme),
567
- disabled,
568
- onClick: resetCamera
569
- }, /* @__PURE__ */ React8.createElement(Icon, {
570
- fallback: /* @__PURE__ */ React8.createElement(Reset, {
571
- theme
572
- }),
573
- src: disabled ? resetIconDisable : resetIcon,
574
- alt: "[reset]"
575
- }))));
576
- }
577
-
578
- // src/components/PageControl/hooks.ts
579
- import { useCallback as useCallback4 } from "react";
580
- function usePageControl() {
581
- const app = useFastboardApp();
582
- const pageIndex = useFastboardValue(app.sceneIndex);
583
- const pageCount = useFastboardValue(app.sceneLength);
584
- const addPage = useCallback4(async () => {
585
- await app.manager.switchMainViewToWriter();
586
- app.room.putScenes(app.manager.mainViewSceneDir, [{}], pageIndex + 1);
587
- await app.manager.setMainViewSceneIndex(pageIndex + 1);
588
- }, [app, pageIndex]);
589
- const prevPage = useCallback4(async () => {
590
- await app.manager.setMainViewSceneIndex(pageIndex - 1);
591
- }, [app, pageIndex]);
592
- const nextPage = useCallback4(async () => {
593
- await app.manager.setMainViewSceneIndex(pageIndex + 1);
594
- }, [app, pageIndex]);
595
- return { pageIndex, pageCount, prevPage, nextPage, addPage };
596
- }
597
-
598
- // src/components/PageControl/PageControl.tsx
599
- import Tippy3 from "@tippyjs/react";
600
- import clsx3 from "clsx";
601
- import React12 from "react";
602
-
603
- // src/icons/Left.tsx
604
- import React9 from "react";
605
- function Left({ theme = "light", active }) {
606
- const config = themes[theme];
607
- const stroke = active ? config.activeColor : config.color;
608
- return /* @__PURE__ */ React9.createElement("svg", {
609
- viewBox: "0 0 24 24",
610
- fill: "none"
611
- }, /* @__PURE__ */ React9.createElement("path", {
612
- d: "m14 8-2 2-2 2 2 2 2 2",
613
- stroke,
614
- strokeLinejoin: "round",
615
- strokeWidth: "1.25"
616
- }));
617
- }
618
-
619
- // src/icons/Right.tsx
620
- import React10 from "react";
621
- function Right({ theme = "light", active }) {
622
- const config = themes[theme];
623
- const stroke = active ? config.activeColor : config.color;
624
- return /* @__PURE__ */ React10.createElement("svg", {
625
- viewBox: "0 0 24 24",
626
- fill: "none"
627
- }, /* @__PURE__ */ React10.createElement("path", {
628
- d: "m10 8 2 2 2 2-2 2-2 2",
629
- stroke,
630
- strokeLinejoin: "round",
631
- strokeWidth: "1.25"
632
- }));
633
- }
634
-
635
- // src/icons/WhiteboardAdd.tsx
636
- import React11 from "react";
637
- function WhiteboardAdd({ theme = "light", active }) {
638
- const config = themes[theme];
639
- const stroke = active ? config.activeColor : config.color;
640
- return /* @__PURE__ */ React11.createElement("svg", {
641
- viewBox: "0 0 24 24",
642
- fill: "none"
643
- }, /* @__PURE__ */ React11.createElement("path", {
644
- d: "M4 20h16M4 6h16",
645
- stroke,
646
- strokeLinejoin: "round",
647
- strokeWidth: "1.25"
648
- }), /* @__PURE__ */ React11.createElement("rect", {
649
- height: "10",
650
- rx: "1",
651
- stroke,
652
- strokeLinejoin: "round",
653
- strokeWidth: "1.25",
654
- width: "14",
655
- x: "5",
656
- y: "8"
657
- }), /* @__PURE__ */ React11.createElement("path", {
658
- d: "M12 4v2m-3 7h6m-3-3v6",
659
- stroke,
660
- strokeLinejoin: "round",
661
- strokeWidth: "1.25"
662
- }));
663
- }
664
-
665
- // src/components/PageControl/PageControl.tsx
666
- var name3 = "fastboard-page-control";
667
- function PageControl({
668
- theme,
669
- addIcon,
670
- addIconDisable,
671
- prevIcon,
672
- prevIconDisable,
673
- nextIcon,
674
- nextIconDisable
675
- }) {
676
- theme = useTheme(theme);
677
- const { t } = useTranslation();
678
- const writable = useWritable();
679
- const _a = usePageControl(), { pageIndex, pageCount } = _a, actions = __objRest(_a, ["pageIndex", "pageCount"]);
680
- const disabled = !writable;
681
- return /* @__PURE__ */ React12.createElement("div", {
682
- className: clsx3(name3, theme)
683
- }, /* @__PURE__ */ React12.createElement(Tippy3, {
684
- className: "fastboard-tip",
685
- content: t("prevPage"),
686
- theme,
687
- disabled,
688
- placement: "top",
689
- delay: [1e3, 400],
690
- duration: 300,
691
- offset: TopOffset
692
- }, /* @__PURE__ */ React12.createElement("button", {
693
- className: clsx3(`${name3}-btn`, "prev", theme),
694
- disabled: disabled || pageIndex === 0,
695
- onClick: actions.prevPage
696
- }, /* @__PURE__ */ React12.createElement(Icon, {
697
- fallback: /* @__PURE__ */ React12.createElement(Left, {
698
- theme
699
- }),
700
- src: disabled ? prevIconDisable : prevIcon,
701
- alt: "[prev]"
702
- }))), /* @__PURE__ */ React12.createElement("span", {
703
- className: clsx3(`${name3}-text`, theme)
704
- }, /* @__PURE__ */ React12.createElement("span", {
705
- className: clsx3(`${name3}-page`, theme)
706
- }, pageCount === 0 ? "\u2026" : pageIndex + 1), /* @__PURE__ */ React12.createElement("span", {
707
- className: clsx3(`${name3}-slash`, theme)
708
- }, "/"), /* @__PURE__ */ React12.createElement("span", {
709
- className: clsx3(`${name3}-page-count`, theme)
710
- }, pageCount)), /* @__PURE__ */ React12.createElement(Tippy3, {
711
- className: "fastboard-tip",
712
- content: t("nextPage"),
713
- theme,
714
- disabled,
715
- placement: "top",
716
- delay: [1e3, 400],
717
- duration: 300,
718
- offset: TopOffset
719
- }, /* @__PURE__ */ React12.createElement("button", {
720
- className: clsx3(`${name3}-btn`, "next", theme),
721
- disabled: disabled || pageIndex === pageCount - 1,
722
- onClick: actions.nextPage
723
- }, /* @__PURE__ */ React12.createElement(Icon, {
724
- fallback: /* @__PURE__ */ React12.createElement(Right, {
725
- theme
726
- }),
727
- src: disabled ? nextIconDisable : nextIcon,
728
- alt: "[next]"
729
- }))), /* @__PURE__ */ React12.createElement(Tippy3, {
730
- className: "fastboard-tip",
731
- content: t("addPage"),
732
- theme,
733
- disabled,
734
- placement: "top",
735
- delay: [1e3, 400],
736
- duration: 300,
737
- offset: TopOffset
738
- }, /* @__PURE__ */ React12.createElement("button", {
739
- className: clsx3(`${name3}-btn`, "add", theme),
740
- disabled,
741
- onClick: actions.addPage
742
- }, /* @__PURE__ */ React12.createElement(Icon, {
743
- fallback: /* @__PURE__ */ React12.createElement(WhiteboardAdd, {
744
- theme
745
- }),
746
- src: disabled ? addIconDisable : addIcon,
747
- alt: "[add]"
748
- }))));
749
- }
750
-
751
- // src/components/Toolbar/hooks.ts
752
- import { useCallback as useCallback5, useState as useState3 } from "react";
753
-
754
- // src/components/Toolbar/const.ts
755
- import { ApplianceNames, ShapeType } from "white-web-sdk";
756
-
757
- // src/components/Toolbar/icons/index.ts
758
- import { memo } from "react";
759
-
760
- // src/components/Toolbar/icons/Apps.tsx
761
- import React13 from "react";
762
- var Apps = (props) => {
763
- const stroke = getStroke(props);
764
- return /* @__PURE__ */ React13.createElement("svg", {
765
- viewBox: "0 0 24 24"
766
- }, /* @__PURE__ */ React13.createElement("g", {
767
- fill: stroke
768
- }, /* @__PURE__ */ React13.createElement("path", {
769
- d: "M17.667 4.5h-3.334c-1.012 0-1.833.82-1.833 1.833V11.5h5.167c1.012 0 1.833-.82 1.833-1.833V6.333c0-1.012-.82-1.833-1.833-1.833Zm-3.334 1h3.334c.46 0 .833.373.833.833v3.334l-.006.104a.833.833 0 0 1-.827.729H13.5V6.333c0-.46.373-.833.833-.833Z"
770
- }), /* @__PURE__ */ React13.createElement("path", {
771
- d: "M6.333 19.5A1.833 1.833 0 0 1 4.5 17.667v-3.334c0-.525.221-1 .576-1.334a1.822 1.822 0 0 1-.576-1.332V8.333c0-1.012.82-1.833 1.833-1.833H10A1.5 1.5 0 0 1 11.5 8v4.5h4.167c.962 0 1.75.74 1.827 1.683l.006.15v3.334c0 1.012-.82 1.833-1.833 1.833Zm4.167-6H6.333a.833.833 0 0 0-.827.729l-.006.104v3.334c0 .46.373.833.833.833H10.5v-5Zm5.167 0H11.5v5h4.167c.46 0 .833-.373.833-.833v-3.334a.833.833 0 0 0-.833-.833ZM10 7.5H6.333a.833.833 0 0 0-.833.833v3.334c0 .46.373.833.833.833H10.5V8a.5.5 0 0 0-.41-.492L10 7.5Z"
772
- })));
773
- };
774
-
775
- // src/components/Toolbar/icons/Arrow.tsx
776
- import React14 from "react";
777
- var Arrow = (props) => {
778
- const stroke = getStroke(props);
779
- return /* @__PURE__ */ React14.createElement("svg", {
780
- viewBox: "0 0 24 24"
781
- }, /* @__PURE__ */ React14.createElement("path", {
782
- fill: stroke,
783
- d: "M19 5v6l-2.647-2.646L5.99 18.718l-.708-.708L15.645 7.646 13 5h6Z"
784
- }));
785
- };
786
-
787
- // src/components/Toolbar/icons/Circle.tsx
788
- import React15 from "react";
789
- var Circle = (props) => {
790
- const stroke = getStroke(props);
791
- return /* @__PURE__ */ React15.createElement("svg", {
792
- viewBox: "0 0 24 24"
793
- }, /* @__PURE__ */ React15.createElement("rect", {
794
- width: "15",
795
- height: "15",
796
- x: "4.5",
797
- y: "4.5",
798
- fill: "none",
799
- stroke,
800
- rx: "7.5"
801
- }));
802
- };
803
-
804
- // src/components/Toolbar/icons/Clean.tsx
805
- import React16 from "react";
806
- var Clean = (props) => {
807
- const stroke = getStroke(props);
808
- return /* @__PURE__ */ React16.createElement("svg", {
809
- viewBox: "0 0 24 24"
810
- }, /* @__PURE__ */ React16.createElement("path", {
811
- fill: stroke,
812
- d: "M9.754 11.99c0 1.856-.711 3.62-1.96 4.951l-.151.155h1.403l.855-.853h.707l.853.853h2.635l.094-.064a6.237 6.237 0 0 0 2.559-4.781l.005-.26h1a7.237 7.237 0 0 1-2.994 5.862l-.229.16-.277.083h-3l-.353-.146-.647-.647-.646.647-.354.146h-3l-.286-.91.214-.148a6.237 6.237 0 0 0 2.567-4.787l.005-.26h1Zm4.772-6.502v2l.35.039a2.98 2.98 0 0 1 2.644 2.78l.006.181h-8a2.98 2.98 0 0 1 2.65-2.961l.35-.039v-2h2Z"
813
- }));
814
- };
815
-
816
- // src/components/Toolbar/icons/Clicker.tsx
817
- import React17 from "react";
818
- var Clicker = (props) => {
819
- const stroke = getStroke(props);
820
- return /* @__PURE__ */ React17.createElement("svg", {
821
- viewBox: "0 0 24 24"
822
- }, /* @__PURE__ */ React17.createElement("g", {
823
- fill: "none"
824
- }, /* @__PURE__ */ React17.createElement("path", {
825
- d: "M0 0h24v24H0z"
826
- }), /* @__PURE__ */ React17.createElement("path", {
827
- fill: stroke,
828
- d: "m7 5.072 10.33 7.892-4.879.549 3.232 5.598-.866.5-3.233-5.597-2.914 3.95L7 5.072Z"
829
- })));
830
- };
831
-
832
- // src/components/Toolbar/icons/Collapse.tsx
833
- import React18 from "react";
834
- var Collapse = (props) => {
835
- const stroke = getStroke(props);
836
- return /* @__PURE__ */ React18.createElement("svg", {
837
- viewBox: "0 0 24 24"
838
- }, /* @__PURE__ */ React18.createElement("path", {
839
- fill: "none",
840
- stroke,
841
- d: "m8 10-2 2 2 2m10-8H6m12 12H6m12-4h-8m8-4h-8"
842
- }));
843
- };
844
-
845
- // src/components/Toolbar/icons/Diamond.tsx
846
- import React19 from "react";
847
- var Diamond = (props) => {
848
- const stroke = getStroke(props);
849
- return /* @__PURE__ */ React19.createElement("svg", {
850
- viewBox: "0 0 24 24"
851
- }, /* @__PURE__ */ React19.createElement("path", {
852
- fill: "none",
853
- stroke,
854
- d: "M4.222 12 12 4.222 19.778 12 12 19.778z"
855
- }));
856
- };
857
-
858
- // src/components/Toolbar/icons/Down.tsx
859
- import React20 from "react";
860
- var Down = (props) => {
861
- const stroke = getStroke(props);
862
- return /* @__PURE__ */ React20.createElement("svg", {
863
- viewBox: "0 0 24 24"
864
- }, /* @__PURE__ */ React20.createElement("path", {
865
- fill: "none",
866
- stroke,
867
- d: "m16 13-2 2-2 2-2-2-2-2m8-6-2 2-2 2-2-2-2-2"
868
- }));
869
- };
870
-
871
- // src/components/Toolbar/icons/Eraser.tsx
872
- import React21 from "react";
873
- var Eraser = (props) => {
874
- const stroke = getStroke(props);
875
- return /* @__PURE__ */ React21.createElement("svg", {
876
- viewBox: "0 0 24 24"
877
- }, /* @__PURE__ */ React21.createElement("path", {
878
- fill: stroke,
879
- d: "m14.333 5.183.165.007c.494.037.978.245 1.356.623l2.333 2.333a2.15 2.15 0 0 1 0 3.04l-5.833 5.834a3.8 3.8 0 0 1-5.374 0l-1.167-1.166a2.15 2.15 0 0 1 0-3.04l7-7c.42-.42.97-.63 1.52-.63ZM11.52 8.52l-4.999 5a1.15 1.15 0 0 0 0 1.626l1.167 1.167a2.8 2.8 0 0 0 3.96 0l3.832-3.833-3.96-3.96Z"
880
- }));
881
- };
882
-
883
- // src/components/Toolbar/icons/Expand.tsx
884
- import React22 from "react";
885
- var Expand = (props) => {
886
- const stroke = getStroke(props);
887
- return /* @__PURE__ */ React22.createElement("svg", {
888
- viewBox: "0 0 24 24"
889
- }, /* @__PURE__ */ React22.createElement("path", {
890
- fill: "none",
891
- stroke,
892
- d: "m16 10 2 2-2 2M6 6h12M6 18h12M6 14h8m-8-4h8"
893
- }));
894
- };
895
-
896
- // src/components/Toolbar/icons/Line.tsx
897
- import React23 from "react";
898
- var Line = (props) => {
899
- const stroke = getStroke(props);
900
- return /* @__PURE__ */ React23.createElement("svg", {
901
- viewBox: "0 0 24 24"
902
- }, /* @__PURE__ */ React23.createElement("path", {
903
- fill: stroke,
904
- d: "m18.01 5.282.708.708L5.99 18.718l-.708-.708z"
905
- }));
906
- };
907
-
908
- // src/components/Toolbar/icons/Pencil.tsx
909
- import React24 from "react";
910
- var Pencil = (props) => {
911
- const stroke = getStroke(props);
912
- return /* @__PURE__ */ React24.createElement("svg", {
913
- viewBox: "0 0 24 24"
914
- }, /* @__PURE__ */ React24.createElement("path", {
915
- fill: stroke,
916
- d: "m17.497 4.84.116.105 1.442 1.442a1.52 1.52 0 0 1 .104 2.034l-.104.116L8.733 18.858l-4.347.756.756-4.347L15.463 4.945a1.52 1.52 0 0 1 2.034-.104ZM5.967 16.349l-.353 2.037 2.037-.354-1.683-1.683Zm8.407-8.901-7.946 7.946 2.178 2.178 7.946-7.946-2.178-2.178Zm-.728 2.2.708.707-5 5-.708-.708 5-5Zm2.596-4.055-.072.06-1.09 1.088 2.179 2.178 1.089-1.088a.52.52 0 0 0 .105-.584l-.045-.08-.06-.072-1.442-1.442a.52.52 0 0 0-.664-.06Z"
917
- }));
918
- };
919
-
920
- // src/components/Toolbar/icons/Rectangle.tsx
921
- import React25 from "react";
922
- var Rectangle = (props) => {
923
- const stroke = getStroke(props);
924
- return /* @__PURE__ */ React25.createElement("svg", {
925
- viewBox: "0 0 24 24"
926
- }, /* @__PURE__ */ React25.createElement("path", {
927
- fill: "none",
928
- stroke,
929
- d: "M5.5 5.5h13v13h-13z"
930
- }));
931
- };
932
-
933
- // src/components/Toolbar/icons/Selector.tsx
934
- import React26 from "react";
935
- var Selector = (props) => {
936
- const stroke = getStroke(props);
937
- return /* @__PURE__ */ React26.createElement("svg", {
938
- viewBox: "0 0 24 24"
939
- }, /* @__PURE__ */ React26.createElement("path", {
940
- fill: stroke,
941
- d: "m12 12 8 2.667-3.556 1.777L14.667 20 12 12Zm3-8v7.5h-1V5H5v9h6.5v1H4V4h11Z"
942
- }));
943
- };
944
-
945
- // src/components/Toolbar/icons/SpeechBalloon.tsx
946
- import React27 from "react";
947
- var SpeechBalloon = (props) => {
948
- const stroke = getStroke(props);
949
- return /* @__PURE__ */ React27.createElement("svg", {
950
- viewBox: "0 0 24 24"
951
- }, /* @__PURE__ */ React27.createElement("path", {
952
- fill: "none",
953
- stroke,
954
- d: "M17 4.5c.414 0 .79.168 1.06.44.272.27.44.646.44 1.06v9c0 .414-.168.79-.44 1.06a1.49 1.49 0 0 1-1.06.44h-4.207l-2.715 2.715-1.81-2.715H7a1.49 1.49 0 0 1-1.06-.44A1.495 1.495 0 0 1 5.5 15V6c0-.414.168-.79.44-1.06A1.49 1.49 0 0 1 7 4.5Z"
955
- }));
956
- };
957
-
958
- // src/components/Toolbar/icons/Star.tsx
959
- import React28 from "react";
960
- var Star = (props) => {
961
- const stroke = getStroke(props);
962
- return /* @__PURE__ */ React28.createElement("svg", {
963
- viewBox: "0 0 24 24"
964
- }, /* @__PURE__ */ React28.createElement("path", {
965
- fill: "none",
966
- stroke,
967
- d: "m12 3.523 1.993 5.734 6.07.123-4.838 3.668 1.758 5.81L12 15.391l-4.983 3.467 1.758-5.81L3.938 9.38l6.069-.123L12 3.523Z"
968
- }));
969
- };
970
-
971
- // src/components/Toolbar/icons/Text.tsx
972
- import React29 from "react";
973
- var Text = (props) => {
974
- const stroke = getStroke(props);
975
- return /* @__PURE__ */ React29.createElement("svg", {
976
- viewBox: "0 0 24 24"
977
- }, /* @__PURE__ */ React29.createElement("path", {
978
- fill: stroke,
979
- d: "M18.5 5.5V8h-1V6.5H13v11h2v1H9v-1h2v-11H6.5V8h-1V5.5h13Z"
980
- }));
981
- };
982
-
983
- // src/components/Toolbar/icons/Triangle.tsx
984
- import React30 from "react";
985
- var Triangle = (props) => {
986
- const stroke = getStroke(props);
987
- return /* @__PURE__ */ React30.createElement("svg", {
988
- viewBox: "0 0 24 24"
989
- }, /* @__PURE__ */ React30.createElement("path", {
990
- fill: "none",
991
- stroke,
992
- d: "M12 6.008 19.138 18.5H4.862L12 6.008Z"
993
- }));
994
- };
995
-
996
- // src/components/Toolbar/icons/Up.tsx
997
- import React31 from "react";
998
- var Up = (props) => {
999
- const stroke = getStroke(props);
1000
- return /* @__PURE__ */ React31.createElement("svg", {
1001
- viewBox: "0 0 24 24"
1002
- }, /* @__PURE__ */ React31.createElement("path", {
1003
- fill: "none",
1004
- stroke,
1005
- d: "m16 11-2-2-2-2-2 2-2 2m8 6-2-2-2-2-2 2-2 2"
1006
- }));
1007
- };
1008
-
1009
- // src/components/Toolbar/icons/index.ts
1010
- var Icons = {
1011
- Clicker: memo(Clicker),
1012
- Collapse: memo(Collapse),
1013
- Eraser: memo(Eraser),
1014
- Expand: memo(Expand),
1015
- Pencil: memo(Pencil),
1016
- Selector: memo(Selector),
1017
- Rectangle: memo(Rectangle),
1018
- Text: memo(Text),
1019
- Apps: memo(Apps),
1020
- Clean: memo(Clean),
1021
- Circle: memo(Circle),
1022
- Line: memo(Line),
1023
- Arrow: memo(Arrow),
1024
- Star: memo(Star),
1025
- Diamond: memo(Diamond),
1026
- SpeechBalloon: memo(SpeechBalloon),
1027
- Triangle: memo(Triangle),
1028
- Up: memo(Up),
1029
- Down: memo(Down)
1030
- };
1031
-
1032
- // src/components/Toolbar/const.ts
1033
- var ShapesMap = {
1034
- [ApplianceNames.rectangle]: Icons.Rectangle,
1035
- [ApplianceNames.ellipse]: Icons.Circle,
1036
- [ApplianceNames.straight]: Icons.Line,
1037
- [ApplianceNames.arrow]: Icons.Arrow,
1038
- [ShapeType.Pentagram]: Icons.Star,
1039
- [ShapeType.Rhombus]: Icons.Diamond,
1040
- [ShapeType.Triangle]: Icons.Triangle,
1041
- [ShapeType.SpeechBalloon]: Icons.SpeechBalloon
1042
- };
1043
- var ApplianceShapes = [
1044
- ApplianceNames.rectangle,
1045
- ApplianceNames.ellipse,
1046
- ApplianceNames.straight,
1047
- ApplianceNames.arrow
1048
- ];
1049
- var Shapes = [
1050
- ShapeType.Pentagram,
1051
- ShapeType.Rhombus,
1052
- ShapeType.Triangle,
1053
- ShapeType.SpeechBalloon
1054
- ];
1055
- var ItemHeight = 32 + 4;
1056
- var ItemsCount = 8;
1057
- var MaxHeight = ItemHeight * ItemsCount - 4;
1058
- var MinHeight = ItemHeight * 2 - 4;
1059
-
1060
- // src/components/Toolbar/hooks.ts
1061
- function useRoomState() {
1062
- return useFastboardValue(useFastboardApp().memberState);
1063
- }
1064
- function useAppsStatus() {
1065
- return useFastboardValue(useFastboardApp().appsStatus);
1066
- }
1067
- function useToolbar() {
1068
- const app = useFastboardApp();
1069
- const writable = useWritable();
1070
- const memberState = useRoomState();
1071
- const appsStatus = useAppsStatus();
1072
- const [lastShape, setLastShape] = useState3("rectangle");
1073
- const cleanCurrentScene = useCallback5(() => {
1074
- app.cleanCurrentScene();
1075
- }, [app]);
1076
- const setAppliance = useCallback5((appliance, shape) => {
1077
- app.setAppliance(appliance, shape);
1078
- if (shape) {
1079
- setLastShape(shape);
1080
- } else if (appliance in ShapesMap) {
1081
- setLastShape(appliance);
1082
- }
1083
- }, [app]);
1084
- const setStrokeWidth = useCallback5((strokeWidth) => {
1085
- app.setStrokeWidth(strokeWidth);
1086
- }, [app]);
1087
- const setStrokeColor = useCallback5((strokeColor) => {
1088
- app.setStrokeColor(strokeColor);
1089
- }, [app]);
1090
- return {
1091
- writable,
1092
- memberState,
1093
- lastShape,
1094
- appsStatus,
1095
- cleanCurrentScene,
1096
- setAppliance,
1097
- setStrokeWidth,
1098
- setStrokeColor
1099
- };
1100
- }
1101
- var EmptyToolbarHook = {
1102
- writable: false,
1103
- memberState: void 0,
1104
- lastShape: "rectangle",
1105
- appsStatus: {},
1106
- cleanCurrentScene: noop,
1107
- setAppliance: noop,
1108
- setStrokeWidth: noop,
1109
- setStrokeColor: noop
1110
- };
1111
-
1112
- // src/components/Toolbar/Toolbar.tsx
1113
- import clsx10 from "clsx";
1114
- import { AnimatePresence, motion } from "framer-motion";
1115
- import React44, { createContext as createContext3, useState as useState5 } from "react";
1116
-
1117
- // src/components/Toolbar/components/assets/expanded.png
1118
- var expanded_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA5xJREFUeF7tnL9v00AUx5/TlRkJMSAxZ+jYCf4GtopK6dB2qBBsjshaJErboWVJpYaNLGDaIR2YYAFXqlxhlvzAJkhGJGlyDhVNSpWgyOiqBJnQ+urznW2Jy1JVVnKffv3x8yV9LxLE5CEBwFUA6ALAzyiZJFVVX21ubj7N5/MmACAAGEQBJDWbzQZCqGcYRm52dlbpdDpNAPgRNozkOE691+tBo9FItNtto1AorC0tLX0EAAzUDwvoDGS02NHREU4IarXatizLOV3XvwHAdwBweAP9BYIXGwwGcHh4mLBtG2matrGwsPB2mA5Xmf8BGf3lJycn+HRNtFqtd2HIfCEIBnIcBxBCEkKobxjGFk+ZPUFG6YQh86VAPGSuAUCbhcy+QMZktjVNW2cls28QD5k/A0CLtjJTg4zLbJpmLpVKvaStzIFAWMrMBISFzExBgsjMHIRWZm4gfmXmCnKezIqiLK+srOjDG+mfu3ooIG6Z6/X6r/39/Udzc3OvAQBX5jOYUEHwgqenp2BZlrS7u/sgnU6/Ge53wgfBMN1uV6pWq/b09PTdSqVSwtU49ERGp8myrISqqsszMzPPcSqRgRwfH0vlcvnD1NTUIgB8jQyk3+9DuVy2Jycn7wBANTIQvPsrlUqJZDJ5GwA+RQaCXSkWixPJZPKWABldOSKR8XeLIhGRCOkTBOGIcEQ4QkpAOEJKSNQR4YhwhJSAcISUkKgjTBy5fuPmNfxCNetLA/98srp25WFaxv+UpH5QnZpxEPz7/XuLnSAwzEBwFEFgmIIEgWEOQgvDBYQGhhuIXxiuIH5g/g8QP5czt0T8QFB/mHdeZXXXdr8QXEBoIJiD0EIwBQkCwQwksm0A9abD44lUl68A4ZEAkz0rDzDhiDg1JK+EI8IR4QgpAeEIKSFRR4QjwhFSAsIRUkKijsTSkdi0f8WmIS42LYKxaJqMRRtpLBpr8URTpK3GrrEYU1GUx6E3X7sHhUzTfJZKpV5cNFvBrY10NDqFEFKz2ex6Pp/3nDZhDuIaJrMPDg425ufncac3HrXzHCZjCuIar9vJZDI5TdPweN2lJpKYgLhlLBQKqzQDh4FA/MhI2ptQg/iVkTkIrYxMQdwyyrK8pet6uONxLGQMlAhLGalBXDK+z2azG6TKSFqIdNxrzNZXZSQtRDp+0eDxDmsZLwUSxvQqEWQ4nN4n3aZJLxT0uLS3t7cdhowk0Ph8gQGJNKzjvwGKWUjXcvHclAAAAABJRU5ErkJggg==";
1119
-
1120
- // src/components/Toolbar/Content.tsx
1121
- import clsx9 from "clsx";
1122
- import React43, { useCallback as useCallback11, useContext as useContext13, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
1123
-
1124
- // src/components/Toolbar/components/ApplianceButtons.tsx
1125
- import React33, { useCallback as useCallback6, useContext as useContext4 } from "react";
1126
- import { ApplianceNames as ApplianceNames2 } from "white-web-sdk";
1127
-
1128
- // src/components/Toolbar/components/Button.tsx
1129
- import clsx4 from "clsx";
1130
- import React32, { forwardRef, useContext as useContext3 } from "react";
1131
- import Tippy4 from "@tippyjs/react";
1132
- var Button = forwardRef((props, ref) => {
1133
- const { content, disabled, active, onClick, interactive, placement = "right", children } = props;
1134
- const { writable, theme } = useContext3(ToolbarContext);
1135
- return /* @__PURE__ */ React32.createElement(Tippy4, {
1136
- className: "fastboard-tip",
1137
- content,
1138
- interactive,
1139
- theme,
1140
- disabled: disabled || !writable,
1141
- placement,
1142
- offset: placement.includes("right") ? RightOffset : void 0,
1143
- delay: [1e3, 400],
1144
- duration: 300
1145
- }, /* @__PURE__ */ React32.createElement("button", {
1146
- ref,
1147
- className: clsx4("fastboard-toolbar-btn", theme, { active }),
1148
- onClick,
1149
- disabled: disabled || !writable
1150
- }, children));
1151
- });
1152
-
1153
- // src/components/Toolbar/components/ApplianceButtons.tsx
1154
- function renderToolTip(text, hotkey) {
1155
- if (!(typeof hotkey === "string"))
1156
- return text;
1157
- return /* @__PURE__ */ React33.createElement("span", {
1158
- className: "fastboard-toolbar-tooltip"
1159
- }, /* @__PURE__ */ React33.createElement("span", null, text), /* @__PURE__ */ React33.createElement("span", {
1160
- className: "fastboard-toolbar-hotkey"
1161
- }, hotkey.toUpperCase()));
1162
- }
1163
- function ClickerButton() {
1164
- var _a;
1165
- const app = useFastboardApp();
1166
- const { t } = useTranslation();
1167
- const { theme, icons, writable, setAppliance, memberState } = useContext4(ToolbarContext);
1168
- const changeAppliance = useCallback6(() => setAppliance(ApplianceNames2.clicker), [setAppliance]);
1169
- const shortcut = (_a = app.hotKeys) == null ? void 0 : _a.changeToClick;
1170
- const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
1171
- const active = appliance === ApplianceNames2.clicker;
1172
- const disabled = !writable;
1173
- return /* @__PURE__ */ React33.createElement(Button, {
1174
- content: renderToolTip(t("clicker"), shortcut),
1175
- onClick: changeAppliance,
1176
- active
1177
- }, /* @__PURE__ */ React33.createElement(Icon, {
1178
- fallback: /* @__PURE__ */ React33.createElement(Icons.Clicker, {
1179
- theme,
1180
- active
1181
- }),
1182
- src: disabled ? icons == null ? void 0 : icons.clickerIconDisable : icons == null ? void 0 : icons.clickerIcon,
1183
- alt: "[clicker]"
1184
- }));
1185
- }
1186
- function SelectorButton() {
1187
- const app = useFastboardApp();
1188
- const { t } = useTranslation();
1189
- const { theme, icons, writable, setAppliance, memberState } = useContext4(ToolbarContext);
1190
- const changeAppliance = useCallback6(() => setAppliance(ApplianceNames2.selector), [setAppliance]);
1191
- const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
1192
- const active = appliance === ApplianceNames2.selector;
1193
- const disabled = !writable;
1194
- const shortcut = (app.hotKeys || defaultHotKeys).changeToSelector;
1195
- return /* @__PURE__ */ React33.createElement(Button, {
1196
- content: renderToolTip(t("selector"), shortcut),
1197
- onClick: changeAppliance,
1198
- active
1199
- }, /* @__PURE__ */ React33.createElement(Icon, {
1200
- fallback: /* @__PURE__ */ React33.createElement(Icons.Selector, {
1201
- theme,
1202
- active
1203
- }),
1204
- src: disabled ? icons == null ? void 0 : icons.selectorIconDisable : icons == null ? void 0 : icons.selectorIcon,
1205
- alt: "[selector]"
1206
- }));
1207
- }
1208
- function EraserButton() {
1209
- const app = useFastboardApp();
1210
- const { t } = useTranslation();
1211
- const { theme, icons, writable, setAppliance, memberState } = useContext4(ToolbarContext);
1212
- const changeAppliance = useCallback6(() => setAppliance(ApplianceNames2.eraser), [setAppliance]);
1213
- const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
1214
- const active = appliance === ApplianceNames2.eraser;
1215
- const disabled = !writable;
1216
- const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToEraser;
1217
- return /* @__PURE__ */ React33.createElement(Button, {
1218
- content: renderToolTip(t("eraser"), shortcut),
1219
- onClick: changeAppliance,
1220
- active
1221
- }, /* @__PURE__ */ React33.createElement(Icon, {
1222
- fallback: /* @__PURE__ */ React33.createElement(Icons.Eraser, {
1223
- theme,
1224
- active
1225
- }),
1226
- src: disabled ? icons == null ? void 0 : icons.eraserIconDisable : icons == null ? void 0 : icons.eraserIcon,
1227
- alt: "[eraser]"
1228
- }));
1229
- }
1230
- function CleanButton() {
1231
- const { t } = useTranslation();
1232
- const { theme, icons, writable, cleanCurrentScene } = useContext4(ToolbarContext);
1233
- const disabled = !writable;
1234
- return /* @__PURE__ */ React33.createElement(Button, {
1235
- content: t("clean"),
1236
- onClick: cleanCurrentScene
1237
- }, /* @__PURE__ */ React33.createElement(Icon, {
1238
- fallback: /* @__PURE__ */ React33.createElement(Icons.Clean, {
1239
- theme
1240
- }),
1241
- src: disabled ? icons == null ? void 0 : icons.cleanIconDisable : icons == null ? void 0 : icons.cleanIcon,
1242
- alt: "[clean]"
1243
- }));
1244
- }
1245
-
1246
- // src/components/Toolbar/components/AppsButton.tsx
1247
- import clsx5 from "clsx";
1248
- import Tippy5 from "@tippyjs/react";
1249
- import React35, { useContext as useContext5 } from "react";
1250
-
1251
- // src/components/Toolbar/components/assets/vscode.png
1252
- var vscode_default = "data:image/png;base64,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";
1253
-
1254
- // src/components/Toolbar/components/assets/geogebra.png
1255
- var geogebra_default = "data:image/png;base64,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";
1256
-
1257
- // src/components/Toolbar/components/assets/countdown.png
1258
- var countdown_default = "data:image/png;base64,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";
1259
-
1260
- // src/components/Toolbar/icons/Loading.tsx
1261
- import React34 from "react";
1262
- var Loading = (props) => {
1263
- const stroke = getStroke(props);
1264
- return /* @__PURE__ */ React34.createElement("svg", {
1265
- viewBox: "0 0 24 24"
1266
- }, /* @__PURE__ */ React34.createElement("path", {
1267
- fill: stroke,
1268
- d: "M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8Z"
1269
- }));
1270
- };
1271
-
1272
- // src/components/Toolbar/components/AppsButton.tsx
1273
- function AppsButton({ content, onClick }) {
1274
- const { theme, icons, writable } = useContext5(ToolbarContext);
1275
- const disabled = !writable;
1276
- const button = /* @__PURE__ */ React35.createElement(Button, {
1277
- content: "Apps",
1278
- onClick
1279
- }, /* @__PURE__ */ React35.createElement(Icon, {
1280
- fallback: /* @__PURE__ */ React35.createElement(Icons.Apps, {
1281
- theme
1282
- }),
1283
- src: disabled ? icons == null ? void 0 : icons.appsIconDisable : icons == null ? void 0 : icons.appsIcon,
1284
- alt: "[apps]"
1285
- }));
1286
- return content === false ? button : /* @__PURE__ */ React35.createElement("span", {
1287
- className: "fastboard-toolbar-btn-interactive"
1288
- }, /* @__PURE__ */ React35.createElement(Tippy5, {
1289
- className: "fastboard-tip",
1290
- content: renderAppsButtonContent(content),
1291
- theme,
1292
- placement: "right-end",
1293
- trigger: "click",
1294
- offset: RightOffset,
1295
- arrow: false,
1296
- interactive: true
1297
- }, button));
1298
- }
1299
- function renderAppsButtonContent(content) {
1300
- return /* @__PURE__ */ React35.createElement("div", {
1301
- className: "fastboard-toolbar-panel apps"
1302
- }, /* @__PURE__ */ React35.createElement("div", {
1303
- className: "fastboard-toolbar-apps"
1304
- }, content || /* @__PURE__ */ React35.createElement(DefaultApps, null)));
1305
- }
1306
- function DefaultApps() {
1307
- const app = useFastboardApp();
1308
- const { appsStatus } = useContext5(ToolbarContext);
1309
- return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(AppIcon, {
1310
- title: "Code Editor",
1311
- src: vscode_default,
1312
- alt: "[code editor]",
1313
- appStatus: appsStatus["Monaco"],
1314
- onClick: app == null ? void 0 : app.insertCodeEditor.bind(app)
1315
- }), /* @__PURE__ */ React35.createElement(AppIcon, {
1316
- title: "GeoGebra",
1317
- src: geogebra_default,
1318
- alt: "[geogebra]",
1319
- appStatus: appsStatus["GeoGebra"],
1320
- onClick: app == null ? void 0 : app.insertGeoGebra.bind(app)
1321
- }), /* @__PURE__ */ React35.createElement(AppIcon, {
1322
- title: "Countdown",
1323
- src: countdown_default,
1324
- alt: "[countdown]",
1325
- appStatus: appsStatus["Countdown"],
1326
- onClick: app == null ? void 0 : app.insertCountdown.bind(app)
1327
- }));
1328
- }
1329
- function AppIcon({ title, src, alt, appStatus, onClick }) {
1330
- const { theme } = useContext5(ToolbarContext);
1331
- const { status = "idle", reason } = appStatus || {};
1332
- const loading = status === "loading";
1333
- const failed = status === "failed";
1334
- const unifiedTitle = loading ? "loading" : failed ? reason : title;
1335
- return /* @__PURE__ */ React35.createElement("div", {
1336
- className: "fastboard-toolbar-app-icon-wrapper"
1337
- }, /* @__PURE__ */ React35.createElement("span", {
1338
- className: clsx5("fastboard-toolbar-app-icon", {
1339
- "fastboard-toolbar-app-is-loading": loading,
1340
- "fastboard-toolbar-app-is-failed": failed
1341
- })
1342
- }, /* @__PURE__ */ React35.createElement(Button, {
1343
- disabled: failed || loading,
1344
- placement: "top",
1345
- content: unifiedTitle,
1346
- onClick
1347
- }, /* @__PURE__ */ React35.createElement("img", {
1348
- src,
1349
- alt,
1350
- title: unifiedTitle
1351
- })), /* @__PURE__ */ React35.createElement("span", {
1352
- className: "fastboard-toolbar-app-icon-text"
1353
- }, title)), loading && /* @__PURE__ */ React35.createElement("span", {
1354
- className: "fastboard-toolbar-app-icon-mask"
1355
- }, /* @__PURE__ */ React35.createElement(Loading, {
1356
- theme
1357
- })));
1358
- }
1359
-
1360
- // src/components/Toolbar/components/PencilButton.tsx
1361
- import Tippy6 from "@tippyjs/react";
1362
- import React39, { useCallback as useCallback7, useContext as useContext9 } from "react";
1363
- import { ApplianceNames as ApplianceNames3 } from "white-web-sdk";
1364
-
1365
- // src/components/Toolbar/components/ColorBox.tsx
1366
- import clsx6 from "clsx";
1367
- import React36, { useContext as useContext6 } from "react";
1368
- var colors = {
1369
- "#E02020": [224, 32, 32],
1370
- "#F7B500": [247, 181, 0],
1371
- "#6DD400": [109, 212, 0],
1372
- "#32C5FF": [50, 197, 255],
1373
- "#0091FF": [0, 145, 255],
1374
- "#6236FF": [98, 54, 255],
1375
- "#B620E0": [182, 32, 224],
1376
- "#6D7278": [109, 114, 120]
1377
- };
1378
- var colorKeys = Object.keys(colors);
1379
- function ColorBox() {
1380
- const { theme, memberState, setStrokeColor, writable } = useContext6(ToolbarContext);
1381
- const strokeColor = memberState == null ? void 0 : memberState.strokeColor;
1382
- const disabled = !writable;
1383
- return /* @__PURE__ */ React36.createElement("div", {
1384
- className: clsx6("fastboard-toolbar-color-box", theme)
1385
- }, colorKeys.map((key) => /* @__PURE__ */ React36.createElement("div", {
1386
- key,
1387
- className: clsx6("fastboard-toolbar-color-item", theme),
1388
- onClick: () => setStrokeColor(colors[key])
1389
- }, /* @__PURE__ */ React36.createElement("div", {
1390
- className: clsx6("fastboard-toolbar-color-border", theme, {
1391
- active: strokeColor && isEqualArray(strokeColor, colors[key])
1392
- })
1393
- }, /* @__PURE__ */ React36.createElement("button", {
1394
- className: clsx6("fastboard-toolbar-color-btn"),
1395
- style: { background: key },
1396
- disabled,
1397
- onClick: (ev) => {
1398
- ev.stopPropagation();
1399
- setStrokeColor(colors[key]);
1400
- }
1401
- })))));
1402
- }
1403
-
1404
- // src/components/Toolbar/components/CutLine.tsx
1405
- import clsx7 from "clsx";
1406
- import React37, { useContext as useContext7 } from "react";
1407
- function CutLine() {
1408
- const { theme } = useContext7(ToolbarContext);
1409
- return /* @__PURE__ */ React37.createElement("span", {
1410
- className: clsx7(`${name4}-cut-line`, theme)
1411
- });
1412
- }
1413
-
1414
- // src/components/Toolbar/components/Slider.tsx
1415
- import clsx8 from "clsx";
1416
- import RcSlider from "rc-slider";
1417
- import React38, { useContext as useContext8 } from "react";
1418
- function Slider() {
1419
- const { theme, writable, memberState, setStrokeWidth } = useContext8(ToolbarContext);
1420
- const { activeColor } = themes[theme];
1421
- const strokeWidth = (memberState == null ? void 0 : memberState.strokeWidth) || 0;
1422
- return /* @__PURE__ */ React38.createElement(RcSlider, {
1423
- disabled: !writable,
1424
- className: clsx8("fastboard-toolbar-slider", theme),
1425
- trackStyle: { background: activeColor },
1426
- handleStyle: { border: `1px solid ${activeColor}` },
1427
- value: strokeWidth,
1428
- onChange: setStrokeWidth,
1429
- min: 1,
1430
- max: 32
1431
- });
1432
- }
1433
-
1434
- // src/components/Toolbar/components/PencilButton.tsx
1435
- function PencilButton() {
1436
- const app = useFastboardApp();
1437
- const { t } = useTranslation();
1438
- const { theme, icons, writable, setAppliance, memberState } = useContext9(ToolbarContext);
1439
- const changeAppliance = useCallback7(() => {
1440
- setAppliance(ApplianceNames3.pencil);
1441
- }, [setAppliance]);
1442
- const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
1443
- const active = appliance === ApplianceNames3.pencil;
1444
- const disabled = !writable;
1445
- const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToPencil;
1446
- return /* @__PURE__ */ React39.createElement("span", {
1447
- className: "fastboard-toolbar-btn-interactive"
1448
- }, /* @__PURE__ */ React39.createElement(Tippy6, {
1449
- className: "fastboard-tip",
1450
- content: renderPencilButtonContent(),
1451
- theme,
1452
- placement: "right-start",
1453
- trigger: "click",
1454
- offset: RightOffset,
1455
- arrow: false,
1456
- interactive: true
1457
- }, /* @__PURE__ */ React39.createElement(Button, {
1458
- content: renderToolTip(t("pencil"), shortcut),
1459
- active,
1460
- onClick: changeAppliance
1461
- }, /* @__PURE__ */ React39.createElement(Icon, {
1462
- fallback: /* @__PURE__ */ React39.createElement(Icons.Pencil, {
1463
- theme,
1464
- active
1465
- }),
1466
- src: disabled ? icons == null ? void 0 : icons.pencilIconDisable : icons == null ? void 0 : icons.pencilIcon,
1467
- alt: "[pencil]"
1468
- }), /* @__PURE__ */ React39.createElement("span", {
1469
- className: "fastboard-toolbar-triangle"
1470
- }))));
1471
- }
1472
- function renderPencilButtonContent() {
1473
- return /* @__PURE__ */ React39.createElement("div", {
1474
- className: "fastboard-toolbar-panel pencil"
1475
- }, /* @__PURE__ */ React39.createElement(Slider, null), /* @__PURE__ */ React39.createElement(CutLine, null), /* @__PURE__ */ React39.createElement(ColorBox, null));
1476
- }
1477
-
1478
- // src/components/Toolbar/components/ShapesButton.tsx
1479
- import Tippy7 from "@tippyjs/react";
1480
- import React40, { useCallback as useCallback8, useContext as useContext10 } from "react";
1481
- import { ApplianceNames as ApplianceNames4 } from "white-web-sdk";
1482
- var ShapeTypes = /* @__PURE__ */ new Set([...ApplianceShapes, ...Shapes]);
1483
- function ShapesButton() {
1484
- const { t } = useTranslation();
1485
- const { writable, theme, memberState, lastShape, setAppliance } = useContext10(ToolbarContext);
1486
- const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
1487
- const shape = memberState == null ? void 0 : memberState.shapeType;
1488
- const key = appliance === ApplianceNames4.shape ? shape : appliance;
1489
- const active = ShapeTypes.has(key);
1490
- const CurrentIcon = ShapesMap[lastShape];
1491
- const onClick = useCallback8(() => {
1492
- if (ApplianceShapes.includes(lastShape)) {
1493
- setAppliance(lastShape);
1494
- } else if (Shapes.includes(lastShape)) {
1495
- setAppliance(ApplianceNames4.shape, lastShape);
1496
- }
1497
- }, [lastShape, setAppliance]);
1498
- return /* @__PURE__ */ React40.createElement("span", {
1499
- className: "fastboard-toolbar-btn-interactive"
1500
- }, /* @__PURE__ */ React40.createElement(Tippy7, {
1501
- className: "fastboard-tip",
1502
- content: renderShapesButtonContent(),
1503
- theme,
1504
- placement: "right-start",
1505
- trigger: "click",
1506
- offset: RightOffset,
1507
- arrow: false,
1508
- interactive: true
1509
- }, /* @__PURE__ */ React40.createElement(Button, {
1510
- content: t("shape"),
1511
- active,
1512
- disabled: !writable,
1513
- onClick
1514
- }, /* @__PURE__ */ React40.createElement(CurrentIcon, {
1515
- theme,
1516
- active
1517
- }), /* @__PURE__ */ React40.createElement("span", {
1518
- className: "fastboard-toolbar-triangle"
1519
- }))));
1520
- }
1521
- function renderShapesButtonContent() {
1522
- return /* @__PURE__ */ React40.createElement("div", {
1523
- className: "fastboard-toolbar-panel shapes"
1524
- }, /* @__PURE__ */ React40.createElement(ShapesBox, null), /* @__PURE__ */ React40.createElement(CutLine, null), /* @__PURE__ */ React40.createElement(Slider, null), /* @__PURE__ */ React40.createElement(CutLine, null), /* @__PURE__ */ React40.createElement(ColorBox, null));
1525
- }
1526
- function ShapesBox() {
1527
- const { t } = useTranslation();
1528
- return /* @__PURE__ */ React40.createElement("div", {
1529
- className: "fastboard-toolbar-shapes"
1530
- }, ApplianceShapes.map((Appliance) => /* @__PURE__ */ React40.createElement(ApplianceShapeButton, {
1531
- key: Appliance,
1532
- content: t(Appliance),
1533
- Appliance,
1534
- Icon: ShapesMap[Appliance]
1535
- })), Shapes.map((shape) => /* @__PURE__ */ React40.createElement(ShapeShapeButton, {
1536
- key: shape,
1537
- content: t(shape),
1538
- shape,
1539
- Icon: ShapesMap[shape]
1540
- })));
1541
- }
1542
- function ApplianceShapeButton({ content, Appliance, Icon: Icon2 }) {
1543
- const { theme, writable, setAppliance, memberState } = useContext10(ToolbarContext);
1544
- const current = memberState == null ? void 0 : memberState.currentApplianceName;
1545
- const disabled = !writable;
1546
- return /* @__PURE__ */ React40.createElement(Button, {
1547
- content,
1548
- disabled,
1549
- placement: "top",
1550
- onClick: () => setAppliance(Appliance)
1551
- }, /* @__PURE__ */ React40.createElement(Icon2, {
1552
- theme,
1553
- active: current === Appliance
1554
- }));
1555
- }
1556
- function ShapeShapeButton({ content, shape, Icon: Icon2 }) {
1557
- const { theme, writable, setAppliance, memberState } = useContext10(ToolbarContext);
1558
- const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
1559
- const current = appliance === ApplianceNames4.shape && (memberState == null ? void 0 : memberState.shapeType);
1560
- const disabled = !writable;
1561
- return /* @__PURE__ */ React40.createElement(Button, {
1562
- content,
1563
- disabled,
1564
- placement: "top",
1565
- onClick: () => setAppliance(ApplianceNames4.shape, shape)
1566
- }, /* @__PURE__ */ React40.createElement(Icon2, {
1567
- theme,
1568
- active: current === shape
1569
- }));
1570
- }
1571
-
1572
- // src/components/Toolbar/components/TextButton.tsx
1573
- import Tippy8 from "@tippyjs/react";
1574
- import React41, { useCallback as useCallback9, useContext as useContext11 } from "react";
1575
- import { ApplianceNames as ApplianceNames5 } from "white-web-sdk";
1576
- function TextButton() {
1577
- const app = useFastboardApp();
1578
- const { t } = useTranslation();
1579
- const { theme, icons, writable, setAppliance, memberState } = useContext11(ToolbarContext);
1580
- const changeAppliance = useCallback9(() => {
1581
- setAppliance(ApplianceNames5.text);
1582
- }, [setAppliance]);
1583
- const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
1584
- const active = appliance === ApplianceNames5.text;
1585
- const disabled = !writable;
1586
- const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToText;
1587
- return /* @__PURE__ */ React41.createElement("span", {
1588
- className: "fastboard-toolbar-btn-interactive"
1589
- }, /* @__PURE__ */ React41.createElement(Tippy8, {
1590
- className: "fastboard-tip",
1591
- content: renderTextButtonContent(),
1592
- theme,
1593
- placement: "right-start",
1594
- trigger: "click",
1595
- offset: RightOffset,
1596
- arrow: false,
1597
- interactive: true
1598
- }, /* @__PURE__ */ React41.createElement(Button, {
1599
- content: renderToolTip(t("text"), shortcut),
1600
- active,
1601
- onClick: changeAppliance
1602
- }, /* @__PURE__ */ React41.createElement(Icon, {
1603
- fallback: /* @__PURE__ */ React41.createElement(Icons.Text, {
1604
- theme,
1605
- active
1606
- }),
1607
- src: disabled ? icons == null ? void 0 : icons.textIconDisable : icons == null ? void 0 : icons.textIcon,
1608
- alt: "[text]"
1609
- }), /* @__PURE__ */ React41.createElement("span", {
1610
- className: "fastboard-toolbar-triangle"
1611
- }))));
1612
- }
1613
- function renderTextButtonContent() {
1614
- return /* @__PURE__ */ React41.createElement("div", {
1615
- className: "fastboard-toolbar-panel text"
1616
- }, /* @__PURE__ */ React41.createElement(ColorBox, null));
1617
- }
1618
-
1619
- // src/components/Toolbar/components/UpDownButtons.tsx
1620
- import React42, { useCallback as useCallback10, useContext as useContext12 } from "react";
1621
- function UpButton({ disabled, scrollTo }) {
1622
- const { theme, icons } = useContext12(ToolbarContext);
1623
- const scrollUp = useCallback10(() => scrollTo(-ItemHeight), [scrollTo]);
1624
- return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Button, {
1625
- content: "Up",
1626
- disabled,
1627
- onClick: scrollUp
1628
- }, /* @__PURE__ */ React42.createElement(Icon, {
1629
- fallback: /* @__PURE__ */ React42.createElement(Icons.Up, {
1630
- theme
1631
- }),
1632
- src: disabled ? icons == null ? void 0 : icons.upIconDisable : icons == null ? void 0 : icons.upIcon,
1633
- alt: "[up]"
1634
- })), /* @__PURE__ */ React42.createElement(CutLine, null));
1635
- }
1636
- function DownButton({ disabled, scrollTo }) {
1637
- const { theme, icons } = useContext12(ToolbarContext);
1638
- const scrollDown = useCallback10(() => scrollTo(ItemHeight), [scrollTo]);
1639
- return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(CutLine, null), /* @__PURE__ */ React42.createElement(Button, {
1640
- content: "Down",
1641
- disabled,
1642
- onClick: scrollDown
1643
- }, /* @__PURE__ */ React42.createElement(Icon, {
1644
- fallback: /* @__PURE__ */ React42.createElement(Icons.Down, {
1645
- theme
1646
- }),
1647
- src: disabled ? icons == null ? void 0 : icons.downIconDisable : icons == null ? void 0 : icons.downIcon,
1648
- alt: "[down]"
1649
- })));
1650
- }
1651
-
1652
- // src/components/Toolbar/components/assets/collapsed.png
1653
- var collapsed_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA49JREFUeF7tnLFv00AUh5/TFVYkxIDEnKFjJ/gb2CIqpUPagYXNEV2LRGk7tAiRSA0bWcC0QzowwQKuVDnCLE2KTZCMSNLkHCLalCpBkdFVMTKh8TXO+c4S16XDSb0vv/vyfE3fqwQR+ZIA4AoAdADgJ08mSVXVV9ls9nE+nzcBAAFAnweQ1Gg06gihrmEYubm5OeX4+LgBAD9Yw0iO49S63S7U6/VYq9UyCoXC2tLS0kcAwEA9VkBnIO5m7XYbJwTVanVLluWcruvfAOA7ADhhA/0Fgjfr9/tweHgYs20baZq2sbCw8HaQTqgy/wPivvKTkxN8XFPNZvMdC5lHgmAgx3EAISQhhHqGYWyGKbMviJsOC5kvBOIjcxUAWjRkHgtkSGZb07R1WjKPDeIj82cAaAatzIFBhmU2TTOXTCZfBq3ME4HQlJkKCA2ZqYJMIjN1kKAyhwYyrsyhgpwns6IoyysrK/rgQfrnqc4ExCtzrVb7tbe39yCVSr0GAFyZz2CYguANT09PwbIsaWdn5146nX4zuO+wB8EwnU5HqlQqdiKRuHNwcFDC1Zh5Iu4xWZYVU1V1eXZ29jlOhRvI0dGRVC6XP8zMzNwFgK/cQHq9HpTLZXt6evo2AFS4geDbX6lUisXj8VsA8IkbCHZlf39/Kh6P3xQg7jtHJDL826JIRCRC+gRBOCIcEY6QEhCOkBISdUQ4IhwhJSAcISUk6kjojjxaXbt0Py3jP1DCtes3ruLvVetLnenRYIgnT7OX3Y25gLgQ3gSYg3ghuIEMQ3ABOQ+COcgoCKYgfhD/Jwh+1ZE4GrdKRkJWPxhulTUSBe28ZLglMgzDHcR9N3G/BpDuHH7r4qoY+lUx6PGIoxFHQ3JHOCIcEY6QEhCOkBISdUQ4IhwhJSAcISUk6ohwxM+RyLR/RaYhLjItgpFomoxEG2kkGmvxRBPXVmPPWIypKMpD5s3X3kEh0zSfJZPJF6NmK0JrI3VHpxBCaiaTWc/n877TJtRBPMNkdrFY3Jifn8ed3njUzneYjCqIZ7xue3FxMadpGh6vu9BEEhUQr4yFQmE1yMDhRCDjyEi6JAUGGVdG6iBBZaQK4pVRluVNXdfZjsfRkHGiRGjKGBjEI+P7TCazQaqMpI1I635jtmNVRtJGpPVRg8fbtGW8EAiL6VUiyGA4vUd6TJN+0KTr0u7u7hYLGUmg0fkHBiRSVuu/AWpfZNft9vFDAAAAAElFTkSuQmCC";
1654
-
1655
- // src/components/Toolbar/Content.tsx
1656
- function Content({ onCollapse }) {
1657
- const { theme, icons, writable } = useContext13(ToolbarContext);
1658
- const ref = useRef2(null);
1659
- const [scrollTop, setScrollTop] = useState4(0);
1660
- const [parentHeight, setParentHeight] = useState4(0);
1661
- const disabled = !writable;
1662
- const needScroll = parentHeight < ItemHeight * ItemsCount + 48;
1663
- const sectionHeight = clamp(parentHeight - 48 * (needScroll ? 3 : 1), MinHeight, MaxHeight);
1664
- const scrollBuffer = Math.max(parentHeight - sectionHeight - 1, 0);
1665
- const disableScrollUp = scrollTop === 0;
1666
- const disableScrollDown = scrollTop === scrollBuffer;
1667
- const scrollTo = useCallback11((height) => {
1668
- setScrollTop(clamp(scrollTop + height, 0, scrollBuffer));
1669
- }, [scrollBuffer, scrollTop]);
1670
- useEffect3(() => {
1671
- if (ref.current) {
1672
- ref.current.scrollTop = scrollTop;
1673
- }
1674
- }, [scrollTop]);
1675
- useEffect3(() => {
1676
- var _a, _b;
1677
- const container = (_b = (_a = ref.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
1678
- if (container) {
1679
- const { paddingTop, paddingBottom } = getComputedStyle(container);
1680
- const padding = parseInt(paddingTop) + parseInt(paddingBottom) || 0;
1681
- const resizeObserver = new ResizeObserver(() => {
1682
- setParentHeight(container.getBoundingClientRect().height - padding);
1683
- });
1684
- resizeObserver.observe(container);
1685
- return () => resizeObserver.disconnect();
1686
- }
1687
- }, []);
1688
- return /* @__PURE__ */ React43.createElement(React43.Fragment, null, needScroll && /* @__PURE__ */ React43.createElement(UpButton, {
1689
- scrollTo,
1690
- disabled: disableScrollUp
1691
- }), /* @__PURE__ */ React43.createElement("div", {
1692
- ref,
1693
- className: clsx9(`${name4}-section`),
1694
- style: {
1695
- height: `${sectionHeight}px`,
1696
- overflow: needScroll ? "hidden" : "visible"
1697
- }
1698
- }, /* @__PURE__ */ React43.createElement(ClickerButton, null), /* @__PURE__ */ React43.createElement(SelectorButton, null), /* @__PURE__ */ React43.createElement(PencilButton, null), /* @__PURE__ */ React43.createElement(TextButton, null), /* @__PURE__ */ React43.createElement(ShapesButton, null), /* @__PURE__ */ React43.createElement(EraserButton, null), /* @__PURE__ */ React43.createElement(CleanButton, null), /* @__PURE__ */ React43.createElement(AppsButton, null)), needScroll && /* @__PURE__ */ React43.createElement(DownButton, {
1699
- scrollTo,
1700
- disabled: disableScrollDown
1701
- }), /* @__PURE__ */ React43.createElement("div", {
1702
- className: clsx9("fastboard-toolbar-mask", theme),
1703
- onClick: onCollapse
1704
- }, /* @__PURE__ */ React43.createElement(Icon, {
1705
- fallback: /* @__PURE__ */ React43.createElement("img", {
1706
- draggable: false,
1707
- className: clsx9(`${name4}-mask-btn`, theme),
1708
- src: collapsed_default
1709
- }),
1710
- src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
1711
- })));
1712
- }
1713
-
1714
- // src/components/Toolbar/Toolbar.tsx
1715
- var ToolbarContext = createContext3(__spreadValues({
1716
- theme: "light"
1717
- }, EmptyToolbarHook));
1718
- var name4 = "fastboard-toolbar";
1719
- function Toolbar({ theme, icons }) {
1720
- theme = useTheme(theme);
1721
- const hook = useToolbar();
1722
- const [expanded, setExpanded] = useState5(true);
1723
- const [pointerEvents, setPointerEvents] = useState5("auto");
1724
- const disabled = !hook.writable;
1725
- return /* @__PURE__ */ React44.createElement(ToolbarContext.Provider, {
1726
- value: __spreadValues({ theme, icons }, hook)
1727
- }, /* @__PURE__ */ React44.createElement(AnimatePresence, null, expanded ? /* @__PURE__ */ React44.createElement(motion.div, {
1728
- key: "toolbar",
1729
- className: clsx10(name4, theme),
1730
- initial: { x: -100 },
1731
- animate: { x: 0, transition: { duration: 0.5 } },
1732
- exit: { x: -100, transition: { duration: 0.5 } },
1733
- onAnimationStart: () => setPointerEvents("none"),
1734
- onAnimationComplete: () => setPointerEvents("auto"),
1735
- style: { pointerEvents }
1736
- }, /* @__PURE__ */ React44.createElement(Content, {
1737
- onCollapse: () => setExpanded(false)
1738
- })) : /* @__PURE__ */ React44.createElement(motion.div, {
1739
- className: clsx10(`${name4}-expand-btn`, theme),
1740
- key: "expand",
1741
- onClick: () => setExpanded(true),
1742
- initial: { x: -100 },
1743
- animate: { x: 0, transition: { duration: 0.5 } }
1744
- }, /* @__PURE__ */ React44.createElement(Icon, {
1745
- fallback: /* @__PURE__ */ React44.createElement("img", {
1746
- draggable: false,
1747
- src: expanded_default,
1748
- className: clsx10(`${name4}-mask-btn`, theme)
1749
- }),
1750
- src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
1751
- }))));
1752
- }
1753
-
1754
- // src/components/PlayerControl/hooks.ts
1755
- import { useCallback as useCallback12, useEffect as useEffect4, useState as useState6 } from "react";
1756
- import { PlayerPhase } from "white-web-sdk";
1757
- var EMPTY_ARRAY = [];
1758
- function useForceUpdate2() {
1759
- const [, forceUpdate_] = useState6({});
1760
- return useCallback12(() => forceUpdate_({}), EMPTY_ARRAY);
1761
- }
1762
- function usePlayerControl(player) {
1763
- const togglePlay = useCallback12(() => {
1764
- if (player) {
1765
- switch (player.phase) {
1766
- case PlayerPhase.WaitingFirstFrame:
1767
- case PlayerPhase.Pause:
1768
- case PlayerPhase.Ended: {
1769
- player.play();
1770
- break;
1771
- }
1772
- case PlayerPhase.Playing: {
1773
- player.pause();
1774
- break;
1775
- }
1
+ // src/index.tsx
2
+ export * from "@netless/fastboard-core";
3
+
4
+ // src/RedoUndo.tsx
5
+ import { RedoUndo as RedoUndoImpl } from "@netless/fastboard-ui";
6
+
7
+ // src/hooks.tsx
8
+ import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
9
+ var useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
10
+ function useUpdateEffect(effect, deps) {
11
+ const isFirst = useRef(true);
12
+ useIsomorphicLayoutEffect(() => {
13
+ if (isFirst.current) {
14
+ isFirst.current = false;
15
+ return;
16
+ }
17
+ return effect();
18
+ }, deps);
19
+ }
20
+ function wrapReactComponent(SvelteComponent, name) {
21
+ function ReactComponent(props) {
22
+ const [container, setContainer] = useState(null);
23
+ const component = useRef(null);
24
+ useIsomorphicLayoutEffect(() => {
25
+ if (container) {
26
+ component.current = new SvelteComponent({ target: container, props });
27
+ return () => {
28
+ if (component.current) {
29
+ component.current.$destroy();
30
+ }
31
+ };
1776
32
  }
1777
- }
1778
- }, [player]);
1779
- const seekToProgressTime = useCallback12((time) => {
1780
- if (player) {
1781
- player.seekToProgressTime(time);
1782
- }
1783
- }, [player]);
1784
- const lastPlayer = useLastValue(player);
1785
- const forceUpdate = useForceUpdate2();
1786
- const setSpeed = useCallback12((speed2) => {
1787
- if (player) {
1788
- player.playbackSpeed = speed2;
1789
- forceUpdate();
1790
- }
1791
- }, [forceUpdate, player]);
1792
- useEffect4(() => {
1793
- if (!lastPlayer && player) {
1794
- forceUpdate();
1795
- }
1796
- }, [forceUpdate, lastPlayer, player]);
1797
- useEffect4(() => {
1798
- if (player) {
1799
- player.callbacks.on("onPhaseChanged", forceUpdate);
1800
- player.callbacks.on("onProgressTimeChanged", forceUpdate);
1801
- return () => {
1802
- player.callbacks.off("onPhaseChanged", forceUpdate);
1803
- player.callbacks.off("onProgressTimeChanged", forceUpdate);
1804
- };
1805
- }
1806
- }, [forceUpdate, player]);
1807
- const phase = player ? player.phase : PlayerPhase.WaitingFirstFrame;
1808
- const currentTime = player ? player.progressTime : 0;
1809
- const totalTime = player ? player.timeDuration : 0;
1810
- const speed = player ? player.playbackSpeed : 1;
1811
- return {
1812
- phase,
1813
- currentTime,
1814
- totalTime,
1815
- speed,
1816
- setSpeed,
1817
- togglePlay,
1818
- seekToProgressTime
1819
- };
33
+ }, [container]);
34
+ useUpdateEffect(() => {
35
+ if (component.current) {
36
+ component.current.$set(props);
37
+ }
38
+ }, [props]);
39
+ return /* @__PURE__ */ React.createElement("div", {
40
+ className: "fastboard-react-div",
41
+ ref: setContainer
42
+ });
43
+ }
44
+ ReactComponent.displayName = name;
45
+ return ReactComponent;
1820
46
  }
1821
47
 
1822
- // src/components/PlayerControl/PlayerControl.tsx
1823
- import Tippy10 from "@tippyjs/react";
1824
- import clsx12 from "clsx";
1825
- import RcSlider2 from "rc-slider";
1826
- import React49, { useEffect as useEffect5, useState as useState7 } from "react";
1827
- import { PlayerPhase as PlayerPhase2 } from "white-web-sdk";
1828
-
1829
- // src/components/PlayerControl/components/Button.tsx
1830
- import clsx11 from "clsx";
1831
- import React45, { forwardRef as forwardRef2 } from "react";
1832
- import Tippy9 from "@tippyjs/react";
1833
- var Button2 = forwardRef2((props, ref) => {
1834
- const { theme, content, disabled, active, onClick, interactive, placement = "top", children } = props;
1835
- return /* @__PURE__ */ React45.createElement(Tippy9, {
1836
- className: "fastboard-tip",
1837
- content,
1838
- interactive,
1839
- theme,
1840
- disabled,
1841
- placement,
1842
- offset: TopOffset,
1843
- delay: [1e3, 400],
1844
- duration: 300
1845
- }, /* @__PURE__ */ React45.createElement("button", {
1846
- ref,
1847
- className: clsx11("fastboard-player-control-btn", theme, { active }),
1848
- onClick,
1849
- disabled
1850
- }, children));
1851
- });
1852
-
1853
- // src/components/PlayerControl/icons/index.ts
1854
- import { memo as memo2 } from "react";
1855
-
1856
- // src/components/PlayerControl/icons/Loading.tsx
1857
- import React46 from "react";
1858
- var Loading2 = (props) => {
1859
- const stroke = getStroke(props);
1860
- return /* @__PURE__ */ React46.createElement("svg", {
1861
- viewBox: "0 0 24 24"
1862
- }, /* @__PURE__ */ React46.createElement("path", {
1863
- d: "M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z",
1864
- fill: stroke
1865
- }));
1866
- };
1867
-
1868
- // src/components/PlayerControl/icons/Pause.tsx
1869
- import React47 from "react";
1870
- var Pause = (props) => {
1871
- const stroke = getStroke(props);
1872
- return /* @__PURE__ */ React47.createElement("svg", {
1873
- viewBox: "0 0 24 24"
1874
- }, /* @__PURE__ */ React47.createElement("path", {
1875
- d: "M14 19h4V5h-4M6 19h4V5H6v14z",
1876
- fill: stroke
1877
- }));
1878
- };
48
+ // src/RedoUndo.tsx
49
+ var RedoUndo = /* @__PURE__ */ wrapReactComponent(RedoUndoImpl, "RedoUndo");
1879
50
 
1880
- // src/components/PlayerControl/icons/Play.tsx
1881
- import React48 from "react";
1882
- var Play = (props) => {
1883
- const stroke = getStroke(props);
1884
- return /* @__PURE__ */ React48.createElement("svg", {
1885
- viewBox: "0 0 24 24"
1886
- }, /* @__PURE__ */ React48.createElement("path", {
1887
- d: "M8 5.14v14l11-7l-11-7z",
1888
- fill: stroke
1889
- }));
1890
- };
51
+ // src/ZoomControl.tsx
52
+ import { ZoomControl as ZoomControlImpl } from "@netless/fastboard-ui";
53
+ var ZoomControl = /* @__PURE__ */ wrapReactComponent(ZoomControlImpl, "ZoomControl");
1891
54
 
1892
- // src/components/PlayerControl/icons/index.ts
1893
- var Icons2 = {
1894
- Play: memo2(Play),
1895
- Pause: memo2(Pause),
1896
- Loading: memo2(Loading2)
1897
- };
55
+ // src/PageControl.tsx
56
+ import { PageControl as PageControlImpl } from "@netless/fastboard-ui";
57
+ var PageControl = /* @__PURE__ */ wrapReactComponent(PageControlImpl, "PageControl");
1898
58
 
1899
- // src/components/PlayerControl/PlayerControl.tsx
1900
- var name5 = "fastboard-player-control";
1901
- function PlayerControl(_a) {
1902
- var _b = _a, { theme, autoHide = false, player: player_ } = _b, icons = __objRest(_b, ["theme", "autoHide", "player"]);
1903
- theme = useTheme(theme);
1904
- const { t } = useTranslation();
1905
- const [currentTime, setCurrentTime] = useState7(0);
1906
- const player = usePlayerControl(player_ == null ? void 0 : player_.player);
1907
- useEffect5(() => {
1908
- setCurrentTime(player.currentTime);
1909
- }, [player.currentTime]);
1910
- useEffect5(() => {
1911
- if (player.currentTime !== currentTime) {
1912
- player.seekToProgressTime(currentTime);
1913
- }
1914
- }, [currentTime]);
1915
- const isLoading = player.phase === PlayerPhase2.WaitingFirstFrame || player.phase === PlayerPhase2.Buffering;
1916
- const isPlaying = player.phase === PlayerPhase2.Playing;
1917
- const { activeColor } = themes[theme];
1918
- return /* @__PURE__ */ React49.createElement("div", {
1919
- className: clsx12(name5, theme, { "auto-hide": autoHide })
1920
- }, /* @__PURE__ */ React49.createElement("button", {
1921
- className: clsx12(`${name5}-btn`, isLoading ? "loading" : isPlaying ? "pause" : "play", theme),
1922
- disabled: isLoading,
1923
- onClick: player.togglePlay
1924
- }, /* @__PURE__ */ React49.createElement(Icon, {
1925
- fallback: isLoading ? /* @__PURE__ */ React49.createElement(Icons2.Loading, {
1926
- theme
1927
- }) : isPlaying ? /* @__PURE__ */ React49.createElement(Icons2.Pause, {
1928
- theme
1929
- }) : /* @__PURE__ */ React49.createElement(Icons2.Play, {
1930
- theme
1931
- }),
1932
- src: isLoading ? icons.loadingIcon : isPlaying ? icons.pauseIcon : icons.playIcon,
1933
- alt: isLoading ? "[loading]" : isPlaying ? "[pause]" : "[play]"
1934
- })), /* @__PURE__ */ React49.createElement("span", {
1935
- className: clsx12(`${name5}-slider`, { loading: isLoading }, theme)
1936
- }, /* @__PURE__ */ React49.createElement(RcSlider2, {
1937
- disabled: isLoading,
1938
- trackStyle: { background: activeColor },
1939
- handleStyle: { border: `1px solid ${activeColor}` },
1940
- value: currentTime,
1941
- onChange: setCurrentTime,
1942
- min: 0,
1943
- max: player.totalTime,
1944
- step: 100
1945
- })), /* @__PURE__ */ React49.createElement("span", {
1946
- className: clsx12(`${name5}-current`, theme)
1947
- }, renderTime(player.currentTime)), /* @__PURE__ */ React49.createElement("span", {
1948
- className: clsx12(`${name5}-slash`, theme)
1949
- }, "/"), /* @__PURE__ */ React49.createElement("span", {
1950
- className: clsx12(`${name5}-total`, theme)
1951
- }, renderTime(player.totalTime)), /* @__PURE__ */ React49.createElement("span", {
1952
- className: `${name5}-btn-interactive`
1953
- }, /* @__PURE__ */ React49.createElement(Tippy10, {
1954
- className: "fastboard-tip",
1955
- content: renderSpeeds(player),
1956
- theme,
1957
- placement: "top-end",
1958
- trigger: "click",
1959
- offset: TopOffset,
1960
- arrow: false,
1961
- interactive: true
1962
- }, /* @__PURE__ */ React49.createElement(Button2, {
1963
- content: t("speed"),
1964
- theme,
1965
- disabled: isLoading
1966
- }, /* @__PURE__ */ React49.createElement("span", {
1967
- className: clsx12(`${name5}-speed-text`, theme)
1968
- }, player.speed, "x")))));
1969
- }
1970
- function renderTime(ms) {
1971
- let seconds = ms / 1e3;
1972
- const minutes = Math.floor(seconds / 60);
1973
- seconds = Math.floor(seconds) % 60;
1974
- return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
1975
- }
1976
- var Speeds = [2, 1.5, 1.25, 1, 0.75, 0.5];
1977
- function renderSpeeds({ speed: current, setSpeed }) {
1978
- return /* @__PURE__ */ React49.createElement("div", {
1979
- className: clsx12(`${name5}-panel`, "speed")
1980
- }, Speeds.map((speed) => /* @__PURE__ */ React49.createElement("button", {
1981
- className: clsx12(`${name5}-btn`, "speed", {
1982
- active: speed === current
1983
- }),
1984
- key: speed,
1985
- onClick: () => setSpeed(speed)
1986
- }, speed, "x")));
1987
- }
1988
-
1989
- // src/components/Fastboard.tsx
1990
- import React50, { forwardRef as forwardRef3, useCallback as useCallback13, useEffect as useEffect6 } from "react";
59
+ // src/Toolbar.tsx
60
+ import { Toolbar as ToolbarImpl } from "@netless/fastboard-ui";
61
+ var Toolbar = /* @__PURE__ */ wrapReactComponent(ToolbarImpl, "Toolbar");
1991
62
 
1992
- // src/components/tippy-util.ts
1993
- function hideAll() {
1994
- Array.from(document.querySelectorAll("[data-tippy-root]")).forEach((e) => {
1995
- const instance = e._tippy;
1996
- if (instance)
1997
- instance.hide();
1998
- });
1999
- }
63
+ // src/Fastboard.tsx
64
+ import { Fastboard as FastboardImpl, ReplayFastboard as ReplayFastboardImpl } from "@netless/fastboard-ui";
65
+ var Fastboard = /* @__PURE__ */ wrapReactComponent(FastboardImpl, "Fastboard");
66
+ var ReplayFastboard = /* @__PURE__ */ wrapReactComponent(ReplayFastboardImpl, "ReplayFastboard");
2000
67
 
2001
- // src/components/Fastboard.tsx
2002
- var Fastboard = /* @__PURE__ */ forwardRef3(function Fastboard2(_a, ref) {
2003
- var _b = _a, { app, theme, layout, language } = _b, restProps = __objRest(_b, ["app", "theme", "layout", "language"]);
2004
- if (!app) {
2005
- return /* @__PURE__ */ React50.createElement("div", __spreadValues({
2006
- className: "fastboard-root",
2007
- ref
2008
- }, restProps));
68
+ // inline-sass-helper:inline-sass-style-helper.js
69
+ function injectStyle(text) {
70
+ if (typeof document !== "undefined") {
71
+ var style = document.createElement("style");
72
+ var node = document.createTextNode(text);
73
+ style.appendChild(node);
74
+ document.head.appendChild(style);
2009
75
  }
2010
- return /* @__PURE__ */ React50.createElement(FastboardAppContext.Provider, {
2011
- value: app
2012
- }, /* @__PURE__ */ React50.createElement(FastboardInternal, __spreadValues(__spreadValues({
2013
- forwardedRef: ref
2014
- }, { theme, layout, language }), restProps)));
2015
- });
2016
- function FastboardInternal(_a) {
2017
- var _b = _a, {
2018
- forwardedRef,
2019
- language,
2020
- layout = {},
2021
- theme = "light",
2022
- children
2023
- } = _b, restProps = __objRest(_b, [
2024
- "forwardedRef",
2025
- "language",
2026
- "layout",
2027
- "theme",
2028
- "children"
2029
- ]);
2030
- const app = useFastboardApp();
2031
- const forceUpdate = useForceUpdate();
2032
- const i18n = useAsyncValue(() => createI18n({ language }));
2033
- useEffect6(() => {
2034
- if (i18n)
2035
- i18n.changeLanguage(language);
2036
- forceUpdate();
2037
- }, [forceUpdate, i18n, language]);
2038
- useEffect6(() => {
2039
- app.manager.setPrefersColorScheme(theme);
2040
- }, [app, theme]);
2041
- const useWhiteboard = useCallback13((container) => {
2042
- if (container && app)
2043
- app.bindContainer(container);
2044
- }, [app]);
2045
- const hideControls = useHideControls();
2046
- const showControls = !hideControls;
2047
- const {
2048
- Toolbar: toolbar = showControls || hideControls === "toolbar-only",
2049
- RedoUndo: redo_undo = showControls,
2050
- ZoomControl: zoom_control = showControls,
2051
- PageControl: page_control = showControls
2052
- } = layout;
2053
- return /* @__PURE__ */ React50.createElement(ThemeContext.Provider, {
2054
- value: theme
2055
- }, /* @__PURE__ */ React50.createElement(I18nContext.Provider, {
2056
- value: i18n
2057
- }, /* @__PURE__ */ React50.createElement("div", __spreadProps(__spreadValues({}, restProps), {
2058
- className: "fastboard-root",
2059
- ref: forwardedRef
2060
- }), /* @__PURE__ */ React50.createElement("div", {
2061
- className: "fastboard-view",
2062
- ref: useWhiteboard,
2063
- onTouchStartCapture: hideAll
2064
- }), children ? children : /* @__PURE__ */ React50.createElement(React50.Fragment, null, toolbar && /* @__PURE__ */ React50.createElement("div", {
2065
- className: "fastboard-left"
2066
- }, /* @__PURE__ */ React50.createElement(Toolbar, null)), (redo_undo || zoom_control) && /* @__PURE__ */ React50.createElement("div", {
2067
- className: "fastboard-bottom-left"
2068
- }, redo_undo && /* @__PURE__ */ React50.createElement(RedoUndo, null), zoom_control && /* @__PURE__ */ React50.createElement(ZoomControl, null)), page_control && /* @__PURE__ */ React50.createElement("div", {
2069
- className: "fastboard-bottom-right"
2070
- }, /* @__PURE__ */ React50.createElement(PageControl, null))))));
2071
76
  }
2072
77
 
2073
- // src/components/ReplayFastboard.tsx
2074
- import React51, { forwardRef as forwardRef4, useCallback as useCallback14 } from "react";
2075
- var ReplayFastboard = /* @__PURE__ */ forwardRef4(function ReplayFastboard2(_a, ref) {
2076
- var _b = _a, { player, theme = "light", autoHideControl = false } = _b, restProps = __objRest(_b, ["player", "theme", "autoHideControl"]);
2077
- const useWhiteboard = useCallback14((container) => {
2078
- if (container && player)
2079
- player.bindContainer(container);
2080
- }, [player]);
2081
- if (!player) {
2082
- return /* @__PURE__ */ React51.createElement("div", __spreadValues({
2083
- className: "fastboard-root",
2084
- ref
2085
- }, restProps));
2086
- }
2087
- return /* @__PURE__ */ React51.createElement("div", __spreadValues({
2088
- className: "fastboard-root",
2089
- ref
2090
- }, restProps), /* @__PURE__ */ React51.createElement("div", {
2091
- className: "fastboard-view",
2092
- ref: useWhiteboard
2093
- }), /* @__PURE__ */ React51.createElement("div", {
2094
- className: "fastboard-bottom"
2095
- }, /* @__PURE__ */ React51.createElement(PlayerControl, {
2096
- player,
2097
- theme,
2098
- autoHide: autoHideControl
2099
- })));
2100
- });
78
+ // inline-sass-content:./src/style.scss
79
+ var style_default = '@charset "UTF-8";.vjs-modal-dialog .vjs-modal-dialog-content,.video-js .vjs-modal-dialog,.vjs-button>.vjs-icon-placeholder:before,.video-js .vjs-big-play-button .vjs-icon-placeholder:before{position:absolute;top:0;left:0;width:100%;height:100%}.vjs-button>.vjs-icon-placeholder:before,.video-js .vjs-big-play-button .vjs-icon-placeholder:before{text-align:center}@font-face{font-family:VideoJS;src:url(data:application/font-woff;charset=utf-8;base64,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) format("woff");font-weight:400;font-style:normal}.vjs-icon-play,.video-js .vjs-play-control .vjs-icon-placeholder,.video-js .vjs-big-play-button .vjs-icon-placeholder:before{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-play:before,.video-js .vjs-play-control .vjs-icon-placeholder:before,.video-js .vjs-big-play-button .vjs-icon-placeholder:before{content:"\\f101"}.vjs-icon-play-circle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-play-circle:before{content:"\\f102"}.vjs-icon-pause,.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-pause:before,.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before{content:"\\f103"}.vjs-icon-volume-mute,.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-volume-mute:before,.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before{content:"\\f104"}.vjs-icon-volume-low,.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-volume-low:before,.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before{content:"\\f105"}.vjs-icon-volume-mid,.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-volume-mid:before,.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before{content:"\\f106"}.vjs-icon-volume-high,.video-js .vjs-mute-control .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-volume-high:before,.video-js .vjs-mute-control .vjs-icon-placeholder:before{content:"\\f107"}.vjs-icon-fullscreen-enter,.video-js .vjs-fullscreen-control .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-fullscreen-enter:before,.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before{content:"\\f108"}.vjs-icon-fullscreen-exit,.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-fullscreen-exit:before,.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before{content:"\\f109"}.vjs-icon-square{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-square:before{content:"\\f10a"}.vjs-icon-spinner{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-spinner:before{content:"\\f10b"}.vjs-icon-subtitles,.video-js .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js .vjs-subtitles-button .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-subtitles:before,.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js .vjs-subtitles-button .vjs-icon-placeholder:before{content:"\\f10c"}.vjs-icon-captions,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js .vjs-captions-button .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-captions:before,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js .vjs-captions-button .vjs-icon-placeholder:before{content:"\\f10d"}.vjs-icon-chapters,.video-js .vjs-chapters-button .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-chapters:before,.video-js .vjs-chapters-button .vjs-icon-placeholder:before{content:"\\f10e"}.vjs-icon-share{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-share:before{content:"\\f10f"}.vjs-icon-cog{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-cog:before{content:"\\f110"}.vjs-icon-circle,.vjs-seek-to-live-control .vjs-icon-placeholder,.video-js .vjs-volume-level,.video-js .vjs-play-progress{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle:before,.vjs-seek-to-live-control .vjs-icon-placeholder:before,.video-js .vjs-volume-level:before,.video-js .vjs-play-progress:before{content:"\\f111"}.vjs-icon-circle-outline{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle-outline:before{content:"\\f112"}.vjs-icon-circle-inner-circle{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-circle-inner-circle:before{content:"\\f113"}.vjs-icon-hd{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-hd:before{content:"\\f114"}.vjs-icon-cancel,.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-cancel:before,.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before{content:"\\f115"}.vjs-icon-replay,.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-replay:before,.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before{content:"\\f116"}.vjs-icon-facebook{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-facebook:before{content:"\\f117"}.vjs-icon-gplus{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-gplus:before{content:"\\f118"}.vjs-icon-linkedin{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-linkedin:before{content:"\\f119"}.vjs-icon-twitter{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-twitter:before{content:"\\f11a"}.vjs-icon-tumblr{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-tumblr:before{content:"\\f11b"}.vjs-icon-pinterest{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-pinterest:before{content:"\\f11c"}.vjs-icon-audio-description,.video-js .vjs-descriptions-button .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-audio-description:before,.video-js .vjs-descriptions-button .vjs-icon-placeholder:before{content:"\\f11d"}.vjs-icon-audio,.video-js .vjs-audio-button .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-audio:before,.video-js .vjs-audio-button .vjs-icon-placeholder:before{content:"\\f11e"}.vjs-icon-next-item{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-next-item:before{content:"\\f11f"}.vjs-icon-previous-item{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-previous-item:before{content:"\\f120"}.vjs-icon-picture-in-picture-enter,.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-picture-in-picture-enter:before,.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before{content:"\\f121"}.vjs-icon-picture-in-picture-exit,.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder{font-family:VideoJS;font-weight:400;font-style:normal}.vjs-icon-picture-in-picture-exit:before,.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before{content:"\\f122"}.video-js{display:block;vertical-align:top;box-sizing:border-box;color:#fff;background-color:#000;position:relative;padding:0;font-size:10px;line-height:1;font-weight:400;font-style:normal;font-family:Arial,Helvetica,sans-serif;word-break:initial}.video-js:-moz-full-screen{position:absolute}.video-js:-webkit-full-screen{width:100%!important;height:100%!important}.video-js[tabindex="-1"]{outline:none}.video-js *,.video-js *:before,.video-js *:after{box-sizing:inherit}.video-js ul{font-family:inherit;font-size:inherit;line-height:inherit;list-style-position:outside;margin:0}.video-js.vjs-fluid,.video-js.vjs-16-9,.video-js.vjs-4-3,.video-js.vjs-9-16,.video-js.vjs-1-1{width:100%;max-width:100%;height:0}.video-js.vjs-16-9{padding-top:56.25%}.video-js.vjs-4-3{padding-top:75%}.video-js.vjs-9-16{padding-top:177.7777777778%}.video-js.vjs-1-1{padding-top:100%}.video-js.vjs-fill{width:100%;height:100%}.video-js .vjs-tech{position:absolute;top:0;left:0;width:100%;height:100%}body.vjs-full-window{padding:0;margin:0;height:100%}.vjs-full-window .video-js.vjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;inset:0}.video-js.vjs-fullscreen:not(.vjs-ios-native-fs){width:100%!important;height:100%!important;padding-top:0!important}.video-js.vjs-fullscreen.vjs-user-inactive{cursor:none}.vjs-hidden{display:none!important}.vjs-disabled{opacity:.5;cursor:default}.video-js .vjs-offscreen{height:1px;left:-9999px;position:absolute;top:0;width:1px}.vjs-lock-showing{display:block!important;opacity:1!important;visibility:visible!important}.vjs-no-js{padding:20px;color:#fff;background-color:#000;font-size:18px;font-family:Arial,Helvetica,sans-serif;text-align:center;width:300px;height:150px;margin:0 auto}.vjs-no-js a,.vjs-no-js a:visited{color:#66a8cc}.video-js .vjs-big-play-button{font-size:3em;line-height:1.5em;height:1.63332em;width:3em;display:block;position:absolute;top:10px;left:10px;padding:0;cursor:pointer;opacity:1;border:.06666em solid #fff;background-color:#2b333f;background-color:#2b333fb3;border-radius:.3em;transition:all .4s}.vjs-big-play-centered .vjs-big-play-button{top:50%;left:50%;margin-top:-.81666em;margin-left:-1.5em}.video-js:hover .vjs-big-play-button,.video-js .vjs-big-play-button:focus{border-color:#fff;background-color:#73859f;background-color:#73859f80;transition:all 0s}.vjs-controls-disabled .vjs-big-play-button,.vjs-has-started .vjs-big-play-button,.vjs-using-native-controls .vjs-big-play-button,.vjs-error .vjs-big-play-button{display:none}.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button{display:block}.video-js button{background:none;border:none;color:inherit;display:inline-block;font-size:inherit;line-height:inherit;text-transform:none;text-decoration:none;transition:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.vjs-control .vjs-button{width:100%;height:100%}.video-js .vjs-control.vjs-close-button{cursor:pointer;height:3em;position:absolute;right:0;top:.5em;z-index:2}.video-js .vjs-modal-dialog{background:rgba(0,0,0,.8);background:linear-gradient(180deg,rgba(0,0,0,.8),rgba(255,255,255,0));overflow:auto}.video-js .vjs-modal-dialog>*{box-sizing:border-box}.vjs-modal-dialog .vjs-modal-dialog-content{font-size:1.2em;line-height:1.5;padding:20px 24px;z-index:1}.vjs-menu-button{cursor:pointer}.vjs-menu-button.vjs-disabled{cursor:default}.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu{display:none}.vjs-menu .vjs-menu-content{display:block;padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;overflow:auto}.vjs-menu .vjs-menu-content>*{box-sizing:border-box}.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu{display:none}.vjs-menu li{list-style:none;margin:0;padding:.2em 0;line-height:1.4em;font-size:1.2em;text-align:center;text-transform:lowercase}.vjs-menu li.vjs-menu-item:focus,.vjs-menu li.vjs-menu-item:hover,.js-focus-visible .vjs-menu li.vjs-menu-item:hover{background-color:#73859f;background-color:#73859f80}.vjs-menu li.vjs-selected,.vjs-menu li.vjs-selected:focus,.vjs-menu li.vjs-selected:hover,.js-focus-visible .vjs-menu li.vjs-selected:hover{background-color:#fff;color:#2b333f}.video-js .vjs-menu *:not(.vjs-selected):focus:not(:focus-visible),.js-focus-visible .vjs-menu *:not(.vjs-selected):focus:not(.focus-visible){background:none}.vjs-menu li.vjs-menu-title{text-align:center;text-transform:uppercase;font-size:1em;line-height:2em;padding:0;margin:0 0 .3em;font-weight:700;cursor:default}.vjs-menu-button-popup .vjs-menu{display:none;position:absolute;bottom:0;width:10em;left:-3em;height:0em;margin-bottom:1.5em;border-top-color:#2b333fb3}.vjs-menu-button-popup .vjs-menu .vjs-menu-content{background-color:#2b333f;background-color:#2b333fb3;position:absolute;width:100%;bottom:1.5em;max-height:15em}.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:5em}.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:10em}.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:14em}.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:25em}.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu,.vjs-menu-button-popup .vjs-menu.vjs-lock-showing{display:block}.video-js .vjs-menu-button-inline{transition:all .4s;overflow:hidden}.video-js .vjs-menu-button-inline:before{width:2.222222222em}.video-js .vjs-menu-button-inline:hover,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline.vjs-slider-active,.video-js.vjs-no-flex .vjs-menu-button-inline{width:12em}.vjs-menu-button-inline .vjs-menu{opacity:0;height:100%;width:auto;position:absolute;left:4em;top:0;padding:0;margin:0;transition:all .4s}.vjs-menu-button-inline:hover .vjs-menu,.vjs-menu-button-inline:focus .vjs-menu,.vjs-menu-button-inline.vjs-slider-active .vjs-menu{display:block;opacity:1}.vjs-no-flex .vjs-menu-button-inline .vjs-menu{display:block;opacity:1;position:relative;width:auto}.vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu,.vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu,.vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu{width:auto}.vjs-menu-button-inline .vjs-menu-content{width:auto;height:100%;margin:0;overflow:hidden}.video-js .vjs-control-bar{display:none;width:100%;position:absolute;bottom:0;left:0;right:0;height:3em;background-color:#2b333f;background-color:#2b333fb3}.vjs-has-started .vjs-control-bar{display:flex;visibility:visible;opacity:1;transition:visibility .1s,opacity .1s}.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{visibility:visible;opacity:0;transition:visibility 1s,opacity 1s}.vjs-controls-disabled .vjs-control-bar,.vjs-using-native-controls .vjs-control-bar,.vjs-error .vjs-control-bar{display:none!important}.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{opacity:1;visibility:visible}.vjs-has-started.vjs-no-flex .vjs-control-bar{display:table}.video-js .vjs-control{position:relative;text-align:center;margin:0;padding:0;height:100%;width:4em;flex:none}.vjs-button>.vjs-icon-placeholder:before{font-size:1.8em;line-height:1.67}.vjs-button>.vjs-icon-placeholder{display:block}.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before,.video-js .vjs-control:focus{text-shadow:0em 0em 1em white}.video-js .vjs-control-text{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.vjs-no-flex .vjs-control{display:table-cell;vertical-align:middle}.video-js .vjs-custom-control-spacer{display:none}.video-js .vjs-progress-control{cursor:pointer;flex:auto;display:flex;align-items:center;min-width:4em;touch-action:none}.video-js .vjs-progress-control.disabled{cursor:default}.vjs-live .vjs-progress-control{display:none}.vjs-liveui .vjs-progress-control{display:flex;align-items:center}.vjs-no-flex .vjs-progress-control{width:auto}.video-js .vjs-progress-holder{flex:auto;transition:all .2s;height:.3em}.video-js .vjs-progress-control .vjs-progress-holder{margin:0 10px}.video-js .vjs-progress-control:hover .vjs-progress-holder{font-size:1.6666666667em}.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled{font-size:1em}.video-js .vjs-progress-holder .vjs-play-progress,.video-js .vjs-progress-holder .vjs-load-progress,.video-js .vjs-progress-holder .vjs-load-progress div{position:absolute;display:block;height:100%;margin:0;padding:0;width:0}.video-js .vjs-play-progress{background-color:#fff}.video-js .vjs-play-progress:before{font-size:.9em;position:absolute;right:-.5em;top:-.3333333333em;z-index:1}.video-js .vjs-load-progress{background:rgba(115,133,159,.5)}.video-js .vjs-load-progress div{background:rgba(115,133,159,.75)}.video-js .vjs-time-tooltip{background-color:#fff;background-color:#fffc;border-radius:.3em;color:#000;float:right;font-family:Arial,Helvetica,sans-serif;font-size:1em;padding:6px 8px 8px;pointer-events:none;position:absolute;top:-3.4em;visibility:hidden;z-index:1}.video-js .vjs-progress-holder:focus .vjs-time-tooltip{display:none}.video-js .vjs-progress-control:hover .vjs-time-tooltip,.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip{display:block;font-size:.6em;visibility:visible}.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip{font-size:1em}.video-js .vjs-progress-control .vjs-mouse-display{display:none;position:absolute;width:1px;height:100%;background-color:#000;z-index:1}.vjs-no-flex .vjs-progress-control .vjs-mouse-display{z-index:0}.video-js .vjs-progress-control:hover .vjs-mouse-display{display:block}.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display{visibility:hidden;opacity:0;transition:visibility 1s,opacity 1s}.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display{display:none}.vjs-mouse-display .vjs-time-tooltip{color:#fff;background-color:#000;background-color:#000c}.video-js .vjs-slider{position:relative;cursor:pointer;padding:0;margin:0 .45em;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#73859f;background-color:#73859f80}.video-js .vjs-slider.disabled{cursor:default}.video-js .vjs-slider:focus{text-shadow:0em 0em 1em white;box-shadow:0 0 1em #fff}.video-js .vjs-mute-control{cursor:pointer;flex:none}.video-js .vjs-volume-control{cursor:pointer;margin-right:1em;display:flex}.video-js .vjs-volume-control.vjs-volume-horizontal{width:5em}.video-js .vjs-volume-panel .vjs-volume-control{visibility:visible;opacity:0;width:1px;height:1px;margin-left:-1px}.video-js .vjs-volume-panel{transition:width 1s}.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control,.video-js .vjs-volume-panel:active .vjs-volume-control,.video-js .vjs-volume-panel:focus .vjs-volume-control,.video-js .vjs-volume-panel .vjs-volume-control:active,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control,.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active{visibility:visible;opacity:1;position:relative;transition:visibility .1s,opacity .1s,height .1s,width .1s,left 0s,top 0s}.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal{width:5em;height:3em;margin-right:0}.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical{left:-3.5em;transition:left 0s}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active{width:10em;transition:width .1s}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only{width:4em}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical{height:8em;width:3em;left:-3000em;transition:visibility 1s,opacity 1s,height 1s 1s,width 1s 1s,left 1s 1s,top 1s 1s}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{transition:visibility 1s,opacity 1s,height 1s 1s,width 1s,left 1s 1s,top 1s 1s}.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{width:5em;height:3em;visibility:visible;opacity:1;position:relative;transition:none}.video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical,.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical{position:absolute;bottom:3em;left:.5em}.video-js .vjs-volume-panel{display:flex}.video-js .vjs-volume-bar{margin:1.35em .45em}.vjs-volume-bar.vjs-slider-horizontal{width:5em;height:.3em}.vjs-volume-bar.vjs-slider-vertical{width:.3em;height:5em;margin:1.35em auto}.video-js .vjs-volume-level{position:absolute;bottom:0;left:0;background-color:#fff}.video-js .vjs-volume-level:before{position:absolute;font-size:.9em;z-index:1}.vjs-slider-vertical .vjs-volume-level{width:.3em}.vjs-slider-vertical .vjs-volume-level:before{top:-.5em;left:-.3em;z-index:1}.vjs-slider-horizontal .vjs-volume-level{height:.3em}.vjs-slider-horizontal .vjs-volume-level:before{top:-.3em;right:-.5em}.video-js .vjs-volume-panel.vjs-volume-panel-vertical{width:4em}.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level{height:100%}.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level{width:100%}.video-js .vjs-volume-vertical{width:3em;height:8em;bottom:8em;background-color:#2b333f;background-color:#2b333fb3}.video-js .vjs-volume-horizontal .vjs-menu{left:-2em}.video-js .vjs-volume-tooltip{background-color:#fff;background-color:#fffc;border-radius:.3em;color:#000;float:right;font-family:Arial,Helvetica,sans-serif;font-size:1em;padding:6px 8px 8px;pointer-events:none;position:absolute;top:-3.4em;visibility:hidden;z-index:1}.video-js .vjs-volume-control:hover .vjs-volume-tooltip,.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip{display:block;font-size:1em;visibility:visible}.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip,.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip{left:1em;top:-12px}.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip{font-size:1em}.video-js .vjs-volume-control .vjs-mouse-display{display:none;position:absolute;width:100%;height:1px;background-color:#000;z-index:1}.video-js .vjs-volume-horizontal .vjs-mouse-display{width:1px;height:100%}.vjs-no-flex .vjs-volume-control .vjs-mouse-display{z-index:0}.video-js .vjs-volume-control:hover .vjs-mouse-display{display:block}.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display{visibility:hidden;opacity:0;transition:visibility 1s,opacity 1s}.video-js.vjs-user-inactive.vjs-no-flex .vjs-volume-control .vjs-mouse-display{display:none}.vjs-mouse-display .vjs-volume-tooltip{color:#fff;background-color:#000;background-color:#000c}.vjs-poster{display:inline-block;vertical-align:middle;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#000;cursor:pointer;margin:0;padding:0;position:absolute;inset:0;height:100%}.vjs-has-started .vjs-poster{display:none}.vjs-audio.vjs-has-started .vjs-poster{display:block}.vjs-using-native-controls .vjs-poster{display:none}.video-js .vjs-live-control{display:flex;align-items:flex-start;flex:auto;font-size:1em;line-height:3em}.vjs-no-flex .vjs-live-control{display:table-cell;width:auto;text-align:left}.video-js:not(.vjs-live) .vjs-live-control,.video-js.vjs-liveui .vjs-live-control{display:none}.video-js .vjs-seek-to-live-control{align-items:center;cursor:pointer;flex:none;display:inline-flex;height:100%;padding-left:.5em;padding-right:.5em;font-size:1em;line-height:3em;width:auto;min-width:4em}.vjs-no-flex .vjs-seek-to-live-control{display:table-cell;width:auto;text-align:left}.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,.video-js:not(.vjs-live) .vjs-seek-to-live-control{display:none}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{cursor:auto}.vjs-seek-to-live-control .vjs-icon-placeholder{margin-right:.5em;color:#888}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder{color:red}.video-js .vjs-time-control{flex:none;font-size:1em;line-height:3em;min-width:2em;width:auto;padding-left:1em;padding-right:1em}.vjs-live .vjs-time-control,.video-js .vjs-current-time,.vjs-no-flex .vjs-current-time,.video-js .vjs-duration,.vjs-no-flex .vjs-duration{display:none}.vjs-time-divider{display:none;line-height:3em}.vjs-live .vjs-time-divider{display:none}.video-js .vjs-play-control{cursor:pointer}.video-js .vjs-play-control .vjs-icon-placeholder{flex:none}.vjs-text-track-display{position:absolute;inset:0 0 3em;pointer-events:none}.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:1em}.video-js .vjs-text-track{font-size:1.4em;text-align:center;margin-bottom:.1em}.vjs-subtitles{color:#fff}.vjs-captions{color:#fc6}.vjs-tt-cue{display:block}video::-webkit-media-text-track-display{transform:translateY(-3em)}.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display{transform:translateY(-1.5em)}.video-js .vjs-picture-in-picture-control,.video-js .vjs-fullscreen-control{cursor:pointer;flex:none}.vjs-playback-rate>.vjs-menu-button,.vjs-playback-rate .vjs-playback-rate-value{position:absolute;top:0;left:0;width:100%;height:100%}.vjs-playback-rate .vjs-playback-rate-value{pointer-events:none;font-size:1.5em;line-height:2;text-align:center}.vjs-playback-rate .vjs-menu{width:4em;left:0}.vjs-error .vjs-error-display .vjs-modal-dialog-content{font-size:1.4em;text-align:center}.vjs-error .vjs-error-display:before{color:#fff;content:"X";font-family:Arial,Helvetica,sans-serif;font-size:4em;left:0;line-height:1;margin-top:-.5em;position:absolute;text-shadow:.05em .05em .1em #000;text-align:center;top:50%;vertical-align:middle;width:100%}.vjs-loading-spinner{display:none;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;opacity:.85;text-align:left;border:6px solid rgba(43,51,63,.7);box-sizing:border-box;background-clip:padding-box;width:50px;height:50px;border-radius:25px;visibility:hidden}.vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner{display:block;-webkit-animation:vjs-spinner-show 0s linear .3s forwards;animation:vjs-spinner-show 0s linear .3s forwards}.vjs-loading-spinner:before,.vjs-loading-spinner:after{content:"";position:absolute;margin:-6px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:1;border:inherit;border-color:transparent;border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:before,.vjs-seeking .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:after{-webkit-animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite;animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite}.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:before{border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:after{border-top-color:#fff;-webkit-animation-delay:.44s;animation-delay:.44s}@keyframes vjs-spinner-show{to{visibility:visible}}@-webkit-keyframes vjs-spinner-show{to{visibility:visible}}@keyframes vjs-spinner-spin{to{transform:rotate(360deg)}}@-webkit-keyframes vjs-spinner-spin{to{-webkit-transform:rotate(360deg)}}@keyframes vjs-spinner-fade{0%{border-top-color:#73859f}20%{border-top-color:#73859f}35%{border-top-color:#fff}60%{border-top-color:#73859f}to{border-top-color:#73859f}}@-webkit-keyframes vjs-spinner-fade{0%{border-top-color:#73859f}20%{border-top-color:#73859f}35%{border-top-color:#fff}60%{border-top-color:#73859f}to{border-top-color:#73859f}}.vjs-chapters-button .vjs-menu ul{width:24em}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder{vertical-align:middle;display:inline-block;margin-bottom:-.1em}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{font-family:VideoJS;content:"\\f10d";font-size:1.5em;line-height:inherit}.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder{vertical-align:middle;display:inline-block;margin-bottom:-.1em}.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{font-family:VideoJS;content:" \\f11d";font-size:1.5em;line-height:inherit}.video-js.vjs-layout-small .vjs-current-time,.video-js.vjs-layout-small .vjs-time-divider,.video-js.vjs-layout-small .vjs-duration,.video-js.vjs-layout-small .vjs-remaining-time,.video-js.vjs-layout-small .vjs-playback-rate,.video-js.vjs-layout-small .vjs-chapters-button,.video-js.vjs-layout-small .vjs-descriptions-button,.video-js.vjs-layout-small .vjs-captions-button,.video-js.vjs-layout-small .vjs-subtitles-button,.video-js.vjs-layout-small .vjs-audio-button,.video-js.vjs-layout-small .vjs-volume-control,.video-js.vjs-layout-x-small .vjs-current-time,.video-js.vjs-layout-x-small .vjs-time-divider,.video-js.vjs-layout-x-small .vjs-duration,.video-js.vjs-layout-x-small .vjs-remaining-time,.video-js.vjs-layout-x-small .vjs-playback-rate,.video-js.vjs-layout-x-small .vjs-chapters-button,.video-js.vjs-layout-x-small .vjs-descriptions-button,.video-js.vjs-layout-x-small .vjs-captions-button,.video-js.vjs-layout-x-small .vjs-subtitles-button,.video-js.vjs-layout-x-small .vjs-audio-button,.video-js.vjs-layout-x-small .vjs-volume-control,.video-js.vjs-layout-tiny .vjs-current-time,.video-js.vjs-layout-tiny .vjs-time-divider,.video-js.vjs-layout-tiny .vjs-duration,.video-js.vjs-layout-tiny .vjs-remaining-time,.video-js.vjs-layout-tiny .vjs-playback-rate,.video-js.vjs-layout-tiny .vjs-chapters-button,.video-js.vjs-layout-tiny .vjs-descriptions-button,.video-js.vjs-layout-tiny .vjs-captions-button,.video-js.vjs-layout-tiny .vjs-subtitles-button,.video-js.vjs-layout-tiny .vjs-audio-button,.video-js.vjs-layout-tiny .vjs-volume-control{display:none!important}.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active{width:auto;width:initial}.video-js.vjs-layout-x-small:not(.vjs-liveui) .vjs-subs-caps-button,.video-js.vjs-layout-x-small:not(.vjs-live) .vjs-subs-caps-button,.video-js.vjs-layout-tiny .vjs-subs-caps-button{display:none}.video-js.vjs-layout-x-small.vjs-liveui .vjs-custom-control-spacer,.video-js.vjs-layout-tiny .vjs-custom-control-spacer{flex:auto;display:block}.video-js.vjs-layout-x-small.vjs-liveui.vjs-no-flex .vjs-custom-control-spacer,.video-js.vjs-layout-tiny.vjs-no-flex .vjs-custom-control-spacer{width:auto}.video-js.vjs-layout-x-small.vjs-liveui .vjs-progress-control,.video-js.vjs-layout-tiny .vjs-progress-control{display:none}.vjs-modal-dialog.vjs-text-track-settings{background-color:#2b333f;background-color:#2b333fbf;color:#fff;height:70%}.vjs-text-track-settings .vjs-modal-dialog-content{display:table}.vjs-text-track-settings .vjs-track-settings-colors,.vjs-text-track-settings .vjs-track-settings-font,.vjs-text-track-settings .vjs-track-settings-controls{display:table-cell}.vjs-text-track-settings .vjs-track-settings-controls{text-align:right;vertical-align:bottom}@supports (display: grid){.vjs-text-track-settings .vjs-modal-dialog-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;padding:20px 24px 0}.vjs-track-settings-controls .vjs-default-button{margin-bottom:20px}.vjs-text-track-settings .vjs-track-settings-controls{grid-column:1/-1}.vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content{grid-template-columns:1fr}}.vjs-track-setting>select{margin-right:1em;margin-bottom:.5em}.vjs-text-track-settings fieldset{margin:5px;padding:3px;border:none}.vjs-text-track-settings fieldset span{display:inline-block}.vjs-text-track-settings fieldset span>select{max-width:7.3em}.vjs-text-track-settings legend{color:#fff;margin:0 0 5px}.vjs-text-track-settings .vjs-label{position:absolute;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);display:block;margin:0 0 5px;padding:0;border:0;height:1px;width:1px;overflow:hidden}.vjs-track-settings-controls button:focus,.vjs-track-settings-controls button:active{outline-style:solid;outline-width:medium;background-image:linear-gradient(0deg,#fff 88%,#73859f 100%)}.vjs-track-settings-controls button:hover{color:#2b333fbf}.vjs-track-settings-controls button{background-color:#fff;background-image:linear-gradient(-180deg,#fff 88%,#73859f 100%);color:#2b333f;cursor:pointer;border-radius:2px}.vjs-track-settings-controls .vjs-default-button{margin-right:1em}@media print{.video-js>*:not(.vjs-tech):not(.vjs-poster){visibility:hidden}}.vjs-resize-manager{position:absolute;top:0;left:0;width:100%;height:100%;border:none;z-index:-1000}.js-focus-visible .video-js *:focus:not(.focus-visible){outline:none}.video-js *:focus:not(:focus-visible){outline:none}.netless-window-manager-playground{width:100%;height:100%;position:relative;z-index:1;overflow:hidden;user-select:none}.netless-window-manager-sizer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;display:flex}.netless-window-manager-sizer-horizontal{flex-direction:column}.netless-window-manager-sizer:before,.netless-window-manager-sizer:after{flex:1;content:"";display:block}.netless-window-manager-chess-sizer:before,.netless-window-manager-chess-sizer:after{background-image:linear-gradient(45deg,#b0b0b0 25%,transparent 25%),linear-gradient(-45deg,#b0b0b0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#b0b0b0 75%),linear-gradient(-45deg,transparent 75%,#b0b0b0 75%);background-color:#fff;background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.netless-window-manager-wrapper{position:relative;z-index:1;width:100%;height:100%;overflow:hidden}.netless-window-manager-main-view{width:100%;height:100%}.netless-window-manager-cursor-pencil-image,.netless-window-manager-cursor-eraser-image{width:26px;height:26px}.netless-window-manager-cursor-selector-image{width:24px;height:24px}.netless-window-manager-cursor-selector-avatar{border-radius:50%;border-style:solid;border-width:2px;border-color:#fff;margin-bottom:2px}.netless-window-manager-cursor-selector-avatar img{width:12px}.netless-window-manager-cursor-inner{border-radius:4px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:4px;padding-right:4px;font-size:12px}.netless-window-manager-cursor-inner-mellow{height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:16px;padding-right:16px}.netless-window-manager-cursor-tag-name{font-size:12px;margin-left:4px;padding:2px 8px;border-radius:4px}.netless-window-manager-cursor-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:26px;height:26px;z-index:2147483647;left:0;top:0;will-change:transform;transition:transform .1s;transform-origin:0 0;user-select:none}.netless-window-manager-cursor-pencil-offset{margin-left:-20px}.netless-window-manager-cursor-selector-offset{margin-left:-22px;margin-top:56px}.netless-window-manager-cursor-text-offset{margin-left:-30px;margin-top:18px}.netless-window-manager-cursor-shape-offset{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:180px;height:64px;margin-left:-30px;margin-top:12px}.netless-window-manager-cursor-laserPointer-image{margin-left:-22px;margin-top:3px}.netless-window-manager-cursor-name{width:100%;height:48px;display:flex;align-items:center;justify-content:center;position:absolute;top:-40px}.cursor-image-wrapper{display:flex;justify-content:center}.telebox-collector{position:absolute;right:10px;bottom:15px}.tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:#444e601a;background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:#444e601a}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-box{position:absolute;top:0;left:0;z-index:100;transition:width .4s cubic-bezier(.4,.9,.71,1.02),height .4s cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .4s ease}.telebox-box-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#f9f9fc;box-shadow:0 4px 10px #2f419226;border-radius:6px;border:1px solid #e3e3ec}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-content-wrap{flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}.telebox-content{width:100%;height:100%;position:relative}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap:before{content:"";display:block;flex:1}.telebox-resize-handle{position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{transition:width 50ms cubic-bezier(.4,.9,.71,1.02),height 50ms cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7,0,.84,0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark .telebox-box-main{color:#e9e9e9;background:#212126;border-color:#43434d}.telebox-titlebar{box-sizing:border-box;height:26px;display:flex;align-items:center;background:#fff;user-select:none;border-bottom:1px solid #eeeef7;touch-action:manipulation}.telebox-title-area{padding-left:16px;overflow:hidden;position:relative;height:100%;flex:1;display:flex;align-items:center}.telebox-title{overflow:hidden;margin:0;padding:0;font-size:14px;font-weight:400;font-family:PingFangSC-Regular,PingFang SC;white-space:nowrap;word-break:keep-all;text-overflow:ellipsis;color:#191919}.telebox-drag-area{position:absolute;inset:0;margin:auto;z-index:10}.telebox-titlebar-btns{padding-right:16px;white-space:nowrap;word-break:keep-all;margin-left:auto;font-size:0}.telebox-titlebar-btn{width:22px;height:22px;padding:0;outline:0;border:none;background:0 0;cursor:pointer}.telebox-titlebar-btn~.telebox-titlebar-btn{margin-left:10px}.telebox-titlebar-btn-icon{width:22px;height:22px}.telebox-readonly .telebox-titlebar-btn{cursor:not-allowed}.telebox-titlebar-icon-minimize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-titlebar-icon-maximize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==)}.telebox-titlebar-icon-maximize.is-active{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K)}.telebox-titlebar-icon-close{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-color-scheme-dark .telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-collector{visibility:hidden;display:block;position:absolute;z-index:200;width:40px;height:40px;margin:0;padding:0;border:none;outline:0;font-size:0;border-radius:50%;background:#fff;box-shadow:0 2px 6px #2f419226;cursor:pointer;user-select:none;pointer-events:none;background-repeat:no-repeat;background-size:18px 16px;background-position:center;-webkit-tap-highlight-color:transparent}.telebox-collector-visible{visibility:visible;pointer-events:initial}.telebox-collector-readonly{cursor:not-allowed}.telebox-color-scheme-dark.telebox-collector{background-color:#43434d}.telebox-max-titlebar{display:none;position:absolute;top:0;left:0;z-index:50000;user-select:none}.telebox-max-titlebar .telebox-title,.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-titles{display:none}.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title{display:block}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{height:100%;margin:0;overflow-y:hidden;overflow-x:scroll;overflow-x:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.telebox-titles::-webkit-scrollbar{height:8px;width:8px}.telebox-titles::-webkit-scrollbar-track{background-color:transparent}.telebox-titles::-webkit-scrollbar-thumb{background-color:#eeeef7cc;background-color:transparent;border-radius:4px;transition:background-color .4s}.telebox-titles:hover::-webkit-scrollbar-thumb{background-color:#eeeef7cc}.telebox-titles::-webkit-scrollbar-thumb:hover{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:active{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:vertical{min-height:50px}.telebox-titles::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-titles-content{height:100%;display:flex;flex-wrap:nowrap;align-items:center;padding:0}.telebox-titles-tab{height:100%;overflow:hidden;max-width:182px;min-width:50px;padding:0 26px 0 16px;outline:0;font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;border:none;border-right:1px solid #e5e5f0;color:#7b88a0;background:0 0;cursor:pointer;user-select:none}.telebox-titles-tab-focus{color:#357bf6}.telebox-readonly .telebox-titles-tab{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-color-scheme-dark .telebox-titles-tab{border-right-color:#7b88a0}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}.fastboard-react-div{width:100%;height:100%}';
2101
80
 
2102
- // src/vanilla/index.tsx
2103
- import React52 from "react";
2104
- import ReactDOM from "react-dom";
2105
- function mount(app, dom, props) {
2106
- ReactDOM.render(/* @__PURE__ */ React52.createElement(Fastboard, __spreadValues({
2107
- app
2108
- }, props)), dom);
2109
- return {
2110
- update(props2) {
2111
- ReactDOM.render(/* @__PURE__ */ React52.createElement(Fastboard, __spreadValues({
2112
- app
2113
- }, props2)), dom);
2114
- },
2115
- destroy() {
2116
- ReactDOM.unmountComponentAtNode(dom);
2117
- }
2118
- };
2119
- }
81
+ // inline-sass-stub:./src/style.scss
82
+ injectStyle(style_default);
2120
83
  export {
2121
- EmptyToolbarHook,
2122
84
  Fastboard,
2123
- FastboardAppContext,
2124
85
  PageControl,
2125
- PlayerControl,
2126
86
  RedoUndo,
2127
87
  ReplayFastboard,
2128
- ScalePoints,
2129
- ThemeContext,
2130
88
  Toolbar,
2131
- ZoomControl,
2132
- mount,
2133
- useAppsStatus,
2134
- useBoxState,
2135
- useFastboardApp,
2136
- useFastboardValue,
2137
- useFocusedApp,
2138
- useHideControls,
2139
- useMaximized,
2140
- usePageControl,
2141
- usePlayerControl,
2142
- useRedoUndo,
2143
- useRoomState,
2144
- useTheme,
2145
- useToolbar,
2146
- useWritable,
2147
- useZoomControl
89
+ ZoomControl
2148
90
  };
2149
91
  //# sourceMappingURL=index.mjs.map