casibase/web/src/RoomPage.js

// Copyright 2022 The casbin Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import React from "react";
import {Col, Row} from "antd";
import * as RoomBackend from "./backend/RoomBackend";
import * as Setting from "./Setting";
import Video from "./Video";
import i18next from "i18next";
import * as Conf from "./Conf";

class RoomPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      classes: props,
      userName: props.match?.params.userName,
      roomName: props.match?.params.roomName,
      slotName: props.match?.params.slotName,
      room: null,
    };
  }

  UNSAFE_componentWillMount() {
    this.getRoom();
    if (this.state.slotName === undefined) {
      this.incrementRoomViewer();
    }
  }

  getRoom() {
    RoomBackend.getRoom(this.state.userName, this.state.roomName)
      .then((room) => {
        this.setState({
          room: room,
        });
      });
  }

  incrementRoomViewer() {
    RoomBackend.incrementRoomViewer(this.state.userName, this.state.roomName)
      .then((res) => {
        if (!res) {
          Setting.showMessage("error", "Room failed to increment viewer");
        }
      });
  }

  getPropsOrStateRoom() {
    return this.props.room !== undefined ? this.props.room : this.state.room;
  }

  getSlot(room) {
    if (this.state.slotName === undefined) {
      return null;
    } else {
      return room.slots[this.state.slotName];
    }
  }

  getRoomTitle(room) {
    let type;
    if (room.isLive) {
      type = i18next.t("room:Live");
      const viewers = i18next.t("room:viewers");
      return `${Setting.getLanguageText(room.displayName)} (${type}, ${viewers}: ${room.viewerCount})`;
    } else if (room.videoUrl !== "") {
      type = i18next.t("room:Playback");
    } else if (this.state.slotName !== undefined) {
      const slot = this.getSlot(room);
      if (slot !== null && slot.videoUrl !== "") {
        type = i18next.t("room:Playback");
      } else {
        type = i18next.t("room:No Content");
      }
      return `${slot.title} (${type})`;
    } else {
      type = i18next.t("room:No Content");
    }

    return `${Setting.getLanguageText(room.displayName)} (${type})`;
  }

  getRoomSubtitle(room) {
    if (this.state.slotName !== undefined) {
      const slot = this.getSlot(room);
      return (
        <React.Fragment>
          <div>
            {slot.speaker}
          </div>
          <div>
            {slot.date}&nbsp;&nbsp;&nbsp;&nbsp;{`${slot.startTime}-${slot.endTime}`}
          </div>
        </React.Fragment>
      );
    } else {
      return null;
    }
  }

  renderVideo(room) {
    return (
      <div style={{marginTop: "10px", textAlign: "center"}}>
        <div style={{fontSize: 30, marginBottom: "20px"}}>
          {
            this.getRoomTitle(room)
          }
        </div>
        <div style={{fontSize: 18, marginBottom: "20px"}}>
          {
            this.getRoomSubtitle(room)
          }
        </div>
        <Video room={room} slot={this.getSlot(room)} />
      </div>
    );
  }

  renderComments() {
    if (this.state.room === null) {
      return null;
    }

    const nodeId = `comments-${Conf.DefaultConferenceName}`;
    let title = encodeURIComponent(`Comments - ${this.state.room.displayName}`);
    if (this.state.slotName !== undefined) {
      title += ` - ${this.state.slotName}`;
    }
    const author = (this.props.account === null) ? "admin" : this.props.account.name;
    const urlPath = encodeURIComponent(`|comment|${this.state.room.displayName}`);

    let accessToken;
    if (this.props.account === null) {
      // Confita is signed out, also sign out Casnode.
      accessToken = "signout";
    } else {
      accessToken = this.props.account.accessToken;
    }

    const width = !Setting.isMobile() ? `${this.state.room.videoWidth}px` : "100%";

    return (
      <iframe
        key={title}
        title={title}
        style={{border: "1px solid rgb(232,232,232)", width: width, height: "100vh"}}
        src={`${Conf.CasnodeEndpoint}/embedded-replies?nodeId=${nodeId}&title=${title}&author=${author}&urlPath=${urlPath}&accessToken=${accessToken}`}
      />
    );
  }

  render() {
    const room = this.getPropsOrStateRoom();
    if (room === null) {
      return null;
    }

    return (
      <div>
        <Row style={{width: "100%"}}>
          <Col span={!Setting.isMobile() ? 1 : 0}>
          </Col>
          <Col span={!Setting.isMobile() ? 22 : 24}>
            {
              this.renderVideo(room)
            }
            <div style={{marginTop: "20px", textAlign: "center"}}>
              {
                this.renderComments()
              }
            </div>
          </Col>
          <Col span={!Setting.isMobile() ? 1 : 0}>
          </Col>
        </Row>
      </div>
    );
  }
}

export default RoomPage;