|
1 | 1 | // @ts-check
|
2 | 2 | import React from 'react';
|
3 |
| -import PropTypes from 'prop-types'; |
4 | 3 | import Player from '@vimeo/player';
|
5 | 4 |
|
6 | 5 | /** @typedef {import('@vimeo/player').EventMap} EventMap */
|
@@ -92,26 +91,26 @@ function useVimeo(container, {
|
92 | 91 | video,
|
93 | 92 | width,
|
94 | 93 | height,
|
95 |
| - autopause, |
96 |
| - autoplay, |
97 |
| - showByline, |
| 94 | + autopause = true, |
| 95 | + autoplay = false, |
| 96 | + showByline = true, |
98 | 97 | color,
|
99 |
| - controls, |
100 |
| - loop, |
101 |
| - showPortrait, |
102 |
| - showTitle, |
103 |
| - muted, |
104 |
| - background, |
105 |
| - responsive, |
| 98 | + controls = true, |
| 99 | + loop = false, |
| 100 | + showPortrait = true, |
| 101 | + showTitle = true, |
| 102 | + muted = false, |
| 103 | + background = false, |
| 104 | + responsive = false, |
106 | 105 | playbackRate,
|
107 |
| - dnt, |
108 |
| - speed, |
109 |
| - keyboard, |
110 |
| - pip, |
111 |
| - playsInline, |
| 106 | + dnt = false, |
| 107 | + speed = false, |
| 108 | + keyboard = false, |
| 109 | + pip = false, |
| 110 | + playsInline = true, |
112 | 111 | quality,
|
113 | 112 | textTrack,
|
114 |
| - transparent, |
| 113 | + transparent = true, |
115 | 114 | paused,
|
116 | 115 | volume,
|
117 | 116 | start,
|
@@ -316,309 +315,5 @@ function Vimeo({
|
316 | 315 | );
|
317 | 316 | }
|
318 | 317 |
|
319 |
| -if (process.env.NODE_ENV !== 'production') { |
320 |
| - Vimeo.propTypes = { |
321 |
| - /** |
322 |
| - * A Vimeo video ID or URL. |
323 |
| - */ |
324 |
| - video: PropTypes.oneOfType([ |
325 |
| - PropTypes.number, |
326 |
| - PropTypes.string, |
327 |
| - ]), |
328 |
| - /** |
329 |
| - * DOM ID for the player element. |
330 |
| - */ |
331 |
| - id: PropTypes.string, |
332 |
| - /** |
333 |
| - * CSS className for the player element. |
334 |
| - */ |
335 |
| - className: PropTypes.string, |
336 |
| - /** |
337 |
| - * Inline style for container element. |
338 |
| - */ |
339 |
| - style: PropTypes.object, // eslint-disable-line react/forbid-prop-types |
340 |
| - /** |
341 |
| - * Width of the player element. |
342 |
| - */ |
343 |
| - width: PropTypes.oneOfType([ |
344 |
| - PropTypes.number, |
345 |
| - PropTypes.string, |
346 |
| - ]), |
347 |
| - /** |
348 |
| - * Height of the player element. |
349 |
| - */ |
350 |
| - height: PropTypes.oneOfType([ |
351 |
| - PropTypes.number, |
352 |
| - PropTypes.string, |
353 |
| - ]), |
354 |
| - |
355 |
| - /** |
356 |
| - * Pause the video. |
357 |
| - */ |
358 |
| - paused: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types |
359 |
| - |
360 |
| - /** |
361 |
| - * The playback volume as a number between 0 and 1. |
362 |
| - */ |
363 |
| - volume: PropTypes.number, |
364 |
| - |
365 |
| - /** |
366 |
| - * The time in seconds at which to start playing the video. |
367 |
| - */ |
368 |
| - start: PropTypes.number, |
369 |
| - |
370 |
| - // Player parameters |
371 |
| - /** |
372 |
| - * Pause this video automatically when another one plays. |
373 |
| - */ |
374 |
| - autopause: PropTypes.bool, |
375 |
| - |
376 |
| - /** |
377 |
| - * Automatically start playback of the video. Note that this won’t work on |
378 |
| - * some devices. |
379 |
| - */ |
380 |
| - autoplay: PropTypes.bool, |
381 |
| - |
382 |
| - /** |
383 |
| - * Show the byline on the video. |
384 |
| - */ |
385 |
| - showByline: PropTypes.bool, |
386 |
| - |
387 |
| - /** |
388 |
| - * Specify the color of the video controls. Colors may be overridden by the |
389 |
| - * embed settings of the video. _(Ex: "ef2f9f")_ |
390 |
| - */ |
391 |
| - color: PropTypes.string, |
392 |
| - |
393 |
| - /** |
394 |
| - * Blocks the player from tracking any session data, including all cookies and analytics. |
395 |
| - */ |
396 |
| - dnt: PropTypes.bool, |
397 |
| - |
398 |
| - // Player controls |
399 |
| - /** |
400 |
| - * Hide all elements in the player, such as the progress bar, sharing buttons, etc. |
401 |
| - * (requires Vimeo PRO / Business account) |
402 |
| - */ |
403 |
| - controls: PropTypes.bool, |
404 |
| - |
405 |
| - /** |
406 |
| - * Play the video again when it reaches the end. |
407 |
| - */ |
408 |
| - loop: PropTypes.bool, |
409 |
| - |
410 |
| - /** |
411 |
| - * Show the portrait on the video. |
412 |
| - */ |
413 |
| - showPortrait: PropTypes.bool, |
414 |
| - |
415 |
| - /** |
416 |
| - * Show the title on the video. |
417 |
| - */ |
418 |
| - showTitle: PropTypes.bool, |
419 |
| - |
420 |
| - /** |
421 |
| - * Starts in a muted state to help with autoplay |
422 |
| - */ |
423 |
| - muted: PropTypes.bool, |
424 |
| - |
425 |
| - /** |
426 |
| - * Starts in a background state with no controls to help with autoplay |
427 |
| - */ |
428 |
| - background: PropTypes.bool, |
429 |
| - |
430 |
| - /** |
431 |
| - * Enable responsive mode and resize according to parent element (experimental) |
432 |
| - */ |
433 |
| - responsive: PropTypes.bool, |
434 |
| - |
435 |
| - /** |
436 |
| - * Specify playback rate (requires Vimeo PRO / Business account) |
437 |
| - */ |
438 |
| - playbackRate: PropTypes.number, |
439 |
| - |
440 |
| - /** |
441 |
| - * Enable playback rate controls (requires Vimeo PRO / Business account) |
442 |
| - */ |
443 |
| - speed: PropTypes.bool, |
444 |
| - |
445 |
| - /** |
446 |
| - * Allows for keyboard input to trigger player events. |
447 |
| - */ |
448 |
| - keyboard: PropTypes.bool, |
449 |
| - |
450 |
| - /** |
451 |
| - * Show the picture-in-picture button in the controlbar |
452 |
| - * and enable the picture-in-picture API. |
453 |
| - */ |
454 |
| - pip: PropTypes.bool, |
455 |
| - |
456 |
| - /** |
457 |
| - * Play video inline on mobile devices, to automatically |
458 |
| - * go fullscreen on playback set this parameter to false. |
459 |
| - */ |
460 |
| - playsInline: PropTypes.bool, |
461 |
| - |
462 |
| - /** |
463 |
| - * Vimeo Plus, PRO, and Business members can default |
464 |
| - * an embedded video to a specific quality on desktop. |
465 |
| - */ |
466 |
| - quality: PropTypes.string, |
467 |
| - |
468 |
| - /** |
469 |
| - * Turn captions/subtitles on for a specific language by default. |
470 |
| - */ |
471 |
| - textTrack: PropTypes.string, |
472 |
| - |
473 |
| - /** |
474 |
| - * The responsive player and transparent background are enabled |
475 |
| - * by default, to disable set this parameter to false. |
476 |
| - */ |
477 |
| - transparent: PropTypes.bool, |
478 |
| - |
479 |
| - // Events |
480 |
| - /* eslint-disable react/no-unused-prop-types */ |
481 |
| - |
482 |
| - /** |
483 |
| - * Sent when the Vimeo player API has loaded. |
484 |
| - * Receives the Vimeo player object in the first parameter. |
485 |
| - */ |
486 |
| - onReady: PropTypes.func, |
487 |
| - /** |
488 |
| - * Sent when the player triggers an error. |
489 |
| - */ |
490 |
| - onError: PropTypes.func, |
491 |
| - /** |
492 |
| - * Triggered when video playback is initiated. |
493 |
| - */ |
494 |
| - onPlay: PropTypes.func, |
495 |
| - /** |
496 |
| - * Triggered when the video starts playing. |
497 |
| - */ |
498 |
| - onPlaying: PropTypes.func, |
499 |
| - /** |
500 |
| - * Triggered when the video pauses. |
501 |
| - */ |
502 |
| - onPause: PropTypes.func, |
503 |
| - /** |
504 |
| - * Triggered any time the video playback reaches the end. |
505 |
| - * Note: when `loop` is turned on, the ended event will not fire. |
506 |
| - */ |
507 |
| - onEnd: PropTypes.func, |
508 |
| - /** |
509 |
| - * Triggered as the `currentTime` of the video updates. It generally fires |
510 |
| - * every 250ms, but it may vary depending on the browser. |
511 |
| - */ |
512 |
| - onTimeUpdate: PropTypes.func, |
513 |
| - /** |
514 |
| - * Triggered as the video is loaded. Reports back the amount of the video |
515 |
| - * that has been buffered. |
516 |
| - */ |
517 |
| - onProgress: PropTypes.func, |
518 |
| - /** |
519 |
| - * Triggered when the player starts seeking to a specific time. An |
520 |
| - * `onTimeUpdate` event will also be fired at the same time. |
521 |
| - */ |
522 |
| - onSeeking: PropTypes.func, |
523 |
| - /** |
524 |
| - * Triggered when the player seeks to a specific time. An `onTimeUpdate` |
525 |
| - * event will also be fired at the same time. |
526 |
| - */ |
527 |
| - onSeeked: PropTypes.func, |
528 |
| - /** |
529 |
| - * Triggered when the active text track (captions/subtitles) changes. The |
530 |
| - * values will be `null` if text tracks are turned off. |
531 |
| - */ |
532 |
| - onTextTrackChange: PropTypes.func, |
533 |
| - /** |
534 |
| - * Triggered when the current chapter changes. |
535 |
| - */ |
536 |
| - onChapterChange: PropTypes.func, |
537 |
| - /** |
538 |
| - * Triggered when the active cue for the current text track changes. It also |
539 |
| - * fires when the active text track changes. There may be multiple cues |
540 |
| - * active. |
541 |
| - */ |
542 |
| - onCueChange: PropTypes.func, |
543 |
| - /** |
544 |
| - * Triggered when the current time hits a registered cue point. |
545 |
| - */ |
546 |
| - onCuePoint: PropTypes.func, |
547 |
| - /** |
548 |
| - * Triggered when the volume in the player changes. Some devices do not |
549 |
| - * support setting the volume of the video independently from the system |
550 |
| - * volume, so this event will never fire on those devices. |
551 |
| - */ |
552 |
| - onVolumeChange: PropTypes.func, |
553 |
| - /** |
554 |
| - * Triggered when the playback rate changes. |
555 |
| - */ |
556 |
| - onPlaybackRateChange: PropTypes.func, |
557 |
| - /** |
558 |
| - * Triggered when buffering starts in the player. |
559 |
| - * This is also triggered during preload and while seeking. |
560 |
| - */ |
561 |
| - onBufferStart: PropTypes.func, |
562 |
| - /** |
563 |
| - * Triggered when buffering ends in the player. |
564 |
| - * This is also triggered at the end of preload and seeking. |
565 |
| - */ |
566 |
| - onBufferEnd: PropTypes.func, |
567 |
| - /** |
568 |
| - * Triggered when a new video is loaded in the player. |
569 |
| - */ |
570 |
| - onLoaded: PropTypes.func, |
571 |
| - /** |
572 |
| - * Triggered when the duration attribute has been updated. |
573 |
| - */ |
574 |
| - onDurationChange: PropTypes.func, |
575 |
| - /** |
576 |
| - * Triggered when the player enters or exits fullscreen. |
577 |
| - */ |
578 |
| - onFullscreenChange: PropTypes.func, |
579 |
| - /** |
580 |
| - * Triggered when the set quality changes. |
581 |
| - */ |
582 |
| - onQualityChange: PropTypes.func, |
583 |
| - /** |
584 |
| - * Triggered when any of the camera properties change for 360° videos. |
585 |
| - */ |
586 |
| - onCameraChange: PropTypes.func, |
587 |
| - /** |
588 |
| - * Triggered when the intrinsic size of the media changes. |
589 |
| - */ |
590 |
| - onResize: PropTypes.func, |
591 |
| - /** |
592 |
| - * Triggered when the player enters picture-in-picture. |
593 |
| - */ |
594 |
| - onEnterPictureInPicture: PropTypes.func, |
595 |
| - /** |
596 |
| - * Triggered when the player leaves picture-in-picture. |
597 |
| - */ |
598 |
| - onLeavePictureInPicture: PropTypes.func, |
599 |
| - |
600 |
| - /* eslint-enable react/no-unused-prop-types */ |
601 |
| - }; |
602 |
| -} |
603 |
| - |
604 |
| -Vimeo.defaultProps = { |
605 |
| - autopause: true, |
606 |
| - autoplay: false, |
607 |
| - showByline: true, |
608 |
| - controls: true, |
609 |
| - loop: false, |
610 |
| - showPortrait: true, |
611 |
| - showTitle: true, |
612 |
| - muted: false, |
613 |
| - background: false, |
614 |
| - responsive: false, |
615 |
| - dnt: false, |
616 |
| - speed: false, |
617 |
| - keyboard: true, |
618 |
| - pip: false, |
619 |
| - playsInline: true, |
620 |
| - transparent: true, |
621 |
| -}; |
622 |
| - |
623 | 318 | export { useVimeo };
|
624 | 319 | export default Vimeo;
|
0 commit comments