vidstack/dist/server/media-community-skin.js

Build awesome media experiences on the web.

import 'maverick.js/ssr';
import { createContext, provideContext } from 'maverick.js';
import 'maverick.js/std';
import { defineElement, Component } from 'maverick.js/element';
import { P as Poster, B as BufferingIndicator, T as Tooltip, a as Thumbnail, b as PlayButton, M as MuteButton, c as PIPButton, F as FullscreenButton, C as CaptionButton, S as SeekButton, d as Slider, e as TimeSlider, V as VolumeSlider, f as SliderThumbnail, g as SliderValue, h as SliderVideo, i as Time, j as ToggleButton, L as LiveIndicator, k as Captions, G as Gesture, l as Menu, m as MenuButton, n as MenuItems, R as RadioGroup, o as Radio, A as AudioMenuButton, p as AudioMenuItems, q as CaptionsMenuButton, r as CaptionsMenuItems, s as ChaptersMenuItems, Q as QualityMenuButton, t as QualityMenuItems, u as PlaybackRateMenuButton, v as PlaybackRateMenuItems } from './media-ui.js';
import { u as useMedia } from './media-core.js';

function getUIComponents() {
  return [
    Poster,
    BufferingIndicator,
    Tooltip,
    Thumbnail,
    PlayButton,
    MuteButton,
    PIPButton,
    FullscreenButton,
    CaptionButton,
    SeekButton,
    Slider,
    TimeSlider,
    VolumeSlider,
    SliderThumbnail,
    SliderValue,
    SliderVideo,
    Time,
    ToggleButton,
    LiveIndicator,
    Captions,
    Gesture,
    Menu,
    MenuButton,
    MenuItems,
    RadioGroup,
    Radio,
    AudioMenuButton,
    AudioMenuItems,
    CaptionsMenuButton,
    CaptionsMenuItems,
    ChaptersMenuItems,
    QualityMenuButton,
    QualityMenuItems,
    PlaybackRateMenuButton,
    PlaybackRateMenuItems
  ];
}

const communitySkinContext = createContext();

class CommunitySkin extends Component {
  constructor(instance) {
    super(instance);
    this._media = useMedia();
    provideContext(communitySkinContext, {
      $props: this.$props,
      $media: this._media.$store
    });
  }
  /** We need this to compute and save the layout type to prevent unnecessary re-renders. */
  _getLayoutType() {
    const { viewType, streamType } = this._media.$store;
    return viewType() === "audio" ? streamType().includes("live") ? "audio:live" : "audio" : streamType().endsWith("live") ? "video:live" : "video";
  }
  onAttach() {
    this.setAttributes({
      "data-audio": this._isAudio.bind(this),
      "data-video": this._isVideo.bind(this),
      "data-mobile": this._isMobile.bind(this)
    });
  }
  _isAudio() {
    const { viewType } = this._media.$store;
    return viewType() === "audio";
  }
  _isVideo() {
    const { viewType } = this._media.$store;
    return viewType() !== "audio";
  }
  _isMobile() {
    const { breakpointX } = this._media.$store;
    return breakpointX() === "sm";
  }
  render() {
    return null;
  }
}
CommunitySkin.el = defineElement({
  tagName: "media-community-skin",
  nohydrate: true,
  props: {
    translations: null
  }
});
CommunitySkin.register = getUIComponents;

export { CommunitySkin as C };