267 lines
7.3 KiB
JavaScript
267 lines
7.3 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("../../common/vendor.js");
|
|
const common_assets = require("../../common/assets.js");
|
|
const _sfc_main = {
|
|
name: "video-grid-enhanced",
|
|
props: {
|
|
// 视频数据列表
|
|
videoList: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => []
|
|
},
|
|
// 每行列数
|
|
columns: {
|
|
type: Number,
|
|
default: 2
|
|
},
|
|
// 间距
|
|
gap: {
|
|
type: String,
|
|
default: "10px"
|
|
},
|
|
// 容器高度
|
|
height: {
|
|
type: String,
|
|
default: "100vh"
|
|
},
|
|
// 背景颜色
|
|
backgroundColor: {
|
|
type: String,
|
|
default: "#FFFFFF"
|
|
},
|
|
// 是否显示标题
|
|
showTitle: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 是否显示收藏按钮
|
|
showFavorite: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 是否显示评论按钮
|
|
showComment: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 收藏图标颜色
|
|
favoriteColor: {
|
|
type: String,
|
|
default: "#ff5a5f"
|
|
},
|
|
// 收藏文字颜色
|
|
favoriteTextColor: {
|
|
type: String,
|
|
default: "#666"
|
|
},
|
|
// 评论图标颜色
|
|
commentColor: {
|
|
type: String,
|
|
default: "#3399ff"
|
|
},
|
|
// 评论文字颜色
|
|
commentTextColor: {
|
|
type: String,
|
|
default: "#666"
|
|
},
|
|
// 元数据背景渐变
|
|
metaGradient: {
|
|
type: String,
|
|
default: "linear-gradient(transparent, rgba(0,0,0,0.7))"
|
|
},
|
|
// 是否自动播放中央视频
|
|
autoPlayCenter: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
currentPlayIndex: null,
|
|
// 当前播放的视频索引
|
|
scrollTop: 0
|
|
// 当前滚动位置
|
|
};
|
|
},
|
|
computed: {
|
|
gridStyle() {
|
|
return {
|
|
display: "grid",
|
|
gridTemplateColumns: `repeat(${this.columns}, 1fr)`,
|
|
gap: this.gap,
|
|
padding: "10px",
|
|
backgroundColor: this.backgroundColor
|
|
};
|
|
},
|
|
itemStyle() {
|
|
const aspectRatio = 0.75;
|
|
return {
|
|
position: "relative",
|
|
overflow: "hidden",
|
|
borderRadius: "8px",
|
|
backgroundColor: this.backgroundColor,
|
|
aspectRatio
|
|
};
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
// 播放指定视频
|
|
playVideo(index) {
|
|
if (this.currentPlayIndex !== null) {
|
|
this.pauseVideo(this.currentPlayIndex);
|
|
}
|
|
if (index < this.videoList.length) {
|
|
this.currentPlayIndex = index;
|
|
const videoId = "video" + index;
|
|
const videoContext = common_vendor.index.createVideoContext(videoId, this);
|
|
if (videoContext) {
|
|
try {
|
|
videoContext.play();
|
|
} catch (error) {
|
|
console.error("Error playing video:", error);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
// 暂停指定视频
|
|
pauseVideo(index) {
|
|
if (index < this.videoList.length) {
|
|
const videoId = "video" + index;
|
|
const videoContext = common_vendor.index.createVideoContext(videoId, this);
|
|
if (videoContext) {
|
|
videoContext.pause();
|
|
}
|
|
}
|
|
},
|
|
// 停止所有视频
|
|
stopAllVideos() {
|
|
for (let i = 0; i < this.videoList.length; i++) {
|
|
this.pauseVideo(i);
|
|
}
|
|
},
|
|
// 视频播放事件
|
|
onVideoPlay(item, index) {
|
|
this.playVideo(index);
|
|
},
|
|
// 视频点击事件 - 通过蒙版层触发
|
|
onVideoClick(item) {
|
|
console.log("拦截事件", item);
|
|
this.$emit("video-click", item);
|
|
},
|
|
// 视频播放错误
|
|
onVideoError(item) {
|
|
try {
|
|
console.error("视频播放失败:", item);
|
|
common_vendor.index.showToast({
|
|
title: `视频${item.title}加载失败`,
|
|
icon: "none"
|
|
});
|
|
if (this.currentPlayIndex !== null && this.currentPlayIndex + 1 < this.videoList.length) {
|
|
setTimeout(() => {
|
|
this.playVideo(this.currentPlayIndex + 1);
|
|
}, 500);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error in onVideoError:", error);
|
|
}
|
|
},
|
|
// 滚动事件处理
|
|
onScroll(e) {
|
|
this.scrollTop = e.detail.scrollTop;
|
|
this.$emit("scroll", e);
|
|
if (this.autoPlayCenter) {
|
|
this.$nextTick(() => {
|
|
this.autoPlayCenterVideo();
|
|
});
|
|
}
|
|
},
|
|
// 自动播放屏幕中央的视频
|
|
autoPlayCenterVideo() {
|
|
if (this.currentPlayIndex === null)
|
|
return;
|
|
const videoItem = this.$el.querySelector(".video-item");
|
|
if (!videoItem)
|
|
return;
|
|
const itemHeight = videoItem.clientHeight;
|
|
const screenCenter = this.scrollTop + window.innerHeight / 2;
|
|
let centerIndex = Math.floor((screenCenter - itemHeight / 2) / itemHeight) * this.columns;
|
|
centerIndex = Math.max(0, Math.min(centerIndex, this.videoList.length - 1));
|
|
if (centerIndex !== this.currentPlayIndex) {
|
|
this.playVideo(centerIndex);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
if (!Array) {
|
|
const _easycom_uni_icons2 = common_vendor.resolveComponent("uni-icons");
|
|
_easycom_uni_icons2();
|
|
}
|
|
const _easycom_uni_icons = () => "../../uni_modules/uni-icons/components/uni-icons/uni-icons.js";
|
|
if (!Math) {
|
|
_easycom_uni_icons();
|
|
}
|
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return common_vendor.e({
|
|
a: common_vendor.f($props.videoList, (item, index, i0) => {
|
|
return common_vendor.e({
|
|
a: "video" + index,
|
|
b: item.src,
|
|
c: item.autoplay,
|
|
d: item.poster,
|
|
e: common_vendor.o(($event) => $options.onVideoPlay(item, index), index),
|
|
f: common_vendor.o(($event) => $options.onVideoError(item), index)
|
|
}, $props.showTitle || $props.showFavorite || $props.showComment ? common_vendor.e({
|
|
g: $props.showTitle
|
|
}, $props.showTitle ? {
|
|
h: common_vendor.t(item.title)
|
|
} : {}, {
|
|
i: $props.showFavorite || $props.showComment
|
|
}, $props.showFavorite || $props.showComment ? common_vendor.e({
|
|
j: $props.showFavorite
|
|
}, $props.showFavorite ? {
|
|
k: "1362bca4-0-" + i0,
|
|
l: common_vendor.p({
|
|
type: "heart",
|
|
size: "16",
|
|
color: $props.favoriteColor
|
|
}),
|
|
m: common_vendor.t(item.likes || 0),
|
|
n: $props.favoriteTextColor
|
|
} : {}, {
|
|
o: $props.showComment
|
|
}, $props.showComment ? {
|
|
p: "1362bca4-1-" + i0,
|
|
q: common_vendor.p({
|
|
type: "chat",
|
|
size: "16",
|
|
color: $props.commentColor
|
|
}),
|
|
r: common_vendor.t(item.comments || 0),
|
|
s: $props.commentTextColor
|
|
} : {}) : {}, {
|
|
t: $props.metaGradient
|
|
}) : {}, {
|
|
v: common_vendor.o(($event) => $options.onVideoClick(item), index),
|
|
w: index
|
|
});
|
|
}),
|
|
b: $props.showTitle || $props.showFavorite || $props.showComment,
|
|
c: common_vendor.s($options.itemStyle),
|
|
d: common_vendor.s($options.gridStyle),
|
|
e: $props.videoList.length === 0
|
|
}, $props.videoList.length === 0 ? common_vendor.e({
|
|
f: _ctx.$slots.empty
|
|
}, _ctx.$slots.empty ? {} : {
|
|
g: common_assets._imports_0$1
|
|
}) : {}, {
|
|
h: $props.height,
|
|
i: $props.backgroundColor,
|
|
j: common_vendor.o((...args) => $options.onScroll && $options.onScroll(...args))
|
|
});
|
|
}
|
|
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-1362bca4"]]);
|
|
wx.createComponent(Component);
|