@opendesign-plus/components 0.0.1-rc.10

package/src/components/meeting/OMeetingPlayback.vue

@@ -0,0 +1,439 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue';
+import { speakerNum, transformSeconds, transformTime } from './utils';
+import { OOption, 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,
+      startTime: transformTime(z.startTime as string),
+      endTime: transformTime(z.endTime as string),
+    };
+  });
+};
+
+// -------------------- 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">
+          <OTabPane v-for="t in tabOptions" :key="t.value" :value="t.value" :label="t.label" />
+        </OTab>
+        <div class="tab-content">
+          <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.startTime < 0 ? 0 : sub.startTime) / playerDuration,
+                      '--end': (sub.endTime > playerDuration ? playerDuration : sub.endTime) / playerDuration,
+                      background: getProgressColor(idx),
+                    }"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right-card card-wrapper" :style="{
+      height: rightHeight
+    }">
+      <OMeetingPlaybackSubtitles
+        :captions="captionsList"
+        :trackIdx="trackIdx"
+        :instance="playbackInstance" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.o-meeting-playback {
+  display: flex;
+  gap: var(--grid-column-gutter);
+  align-items: flex-start;
+
+  @include respond-to('<=pad_v') {
+    flex-wrap: wrap;
+  }
+
+  .card-wrapper {
+    border-radius: var(--o-radius-xs);
+    background-color: var(--o-color-fill2);
+    padding: var(--o-gap-5);
+  }
+
+  .left-card {
+    width: 60%;
+    @include respond-to('<=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 {
+        .o-tab-navs {
+          justify-content: flex-start;
+        }
+
+        .o-tab-nav {
+          padding-bottom: var(--o-gap-4);
+          @include respond-to('<=pad_v') {
+            padding-bottom: var(--o-gap-2);
+          }
+        }
+      }
+
+      .tab-content {
+        padding-top: var(--o-gap-4);
+
+        .base-info {
+          @include tip1;
+
+          .info-item {
+            display: flex;
+            align-items: center;
+
+            &:last-child {
+              align-items: flex-start;
+            }
+
+            span:first-child {
+              width: 6em;
+              flex-shrink: 0;
+            }
+
+            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;
+
+          .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(--o-radius-xs);
+            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-fill1);
+            }
+
+            .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(--o-radius-xs);
+                left: calc(var(--start) * 100%);
+                right: calc((1 - var(--end)) * 100%);
+                z-index: 9;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .right-card {
+    width: 40%;
+    @include respond-to('<=pad_v') {
+      width: 100%;
+    }
+  }
+}
+</style>