mirror of
https://github.com/asphyxia-core/plugins.git
synced 2026-03-21 17:34:46 -05:00
Update SDVX webui plugin to use directly pointed asset paths, preview is still missing on some bgms
This commit is contained in:
LatoWolf
parent
7067c00c66
commit
b04e723fea
|
|
@ -8,6 +8,12 @@ import { error } from 'console';
|
|||
import { unpackS3P } from '../s3p';
|
||||
import { music_db } from '..';
|
||||
import { zipFolderToFile } from '../utils/zip';
|
||||
import path from 'path';
|
||||
|
||||
const joinUnder = (basePath: string, childPath: string) => {
|
||||
const sanitizedChild = (childPath ?? '').replace(/^[/\\]+/, '');
|
||||
return path.join(basePath, sanitizedChild);
|
||||
};
|
||||
|
||||
export const updateProfile = async (data: {
|
||||
refid: string;
|
||||
|
|
@ -244,42 +250,46 @@ export const import_assets = async (data: { path: string }, send: WebUISend) =>
|
|||
|
||||
// await init(wasmUrl);
|
||||
// let ffmpeg = await Wasmer.fromRegistry("wasmer/ffmpeg");
|
||||
let path = data.path
|
||||
console.log(path)
|
||||
const sdvxInstallPath = data.path;
|
||||
console.log(sdvxInstallPath)
|
||||
let fs = require('fs')
|
||||
if (!fs.existsSync(path + '/data/graphics/')) {
|
||||
|
||||
const graphicsDir = path.join(sdvxInstallPath, 'data', 'graphics');
|
||||
if (!fs.existsSync(graphicsDir)) {
|
||||
console.log('Path for Graphics does not exist.')
|
||||
send.error(400,'Path for Graphics does not exist.')
|
||||
return
|
||||
}
|
||||
|
||||
await fs.promises.cp(path + "/data/graphics/ap_card", './plugins/sdvx@asphyxia/webui/asset/ap_card', {recursive: true}).catch((err: any) => {
|
||||
await fs.promises.cp(path.join(graphicsDir, 'ap_card'), './plugins/sdvx@asphyxia/webui/asset/ap_card', {recursive: true}).catch((err: any) => {
|
||||
console.log(err)
|
||||
})
|
||||
await fs.promises.cp(path + "/data/graphics/chat_stamp", './plugins/sdvx@asphyxia/webui/asset/chat_stamp', {recursive: true}).catch((err: any) => {
|
||||
await fs.promises.cp(path.join(graphicsDir, 'chat_stamp'), './plugins/sdvx@asphyxia/webui/asset/chat_stamp', {recursive: true}).catch((err: any) => {
|
||||
console.log(err)
|
||||
})
|
||||
await fs.promises.cp(path + "/data/graphics/game_nemsys", './plugins/sdvx@asphyxia/webui/asset/nemsys', {recursive: true}).catch((err: any) => {
|
||||
await fs.promises.cp(path.join(graphicsDir, 'game_nemsys'), './plugins/sdvx@asphyxia/webui/asset/nemsys', {recursive: true}).catch((err: any) => {
|
||||
console.log(err)
|
||||
})
|
||||
await fs.promises.cp(path + "/data/graphics/submonitor_bg", './plugins/sdvx@asphyxia/webui/asset/submonitor_bg', {recursive: true}).catch((err: any) => {
|
||||
await fs.promises.cp(path.join(graphicsDir, 'submonitor_bg'), './plugins/sdvx@asphyxia/webui/asset/submonitor_bg', {recursive: true}).catch((err: any) => {
|
||||
console.log(err)
|
||||
})
|
||||
|
||||
if (!fs.existsSync(path + '/data/sound/')) {
|
||||
const soundDir = path.join(sdvxInstallPath, 'data', 'sound');
|
||||
if (!fs.existsSync(soundDir)) {
|
||||
console.log('Path for sound does not exist.')
|
||||
send.error(400,'Path for sound does not exist.')
|
||||
return
|
||||
}
|
||||
|
||||
const files = await fs.promises.readdir(path + "/data/sound/custom")
|
||||
const customSoundDir = path.join(soundDir, 'custom');
|
||||
const files = await fs.promises.readdir(customSoundDir)
|
||||
console.log(files)
|
||||
|
||||
for (const file of files) {
|
||||
if (file.endsWith('.s3p')) {
|
||||
fs.mkdirSync('./plugins/sdvx@asphyxia/webui/asset/temp/' + file, { recursive: true });
|
||||
// fs.mkdirSync('./plugins/sdvx@asphyxia/webui/asset/audio/'+file.substring(0, 9), { recursive: true });
|
||||
unpackS3P('./plugins/sdvx@asphyxia/webui/asset/temp/' + file, path + "/data/sound/custom/" + file, {})
|
||||
unpackS3P('./plugins/sdvx@asphyxia/webui/asset/temp/' + file, path.join(customSoundDir, file), {})
|
||||
// fs.promises.readFileSync('./plugins/sdvx@asphyxia/webui/asset/temp/'+file+'/0.wma').then(async (data: any) => {
|
||||
// const instance = await ffmpeg.entrypoint.run({
|
||||
// args: ["-i", "-", "-f", "wav", "-"],
|
||||
|
|
@ -478,4 +488,32 @@ export const update_music_db = async (data: any, send: WebUISend) => {
|
|||
export const sendMdb = async (data: any, send: WebUISend) => {
|
||||
console.log('Sending music_db to WebUI...')
|
||||
send.json(music_db)
|
||||
}
|
||||
|
||||
export const sendAssetData = async ( data: { path: string }, send: WebUISend) => {
|
||||
if (U.GetConfig('sdvx_path') == '') {
|
||||
send.error(400, 'SDVX Path is not set in the plugin configuration.');
|
||||
return;
|
||||
}
|
||||
|
||||
let sdvx_path = U.GetConfig('sdvx_path');
|
||||
|
||||
const full_path = joinUnder(sdvx_path, data.path);
|
||||
|
||||
const fs = require('fs');
|
||||
|
||||
if (!fs.existsSync(full_path)) {
|
||||
send.error(404, 'File not found');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const asset_data: Buffer = await fs.promises.readFile(full_path);
|
||||
console.log(asset_data.length);
|
||||
console.log('Sending asset file: ' + full_path);
|
||||
send.buffer(asset_data);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
send.error(500, 'Failed to read file');
|
||||
}
|
||||
}
|
||||
|
|
@ -13,6 +13,7 @@ import {
|
|||
update_webui_bgm_data,
|
||||
update_music_db,
|
||||
sendMdb,
|
||||
sendAssetData,
|
||||
// sendImg,
|
||||
// sendImgWithID,
|
||||
// getScore,
|
||||
|
|
@ -34,10 +35,25 @@ import { TRANSLATION_TABLE } from './utils';
|
|||
|
||||
import { MusicRecord } from './models/music_record';
|
||||
|
||||
import path from 'path';
|
||||
|
||||
export let music_db;
|
||||
|
||||
function load_music_db(){
|
||||
IO.ReadFile('./music_db.xml').then(data => {
|
||||
|
||||
const fs = require('fs');
|
||||
|
||||
if (U.GetConfig('sdvx_path') == '') {
|
||||
console.log('sdvx_path is not set, skipping music_db load');
|
||||
return;
|
||||
}
|
||||
|
||||
let sdvx_path = U.GetConfig('sdvx_path');
|
||||
|
||||
const mdb_path = path.join(sdvx_path, 'data', 'others', 'music_db.xml');
|
||||
|
||||
|
||||
fs.promises.readFile(mdb_path).then(data => {
|
||||
let mdb_buffer = U.DecodeString(data, 'shift_jis');
|
||||
music_db = U.parseXML(mdb_buffer, false);
|
||||
console.log('music_db loaded, total: '+music_db.mdb.music.length);
|
||||
|
|
@ -52,6 +68,9 @@ function load_music_db(){
|
|||
m.info.title_name["@content"] = title_name;
|
||||
})
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.error('Error reading music_db.xml:', err);
|
||||
});
|
||||
}
|
||||
|
||||
export function register() {
|
||||
|
|
@ -68,6 +87,8 @@ export function register() {
|
|||
R.Config('use_blasterpass',{ type: 'boolean', default: true, name:'Use Blaster Pass', desc:'Enable Blaster Pass for VW and EG'});
|
||||
R.Config('new_year_special',{ type: 'boolean', default: true, name:'Use New Year Special', desc:'Enable New Year Special BGM for login'});
|
||||
R.Config('music_count',{ type: 'integer', default: 2500, name:'Music Count', desc:'The maximum id of music in the game.'});
|
||||
|
||||
R.Config('sdvx_path', { type: 'string', default: '', name:'SDVX Path', desc:'Path to your SDVX installation folder.'});
|
||||
|
||||
R.WebUIEvent('updateProfile', updateProfile);
|
||||
R.WebUIEvent('updateMix', updateMix);
|
||||
|
|
@ -81,6 +102,7 @@ export function register() {
|
|||
R.WebUIEvent('update_webui_bgm', update_webui_bgm_data);
|
||||
R.WebUIEvent('update_music_db', update_music_db);
|
||||
R.WebUIEvent('getMusicDB', sendMdb);
|
||||
R.WebUIEvent('getAssetData', sendAssetData);
|
||||
|
||||
const MultiRoute = (method: string, handler: EPR | boolean) => {
|
||||
R.Route(`game.sv6_${method}`, handler);
|
||||
|
|
@ -147,7 +169,7 @@ export function register() {
|
|||
|
||||
R.Unhandled();
|
||||
|
||||
if (IO.Exists('./music_db.xml')) {
|
||||
load_music_db();
|
||||
}
|
||||
|
||||
load_music_db();
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,90 @@ function zeroPad(num, places) {
|
|||
return Array(+(zero > 0 && zero)).join("0") + num;
|
||||
}
|
||||
|
||||
function isEmptyJson(value) {
|
||||
if (value === null || value === undefined) return true;
|
||||
if (Array.isArray(value)) return value.length === 0;
|
||||
if (typeof value === 'object') return Object.keys(value).length === 0;
|
||||
return false;
|
||||
}
|
||||
|
||||
function hideUiBlocker() {
|
||||
const blocker = document.querySelector('.uiblocker');
|
||||
if (!blocker) return;
|
||||
|
||||
blocker.classList.add('fade');
|
||||
window.setTimeout(() => {
|
||||
blocker.style.display = 'none';
|
||||
}, 600);
|
||||
}
|
||||
|
||||
function showLoadError(message) {
|
||||
hideUiBlocker();
|
||||
|
||||
const loadingText = document.querySelector('#loading_text');
|
||||
if (loadingText) loadingText.textContent = 'Error loading data.';
|
||||
|
||||
const errorLineId = 'load_error_line';
|
||||
const container = document.querySelector('#test') || document.body;
|
||||
let errorLine = document.querySelector(`#${errorLineId}`);
|
||||
if (!errorLine) {
|
||||
errorLine = document.createElement('p');
|
||||
errorLine.id = errorLineId;
|
||||
errorLine.className = 'has-text-danger';
|
||||
errorLine.style.whiteSpace = 'pre-wrap';
|
||||
container.prepend(errorLine);
|
||||
}
|
||||
|
||||
errorLine.textContent = message;
|
||||
try {
|
||||
$('#test').show();
|
||||
} catch (_) {
|
||||
// ignore (jQuery not available / #test missing)
|
||||
}
|
||||
}
|
||||
|
||||
function formatAxiosError(err) {
|
||||
const status = err?.response?.status;
|
||||
const statusText = err?.response?.statusText;
|
||||
const detail = err?.response?.data?.message || err?.message;
|
||||
if (status) return `HTTP ${status}${statusText ? ' ' + statusText : ''}${detail ? `: ${detail}` : ''}`;
|
||||
return detail || 'unknown error';
|
||||
}
|
||||
|
||||
function loadJson(url, label) {
|
||||
return new Promise((resolve, reject) => {
|
||||
$.getJSON(url)
|
||||
.done((json) => {
|
||||
if (isEmptyJson(json)) {
|
||||
reject(new Error(`${label} returned empty JSON.`));
|
||||
return;
|
||||
}
|
||||
resolve(json);
|
||||
})
|
||||
.fail((jqxhr, textStatus, errorThrown) => {
|
||||
const status = jqxhr?.status;
|
||||
const statusText = jqxhr?.statusText;
|
||||
const extra = errorThrown || textStatus || 'unknown error';
|
||||
reject(new Error(`Failed to load ${label}${status ? ` (HTTP ${status}${statusText ? ' ' + statusText : ''})` : ''}: ${extra}`));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function loadMusicDb() {
|
||||
return axios
|
||||
.post('/emit/getMusicDB')
|
||||
.then((response) => {
|
||||
const data = response?.data;
|
||||
if (isEmptyJson(data)) {
|
||||
throw new Error('Music DB returned empty JSON.');
|
||||
}
|
||||
return data;
|
||||
})
|
||||
.catch((err) => {
|
||||
throw new Error(`Failed to load Music DB: ${formatAxiosError(err)}`);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function getSkillAsset(skill) {
|
||||
return "static/asset/skill_lv/skill_" + zeroPad(skill, 2) + ".png";
|
||||
|
|
@ -706,25 +790,21 @@ $(function() {
|
|||
// .css('font-size', "35px")
|
||||
// )
|
||||
|
||||
$.when(
|
||||
// $.getJSON("static/asset/json/music_db.json", function(json) {
|
||||
// music_db = json;
|
||||
// // console.log(music_db);
|
||||
// }),
|
||||
axios.post('/emit/getMusicDB').then(function (response) {
|
||||
music_db = response.data;
|
||||
Promise.all([
|
||||
loadMusicDb().then((json) => {
|
||||
music_db = json;
|
||||
}),
|
||||
$.getJSON("static/asset/json/course_data.json", function(json) {
|
||||
loadJson("static/asset/json/course_data.json", 'course_data.json').then((json) => {
|
||||
course_db = json;
|
||||
}),
|
||||
$.getJSON("static/asset/json/data.json", function(json) {
|
||||
loadJson("static/asset/json/data.json", 'data.json').then((json) => {
|
||||
data_db = json;
|
||||
}),
|
||||
$.getJSON("static/asset/json/appeal.json", function(json) {
|
||||
loadJson("static/asset/json/appeal.json", 'appeal.json').then((json) => {
|
||||
appeal_db = json;
|
||||
//console.log(appeal_db);
|
||||
})
|
||||
).then(function() {
|
||||
}),
|
||||
])
|
||||
.then(function() {
|
||||
let currentVF = parseFloat(calculateVolforce()).toFixed(3);
|
||||
let maxVer;
|
||||
if(skill_data[0] != undefined){
|
||||
|
|
@ -919,6 +999,9 @@ $(function() {
|
|||
document.querySelector('.uiblocker').classList.toggle('fade');
|
||||
$('#test').fadeIn(1000);
|
||||
})
|
||||
.catch((err) => {
|
||||
showLoadError(err?.message ? err.message : String(err));
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,168 @@
|
|||
|
||||
function arraybuffer_emit(event, data) {
|
||||
return axios.post(`/emit/${event}`, data ?? {},{responseType: 'arraybuffer', timeout: 3000000});
|
||||
}
|
||||
|
||||
const GRAPHICS_BASE_PATH = 'data/graphics';
|
||||
|
||||
function guessMimeTypeFromPath(path) {
|
||||
const ext = (path.split('?')[0].split('#')[0].split('.').pop() || '').toLowerCase();
|
||||
switch (ext) {
|
||||
case 'png':
|
||||
return 'image/png';
|
||||
case 'jpg':
|
||||
case 'jpeg':
|
||||
return 'image/jpeg';
|
||||
case 'gif':
|
||||
return 'image/gif';
|
||||
case 'webp':
|
||||
return 'image/webp';
|
||||
case 'svg':
|
||||
return 'image/svg+xml';
|
||||
case 'mp4':
|
||||
return 'video/mp4';
|
||||
default:
|
||||
return 'application/octet-stream';
|
||||
}
|
||||
}
|
||||
|
||||
function toGraphicsPath(urlOrPath) {
|
||||
if (!urlOrPath) return urlOrPath;
|
||||
if (urlOrPath.startsWith('static/asset/')) {
|
||||
return `${GRAPHICS_BASE_PATH}/${urlOrPath.substring('static/asset/'.length)}`;
|
||||
}
|
||||
if (urlOrPath.startsWith('data/graphics/')) {
|
||||
return `${GRAPHICS_BASE_PATH}/${urlOrPath.substring('data/graphics/'.length)}`;
|
||||
}
|
||||
return urlOrPath;
|
||||
}
|
||||
|
||||
function getOrCreateLoadingLabel(el) {
|
||||
const parent = el?.parentElement;
|
||||
if (!parent) return null;
|
||||
|
||||
const id = el.id ? `${el.id}__loading` : '';
|
||||
let label = null;
|
||||
if (id) {
|
||||
try {
|
||||
label = parent.querySelector(`#${CSS.escape(id)}`);
|
||||
} catch (_) {
|
||||
label = parent.querySelector(`#${id}`);
|
||||
}
|
||||
}
|
||||
if (!label) {
|
||||
label = parent.querySelector('.asset-loading-label');
|
||||
}
|
||||
if (label) return label;
|
||||
|
||||
label = document.createElement('div');
|
||||
if (id) label.id = id;
|
||||
label.className = 'asset-loading-label tag is-dark';
|
||||
label.textContent = 'Loading...';
|
||||
label.style.position = 'absolute';
|
||||
label.style.top = '50%';
|
||||
label.style.left = '50%';
|
||||
label.style.transform = 'translate(-50%, -50%)';
|
||||
label.style.zIndex = '10';
|
||||
label.style.borderRadius = '8px';
|
||||
label.style.pointerEvents = 'none';
|
||||
label.style.display = 'none';
|
||||
label.style.zIndex = '1000';
|
||||
label.style.padding = '4px 8px';
|
||||
parent.appendChild(label);
|
||||
return label;
|
||||
}
|
||||
|
||||
function showLoading(el) {
|
||||
const label = getOrCreateLoadingLabel(el);
|
||||
if (label) label.style.display = '';
|
||||
}
|
||||
|
||||
function hideLoading(el) {
|
||||
const label = getOrCreateLoadingLabel(el);
|
||||
if (label) label.style.display = 'none';
|
||||
}
|
||||
|
||||
function waitForMediaLoaded(el) {
|
||||
return new Promise(resolve => {
|
||||
if (!el) return resolve();
|
||||
|
||||
const tag = (el.tagName || '').toUpperCase();
|
||||
if (tag === 'IMG') {
|
||||
if (el.complete) return resolve();
|
||||
const onDone = () => resolve();
|
||||
el.addEventListener('load', onDone, { once: true });
|
||||
el.addEventListener('error', onDone, { once: true });
|
||||
return;
|
||||
}
|
||||
|
||||
if (tag === 'VIDEO') {
|
||||
if (el.readyState >= 2) return resolve();
|
||||
const onDone = () => resolve();
|
||||
el.addEventListener('loadeddata', onDone, { once: true });
|
||||
el.addEventListener('error', onDone, { once: true });
|
||||
return;
|
||||
}
|
||||
|
||||
return resolve();
|
||||
});
|
||||
}
|
||||
|
||||
// Cache asset blob URLs so slideshow/video swaps don't refetch the same files.
|
||||
// Keyed by the request path sent to `getAssetData`.
|
||||
const assetBlobUrlCache = new Map();
|
||||
|
||||
function getAssetCacheKey(urlOrPath) {
|
||||
return toGraphicsPath(urlOrPath);
|
||||
}
|
||||
|
||||
async function getOrCreateAssetBlobUrl(urlOrPath) {
|
||||
const key = getAssetCacheKey(urlOrPath);
|
||||
if (!key) return null;
|
||||
|
||||
const cached = assetBlobUrlCache.get(key);
|
||||
if (cached) return cached;
|
||||
|
||||
const data = await fetchAssetArrayBuffer(key);
|
||||
if (!data) return null;
|
||||
|
||||
const mime = guessMimeTypeFromPath(key);
|
||||
const blobUrl = URL.createObjectURL(new Blob([data], { type: mime }));
|
||||
assetBlobUrlCache.set(key, blobUrl);
|
||||
return blobUrl;
|
||||
}
|
||||
|
||||
window.addEventListener('beforeunload', () => {
|
||||
for (const blobUrl of assetBlobUrlCache.values()) {
|
||||
try {
|
||||
URL.revokeObjectURL(blobUrl);
|
||||
} catch (_) {}
|
||||
}
|
||||
assetBlobUrlCache.clear();
|
||||
});
|
||||
|
||||
async function fetchAssetArrayBuffer(urlOrPath) {
|
||||
const path = toGraphicsPath(urlOrPath);
|
||||
try {
|
||||
const res = await arraybuffer_emit('getAssetData', { path });
|
||||
return res?.data ?? null;
|
||||
} catch (_) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function setMediaSrcFromAsset(el, urlOrPath) {
|
||||
if (!el) return;
|
||||
|
||||
showLoading(el);
|
||||
try {
|
||||
const blobUrl = await getOrCreateAssetBlobUrl(urlOrPath);
|
||||
el.setAttribute('src', blobUrl ?? urlOrPath);
|
||||
await waitForMediaLoaded(el);
|
||||
} finally {
|
||||
hideLoading(el);
|
||||
}
|
||||
}
|
||||
|
||||
function zeroPad(num, places) {
|
||||
let zero = places - num.toString().length + 1;
|
||||
|
|
@ -27,33 +191,16 @@ function isScroll(num){
|
|||
return database["subbg"].filter(x => x.value == num)[0]["scroll"] ?? false;
|
||||
}
|
||||
|
||||
// function isScroll(num){ //238-255 200-213
|
||||
// if((num >= 238 && num <= 255 )|| (num>=200 && num <=213)){
|
||||
// return true;
|
||||
// }else{
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
|
||||
function isVideo(num){
|
||||
return database["subbg"].filter(x => x.value == num)[0]["video"] ?? false;
|
||||
}
|
||||
|
||||
|
||||
let nemsys_selector = document.querySelector('#nemsys_select');
|
||||
nemsys_selector.addEventListener('change', ()=>{
|
||||
nemsys_selector.addEventListener('change', async ()=>{
|
||||
let preview = document.querySelector('#nemsys_pre');
|
||||
let preview_fade = document.querySelector('#nemsys_pre_fade');
|
||||
let value = nemsys_selector.value;
|
||||
preview.classList.toggle('fade');
|
||||
preview_fade.setAttribute("src", "static/asset/nemsys/nemsys_" + zeroPad(value, 4) + ".png");
|
||||
preview_fade.classList.toggle('fade');
|
||||
setTimeout(()=>{
|
||||
preview.setAttribute("src", "static/asset/nemsys/nemsys_" + zeroPad(value, 4) + ".png");
|
||||
preview.classList.toggle('fade');
|
||||
preview_fade.classList.toggle('fade');
|
||||
|
||||
},500);
|
||||
await setMediaSrcFromAsset(preview, "data/graphics/game_nemsys/nemsys_" + zeroPad(value, 4) + ".png");
|
||||
});
|
||||
|
||||
document.querySelector('#nemsys_pre').addEventListener('mousemove', (e)=>{
|
||||
|
|
@ -81,31 +228,27 @@ document.querySelector('#nemsys_pre').addEventListener('mouseout', (e)=>{
|
|||
let subbg_select = document.querySelector('[name="subbg"]');
|
||||
let interval;
|
||||
let cnt = 1;
|
||||
subbg_select.addEventListener('change', ()=>{
|
||||
subbg_select.addEventListener('change', async ()=>{
|
||||
let preview = document.querySelector('#sub_pre');
|
||||
let preview_fade = document.querySelector('#sub_pre_fade');
|
||||
let video = document.querySelector('#sub_video_pre');
|
||||
let value = subbg_select.value;
|
||||
preview.classList.toggle('fade');
|
||||
if(isSlideShow(value)){
|
||||
preview_fade.setAttribute("src", "static/asset/submonitor_bg/subbg_" + zeroPad(value, 4) + "_01.png");
|
||||
}else{
|
||||
preview_fade.setAttribute("src", "static/asset/submonitor_bg/subbg_" + zeroPad(value, 4) + ".png");
|
||||
}
|
||||
preview_fade.classList.toggle('fade');
|
||||
clearInterval(interval);
|
||||
cnt = 1;
|
||||
|
||||
|
||||
|
||||
setTimeout(()=>{
|
||||
preview.classList.toggle('fade');
|
||||
preview_fade.classList.toggle('fade');
|
||||
if(isSlideShow(value)){
|
||||
preview.setAttribute("src", "static/asset/submonitor_bg/subbg_" + zeroPad(value, 4) + "_01.png");
|
||||
}else{
|
||||
preview.setAttribute("src", "static/asset/submonitor_bg/subbg_" + zeroPad(value, 4) + ".png");
|
||||
}
|
||||
},500);
|
||||
const videoSelected = isVideo(value);
|
||||
|
||||
// Ensure correct element is visible immediately.
|
||||
if (videoSelected) {
|
||||
preview.style.display = 'none';
|
||||
video.style.display = 'block';
|
||||
} else {
|
||||
video.style.display = 'none';
|
||||
try {
|
||||
video.pause();
|
||||
video.currentTime = 0;
|
||||
} catch (_) {}
|
||||
preview.style.display = '';
|
||||
}
|
||||
|
||||
if(isScroll(value)){
|
||||
preview.classList.add('scroll');
|
||||
|
|
@ -113,56 +256,30 @@ subbg_select.addEventListener('change', ()=>{
|
|||
preview.classList.remove('scroll');
|
||||
}
|
||||
|
||||
if(isSlideShow(value)){
|
||||
if(videoSelected){
|
||||
await setMediaSrcFromAsset(video, "data/graphics/submonitor_bg/subbg_" + zeroPad(value, 4) + ".mp4");
|
||||
video.setAttribute("autoplay", "");
|
||||
video.setAttribute("loop", "");
|
||||
return;
|
||||
}
|
||||
|
||||
if(isSlideShow(value)){
|
||||
await setMediaSrcFromAsset(preview, "data/graphics/submonitor_bg/subbg_" + zeroPad(value, 4) + "_01.png");
|
||||
interval = setInterval(()=>{
|
||||
if(cnt == 1){
|
||||
preview.classList.toggle('fade');
|
||||
preview_fade.setAttribute("src", "static/asset/submonitor_bg/subbg_" + zeroPad(value, 4) + "_02.png");
|
||||
preview_fade.classList.toggle('fade');
|
||||
setTimeout(()=>{
|
||||
preview.classList.toggle('fade');
|
||||
preview_fade.classList.toggle('fade');
|
||||
preview.setAttribute("src", "static/asset/submonitor_bg/subbg_" + zeroPad(value, 4) + "_02.png");
|
||||
},500);
|
||||
setMediaSrcFromAsset(preview, "data/graphics/submonitor_bg/subbg_" + zeroPad(value, 4) + "_02.png");
|
||||
cnt = 2;
|
||||
}else if(cnt == 2){
|
||||
preview.classList.toggle('fade');
|
||||
preview_fade.setAttribute("src", "static/asset/submonitor_bg/subbg_" + zeroPad(value, 4) + "_03.png");
|
||||
preview_fade.classList.toggle('fade');
|
||||
setTimeout(()=>{
|
||||
preview.setAttribute("src", "static/asset/submonitor_bg/subbg_" + zeroPad(value, 4) + "_03.png");
|
||||
preview.classList.toggle('fade');
|
||||
preview_fade.classList.toggle('fade');
|
||||
|
||||
},500);
|
||||
setMediaSrcFromAsset(preview, "data/graphics/submonitor_bg/subbg_" + zeroPad(value, 4) + "_03.png");
|
||||
cnt = 3;
|
||||
}else{
|
||||
preview.classList.toggle('fade');
|
||||
preview_fade.setAttribute("src", "static/asset/submonitor_bg/subbg_" + zeroPad(value, 4) + "_01.png");
|
||||
preview_fade.classList.toggle('fade');
|
||||
setTimeout(()=>{
|
||||
preview.setAttribute("src", "static/asset/submonitor_bg/subbg_" + zeroPad(value, 4) + "_01.png");
|
||||
preview.classList.toggle('fade');
|
||||
preview_fade.classList.toggle('fade');
|
||||
},500);
|
||||
setMediaSrcFromAsset(preview, "data/graphics/submonitor_bg/subbg_" + zeroPad(value, 4) + "_01.png");
|
||||
cnt = 1;
|
||||
}
|
||||
}, 1000);
|
||||
}else if(isVideo(value)){
|
||||
preview.setAttribute("style", "display: none;")
|
||||
preview_fade.setAttribute("style", "display: none;")
|
||||
let video = document.querySelector('#sub_video_pre');
|
||||
video.setAttribute("style", "display: block;")
|
||||
video.setAttribute("src", "static/asset/submonitor_bg/subbg_" + zeroPad(value, 4) + ".mp4");
|
||||
video.setAttribute("autoplay", "");
|
||||
video.setAttribute("loop", "");
|
||||
}else{
|
||||
clearInterval(interval);
|
||||
let video = document.querySelector('#sub_video_pre');
|
||||
video.setAttribute("style", "display: none;")
|
||||
video.pause();
|
||||
preview.setAttribute("style", "")
|
||||
preview_fade.setAttribute("style", "")
|
||||
await setMediaSrcFromAsset(preview, "data/graphics/submonitor_bg/subbg_" + zeroPad(value, 4) + ".png");
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -250,15 +367,15 @@ async function test(){
|
|||
|
||||
|
||||
$('[name="stampA"]').change(function() {
|
||||
$('#a_pre').fadeOut(200, () => {
|
||||
$('#a_pre').fadeOut(200, async () => {
|
||||
let stamp = $('[name="stampA"]').val();
|
||||
if (stamp == 0) {
|
||||
$('#a_pre').attr("src", "static/asset/nostamp.png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#a_pre'), "static/asset/nostamp.png");
|
||||
} else {
|
||||
let group = Math.trunc((stamp - 1) / 4 + 1);
|
||||
let item = stamp % 4;
|
||||
if (item == 0) item = 4;
|
||||
$('#a_pre').attr("src", "static/asset/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#a_pre'), "data/graphics/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
}
|
||||
});
|
||||
$('#a_pre').fadeIn(200);
|
||||
|
|
@ -267,105 +384,105 @@ $('[name="stampA"]').change(function() {
|
|||
|
||||
|
||||
$('[name="stampB"]').change(function() {
|
||||
$('#b_pre').fadeOut(200, () => {
|
||||
$('#b_pre').fadeOut(200, async () => {
|
||||
let stamp = $('[name="stampB"]').val();
|
||||
if (stamp == 0) {
|
||||
$('#b_pre').attr("src", "static/asset/nostamp.png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#b_pre'), "static/asset/nostamp.png");
|
||||
} else {
|
||||
let group = Math.trunc((stamp - 1) / 4 + 1);
|
||||
let item = stamp % 4;
|
||||
if (item == 0) item = 4;
|
||||
$('#b_pre').attr("src", "static/asset/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#b_pre'), "data/graphics/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
}
|
||||
});
|
||||
$('#b_pre').fadeIn(200);
|
||||
});
|
||||
|
||||
$('[name="stampC"]').change(function() {
|
||||
$('#c_pre').fadeOut(200, () => {
|
||||
$('#c_pre').fadeOut(200, async () => {
|
||||
let stamp = $('[name="stampC"]').val();
|
||||
if (stamp == 0) {
|
||||
$('#c_pre').attr("src", "static/asset/nostamp.png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#c_pre'), "static/asset/nostamp.png");
|
||||
} else {
|
||||
let group = Math.trunc((stamp - 1) / 4 + 1);
|
||||
let item = stamp % 4;
|
||||
if (item == 0) item = 4;
|
||||
$('#c_pre').attr("src", "static/asset/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#c_pre'), "data/graphics/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
}
|
||||
});
|
||||
$('#c_pre').fadeIn(200);
|
||||
});
|
||||
|
||||
$('[name="stampD"]').change(function() {
|
||||
$('#d_pre').fadeOut(200, () => {
|
||||
$('#d_pre').fadeOut(200, async () => {
|
||||
let stamp = $('[name="stampD"]').val();
|
||||
if (stamp == 0) {
|
||||
$('#d_pre').attr("src", "static/asset/nostamp.png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#d_pre'), "static/asset/nostamp.png");
|
||||
} else {
|
||||
let group = Math.trunc((stamp - 1) / 4 + 1);
|
||||
let item = stamp % 4;
|
||||
if (item == 0) item = 4;
|
||||
$('#d_pre').attr("src", "static/asset/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#d_pre'), "data/graphics/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
}
|
||||
});
|
||||
$('#d_pre').fadeIn(200);
|
||||
});
|
||||
|
||||
$('[name="stampA_R"]').change(function() {
|
||||
$('#ar_pre').fadeOut(200, () => {
|
||||
$('#ar_pre').fadeOut(200, async () => {
|
||||
let stamp = $('[name="stampA_R"]').val();
|
||||
if (stamp == 0) {
|
||||
$('#ar_pre').attr("src", "static/asset/nostamp.png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#ar_pre'), "static/asset/nostamp.png");
|
||||
} else {
|
||||
let group = Math.trunc((stamp - 1) / 4 + 1);
|
||||
let item = stamp % 4;
|
||||
if (item == 0) item = 4;
|
||||
$('#ar_pre').attr("src", "static/asset/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#ar_pre'), "data/graphics/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
}
|
||||
});
|
||||
$('#ar_pre').fadeIn(200);
|
||||
});
|
||||
|
||||
$('[name="stampB_R"]').change(function() {
|
||||
$('#br_pre').fadeOut(200, () => {
|
||||
$('#br_pre').fadeOut(200, async () => {
|
||||
let stamp = $('[name="stampB_R"]').val();
|
||||
if (stamp == 0) {
|
||||
$('#br_pre').attr("src", "static/asset/nostamp.png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#br_pre'), "static/asset/nostamp.png");
|
||||
} else {
|
||||
let group = Math.trunc((stamp - 1) / 4 + 1);
|
||||
let item = stamp % 4;
|
||||
if (item == 0) item = 4;
|
||||
$('#br_pre').attr("src", "static/asset/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#br_pre'), "data/graphics/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
}
|
||||
});
|
||||
$('#br_pre').fadeIn(200);
|
||||
});
|
||||
|
||||
$('[name="stampC_R"]').change(function() {
|
||||
$('#cr_pre').fadeOut(200, () => {
|
||||
$('#cr_pre').fadeOut(200, async () => {
|
||||
let stamp = $('[name="stampC_R"]').val();
|
||||
if (stamp == 0) {
|
||||
$('#cr_pre').attr("src", "static/asset/nostamp.png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#cr_pre'), "static/asset/nostamp.png");
|
||||
} else {
|
||||
let group = Math.trunc((stamp - 1) / 4 + 1);
|
||||
let item = stamp % 4;
|
||||
if (item == 0) item = 4;
|
||||
$('#cr_pre').attr("src", "static/asset/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#cr_pre'), "data/graphics/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
}
|
||||
});
|
||||
$('#cr_pre').fadeIn(200);
|
||||
});
|
||||
|
||||
$('[name="stampD_R"]').change(function() {
|
||||
$('#dr_pre').fadeOut(200, () => {
|
||||
$('#dr_pre').fadeOut(200, async () => {
|
||||
let stamp = $('[name="stampD_R"]').val();
|
||||
if (stamp == 0) {
|
||||
$('#dr_pre').attr("src", "static/asset/nostamp.png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#dr_pre'), "static/asset/nostamp.png");
|
||||
} else {
|
||||
let group = Math.trunc((stamp - 1) / 4 + 1);
|
||||
let item = stamp % 4;
|
||||
if (item == 0) item = 4;
|
||||
$('#dr_pre').attr("src", "static/asset/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
await setMediaSrcFromAsset(document.querySelector('#dr_pre'), "data/graphics/chat_stamp/stamp_" + zeroPad(group, 4) + "/stamp_" + zeroPad(group, 4) + "_" + zeroPad(item, 2) + ".png");
|
||||
}
|
||||
});
|
||||
$('#dr_pre').fadeIn(200);
|
||||
|
|
@ -563,8 +680,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
|
||||
document.querySelector('html.has-aside-left.has-aside-mobile-transition.has-navbar-fixed-top.has-aside-expanded body div#app div#main-content.content div.simplebar-wrapper div.simplebar-mask div.simplebar-offset div.simplebar-content-wrapper div.simplebar-content')
|
||||
.style["overflow-y"] = "auto";
|
||||
// document.querySelector('.uiblocker').style.display = 'none';
|
||||
document.querySelector('.uiblocker').classList.toggle('fade');
|
||||
document.querySelector('.uiblocker').style.display = 'none';
|
||||
});
|
||||
|
||||
// let custom_0 = document.querySelector('#custom_0');
|
||||
|
|
|
|||
|
|
@ -274,7 +274,9 @@ $(function() {
|
|||
let data = row.data();
|
||||
return 'Details for ' + data.songname;
|
||||
}
|
||||
})
|
||||
}),
|
||||
type: 'column',
|
||||
target: 1
|
||||
}
|
||||
},
|
||||
scrollY: "400px",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -210,55 +210,45 @@ div
|
|||
.tile.is-child.with_relative
|
||||
p Nemsys Preview
|
||||
img(src='static/asset/nemsys/nemsys_0000.png' id="nemsys_pre")
|
||||
img(src='static/asset/nemsys/nemsys_0000.png' id="nemsys_pre_fade")
|
||||
.tile.is-parent
|
||||
.tile.is-child.with_relative
|
||||
p Submonitor Preview
|
||||
img(src='static/asset/submonitor_bg/subbg_0000.png' id="sub_pre")
|
||||
img(src='static/asset/submonitor_bg/subbg_0000.png' id="sub_pre_fade")
|
||||
video(id='sub_video_pre' style='display:none;')
|
||||
.tile
|
||||
.tile.is-parent.btm
|
||||
.tile.is-child.with_relative
|
||||
p A
|
||||
img(src='static/asset/nostamp.png' id="a_pre")
|
||||
img(src='static/asset/nostamp.png' id="a_pre_fade")
|
||||
.tile.is-parent.btm
|
||||
.tile.is-child.with_relative
|
||||
p B
|
||||
img(src='static/asset/nostamp.png' id="b_pre")
|
||||
img(src='static/asset/nostamp.png' id="b_pre_fade")
|
||||
.tile.is-parent.btm
|
||||
.tile.is-child.with_relative
|
||||
p C
|
||||
img(src='static/asset/nostamp.png' id="c_pre")
|
||||
img(src='static/asset/nostamp.png' id="c_pre_fade")
|
||||
.tile.is-parent.btm
|
||||
.tile.is-child.with_relative
|
||||
p D
|
||||
img(src='static/asset/nostamp.png' id="d_pre")
|
||||
img(src='static/asset/nostamp.png' id="d_pre_fade")
|
||||
.tile
|
||||
.tile.is-parent.btm
|
||||
.tile.is-child.with_relative
|
||||
p A_R
|
||||
img(src='static/asset/nostamp.png' id="ar_pre")
|
||||
img(src='static/asset/nostamp.png' id="ar_pre_fade")
|
||||
.tile.is-parent.btm
|
||||
.tile.is-child.with_relative
|
||||
p B_R
|
||||
img(src='static/asset/nostamp.png' id="br_pre")
|
||||
img(src='static/asset/nostamp.png' id="br_pre_fade")
|
||||
.tile.is-parent.btm
|
||||
.tile.is-child.with_relative
|
||||
p C_R
|
||||
img(src='static/asset/nostamp.png' id="cr_pre")
|
||||
img(src='static/asset/nostamp.png' id="cr_pre_fade")
|
||||
.tile.is-parent.btm
|
||||
.tile.is-child.with_relative
|
||||
p D_R
|
||||
img(src='static/asset/nostamp.png' id="dr_pre")
|
||||
img(src='static/asset/nostamp.png' id="dr_pre_fade")
|
||||
.tile
|
||||
.tile.is-parent.btm
|
||||
.tile
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user