@remotion/player 4.0.255 → 4.0.256

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 (97) hide show
  1. package/dist/esm/index.mjs +41 -41
  2. package/package.json +3 -3
  3. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/BufferingIndicator.d.ts +0 -5
  4. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/BufferingIndicator.js +0 -38
  5. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/DefaultPlayPauseButton.d.ts +0 -5
  6. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/DefaultPlayPauseButton.js +0 -12
  7. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/EmitterProvider.d.ts +0 -5
  8. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/EmitterProvider.js +0 -20
  9. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.d.ts +0 -5
  10. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.js +0 -129
  11. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlaybackrateControl.d.ts +0 -8
  12. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlaybackrateControl.js +0 -156
  13. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Player.d.ts +0 -56
  14. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Player.js +0 -143
  15. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerControls.d.ts +0 -47
  16. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerControls.js +0 -176
  17. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerSeekBar.d.ts +0 -8
  18. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerSeekBar.js +0 -145
  19. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerUI.d.ts +0 -46
  20. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerUI.js +0 -369
  21. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/SharedPlayerContext.d.ts +0 -15
  22. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/SharedPlayerContext.js +0 -55
  23. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Thumbnail.d.ts +0 -23
  24. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Thumbnail.js +0 -48
  25. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/ThumbnailUI.d.ts +0 -11
  26. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/ThumbnailUI.js +0 -89
  27. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-next-frame.d.ts +0 -14
  28. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-next-frame.js +0 -24
  29. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-scale.d.ts +0 -50
  30. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/calculate-scale.js +0 -72
  31. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/emitter-context.d.ts +0 -4
  32. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/emitter-context.js +0 -3
  33. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/error-boundary.d.ts +0 -19
  34. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/error-boundary.js +0 -32
  35. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/event-emitter.d.ts +0 -91
  36. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/event-emitter.js +0 -114
  37. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/format-time.d.ts +0 -1
  38. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/format-time.js +0 -5
  39. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/icons.d.ts +0 -10
  40. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/icons.js +0 -39
  41. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/index.d.ts +0 -64
  42. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/index.js +0 -23
  43. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/is-backgrounded.d.ts +0 -2
  44. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/is-backgrounded.js +0 -20
  45. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-css-classname.d.ts +0 -1
  46. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-css-classname.js +0 -1
  47. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-methods.d.ts +0 -25
  48. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/player-methods.js +0 -1
  49. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/index.test.d.ts +0 -1
  50. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/index.test.js +0 -7
  51. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/test-utils.d.ts +0 -6
  52. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/test-utils.js +0 -14
  53. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-in-out-frames.test.d.ts +0 -1
  54. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-in-out-frames.test.js +0 -54
  55. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-prop.test.d.ts +0 -1
  56. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/test/validate-prop.test.js +0 -129
  57. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-buffer-state-emitter.d.ts +0 -2
  58. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-buffer-state-emitter.js +0 -22
  59. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-hover-state.d.ts +0 -1
  60. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-hover-state.js +0 -43
  61. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-playback.d.ts +0 -8
  62. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-playback.js +0 -157
  63. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-player.d.ts +0 -24
  64. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-player.js +0 -157
  65. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-thumbnail.d.ts +0 -6
  66. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-thumbnail.js +0 -14
  67. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-video-controls-resize.d.ts +0 -11
  68. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-video-controls-resize.js +0 -35
  69. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/calculate-player-size.d.ts +0 -9
  70. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/calculate-player-size.js +0 -24
  71. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/cancellable-promise.d.ts +0 -5
  72. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/cancellable-promise.js +0 -22
  73. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/delay.d.ts +0 -1
  74. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/delay.js +0 -2
  75. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/is-node.d.ts +0 -1
  76. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/is-node.js +0 -1
  77. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/props-if-has-props.d.ts +0 -10
  78. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/props-if-has-props.js +0 -1
  79. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-cancellable-promises.d.ts +0 -7
  80. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-cancellable-promises.js +0 -18
  81. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-click-prevention-on-double-click.d.ts +0 -3
  82. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-click-prevention-on-double-click.js +0 -41
  83. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-component-visible.d.ts +0 -6
  84. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-component-visible.js +0 -18
  85. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-element-size.d.ts +0 -16
  86. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-element-size.js +0 -127
  87. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-in-out-frame.d.ts +0 -6
  88. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-in-out-frame.js +0 -49
  89. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-initial-frame.d.ts +0 -4
  90. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-initial-frame.js +0 -23
  91. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-playbackrate.d.ts +0 -1
  92. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/validate-playbackrate.js +0 -14
  93. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/validate.d.ts +0 -5
  94. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/validate.js +0 -6
  95. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/volume-persistance.d.ts +0 -2
  96. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/volume-persistance.js +0 -29
  97. package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/tsconfig-esm.tsbuildinfo +0 -1
@@ -60,40 +60,40 @@ var FullscreenIcon = ({
60
60
  children: [
61
61
  /* @__PURE__ */ jsx("path", {
62
62
  d: `
63
- \t\t\t\tM ${out} ${inset}
64
- \t\t\t\tL ${middleInset} ${middleInset}
65
- \t\t\t\tL ${inset} ${out}
66
- \t\t\t\t`,
63
+ M ${out} ${inset}
64
+ L ${middleInset} ${middleInset}
65
+ L ${inset} ${out}
66
+ `,
67
67
  stroke: "#fff",
68
68
  strokeWidth,
69
69
  fill: "none"
70
70
  }),
71
71
  /* @__PURE__ */ jsx("path", {
72
72
  d: `
73
- \t\t\t\tM ${viewSize - out} ${inset}
74
- \t\t\t\tL ${viewSize - middleInset} ${middleInset}
75
- \t\t\t\tL ${viewSize - inset} ${out}
76
- \t\t\t\t`,
73
+ M ${viewSize - out} ${inset}
74
+ L ${viewSize - middleInset} ${middleInset}
75
+ L ${viewSize - inset} ${out}
76
+ `,
77
77
  stroke: "#fff",
78
78
  strokeWidth,
79
79
  fill: "none"
80
80
  }),
81
81
  /* @__PURE__ */ jsx("path", {
82
82
  d: `
83
- \t\t\t\tM ${out} ${viewSize - inset}
84
- \t\t\t\tL ${middleInset} ${viewSize - middleInset}
85
- \t\t\t\tL ${inset} ${viewSize - out}
86
- \t\t\t\t`,
83
+ M ${out} ${viewSize - inset}
84
+ L ${middleInset} ${viewSize - middleInset}
85
+ L ${inset} ${viewSize - out}
86
+ `,
87
87
  stroke: "#fff",
88
88
  strokeWidth,
89
89
  fill: "none"
90
90
  }),
91
91
  /* @__PURE__ */ jsx("path", {
92
92
  d: `
93
- \t\t\t\tM ${viewSize - out} ${viewSize - inset}
94
- \t\t\t\tL ${viewSize - middleInset} ${viewSize - middleInset}
95
- \t\t\t\tL ${viewSize - inset} ${viewSize - out}
96
- \t\t\t\t`,
93
+ M ${viewSize - out} ${viewSize - inset}
94
+ L ${viewSize - middleInset} ${viewSize - middleInset}
95
+ L ${viewSize - inset} ${viewSize - out}
96
+ `,
97
97
  stroke: "#fff",
98
98
  strokeWidth,
99
99
  fill: "none"
@@ -149,7 +149,7 @@ var BufferingIndicator = ({ type }) => {
149
149
  /* @__PURE__ */ jsx2("style", {
150
150
  type: "text/css",
151
151
  children: `
152
- \t\t\t\t@keyframes ${remotionBufferingAnimation} {
152
+ @keyframes ${remotionBufferingAnimation} {
153
153
  0% {
154
154
  rotate: 0deg;
155
155
  }
@@ -161,7 +161,7 @@ var BufferingIndicator = ({ type }) => {
161
161
  .${className} {
162
162
  animation: ${remotionBufferingAnimation} 1s linear infinite;
163
163
  }
164
- \t\t\t`
164
+ `
165
165
  }),
166
166
  /* @__PURE__ */ jsx2("div", {
167
167
  style,
@@ -1227,9 +1227,9 @@ var DefaultVolumeSlider = ({
1227
1227
  height: BAR_HEIGHT,
1228
1228
  width: VOLUME_SLIDER_WIDTH,
1229
1229
  backgroundImage: `linear-gradient(
1230
- \t\t\t\tto right,
1231
- \t\t\t\twhite ${volume * 100}%, rgba(255, 255, 255, 0) ${volume * 100}%
1232
- \t\t\t)`
1230
+ to right,
1231
+ white ${volume * 100}%, rgba(255, 255, 255, 0) ${volume * 100}%
1232
+ )`
1233
1233
  };
1234
1234
  if (isVertical) {
1235
1235
  return {
@@ -1240,23 +1240,23 @@ var DefaultVolumeSlider = ({
1240
1240
  return commonStyle;
1241
1241
  }, [isVertical, volume]);
1242
1242
  const sliderStyle = `
1243
- \t.${randomClass}::-webkit-slider-thumb {
1244
- \t\t-webkit-appearance: none;
1245
- \t\tbackground-color: white;
1246
- \t\tborder-radius: ${KNOB_SIZE / 2}px;
1247
- \t\tbox-shadow: 0 0 2px black;
1248
- \t\theight: ${KNOB_SIZE}px;
1249
- \t\twidth: ${KNOB_SIZE}px;
1250
- \t}
1243
+ .${randomClass}::-webkit-slider-thumb {
1244
+ -webkit-appearance: none;
1245
+ background-color: white;
1246
+ border-radius: ${KNOB_SIZE / 2}px;
1247
+ box-shadow: 0 0 2px black;
1248
+ height: ${KNOB_SIZE}px;
1249
+ width: ${KNOB_SIZE}px;
1250
+ }
1251
1251
 
1252
- \t.${randomClass}::-moz-range-thumb {
1253
- \t\t-webkit-appearance: none;
1254
- \t\tbackground-color: white;
1255
- \t\tborder-radius: ${KNOB_SIZE / 2}px;
1256
- \t\tbox-shadow: 0 0 2px black;
1257
- \t\theight: ${KNOB_SIZE}px;
1258
- \t\twidth: ${KNOB_SIZE}px;
1259
- \t}
1252
+ .${randomClass}::-moz-range-thumb {
1253
+ -webkit-appearance: none;
1254
+ background-color: white;
1255
+ border-radius: ${KNOB_SIZE / 2}px;
1256
+ box-shadow: 0 0 2px black;
1257
+ height: ${KNOB_SIZE}px;
1258
+ width: ${KNOB_SIZE}px;
1259
+ }
1260
1260
  `;
1261
1261
  return /* @__PURE__ */ jsxs3("div", {
1262
1262
  style: sliderContainer,
@@ -2214,10 +2214,10 @@ var RenderWarningIfBlacklist = () => {
2214
2214
  cssText: `${style.cssText} !important;`
2215
2215
  });
2216
2216
  div.innerHTML = `
2217
- \t <a href="https://github.com/remotion-dev/remotion/pull/4589" style="color: white;">
2218
- \t Remotion Unlicensed – Contact hi@remotion.dev
2219
- \t </a>
2220
- \t `;
2217
+ <a href="https://github.com/remotion-dev/remotion/pull/4589" style="color: white;">
2218
+ Remotion Unlicensed – Contact hi@remotion.dev
2219
+ </a>
2220
+ `;
2221
2221
  document.body.appendChild(div);
2222
2222
  }
2223
2223
  };
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
4
4
  },
5
5
  "name": "@remotion/player",
6
- "version": "4.0.255",
6
+ "version": "4.0.256",
7
7
  "description": "React component for embedding a Remotion preview into your app",
8
8
  "main": "dist/cjs/index.js",
9
9
  "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
28
28
  ],
29
29
  "license": "SEE LICENSE IN LICENSE.md",
30
30
  "dependencies": {
31
- "remotion": "4.0.255"
31
+ "remotion": "4.0.256"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "react": ">=16.8.0",
@@ -43,7 +43,7 @@
43
43
  "webpack": "5.96.1",
44
44
  "zod": "3.22.3",
45
45
  "eslint": "9.14.0",
46
- "@remotion/eslint-config-internal": "4.0.255"
46
+ "@remotion/eslint-config-internal": "4.0.256"
47
47
  },
48
48
  "keywords": [
49
49
  "remotion",
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- export declare const bufferingIndicatorStrokeWidth = 3;
3
- export declare const BufferingIndicator: React.FC<{
4
- type: 'player' | 'studio';
5
- }>;
@@ -1,38 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { ICON_SIZE } from './icons.js';
3
- const className = '__remotion_buffering_indicator';
4
- const remotionBufferingAnimation = '__remotion_buffering_animation';
5
- export const bufferingIndicatorStrokeWidth = 3;
6
- const playerStyle = {
7
- width: ICON_SIZE,
8
- height: ICON_SIZE,
9
- overflow: 'hidden',
10
- lineHeight: 'normal',
11
- fontSize: 'inherit',
12
- };
13
- const studioStyle = {
14
- width: 14,
15
- height: 14,
16
- overflow: 'hidden',
17
- lineHeight: 'normal',
18
- fontSize: 'inherit',
19
- };
20
- export const BufferingIndicator = ({ type }) => {
21
- const style = type === 'player' ? playerStyle : studioStyle;
22
- return (_jsxs(_Fragment, { children: [_jsx("style", { type: "text/css", children: `
23
- @keyframes ${remotionBufferingAnimation} {
24
- 0% {
25
- rotate: 0deg;
26
- }
27
- 100% {
28
- rotate: 360deg;
29
- }
30
- }
31
-
32
- .${className} {
33
- animation: ${remotionBufferingAnimation} 1s linear infinite;
34
- }
35
- ` }), _jsx("div", { style: style, children: _jsx("svg", { viewBox: type === 'player' ? '0 0 22 22' : '0 0 18 18', style: style, className: className, children: _jsx("path", { d: type === 'player'
36
- ? 'M 11 4 A 7 7 0 0 1 15.1145 16.66312'
37
- : 'M 9 2 A 7 7 0 0 1 13.1145 14.66312', stroke: "white", strokeLinecap: "round", fill: "none", strokeWidth: 3 }) }) })] }));
38
- };
@@ -1,5 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const DefaultPlayPauseButton: React.FC<{
3
- playing: boolean;
4
- buffering: boolean;
5
- }>;
@@ -1,12 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { BufferingIndicator } from './BufferingIndicator.js';
3
- import { PauseIcon, PlayIcon } from './icons.js';
4
- export const DefaultPlayPauseButton = ({ playing, buffering }) => {
5
- if (playing && buffering) {
6
- return _jsx(BufferingIndicator, { type: "player" });
7
- }
8
- if (playing) {
9
- return _jsx(PauseIcon, {});
10
- }
11
- return _jsx(PlayIcon, {});
12
- };
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- export declare const PlayerEmitterProvider: React.FC<{
3
- children: React.ReactNode;
4
- currentPlaybackRate: number | null;
5
- }>;
@@ -1,20 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useContext, useEffect, useState } from 'react';
3
- import { Internals } from 'remotion';
4
- import { PlayerEventEmitterContext } from './emitter-context.js';
5
- import { PlayerEmitter } from './event-emitter.js';
6
- import { useBufferStateEmitter } from './use-buffer-state-emitter.js';
7
- export const PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
8
- const [emitter] = useState(() => new PlayerEmitter());
9
- const bufferManager = useContext(Internals.BufferingContextReact);
10
- if (!bufferManager) {
11
- throw new Error('BufferingContextReact not found');
12
- }
13
- useEffect(() => {
14
- if (currentPlaybackRate) {
15
- emitter.dispatchRateChange(currentPlaybackRate);
16
- }
17
- }, [emitter, currentPlaybackRate]);
18
- useBufferStateEmitter(emitter);
19
- return (_jsx(PlayerEventEmitterContext.Provider, { value: emitter, children: children }));
20
- };
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- export declare const VOLUME_SLIDER_WIDTH = 100;
3
- export declare const MediaVolumeSlider: React.FC<{
4
- displayVerticalVolumeSlider: Boolean;
5
- }>;
@@ -1,129 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import React, { useCallback, useMemo, useRef, useState } from 'react';
3
- import { Internals, random } from 'remotion';
4
- import { ICON_SIZE, VolumeOffIcon, VolumeOnIcon } from './icons.js';
5
- import { useHoverState } from './use-hover-state.js';
6
- const BAR_HEIGHT = 5;
7
- const KNOB_SIZE = 12;
8
- export const VOLUME_SLIDER_WIDTH = 100;
9
- export const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
10
- const [mediaMuted, setMediaMuted] = Internals.useMediaMutedState();
11
- const [mediaVolume, setMediaVolume] = Internals.useMediaVolumeState();
12
- const [focused, setFocused] = useState(false);
13
- const parentDivRef = useRef(null);
14
- const inputRef = useRef(null);
15
- const hover = useHoverState(parentDivRef, false);
16
- // Need to import it from React to fix React 17 ESM support.
17
- const randomId =
18
- // eslint-disable-next-line react-hooks/rules-of-hooks
19
- typeof React.useId === 'undefined' ? 'volume-slider' : React.useId();
20
- const [randomClass] = useState(() => `__remotion-volume-slider-${random(randomId)}`.replace('.', ''));
21
- const isMutedOrZero = mediaMuted || mediaVolume === 0;
22
- const onVolumeChange = useCallback((e) => {
23
- setMediaVolume(parseFloat(e.target.value));
24
- }, [setMediaVolume]);
25
- const onBlur = () => {
26
- setTimeout(() => {
27
- // We need a small delay to check which element was focused next,
28
- // and if it wasn't the volume slider, we hide it
29
- if (document.activeElement !== inputRef.current) {
30
- setFocused(false);
31
- }
32
- }, 10);
33
- };
34
- const isVolume0 = mediaVolume === 0;
35
- const onClick = useCallback(() => {
36
- if (isVolume0) {
37
- setMediaVolume(1);
38
- setMediaMuted(false);
39
- return;
40
- }
41
- setMediaMuted((mute) => !mute);
42
- }, [isVolume0, setMediaMuted, setMediaVolume]);
43
- const parentDivStyle = useMemo(() => {
44
- return {
45
- display: 'inline-flex',
46
- background: 'none',
47
- border: 'none',
48
- justifyContent: 'center',
49
- alignItems: 'center',
50
- touchAction: 'none',
51
- ...(displayVerticalVolumeSlider && { position: 'relative' }),
52
- };
53
- }, [displayVerticalVolumeSlider]);
54
- const volumeContainer = useMemo(() => {
55
- return {
56
- display: 'inline',
57
- width: ICON_SIZE,
58
- height: ICON_SIZE,
59
- cursor: 'pointer',
60
- appearance: 'none',
61
- background: 'none',
62
- border: 'none',
63
- padding: 0,
64
- };
65
- }, []);
66
- const sliderContainer = useMemo(() => {
67
- const paddingLeft = 5;
68
- const common = {
69
- paddingLeft,
70
- height: ICON_SIZE,
71
- width: VOLUME_SLIDER_WIDTH,
72
- };
73
- if (displayVerticalVolumeSlider) {
74
- return {
75
- ...common,
76
- position: 'absolute',
77
- transform: `rotate(-90deg) translateX(${VOLUME_SLIDER_WIDTH / 2 + ICON_SIZE / 2}px)`,
78
- };
79
- }
80
- return {
81
- ...common,
82
- };
83
- }, [displayVerticalVolumeSlider]);
84
- const inputStyle = useMemo(() => {
85
- const commonStyle = {
86
- WebkitAppearance: 'none',
87
- backgroundColor: 'rgba(255, 255, 255, 0.5)',
88
- borderRadius: BAR_HEIGHT / 2,
89
- cursor: 'pointer',
90
- height: BAR_HEIGHT,
91
- width: VOLUME_SLIDER_WIDTH,
92
- backgroundImage: `linear-gradient(
93
- to right,
94
- white ${mediaVolume * 100}%, rgba(255, 255, 255, 0) ${mediaVolume * 100}%
95
- )`,
96
- };
97
- if (displayVerticalVolumeSlider) {
98
- return {
99
- ...commonStyle,
100
- bottom: ICON_SIZE + VOLUME_SLIDER_WIDTH / 2,
101
- };
102
- }
103
- return commonStyle;
104
- }, [displayVerticalVolumeSlider, mediaVolume]);
105
- const sliderStyle = `
106
- .${randomClass}::-webkit-slider-thumb {
107
- -webkit-appearance: none;
108
- background-color: white;
109
- border-radius: ${KNOB_SIZE / 2}px;
110
- box-shadow: 0 0 2px black;
111
- height: ${KNOB_SIZE}px;
112
- width: ${KNOB_SIZE}px;
113
- }
114
-
115
- .${randomClass}::-moz-range-thumb {
116
- -webkit-appearance: none;
117
- background-color: white;
118
- border-radius: ${KNOB_SIZE / 2}px;
119
- box-shadow: 0 0 2px black;
120
- height: ${KNOB_SIZE}px;
121
- width: ${KNOB_SIZE}px;
122
- }
123
- `;
124
- return (_jsxs("div", { ref: parentDivRef, style: parentDivStyle, children: [_jsx("style", {
125
- // eslint-disable-next-line react/no-danger
126
- dangerouslySetInnerHTML: {
127
- __html: sliderStyle,
128
- } }), _jsx("button", { "aria-label": isMutedOrZero ? 'Unmute sound' : 'Mute sound', title: isMutedOrZero ? 'Unmute sound' : 'Mute sound', onClick: onClick, onBlur: onBlur, onFocus: () => setFocused(true), style: volumeContainer, type: "button", children: isMutedOrZero ? _jsx(VolumeOffIcon, {}) : _jsx(VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted && !Internals.isIosSafari() ? (_jsx("div", { style: sliderContainer, children: _jsx("input", { ref: inputRef, "aria-label": "Change volume", className: randomClass, max: 1, min: 0, onBlur: () => setFocused(false), onChange: onVolumeChange, step: 0.01, type: "range", value: mediaVolume, style: inputStyle }) })) : null] }));
129
- };
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import type { Size } from './utils/use-element-size.js';
3
- export declare const Checkmark: () => import("react/jsx-runtime.js").JSX.Element;
4
- export declare const playerButtonStyle: React.CSSProperties;
5
- export declare const PlaybackrateControl: React.FC<{
6
- playbackRates: number[];
7
- canvasSize: Size;
8
- }>;
@@ -1,156 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useCallback, useContext, useEffect, useMemo, useState, } from 'react';
3
- import { Internals } from 'remotion';
4
- import useComponentVisible from './utils/use-component-visible.js';
5
- // To align
6
- const BOTTOM = 35;
7
- // Arbitrary to clamp the height of the popup
8
- const THRESHOLD = 70;
9
- const rateDiv = {
10
- height: 30,
11
- paddingRight: 15,
12
- paddingLeft: 12,
13
- display: 'flex',
14
- flexDirection: 'row',
15
- alignItems: 'center',
16
- };
17
- const checkmarkContainer = {
18
- width: 22,
19
- display: 'flex',
20
- alignItems: 'center',
21
- };
22
- const checkmarkStyle = {
23
- width: 14,
24
- height: 14,
25
- color: 'black',
26
- };
27
- export const Checkmark = () => (_jsx("svg", { viewBox: "0 0 512 512", style: checkmarkStyle, children: _jsx("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
28
- const PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
29
- const onClick = useCallback((e) => {
30
- e.stopPropagation();
31
- e.preventDefault();
32
- onSelect(rate);
33
- }, [onSelect, rate]);
34
- const [hovered, setHovered] = useState(false);
35
- const onMouseEnter = useCallback(() => {
36
- setHovered(true);
37
- }, []);
38
- const onMouseLeave = useCallback(() => {
39
- setHovered(false);
40
- }, []);
41
- const isFocused = keyboardSelectedRate === rate;
42
- const actualStyle = useMemo(() => {
43
- return {
44
- ...rateDiv,
45
- backgroundColor: hovered || isFocused ? '#eee' : 'transparent',
46
- };
47
- }, [hovered, isFocused]);
48
- return (_jsxs("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, tabIndex: 0, style: actualStyle, onClick: onClick, children: [_jsx("div", { style: checkmarkContainer, children: rate === selectedRate ? _jsx(Checkmark, {}) : null }), rate.toFixed(1), "x"] }, rate));
49
- };
50
- const PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
51
- const { setPlaybackRate, playbackRate } = useContext(Internals.Timeline.TimelineContext);
52
- const [keyboardSelectedRate, setKeyboardSelectedRate] = useState(playbackRate);
53
- useEffect(() => {
54
- const listener = (e) => {
55
- e.preventDefault();
56
- if (e.key === 'ArrowUp') {
57
- const currentIndex = playbackRates.findIndex((rate) => rate === keyboardSelectedRate);
58
- if (currentIndex === 0) {
59
- return;
60
- }
61
- if (currentIndex === -1) {
62
- setKeyboardSelectedRate(playbackRates[0]);
63
- }
64
- else {
65
- setKeyboardSelectedRate(playbackRates[currentIndex - 1]);
66
- }
67
- }
68
- else if (e.key === 'ArrowDown') {
69
- const currentIndex = playbackRates.findIndex((rate) => rate === keyboardSelectedRate);
70
- if (currentIndex === playbackRates.length - 1) {
71
- return;
72
- }
73
- if (currentIndex === -1) {
74
- setKeyboardSelectedRate(playbackRates[playbackRates.length - 1]);
75
- }
76
- else {
77
- setKeyboardSelectedRate(playbackRates[currentIndex + 1]);
78
- }
79
- }
80
- else if (e.key === 'Enter') {
81
- setPlaybackRate(keyboardSelectedRate);
82
- setIsComponentVisible(false);
83
- }
84
- };
85
- window.addEventListener('keydown', listener);
86
- return () => {
87
- window.removeEventListener('keydown', listener);
88
- };
89
- }, [
90
- playbackRates,
91
- keyboardSelectedRate,
92
- setPlaybackRate,
93
- setIsComponentVisible,
94
- ]);
95
- const onSelect = useCallback((rate) => {
96
- setPlaybackRate(rate);
97
- setIsComponentVisible(false);
98
- }, [setIsComponentVisible, setPlaybackRate]);
99
- const playbackPopup = useMemo(() => {
100
- return {
101
- position: 'absolute',
102
- right: 0,
103
- width: 125,
104
- maxHeight: canvasSize.height - THRESHOLD - BOTTOM,
105
- bottom: 35,
106
- background: '#fff',
107
- borderRadius: 4,
108
- overflow: 'auto',
109
- color: 'black',
110
- textAlign: 'left',
111
- };
112
- }, [canvasSize.height]);
113
- return (_jsx("div", { style: playbackPopup, children: playbackRates.map((rate) => {
114
- return (_jsx(PlaybackrateOption, { selectedRate: playbackRate, onSelect: onSelect, rate: rate, keyboardSelectedRate: keyboardSelectedRate }, rate));
115
- }) }));
116
- };
117
- const label = {
118
- fontSize: 13,
119
- fontWeight: 'bold',
120
- color: 'white',
121
- border: '2px solid white',
122
- borderRadius: 20,
123
- paddingLeft: 8,
124
- paddingRight: 8,
125
- paddingTop: 2,
126
- paddingBottom: 2,
127
- };
128
- export const playerButtonStyle = {
129
- appearance: 'none',
130
- backgroundColor: 'transparent',
131
- border: 'none',
132
- cursor: 'pointer',
133
- paddingLeft: 0,
134
- paddingRight: 0,
135
- paddingTop: 6,
136
- paddingBottom: 6,
137
- height: 37,
138
- display: 'inline-flex',
139
- marginBottom: 0,
140
- marginTop: 0,
141
- alignItems: 'center',
142
- };
143
- const button = {
144
- ...playerButtonStyle,
145
- position: 'relative',
146
- };
147
- export const PlaybackrateControl = ({ playbackRates, canvasSize }) => {
148
- const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
149
- const { playbackRate } = useContext(Internals.Timeline.TimelineContext);
150
- const onClick = useCallback((e) => {
151
- e.stopPropagation();
152
- e.preventDefault();
153
- setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
154
- }, [setIsComponentVisible]);
155
- return (_jsx("div", { ref: ref, children: _jsxs("button", { type: "button", "aria-label": "Change playback rate", style: button, onClick: onClick, children: [_jsxs("div", { style: label, children: [playbackRate, "x"] }), isComponentVisible && (_jsx(PlaybackPopup, { canvasSize: canvasSize, playbackRates: playbackRates, setIsComponentVisible: setIsComponentVisible }))] }) }));
156
- };
@@ -1,56 +0,0 @@
1
- import type { ComponentType } from 'react';
2
- import React from 'react';
3
- import type { CompProps } from 'remotion';
4
- import type { AnyZodObject } from 'zod';
5
- import type { PlayerRef } from './player-methods.js';
6
- import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
7
- import type { PosterFillMode, RenderLoading, RenderPoster } from './PlayerUI.js';
8
- import type { PropsIfHasProps } from './utils/props-if-has-props.js';
9
- export type ErrorFallback = (info: {
10
- error: Error;
11
- }) => React.ReactNode;
12
- export type PlayerProps<Schema extends AnyZodObject, Props> = {
13
- durationInFrames: number;
14
- compositionWidth: number;
15
- compositionHeight: number;
16
- fps: number;
17
- showVolumeControls?: boolean;
18
- controls?: boolean;
19
- errorFallback?: ErrorFallback;
20
- style?: React.CSSProperties;
21
- loop?: boolean;
22
- autoPlay?: boolean;
23
- allowFullscreen?: boolean;
24
- clickToPlay?: boolean;
25
- doubleClickToFullscreen?: boolean;
26
- spaceKeyToPlayOrPause?: boolean;
27
- numberOfSharedAudioTags?: number;
28
- playbackRate?: number;
29
- renderLoading?: RenderLoading;
30
- moveToBeginningWhenEnded?: boolean;
31
- className?: string;
32
- initialFrame?: number;
33
- renderPoster?: RenderPoster;
34
- showPosterWhenPaused?: boolean;
35
- showPosterWhenEnded?: boolean;
36
- showPosterWhenUnplayed?: boolean;
37
- showPosterWhenBuffering?: boolean;
38
- inFrame?: number | null;
39
- outFrame?: number | null;
40
- initiallyShowControls?: number | boolean;
41
- renderPlayPauseButton?: RenderPlayPauseButton;
42
- renderFullscreenButton?: RenderFullscreenButton;
43
- alwaysShowControls?: boolean;
44
- schema?: Schema;
45
- initiallyMuted?: boolean;
46
- showPlaybackRateControl?: boolean | number[];
47
- posterFillMode?: PosterFillMode;
48
- bufferStateDelayInMilliseconds?: number;
49
- hideControlsWhenPointerDoesntMove?: boolean | number;
50
- } & CompProps<Props> & PropsIfHasProps<Schema, Props>;
51
- export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) => ComponentType<Props> | null;
52
- /**
53
- * @description A component which can be rendered in a regular React App (for example: Vite, Next.js) to display a Remotion video.
54
- * @see [Documentation](https://www.remotion.dev/docs/player/player)
55
- */
56
- export declare const Player: <Schema extends AnyZodObject, Props>(props: PlayerProps<Schema, Props> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;