@opendesign-plus-test/components 0.0.1-rc.65 → 0.0.1-rc.66

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

@@ -0,0 +1,103 @@
+.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);
+}
+}
+.o-meeting-detail {
+  position: relative;
+}
+.o-meeting-detail .label-item {
+  color: var(--o-color-info3);
+  display: flex;
+  align-items: flex-start;
+  font-size: 14px;
+  gap: var(--o-gap-2);
+}
+@media (max-width: 840px) {
+.o-meeting-detail .label-item {
+    font-size: 12px;
+    gap: var(--o-gap-1);
+}
+}
+.o-meeting-detail .label-item:not(.is-empty) {
+  margin-bottom: var(--o-gap-2);
+}
+.o-meeting-detail .label-item:last-child {
+  margin-bottom: 0;
+}
+.o-meeting-detail .label-item.record-item {
+  align-items: flex-start;
+}
+.o-meeting-detail .label-item.record-item .value {
+  margin-bottom: 0;
+}
+.o-meeting-detail .label-item .label {
+  width: 4em;
+  flex-shrink: 0;
+  display: flex;
+}
+.o-meeting-detail .label-item .label i {
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+.o-meeting-detail .label-item .split-mark {
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+.o-meeting-detail .label-item.type_events .label {
+  width: 6em;
+}
+.o-meeting-detail .label-item .o-link .o-link-main {
+  word-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+.o-meeting-detail .label-item .value {
+  word-wrap: break-word;
+  display: flex !important;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+.o-meeting-detail .label-item .value.link {
+  color: var(--o-color-primary1);
+  cursor: pointer;
+}
+.o-meeting-detail .label-item .value .extra {
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+.o-meeting-detail .label-item.is-empty {
+  margin: 0;
+}
+.o-meeting-detail .meeting-action {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--o-gap-2);
+}
+@media (max-width: 600px) {
+.o-meeting-detail .meeting-action {
+    border-top: 1px solid var(--o-color-control4);
+    padding-top: var(--o-gap-2);
+    position: static;
+    margin-top: var(--o-gap-2);
+}
+}

package/dist/cjs/components/meeting/components/OMeetingDetail.vue.js

@@ -0,0 +1,3 @@
+"use strict";const e=require("vue"),x=require("@opensig/opendesign"),m=require("../types.js"),f=require("../../common/MoreText.vue.js"),E=require("../utils.js"),C=require("../composables/useMeetingConfig.js"),R=require("../../../i18n/index.js"),S={class:"o-meeting-detail"},T={class:"label"},N={key:2},V={key:3,class:"value"},w={key:0,class:"extra"},M={class:"label"},g="|",P=e.defineComponent({__name:"OMeetingDetail",props:{data:{},from:{},show:{type:Boolean},page:{}},setup(o,{expose:v}){const r=o,{t,getPlatformLabel:_}=C.useMeetingConfig(),{locale:b}=R.useI18n(),D=e.computed(()=>b.value==="zh"),h=e.computed(()=>[{label:t("meeting.meetingDetail"),key:"agenda",ellipsis:!0},{label:t("meeting.meetingCreator"),key:"sponsor"},{label:t("meeting.meetingDate2"),key:"timeRange",extra:"date"},{label:t("meeting.meetingId"),key:"mid"},{label:t("meeting.meetingPlatform"),key:"platform"},{label:t("meeting.meetingLink"),key:"join_url",isLink:!0},{label:t("meeting.meetingEtherpad"),key:"etherpad",isLink:!0},{label:t("meeting.meetingReplay"),key:"replay_url",isLink:!0}].slice(0,r.from==="my"?7:8)),d=e.computed(()=>{var n;const l=!!((n=r.data.live_url)!=null&&n.length);return[{label:t("meeting.activityDetail2"),key:"agenda",ellipsis:!0},{label:t("meeting.startDate"),key:"start_date_time"},{label:t("meeting.endDate"),key:"end_date_time"},{label:t("meeting.registrationDeadline"),key:"register_end_date"},{label:t(l?"meeting.livePlatform":"meeting.activityAddress"),key:l?"live_url":"address"},{label:t("meeting.activityDetailUrl"),key:"content_url",isLink:!0},{label:t("meeting.activityApprover"),key:"approver"},{label:t("meeting.reviewNotesLabel"),key:"approve_record",isRecord:!0}].slice(0,r.from==="home"?5:8)}),B=e.computed(()=>{var n;const l=!!((n=r.data.live_url)!=null&&n.length);return[{label:t("meeting.activityType"),key:"activity_type",isType:!0},{label:t(l?"meeting.livePlatform":"meeting.activityAddress"),key:l?"live_url":"address"},{label:t("meeting.startDate"),key:"start_date_time"},{label:t("meeting.endDate"),key:"end_date_time"},{label:t("meeting.registrationDeadline"),key:"register_end_date"},{label:t("meeting.registrationUrl"),key:"register_url",isLink:!0},{label:t("meeting.activityDetailUrl"),key:"content_url",isLink:!0},{label:t("meeting.activityApprover"),key:"approver"},{label:t("meeting.reviewNotesLabel"),key:"approve_record",isRecord:!0}]}),i=l=>r.data[l],L=e.computed(()=>r.data.type===m.CalendarDataType.EVENTS?r.page===m.CalendarDataType.APPROVAL?B.value:d.value:r.data.type===m.CalendarDataType.SUMMIT?d.value:h.value),y=e.ref([]);return v({copyInfo:()=>{try{const l=D.value?"：":": ";let n=`${t("meeting.meetingTopic")}${l}${r.data.topic||r.data.name||r.data.title}
+`;return n+=[...y.value].reduce((a,s)=>`${a}${s.textContent?s.textContent.replace(g,l):""}
+`,""),navigator.clipboard.writeText(n),Promise.resolve()}catch(l){return Promise.reject(l)}}}),(l,n)=>(e.openBlock(),e.createElementBlock("div",S,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(L.value,(a,s)=>{var p,k,u;return e.openBlock(),e.createElementBlock("div",{ref_for:!0,ref_key:"domRef",ref:y,class:e.normalizeClass(["label-item",{"record-item":a.isRecord&&((p=i(a.key))==null?void 0:p.length),"link-item":a.isLink,"is-empty":!((k=i(a.key))!=null&&k.length),[`label-item_${o.data.id}`]:!0,[`type_${o.data.type}`]:!0}]),key:s},[i(a.key)&&!a.isRecord?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("span",T,e.toDisplayString(a.label),1),e.createElementVNode("span",{class:"split-mark"},e.toDisplayString(g)),a.ellipsis?(e.openBlock(),e.createBlock(f,{key:0,show:o.show,text:i(a.key)||"-"},null,8,["show","text"])):a.isLink?(e.openBlock(),e.createBlock(e.unref(x.OLink),{key:1,target:"_blank",class:"value",color:"primary","hover-underline":"",href:i(a.key)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i(a.key)),1)]),_:2},1032,["href"])):a.key==="platform"?(e.openBlock(),e.createElementBlock("span",N,e.toDisplayString(e.unref(_)(i(a.key))),1)):(e.openBlock(),e.createElementBlock("span",V,[a.extra?(e.openBlock(),e.createElementBlock("i",w,e.toDisplayString(i(a.extra)),1)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(i(a.key)||"-"),1)]))],64)):e.createCommentVNode("",!0),a.isRecord&&((u=i(a.key))!=null&&u.length)?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("span",M,e.toDisplayString(a.label),1),e.createElementVNode("div",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i(a.key),c=>(e.openBlock(),e.createElementBlock("p",{key:c.create_time,class:"value"},e.toDisplayString(c.reason)+"   "+e.toDisplayString(e.unref(E.formatDate)(c.create_time,"YYYY/MM/DD HH:mm:ss"))+" "+e.toDisplayString(c.action===1?e.unref(t)("meeting.approveReview"):e.unref(t)("meeting.rejectReview")),1))),128))])],64)):e.createCommentVNode("",!0)],2)}),128))]))}});module.exports=P;

package/dist/cjs/components/meeting/components/OMeetingDetail.vue3.js

@@ -0,0 +1 @@
+"use strict";const e=require("./OMeetingDetail.vue.js");;require('./OMeetingDetail.css');module.exports=e;

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

@@ -0,0 +1,537 @@
+.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 {
+  --el-color-primary: var(--o-color-primary1);
+  --el-border-color: var(--o-color-control1);
+  --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 {
+    --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) 0 0 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: 0 var(--cell-radius) var(--cell-radius) 0;
+}
+: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 {
+  background: var(--o-color-fill2);
+  box-shadow: none;
+  border: 1px solid var(--el-input-border-color);
+}
+:root .el-select__wrapper {
+  background: var(--o-color-fill2);
+}
+: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-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-number--large {
+  line-height: var(--el-component-size-large);
+}
+.o-meeting-playback-subtitles {
+  width: 100%;
+  height: 100%;
+  min-height: calc(var(--layout-content-min-height) - 104px);
+  background-color: var(--o-color-fill2);
+  border-radius: var(--meeting-card-radius);
+}
+.o-meeting-playback-subtitles .search-captions {
+  display: flex;
+  align-items: center;
+  gap: var(--o-gap-4);
+}
+.o-meeting-playback-subtitles .search-captions .input-captions {
+  --input-radius: var(--meeting-input-radius);
+  --_box-radius: var(--meeting-input-radius);
+  flex-grow: 1;
+}
+.o-meeting-playback-subtitles .search-captions .input-captions .o-icon {
+  font-size: 24px;
+}
+.o-meeting-playback-subtitles .search-captions .input-captions .suffix-box {
+  display: flex;
+  align-items: center;
+  gap: var(--o-gap-2);
+}
+.o-meeting-playback-subtitles .search-captions .input-captions .suffix-box .o-icon {
+  font-size: 20px;
+  cursor: pointer;
+}
+@media (hover: hover) {
+.o-meeting-playback-subtitles .search-captions .input-captions .suffix-box .o-icon:hover {
+    color: var(--o-color-primary1);
+}
+}
+.o-meeting-playback-subtitles .search-captions .input-captions .suffix-box .o-divider {
+  --o-divider-label-gap: 0;
+}
+.o-meeting-playback-subtitles .search-captions .input-captions .suffix-box .hover-close {
+  width: 24px;
+  height: 24px;
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.o-meeting-playback-subtitles .search-captions .input-captions .suffix-box .hover-close:hover {
+    transform: rotate(-180deg);
+}
+}
+.o-meeting-playback-subtitles .search-captions .right-handle {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--o-gap-4);
+}
+.o-meeting-playback-subtitles .search-captions .right-handle .o-icon {
+  font-size: 16px;
+  cursor: pointer;
+  color: var(--o-color-info2);
+}
+@media (hover: hover) {
+.o-meeting-playback-subtitles .search-captions .right-handle .o-icon:hover {
+    color: var(--o-color-primary1);
+}
+}
+.o-meeting-playback-subtitles .search-captions .right-handle .speakers-selector {
+  --select-height: 16px;
+  height: fit-content;
+  width: fit-content;
+}
+.o-meeting-playback-subtitles .search-captions .right-handle .speakers-selector .el-select__wrapper {
+  box-shadow: none;
+  padding: 0;
+}
+.o-meeting-playback-subtitles .search-captions .right-handle .speakers-selector .el-select__selection,
+.o-meeting-playback-subtitles .search-captions .right-handle .speakers-selector .el-select__suffix {
+  display: none;
+}
+.o-meeting-playback-subtitles .o-tab {
+  margin-top: var(--o-gap-5);
+  height: calc(100% - 64px);
+  --tab-nav-justify: flex-start;
+}
+.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);
+}
+.o-meeting-playback-subtitles .o-tab .o-tab-body {
+  height: calc(100% - var(--o-line_height-text2) - var(--o-gap-4));
+}
+.o-meeting-playback-subtitles .o-tab .o-tab-body .o-tab-pane {
+  height: 100%;
+  padding-top: var(--o-gap-5);
+}
+.o-meeting-playback-subtitles .o-tab .o-tab-body .o-tab-pane .o-scroller {
+  height: 100%;
+}
+.o-meeting-playback-subtitles .o-tab .o-tab-body .o-tab-pane .o-scroller .o-scrollbar {
+  width: calc(100% + 16px);
+}
+.o-meeting-playback-subtitles .o-tab .o-row {
+  margin-top: var(--o-gap-5);
+}
+@media (max-width: 840px) {
+.o-meeting-playback-subtitles .captions-tab .captions-scroller {
+    max-height: 600px;
+}
+}
+.o-meeting-playback-subtitles .captions-tab .captions-item {
+  padding: 4px 8px;
+  cursor: pointer;
+  border-radius: var(--meeting-cell-radius);
+}
+@media (hover: hover) {
+.o-meeting-playback-subtitles .captions-tab .captions-item:hover {
+    background-color: rgba(var(--o-blue-6), 0.1);
+}
+}
+.o-meeting-playback-subtitles .captions-tab .captions-item.captions-item-active {
+  background-color: rgba(var(--o-blue-6), 0.1);
+}
+.o-meeting-playback-subtitles .captions-tab .captions-item .info {
+  display: flex;
+  align-items: center;
+}
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .num {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--o-color-primary1);
+  color: var(--o-color-info1-inverse);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  line-height: 18px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .num {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .num {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .num {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .num {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .speaker {
+  color: var(--o-color-info3);
+  margin-left: 4px;
+  font-size: 12px;
+  line-height: 18px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .speaker {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .speaker {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .speaker {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .speaker {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.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;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .start-time {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .start-time {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .start-time {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .start-time {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .playing {
+  margin-left: 16px;
+  color: var(--o-color-primary1);
+}
+.o-meeting-playback-subtitles .captions-tab .captions-item .info .playing svg {
+  width: 16px;
+  height: 16px;
+}
+.o-meeting-playback-subtitles .captions-tab .captions-item .text {
+  color: var(--o-color-info2);
+  margin-top: 8px;
+  font-size: 16px;
+  line-height: 24px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .text {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .text {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .text {
+    font-size: 14px;
+    line-height: 22px;
+}
+}
+@media (max-width: 600px) {
+.o-meeting-playback-subtitles .captions-tab .captions-item .text {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-meeting-playback-subtitles .captions-tab .captions-item .text .light-keyword {
+  background-color: rgba(var(--o-blue-6), 0.2);
+}
+.o-meeting-playback-subtitles .captions-tab .captions-item .text .light-keyword-active {
+  background-color: rgba(var(--o-blue-6), 0.4);
+}

package/dist/cjs/components/meeting/components/OMeetingPlaybackSubtitles.vue.js

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),a=require("@opensig/opendesign"),V=require("element-plus");require("element-plus/es/components/select/style/css");require("element-plus/es/components/checkbox/style/css");require("element-plus/es/components/option/style/css");const R=require("../../../icons/icon-playing.js"),j=require("../../../icons/icon-search.js"),G=require("../../../icons/icon-chevron-down.js"),J=require("../../../icons/icon-chevron-up.js"),Q=require("../../../icons/icon-close.js"),W=require("../../../icons/icon-speaker.js"),O=require("@vueuse/core"),X=require("../../../i18n/index.js"),Y=require("vue-dompurify-html"),Z={class:"o-meeting-playback-subtitles"},ee={class:"search-captions"},te={key:0,class:"suffix-box"},le={class:"right-handle"},oe=["onClick"],ne={class:"info"},ae={class:"num"},re={class:"speaker"},se={class:"start-time"},ce={class:"text"},ie={key:1},ue=e.defineComponent({__name:"OMeetingPlaybackSubtitles",props:{captions:{default:()=>[]},instance:{},trackIdx:{}},setup(I){const L=Y.buildVueDompurifyHTMLDirective(),u=I,{t:x}=X.useI18n(),f=e.computed(()=>u.trackIdx),n=e.ref(),m=e.ref(!1),g=()=>{m.value=!0},H=O.useDebounceFn(()=>{m.value=!1},3e3);e.watch(()=>m.value,t=>{t&&H()});const v=e.ref([]);e.watch(()=>u.captions,()=>{v.value=u.captions||[],e.nextTick(()=>{var t;n.value&&((t=n.value)==null||t.scrollTo({top:0,behavior:"smooth"}))})},{immediate:!0,deep:!0});const F=t=>`00:${t.split(".")[0]}`.slice(-8),K=t=>{const o=t.split(":"),l=o[o.length-3]?parseInt(o[o.length-3]):0,r=parseInt(o[o.length-2]),w=parseFloat(o[o.length-1]);return l*60*60+r*60+w};e.onMounted(()=>{var t;n.value=document.querySelector("#captionsScrollDom > .o-scroller-container"),(t=n.value)==null||t.addEventListener("wheel",g)}),e.watch(()=>v.value,()=>{var t;n.value=document.querySelector("#captionsScrollDom > .o-scroller-container"),(t=n.value)==null||t.addEventListener("wheel",g)});const C=e.ref(0),P=()=>{},U=t=>{const o=u.instance;if(!o)return;const l=K(t);o.currentTime(l)},i=e.ref(""),d=e.ref(0),s=e.ref(0),c=e.ref([]),A=x("common.all"),h=e.computed(()=>[...new Set(u.captions.map(t=>t.speakerLabel).sort().reverse())]);e.watch(()=>f.value,()=>{var o,l;if(m.value&&i.value)return;const t=(o=n.value)==null?void 0:o.querySelectorAll(".captions-item")[f.value-1];(l=n.value)==null||l.scrollTo({top:(t==null?void 0:t.offsetTop)-16,behavior:"smooth"})}),e.onUnmounted(()=>{n.value&&n.value.removeEventListener("wheel",g)});const b=(t,o)=>{var T,E,S,B,D,q;const l=document.getElementsByClassName("light-keyword")[t-1],r=document.getElementsByClassName("light-keyword")[t-o];r==null||r.classList.remove("light-keyword-active"),l==null||l.classList.add("light-keyword-active");const w=l.offsetTop+l.offsetHeight<((T=n.value)==null?void 0:T.scrollTop),z=l.offsetTop>((E=n.value)==null?void 0:E.offsetHeight)+((S=n.value)==null?void 0:S.scrollTop);(w||z)&&((q=n.value)==null||q.scrollTo({top:(D=(B=l.parentElement)==null?void 0:B.parentElement)==null?void 0:D.offsetTop,behavior:"smooth"}))},N=()=>{!d.value||s.value===1||(s.value--,b(s.value,0))},y=t=>{t!=null&&t.shiftKey||!d.value||s.value===d.value||(s.value++,b(s.value,2))},$=t=>{v.value=u.captions.filter(o=>c.value.includes(o.speakerLabel)).map(o=>({...o,contentHtml:t?o.contentHtml.replaceAll(t,`<span class="light-keyword">${t}</span>`):o.contentHtml})),e.nextTick(()=>{var l;const o=document.getElementsByClassName("light-keyword");d.value=o.length,d.value?y():(l=n.value)==null||l.scrollTo({top:0,behavior:"smooth"})})},_=O.useDebounceFn($,300);e.watch(()=>i.value,t=>{s.value=0,_(t)}),e.watch(()=>h.value,t=>{c.value=t},{immediate:!0});const k=e.ref(!1),p=e.ref(!1),M=t=>{p.value=!1,t?c.value=h.value:c.value=[]};return e.watch(()=>c.value,t=>{t.length===0?(k.value=!1,p.value=!1):t.length===h.value.length?(k.value=!0,p.value=!1):p.value=!0,_(i.value)},{deep:!0}),(t,o)=>(e.openBlock(),e.createElementBlock("div",Z,[e.createElementVNode("div",ee,[e.createVNode(e.unref(a.OInput),{modelValue:i.value,"onUpdate:modelValue":o[1]||(o[1]=l=>i.value=l),onKeydown:[e.withKeys(y,["enter"]),e.withKeys(e.withModifiers(N,["shift","stop"]),["enter"])],placeholder:e.unref(x)("meeting.searchSubtitlePlaceholder"),size:"large",class:"input-captions"},{prefix:e.withCtx(()=>[e.createVNode(e.unref(a.OIcon),null,{default:e.withCtx(()=>[e.createVNode(e.unref(j))]),_:1})]),suffix:e.withCtx(()=>[i.value?(e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("span",null,e.toDisplayString(s.value)+"/"+e.toDisplayString(d.value),1),e.createVNode(e.unref(a.OIcon),{onClick:N},{default:e.withCtx(()=>[e.createVNode(e.unref(J))]),_:1}),e.createVNode(e.unref(a.OIcon),{onClick:y},{default:e.withCtx(()=>[e.createVNode(e.unref(G))]),_:1}),e.createVNode(e.unref(a.ODivider),{direction:"v"}),e.createVNode(e.unref(a.OIcon),{class:"hover-close",onClick:o[0]||(o[0]=l=>i.value="")},{default:e.withCtx(()=>[e.createVNode(e.unref(Q))]),_:1})])):e.createCommentVNode("",!0)]),_:1},8,["modelValue","onKeydown","placeholder"]),e.createElementVNode("div",le,[e.createVNode(e.unref(V.ElSelect),{multiple:"",modelValue:c.value,"onUpdate:modelValue":o[3]||(o[3]=l=>c.value=l),"popper-class":"speakers-selector-popper",class:"speakers-selector",placement:"bottom"},{prefix:e.withCtx(()=>[e.createVNode(e.unref(a.OIcon),null,{default:e.withCtx(()=>[e.createVNode(e.unref(W))]),_:1})]),header:e.withCtx(()=>[e.createVNode(e.unref(V.ElCheckbox),{modelValue:k.value,"onUpdate:modelValue":o[2]||(o[2]=l=>k.value=l),indeterminate:p.value,onChange:M},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(e.unref(A)),1)]),_:1},8,["modelValue","indeterminate"])]),default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,l=>(e.openBlock(),e.createBlock(e.unref(V.ElOption),{key:l,label:l,value:l},{default:e.withCtx(()=>[e.createVNode(e.unref(V.ElCheckbox),{"model-value":c.value.includes(l)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l),1)]),_:2},1032,["model-value"])]),_:2},1032,["label","value"]))),128))]),_:1},8,["modelValue"])])]),e.createVNode(e.unref(a.OTab),{modelValue:C.value,"onUpdate:modelValue":o[4]||(o[4]=l=>C.value=l),variant:"text",class:"captions-tab",onChange:P,"max-show":9999},{default:e.withCtx(()=>[e.createVNode(e.unref(a.OTabPane),{value:0,label:e.unref(x)("meeting.audioToText")},{default:e.withCtx(()=>[v.value.length?(e.openBlock(),e.createBlock(e.unref(a.OScroller),{key:0,id:"captionsScrollDom",class:"captions-scroller","show-type":"hover",size:"small","disabled-x":""},{default:e.withCtx(()=>[e.createVNode(e.unref(a.ORow),{gap:"0 8px",wrap:"wrap"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.value,(l,r)=>(e.openBlock(),e.createBlock(e.unref(a.OCol),{flex:"0 0 100%",key:r},{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["captions-item",{"captions-item-active":f.value===r+1}]),onClick:w=>U(l.start_time)},[e.createElementVNode("div",ne,[e.createElementVNode("div",ae,e.toDisplayString(l.speakerIdx),1),e.createElementVNode("div",re,e.toDisplayString(l.speakerLabel),1),e.createElementVNode("div",se,e.toDisplayString(F(l.start_time)),1),f.value===r+1?(e.openBlock(),e.createBlock(e.unref(a.OIcon),{key:0,class:"playing initial-fill"},{default:e.withCtx(()=>[e.createVNode(e.unref(R))]),_:1})):e.createCommentVNode("",!0)]),e.withDirectives(e.createElementVNode("div",ce,null,512),[[e.unref(L),l.contentHtml]])],10,oe)]),_:2},1024))),128))]),_:1})]),_:1})):(e.openBlock(),e.createElementBlock("div",ie,[e.renderSlot(t.$slots,"empty")]))]),_:3},8,["label"])]),_:3},8,["modelValue"])]))}});module.exports=ue;

package/dist/cjs/components/meeting/components/OMeetingPlaybackSubtitles.vue4.js

@@ -0,0 +1 @@
+"use strict";const e=require("./OMeetingPlaybackSubtitles.vue.js");;require('./OMeetingPlaybackSubtitles.css');;require('./OMeetingPlaybackSubtitles2.css');module.exports=e;