vidstack/dist/server/providers/video/picture-in-picture.js

Build awesome media experiences on the web.

import { listenEvent } from 'maverick.js/std';
import { W as canUsePictureInPicture } from '../../media-core.js';

class VideoPictureInPicture {
  constructor(_video, _media) {
    this._video = _video;
    this._media = _media;
    this._onChange = (active, event) => {
      this._media.delegate._dispatch("picture-in-picture-change", {
        detail: active,
        trigger: event
      });
    };
    listenEvent(this._video, "enterpictureinpicture", this._onEnter.bind(this));
    listenEvent(this._video, "leavepictureinpicture", this._onExit.bind(this));
  }
  get active() {
    return document.pictureInPictureElement === this._video;
  }
  get supported() {
    return canUsePictureInPicture(this._video);
  }
  async enter() {
    return this._video.requestPictureInPicture();
  }
  exit() {
    return document.exitPictureInPicture();
  }
  _onEnter(event) {
    this._onChange(true, event);
  }
  _onExit(event) {
    this._onChange(false, event);
  }
}

export { VideoPictureInPicture as V };