@opendesign-plus/components 0.0.1-rc.44 → 0.0.1-rc.46

package/dist/treeshaking/components/meeting/OMeetingPlayback.vue.mjs

@@ -1,13 +1,15 @@
-import { defineComponent, ref, computed, watchEffect, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, toDisplayString, createBlock, unref, withCtx, Fragment, renderList, createCommentVNode, createVNode, normalizeClass, normalizeStyle, renderSlot } from "vue";
+import { defineComponent, ref, computed, watchEffect, watch, nextTick, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, createTextVNode, toDisplayString, createBlock, unref, Fragment, renderList, createCommentVNode, normalizeClass, normalizeStyle, renderSlot } from "vue";
 import { transformSeconds, speakerNum, transformTime } from "./utils.mjs";
-import { OSelect, OOption, OTab, OTabPane, OScroller } from "@opensig/opendesign";
-import _sfc_main$2 from "./components/OMeetingPlaybackSubtitles.vue.mjs";
+import { OSelect, OOption, OTab, OTabPane, OScroller, OIcon, OIconChevronDown } from "@opensig/opendesign";
+import _sfc_main$3 from "./components/OMeetingPlaybackSubtitles.vue.mjs";
 import './components/OMeetingPlaybackSubtitles.css';
 import './components/OMeetingPlaybackSubtitles2.css';
-import _sfc_main$1 from "./components/OMeetingPlaybackVideo.vue.mjs";
+import _sfc_main$2 from "./components/OMeetingPlaybackVideo.vue.mjs";
 import './components/OMeetingPlaybackVideo.css';
 import { useI18n } from "../../i18n/index.mjs";
 import { PROGRESS_COLORS } from "./config.mjs";
+import _sfc_main$1 from "../common/TooltipText.vue.mjs";
+import '../common/TooltipText.css';
 const _hoisted_1 = { class: "o-meeting-playback" };
 const _hoisted_2 = { class: "video-header" };
 const _hoisted_3 = { class: "video-title" };
@@ -31,12 +33,14 @@ const _hoisted_13 = {
   class: "subject-progress"
 };
 const _hoisted_14 = ["data-start", "data-end"];
+const COLLAPSE_THRESHOLD = 168;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "OMeetingPlayback",
   props: {
     dates: { default: () => [] },
     detail: { default: () => ({}) },
-    data: { default: () => ({}) }
+    data: { default: () => ({}) },
+    dev: { type: Boolean }
   },
   emits: ["change-date"],
   setup(__props, { emit: __emit }) {
@@ -67,7 +71,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const subjectList = ref([]);
     const getProgressColor = (idx) => {
-      return PROGRESS_COLORS[idx % 3];
+      return PROGRESS_COLORS[idx % 6];
     };
     const playerDuration = ref(0);
     const getPlayerDuration = (seconds) => {
@@ -110,13 +114,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const getSubjectList = async (url) => {
       const res = await fetch(url);
       const json = await res.json();
-      subjectList.value = (json || []).map((z) => {
-        return {
-          ...z,
-          startTimeNumber: transformTime(z.startTime),
-          endTimeNumber: transformTime(z.endTime)
-        };
-      });
+      if (props.dev) {
+        subjectList.value = [...json || [], ...json || [], ...json || []].map((z) => {
+          return {
+            ...z,
+            startTimeNumber: transformTime(z.startTime),
+            endTimeNumber: transformTime(z.endTime)
+          };
+        });
+      } else {
+        subjectList.value = (json || []).map((z) => {
+          return {
+            ...z,
+            startTimeNumber: transformTime(z.startTime),
+            endTimeNumber: transformTime(z.endTime)
+          };
+        });
+      }
     };
     const tab = ref("info");
     const tabOptions = computed(() => {
@@ -164,19 +178,47 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       cancelAnimationFrame(raf);
       raf = requestAnimationFrame(updateHeight);
     };
+    const contentRef = ref(null);
+    const showMoreBtn = ref(false);
+    const checkMoreBtn = () => {
+      const el = contentRef.value;
+      if (el) {
+        showMoreBtn.value = el.offsetHeight > COLLAPSE_THRESHOLD;
+      }
+    };
+    let contentRaf = null;
+    let contentObserver = null;
+    const debouncedCheckMoreBtn = () => {
+      cancelAnimationFrame(contentRaf);
+      contentRaf = requestAnimationFrame(checkMoreBtn);
+    };
+    watch(tab, () => {
+      nextTick(checkMoreBtn);
+    });
     onMounted(() => {
       if (leftRef.value) {
         observer = new ResizeObserver(debouncedUpdate);
         observer.observe(leftRef.value);
         updateHeight();
       }
+      if (contentRef.value) {
+        contentObserver = new ResizeObserver(debouncedCheckMoreBtn);
+        contentObserver.observe(contentRef.value);
+        checkMoreBtn();
+      }
     });
     onUnmounted(() => {
       cancelAnimationFrame(raf);
       observer == null ? void 0 : observer.disconnect();
+      cancelAnimationFrame(contentRaf);
+      contentObserver == null ? void 0 : contentObserver.disconnect();
     });
+    const expanded = ref(false);
+    const toggleExpanded = () => {
+      expanded.value = !expanded.value;
+    };
     return (_ctx, _cache) => {
-      var _a, _b, _c, _d;
+      var _a, _b;
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", {
           class: "left-card card-wrapper",
@@ -184,12 +226,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ref: leftRef
         }, [
           createElementVNode("div", _hoisted_2, [
-            createElementVNode("div", _hoisted_3, toDisplayString((_a = __props.detail) == null ? void 0 : _a.topic) + "(" + toDisplayString((_b = __props.detail) == null ? void 0 : _b.date) + ")", 1),
-            ((_c = __props.dates) == null ? void 0 : _c.length) ? (openBlock(), createBlock(unref(OSelect), {
+            createElementVNode("div", _hoisted_3, [
+              createVNode(_sfc_main$1, { lines: 2 }, {
+                default: withCtx(() => {
+                  var _a2, _b2;
+                  return [
+                    createTextVNode(toDisplayString((_a2 = __props.detail) == null ? void 0 : _a2.topic) + "(" + toDisplayString((_b2 = __props.detail) == null ? void 0 : _b2.date) + ")", 1)
+                  ];
+                }),
+                _: 1
+              })
+            ]),
+            ((_a = __props.dates) == null ? void 0 : _a.length) ? (openBlock(), createBlock(unref(OSelect), {
               key: 0,
               size: "large",
               clearable: false,
-              "model-value": (_d = __props.detail) == null ? void 0 : _d.date,
+              "model-value": (_b = __props.detail) == null ? void 0 : _b.date,
               placeholder: unref(t)("meeting.selectDate"),
               onChange: changeDate
             }, {
@@ -206,7 +258,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, 8, ["model-value", "placeholder"])) : createCommentVNode("", true)
           ]),
           createElementVNode("div", _hoisted_4, [
-            __props.data ? (openBlock(), createBlock(_sfc_main$1, {
+            __props.data ? (openBlock(), createBlock(_sfc_main$2, {
               key: 0,
               ref_key: "playerRef",
               ref: playerRef,
@@ -239,63 +291,81 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               _: 1
             }, 8, ["modelValue"]),
             createVNode(unref(OScroller), {
-              class: normalizeClass(["tab-content", `tab-content-${tab.value}`]),
+              class: normalizeClass(["tab-content", `tab-content-${tab.value}`, expanded.value ? "is-expanded" : "", showMoreBtn.value ? "is-collapsible" : ""]),
               "show-type": "hover"
             }, {
               default: withCtx(() => {
                 var _a2;
                 return [
-                  tab.value === tabOptions.value[0].value ? (openBlock(), createElementBlock("div", _hoisted_6, [
-                    createElementVNode("div", _hoisted_7, [
-                      createElementVNode("span", null, toDisplayString(unref(t)("meeting.item1")), 1),
-                      createElementVNode("span", null, toDisplayString(__props.detail.sponsor), 1)
-                    ]),
-                    createElementVNode("div", _hoisted_8, [
-                      createElementVNode("span", null, toDisplayString(unref(t)("meeting.item2")), 1),
-                      createElementVNode("span", null, toDisplayString(__props.detail.groupName), 1)
-                    ]),
-                    createElementVNode("div", _hoisted_9, [
-                      createElementVNode("span", null, toDisplayString(unref(t)("meeting.item3")), 1),
-                      createElementVNode("span", null, toDisplayString(__props.detail.date) + "  " + toDisplayString(__props.detail.start) + "~" + toDisplayString(__props.detail.end), 1)
-                    ]),
-                    createElementVNode("div", _hoisted_10, [
-                      createElementVNode("span", null, toDisplayString(unref(t)("meeting.item4")), 1),
-                      createElementVNode("span", null, toDisplayString(__props.detail.agenda || "-"), 1)
-                    ])
-                  ])) : createCommentVNode("", true),
-                  tab.value === ((_a2 = tabOptions.value[1]) == null ? void 0 : _a2.value) ? (openBlock(), createElementBlock("div", _hoisted_11, [
-                    mouseTime.value ? (openBlock(), createElementBlock("div", {
-                      key: 0,
-                      class: "mouse-current-time",
-                      style: normalizeStyle({
-                        top: mousePosition.value[1],
-                        left: mousePosition.value[0]
-                      })
-                    }, toDisplayString(mouseTime.value), 5)) : createCommentVNode("", true),
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(subjectList.value, (sub, idx) => {
-                      return openBlock(), createElementBlock("div", {
-                        class: "subject-item",
-                        key: sub.title
-                      }, [
-                        createElementVNode("div", _hoisted_12, toDisplayString(sub.title), 1),
-                        playerDuration.value ? (openBlock(), createElementBlock("div", _hoisted_13, [
-                          createElementVNode("div", {
-                            class: "subject-progress-item",
-                            onClick: changeTime,
-                            onMousemove: mouseOverItem,
-                            onMouseleave: mouseLeaveItem,
-                            "data-start": sub.startTime,
-                            "data-end": sub.endTime,
-                            style: normalizeStyle({
-                              "--start": (sub.startTimeNumber < 0 ? 0 : sub.startTimeNumber) / playerDuration.value,
-                              "--end": (sub.endTimeNumber > playerDuration.value ? playerDuration.value : sub.endTimeNumber) / playerDuration.value,
-                              background: getProgressColor(idx)
-                            })
-                          }, null, 44, _hoisted_14)
-                        ])) : createCommentVNode("", true)
-                      ]);
-                    }), 128))
-                  ])) : createCommentVNode("", true)
+                  createElementVNode("div", {
+                    class: "tab-content-inner",
+                    ref_key: "contentRef",
+                    ref: contentRef
+                  }, [
+                    tab.value === tabOptions.value[0].value ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                      createElementVNode("div", _hoisted_7, [
+                        createElementVNode("span", null, toDisplayString(unref(t)("meeting.item1")), 1),
+                        createElementVNode("span", null, toDisplayString(__props.detail.sponsor), 1)
+                      ]),
+                      createElementVNode("div", _hoisted_8, [
+                        createElementVNode("span", null, toDisplayString(unref(t)("meeting.item2")), 1),
+                        createElementVNode("span", null, toDisplayString(__props.detail.groupName), 1)
+                      ]),
+                      createElementVNode("div", _hoisted_9, [
+                        createElementVNode("span", null, toDisplayString(unref(t)("meeting.item3")), 1),
+                        createElementVNode("span", null, toDisplayString(__props.detail.date) + "  " + toDisplayString(__props.detail.start) + "~" + toDisplayString(__props.detail.end), 1)
+                      ]),
+                      createElementVNode("div", _hoisted_10, [
+                        createElementVNode("span", null, toDisplayString(unref(t)("meeting.item4")), 1),
+                        createElementVNode("span", null, toDisplayString(__props.detail.agenda || "-"), 1)
+                      ])
+                    ])) : createCommentVNode("", true),
+                    tab.value === ((_a2 = tabOptions.value[1]) == null ? void 0 : _a2.value) ? (openBlock(), createElementBlock("div", _hoisted_11, [
+                      mouseTime.value ? (openBlock(), createElementBlock("div", {
+                        key: 0,
+                        class: "mouse-current-time",
+                        style: normalizeStyle({
+                          top: mousePosition.value[1],
+                          left: mousePosition.value[0]
+                        })
+                      }, toDisplayString(mouseTime.value), 5)) : createCommentVNode("", true),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(subjectList.value, (sub, idx) => {
+                        return openBlock(), createElementBlock("div", {
+                          class: "subject-item",
+                          key: sub.title
+                        }, [
+                          createElementVNode("div", _hoisted_12, toDisplayString(sub.title), 1),
+                          playerDuration.value ? (openBlock(), createElementBlock("div", _hoisted_13, [
+                            createElementVNode("div", {
+                              class: "subject-progress-item",
+                              onClick: changeTime,
+                              onMousemove: mouseOverItem,
+                              onMouseleave: mouseLeaveItem,
+                              "data-start": sub.startTime,
+                              "data-end": sub.endTime,
+                              style: normalizeStyle({
+                                "--start": (sub.startTimeNumber < 0 ? 0 : sub.startTimeNumber) / playerDuration.value,
+                                "--end": (sub.endTimeNumber > playerDuration.value ? playerDuration.value : sub.endTimeNumber) / playerDuration.value,
+                                background: getProgressColor(idx)
+                              })
+                            }, null, 44, _hoisted_14)
+                          ])) : createCommentVNode("", true)
+                        ]);
+                      }), 128))
+                    ])) : createCommentVNode("", true)
+                  ], 512),
+                  createElementVNode("span", {
+                    class: "more-btn",
+                    onClick: toggleExpanded
+                  }, [
+                    createElementVNode("span", null, toDisplayString(expanded.value ? unref(t)("common.collapse") : unref(t)("common.viewMore")), 1),
+                    createVNode(unref(OIcon), null, {
+                      default: withCtx(() => [
+                        createVNode(unref(OIconChevronDown))
+                      ]),
+                      _: 1
+                    })
+                  ])
                 ];
               }),
               _: 1
@@ -308,7 +378,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             height: rightHeight.value
           })
         }, [
-          createVNode(_sfc_main$2, {
+          createVNode(_sfc_main$3, {
             captions: captionsList.value,
             trackIdx: trackIdx.value,
             instance: playbackInstance.value

package/dist/treeshaking/components/meeting/components/OMeetingCalendarList.css

@@ -23,13 +23,14 @@
   --icon-size2: 24px;
   --icon-right: 12px;
 }
-@media (max-width: 1200px) {
+@media (max-width: 1680px) {
 .o-meeting-calendar-list .o-collapse {
     --icon-size2: 20px;
 }
 }
 @media (max-width: 840px) {
 .o-meeting-calendar-list .o-collapse {
+    --icon-size2: 16px;
     --icon-right: 8px;
 }
 }
@@ -346,13 +347,10 @@
 }
 .o-meeting-calendar-list .o-collapse .meet-title .text {
   display: block;
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
   font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: break-all;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
 }
 .o-meeting-calendar-list .o-collapse .meet-info {
   display: flex;

package/dist/treeshaking/components/meeting/components/OMeetingCalendarList.vue.mjs

@@ -13,7 +13,7 @@ import _sfc_main$2 from "../../common/TooltipText.vue.mjs";
 import '../../common/TooltipText.css';
 import dayjs from "dayjs";
 const _hoisted_1 = { class: "meet-title-left" };
-const _hoisted_2 = ["title"];
+const _hoisted_2 = { class: "meet-title" };
 const _hoisted_3 = { class: "text" };
 const _hoisted_4 = { class: "item-title-text" };
 const _hoisted_5 = {
@@ -242,10 +242,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, {
                 title: withCtx(() => [
                   createElementVNode("div", _hoisted_1, [
-                    createElementVNode("div", {
-                      class: "meet-title",
-                      title: item.topic || item.name || item.title
-                    }, [
+                    createElementVNode("div", _hoisted_2, [
                       createVNode(unref(OIcon), {
                         style: normalizeStyle({
                           backgroundColor: `${unref(getConfig)(item.type, "color")}`
@@ -275,7 +272,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           _: 1
                         })
                       ])) : createCommentVNode("", true)
-                    ], 8, _hoisted_2),
+                    ]),
                     createElementVNode("div", {
                       class: "meet-info",
                       ref_for: true,

package/dist/treeshaking/components/meeting/components/OMeetingDetail.css

@@ -9,7 +9,7 @@
 .o-meeting-detail {
   position: relative;
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto minmax(0, 1fr);
   row-gap: var(--o-gap-2);
   column-gap: var(--o-gap-4);
 }

package/dist/treeshaking/components/meeting/components/OMeetingDetail.vue.mjs

@@ -1,11 +1,11 @@
-import { defineComponent, computed, ref, openBlock, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, createBlock, unref, withCtx, createTextVNode, createCommentVNode } from "vue";
+import { defineComponent, computed, ref, openBlock, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, createBlock, withCtx, createTextVNode, unref, createCommentVNode } from "vue";
 import { OLink } from "@opensig/opendesign";
 import { CalendarDataType } from "../types.mjs";
-import _sfc_main$1 from "../../common/MoreText.vue.mjs";
-import '../../common/MoreText.css';
 import { formatDate } from "../utils.mjs";
 import { useMeetingConfig } from "../composables/useMeetingConfig.mjs";
 import { useI18n } from "../../../i18n/index.mjs";
+import _sfc_main$1 from "../../common/TooltipText.vue.mjs";
+import '../../common/TooltipText.css';
 const _hoisted_1 = { class: "o-meeting-detail" };
 const _hoisted_2 = { class: "label" };
 const _hoisted_3 = { key: 2 };
@@ -149,9 +149,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createElementVNode("span", { class: "split-mark" }, toDisplayString(SPLIT_MARK)),
               info.ellipsis ? (openBlock(), createBlock(_sfc_main$1, {
                 key: 0,
-                show: __props.show,
-                text: getField(info.key) || "-"
-              }, null, 8, ["show", "text"])) : info.isLink ? (openBlock(), createBlock(unref(OLink), {
+                lines: 3
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(getField(info.key) || "-"), 1)
+                ]),
+                _: 2
+              }, 1024)) : info.isLink ? (openBlock(), createBlock(unref(OLink), {
                 key: 1,
                 target: "_blank",
                 class: "value",

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

@@ -308,6 +308,27 @@
   display: flex;
   align-items: center;
   gap: var(--o-gap-4);
+  padding: var(--o-gap-5) var(--o-gap-5) 0 var(--o-gap-5);
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .search-captions {
+    padding: var(--o-gap-4) var(--o-gap-4) 0 var(--o-gap-4);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .search-captions {
+    padding: var(--o-gap-3) var(--o-gap-3) 0 var(--o-gap-3);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback-subtitles .search-captions {
+    padding: var(--o-gap-3) var(--o-gap-3) 0 var(--o-gap-3);
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .search-captions {
+    padding: var(--o-gap-3) var(--o-gap-3) 0 var(--o-gap-3);
+}
 }
 .o-meeting-playback-subtitles .search-captions .input-captions {
   --input-radius: var(--meeting-input-radius);
@@ -378,18 +399,122 @@
   height: calc(100% - 64px);
   --tab-nav-justify: flex-start;
 }
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .o-tab {
+    margin-top: var(--o-gap-4);
+}
+}
+@media (min-width: 601px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .o-tab {
+    margin-top: var(--o-gap-3);
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .o-tab {
+    margin-top: var(--o-gap-2);
+}
+}
+.o-meeting-playback-subtitles .o-tab .o-tab-head {
+  padding: 0 var(--o-gap-5);
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-head {
+    padding: 0 var(--o-gap-4);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-head {
+    padding: 0 var(--o-gap-3);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-head {
+    padding: 0 var(--o-gap-3);
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-head {
+    padding: 0 var(--o-gap-3);
+}
+}
 .o-meeting-playback-subtitles .o-tab .o-tab-nav-list {
   width: 100%;
 }
 .o-meeting-playback-subtitles .o-tab .o-tab-navs .o-tab-nav {
   padding-bottom: var(--o-gap-4);
 }
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-navs .o-tab-nav {
+    padding-bottom: var(--o-gap-3);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-navs .o-tab-nav {
+    padding-bottom: var(--o-gap-2);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-navs .o-tab-nav {
+    padding-bottom: var(--o-gap-3);
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-navs .o-tab-nav {
+    padding-bottom: var(--o-gap-1);
+}
+}
 .o-meeting-playback-subtitles .o-tab .o-tab-body {
   height: calc(100% - var(--o-line_height-text2) - var(--o-gap-4));
+  padding: 0 var(--o-gap-2) var(--o-gap-5) var(--o-gap-2);
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-body {
+    padding: 0 var(--o-gap-2) var(--o-gap-4) var(--o-gap-2);
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-body {
+    padding: 0 var(--o-gap-2) var(--o-gap-3) var(--o-gap-2);
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-body {
+    padding: 0 var(--o-gap-2) var(--o-gap-3) var(--o-gap-2);
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-body {
+    padding: 0 var(--o-gap-2) var(--o-gap-3) var(--o-gap-2);
+}
 }
 .o-meeting-playback-subtitles .o-tab .o-tab-body .o-tab-pane {
   height: 100%;
-  padding-top: var(--o-gap-5);
+  padding-top: calc(var(--o-gap-5) - var(--o-gap-2));
+  position: relative;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-body .o-tab-pane {
+    padding-top: calc(var(--o-gap-4) - var(--o-gap-2));
+}
+}
+@media (min-width: 601px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-body .o-tab-pane {
+    padding-top: calc(var(--o-gap-3) - var(--o-gap-2));
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .o-tab .o-tab-body .o-tab-pane {
+    padding-top: calc(var(--o-gap-3) - var(--o-gap-2));
+}
+}
+.o-meeting-playback-subtitles .o-tab .o-tab-body .o-tab-pane::after {
+  height: 24px;
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(180deg, rgba(var(--o-grey-1), 0), rgba(var(--o-grey-1), 1) 100%);
 }
 .o-meeting-playback-subtitles .o-tab .o-tab-body .o-tab-pane .o-scroller {
   height: 100%;
@@ -398,7 +523,7 @@
   width: calc(100% + 16px);
 }
 .o-meeting-playback-subtitles .o-tab .o-row {
-  margin-top: var(--o-gap-5);
+  margin-top: 0;
 }
 @media (max-width: 840px) {
 .o-meeting-playback-subtitles .captions-tab .captions-scroller {
@@ -406,7 +531,29 @@
 }
 }
 .o-meeting-playback-subtitles .captions-tab .captions-item {
-  padding: 4px 8px;
+  padding: var(--o-gap-2) calc(var(--o-gap-5) - var(--o-gap-2));
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item {
+    padding: var(--o-gap-2) calc(var(--o-gap-4) - var(--o-gap-2));
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item {
+    padding: var(--o-gap-2) calc(var(--o-gap-3) - var(--o-gap-2));
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item {
+    padding: var(--o-gap-2) calc(var(--o-gap-3) - var(--o-gap-2));
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item {
+    padding: var(--o-gap-2) calc(var(--o-gap-3) - var(--o-gap-2));
+}
+}
+.o-meeting-playback-subtitles .captions-tab .captions-item {
   cursor: pointer;
   border-radius: var(--meeting-cell-radius);
 }
@@ -461,8 +608,8 @@
 .o-meeting-playback-subtitles .captions-tab .captions-item .info .speaker {
   color: var(--o-color-info3);
   margin-left: 4px;
-  font-size: 12px;
-  line-height: 18px;
+  font-size: 14px;
+  line-height: 22px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
 .o-meeting-playback-subtitles .captions-tab .captions-item .info .speaker {
@@ -491,8 +638,8 @@
 .o-meeting-playback-subtitles .captions-tab .captions-item .info .start-time {
   color: var(--o-color-info3);
   margin-left: 16px;
-  font-size: 12px;
-  line-height: 18px;
+  font-size: 14px;
+  line-height: 22px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
 .o-meeting-playback-subtitles .captions-tab .captions-item .info .start-time {

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

@@ -76,14 +76,20 @@
 }
 .video-js {
   --right-size: 32px;
-  --right-icon-size: 24px;
+  --right-icon-size: 32px;
   --right-gap: 24px;
 }
 .video-js div.vjs-poster {
   position: absolute;
 }
+.video-js div.vjs-poster picture {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .video-js div.vjs-poster img {
   object-fit: cover;
+  max-width: 100%;
 }
 .video-js div.vjs-poster::after {
   content: "";
@@ -110,9 +116,10 @@
   width: 32px;
   height: 32px;
   margin-left: var(--o-gap-5);
+  margin-right: var(--o-gap-2);
 }
 .video-js .vjs-control-bar .vjs-play-control .vjs-icon-placeholder::before {
-  font-size: 24px;
+  font-size: 32px;
   line-height: 32px;
 }
 .video-js .vjs-control-bar .vjs-skip-backward-5 {

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

@@ -11,7 +11,7 @@ declare const _default: import('vue').DefineComponent<MeetingPlaybackVideoPropsT
     onSetTrackIdx?: ((...args: any[]) => any) | undefined;
 }>, {
     src: string;
-    captions: import('../../../index.ts').CaptionItemT[];
+    captions: import('..').CaptionItemT[];
     vtt: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;