View lecture functionality

First of all, we create a connection with the API through Axios at /ui/src/api/api_root.tsx.

import axios from "axios";

const api = axios.create({
  baseURL: `/api/v1/`,
});

export function getApiRoot() {
  return api;
}

The overall code for the UI can be found at /ui/src/routes/lecture.tsx.

The code below fetches the lectures from the API root.

const fetchLecture = async () => {
  try {
    ...
    const results = await getApiRoot().get(`/lectures/${lectureId}/`);
    setLecture(results.data);
    ...
  } catch (error) {
    setLecture({});
  }
};

useEffect(() => {
  fetchLecture();
}, [lectureId]);

View video lecture

It takes the type that is a video.

const isVideo = lecture.type && lecture.type.includes("video");

Then if it is a single video, it displays the following way:

{
isVideo && (
    <div className="video-window">
      <iframe
        title={lecture.title}
        src={`https://cds.cern.ch/video/${lectureId}?showTitle=true`}
        allowFullScreen
      />
    </div>
  );
}

View two-channel video

It takes the type that is a slide. This one needs the year and the indicoId in order to work. The year is taken from the date while the indicoId is taken from the Indico event of the lecture (event_details).

const isSlide = lecture.type && lecture.type.includes("slide");

let year = null;
let indicoId = null;

if (isSlide && lecture.date) {
  year = lecture.date.slice(0, 4);
}

if (isSlide && lecture.event_details) {
  indicoId = lecture.event_details.split("/")[4];
}

const displaySlidePlayer = year && indicoId;

Then if it is a two-channel video, it displays the following way:

{
  displaySlidePlayer && (
    <div className="video-window">
      <iframe
        title={lecture.title}
        src={`https://mediastream.cern.ch/MediaArchive/Video/Public2/weblecture-player/index.html?year=${year}&lecture=${indicoId}`}
        allowFullScreen
        scrolling="no"
        frameBorder="0"
      />
    </div>
  );
}

View non-video lecture

Note

Some lectures have neither videos nor files. Those only display the leftover metadata like date, title, speaker, description, if any.

View list of files

Checks if there are any files, then it displays the title to download files as well as the list of files.

{
  lecture.files && lecture.files.length > 0 && (
    <div className="files">
      <div className="download-title">
        <DownloadOutlined
          style={{
            color: "#fff",
            fontSize: "250%",
          }}
        />
        <Title level={2}>Download files:</Title>
      </div>

      <List
        itemLayout="horizontal"
        dataSource={lecture.files || []}
        split={false}
        renderItem={(item: string, index) => {
          return (
            <List.Item key={index}>
              {index + 1}.{" "}
              <a title={item} rel="noreferrer" target="_blank" href={item}>
                {filenameFromUrl(item)}
              </a>
            </List.Item>
          );
        }}
      />
    </div>
  );
}