GCLS_Page_Textbook/src/views/book/courseware/preview/components/video/VideoPreview.vue

<template>
  <div class="video_area" :style="getAreaStyle()">
    <SerialNumberPosition :property="data.property" />
    <div ref="videoArea" class="main">
      <ul v-if="'independent' === data.property.view_method" class="view-independent">
        <li v-for="(file, i) in data.file_list" :key="i">
          <VideoPlay
            view-size="small"
            view-method="independent"
            :file-id="file.file_id"
            :cur-video-index="curVideoIndex"
            @changeFile="changeFile"
          />
        </li>
      </ul>
      <div v-else class="view-list">
        <el-carousel
          ref="video_carousel"
          indicator-position="none"
          direction="vertical"
          :autoplay="false"
          :interval="0"
          :style="{ width: elementWidth - 248 - 32 + 'px', height: elementHeight + 'px' }"
        >
          <el-carousel-item v-for="(file, i) in data.file_list" :key="i">
            <VideoPlay
              view-size="big"
              :file-id="file.file_id"
              :cur-video-index="curVideoIndex"
              @changeFile="changeFile"
            />
          </el-carousel-item>
        </el-carousel>
        <div class="container-box">
          <ul
            ref="container"
            class="view-list-bottom"
            :style="{ height: elementHeight + 'px', transform: `translateY(${translateY}px)` }"
          >
            <li v-for="(file, i) in data.file_list" :key="i" @click="handleAudioClick(i)">
              <VideoPlay view-size="small" :file-id="file.file_id" :audio-index="i" :cur-video-index="curVideoIndex" />
            </li>
          </ul>
          <button v-if="viewTopBottomBtn" class="arrow top" @click="scroll(1)">
            <i class="el-icon-arrow-up"></i>
          </button>
          <button v-if="viewTopBottomBtn" class="arrow bottom" @click="scroll(-1)">
            <i class="el-icon-arrow-down"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getVideoData } from '@/views/book/courseware/data/video';
import PreviewMixin from '../common/PreviewMixin';
import VideoPlay from '../common/VideoPlay.vue';

export default {
  name: 'VideoPreview',
  components: { VideoPlay },
  mixins: [PreviewMixin],
  data() {
    return {
      data: getVideoData(),
      curVideoIndex: 0,
      elementWidth: 0,
      elementHeight: 0,
      viewTopBottomBtn: false,
      fileLen: 0,
      translateY: 0,
    };
  },
  watch: {
    data: {
      handler(val) {
        this.fileLen = val.file_list.length;
        if (this.fileLen > 0) {
          const ele = this.$refs.videoArea;
          this.elementWidth = ele.clientWidth;
          this.elementHeight = ele.clientHeight;
          window.addEventListener('resize', this.handleResize);
        }
      },
      deep: true,
    },
    elementWidth(newWidth, oldWidth) {
      // console.log(`宽度从 ${oldWidth} 变为 ${newWidth}`);
      this.elementWidth = newWidth;
    },
    elementHeight(newHeight, oldHeight) {
      // console.log(`高度从 ${oldHeight} 变为 ${newHeight}`);
      this.elementHeight = newHeight;
      this.isViewTopBottomBtn();
    },
  },
  mounted() {
    this.$nextTick(() => {
      let _class = document.querySelector('.canvas');
      if (_class === null) return;
      if (_class.classList.contains('canvas')) {
        this.resizeObserver = new ResizeObserver((entries) => {
          for (let entry of entries) {
            this.elementWidth = entry.contentRect.width;
            this.elementHeight = entry.contentRect.height;
          }
        });
        this.resizeObserver.observe(this.$el);
      }
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
  },
  methods: {
    handleAudioClick(index) {
      // 获取 Carousel 实例
      const carousel = this.$refs.video_carousel;
      // 切换到对应索引的文件
      carousel.setActiveItem(index);
      this.curVideoIndex = index;
    },
    changeFile(type) {
      // 获取 Carousel 实例
      const carousel = this.$refs.video_carousel;
      // 切换到对应索引的文件
      if (type === 'prev') {
        carousel.prev();
        this.curVideoIndex += -1;
      } else {
        carousel.next();
        this.curVideoIndex += 1;
      }
      if (this.curVideoIndex >= this.data.file_id_list.length) {
        this.curVideoIndex = 0;
      }
      if (this.curVideoIndex < 0) {
        this.curVideoIndex = this.data.file_id_list.length - 1;
      }
    },
    handleResize() {
      const width = this.$refs.videoArea.clientWidth;
      if (width !== this.elementWidth) {
        this.elementWidth = width;
      }
    },
    // 是否显示上下箭头
    isViewTopBottomBtn() {
      // 计算右侧列表图片高度
      let listHeight = this.fileLen * this.data.min_height + 20 * (this.fileLen - 1);
      if (listHeight > this.elementHeight) {
        this.viewTopBottomBtn = true;
      } else {
        this.viewTopBottomBtn = false;
      }
    },
    // 滚动图片列表
    scroll(direction) {
      const minHeight = Number(this.data.min_height);
      const step = minHeight + 20; // 每次滚动的距离
      let _down = (minHeight + 20) * (this.fileLen - 1);
      // 计算滚动后的 translateY 值
      let newY = this.translateY + step * direction;
      // 检查是否超出上下边界
      if (newY > 0) {
        // 滚动到第一张图片时不再向上滚动
        this.translateY = 0;
      } else if (newY < -_down) {
        // 滚动到最后一张图片时不再向下滚动
        this.translateY = -_down;
      } else {
        // 在边界内时执行滚动
        this.translateY = newY;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.video_area {
  display: grid;
  gap: 6px;
  padding: 8px;

  > .main {
    display: flex;

    > span {
      display: flex;
    }
  }

  .main {
    grid-area: main;
    width: 100%;

    .view-independent {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      width: 100%;

      > li {
        width: 248px;
        height: 139px;
      }
    }

    .view-list {
      display: flex;
      column-gap: 32px;

      :deep .el-carousel {
        background-color: #d9d9d9;

        &__container {
          height: 100%;
        }
      }

      .container-box {
        position: relative;
        overflow: hidden;

        .arrow {
          position: absolute;
          z-index: 10;
          width: 100%;
          height: 40px;
          text-align: center;
          background-color: rgba(0, 0, 0, 10%);
          border-radius: 0;
        }

        .arrow:hover {
          background-color: rgba(0, 0, 0, 30%);
        }

        .top {
          top: 0;
        }

        .bottom {
          bottom: 0;
        }

        .view-list-bottom {
          display: flex;
          flex-direction: column;
          row-gap: 20px;

          > li {
            width: 248px;
            height: calc(248px * 9 / 16);
          }
        }
      }
    }
  }
}
</style>