vidstack
Version:
Build awesome media experiences on the web.
418 lines (406 loc) • 30.4 kB
JavaScript
import { createContext, useContext, signal, computed, effect, provideContext } from 'maverick.js';
import { Component, defineElement } from 'maverick.js/element';
import { P as Poster, B as BufferingIndicator, T as Tooltip, a as Thumbnail, b as PlayButton$1, M as MuteButton$1, c as PIPButton, F as FullscreenButton$1, C as CaptionButton$1, S as SeekButton$1, d as Slider, e as TimeSlider$1, V as VolumeSlider$1, 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';
import { $$_clone, $$_attr, $$_scoped, $$_insert_lite, $$_setup_custom_element, $$_create_component, $$_create_template } from 'maverick.js/dom';
import { listenEvent } from 'maverick.js/std';
import { I as Icon } from './icons/icon.js';
function getUIComponents() {
return [
Poster,
BufferingIndicator,
Tooltip,
Thumbnail,
PlayButton$1,
MuteButton$1,
PIPButton,
FullscreenButton$1,
CaptionButton$1,
SeekButton$1,
Slider,
TimeSlider$1,
VolumeSlider$1,
SliderThumbnail,
SliderValue,
SliderVideo,
Time,
ToggleButton,
LiveIndicator,
Captions,
Gesture,
Menu,
MenuButton,
MenuItems,
RadioGroup,
Radio,
AudioMenuButton,
AudioMenuItems,
CaptionsMenuButton,
CaptionsMenuItems,
ChaptersMenuItems,
QualityMenuButton,
QualityMenuItems,
PlaybackRateMenuButton,
PlaybackRateMenuItems
];
}
var Icon$15 = `<path d="M16.6927 25.3346C16.3245 25.3346 16.026 25.0361 16.026 24.6679L16.026 7.3346C16.026 6.96641 16.3245 6.66794 16.6927 6.66794L18.6927 6.66794C19.0609 6.66794 19.3594 6.96642 19.3594 7.3346L19.3594 24.6679C19.3594 25.0361 19.0609 25.3346 18.6927 25.3346H16.6927Z" fill="currentColor"/> <path d="M24.026 25.3346C23.6578 25.3346 23.3594 25.0361 23.3594 24.6679L23.3594 7.3346C23.3594 6.96641 23.6578 6.66794 24.026 6.66794L26.026 6.66794C26.3942 6.66794 26.6927 6.96642 26.6927 7.3346V24.6679C26.6927 25.0361 26.3942 25.3346 26.026 25.3346H24.026Z" fill="currentColor"/> <path d="M5.48113 23.9407C5.38584 24.2963 5.59689 24.6619 5.95254 24.7572L7.88439 25.2748C8.24003 25.3701 8.60559 25.159 8.70089 24.8034L13.1871 8.06067C13.2824 7.70503 13.0713 7.33947 12.7157 7.24417L10.7838 6.72654C10.4282 6.63124 10.0626 6.8423 9.96733 7.19794L5.48113 23.9407Z" fill="currentColor"/>`;
var Icon$74 = `<path d="M16.6667 10.3452C16.6667 10.8924 16.0439 11.2066 15.6038 10.8814L11.0766 7.5364C10.7159 7.26993 10.7159 6.73054 11.0766 6.46405L15.6038 3.11873C16.0439 2.79356 16.6667 3.10773 16.6667 3.6549V5.22682C16.6667 5.29746 16.7223 5.35579 16.7927 5.36066C22.6821 5.76757 27.3333 10.674 27.3333 16.6667C27.3333 22.9259 22.2592 28 16 28C9.96483 28 5.03145 23.2827 4.68601 17.3341C4.66466 16.9665 4.96518 16.6673 5.33339 16.6673H7.3334C7.70157 16.6673 7.99714 16.9668 8.02743 17.3337C8.36638 21.4399 11.8064 24.6667 16 24.6667C20.4183 24.6667 24 21.085 24 16.6667C24 12.5225 20.8483 9.11428 16.8113 8.70739C16.7337 8.69957 16.6667 8.76096 16.6667 8.83893V10.3452Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.0879 19.679C17.4553 19.9195 17.8928 20.0398 18.4004 20.0398C18.9099 20.0398 19.3474 19.9205 19.7129 19.6818C20.0803 19.4413 20.3635 19.0938 20.5623 18.6392C20.7612 18.1847 20.8606 17.6373 20.8606 16.9972C20.8625 16.3608 20.764 15.8192 20.5652 15.3722C20.3663 14.9252 20.0822 14.5853 19.7129 14.3523C19.3455 14.1175 18.908 14 18.4004 14C17.8928 14 17.4553 14.1175 17.0879 14.3523C16.7224 14.5853 16.4402 14.9252 16.2413 15.3722C16.0443 15.8173 15.9449 16.3589 15.943 16.9972C15.9411 17.6354 16.0396 18.1818 16.2385 18.6364C16.4373 19.089 16.7205 19.4366 17.0879 19.679ZM19.1362 18.4262C18.9487 18.7349 18.7034 18.8892 18.4004 18.8892C18.1996 18.8892 18.0226 18.8211 17.8691 18.6847C17.7157 18.5464 17.5964 18.3372 17.5112 18.0568C17.4279 17.7765 17.3871 17.4233 17.389 16.9972C17.3909 16.3684 17.4847 15.9025 17.6703 15.5995C17.8559 15.2945 18.0993 15.1421 18.4004 15.1421C18.603 15.1421 18.7801 15.2093 18.9316 15.3438C19.0832 15.4782 19.2015 15.6828 19.2868 15.9574C19.372 16.2301 19.4146 16.5767 19.4146 16.9972C19.4165 17.6392 19.3237 18.1156 19.1362 18.4262Z" fill="currentColor"/> <path d="M13.7746 19.8978C13.8482 19.8978 13.9079 19.8381 13.9079 19.7644V14.2129C13.9079 14.1393 13.8482 14.0796 13.7746 14.0796H12.642C12.6171 14.0796 12.5927 14.0865 12.5716 14.0997L11.2322 14.9325C11.1931 14.9568 11.1693 14.9996 11.1693 15.0457V15.9497C11.1693 16.0539 11.2833 16.1178 11.3722 16.0635L12.464 15.396C12.4682 15.3934 12.473 15.3921 12.4779 15.3921C12.4926 15.3921 12.5045 15.404 12.5045 15.4187V19.7644C12.5045 19.8381 12.5642 19.8978 12.6378 19.8978H13.7746Z" fill="currentColor"/>`;
var Icon$78 = `<path d="M15.3333 10.3452C15.3333 10.8924 15.9561 11.2066 16.3962 10.8814L20.9234 7.5364C21.2841 7.26993 21.2841 6.73054 20.9235 6.46405L16.3962 3.11873C15.9561 2.79356 15.3333 3.10773 15.3333 3.6549V5.22682C15.3333 5.29746 15.2778 5.35579 15.2073 5.36066C9.31791 5.76757 4.66667 10.674 4.66667 16.6667C4.66667 22.9259 9.74078 28 16 28C22.0352 28 26.9686 23.2827 27.314 17.3341C27.3354 16.9665 27.0348 16.6673 26.6666 16.6673H24.6666C24.2984 16.6673 24.0029 16.9668 23.9726 17.3337C23.6336 21.4399 20.1937 24.6667 16 24.6667C11.5817 24.6667 8 21.085 8 16.6667C8 12.5225 11.1517 9.11428 15.1887 8.70739C15.2663 8.69957 15.3333 8.76096 15.3333 8.83893V10.3452Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.0879 19.679C17.4553 19.9195 17.8928 20.0398 18.4004 20.0398C18.9099 20.0398 19.3474 19.9205 19.7129 19.6818C20.0803 19.4413 20.3635 19.0938 20.5623 18.6392C20.7612 18.1847 20.8606 17.6373 20.8606 16.9972C20.8625 16.3608 20.764 15.8192 20.5652 15.3722C20.3663 14.9252 20.0822 14.5853 19.7129 14.3523C19.3455 14.1175 18.908 14 18.4004 14C17.8928 14 17.4553 14.1175 17.0879 14.3523C16.7224 14.5853 16.4402 14.9252 16.2413 15.3722C16.0443 15.8173 15.9449 16.3589 15.943 16.9972C15.9411 17.6354 16.0396 18.1818 16.2385 18.6364C16.4373 19.089 16.7205 19.4366 17.0879 19.679ZM19.1362 18.4262C18.9487 18.7349 18.7034 18.8892 18.4004 18.8892C18.1996 18.8892 18.0225 18.8211 17.8691 18.6847C17.7157 18.5464 17.5964 18.3372 17.5112 18.0568C17.4278 17.7765 17.3871 17.4233 17.389 16.9972C17.3909 16.3684 17.4847 15.9025 17.6703 15.5995C17.8559 15.2945 18.0992 15.1421 18.4004 15.1421C18.603 15.1421 18.7801 15.2093 18.9316 15.3438C19.0831 15.4782 19.2015 15.6828 19.2867 15.9574C19.372 16.2301 19.4146 16.5767 19.4146 16.9972C19.4165 17.6392 19.3237 18.1156 19.1362 18.4262Z" fill="currentColor"/> <path d="M13.7746 19.8978C13.8482 19.8978 13.9079 19.8381 13.9079 19.7644V14.2129C13.9079 14.1393 13.8482 14.0796 13.7746 14.0796H12.642C12.6171 14.0796 12.5927 14.0865 12.5716 14.0997L11.2322 14.9325C11.1931 14.9568 11.1693 14.9996 11.1693 15.0457V15.9497C11.1693 16.0539 11.2833 16.1178 11.3722 16.0635L12.464 15.396C12.4682 15.3934 12.473 15.3921 12.4779 15.3921C12.4926 15.3921 12.5045 15.404 12.5045 15.4187V19.7644C12.5045 19.8381 12.5642 19.8978 12.6378 19.8978H13.7746Z" fill="currentColor"/>`;
var Icon$85 = `<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5722 5.33333C13.2429 5.33333 12.9629 5.57382 12.9132 5.89938L12.4063 9.21916C12.4 9.26058 12.3746 9.29655 12.3378 9.31672C12.2387 9.37118 12.1409 9.42779 12.0444 9.48648C12.0086 9.5083 11.9646 9.51242 11.9255 9.49718L8.79572 8.27692C8.48896 8.15732 8.14083 8.27958 7.9762 8.56472L5.5491 12.7686C5.38444 13.0538 5.45271 13.4165 5.70981 13.6223L8.33308 15.7225C8.3658 15.7487 8.38422 15.7887 8.38331 15.8306C8.38209 15.8867 8.38148 15.9429 8.38148 15.9993C8.38148 16.0558 8.3821 16.1121 8.38332 16.1684C8.38423 16.2102 8.36582 16.2503 8.33313 16.2765L5.7103 18.3778C5.45334 18.5836 5.38515 18.9462 5.54978 19.2314L7.97688 23.4352C8.14155 23.7205 8.48981 23.8427 8.79661 23.723L11.926 22.5016C11.9651 22.4864 12.009 22.4905 12.0449 22.5123C12.1412 22.5709 12.2388 22.6274 12.3378 22.6818C12.3745 22.7019 12.4 22.7379 12.4063 22.7793L12.9132 26.0993C12.9629 26.4249 13.2429 26.6654 13.5722 26.6654H18.4264C18.7556 26.6654 19.0356 26.425 19.0854 26.0995L19.5933 22.7801C19.5997 22.7386 19.6252 22.7027 19.6619 22.6825C19.7614 22.6279 19.8596 22.5711 19.9564 22.5121C19.9923 22.4903 20.0362 22.4862 20.0754 22.5015L23.2035 23.7223C23.5103 23.842 23.8585 23.7198 24.0232 23.4346L26.4503 19.2307C26.6149 18.9456 26.5467 18.583 26.2898 18.3771L23.6679 16.2766C23.6352 16.2504 23.6168 16.2104 23.6177 16.1685C23.619 16.1122 23.6196 16.0558 23.6196 15.9993C23.6196 15.9429 23.619 15.8866 23.6177 15.8305C23.6168 15.7886 23.6353 15.7486 23.668 15.7224L26.2903 13.623C26.5474 13.4172 26.6156 13.0544 26.451 12.7692L24.0239 8.56537C23.8592 8.28023 23.5111 8.15797 23.2043 8.27757L20.0758 9.49734C20.0367 9.51258 19.9927 9.50846 19.9569 9.48664C19.8599 9.42762 19.7616 9.37071 19.6618 9.31596C19.6251 9.2958 19.5997 9.25984 19.5933 9.21843L19.0854 5.89915C19.0356 5.57369 18.7556 5.33333 18.4264 5.33333H13.5722ZM16.0001 20.2854C18.3672 20.2854 20.2862 18.3664 20.2862 15.9993C20.2862 13.6322 18.3672 11.7132 16.0001 11.7132C13.6329 11.7132 11.714 13.6322 11.714 15.9993C11.714 18.3664 13.6329 20.2854 16.0001 20.2854Z" fill="currentColor"/>`;
function i18n(translations, key) {
return translations()?.[key] ?? key;
}
const communitySkinContext = createContext();
function useCommunitySkin() {
return useContext(communitySkinContext);
}
function useCommunitySkinI18n() {
return useCommunitySkin().$props.translations;
}
const $$_templ$2 = /* @__PURE__ */ $$_create_template(`<media-play-button default-appearance="" mk-d><media-tooltip mk-d><span slot="play"></span><span slot="pause"></span></media-tooltip></media-play-button>`), $$_templ_2$2 = /* @__PURE__ */ $$_create_template(`<media-mute-button default-appearance="" mk-d><media-tooltip mk-d><span slot="mute"></span><span slot="unmute"></span></media-tooltip></media-mute-button>`), $$_templ_3 = /* @__PURE__ */ $$_create_template(`<media-caption-button default-appearance="" mk-d><media-tooltip mk-d><span slot="on"></span><span slot="off"></span></media-tooltip></media-caption-button>`), $$_templ_4 = /* @__PURE__ */ $$_create_template(`<media-pip-button default-appearance="" mk-d><media-tooltip mk-d><span slot="enter"></span><span slot="exit"></span></media-tooltip></media-pip-button>`), $$_templ_5 = /* @__PURE__ */ $$_create_template(`<media-fullscreen-button default-appearance="" mk-d><media-tooltip position="top right" mk-d><span slot="enter"></span><span slot="exit"></span></media-tooltip></media-fullscreen-button>`), $$_templ_6 = /* @__PURE__ */ $$_create_template(`<media-seek-button mk-d><media-tooltip mk-d><span></span></media-tooltip></media-seek-button>`), $$_templ_7 = /* @__PURE__ */ $$_create_template(`<media-volume-slider mk-d><media-slider-value type="pointer" format="percent" slot="preview" mk-d></media-slider-value></media-volume-slider>`), $$_templ_8 = /* @__PURE__ */ $$_create_template(`<span part="main-title"></span>`), $$_templ_9 = $$_templ_8, $$_templ_10 = /* @__PURE__ */ $$_create_template(`<media-menu part="chapters-menu" mk-d><media-menu-button mk-d><media-tooltip mk-d></media-tooltip></media-menu-button><media-chapters-menu-items mk-d></media-chapters-menu-items></media-menu>`), $$_templ_11 = /* @__PURE__ */ $$_create_template(`<media-menu part="settings-menu" mk-d><media-menu-button mk-d><media-tooltip mk-d></media-tooltip></media-menu-button><media-menu-items mk-d><media-menu mk-d><media-audio-menu-button mk-d></media-audio-menu-button><media-audio-menu-items mk-d></media-audio-menu-items></media-menu><media-menu mk-d><media-playback-rate-menu-button mk-d></media-playback-rate-menu-button><media-playback-rate-menu-items mk-d></media-playback-rate-menu-items></media-menu><media-menu mk-d><media-quality-menu-button mk-d></media-quality-menu-button><media-quality-menu-items mk-d></media-quality-menu-items></media-menu><media-menu mk-d><media-captions-menu-button mk-d></media-captions-menu-button><media-captions-menu-items mk-d></media-captions-menu-items></media-menu></media-menu-items></media-menu>`), $$_templ_12 = /* @__PURE__ */ $$_create_template(`<div part="gestures"><media-gesture event="pointerup" action="toggle:paused" mk-d></media-gesture><media-gesture event="pointerup" action="toggle:user-idle" mk-d></media-gesture><media-gesture event="dblpointerup" action="toggle:fullscreen" mk-d></media-gesture><media-gesture event="dblpointerup" action="seek:-10" mk-d></media-gesture><media-gesture event="dblpointerup" action="seek:10" mk-d></media-gesture></div>`), $$_templ_13 = /* @__PURE__ */ $$_create_template(`<media-time-slider mk-d><div slot="preview"><media-slider-thumbnail mk-d></media-slider-thumbnail><div part="chapter-title"></div><media-slider-value type="pointer" format="time" mk-d></media-slider-value></div></media-time-slider>`), $$_templ_14 = /* @__PURE__ */ $$_create_template(`<div part="time-group"><media-time type="current" mk-d></media-time><div part="time-divider">/</div><media-time type="duration" mk-d></media-time></div>`);
function PlayButton({
part,
tooltip = "top left"
}) {
const lang = useCommunitySkinI18n();
return (() => {
const $$_root = $$_clone($$_templ$2), $$_el = $$_root.firstChild, $$_el_2 = $$_el.firstChild, $$_el_3 = $$_el_2.nextSibling;
$$_attr($$_root, "part", part);
$$_scoped(() => {
$$_attr($$_el, "position", tooltip);
$$_scoped(() => {
$$_insert_lite($$_el_2, () => i18n(lang, "Play"));
$$_insert_lite($$_el_3, () => i18n(lang, "Pause"));
}, $$_setup_custom_element($$_el));
}, $$_setup_custom_element($$_root));
return $$_root;
})();
}
function MuteButton({ tooltip = "top center" }) {
const lang = useCommunitySkinI18n();
return (() => {
const $$_root = $$_clone($$_templ_2$2), $$_el = $$_root.firstChild, $$_el_2 = $$_el.firstChild, $$_el_3 = $$_el_2.nextSibling;
$$_scoped(() => {
$$_attr($$_el, "position", tooltip);
$$_scoped(() => {
$$_insert_lite($$_el_2, () => i18n(lang, "Mute"));
$$_insert_lite($$_el_3, () => i18n(lang, "Unmute"));
}, $$_setup_custom_element($$_el));
}, $$_setup_custom_element($$_root));
return $$_root;
})();
}
function CaptionButton({ tooltip = "top center" }) {
const lang = useCommunitySkinI18n();
return (() => {
const $$_root = $$_clone($$_templ_3), $$_el = $$_root.firstChild, $$_el_2 = $$_el.firstChild, $$_el_3 = $$_el_2.nextSibling;
$$_scoped(() => {
$$_attr($$_el, "position", tooltip);
$$_scoped(() => {
$$_insert_lite($$_el_2, () => i18n(lang, "Closed-Captions On"));
$$_insert_lite($$_el_3, () => i18n(lang, "Closed-Captions Off"));
}, $$_setup_custom_element($$_el));
}, $$_setup_custom_element($$_root));
return $$_root;
})();
}
function PiPButton() {
const lang = useCommunitySkinI18n();
return (() => {
const $$_root = $$_clone($$_templ_4), $$_el = $$_root.firstChild, $$_el_2 = $$_el.firstChild, $$_el_3 = $$_el_2.nextSibling;
$$_scoped(() => {
$$_scoped(() => {
$$_insert_lite($$_el_2, () => i18n(lang, "Enter PiP"));
$$_insert_lite($$_el_3, () => i18n(lang, "Exit PiP"));
}, $$_setup_custom_element($$_el));
}, $$_setup_custom_element($$_root));
return $$_root;
})();
}
function FullscreenButton() {
const lang = useCommunitySkinI18n();
return (() => {
const $$_root = $$_clone($$_templ_5), $$_el = $$_root.firstChild, $$_el_2 = $$_el.firstChild, $$_el_3 = $$_el_2.nextSibling;
$$_scoped(() => {
$$_scoped(() => {
$$_insert_lite($$_el_2, () => i18n(lang, "Enter Fullscreen"));
$$_insert_lite($$_el_3, () => i18n(lang, "Exit Fullscreen"));
}, $$_setup_custom_element($$_el));
}, $$_setup_custom_element($$_root));
return $$_root;
})();
}
function SeekButton({
seconds,
tooltip = "top center"
}) {
const lang = useCommunitySkinI18n();
return (() => {
const $$_root = $$_clone($$_templ_6), $$_el = $$_root.firstChild, $$_el_2 = $$_el.firstChild;
$$_attr($$_root, "seconds", seconds);
$$_scoped(() => {
$$_insert_lite(
$$_root,
$$_create_component(Icon, { paths: seconds >= 0 ? Icon$78 : Icon$74 }),
$$_el
);
$$_attr($$_el, "position", tooltip);
$$_scoped(() => {
$$_insert_lite($$_el_2, () => i18n(lang, seconds >= 0 ? "Seek Forward" : "Seek Backward"));
}, $$_setup_custom_element($$_el));
}, $$_setup_custom_element($$_root));
return $$_root;
})();
}
function VolumeSlider() {
return (() => {
const $$_root = $$_clone($$_templ_7), $$_el = $$_root.firstChild;
$$_scoped(() => {
$$_setup_custom_element($$_el);
}, $$_setup_custom_element($$_root));
return $$_root;
})();
}
function ChapterTitleOrMainTitle() {
const {
$media: { title, textTracks, started }
} = useCommunitySkin();
const chapterTitle = signal(""), mainTitle = computed(() => started() ? chapterTitle() || title() : title());
effect(() => {
const track = textTracks().find(
(track2) => track2.kind === "chapters" && track2.mode === "showing"
);
track && listenEvent(track, "cue-change", () => {
chapterTitle.set(track.activeCues[0]?.text || "");
});
return () => chapterTitle.set("");
});
return (() => {
const $$_root = $$_clone($$_templ_9);
$$_insert_lite($$_root, mainTitle);
return $$_root;
})();
}
function ChaptersMenu({
position = "bottom",
tooltip = "bottom center"
}) {
const lang = useCommunitySkinI18n();
return (() => {
const $$_root = $$_clone($$_templ_10), $$_el = $$_root.firstChild, $$_el_2 = $$_el.firstChild, $$_el_3 = $$_el.nextSibling;
$$_attr($$_root, "position", position);
$$_scoped(() => {
$$_scoped(() => {
$$_insert_lite($$_el, $$_create_component(Icon, { paths: Icon$15 }), $$_el_2);
$$_attr($$_el_2, "position", tooltip);
$$_scoped(() => {
$$_insert_lite($$_el_2, () => i18n(lang, "Chapters"));
}, $$_setup_custom_element($$_el_2));
}, $$_setup_custom_element($$_el));
$$_setup_custom_element($$_el_3);
}, $$_setup_custom_element($$_root));
return $$_root;
})();
}
function SettingsMenu({
position = "bottom",
tooltip = "bottom right"
}) {
const lang = useCommunitySkinI18n();
return (() => {
const $$_root = $$_clone($$_templ_11), $$_el = $$_root.firstChild, $$_el_2 = $$_el.firstChild, $$_el_3 = $$_el.nextSibling, $$_el_4 = $$_el_3.firstChild, $$_el_5 = $$_el_4.firstChild, $$_el_6 = $$_el_5.nextSibling, $$_el_7 = $$_el_4.nextSibling, $$_el_8 = $$_el_7.firstChild, $$_el_9 = $$_el_8.nextSibling, $$_el_10 = $$_el_7.nextSibling, $$_el_11 = $$_el_10.firstChild, $$_el_12 = $$_el_11.nextSibling, $$_el_13 = $$_el_10.nextSibling, $$_el_14 = $$_el_13.firstChild, $$_el_15 = $$_el_14.nextSibling;
$$_attr($$_root, "position", position);
$$_scoped(() => {
$$_scoped(() => {
$$_insert_lite($$_el, $$_create_component(Icon, { paths: Icon$85, rotate: true }), $$_el_2);
$$_attr($$_el_2, "position", tooltip);
$$_scoped(() => {
$$_insert_lite($$_el_2, () => i18n(lang, "Settings"));
}, $$_setup_custom_element($$_el_2));
}, $$_setup_custom_element($$_el));
$$_scoped(() => {
$$_scoped(() => {
$$_setup_custom_element($$_el_5, { label: () => i18n(lang, "Audio") });
$$_setup_custom_element($$_el_6, { emptyLabel: () => i18n(lang, "Default") });
}, $$_setup_custom_element($$_el_4));
$$_scoped(() => {
$$_setup_custom_element($$_el_8, { label: () => i18n(lang, "Speed") });
$$_setup_custom_element($$_el_9, { normalLabel: () => i18n(lang, "Normal") });
}, $$_setup_custom_element($$_el_7));
$$_scoped(() => {
$$_setup_custom_element($$_el_11, { label: () => i18n(lang, "Quality") });
$$_setup_custom_element($$_el_12, { autoLabel: () => i18n(lang, "Auto") });
}, $$_setup_custom_element($$_el_10));
$$_scoped(() => {
$$_setup_custom_element($$_el_14, { label: () => i18n(lang, "Captions") });
$$_setup_custom_element($$_el_15, { offLabel: () => i18n(lang, "Off") });
}, $$_setup_custom_element($$_el_13));
}, $$_setup_custom_element($$_el_3));
}, $$_setup_custom_element($$_root));
return $$_root;
})();
}
function VideoGestures() {
return (() => {
const $$_root = $$_clone($$_templ_12), $$_el = $$_root.firstChild, $$_el_2 = $$_el.nextSibling, $$_el_3 = $$_el_2.nextSibling, $$_el_4 = $$_el_3.nextSibling, $$_el_5 = $$_el_4.nextSibling;
$$_setup_custom_element($$_el);
$$_setup_custom_element($$_el_2);
$$_setup_custom_element($$_el_3);
$$_setup_custom_element($$_el_4);
$$_setup_custom_element($$_el_5);
return $$_root;
})();
}
function TimeSlider() {
return (() => {
const $$_root = $$_clone($$_templ_13), $$_el = $$_root.firstChild, $$_el_2 = $$_el.firstChild, $$_el_3 = $$_el_2.nextSibling, $$_el_4 = $$_el_3.nextSibling;
$$_scoped(() => {
$$_setup_custom_element($$_el_2);
$$_setup_custom_element($$_el_4);
}, $$_setup_custom_element($$_root));
return $$_root;
})();
}
function TimeGroup() {
return (() => {
const $$_root = $$_clone($$_templ_14), $$_el = $$_root.firstChild, $$_el_2 = $$_el.nextSibling, $$_el_3 = $$_el_2.nextSibling;
$$_setup_custom_element($$_el);
$$_setup_custom_element($$_el_3);
return $$_root;
})();
}
const $$_templ$1 = /* @__PURE__ */ $$_create_template(`<div part="media-ui aod live:dvr mobile"><media-captions mk-d></media-captions><div part="controls"><div part="controls-group"></div><div part="controls-group"></div><div part="controls-group"><media-time type="current" mk-d></media-time><div part="controls-spacer"></div><media-time type="duration" mk-d></media-time></div><div part="controls-group"><div part="controls-spacer"></div><div part="controls-spacer"></div></div></div></div>`), $$_templ_2$1 = /* @__PURE__ */ $$_create_template(`<div part="media-ui aod live:dvr desktop"><media-captions mk-d></media-captions><div part="controls"><div part="controls-group"></div><div part="controls-group"></div></div></div>`);
function renderAudio(isMobile) {
return isMobile ? MobileUI$1() : DesktopUI$1();
}
function MobileUI$1() {
return (() => {
const $$_root = $$_clone($$_templ$1), $$_el = $$_root.firstChild, $$_el_2 = $$_el.nextSibling, $$_el_3 = $$_el_2.firstChild, $$_el_4 = $$_el_3.nextSibling, $$_el_5 = $$_el_4.nextSibling, $$_el_6 = $$_el_5.firstChild, $$_el_7 = $$_el_6.nextSibling, $$_el_8 = $$_el_7.nextSibling, $$_el_9 = $$_el_5.nextSibling, $$_el_10 = $$_el_9.firstChild, $$_el_11 = $$_el_10.nextSibling;
$$_setup_custom_element($$_el);
$$_insert_lite($$_el_3, $$_create_component(MuteButton, { tooltip: "top left" }), null);
$$_insert_lite($$_el_3, $$_create_component(ChapterTitleOrMainTitle), null);
$$_insert_lite($$_el_3, $$_create_component(CaptionButton), null);
$$_insert_lite($$_el_3, $$_create_component(ChaptersMenu, { tooltip: "top center", position: "top" }), null);
$$_insert_lite($$_el_3, $$_create_component(SettingsMenu, { tooltip: "top right", position: "top" }), null);
$$_insert_lite($$_el_4, $$_create_component(TimeSlider));
$$_setup_custom_element($$_el_6);
$$_setup_custom_element($$_el_8);
$$_insert_lite($$_el_9, $$_create_component(SeekButton, { seconds: -10, tooltip: "top left" }), $$_el_11);
$$_insert_lite($$_el_9, $$_create_component(PlayButton, { tooltip: "top center" }), $$_el_11);
$$_insert_lite($$_el_9, $$_create_component(SeekButton, { seconds: 10 }), $$_el_11);
return $$_root;
})();
}
function DesktopUI$1() {
return (() => {
const $$_root = $$_clone($$_templ_2$1), $$_el = $$_root.firstChild, $$_el_2 = $$_el.nextSibling, $$_el_3 = $$_el_2.firstChild, $$_el_4 = $$_el_3.nextSibling;
$$_setup_custom_element($$_el);
$$_insert_lite($$_el_3, $$_create_component(TimeSlider));
$$_insert_lite($$_el_4, $$_create_component(SeekButton, { seconds: -10, tooltip: "top left" }), null);
$$_insert_lite($$_el_4, $$_create_component(PlayButton, { tooltip: "top center" }), null);
$$_insert_lite($$_el_4, $$_create_component(SeekButton, { seconds: 10 }), null);
$$_insert_lite($$_el_4, $$_create_component(TimeGroup), null);
$$_insert_lite($$_el_4, $$_create_component(ChapterTitleOrMainTitle), null);
$$_insert_lite($$_el_4, $$_create_component(MuteButton, { tooltip: "top center" }), null);
$$_insert_lite($$_el_4, $$_create_component(VolumeSlider), null);
$$_insert_lite($$_el_4, $$_create_component(CaptionButton), null);
$$_insert_lite($$_el_4, $$_create_component(ChaptersMenu, { tooltip: "top center", position: "top" }), null);
$$_insert_lite($$_el_4, $$_create_component(SettingsMenu, { tooltip: "top right", position: "top" }), null);
return $$_root;
})();
}
const $$_templ = /* @__PURE__ */ $$_create_template(`<div part="media-ui vod live:dvr mobile"><media-captions mk-d></media-captions><media-buffering-indicator mk-d></media-buffering-indicator><div part="scrim"></div><div part="controls"><div part="controls-group"><div part="controls-spacer"></div></div><div part="controls-group"></div><div part="controls-group"><div part="controls-spacer"></div></div><div part="controls-group"></div></div><div part="start-duration"><media-time type="duration" mk-d></media-time></div></div>`), $$_templ_2 = /* @__PURE__ */ $$_create_template(`<div part="media-ui vod live:dvr desktop "><media-captions mk-d></media-captions><media-buffering-indicator mk-d></media-buffering-indicator><div part="scrim"></div><div part="controls"><div part="controls-group"><div part="controls-spacer"></div></div><div part="controls-group"></div><div part="controls-group"></div><div part="controls-group"></div></div></div>`);
function renderVideo(isMobile) {
return isMobile ? MobileUI() : DesktopUI();
}
function MobileUI() {
return (() => {
const $$_root = $$_clone($$_templ), $$_el = $$_root.firstChild, $$_el_2 = $$_el.nextSibling, $$_el_3 = $$_el_2.nextSibling, $$_el_4 = $$_el_3.nextSibling, $$_el_5 = $$_el_4.firstChild; $$_el_5.firstChild; const $$_el_7 = $$_el_5.nextSibling, $$_el_8 = $$_el_7.nextSibling, $$_el_9 = $$_el_8.firstChild, $$_el_10 = $$_el_8.nextSibling, $$_el_11 = $$_el_4.nextSibling, $$_el_12 = $$_el_11.firstChild;
$$_insert_lite($$_root, $$_create_component(VideoGestures), $$_el);
$$_setup_custom_element($$_el);
$$_setup_custom_element($$_el_2);
$$_insert_lite($$_el_5, $$_create_component(CaptionButton, { tooltip: "bottom center" }), null);
$$_insert_lite($$_el_5, $$_create_component(ChaptersMenu), null);
$$_insert_lite($$_el_5, $$_create_component(SettingsMenu, { tooltip: "bottom center" }), null);
$$_insert_lite($$_el_5, $$_create_component(MuteButton, { tooltip: "bottom right" }), null);
$$_insert_lite($$_el_7, $$_create_component(PlayButton, { tooltip: "top center" }));
$$_insert_lite($$_el_8, $$_create_component(TimeGroup), $$_el_9);
$$_insert_lite($$_el_8, $$_create_component(ChapterTitleOrMainTitle), $$_el_9);
$$_insert_lite($$_el_8, $$_create_component(FullscreenButton), null);
$$_insert_lite($$_el_10, $$_create_component(TimeSlider));
$$_setup_custom_element($$_el_12);
return $$_root;
})();
}
function DesktopUI() {
return (() => {
const $$_root = $$_clone($$_templ_2), $$_el = $$_root.firstChild, $$_el_2 = $$_el.nextSibling, $$_el_3 = $$_el_2.nextSibling, $$_el_4 = $$_el_3.nextSibling, $$_el_5 = $$_el_4.firstChild; $$_el_5.firstChild; const $$_el_7 = $$_el_5.nextSibling, $$_el_8 = $$_el_7.nextSibling, $$_el_9 = $$_el_8.nextSibling;
$$_insert_lite($$_root, $$_create_component(VideoGestures), $$_el);
$$_setup_custom_element($$_el);
$$_setup_custom_element($$_el_2);
$$_insert_lite($$_el_5, $$_create_component(ChaptersMenu), null);
$$_insert_lite($$_el_5, $$_create_component(SettingsMenu), null);
$$_insert_lite($$_el_8, $$_create_component(TimeSlider));
$$_insert_lite($$_el_9, $$_create_component(PlayButton), null);
$$_insert_lite($$_el_9, $$_create_component(MuteButton), null);
$$_insert_lite($$_el_9, $$_create_component(VolumeSlider), null);
$$_insert_lite($$_el_9, $$_create_component(TimeGroup), null);
$$_insert_lite($$_el_9, $$_create_component(ChapterTitleOrMainTitle), null);
$$_insert_lite($$_el_9, $$_create_component(CaptionButton), null);
$$_insert_lite($$_el_9, $$_create_component(PiPButton), null);
$$_insert_lite($$_el_9, $$_create_component(FullscreenButton), null);
return $$_root;
})();
}
class CommunitySkin extends Component {
static el = defineElement({
tagName: "media-community-skin",
nohydrate: true,
props: {
translations: null
}
});
static register = getUIComponents;
j;
constructor(instance) {
super(instance);
this.j = useMedia();
provideContext(communitySkinContext, {
$props: this.$props,
$media: this.j.$store
});
}
/** We need this to compute and save the layout type to prevent unnecessary re-renders. */
Ae() {
const { viewType, streamType } = this.j.$store;
return viewType() === "audio" ? streamType().includes("live") ? "audio:live" : "audio" : streamType().endsWith("live") ? "video:live" : "video";
}
onAttach() {
this.setAttributes({
"data-audio": this.Be.bind(this),
"data-video": this.Ce.bind(this),
"data-mobile": this.ze.bind(this)
});
}
Be() {
const { viewType } = this.j.$store;
return viewType() === "audio";
}
Ce() {
const { viewType } = this.j.$store;
return viewType() !== "audio";
}
ze() {
const { breakpointX } = this.j.$store;
return breakpointX() === "sm";
}
render() {
const $layoutType = computed(this.Ae.bind(this)), $isMobile = computed(this.ze.bind(this));
return () => {
const render = $layoutType().startsWith("video") ? renderVideo : renderAudio;
return render($isMobile());
};
}
}
export { CommunitySkin as C, getUIComponents as g };