VideoPreview.vue 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. <template>
  2. <div ref="videoArea" class="video_area" :style="getAreaStyle()">
  3. <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
  4. <div ref="videoAreaBox" class="main">
  5. <ul v-if="'independent' === data.property.view_method" class="view-independent">
  6. <li v-for="(file, i) in data.file_list" :key="i">
  7. <VideoPlay
  8. view-size="small"
  9. view-method="independent"
  10. :file-id="file.file_id"
  11. :cur-video-index="curVideoIndex"
  12. @changeFile="changeFile"
  13. />
  14. </li>
  15. </ul>
  16. <div v-else class="view-list">
  17. <el-carousel
  18. ref="video_carousel"
  19. indicator-position="none"
  20. direction="vertical"
  21. :autoplay="false"
  22. :interval="0"
  23. :style="{ width: elementWidth - 248 - 32 + 'px', height: elementHeight <= 0 ? 139 : elementHeight + 'px' }"
  24. >
  25. <el-carousel-item v-for="(file, i) in data.file_list" :key="i">
  26. <VideoPlay
  27. view-size="big"
  28. :file-id="file.file_id"
  29. :cur-video-index="curVideoIndex"
  30. @changeFile="changeFile"
  31. />
  32. </el-carousel-item>
  33. </el-carousel>
  34. <div class="container-box" :style="{ height: elementHeight <= 0 ? 139 : elementHeight + 'px' }">
  35. <ul
  36. ref="container"
  37. class="view-list-bottom"
  38. :style="{ height: elementHeight + 'px', transform: `translateY(${translateY}px)` }"
  39. >
  40. <li v-for="(file, i) in data.file_list" :key="i" @click="handleAudioClick(i)">
  41. <VideoPlay view-size="small" :file-id="file.file_id" :audio-index="i" :cur-video-index="curVideoIndex" />
  42. </li>
  43. </ul>
  44. <button v-if="viewTopBottomBtn" class="arrow top" @click="scroll(1)">
  45. <i class="el-icon-arrow-up"></i>
  46. </button>
  47. <button v-if="viewTopBottomBtn" class="arrow bottom" @click="scroll(-1)">
  48. <i class="el-icon-arrow-down"></i>
  49. </button>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </template>
  55. <script>
  56. import { getVideoData } from '@/views/book/courseware/data/video';
  57. import PreviewMixin from '../common/PreviewMixin';
  58. import VideoPlay from '../common/VideoPlay.vue';
  59. export default {
  60. name: 'VideoPreview',
  61. components: { VideoPlay },
  62. mixins: [PreviewMixin],
  63. inject: ['getDragStatus'],
  64. data() {
  65. return {
  66. data: getVideoData(),
  67. curVideoIndex: 0,
  68. elementWidth: 0,
  69. elementHeight: 0,
  70. viewTopBottomBtn: false,
  71. fileLen: 0,
  72. translateY: 0,
  73. elementID: '',
  74. videoObserversMap: {},
  75. };
  76. },
  77. watch: {
  78. data: {
  79. handler(val) {
  80. this.fileLen = val.file_list.length;
  81. if (this.fileLen > 0 && this.data.property.view_method === 'list') {
  82. const ele = this.$refs.videoAreaBox;
  83. const sn_position = this.data.property.sn_position;
  84. // 序号在左和右补齐序号高度,去掉padding(8*2)
  85. if (sn_position.includes('left') || sn_position.includes('right')) {
  86. this.elementWidth = ele.clientWidth - 16;
  87. this.elementHeight = ele.clientHeight + 30;
  88. } else {
  89. this.elementWidth = ele.clientWidth;
  90. this.elementHeight = ele.clientHeight;
  91. }
  92. if (ele.clientHeight <= 0) {
  93. this.elementHeight = this.data.min_height;
  94. }
  95. const mainEle = this.$refs.videoArea;
  96. // 检查元素是否包含已知的类名
  97. mainEle.classList.forEach((className) => {
  98. // 排除已知的类名
  99. if (className !== 'audio-area') {
  100. // 打印另一个类名
  101. this.elementID = className;
  102. }
  103. });
  104. }
  105. },
  106. deep: true,
  107. },
  108. elementWidth(newWidth) {
  109. this.elementWidth = newWidth;
  110. },
  111. elementHeight(newHeight) {
  112. this.elementHeight = newHeight;
  113. this.isViewTopBottomBtn();
  114. },
  115. },
  116. mounted() {
  117. this.$nextTick(() => {
  118. const canvasElement = document.querySelector('.canvas');
  119. if (!canvasElement) {
  120. const ele = this.$refs.videoAreaBox;
  121. const sn_position = this.data.property.sn_position;
  122. // 序号在左和右补齐序号高度,去掉padding(8*2)
  123. if (sn_position.includes('left') || sn_position.includes('right')) {
  124. this.elementWidth = ele.clientWidth - 16;
  125. this.elementHeight = ele.clientHeight + 30;
  126. } else {
  127. this.elementWidth = ele.clientWidth;
  128. this.elementHeight = ele.clientHeight;
  129. }
  130. if (ele.clientHeight <= 0) {
  131. this.elementHeight = this.data.min_height;
  132. }
  133. this.fileLen = this.data.file_list.length;
  134. this.isViewLeftRightBtn();
  135. return;
  136. }
  137. const instanceName = `observer_${this.elementID}`;
  138. this.videoObserversMap[instanceName] = new ResizeObserver((entries) => {
  139. if (!this.getDragStatus()) return;
  140. for (let entry of entries) {
  141. window.requestAnimationFrame(() => {
  142. const sn_position = this.data.property.sn_position;
  143. // 序号在上方和下方减去序号高度,在左右去掉padding(8*2)
  144. if (sn_position.includes('top') || sn_position.includes('bottom')) {
  145. this.elementWidth = entry.contentRect.width;
  146. this.elementHeight = entry.contentRect.height - 30;
  147. } else {
  148. this.elementWidth = entry.contentRect.width - 16;
  149. this.elementHeight = entry.contentRect.height;
  150. }
  151. });
  152. }
  153. });
  154. this.videoObserversMap[instanceName].observe(this.$el);
  155. });
  156. },
  157. beforeDestroy() {
  158. Object.values(this.videoObserversMap).forEach((observer) => {
  159. observer.disconnect();
  160. });
  161. },
  162. methods: {
  163. handleAudioClick(index) {
  164. // 获取 Carousel 实例
  165. const carousel = this.$refs.video_carousel;
  166. // 切换到对应索引的文件
  167. carousel.setActiveItem(index);
  168. this.curVideoIndex = index;
  169. },
  170. changeFile(type) {
  171. // 获取 Carousel 实例
  172. const carousel = this.$refs.video_carousel;
  173. // 切换到对应索引的文件
  174. if (type === 'prev') {
  175. carousel.prev();
  176. this.curVideoIndex += -1;
  177. } else {
  178. carousel.next();
  179. this.curVideoIndex += 1;
  180. }
  181. if (this.curVideoIndex >= this.data.file_id_list.length) {
  182. this.curVideoIndex = 0;
  183. }
  184. if (this.curVideoIndex < 0) {
  185. this.curVideoIndex = this.data.file_id_list.length - 1;
  186. }
  187. },
  188. handleResize() {
  189. const width = this.$refs.videoAreaBox.clientWidth;
  190. if (width !== this.elementWidth) {
  191. this.elementWidth = width;
  192. }
  193. },
  194. // 是否显示上下箭头
  195. isViewTopBottomBtn() {
  196. // 计算右侧列表图片高度
  197. let listHeight = this.fileLen * this.data.min_height + 20 * (this.fileLen - 1);
  198. if (listHeight > this.elementHeight) {
  199. this.viewTopBottomBtn = true;
  200. } else {
  201. this.viewTopBottomBtn = false;
  202. this.translateY = 0;
  203. }
  204. },
  205. // 滚动图片列表
  206. scroll(direction) {
  207. const minHeight = Number(this.data.min_height);
  208. const step = minHeight + 20; // 每次滚动的距离
  209. let _down = (minHeight + 20) * (this.fileLen - 1);
  210. // 计算滚动后的 translateY 值
  211. let newY = this.translateY + step * direction;
  212. // 检查是否超出上下边界
  213. if (newY > 0) {
  214. // 滚动到第一张图片时不再向上滚动
  215. this.translateY = 0;
  216. } else if (newY < -_down) {
  217. // 滚动到最后一张图片时不再向下滚动
  218. this.translateY = -_down;
  219. } else {
  220. // 在边界内时执行滚动
  221. this.translateY = newY;
  222. }
  223. },
  224. },
  225. };
  226. </script>
  227. <style lang="scss" scoped>
  228. .video_area {
  229. display: grid;
  230. gap: 6px;
  231. padding: 8px;
  232. > .main {
  233. display: flex;
  234. > span {
  235. display: flex;
  236. }
  237. }
  238. .main {
  239. grid-area: main;
  240. width: 100%;
  241. .view-independent {
  242. display: flex;
  243. flex-wrap: wrap;
  244. gap: 20px;
  245. width: 100%;
  246. > li {
  247. width: 248px;
  248. height: 139px;
  249. }
  250. }
  251. .view-list {
  252. display: flex;
  253. column-gap: 32px;
  254. :deep .el-carousel {
  255. background-color: #d9d9d9;
  256. &__container {
  257. height: 100%;
  258. }
  259. }
  260. .container-box {
  261. position: relative;
  262. overflow: hidden;
  263. .arrow {
  264. position: absolute;
  265. z-index: 10;
  266. width: 100%;
  267. height: 40px;
  268. text-align: center;
  269. background-color: rgba(0, 0, 0, 10%);
  270. border-radius: 0;
  271. }
  272. .arrow:hover {
  273. background-color: rgba(0, 0, 0, 30%);
  274. }
  275. .top {
  276. top: 0;
  277. }
  278. .bottom {
  279. bottom: 0;
  280. }
  281. .view-list-bottom {
  282. display: flex;
  283. flex-direction: column;
  284. row-gap: 20px;
  285. > li {
  286. width: 248px;
  287. height: calc(248px * 9 / 16);
  288. }
  289. }
  290. }
  291. }
  292. }
  293. }
  294. </style>