CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/components/videos.tsx
Views: 687
1
import { Carousel } from "antd";

2
import { useState } from "react";

3
import { Icon } from "@cocalc/frontend/components/icon";

4
import { Paragraph } from "components/misc";

5
import A from "components/misc/A";

6


7
export interface Video {

8
  id: string;

9
  title: string;

10
}

11


12
export default function Videos({ videos }: { videos: Readonly<Video[]> }) {

13
  const [current, setCurrent] = useState<number>(0);

14
  let n = -1;

15
  return (

16
    <div style={{ margin: "0 auto", textAlign: "center" }}>

17
      <Paragraph>

18
        <Carousel afterChange={setCurrent}>

19
          {videos.map(({ id, title }) => {

20
            n += 1;

21
            return (

22
              <VideoItem

23
                key={id}

24
                id={id}

25
                number={n}

26
                current={current}

27
                title={title}

28
              />

29
            );

30
          })}

31
        </Carousel>

32
      </Paragraph>

33
    </div>

34
  );

35
}

36


37
export function VideoItem({

38
  id,

39
  title,

40
  number = 0,

41
  current = 0,

42
  style,

43
  width = 672,

44
}: {

45
  id: string;

46
  title?: string;

47
  number?: number;

48
  current?: number;

49
  style?;

50
  width?: number;

51
}) {

52
  return (

53
    <div style={style}>

54
      <div

55
        style={{

56
          background: "black",

57
          paddingBottom: "30px",

58
          paddingTop: "5px",

59
        }}

60
      >

61
        {title && (

62
          <A style={{ color: "white" }} href={`https://youtu.be/${id}`}>

63
            <Icon name="youtube" style={{ color: "red" }} /> {title}

64
          </A>

65
        )}

66
        <div style={{ textAlign: "center" }}>

67
          <iframe

68
            style={{ marginTop: "30px", maxWidth: "100%" }}

69
            width={width}

70
            height={(width * 9) / 16}

71
            src={`https://www.youtube.com/embed/${current == number ? id : ""}`}

72
            title="YouTube video player"

73
            frameBorder={0}

74
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

75
            allowFullScreen

76
          ></iframe>

77
        </div>

78
        <A

79
          style={{ color: "white", float: "right", marginRight: "10px" }}

80
          href="https://www.youtube.com/@cocalc-cloud"

81
        >

82
          <Icon name="youtube" style={{ color: "red" }} /> More Videos

83
        </A>

84
      </div>

85
    </div>

86
  );

87
}

88


89