转盘抽奖
This commit is contained in:
zhx
parent
30a06840f8
commit
4c0e3b2918
@ -1 +1 @@
|
|||||||
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><title>Yumi</title><link rel=icon href=./src/assets/logoFavicon.ico><link href=/agencypanel/static/css/app.a5e99046d79db05830c062cb43887024.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/agencypanel/static/js/wheel-gateway-api.js?v=20260519-idempotency></script><script type=text/javascript src=/agencypanel/static/js/wheel-target-fix.js?v=20260515-target></script><script type=text/javascript src=/agencypanel/static/js/wheel-tab-filter.js></script><script type=text/javascript src=/agencypanel/static/js/manifest.50b03fb9228447d5e5bd.js></script><script type=text/javascript src=/agencypanel/static/js/vendor.26202bf12488c03c4627.js></script><script type=text/javascript src=/agencypanel/static/js/app.114c97eb0e121b96529d.js></script></body></html>
|
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><title>Yumi</title><link rel=icon href=./src/assets/logoFavicon.ico><link href=/agencypanel/static/css/app.a5e99046d79db05830c062cb43887024.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/agencypanel/static/js/wheel-gateway-api.js?v=20260520-preview-loader></script><script type=text/javascript src=/agencypanel/static/js/wheel-target-fix.js?v=20260515-target></script><script type=text/javascript src=/agencypanel/static/js/wheel-tab-filter.js></script><script type=text/javascript src=/agencypanel/static/js/manifest.50b03fb9228447d5e5bd.js></script><script type=text/javascript src=/agencypanel/static/js/vendor.26202bf12488c03c4627.js></script><script type=text/javascript src=/agencypanel/static/js/app.114c97eb0e121b96529d.js></script></body></html>
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><title>Yumi Wheel Local</title><link rel=icon href=./src/assets/logoFavicon.ico><link href=static/css/app.a5e99046d79db05830c062cb43887024.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=static/js/wheel-gateway-api.js?v=20260519-idempotency></script><script type=text/javascript src=static/js/wheel-target-fix.js?v=20260515-target></script><script type=text/javascript src=static/js/wheel-tab-filter.js></script><script type=text/javascript src=static/js/manifest.local.js></script><script type=text/javascript src=static/js/vendor.26202bf12488c03c4627.js></script><script type=text/javascript src=static/js/app.114c97eb0e121b96529d.js></script></body></html>
|
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><title>Yumi Wheel Local</title><link rel=icon href=./src/assets/logoFavicon.ico><link href=static/css/app.a5e99046d79db05830c062cb43887024.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=static/js/wheel-gateway-api.js?v=20260520-preview-loader></script><script type=text/javascript src=static/js/wheel-target-fix.js?v=20260515-target></script><script type=text/javascript src=static/js/wheel-tab-filter.js></script><script type=text/javascript src=static/js/manifest.local.js></script><script type=text/javascript src=static/js/vendor.26202bf12488c03c4627.js></script><script type=text/javascript src=static/js/app.114c97eb0e121b96529d.js></script></body></html>
|
||||||
|
|||||||
535
h5/yumi-wheel/h5/agencypanel/static/js/wheel-dynamic-preview.js
Normal file
535
h5/yumi-wheel/h5/agencypanel/static/js/wheel-dynamic-preview.js
Normal file
@ -0,0 +1,535 @@
|
|||||||
|
(function () {
|
||||||
|
var STYLE_ID = 'yumi-wheel-dynamic-preview-style';
|
||||||
|
var OVERLAY_CLASS = 'yumi-wheel-dynamic-preview-overlay';
|
||||||
|
var PREVIEW_VERSION = '20260520-dynamic-preview-pag';
|
||||||
|
var SVGA_SCRIPT_URLS = [
|
||||||
|
'https://cdn.jsdelivr.net/npm/svgaplayerweb@2.3.2/build/svga.min.js',
|
||||||
|
'https://unpkg.com/svgaplayerweb@2.3.2/build/svga.min.js'
|
||||||
|
];
|
||||||
|
var PAG_SCRIPT_URLS = [
|
||||||
|
'https://cdn.jsdelivr.net/npm/libpag@4.2.84/lib/libpag.min.js',
|
||||||
|
'https://unpkg.com/libpag@4.2.84/lib/libpag.min.js'
|
||||||
|
];
|
||||||
|
var PAG_WASM_URLS = [
|
||||||
|
'https://cdn.jsdelivr.net/npm/libpag@4.2.84/lib/libpag.wasm',
|
||||||
|
'https://unpkg.com/libpag@4.2.84/lib/libpag.wasm'
|
||||||
|
];
|
||||||
|
var svgaLoaderPromise = null;
|
||||||
|
var pagLoaderPromise = null;
|
||||||
|
var previousBodyOverflow = null;
|
||||||
|
|
||||||
|
function matches(node, selector) {
|
||||||
|
if (!node || node.nodeType !== 1) return false;
|
||||||
|
var fn = node.matches || node.webkitMatchesSelector || node.msMatchesSelector;
|
||||||
|
return !!fn && fn.call(node, selector);
|
||||||
|
}
|
||||||
|
|
||||||
|
function closest(node, selector) {
|
||||||
|
while (node && node.nodeType === 1) {
|
||||||
|
if (matches(node, selector)) return node;
|
||||||
|
node = node.parentNode;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hasClass(node, name) {
|
||||||
|
if (!node) return false;
|
||||||
|
if (node.classList) return node.classList.contains(name);
|
||||||
|
return (' ' + (node.className || '') + ' ').indexOf(' ' + name + ' ') >= 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function injectStyle() {
|
||||||
|
if (document.getElementById(STYLE_ID)) return;
|
||||||
|
var style = document.createElement('style');
|
||||||
|
style.id = STYLE_ID;
|
||||||
|
style.textContent = [
|
||||||
|
'.' + OVERLAY_CLASS + '{position:fixed;left:0;top:0;right:0;bottom:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.88);touch-action:manipulation;-webkit-tap-highlight-color:transparent;}',
|
||||||
|
'.yumi-wheel-dynamic-preview-stage{width:100vw;height:100vh;box-sizing:border-box;padding:24px;display:flex;align-items:center;justify-content:center;}',
|
||||||
|
'.yumi-wheel-dynamic-preview-media{display:block;max-width:92vw;max-height:82vh;object-fit:contain;}',
|
||||||
|
'.yumi-wheel-dynamic-preview-svga{width:92vw;height:92vw;max-width:420px;max-height:420px;}',
|
||||||
|
'.yumi-wheel-dynamic-preview-pag{display:block;max-width:92vw;max-height:82vh;}',
|
||||||
|
'.yumi-wheel-dynamic-preview-spinner{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.28);border-top-color:#fff;animation:yumiWheelPreviewSpin .8s linear infinite;}',
|
||||||
|
'@media (orientation:landscape){.yumi-wheel-dynamic-preview-media{max-width:82vw;max-height:88vh}.yumi-wheel-dynamic-preview-svga{width:72vh;height:72vh;max-width:520px;max-height:520px}}',
|
||||||
|
'@keyframes yumiWheelPreviewSpin{to{transform:rotate(360deg)}}'
|
||||||
|
].join('');
|
||||||
|
document.head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearNode(node) {
|
||||||
|
while (node && node.firstChild) node.removeChild(node.firstChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
function firstString(source, keys) {
|
||||||
|
if (!source) return '';
|
||||||
|
for (var index = 0; index < keys.length; index++) {
|
||||||
|
var value = source[keys[index]];
|
||||||
|
if (value !== null && value !== undefined && String(value).trim() !== '') {
|
||||||
|
return String(value).trim();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function dynamicURL(item) {
|
||||||
|
var merchandise = (item && item.merchandise) || {};
|
||||||
|
return (
|
||||||
|
firstString(merchandise, ['animationUrl', 'resourceUrl', 'sourceUrl', 'url']) ||
|
||||||
|
firstString(item, ['animationUrl', 'resourceUrl', 'sourceUrl', 'url'])
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function coverURL(item) {
|
||||||
|
var merchandise = (item && item.merchandise) || {};
|
||||||
|
return firstString(merchandise, ['coverUrl', 'cover', 'image']) || firstString(item, ['coverUrl', 'cover', 'image']);
|
||||||
|
}
|
||||||
|
|
||||||
|
function rewardName(item) {
|
||||||
|
var merchandise = (item && item.merchandise) || {};
|
||||||
|
return firstString(merchandise, ['name', 'resourceName']) || firstString(item, ['name', 'resourceName']);
|
||||||
|
}
|
||||||
|
|
||||||
|
function itemPayload(item) {
|
||||||
|
var url = dynamicURL(item);
|
||||||
|
if (!url) return null;
|
||||||
|
return {
|
||||||
|
url: url,
|
||||||
|
cover: coverURL(item),
|
||||||
|
name: rewardName(item)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function indexOfNode(nodes, target) {
|
||||||
|
for (var index = 0; index < nodes.length; index++) {
|
||||||
|
if (nodes[index] === target) return index;
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function gridItemPayload(vm, img) {
|
||||||
|
if (!img || hasClass(img, 'gift-webp')) return null;
|
||||||
|
var gridItem = closest(img, '.grid-item');
|
||||||
|
if (!gridItem || !vm.$el || !vm.$el.contains(gridItem)) return null;
|
||||||
|
var grid = closest(gridItem, '.lottery-grid');
|
||||||
|
if (!grid || !vm.$el.contains(grid)) return null;
|
||||||
|
var index = indexOfNode(grid.querySelectorAll('.grid-item'), gridItem);
|
||||||
|
if (index < 0) return null;
|
||||||
|
return itemPayload((vm.gridItems || [])[index]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function currentRewardPayload(vm, img) {
|
||||||
|
var box = closest(img, '.box-desc');
|
||||||
|
if (!box || !vm.$el || !vm.$el.contains(box)) return null;
|
||||||
|
var popup = closest(box, '.reward-content');
|
||||||
|
if (!popup || !vm.$el.contains(popup)) return null;
|
||||||
|
var boxes = popup.querySelectorAll('.box-desc');
|
||||||
|
var index = indexOfNode(boxes, box);
|
||||||
|
if (index < 0) return null;
|
||||||
|
var rewards = (vm.currentReward && vm.currentReward.rewards) || [];
|
||||||
|
return itemPayload(rewards[index]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function historyRewardPayload(vm, img) {
|
||||||
|
var box = closest(img, '.box-desc');
|
||||||
|
var list = closest(img, '.list');
|
||||||
|
if (!box || !list || !vm.$el || !vm.$el.contains(list)) return null;
|
||||||
|
var popup = closest(list, '.popup-content');
|
||||||
|
if (!popup || !vm.$el.contains(popup)) return null;
|
||||||
|
var recordIndex = indexOfNode(popup.querySelectorAll('.list'), list);
|
||||||
|
var rewardIndex = indexOfNode(list.querySelectorAll('.box-desc'), box);
|
||||||
|
var record = (vm.historyRecord || [])[recordIndex];
|
||||||
|
if (!record || rewardIndex < 0) return null;
|
||||||
|
return itemPayload((record.rewards || [])[rewardIndex]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function prizePayloadFromClick(vm, event) {
|
||||||
|
var img = closest(event.target, 'img.img');
|
||||||
|
if (!img || !vm.$el || !vm.$el.contains(img)) return null;
|
||||||
|
return gridItemPayload(vm, img) || currentRewardPayload(vm, img) || historyRewardPayload(vm, img);
|
||||||
|
}
|
||||||
|
|
||||||
|
function mediaKind(url) {
|
||||||
|
var lower = String(url || '').toLowerCase();
|
||||||
|
if (/^data:video\//.test(lower)) return 'video';
|
||||||
|
if (/^data:image\//.test(lower)) return 'image';
|
||||||
|
try {
|
||||||
|
lower = new URL(url, window.location.href).pathname.toLowerCase();
|
||||||
|
} catch (error) {
|
||||||
|
lower = lower.split('?')[0].split('#')[0];
|
||||||
|
}
|
||||||
|
if (/\.(mp4|webm|mov|m4v)$/.test(lower)) return 'video';
|
||||||
|
if (/\.(gif|webp|png|jpg|jpeg|svg)$/.test(lower)) return 'image';
|
||||||
|
if (/\.svga$/.test(lower)) return 'svga';
|
||||||
|
if (/\.pag$/.test(lower)) return 'pag';
|
||||||
|
return 'unknown';
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeExistingOverlay() {
|
||||||
|
var overlay = document.querySelector('.' + OVERLAY_CLASS);
|
||||||
|
if (overlay) closeOverlay(overlay);
|
||||||
|
}
|
||||||
|
|
||||||
|
function lockBodyScroll() {
|
||||||
|
if (previousBodyOverflow === null && document.body) {
|
||||||
|
previousBodyOverflow = document.body.style.overflow || '';
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function unlockBodyScroll() {
|
||||||
|
if (previousBodyOverflow !== null && document.body) {
|
||||||
|
document.body.style.overflow = previousBodyOverflow;
|
||||||
|
previousBodyOverflow = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeOverlay(overlay) {
|
||||||
|
if (!overlay) return;
|
||||||
|
if (overlay.__previewVideo) {
|
||||||
|
try {
|
||||||
|
overlay.__previewVideo.pause();
|
||||||
|
} catch (error) {}
|
||||||
|
}
|
||||||
|
if (overlay.__svgaPlayer && typeof overlay.__svgaPlayer.stopAnimation === 'function') {
|
||||||
|
try {
|
||||||
|
overlay.__svgaPlayer.stopAnimation();
|
||||||
|
} catch (error) {}
|
||||||
|
}
|
||||||
|
if (overlay.__pagView) {
|
||||||
|
['pause', 'stop', 'destroy', 'free'].forEach(function (method) {
|
||||||
|
if (overlay.__pagView && typeof overlay.__pagView[method] === 'function') {
|
||||||
|
try {
|
||||||
|
overlay.__pagView[method]();
|
||||||
|
} catch (error) {}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
|
||||||
|
unlockBodyScroll();
|
||||||
|
}
|
||||||
|
|
||||||
|
function createOverlay() {
|
||||||
|
injectStyle();
|
||||||
|
removeExistingOverlay();
|
||||||
|
var overlay = document.createElement('div');
|
||||||
|
var stage = document.createElement('div');
|
||||||
|
var spinner = document.createElement('div');
|
||||||
|
overlay.className = OVERLAY_CLASS;
|
||||||
|
overlay.setAttribute('role', 'dialog');
|
||||||
|
stage.className = 'yumi-wheel-dynamic-preview-stage';
|
||||||
|
spinner.className = 'yumi-wheel-dynamic-preview-spinner';
|
||||||
|
stage.appendChild(spinner);
|
||||||
|
overlay.appendChild(stage);
|
||||||
|
overlay.addEventListener('click', function () {
|
||||||
|
closeOverlay(overlay);
|
||||||
|
});
|
||||||
|
document.body.appendChild(overlay);
|
||||||
|
lockBodyScroll();
|
||||||
|
return { overlay: overlay, stage: stage };
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderImage(stage, overlay, url, fallbackURL, name) {
|
||||||
|
clearNode(stage);
|
||||||
|
var image = document.createElement('img');
|
||||||
|
image.className = 'yumi-wheel-dynamic-preview-media';
|
||||||
|
image.alt = name || '';
|
||||||
|
image.src = url;
|
||||||
|
image.onerror = function () {
|
||||||
|
if (fallbackURL && image.src !== fallbackURL) {
|
||||||
|
image.src = fallbackURL;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
stage.appendChild(image);
|
||||||
|
overlay.__previewImage = image;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderVideo(stage, overlay, url, fallbackURL, name) {
|
||||||
|
clearNode(stage);
|
||||||
|
var video = document.createElement('video');
|
||||||
|
video.className = 'yumi-wheel-dynamic-preview-media';
|
||||||
|
video.src = url;
|
||||||
|
video.loop = true;
|
||||||
|
video.muted = true;
|
||||||
|
video.autoplay = true;
|
||||||
|
video.playsInline = true;
|
||||||
|
video.setAttribute('playsinline', '');
|
||||||
|
video.setAttribute('webkit-playsinline', '');
|
||||||
|
video.setAttribute('aria-label', name || '');
|
||||||
|
video.onerror = function () {
|
||||||
|
renderImage(stage, overlay, fallbackURL || url, fallbackURL, name);
|
||||||
|
};
|
||||||
|
stage.appendChild(video);
|
||||||
|
overlay.__previewVideo = video;
|
||||||
|
var playResult = video.play && video.play();
|
||||||
|
if (playResult && typeof playResult.catch === 'function') {
|
||||||
|
playResult.catch(function () {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadSVGAPlayer() {
|
||||||
|
if (window.SVGA && window.SVGA.Player && window.SVGA.Parser) {
|
||||||
|
return Promise.resolve(window.SVGA);
|
||||||
|
}
|
||||||
|
if (svgaLoaderPromise) return svgaLoaderPromise;
|
||||||
|
svgaLoaderPromise = new Promise(function (resolve, reject) {
|
||||||
|
function loadAt(index) {
|
||||||
|
if (index >= SVGA_SCRIPT_URLS.length) {
|
||||||
|
reject(new Error('svga player load failed'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var script = document.createElement('script');
|
||||||
|
script.async = true;
|
||||||
|
script.crossOrigin = 'anonymous';
|
||||||
|
script.src = SVGA_SCRIPT_URLS[index];
|
||||||
|
script.onload = function () {
|
||||||
|
if (window.SVGA && window.SVGA.Player && window.SVGA.Parser) {
|
||||||
|
resolve(window.SVGA);
|
||||||
|
} else {
|
||||||
|
loadAt(index + 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
script.onerror = function () {
|
||||||
|
loadAt(index + 1);
|
||||||
|
};
|
||||||
|
document.head.appendChild(script);
|
||||||
|
}
|
||||||
|
loadAt(0);
|
||||||
|
});
|
||||||
|
return svgaLoaderPromise;
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadScript(urls, ready, index) {
|
||||||
|
index = index || 0;
|
||||||
|
if (ready()) return Promise.resolve();
|
||||||
|
if (index >= urls.length) return Promise.reject(new Error('script load failed'));
|
||||||
|
return new Promise(function (resolve, reject) {
|
||||||
|
var script = document.createElement('script');
|
||||||
|
script.async = true;
|
||||||
|
script.crossOrigin = 'anonymous';
|
||||||
|
script.src = urls[index];
|
||||||
|
script.onload = function () {
|
||||||
|
if (ready()) {
|
||||||
|
resolve();
|
||||||
|
} else {
|
||||||
|
reject(new Error('script loaded without api'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
script.onerror = reject;
|
||||||
|
document.head.appendChild(script);
|
||||||
|
}).catch(function () {
|
||||||
|
return loadScript(urls, ready, index + 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initPAG(wasmIndex) {
|
||||||
|
if (!window.libpag || typeof window.libpag.PAGInit !== 'function') {
|
||||||
|
return Promise.reject(new Error('libpag missing'));
|
||||||
|
}
|
||||||
|
return window.libpag.PAGInit({
|
||||||
|
locateFile: function (file) {
|
||||||
|
if (/\.wasm(\?|#|$)/.test(String(file || ''))) {
|
||||||
|
return PAG_WASM_URLS[wasmIndex] || PAG_WASM_URLS[0];
|
||||||
|
}
|
||||||
|
return file;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadPAGPlayer() {
|
||||||
|
if (window.__YUMI_WHEEL_PAG__) return Promise.resolve(window.__YUMI_WHEEL_PAG__);
|
||||||
|
if (pagLoaderPromise) return pagLoaderPromise;
|
||||||
|
pagLoaderPromise = loadScript(PAG_SCRIPT_URLS, function () {
|
||||||
|
return !!(window.libpag && window.libpag.PAGInit);
|
||||||
|
}).then(function () {
|
||||||
|
return initPAG(0).catch(function () {
|
||||||
|
return initPAG(1);
|
||||||
|
});
|
||||||
|
}).then(function (PAG) {
|
||||||
|
window.__YUMI_WHEEL_PAG__ = PAG;
|
||||||
|
return PAG;
|
||||||
|
});
|
||||||
|
return pagLoaderPromise;
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadArrayBuffer(url) {
|
||||||
|
if (window.fetch) {
|
||||||
|
return window.fetch(url, { mode: 'cors' }).then(function (response) {
|
||||||
|
if (!response.ok) throw new Error('pag file load failed');
|
||||||
|
return response.arrayBuffer();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return new Promise(function (resolve, reject) {
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('GET', url, true);
|
||||||
|
xhr.responseType = 'arraybuffer';
|
||||||
|
xhr.onload = function () {
|
||||||
|
if (xhr.status >= 200 && xhr.status < 300) {
|
||||||
|
resolve(xhr.response);
|
||||||
|
} else {
|
||||||
|
reject(new Error('pag file load failed'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.onerror = reject;
|
||||||
|
xhr.send();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderSVGA(stage, overlay, url, fallbackURL, name) {
|
||||||
|
var host = document.createElement('div');
|
||||||
|
clearNode(stage);
|
||||||
|
host.className = 'yumi-wheel-dynamic-preview-svga';
|
||||||
|
stage.appendChild(host);
|
||||||
|
loadSVGAPlayer()
|
||||||
|
.then(function (SVGA) {
|
||||||
|
if (!document.documentElement.contains(overlay)) return;
|
||||||
|
var player = new SVGA.Player(host);
|
||||||
|
var parser = new SVGA.Parser(host);
|
||||||
|
overlay.__svgaPlayer = player;
|
||||||
|
parser.load(
|
||||||
|
url,
|
||||||
|
function (videoItem) {
|
||||||
|
if (!document.documentElement.contains(overlay)) return;
|
||||||
|
player.setVideoItem(videoItem);
|
||||||
|
player.loops = 0;
|
||||||
|
player.startAnimation();
|
||||||
|
},
|
||||||
|
function () {
|
||||||
|
renderImage(stage, overlay, fallbackURL || url, fallbackURL, name);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.catch(function () {
|
||||||
|
renderImage(stage, overlay, fallbackURL || url, fallbackURL, name);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPAG(stage, overlay, url, fallbackURL, name) {
|
||||||
|
var canvas = document.createElement('canvas');
|
||||||
|
clearNode(stage);
|
||||||
|
canvas.className = 'yumi-wheel-dynamic-preview-pag';
|
||||||
|
canvas.setAttribute('aria-label', name || '');
|
||||||
|
stage.appendChild(canvas);
|
||||||
|
loadPAGPlayer()
|
||||||
|
.then(function (PAG) {
|
||||||
|
if (!document.documentElement.contains(overlay)) return null;
|
||||||
|
return loadArrayBuffer(url).then(function (buffer) {
|
||||||
|
return PAG.PAGFile.load(buffer);
|
||||||
|
}).then(function (pagFile) {
|
||||||
|
if (!document.documentElement.contains(overlay)) return null;
|
||||||
|
var width = Math.max(1, Number(pagFile.width && pagFile.width()) || 1);
|
||||||
|
var height = Math.max(1, Number(pagFile.height && pagFile.height()) || 1);
|
||||||
|
canvas.width = width;
|
||||||
|
canvas.height = height;
|
||||||
|
canvas.style.aspectRatio = width + ' / ' + height;
|
||||||
|
return PAG.PAGView.init(pagFile, canvas).then(function (pagView) {
|
||||||
|
if (!document.documentElement.contains(overlay)) {
|
||||||
|
if (pagView && typeof pagView.destroy === 'function') pagView.destroy();
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
overlay.__pagView = pagView;
|
||||||
|
if (typeof pagView.play === 'function') {
|
||||||
|
return pagView.play();
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(function () {
|
||||||
|
renderImage(stage, overlay, fallbackURL || url, fallbackURL, name);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function showDynamicPreview(url, fallbackURL, name) {
|
||||||
|
if (!url) return;
|
||||||
|
var nodes = createOverlay();
|
||||||
|
var kind = mediaKind(url);
|
||||||
|
if (kind === 'svga') {
|
||||||
|
renderSVGA(nodes.stage, nodes.overlay, url, fallbackURL, name);
|
||||||
|
} else if (kind === 'pag') {
|
||||||
|
renderPAG(nodes.stage, nodes.overlay, url, fallbackURL, name);
|
||||||
|
} else if (kind === 'video') {
|
||||||
|
renderVideo(nodes.stage, nodes.overlay, url, fallbackURL, name);
|
||||||
|
} else if (kind === 'image') {
|
||||||
|
renderImage(nodes.stage, nodes.overlay, url, fallbackURL, name);
|
||||||
|
} else {
|
||||||
|
renderVideo(nodes.stage, nodes.overlay, url, fallbackURL, name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function walkVue(vm, visitor, seen) {
|
||||||
|
if (!vm || seen.indexOf(vm) >= 0) return;
|
||||||
|
seen.push(vm);
|
||||||
|
visitor(vm);
|
||||||
|
(vm.$children || []).forEach(function (child) {
|
||||||
|
walkVue(child, visitor, seen);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function visibleElement(el) {
|
||||||
|
if (!el || !document.documentElement.contains(el)) return false;
|
||||||
|
var rect = el.getBoundingClientRect();
|
||||||
|
return rect.width > 0 && rect.height > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function wheelInstances() {
|
||||||
|
var roots = [];
|
||||||
|
var app = document.getElementById('app');
|
||||||
|
if (app && app.__vue__) roots.push(app.__vue__);
|
||||||
|
document.querySelectorAll('.lucky-box').forEach(function (node) {
|
||||||
|
if (node.__vue__) roots.push(node.__vue__);
|
||||||
|
});
|
||||||
|
|
||||||
|
var result = [];
|
||||||
|
roots.forEach(function (root) {
|
||||||
|
walkVue(root, function (vm) {
|
||||||
|
if (
|
||||||
|
vm &&
|
||||||
|
Array.isArray(vm.gridItems) &&
|
||||||
|
typeof vm.startLottery === 'function' &&
|
||||||
|
visibleElement(vm.$el)
|
||||||
|
) {
|
||||||
|
result.push(vm);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function patchVm(vm) {
|
||||||
|
if (vm.__wheelDynamicPreviewApplied) return;
|
||||||
|
vm.__wheelDynamicPreviewApplied = true;
|
||||||
|
vm.$el.addEventListener(
|
||||||
|
'click',
|
||||||
|
function (event) {
|
||||||
|
var payload = prizePayloadFromClick(vm, event);
|
||||||
|
if (!payload || !payload.url) return;
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
showDynamicPreview(payload.url, payload.cover, payload.name);
|
||||||
|
},
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function patchAll() {
|
||||||
|
wheelInstances().forEach(patchVm);
|
||||||
|
}
|
||||||
|
|
||||||
|
var observer = new MutationObserver(patchAll);
|
||||||
|
observer.observe(document.documentElement, { childList: true, subtree: true });
|
||||||
|
setInterval(patchAll, 500);
|
||||||
|
patchAll();
|
||||||
|
|
||||||
|
try {
|
||||||
|
document.documentElement.setAttribute('data-yumi-wheel-dynamic-preview', PREVIEW_VERSION);
|
||||||
|
document.addEventListener('yumi-wheel-dynamic-preview', function (event) {
|
||||||
|
var detail = (event && event.detail) || {};
|
||||||
|
showDynamicPreview(detail.url, detail.coverUrl || detail.cover, detail.name);
|
||||||
|
});
|
||||||
|
} catch (error) {}
|
||||||
|
|
||||||
|
window.__YUMI_WHEEL_DYNAMIC_PREVIEW__ = {
|
||||||
|
show: showDynamicPreview,
|
||||||
|
patchAll: patchAll,
|
||||||
|
version: PREVIEW_VERSION
|
||||||
|
};
|
||||||
|
})();
|
||||||
@ -3,6 +3,7 @@
|
|||||||
var productionGatewayBase = 'https://jvapi.haiyihy.com';
|
var productionGatewayBase = 'https://jvapi.haiyihy.com';
|
||||||
var defaultGatewayBase = resolveDefaultGatewayBase();
|
var defaultGatewayBase = resolveDefaultGatewayBase();
|
||||||
var defaultGatewayPrefix = '/go';
|
var defaultGatewayPrefix = '/go';
|
||||||
|
var dynamicPreviewVersion = '20260520-dynamic-preview-pag';
|
||||||
var defaultSysOrigin = 'LIKEI';
|
var defaultSysOrigin = 'LIKEI';
|
||||||
var defaultReqClient = 'Android';
|
var defaultReqClient = 'Android';
|
||||||
var defaultReqAppIntel = {
|
var defaultReqAppIntel = {
|
||||||
@ -314,6 +315,98 @@
|
|||||||
/\/api\/v1\/probability\/[^/]+\/draw$/.test(path);
|
/\/api\/v1\/probability\/[^/]+\/draw$/.test(path);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function scriptBaseURL(scriptName) {
|
||||||
|
var script = document.currentScript;
|
||||||
|
if (!script || !script.src) {
|
||||||
|
var scripts = document.getElementsByTagName('script');
|
||||||
|
for (var index = scripts.length - 1; index >= 0; index -= 1) {
|
||||||
|
if (String(scripts[index].src || '').indexOf(scriptName) !== -1) {
|
||||||
|
script = scripts[index];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var src = script && script.src ? script.src : '';
|
||||||
|
return src ? src.split('?')[0].replace(/[^/]*$/, '') : '';
|
||||||
|
}
|
||||||
|
|
||||||
|
var dynamicPreviewScriptURL = scriptBaseURL('wheel-gateway-api.js') +
|
||||||
|
'wheel-dynamic-preview.js?v=' + dynamicPreviewVersion;
|
||||||
|
var dynamicPreviewLoaded = false;
|
||||||
|
var dynamicPreviewTimer = null;
|
||||||
|
var wheelAPIStarted = false;
|
||||||
|
var wheelAPIPending = 0;
|
||||||
|
var wheelAPILoadStartAt = Date.now();
|
||||||
|
|
||||||
|
function updatePreviewLoaderState() {
|
||||||
|
window.__YUMI_WHEEL_DYNAMIC_PREVIEW_LOADER__ = {
|
||||||
|
loaded: dynamicPreviewLoaded,
|
||||||
|
pendingApis: wheelAPIPending,
|
||||||
|
seenApi: wheelAPIStarted,
|
||||||
|
scriptUrl: dynamicPreviewScriptURL
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadDynamicPreviewScript() {
|
||||||
|
if (dynamicPreviewLoaded || window.__YUMI_WHEEL_DYNAMIC_PREVIEW__) return;
|
||||||
|
dynamicPreviewLoaded = true;
|
||||||
|
updatePreviewLoaderState();
|
||||||
|
var script = document.createElement('script');
|
||||||
|
script.async = true;
|
||||||
|
script.src = dynamicPreviewScriptURL;
|
||||||
|
script.onerror = function () {
|
||||||
|
dynamicPreviewLoaded = false;
|
||||||
|
updatePreviewLoaderState();
|
||||||
|
};
|
||||||
|
(document.head || document.documentElement).appendChild(script);
|
||||||
|
}
|
||||||
|
|
||||||
|
function scheduleDynamicPreviewLoad(delay) {
|
||||||
|
clearTimeout(dynamicPreviewTimer);
|
||||||
|
dynamicPreviewTimer = setTimeout(function () {
|
||||||
|
if (dynamicPreviewLoaded || window.__YUMI_WHEEL_DYNAMIC_PREVIEW__) return;
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
scheduleDynamicPreviewLoad(200);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (wheelAPIPending > 0) {
|
||||||
|
scheduleDynamicPreviewLoad(300);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!wheelAPIStarted && Date.now() - wheelAPILoadStartAt < 3000) {
|
||||||
|
scheduleDynamicPreviewLoad(500);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
loadDynamicPreviewScript();
|
||||||
|
}, delay);
|
||||||
|
}
|
||||||
|
|
||||||
|
function trackWheelAPI(xhr) {
|
||||||
|
if (!xhr || xhr.__wheelGatewayPreviewTracked) return;
|
||||||
|
xhr.__wheelGatewayPreviewTracked = true;
|
||||||
|
wheelAPIStarted = true;
|
||||||
|
wheelAPIPending += 1;
|
||||||
|
updatePreviewLoaderState();
|
||||||
|
var completed = false;
|
||||||
|
var done = function (force) {
|
||||||
|
force = force === true;
|
||||||
|
if (completed) return;
|
||||||
|
if (!force && xhr.readyState && xhr.readyState !== 4) return;
|
||||||
|
completed = true;
|
||||||
|
wheelAPIPending = Math.max(0, wheelAPIPending - 1);
|
||||||
|
updatePreviewLoaderState();
|
||||||
|
scheduleDynamicPreviewLoad(400);
|
||||||
|
};
|
||||||
|
xhr.__wheelGatewayPreviewDone = function () {
|
||||||
|
done(true);
|
||||||
|
};
|
||||||
|
xhr.addEventListener('readystatechange', done);
|
||||||
|
xhr.addEventListener('loadend', done);
|
||||||
|
xhr.addEventListener('error', done);
|
||||||
|
xhr.addEventListener('abort', done);
|
||||||
|
xhr.addEventListener('timeout', done);
|
||||||
|
}
|
||||||
|
|
||||||
function normalizeCompareValue(value) {
|
function normalizeCompareValue(value) {
|
||||||
return String(value || '').trim().toLowerCase();
|
return String(value || '').trim().toLowerCase();
|
||||||
}
|
}
|
||||||
@ -522,7 +615,8 @@
|
|||||||
XMLHttpRequest.prototype.open = function (method, url) {
|
XMLHttpRequest.prototype.open = function (method, url) {
|
||||||
var originalPath = normalizedPath(url);
|
var originalPath = normalizedPath(url);
|
||||||
var nextUrl = rewriteUrl(url);
|
var nextUrl = rewriteUrl(url);
|
||||||
this.__wheelGatewayRequest = nextUrl !== url && isWheelApiPath(originalPath);
|
this.__wheelGatewayWheelAPI = isWheelApiPath(originalPath);
|
||||||
|
this.__wheelGatewayRequest = nextUrl !== url && this.__wheelGatewayWheelAPI;
|
||||||
this.__wheelGatewayDrawRequest = this.__wheelGatewayRequest && isWheelDrawPath(originalPath);
|
this.__wheelGatewayDrawRequest = this.__wheelGatewayRequest && isWheelDrawPath(originalPath);
|
||||||
this.__wheelGatewayUrl = nextUrl;
|
this.__wheelGatewayUrl = nextUrl;
|
||||||
this.__wheelGatewayHeaders = {};
|
this.__wheelGatewayHeaders = {};
|
||||||
@ -592,7 +686,15 @@
|
|||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return nativeSend.apply(this, arguments);
|
if (this.__wheelGatewayWheelAPI) {
|
||||||
|
trackWheelAPI(this);
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
return nativeSend.apply(this, arguments);
|
||||||
|
} catch (error) {
|
||||||
|
if (typeof this.__wheelGatewayPreviewDone === 'function') this.__wheelGatewayPreviewDone();
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
function stripRoomId(body) {
|
function stripRoomId(body) {
|
||||||
@ -621,4 +723,9 @@
|
|||||||
},
|
},
|
||||||
rewriteUrl: rewriteUrl
|
rewriteUrl: rewriteUrl
|
||||||
};
|
};
|
||||||
|
updatePreviewLoaderState();
|
||||||
|
window.addEventListener('load', function () {
|
||||||
|
scheduleDynamicPreviewLoad(500);
|
||||||
|
});
|
||||||
|
scheduleDynamicPreviewLoad(3000);
|
||||||
})();
|
})();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user