← Mediator lesson
Lab

Mediator

Sign in to run your code

Read the brief and the starter here. With a free account you can edit it, run the sample, step through it and check your work, and your progress is kept.

// What a control can tell the window.
type CallEvent = { kind: 'camera-pressed' | 'share-started' | 'share-stopped' };

// The one thing a control should know: where to report.
interface CallMediator {
  notify(event: CallEvent): void;
}

class Banner {
  text = '-';
}

class Camera {
  on = true;
  // Turns itself on or off when the user presses it.
  press() {
    this.on = !this.on;
  }
}

// The share button changes the camera and the banner itself.
class ScreenShare {
  sharing = false;
  camera: Camera;
  banner: Banner;
  constructor(camera: Camera, banner: Banner) {
    this.camera = camera;
    this.banner = banner;
  }
  start() {
    this.sharing = true;
    this.camera.on = false;
    this.banner.text = 'presenting';
  }
  stop() {
    this.sharing = false;
    this.camera.on = true;
    this.banner.text = '-';
  }
}

class CallWindow implements CallMediator {
  camera = new Camera();
  banner = new Banner();
  share = new ScreenShare(this.camera, this.banner);

  // What happens to the window: a click on a control, or a message from
  // the meeting (the host can stop your share).
  input(what: string) {
    if (what === 'camera') this.camera.press();
    else if (what === 'share') this.share.start();
    else if (what === 'stop') this.share.stop();
    else if (what === 'host-stop') this.notify({ kind: 'share-stopped' });
  }

  notify(event: CallEvent) {
    if (event.kind === 'share-stopped') this.share.sharing = false;
  }
}