400 lines
12 KiB
JavaScript
400 lines
12 KiB
JavaScript
|
// 聊天室赚钱面板，注册 earnPanelData Alpine 组件并集中管理 FluidPlayer 加载。
|
|||
|
|
|
|||
|
|
const FLUID_PLAYER_SCRIPT_URL = "https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js";
|
|||
|
|
const FALLBACK_VIDEO_SOURCE = "https://cdn.fluidplayer.com/videos/valerian-1080p.mkv";
|
|||
|
|
const VAST_TAG_URL = "https://s.magsrv.com/v1/vast.php?idzone=5889208";
|
|||
|
|
|
|||
|
|
let earnPanelControlsBound = false;
|
|||
|
|
let earnPanelRegistered = false;
|
|||
|
|
let fluidPlayerScriptPromise = null;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 读取 CSRF Token。
|
|||
|
|
*
|
|||
|
|
* @returns {string}
|
|||
|
|
*/
|
|||
|
|
function csrf() {
|
|||
|
|
return document.querySelector('meta[name="csrf-token"]')?.content || "";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 显示统一 Toast，避免面板代码直接依赖未初始化对象。
|
|||
|
|
*
|
|||
|
|
* @param {object} options
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
function showToast(options) {
|
|||
|
|
window.chatToast?.show?.(options);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 按需加载 FluidPlayer CDN 脚本。
|
|||
|
|
*
|
|||
|
|
* @returns {Promise<void>}
|
|||
|
|
*/
|
|||
|
|
function loadFluidPlayerScript() {
|
|||
|
|
if (typeof window.fluidPlayer === "function") {
|
|||
|
|
return Promise.resolve();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (fluidPlayerScriptPromise) {
|
|||
|
|
return fluidPlayerScriptPromise;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fluidPlayerScriptPromise = new Promise((resolve, reject) => {
|
|||
|
|
const existingScript = document.querySelector(`script[src="${FLUID_PLAYER_SCRIPT_URL}"]`);
|
|||
|
|
if (existingScript) {
|
|||
|
|
existingScript.addEventListener("load", () => resolve(), { once: true });
|
|||
|
|
existingScript.addEventListener("error", () => reject(new Error("FluidPlayer 加载失败")), { once: true });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const script = document.createElement("script");
|
|||
|
|
script.src = FLUID_PLAYER_SCRIPT_URL;
|
|||
|
|
script.async = true;
|
|||
|
|
script.addEventListener("load", () => resolve(), { once: true });
|
|||
|
|
script.addEventListener("error", () => reject(new Error("FluidPlayer 加载失败")), { once: true });
|
|||
|
|
document.head.appendChild(script);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return fluidPlayerScriptPromise;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 销毁播放器实例并吞掉第三方库的重复销毁异常。
|
|||
|
|
*
|
|||
|
|
* @param {object|null} player
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
function destroyPlayer(player) {
|
|||
|
|
if (!player) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
player.destroy();
|
|||
|
|
} catch (error) {
|
|||
|
|
// FluidPlayer 重复销毁时可能抛错，面板关闭流程应继续执行。
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 重建原始 video DOM，避免 FluidPlayer 包裹后的节点影响下一次初始化。
|
|||
|
|
*
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
function restoreVideoDOM() {
|
|||
|
|
const wrapper = document.getElementById("video-wrapper");
|
|||
|
|
if (!wrapper) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
wrapper.innerHTML = `<video id="exoclick-video" style="width: 100%; height: 100%;" playsinline preload="none"><source src="${FALLBACK_VIDEO_SOURCE}" type="video/mp4" /></video>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 创建赚钱面板 Alpine 组件。
|
|||
|
|
*
|
|||
|
|
* @returns {object}
|
|||
|
|
*/
|
|||
|
|
export function createEarnPanelData() {
|
|||
|
|
return {
|
|||
|
|
isOpen: false,
|
|||
|
|
status: "idle",
|
|||
|
|
countdown: "获取中...",
|
|||
|
|
timer: null,
|
|||
|
|
player: null,
|
|||
|
|
videoFinished: false,
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 打开面板并提前加载播放器脚本。
|
|||
|
|
*
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
openPanel() {
|
|||
|
|
this.isOpen = true;
|
|||
|
|
void loadFluidPlayerScript().catch(() => {
|
|||
|
|
showToast({ title: "播放器加载失败", message: "广告播放器暂时不可用，请稍后再试。", icon: "⚠️", color: "#ef4444" });
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (this.status !== "claimed" && this.status !== "claiming") {
|
|||
|
|
this.resetPanelState();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 关闭面板并释放播放器资源。
|
|||
|
|
*
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
closePanel() {
|
|||
|
|
this.isOpen = false;
|
|||
|
|
this.stopTimer();
|
|||
|
|
|
|||
|
|
if (this.status === "watching") {
|
|||
|
|
showToast({ title: "取消提示", message: "已取消观看，没有扣除观影次数。", icon: "ℹ️", color: "#3b82f6" });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
destroyPlayer(this.player);
|
|||
|
|
this.player = null;
|
|||
|
|
restoreVideoDOM();
|
|||
|
|
this.status = "idle";
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 重置面板到待观看状态。
|
|||
|
|
*
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
resetPanelState() {
|
|||
|
|
this.status = "idle";
|
|||
|
|
this.countdown = "获取中...";
|
|||
|
|
this.videoFinished = false;
|
|||
|
|
this.stopTimer();
|
|||
|
|
destroyPlayer(this.player);
|
|||
|
|
this.player = null;
|
|||
|
|
restoreVideoDOM();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 领奖后延迟重置，给用户保留到账反馈。
|
|||
|
|
*
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
resetPanel() {
|
|||
|
|
this.closePanel();
|
|||
|
|
window.setTimeout(() => {
|
|||
|
|
this.resetPanelState();
|
|||
|
|
}, 300);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 标记观看完成并清理播放器。
|
|||
|
|
*
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
completeWatch() {
|
|||
|
|
this.videoFinished = true;
|
|||
|
|
this.stopTimer();
|
|||
|
|
this.status = "completed";
|
|||
|
|
destroyPlayer(this.player);
|
|||
|
|
this.player = null;
|
|||
|
|
restoreVideoDOM();
|
|||
|
|
window.EffectSounds?.ding?.();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 开始观看广告并启动进度轮询。
|
|||
|
|
*
|
|||
|
|
* @returns {Promise<void>}
|
|||
|
|
*/
|
|||
|
|
async startWatching() {
|
|||
|
|
this.status = "watching";
|
|||
|
|
this.countdown = "请求广告...";
|
|||
|
|
this.videoFinished = false;
|
|||
|
|
this.stopTimer();
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await loadFluidPlayerScript();
|
|||
|
|
} catch (error) {
|
|||
|
|
this.status = "idle";
|
|||
|
|
showToast({ title: "播放器加载失败", message: "广告播放器暂时不可用，请稍后再试。", icon: "⚠️", color: "#ef4444" });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.initPlayer();
|
|||
|
|
let elapsedTime = 0;
|
|||
|
|
|
|||
|
|
this.timer = window.setInterval(() => {
|
|||
|
|
if (this.videoFinished) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const video = document.getElementById("exoclick-video");
|
|||
|
|
elapsedTime += 0.5;
|
|||
|
|
|
|||
|
|
if (!video) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const duration = video.duration;
|
|||
|
|
const currentTime = video.currentTime;
|
|||
|
|
|
|||
|
|
if (!Number.isNaN(duration) && duration > 0) {
|
|||
|
|
const left = Math.ceil(duration - currentTime);
|
|||
|
|
this.countdown = `${left > 0 ? left : 0} 秒`;
|
|||
|
|
|
|||
|
|
if (left <= 0 && currentTime > 0) {
|
|||
|
|
this.completeWatch();
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 无广告填充或缓冲过慢时，最多等待 20 秒后放行奖励。
|
|||
|
|
const fallbackLeft = Math.ceil(20 - elapsedTime);
|
|||
|
|
if (fallbackLeft > 0) {
|
|||
|
|
this.countdown = `缓冲/加载中... ${fallbackLeft}s`;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.completeWatch();
|
|||
|
|
}, 500);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 初始化 FluidPlayer 实例。
|
|||
|
|
*
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
initPlayer() {
|
|||
|
|
const video = document.getElementById("exoclick-video");
|
|||
|
|
const doInit = () => {
|
|||
|
|
try {
|
|||
|
|
this.player = window.fluidPlayer("exoclick-video", {
|
|||
|
|
layoutControls: {
|
|||
|
|
primaryColor: "#336699",
|
|||
|
|
posterImage: false,
|
|||
|
|
playButtonShowing: true,
|
|||
|
|
playPauseAnimation: false,
|
|||
|
|
fillToContainer: true,
|
|||
|
|
autoPlay: true,
|
|||
|
|
mute: false,
|
|||
|
|
},
|
|||
|
|
vastOptions: {
|
|||
|
|
allowVPAID: true,
|
|||
|
|
vastTimeout: 8000,
|
|||
|
|
adList: [
|
|||
|
|
{
|
|||
|
|
roll: "preRoll",
|
|||
|
|
vastTag: VAST_TAG_URL,
|
|||
|
|
adText: "请观看广告获取金币",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
// 第三方播放器初始化失败时保留面板，用户可关闭后重试。
|
|||
|
|
console.error("[EarnPanel] 播放器初始化未成功", error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (video && !video.paused) {
|
|||
|
|
video.pause();
|
|||
|
|
video.addEventListener("pause", doInit, { once: true });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
doInit();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 停止观看进度计时器。
|
|||
|
|
*
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
stopTimer() {
|
|||
|
|
if (!this.timer) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.clearInterval(this.timer);
|
|||
|
|
this.timer = null;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 向后端领取观看奖励。
|
|||
|
|
*
|
|||
|
|
* @returns {Promise<void>}
|
|||
|
|
*/
|
|||
|
|
async claimReward() {
|
|||
|
|
if (this.status !== "completed") {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.status = "claiming";
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch(window.chatContext.earnRewardUrl, {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: {
|
|||
|
|
"Content-Type": "application/json",
|
|||
|
|
"X-CSRF-TOKEN": csrf(),
|
|||
|
|
"Accept": "application/json",
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
room_id: window.chatContext?.roomId || 0,
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
const data = await response.json();
|
|||
|
|
|
|||
|
|
if (response.ok && data.success) {
|
|||
|
|
this.status = "claimed";
|
|||
|
|
showToast({ title: "奖励到账", message: data.message || "领取成功！", icon: "🎉", color: "#10b981" });
|
|||
|
|
|
|||
|
|
if (data.new_jjb !== undefined) {
|
|||
|
|
window.chatContext.userJjb = data.new_jjb;
|
|||
|
|
window.chatContext.myGold = data.new_jjb;
|
|||
|
|
window.dispatchEvent(new CustomEvent("update-user-points", { detail: { points: data.new_jjb } }));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.EffectSounds?.ding?.();
|
|||
|
|
|
|||
|
|
if (data.level_up) {
|
|||
|
|
showToast({
|
|||
|
|
title: "等级提升",
|
|||
|
|
message: `恭喜！您的等级提升到了 ${data.new_level_name}！`,
|
|||
|
|
icon: "🌟",
|
|||
|
|
color: "#8b5cf6",
|
|||
|
|
duration: 5000,
|
|||
|
|
});
|
|||
|
|
window.setTimeout(() => {
|
|||
|
|
window.EffectManager?.play?.("fireworks");
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.status = "completed";
|
|||
|
|
showToast({ title: "出错了", message: data.message || "领奖失败，请稍后再试。", icon: "❌", color: "#ef4444", duration: 4000 });
|
|||
|
|
} catch (error) {
|
|||
|
|
this.status = "completed";
|
|||
|
|
showToast({ title: "网络错误", message: "网络请求失败，请检查连接。", icon: "⚠️", color: "#ef4444" });
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 注册赚钱面板 Alpine 组件。
|
|||
|
|
*
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
function registerEarnPanelData() {
|
|||
|
|
if (earnPanelRegistered || !window.Alpine) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
earnPanelRegistered = true;
|
|||
|
|
window.Alpine.data("earnPanelData", createEarnPanelData);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 绑定赚钱面板入口和 Alpine 注册事件。
|
|||
|
|
*
|
|||
|
|
* @returns {void}
|
|||
|
|
*/
|
|||
|
|
export function bindEarnPanelControls() {
|
|||
|
|
if (typeof window === "undefined" || earnPanelControlsBound) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
earnPanelControlsBound = true;
|
|||
|
|
window.createEarnPanelData = createEarnPanelData;
|
|||
|
|
window.openEarnPanel = () => {
|
|||
|
|
window.dispatchEvent(new CustomEvent("open-earn-panel"));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
document.addEventListener("alpine:init", registerEarnPanelData, { once: true });
|
|||
|
|
registerEarnPanelData();
|
|||
|
|
}
|