@opendesign-plus/components 0.0.1-rc.10 → 0.0.1-rc.100

package/dist/treeshaking/components/meeting/components/OMeetingPlaybackSubtitles.vue_vue_type_style_index_1_lang.css

@@ -0,0 +1,344 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+}
+}
+:root [class^=el-] {
+  --el-color-primary: var(--o-color-primary1);
+  --el-border-color: var(--o-color-control1);
+  --el-fill-color-blank: var(--o-color-control5-light);
+  --el-input-placeholder-color: var(--el-text-color-placeholder);
+  --el-input-hover-border-color: var(--el-border-color-hover);
+  --el-input-clear-hover-color: var(--el-text-color-secondary);
+  --el-component-size-large: 36px;
+}
+@media (max-width: 840px) {
+:root [class^=el-] {
+    --el-component-size-large: var(--o-control_size-l);
+}
+}
+:root .el-date-editor.el-date-editor--daterange {
+  padding: 0 13px 0 15px;
+}
+:root .el-date-editor.el-date-editor--timerange {
+  padding: 0 16px;
+}
+:root .el-date-editor input {
+  text-align: left;
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+:root .el-date-editor input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+:root .el-date-editor input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+:root .el-date-editor input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+:root .el-date-editor input {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+:root .el-date-editor input {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 600px) and (min-width: 1201px) and (max-width: 1680px) {
+:root .el-date-editor input {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) and (min-width: 841px) and (max-width: 1200px) {
+:root .el-date-editor input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (min-width: 601px) and (max-width: 840px) {
+:root .el-date-editor input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (max-width: 600px) {
+:root .el-date-editor input {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+:root .el-date-editor .el-select__wrapper {
+  gap: 0;
+}
+:root .el-date-editor .el-input__wrapper .el-input__prefix {
+  order: 1;
+  font-size: 16px;
+}
+:root .el-date-editor .el-input__icon {
+  height: 100%;
+  order: 1;
+  font-size: 24px;
+  margin-right: 2px;
+  color: var(--o-color-info1);
+  background-color: var(--o-color-info2);
+  mask: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiAgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9Ik02LjQ2MyA0Ljk3NmEuNy43IDAgMCAxIC4wOTUgMS4zOTRsLS4wOTUuMDA2SDQuNDcxYS4xNC4xNCAwIDAgMC0uMTMuMDkzbC0uMDA3LjA0M3YxLjg1NmgxNS4zMjlsLjAwMS0xLjg1NmEuMTQuMTQgMCAwIDAtLjA5My0uMTNsLS4wNDMtLjAwN2gtMi4wNTVhLjcuNyAwIDAgMS0uMDk1LTEuMzk0bC4wOTUtLjAwNmgyLjA1NWMuODAxIDAgMS40Ni42MTQgMS41MyAxLjM5N2wuMDA2LjE0djEyLjM1OWMwIC44MDEtLjYxNCAxLjQ2LTEuMzk3IDEuNTNsLS4xNC4wMDZINC40N2MtLjgwMSAwLTEuNDYtLjYxNC0xLjUzLTEuMzk3bC0uMDA2LS4xNFY2LjUxMWMwLS44MDEuNjE0LTEuNDYgMS4zOTctMS41M2wuMTQtLjAwNnptMTMuMjAxIDQuNzkySDQuMzM1djkuMTAzYzAgLjA2LjAzOS4xMTEuMDkzLjEzbC4wNDMuMDA3aDE1LjA1N2MuMDYgMCAuMTExLS4wMzkuMTMtLjA5M2wuMDA3LS4wNDMtLjAwMS05LjEwM3ptLTMuNDgyIDUuNjYzYS43LjcgMCAwIDEgLjA5NSAxLjM5NGwtLjA5NS4wMDZINy44MTdhLjcuNyAwIDAgMS0uMDk1LTEuMzk0bC4wOTUtLjAwNnptMC0zLjM0NmEuNy43IDAgMCAxIC4wOTUgMS4zOTRsLS4wOTUuMDA2SDcuODE3YS43LjcgMCAwIDEtLjA5NS0xLjM5NGwuMDk1LS4wMDZ6bS0uNjk2LTguNDY3Yy4zNTQgMCAuNjQ3LjI2My42OTQuNjA1bC4wMDYuMDk1djIuODA0YS43LjcgMCAwIDEtMS4zOTQuMDk1bC0uMDA2LS4wOTVWNC4zMThhLjcuNyAwIDAgMSAuNy0uN20tNi45MzctLjAyNmMuMzU0IDAgLjY0Ny4yNjMuNjk0LjYwNWwuMDA2LjA5NXYyLjgwNGEuNy43IDAgMCAxLTEuMzk0LjA5NWwtLjAwNi0uMDk1VjQuMjkyYS43LjcgMCAwIDEgLjctLjdtNC45NDYgMS4zODRhLjcuNyAwIDAgMSAuMDk1IDEuMzk0bC0uMDk1LjAwNkgxMC41M2EuNy43IDAgMCAxLS4wOTUtMS4zOTRsLjA5NS0uMDA2eiI+PC9wYXRoPgo8L3N2Zz4=") no-repeat center;
+  background-size: 24px;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+:root .el-date-editor .el-input__icon svg {
+  display: none;
+}
+:root .el-popper .el-popper__arrow {
+  display: none;
+}
+:root .el-popper .el-picker-panel {
+  --cell-row-gap: 6px;
+  --cell-radius: var(--o-radius-xs);
+  color: var(--o-color-info1);
+}
+:root .el-popper .el-picker-panel .el-date-picker__header {
+  padding: 12px 24px;
+  height: 48px;
+  border-bottom: 1px solid var(--o-color-control4);
+}
+:root .el-popper .el-picker-panel .el-date-picker__header .el-date-picker__header-label {
+  font-weight: 500;
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table th {
+  border-bottom: none;
+  height: 24px;
+  color: inherit;
+  padding: 0 0 var(--cell-row-gap);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td {
+  padding: var(--cell-row-gap) 0px;
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td .el-date-table-cell {
+  padding: 0;
+  height: 24px;
+  line-height: 22px;
+  border: 1px solid transparent;
+  border-radius: var(--cell-radius);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td:hover:not(.disabled) .el-date-table-cell {
+  border-color: var(--o-color-primary1);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.disabled .el-date-table-cell, :root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.prev-month .el-date-table-cell, :root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.next-month .el-date-table-cell {
+  background: none;
+  color: var(--o-color-info4);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.today .el-date-table-cell {
+  background: var(--o-color-control2-light);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.today .el-date-table-cell .el-date-table-cell__text {
+  font-weight: normal;
+  color: var(--o-color-info1);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.current .el-date-table-cell, :root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.start-date .el-date-table-cell, :root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.end-date .el-date-table-cell {
+  background: var(--o-color-primary1);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.current .el-date-table-cell .el-date-table-cell__text, :root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.start-date .el-date-table-cell .el-date-table-cell__text, :root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.end-date .el-date-table-cell .el-date-table-cell__text {
+  background: none;
+  color: #fff;
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.in-range:not(:hover) .el-date-table-cell {
+  border-radius: 0;
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.in-range:not(:hover).start-date .el-date-table-cell {
+  border-radius: var(--cell-radius);
+}
+:root .el-popper .el-picker-panel .el-picker-panel__content .el-date-table td.in-range:not(:hover).end-date .el-date-table-cell {
+  border-radius: var(--cell-radius);
+}
+:root .el-input {
+  --el-border-color: var(--o-color-control1);
+  --el-input-border-color: var(--o-color-control1);
+  --el-input-hover-border-color: var(--o-color-primary2);
+  --el-input-focus-border-color: var(--o-color-primary3);
+}
+:root .el-table {
+  --el-table-border-color: var(--o-color-control4) ;
+}
+:root .el-input__wrapper {
+  box-shadow: none;
+  border: 1px solid var(--el-input-border-color);
+}
+:root .el-date-editor.is-focus .el-input__wrapper {
+  box-shadow: none;
+  --el-input-border-color: var(--o-color-primary3);
+}
+:root .el-date-editor:hover .el-input__wrapper {
+  box-shadow: none;
+  --el-input-border-color: var(--o-color-primary2);
+}
+:root .el-date-editor.el-input__wrapper:hover {
+  box-shadow: none;
+  --el-input-border-color: var(--o-color-primary2);
+}
+:root .el-date-editor.el-input__wrapper.is-active {
+  --el-input-border-color: var(--o-color-primary3);
+}
+:root .el-calendar .el-calendar-table {
+  width: 100%;
+}
+:root .el-calendar .el-calendar-table th {
+  color: var(--o-color-info3);
+  font-weight: 400;
+  padding: 4px 0 16px 0;
+  text-align: center;
+}
+:root .el-calendar .el-calendar-table td.prev .date-calender, :root .el-calendar .el-calendar-table td.next .date-calender {
+  color: var(--o-color-info4);
+}
+:root .el-select .el-select__placeholder {
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+:root .el-select .el-select__placeholder {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+:root .el-select .el-select__placeholder {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+:root .el-select .el-select__placeholder {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+:root .el-select .el-select__placeholder {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+:root .el-select .el-select__placeholder {
+    font-size: 18px;
+    line-height: 26px;
+}
+}
+@media (max-width: 600px) and (min-width: 1201px) and (max-width: 1680px) {
+:root .el-select .el-select__placeholder {
+    font-size: 16px;
+    line-height: 24px;
+}
+}
+@media (max-width: 600px) and (min-width: 841px) and (max-width: 1200px) {
+:root .el-select .el-select__placeholder {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (min-width: 601px) and (max-width: 840px) {
+:root .el-select .el-select__placeholder {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) and (max-width: 600px) {
+:root .el-select .el-select__placeholder {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+:root .el-input-number {
+  --el-component-size-large: 34px;
+}
+@media (max-width: 840px) {
+:root .el-input-number {
+    --el-component-size-large: calc(var(--o-control_size-l) - 2px);
+}
+}
+:root .el-input-number .el-input__wrapper:hover {
+  --el-input-border-color: var(--o-color-primary2);
+}
+:root .el-input-number .el-input__wrapper.is-focus {
+  --el-input-border-color: var(--o-color-primary3);
+}
+:root .el-input-number .el-input-number__decrease:hover ~ .el-input:not(.is-disabled) .el-input__wrapper,
+:root .el-input-number .el-input-number__increase:hover ~ .el-input:not(.is-disabled) .el-input__wrapper {
+  box-shadow: none;
+}
+:root .el-input-number .el-input__wrapper {
+  box-shadow: none;
+}
+:root .el-input-number .el-input__wrapper.is-focus {
+  box-shadow: none;
+}
+:root .el-input-number.el-input-number--large {
+  line-height: var(--el-component-size-large);
+}
+.speakers-selector-popper {
+  border: none;
+  --item-height: 40px;
+  --el-color-primary: var(--o-color-primary1);
+}
+.speakers-selector-popper .el-select-dropdown {
+  padding: 4px;
+}
+.speakers-selector-popper .el-checkbox {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.speakers-selector-popper .el-select-dropdown__header {
+  height: var(--item-height);
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  border-bottom: 0;
+  cursor: pointer;
+}
+.speakers-selector-popper .el-select-dropdown__header:hover {
+  background-color: var(--o-color-control2-light);
+}
+.speakers-selector-popper .el-select-dropdown__list {
+  padding: 2px 0 0;
+}
+.speakers-selector-popper .el-select-dropdown__list .el-select-dropdown__item {
+  padding: 0 12px;
+  height: var(--item-height);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.speakers-selector-popper .el-select-dropdown__list .el-select-dropdown__item.is-selected, .speakers-selector-popper .el-select-dropdown__list .el-select-dropdown__item.is-hovering {
+  background-color: transparent;
+}
+.speakers-selector-popper .el-select-dropdown__list .el-select-dropdown__item.is-selected::after {
+  content: none;
+  display: none;
+}
+.speakers-selector-popper .el-select-dropdown__list .el-select-dropdown__item:hover {
+  background-color: var(--o-color-control2-light);
+}
+.speakers-selector-popper .el-select-dropdown__list .el-select-dropdown__item + .el-select-dropdown__item {
+  margin-top: 2px;
+}

package/dist/treeshaking/components/meeting/components/OMeetingPlaybackVideo.mjs

@@ -0,0 +1,5 @@
+import OMeetingPlaybackVideo_vue_vue_type_script_setup_true_lang_default from "./OMeetingPlaybackVideo.vue_vue_type_script_setup_true_lang.mjs";
+import './OMeetingPlaybackVideo.vue_vue_type_style_index_0_lang.css';
+// src/components/meeting/components/OMeetingPlaybackVideo.vue
+var OMeetingPlaybackVideo_default = OMeetingPlaybackVideo_vue_vue_type_script_setup_true_lang_default;
+export { OMeetingPlaybackVideo_default as default };

package/dist/treeshaking/components/meeting/components/OMeetingPlaybackVideo.vue.d.ts

@@ -0,0 +1,17 @@
+import { MeetingPlaybackVideoPropsT } from '..';
+declare const _default: import('vue').DefineComponent<MeetingPlaybackVideoPropsT, {
+    changeTime: (time: number) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    getDuration: (...args: any[]) => void;
+    getInstance: (...args: any[]) => void;
+    setTrackIdx: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<MeetingPlaybackVideoPropsT> & Readonly<{
+    onGetDuration?: ((...args: any[]) => any) | undefined;
+    onGetInstance?: ((...args: any[]) => any) | undefined;
+    onSetTrackIdx?: ((...args: any[]) => any) | undefined;
+}>, {
+    src: string;
+    captions: import('../../../index.ts').CaptionItemT[];
+    vtt: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/treeshaking/components/meeting/components/OMeetingPlaybackVideo.vue_vue_type_script_setup_true_lang.mjs

@@ -0,0 +1,208 @@
+import { transformTime } from "../utils.mjs";
+import videojs from "../../../_virtual/video.js/dist/video.es.js.mjs";
+import '../../../_virtual/video.js/dist/video-js.css';
+import "../../../assets/meeting/transparent.mjs";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, onMounted, onUnmounted, openBlock, ref, toDisplayString, unref, useId, watch } from "vue";
+// src/components/meeting/components/OMeetingPlaybackVideo.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "o-meeting-playback-video" };
+var _hoisted_2 = ["id"];
+var _hoisted_3 = {
+	key: 0,
+	class: "poster-title"
+};
+var OMeetingPlaybackVideo_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "OMeetingPlaybackVideo",
+	props: {
+		src: { default: "" },
+		vtt: { default: "" },
+		captions: { default: () => [] },
+		poster: {},
+		posterTitle: {},
+		instance: {},
+		trackIdx: {}
+	},
+	emits: [
+		"getDuration",
+		"getInstance",
+		"setTrackIdx"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const timer = ref();
+		const playerRef = ref();
+		const playerId = useId();
+		const emits = __emit;
+		const speakerMenuVisible = ref(false);
+		const closeSpeakerMenu = () => {
+			speakerMenuVisible.value = false;
+		};
+		const handleCue = (textTrack, init = false) => {
+			const player = props.instance;
+			if (!player) return;
+			const activeCue = textTrack.activeCues?.[0];
+			timer.value && clearInterval(timer.value);
+			if (activeCue) {
+				activeCue.text = activeCue?.text?.replace(/\[(SPEAKER_)\d+]: /g, "") || "";
+				const arr = activeCue.text.split("\n");
+				const captionLength = arr.length;
+				const timeL = activeCue.endTime - activeCue.startTime;
+				const interval = parseFloat((timeL / captionLength).toFixed(3));
+				let index = 0;
+				if (init) {
+					const ratio = (player.currentTime() - activeCue.startTime) / (activeCue.endTime - activeCue.startTime);
+					while ((index + 1) / captionLength < ratio) index++;
+				}
+				if (index < captionLength) activeCue.text = arr.length ? arr[index] : activeCue?.text;
+				else activeCue.text = arr.length ? arr[0] : activeCue?.text;
+				let timeInterval = interval * 1e3;
+				const startInterval = () => {
+					timer.value = setInterval(() => {
+						textTrack.mode = "hidden";
+						index++;
+						if (index > arr.length - 1) clearInterval(timer.value);
+						else if (index === arr.length - 1) {
+							activeCue.text = arr[index];
+							clearInterval(timer.value);
+							timeInterval = interval * (captionLength - index) * 1e3;
+							startInterval();
+						} else activeCue.text = arr[index];
+						textTrack.mode = "showing";
+					}, timeInterval);
+				};
+				startInterval();
+			}
+		};
+		const checkedSpeakers = ref([]);
+		watch(() => checkedSpeakers.value, (val) => {
+			const player = props.instance;
+			if (player) {
+				const tracks = player.textTracks();
+				for (let i = 0; i < tracks.length; i++) if (tracks[i].kind === "subtitles") {
+					handleCue(tracks[i], true);
+					tracks[i].mode = !val.length ? "hidden" : "showing";
+				}
+			}
+		}, { deep: true });
+		const loaded = ref(false);
+		const playStatus = ref("init");
+		const videoInit = async () => {
+			if (!props.src) return;
+			const player = videojs(playerId, {
+				controls: true,
+				autoplay: false,
+				preload: "auto",
+				fluid: true,
+				poster: props.poster || "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQ4AQMAAADSHVMAAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAANQTFRFAAAAp3o92gAAAAF0Uk5TAEDm2GYAAASYSURBVHic7c8BDQAgDMAw7t80Lk5SVgXbnM/M64BtDesa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNaxrWNewrmFdw7qGdQ3rGtY1rGtY17CuYV3DuoZ1Desa1jWsa1jXsK5hXcO6hnUN6xrWNay7Fz0EOVPDeGwAAAAASUVORK5CYII=",
+				playbackRates: [
+					.5,
+					.75,
+					1,
+					1.25,
+					1.5,
+					2
+				],
+				controlBar: {
+					skipButtons: {
+						backward: 5,
+						forward: 5
+					},
+					children: {
+						playToggle: true,
+						SkipBackward: { backward: 5 },
+						skipForward: { forward: 5 },
+						currentTimeDisplay: true,
+						timeDivider: true,
+						durationDisplay: true,
+						progressControl: true,
+						PlaybackRateMenuButton: true,
+						volumePanel: { inline: false },
+						FullscreenToggle: true
+					}
+				}
+			});
+			emits("getInstance", player);
+			player.src(props.src);
+			player.addRemoteTextTrack({
+				kind: "subtitles",
+				src: props.vtt,
+				srclang: "zh",
+				label: "中文",
+				default: false
+			});
+			loaded.value = true;
+			class CustomSubsCapsButton extends videojs.getComponent("Button") {
+				constructor(player, options) {
+					super(player, options);
+					this.addClass("vjs-subtitle-toggle-button", "vjs-subtitle-hidden");
+					this.controlText("Toggle Subtitles");
+				}
+				buildCSSClass() {
+					return `vjs-subtitle-toggle-button ${super.buildCSSClass()}`;
+				}
+				handleClick() {
+					const tracks = this.player().textTracks();
+					for (let i = 0; i < tracks.length; i++) if (tracks[i].kind === "subtitles") {
+						handleCue(tracks[i], true);
+						tracks[i].mode = tracks[i].mode === "showing" ? "hidden" : "showing";
+						if (tracks[i].mode === "showing") {
+							this.removeClass("vjs-subtitle-hidden");
+							this.addClass("vjs-subtitle-showing");
+						} else {
+							this.removeClass("vjs-subtitle-showing");
+							this.addClass("vjs-subtitle-hidden");
+						}
+					}
+				}
+			}
+			if (props.vtt) {
+				const subtitleToggleName = `SubtitleToggleButton-${playerId}`;
+				videojs.registerComponent(subtitleToggleName, CustomSubsCapsButton);
+				if (!player.controlBar.children_.some((v) => v.name_ === subtitleToggleName)) player.controlBar.addChild(subtitleToggleName, {}, 8);
+			}
+			(player?.textTracks().tracks_).forEach((textTrack) => {
+				textTrack?.addEventListener("cuechange", () => {
+					handleCue(textTrack);
+				});
+			});
+			player.on("play", () => {
+				playStatus.value = "playing";
+			});
+			player.on("timeupdate", () => {
+				const currentTime = player.currentTime() || 0;
+				const idx = props.captions.findIndex((item) => {
+					return transformTime(item.start_time) > currentTime;
+				});
+				emits("setTrackIdx", idx);
+			});
+			player.one("loadedmetadata", () => {
+				emits("getDuration", player.duration());
+			});
+			playerRef.value = player;
+		};
+		onMounted(() => {
+			videoInit();
+			document.addEventListener("click", closeSpeakerMenu);
+		});
+		watch(() => props.src, () => {
+			videoInit();
+		});
+		onUnmounted(() => {
+			props?.instance?.dispose();
+			document.removeEventListener("click", closeSpeakerMenu);
+		});
+		__expose({ changeTime: (time) => {
+			playerRef.value?.currentTime(time);
+		} });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", { class: normalizeClass(["video-placeholder", {
+				loaded: loaded.value,
+				"no-poster": !__props.poster,
+				[playStatus.value]: true
+			}]) }, [createElementVNode("video", {
+				class: "video-js",
+				id: unref(playerId)
+			}, null, 8, _hoisted_2), __props.posterTitle ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(__props.posterTitle), 1)) : createCommentVNode("", true)], 2)]);
+		};
+	}
+});
+export { OMeetingPlaybackVideo_vue_vue_type_script_setup_true_lang_default as default };