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

package/src/components/meeting/components/OMeetingPlaybackSubtitles.vue

@@ -1,611 +0,0 @@
-<script setup lang="ts">
-import {
-  OCol,
-  ODivider,
-  OIcon,
-  OInput,
-  ORow,
-  OScroller,
-  OTab,
-  OTabPane,
-} from '@opensig/opendesign';
-import { ElSelect, ElCheckbox, ElOption, type CheckboxValueType } from 'element-plus';
-import IconPlaying from '~icons/meeting/icon-playing.svg';
-import IconSearch from '~icons/components/icon-search.svg';
-import IconChevronDown from '~icons/components/icon-chevron-down.svg';
-import IconChevronUp from '~icons/components/icon-chevron-up.svg';
-import IconClose from '~icons/components/icon-close.svg';
-import IconSpeaker from '~icons/meeting/icon-speaker.svg';
-import { useDebounceFn } from '@vueuse/core';
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
-import { useI18n } from '@/i18n';
-import { buildVueDompurifyHTMLDirective } from 'vue-dompurify-html';
-import { CaptionItemT, MeetingPlaybackSubtitlesPropsT } from '@/components/meeting';
-
-// 局部注册 v-dompurify-html 指令
-const vDompurifyHtml = buildVueDompurifyHTMLDirective();
-
-const props = withDefaults(
-  defineProps<MeetingPlaybackSubtitlesPropsT>(),
-  {
-    captions: () => [],
-  },
-);
-
-const { t } = useI18n();
-const currentIndex = computed(() => props.trackIdx);
-
-
-// -------------------- 右侧字幕原文鼠标滚动事件 --------------------
-const scrollContainer = ref();
-const wheelVisible = ref(false);
-const handleScroll = () => {
-  wheelVisible.value = true;
-};
-const debounceFn = useDebounceFn(() => {
-  wheelVisible.value = false;
-}, 3000);
-
-watch(
-  () => wheelVisible.value,
-  (val) => {
-    if (val) {
-      debounceFn();
-    }
-  },
-);
-
-// -------------------- 右侧的字幕原文 --------------------
-const computedCaptions = ref<CaptionItemT[]>([]);
-watch(
-  () => props.captions,
-  () => {
-    computedCaptions.value = props.captions || [];
-    nextTick(() => {
-      if (scrollContainer.value) {
-        scrollContainer.value?.scrollTo({
-          top: 0,
-          behavior: 'smooth',
-        });
-      }
-    });
-  },
-  {
-    immediate: true,
-    deep: true,
-  },
-);
-
-// 处理时间
-const formatTime = (num: string) => {
-  const time = num.split('.')[0];
-  return (`00:${ time }`).slice(-8);
-};
-
-// 时分秒 转换成 以秒为单位的格式 - xx秒
-const transformTime = (time: string) => {
-  const arr = time.split(':');
-  const hh = arr[arr.length - 3] ? parseInt(arr[arr.length - 3]) : 0;
-  const mm = parseInt(arr[arr.length - 2]);
-  const ss = parseFloat(arr[arr.length - 1]);
-
-  return hh * 60 * 60 + mm * 60 + ss;
-};
-
-onMounted(() => {
-  scrollContainer.value = document.querySelector('#captionsScrollDom > .o-scroller-container');
-  scrollContainer.value?.addEventListener('wheel', handleScroll);
-});
-
-watch(
-  () => computedCaptions.value,
-  () => {
-    scrollContainer.value = document.querySelector('#captionsScrollDom > .o-scroller-container');
-    scrollContainer.value?.addEventListener('wheel', handleScroll);
-  },
-);
-
-const activeTab = ref(0);
-const changeTab = () => {
-};
-const videoPosition = (time: string) => {
-  const player = props.instance;
-  if (!player) {
-    return;
-  }
-
-  const startTime = transformTime(time);
-
-  player.currentTime(startTime);
-};
-
-// -------------------- 搜索 --------------------
-const searchValue = ref('');
-const total = ref(0);
-const current = ref(0);
-
-const speakers = ref<string[]>([]);
-const ALL = t('common.all');
-const options = computed(() => {
-  return [
-    ...new Set(
-      props.captions
-        .map((item) => item.speakerLabel)
-        .sort()
-        .reverse(),
-    ),
-  ];
-});
-watch(
-  () => currentIndex.value,
-  () => {
-    if (wheelVisible.value && searchValue.value) {
-      return;
-    }
-    const captionActive = scrollContainer.value?.querySelectorAll('.captions-item')[currentIndex.value - 1];
-
-    scrollContainer.value?.scrollTo({
-      top: captionActive?.offsetTop - 16,
-      behavior: 'smooth',
-    });
-  },
-);
-
-onUnmounted(() => {
-  if (scrollContainer.value) {
-    scrollContainer.value.removeEventListener('wheel', handleScroll);
-  }
-});
-
-// 搜索定位
-const searchLocate = (step: number, val: number) => {
-  const currentLight = document.getElementsByClassName('light-keyword')[step - 1] as HTMLDivElement;
-  const nextLight = document.getElementsByClassName('light-keyword')[step - val];
-  nextLight?.classList.remove('light-keyword-active');
-  currentLight?.classList.add('light-keyword-active');
-
-  // 定位
-  const aboveVisible = currentLight.offsetTop + currentLight.offsetHeight < scrollContainer.value?.scrollTop; // 是否未到屏幕显示区域
-  const exceedVisible = currentLight.offsetTop > scrollContainer.value?.offsetHeight + scrollContainer.value?.scrollTop; // 是否超出屏幕
-  if (aboveVisible || exceedVisible) {
-    scrollContainer.value?.scrollTo({
-      top: currentLight.parentElement?.parentElement?.offsetTop,
-      behavior: 'smooth',
-    });
-  }
-};
-
-
-// 上一个
-const prevKeyword = () => {
-  if (!total.value || current.value === 1) {
-    return;
-  }
-
-  current.value--;
-
-  searchLocate(current.value, 0);
-};
-
-// 下一个
-const nextKeyword = (e?: any) => {
-  if (e?.shiftKey) {
-    return;
-  }
-  if (!total.value || current.value === total.value) {
-    return;
-  }
-
-  current.value++;
-
-  searchLocate(current.value, 2);
-};
-// 高亮匹配
-const highlightText = (val: string) => {
-  computedCaptions.value = props.captions!.filter((v) => {
-      return speakers.value.includes(v.speakerLabel);
-    })
-    .map((item) => {
-      return {
-        ...item,
-        contentHtml: val ? item.contentHtml.replaceAll(val, `<span class="light-keyword">${ val }</span>`) : item.contentHtml,
-      };
-    });
-
-  nextTick(() => {
-    const lightAll = document.getElementsByClassName('light-keyword');
-    total.value = lightAll.length;
-    if (total.value) {
-      nextKeyword();
-    } else {
-      scrollContainer.value?.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-      });
-    }
-  });
-};
-
-const debounceTextFn = useDebounceFn(highlightText, 300);
-
-// 监听搜索参数变化
-watch(
-  () => searchValue.value,
-  (val) => {
-    current.value = 0;
-    debounceTextFn(val);
-  },
-);
-
-// 监听 options 变化，同步更新 speakers
-watch(
-  () => options.value,
-  (newVal) => {
-    speakers.value = newVal;
-  },
-  { immediate: true },
-);
-
-const checkAll = ref(false);
-const indeterminate = ref(false);
-const handleCheckAll = (checked: CheckboxValueType) => {
-  indeterminate.value = false;
-  if (checked) {
-    speakers.value = options.value;
-  } else {
-    speakers.value = [];
-  }
-};
-
-watch(
-  () => speakers.value,
-  (val) => {
-    if (val.length === 0) {
-      checkAll.value = false;
-      indeterminate.value = false;
-    } else if (val.length === options.value.length) {
-      checkAll.value = true;
-      indeterminate.value = false;
-    } else {
-      indeterminate.value = true;
-    }
-    debounceTextFn(searchValue.value);
-  },
-  { deep: true },
-);
-</script>
-
-<template>
-  <div class="o-meeting-playback-subtitles">
-    <div class="search-captions">
-      <OInput
-        v-model="searchValue"
-        @keydown.enter="nextKeyword"
-        @keydown.shift.enter.stop="prevKeyword"
-        :placeholder="t('meeting.searchSubtitlePlaceholder')"
-        size="large"
-        class="input-captions"
-      >
-        <template #prefix>
-          <OIcon>
-            <IconSearch />
-          </OIcon>
-        </template>
-        <template #suffix>
-          <div v-if="searchValue" class="suffix-box">
-            <span>{{ current }}/{{ total }}</span>
-            <OIcon @click="prevKeyword">
-              <IconChevronUp />
-            </OIcon>
-            <OIcon @click="nextKeyword">
-              <IconChevronDown />
-            </OIcon>
-            <ODivider direction="v" />
-            <OIcon class="hover-close" @click="searchValue = ''">
-              <IconClose />
-            </OIcon>
-          </div>
-        </template>
-      </OInput>
-      <div class="right-handle">
-        <ElSelect
-          multiple
-          v-model="speakers"
-          popper-class="speakers-selector-popper"
-          class="speakers-selector"
-          placement="bottom">
-          <template #prefix>
-            <OIcon>
-              <IconSpeaker />
-            </OIcon>
-          </template>
-          <template #header>
-            <ElCheckbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">{{ ALL }}
-            </ElCheckbox>
-          </template>
-          <ElOption v-for="t in options" :key="t" :label="t" :value="t">
-            <ElCheckbox :model-value="speakers.includes(t)">{{ t }}</ElCheckbox>
-          </ElOption>
-        </ElSelect>
-      </div>
-    </div>
-    <OTab v-model="activeTab" variant="text" class="captions-tab" @change="changeTab">
-      <OTabPane :value="0" :label="t('meeting.audioToText')">
-        <OScroller v-if="computedCaptions.length" id="captionsScrollDom" class="captions-scroller" show-type="hover"
-                   size="small" disabled-x>
-          <ORow gap="0 12px" wrap="wrap">
-            <OCol flex="0 0 100%" v-for="(item, i) in computedCaptions" :key="i">
-              <div class="captions-item" :class="{ 'captions-item-active': currentIndex === i + 1 }"
-                   @click="videoPosition(item.start_time)">
-                <div class="info">
-                  <div class="num">{{ item.speakerIdx }}</div>
-                  <div class="speaker">{{ item.speakerLabel }}</div>
-                  <div class="start-time">{{ formatTime(item.start_time) }}</div>
-                  <OIcon v-if="currentIndex === i + 1" class="playing initial-fill">
-                    <IconPlaying />
-                  </OIcon>
-                </div>
-                <div class="text" v-dompurify-html="item.contentHtml"></div>
-              </div>
-            </OCol>
-          </ORow>
-        </OScroller>
-        <div v-else>111</div>
-        <!--        <AppEmpty v-else height="100%" />-->
-      </OTabPane>
-    </OTab>
-  </div>
-</template>
-
-<style lang="scss">
-.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(--o-radius-xs);
-
-  .search-captions {
-    display: flex;
-    align-items: center;
-    gap: var(--o-gap-4);
-
-    .input-captions {
-      --input-radius: var(--o-radius-xs);
-      --_box-radius: var(--o-radius-xs);
-      flex-grow: 1;
-
-      .o-icon {
-        font-size: 24px;
-      }
-
-      .suffix-box {
-        display: flex;
-        align-items: center;
-        gap: var(--o-gap-2);
-
-        .o-icon {
-          font-size: 20px;
-          cursor: pointer;
-          @include hover {
-            color: var(--o-color-primary1);
-          }
-        }
-
-        .o-divider {
-          --o-divider-label-gap: 0;
-        }
-
-        .hover-close {
-          width: 24px;
-          height: 24px;
-          transition: all var(--o-duration-m1) var(--o-easing-standard-in);
-          @include hover {
-            transform: rotate(-180deg);
-          }
-        }
-      }
-    }
-
-    .right-handle {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      gap: var(--o-gap-4);
-
-      .o-icon {
-        font-size: 16px;
-        cursor: pointer;
-        color: var(--o-color-info2);
-        @include hover {
-          color: var(--o-color-primary1);
-        }
-      }
-
-      .speakers-selector {
-        --select-height: 16px;
-        height: fit-content;
-        width: fit-content;
-
-        .el-select__wrapper {
-          box-shadow: none;
-          padding: 0;
-        }
-
-        .el-select__selection,
-        .el-select__suffix {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .o-tab {
-    margin-top: var(--o-gap-5);
-    height: calc(100% - 64px);
-
-    .o-tab-navs {
-      justify-content: flex-start;
-
-      .o-tab-nav {
-        padding-bottom: var(--o-gap-4);
-      }
-    }
-
-    .o-tab-body {
-      height: calc(100% - var(--o-line_height-text2) - var(--o-gap-4));
-      .o-tab-pane {
-        height: 100%;
-        padding-top: var(--o-gap-4);
-
-        .o-scroller {
-          height: 100%;
-
-          .o-scrollbar {
-            width: calc(100% + 16px);
-          }
-        }
-      }
-    }
-
-    .o-row {
-      margin-top: var(--o-gap-5);
-    }
-  }
-
-  .captions-tab {
-    .captions-scroller {
-      @include respond-to('<=pad_v') {
-        max-height: 600px;
-      }
-    }
-
-    .captions-item {
-      padding: 4px 8px;
-      cursor: pointer;
-      border-radius: var(--o-radius-xs);
-      @include hover {
-        background-color: rgba(var(--o-blue-6), 0.1);
-      }
-
-      &.captions-item-active {
-        background-color: rgba(var(--o-blue-6), 0.1);
-      }
-
-      .info {
-        display: flex;
-        align-items: center;
-
-        .num {
-          width: 18px;
-          height: 18px;
-          border-radius: 50%;
-          background-color: var(--o-color-primary2);
-          color: var(--o-color-info1-inverse);
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          @include tip2;
-        }
-
-        .speaker {
-          color: var(--o-color-info4);
-          margin-left: 4px;
-          @include tip2;
-        }
-
-        .start-time {
-          color: var(--o-color-info4);
-          margin-left: 16px;
-          @include tip2;
-        }
-
-        .playing {
-          margin-left: 16px;
-          color: var(--o-color-primary1);
-
-          svg {
-            width: 16px;
-            height: 16px;
-          }
-        }
-      }
-
-      .text {
-        color: var(--o-color-info2);
-        margin-top: 8px;
-        @include tip1;
-
-        .light-keyword {
-          background-color: rgba(var(--o-blue-6), 0.2);
-        }
-
-        .light-keyword-active {
-          background-color: rgba(var(--o-blue-6), 0.4);
-        }
-      }
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-.speakers-selector-popper {
-  border: none;
-  --item-height: 40px;
-  --el-color-primary: var(--o-color-primary1);
-
-  .el-select-dropdown {
-    padding: 4px;
-  }
-
-  .el-checkbox {
-    width: 100%;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-  }
-  .el-select-dropdown__header {
-    height: var(--item-height);
-    display: flex;
-    align-items: center;
-    padding: 0 12px;
-    border-bottom: 0;
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--o-color-control2-light);
-    }
-  }
-
-  .el-select-dropdown__list {
-    padding: 2px 0 0;
-
-    .el-select-dropdown__item {
-      padding: 0 12px;
-      height: var(--item-height);
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-
-      &.is-selected,
-      &.is-hovering {
-        background-color: transparent;
-      }
-
-      &.is-selected::after {
-        content: none;
-        display: none;
-      }
-
-      &:hover {
-        background-color: var(--o-color-control2-light);
-      }
-    }
-
-    .el-select-dropdown__item + .el-select-dropdown__item {
-      margin-top: 2px;
-    }
-  }
-}
-</style>