@opendesign-plus/components 0.0.1-rc.34 → 0.0.1-rc.36

package/src/components/meeting/OMeetingPlayback.vue

@@ -1,469 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue';
-import { speakerNum, transformSeconds, transformTime } from './utils';
-import { OOption, OScroller, OSelect, OTab, OTabPane, type SelectValueT } from '@opensig/opendesign';
-import OMeetingPlaybackSubtitles from './components/OMeetingPlaybackSubtitles.vue';
-import OMeetingPlaybackVideo from './components/OMeetingPlaybackVideo.vue';
-import { useI18n } from '@/i18n';
-import { PROGRESS_COLORS } from './config';
-import type { CaptionItemT, MeetingPlaybackPropsT, SubjectItemT } from './types';
-
-const props = withDefaults(defineProps<MeetingPlaybackPropsT>(), {
-  dates: () => [],
-  data: () => ({}) as any,
-  detail: () => ({}) as any,
-});
-const emits = defineEmits(['change-date']);
-const { t } = useI18n();
-const playbackInstance = ref(null);
-const getInstance = (instance: any) => {
-  playbackInstance.value = instance;
-};
-const trackIdx = ref(0);
-const setTrackIdx = (idx: number) => {
-  trackIdx.value = idx;
-};
-// -------------------- 字幕列表 --------------------
-const captionsList = ref<CaptionItemT[]>([]);
-const getCaptions = async (url: string) => {
-  const res = await fetch(url);
-  const json = await res.json();
-  captionsList.value = (json.segments || []).map((v: CaptionItemT) => {
-    const speakerIdx = speakerNum(v.speaker);
-    return {
-      ...v,
-      contentHtml: v.content,
-      speakerIdx,
-      speakerLabel: `${ t('meeting.speaker') }${ speakerIdx }`,
-    };
-  });
-};
-
-
-// -------------------- 处理议题分段 --------------------
-const subjectList = ref<SubjectItemT[]>([]);
-const getProgressColor = (idx: number) => {
-  return PROGRESS_COLORS[idx % 3];
-};
-const playerDuration = ref(0);
-const getPlayerDuration = (seconds: number) => {
-  playerDuration.value = seconds;
-};
-const playerRef = ref();
-const mouseTime = ref('');
-const mousePosition = ref<[number | string, number | string]>([0, 0]);
-
-// 计算鼠标在柱子上的相对位置百分比
-function calculateCurrentTime(e: any, bar: any) {
-  const rect = bar.getBoundingClientRect();
-  const x = e.clientX - rect.left;
-  const ratio = x / rect.width;
-  mousePosition.value[1] = `${ bar.offsetTop + bar.parentElement.offsetTop }px`;
-  mousePosition.value[0] = `${ ratio * 100 }%`;
-  return ratio * playerDuration.value;
-}
-
-const getParentProgress = (el: HTMLElement) => {
-  let ele: HTMLElement | null = el;
-  while (ele && ele.className !== 'subject-progress') {
-    ele = ele.parentElement;
-  }
-  return ele;
-};
-
-const mouseOverItem = (e: any) => {
-  let ele = getParentProgress(e.target);
-  if (ele) {
-    mouseTime.value = transformSeconds(calculateCurrentTime(e, ele));
-  }
-};
-const mouseLeaveItem = () => {
-  mouseTime.value = '';
-};
-const changeTime = (e: any) => {
-  let ele = getParentProgress(e.target);
-  if (ele) {
-    playerRef.value?.changeTime(calculateCurrentTime(e, ele));
-  }
-};
-
-const getSubjectList = async (url: string) => {
-  const res = await fetch(url);
-  const json = await res.json();
-  subjectList.value = (json || []).map((z: SubjectItemT) => {
-    return {
-      ...z,
-      startTimeNumber: transformTime(z.startTime),
-      endTimeNumber: transformTime(z.endTime),
-    };
-  });
-};
-
-// -------------------- tab切换 --------------------
-const tab = ref('info');
-const tabOptions = computed(() => {
-  const items = [
-    {
-      label: t('meeting.baseInfo'),
-      value: 'info',
-    },
-  ];
-  if (subjectList.value.length) {
-    items.push({
-      label: t('meeting.subject'),
-      value: 'subject',
-    });
-  }
-  return items;
-});
-const getData = () => {
-  if (!props.data) {
-    return;
-  }
-  if (props.data.textJson) {
-    getCaptions(props.data.textJson);
-  }
-  if (props.data.topicJson) {
-    getSubjectList(props.data.topicJson);
-  }
-};
-
-watchEffect(() => {
-  getData();
-});
-
-const changeDate = (val: SelectValueT) => {
-  emits('change-date', val);
-};
-
-// -------------------- 同步高度 --------------------
-const leftRef = ref<HTMLElement | null>(null);
-const rightHeight = ref('auto');
-
-
-let observer: any = null;
-let raf: any = null;
-
-const updateHeight = () => {
-  if (leftRef.value) {
-    rightHeight.value = `${ leftRef.value!.offsetHeight }px`;
-  }
-};
-
-const debouncedUpdate = () => {
-  cancelAnimationFrame(raf);
-  raf = requestAnimationFrame(updateHeight);
-};
-
-onMounted(() => {
-  if (leftRef.value) {
-    observer = new ResizeObserver(debouncedUpdate);
-    observer.observe(leftRef.value);
-    updateHeight();
-  }
-});
-
-onUnmounted(() => {
-  cancelAnimationFrame(raf);
-  observer?.disconnect();
-});
-</script>
-
-<template>
-  <div class="o-meeting-playback">
-    <div class="left-card card-wrapper" ref="leftRef">
-      <div class="video-header">
-        <div class="video-title">{{ detail?.topic }}({{ detail?.date }})</div>
-        <OSelect
-          v-if="dates?.length"
-          size="large"
-          :clearable="false"
-          :model-value="detail?.date"
-          :placeholder="t('meeting.selectDate')"
-          @change="changeDate">
-          <OOption v-for="t in dates" :key="t" :value="t" :label="t" />
-        </OSelect>
-      </div>
-      <div class="video-content">
-        <OMeetingPlaybackVideo
-          v-if="data"
-          ref="playerRef"
-          :src="data.video"
-          :vtt="data.textVtt"
-          :poster="data.poster"
-          :captions="captionsList"
-          @getDuration="getPlayerDuration"
-          :instance="playbackInstance"
-          @getInstance="getInstance"
-          :trackIdx="trackIdx"
-          @setTrackIdx="setTrackIdx"
-        />
-      </div>
-      <div class="info-wrapper">
-        <OTab v-model="tab" :max-show="9999">
-          <OTabPane v-for="t in tabOptions" :key="t.value" :value="t.value" :label="t.label" />
-        </OTab>
-        <OScroller :class="['tab-content', `tab-content-${tab}`]" show-type="hover">
-          <div class="base-info" v-if="tab === tabOptions[0].value">
-            <div class="info-item">
-              <span>{{ t('meeting.item1') }}</span>
-              <span>{{ detail.sponsor }}</span>
-            </div>
-            <div class="info-item">
-              <span>{{ t('meeting.item2') }}</span>
-              <span>{{ detail.groupName }}</span>
-            </div>
-            <div class="info-item">
-              <span>{{ t('meeting.item3') }}</span>
-              <span>{{ detail.date }}&nbsp;&nbsp;{{ detail.start }}~{{ detail.end }}</span>
-            </div>
-            <div class="info-item">
-              <span>{{ t('meeting.item4') }}</span>
-              <span>{{ detail.agenda || '-' }}</span>
-            </div>
-          </div>
-          <div class="subject-list" v-if="tab === tabOptions[1]?.value">
-            <div
-              v-if="mouseTime"
-              class="mouse-current-time"
-              :style="{
-                  top: mousePosition[1],
-                  left: mousePosition[0],
-                }"
-            >
-              {{ mouseTime }}
-            </div>
-            <div class="subject-item" v-for="(sub, idx) in subjectList" :key="sub.title">
-              <div class="subject-title">{{ sub.title }}</div>
-              <div class="subject-progress" v-if="playerDuration">
-                <div
-                  class="subject-progress-item"
-                  @click="changeTime"
-                  @mousemove="mouseOverItem"
-                  @mouseleave="mouseLeaveItem"
-                  :data-start="sub.startTime"
-                  :data-end="sub.endTime"
-                  :style="{
-                      '--start': (sub.startTimeNumber < 0 ? 0 : sub.startTimeNumber) / playerDuration,
-                      '--end': (sub.endTimeNumber > playerDuration ? playerDuration : sub.endTimeNumber) / playerDuration,
-                      background: getProgressColor(idx),
-                    }"
-                ></div>
-              </div>
-            </div>
-          </div>
-        </OScroller>
-      </div>
-    </div>
-    <div class="right-card card-wrapper" :style="{
-      height: rightHeight
-    }">
-      <OMeetingPlaybackSubtitles
-        :captions="captionsList"
-        :trackIdx="trackIdx"
-        :instance="playbackInstance"
-      >
-        <template #empty>
-          <slot name="empty"></slot>
-        </template>
-      </OMeetingPlaybackSubtitles>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.o-meeting-playback {
-  display: flex;
-  gap: var(--grid-column-gutter);
-  align-items: flex-start;
-  --meeting-card-radius: var(--o-radius-xs);
-  --meeting-input-radius: var(--o-radius-xs);
-  --meeting-cell-radius: var(--o-radius-xs);
-
-  @include respond('<=pad_v') {
-    flex-wrap: wrap;
-  }
-
-  .card-wrapper {
-    border-radius: var(--meeting-card-radius);
-    background-color: var(--o-color-fill2);
-    padding: var(--o-gap-5);
-
-    &.left-card {
-      padding-bottom: 0;
-    }
-  }
-
-  .left-card {
-    width: 60%;
-    @include respond('<=pad_v') {
-      width: 100%;
-    }
-
-    .video-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .video-title {
-        font-weight: 500;
-        @include h2;
-      }
-
-      .o-select {
-        width: 150px;
-      }
-    }
-
-    .video-content {
-      margin-top: var(--o-gap-5);
-    }
-
-    .info-wrapper {
-      margin-top: var(--o-gap-5);
-
-      .o-tab {
-        --tab-nav-justify: flex-start;
-
-        .o-tab-nav-list {
-          width: 100%;
-        }
-
-        .o-tab-nav {
-          padding-bottom: var(--o-gap-4);
-          @include respond('<=pad_v') {
-            padding-bottom: var(--o-gap-2);
-          }
-        }
-      }
-
-      .tab-content {
-        padding-top: var(--o-gap-4);
-        height: 280px;
-        padding-bottom: 0;
-        position: relative;
-
-        &::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%);
-        }
-
-        .base-info {
-          padding-bottom: var(--o-gap-5);
-          @include text1;
-
-          .info-item {
-            display: flex;
-            align-items: center;
-
-            &:last-child {
-              align-items: flex-start;
-            }
-
-            span:first-child {
-              width: 6em;
-              flex-shrink: 0;
-              color: var(--o-color-info3);
-            }
-
-            span:last-child {
-              color: var(--o-color-info2);
-            }
-          }
-
-          .info-item + .info-item {
-            margin-top: var(--o-gap-2);
-          }
-        }
-
-        .subject-list {
-          counter-reset: itemIndex;
-          position: relative;
-          padding-bottom: var(--o-gap-5);
-
-          .mouse-current-time {
-            position: absolute;
-            background-color: var(--o-color-fill2);
-            padding: var(--o-gap-1);
-            box-shadow: var(--o-shadow-1);
-            z-index: 10;
-            border-radius: var(--meeting-cell-radius);
-            transform: translateY(calc(0px - 100% - 4px));
-            color: var(--o-color-info2);
-            @include tip1;
-          }
-
-          .subject-item {
-            position: relative;
-            padding: 4px 0 8px 32px;
-
-            &::before {
-              counter-increment: itemIndex;
-              position: absolute;
-              content: counter(itemIndex);
-              width: 18px;
-              height: 18px;
-              text-align: center;
-              left: 4px;
-              top: 11px;
-              color: #fff;
-              background-color: var(--o-color-primary1);
-              border-radius: 50%;
-              font-size: 12px;
-              line-height: 18px;
-            }
-
-            .subject-title {
-              color: var(--o-color-info2);
-              font-size: 14px;
-              line-height: 32px;
-            }
-
-            &::after {
-              content: '';
-              position: absolute;
-              bottom: 4px;
-              left: 32px;
-              right: 0;
-              height: 4px;
-              border-radius: 2px;
-              background-color: var(--o-color-fill3);
-            }
-
-            .subject-progress {
-              position: absolute;
-              bottom: 4px;
-              left: 30px;
-              right: 0;
-              height: 4px;
-
-              .subject-progress-item {
-                cursor: pointer;
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                border-radius: var(--meeting-cell-radius);
-                left: calc(var(--start) * 100%);
-                right: calc((1 - var(--end)) * 100%);
-                z-index: 9;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .right-card {
-    width: 40%;
-    @include respond('<=pad_v') {
-      width: 100%;
-    }
-  }
-}
-</style>