revealjs-react/src/components/video.js at master · blakeanedved/revealjs-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import React from 'react';

const formatMap = {
  '3gp': 'video/3gpp',
  mpg: 'audio/mpeg',
  mpeg: 'audio/mpeg',
  mp4: 'video/mp4',
  m4a: 'video/mp4',
  m4p: 'video/mp4',
  ogv: 'video/ogg',
  ogg: 'video/ogg',
  mov: 'video/quicktime',
  webm: 'video/webm',
};

function Video({
  id = undefined,
  autoplay = undefined,
  className = undefined,
  controls = undefined,
  fragment = false,
  fragmentStyle = undefined,
  fragmentIndex = undefined,
  height = undefined,
  lazy = undefined,
  loop = undefined,
  muted = undefined,
  preload = undefined,
  width = undefined,
  src,
}) {
  if (typeof src === 'object') {
    return (
      <video
        data-id={id}
        id={id}
        className={
          className +
          (fragment ? ' fragment' : '') +
          (fragmentStyle ? ` ${fragmentStyle}` : '')
        }
        data-autoplay={autoplay}
        controls={controls}
        muted={muted}
        loop={loop}
        height={height}
        width={width}
        data-fragment-index={fragmentIndex}
      >
        {src.forEach((element) => (
          <source
            src={lazy ? false : element}
            data-src={lazy ? element : false}
            data-preload={preload}
            type={formatMap[/\.[^.]+$/.exec(element)]}
          />
        ))}
      </video>
    );
  }

  return (
    <video
      data-id={id}
      id={id}
      className={
        className +
        (fragment ? ' fragment' : '') +
        (fragmentStyle ? ` ${fragmentStyle}` : '')
      }
      data-autoplay={autoplay}
      src={lazy ? false : src}
      data-src={lazy ? src : false}
      data-preload={preload}
      controls={controls}
      muted={muted}
      loop={loop}
      height={height}
      width={width}
      data-fragment-index={fragmentIndex}
    />
  );
}

export default Video;