You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AbstractEnterVideoLinkPrompt.js 2.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. // @flow
  2. import { Component } from 'react';
  3. import type { Dispatch } from 'redux';
  4. /**
  5. * The type of the React {@code Component} props of
  6. * {@link AbstractEnterVideoLinkPrompt}.
  7. */
  8. export type Props = {
  9. /**
  10. * Invoked to update the shared youtube video link.
  11. */
  12. dispatch: Dispatch<any>,
  13. /**
  14. * Function to be invoked after typing a valid youtube video .
  15. */
  16. onPostSubmit: ?Function
  17. };
  18. /**
  19. * Implements an abstract class for {@code EnterVideoLinkPrompt}.
  20. */
  21. export default class AbstractEnterVideoLinkPrompt<S: *> extends Component < Props, S > {
  22. /**
  23. * Instantiates a new component.
  24. *
  25. *
  26. * @inheritdoc
  27. */
  28. constructor(props: Props) {
  29. super(props);
  30. this._onSetVideoLink = this._onSetVideoLink.bind(this);
  31. }
  32. _onSetVideoLink: string => boolean;
  33. /**
  34. * Validates the entered video link by extractibg the id and dispatches it.
  35. *
  36. * It returns a boolean to comply the Dialog behaviour:
  37. * {@code true} - the dialog should be closed.
  38. * {@code false} - the dialog should be left open.
  39. *
  40. * @param {string} link - The entered video link.
  41. * @returns {boolean}
  42. */
  43. _onSetVideoLink(link) {
  44. if (!link || !link.trim()) {
  45. return false;
  46. }
  47. const videoId = getYoutubeLink(link);
  48. if (videoId) {
  49. const { onPostSubmit } = this.props;
  50. onPostSubmit && onPostSubmit(videoId);
  51. return true;
  52. }
  53. return false;
  54. }
  55. }
  56. /**
  57. * Validates the entered video url.
  58. *
  59. * It returns a boolean to reflect whether the url matches the youtube regex.
  60. *
  61. * @param {string} url - The entered video link.
  62. * @returns {boolean}
  63. */
  64. function getYoutubeLink(url) {
  65. const p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;// eslint-disable-line max-len
  66. const result = url.match(p);
  67. return result ? result[1] : false;
  68. }