x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-27 17:51:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

Update common.js

Browse Source
This commit is contained in:
Harvey Zack committed 2024-06-02 14:01:08 +08:00
1 parent eef1d675df
commit 0fce9f5ffe
1 file changed
+182 -134
Download Patch File Download Diff File Expand all files Collapse all files
docs/assets/js/common.js
+182 -134
View File
@@ -1,43 +1,41 @@
(() => { (function () {
Artplayer.DEBUG = true; Artplayer.DEBUG = true;
if (Artplayer.utils.isMobile) { if (Artplayer.utils.isMobile) {
window.location.href = './mobile.html' + location.search; window.location.href = './mobile.html' + location.search;
} }
const $codeMirror = document.querySelector('.codeMirrorWrap'); var $codeMirror = document.querySelector('.codeMirrorWrap');
const $lib = document.querySelector('.libsInput'); var $lib = document.querySelector('.libsInput');
const $run = document.querySelector('.run'); var $run = document.querySelector('.run');
const $popups = document.querySelector('.popups'); var $popups = document.querySelector('.popups');
const $console = document.querySelector('.console'); var $console = document.querySelector('.console');
const $prod = document.querySelector('#prod'); var $prod = document.querySelector('#prod');
const $ts = document.querySelector('#ts'); var $ts = document.querySelector('#ts');
const $code = document.querySelector('#code'); var $code = document.querySelector('#code');
const $log = document.querySelector('#log'); var $log = document.querySelector('#log');
const $file = document.querySelector('#file'); var $file = document.querySelector('#file');
const $editor = document.querySelector('#editor'); var $editor = document.querySelector('#editor');
window.consoleLog($console); window['consoleLog']($console);
// Initialize checkboxes from localStorage $prod.checked = localStorage.getItem('prod') === 'true';
const initCheckbox = ($element, key) => { $ts.checked = localStorage.getItem('ts') === 'true';
$element.checked = localStorage.getItem(key) === 'true'; $code.checked = localStorage.getItem('code') === 'true';
if ($element.checked) { $log.checked = localStorage.getItem('log') === 'true';
$element.style.display = 'none';
}
};
initCheckbox($prod, 'prod'); if ($code.checked) {
initCheckbox($ts, 'ts'); $editor.style.display = 'none';
initCheckbox($code, 'code'); }
initCheckbox($log, 'log');
let editor = null; if ($log.checked) {
let loadedLibs = []; $console.style.display = 'none';
}
var editor = null;
var loadedLibs = [];
require.config({ paths: { vs: './assets/js/vs' } }); require.config({ paths: { vs: './assets/js/vs' } });
require(['vs/editor/editor.main'], async function () {
require(['vs/editor/editor.main'], async () => {
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({ monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
noSemanticValidation: true, noSemanticValidation: true,
noSyntaxValidation: false, noSyntaxValidation: false,
@@ -48,7 +46,7 @@
allowNonTsExtensions: true, allowNonTsExtensions: true,
}); });
const libUris = [ var libUris = [
'./assets/ts/artplayer.d.ts', './assets/ts/artplayer.d.ts',
'./assets/ts/artplayer-plugin-ads.d.ts', './assets/ts/artplayer-plugin-ads.d.ts',
'./assets/ts/artplayer-plugin-control.d.ts', './assets/ts/artplayer-plugin-control.d.ts',
@@ -61,14 +59,15 @@
'./assets/ts/artplayer-plugin-multiple-subtitles.d.ts', './assets/ts/artplayer-plugin-multiple-subtitles.d.ts',
'./assets/ts/artplayer-plugin-vtt-thumbnail.d.ts', './assets/ts/artplayer-plugin-vtt-thumbnail.d.ts',
]; ];
for (const libUri of libUris) { for (let index = 0; index < libUris.length; index++) {
const libSource = await (await fetch(libUri)).text(); var libUri = libUris[index];
var libSource = await (await fetch(libUri)).text();
monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri); monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri)); monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri));
} }
const disposable = monaco.editor.onDidCreateEditor(() => { var disposable = monaco.editor.onDidCreateEditor(function () {
disposable.dispose(); disposable.dispose();
setTimeout(initApp, 1000); setTimeout(initApp, 1000);
}); });
@@ -76,84 +75,109 @@
editor = monaco.editor.create($codeMirror, { editor = monaco.editor.create($codeMirror, {
theme: 'vs-dark', theme: 'vs-dark',
automaticLayout: true, automaticLayout: true,
quickSuggestions: { other: true, comments: true, strings: true }, quickSuggestions: {
other: true,
comments: true,
strings: true,
},
model: monaco.editor.createModel( model: monaco.editor.createModel(
`var art = new Artplayer({ [
container: '.artplayer-app', 'var art = new Artplayer({',
url: '/assets/sample/video.mp4', "\tcontainer: '.artplayer-app',",
});`, "\turl: '/assets/sample/video.mp4',",
$ts.checked ? 'typescript' : 'javascript' '});',
].join('\n'),
$ts.checked ? 'typescript' : 'javascript',
), ),
}); });
}); });
const getURLParameters = (url) => ( function getURLParameters(url) {
(url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce((a, v) => { return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(function (a, v) {
a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1); return (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a;
return a; }, {});
}, {}) }
);
const getExt = (url) => { function getExt(url) {
const cleanUrl = url.split(/[?#]/)[0]; if (url.includes('?')) {
return cleanUrl.trim().toLowerCase().split('.').pop(); return getExt(url.split('?')[0]);
}; }
const loadScript = (url) => new Promise((resolve, reject) => { if (url.includes('#')) {
const originalDefine = window.define; return getExt(url.split('#')[0]);
window.define = undefined; }
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onload = () => {
window.define = originalDefine;
resolve(url);
};
script.onerror = () => reject(new Error(`Loading script failed: ${url}`));
document.head.appendChild(script);
});
const loadStyle = (url) => new Promise((resolve, reject) => { return url.trim().toLowerCase().split('.').pop();
const link = document.createElement('link'); }
link.rel = 'stylesheet';
link.href = url;
link.onload = () => resolve(url);
link.onerror = () => reject(new Error(`Loading style failed: ${url}`));
document.head.appendChild(link);
});
const loadLib = (libs) => { function loadScript(url) {
const libPromises = []; return new Promise(function (resolve, reject) {
const libsDecode = decodeURIComponent(libs || ''); var define2 = window.define;
window.define = undefined;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onload = function () {
window.define = define2;
resolve(url);
};
script.onerror = function () {
reject(new Error('Loading script failed:' + url));
};
document.querySelector('head').appendChild(script);
});
}
function loadStyle(url) {
return new Promise(function (resolve, reject) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
link.onload = function () {
resolve(url);
};
link.onerror = function () {
reject(new Error('Loading style failed:' + url));
};
document.querySelector('head').appendChild(link);
});
}
function loadLib(libs) {
var libPromise = [];
var libsDecode = decodeURIComponent(libs || '');
libsDecode libsDecode
.split(/\r?\n/) .split(/\r?\n/)
.filter(url => !loadedLibs.includes(url)) .filter(function (url) {
.forEach(url => { return !loadedLibs.includes(url);
const ext = getExt(url); })
.forEach(function (url) {
var ext = getExt(url);
if (ext === 'js') { if (ext === 'js') {
libPromises.push(loadScript(url)); libPromise.push(loadScript(url));
} else if (ext === 'css') { } else if (ext === 'css') {
libPromises.push(loadStyle(url)); libPromise.push(loadStyle(url));
} }
}); });
$lib.value = libsDecode; $lib.value = libsDecode;
return Promise.all(libPromises); return Promise.all(libPromise);
}; }
const runExample = async (name) => { function runExample(name) {
try { fetch('./assets/example/' + name + '.js')
const response = await fetch(`./assets/example/${name}.js`); .then(function (response) {
const text = await response.text(); return response.text();
editor.setValue(text); })
runCode(); .then(function (text) {
} catch (err) { editor.setValue(text);
console.error(err); runCode();
} })
}; .catch(function (err) {
console.error(err);
});
}
const loadCode = (code, example) => { function loadCode(code, example) {
if (example) { if (example) {
runExample(example); runExample(example);
} else if (code) { } else if (code) {
@@ -162,90 +186,114 @@
} else { } else {
runExample('index'); runExample('index');
} }
}; }
const runCode = () => { function runCode() {
Artplayer.instances.forEach(art => art.destroy(true)); [...Artplayer.instances].forEach(function (art) {
eval(editor.getValue()); art.destroy(true);
});
const value = editor.getValue();
eval(value);
window.art = Artplayer.instances[0]; window.art = Artplayer.instances[0];
}; }
function initApp() {
var _getURLParameters = getURLParameters(window.location.href),
code = _getURLParameters.code,
libs = _getURLParameters.libs;
example = _getURLParameters.example;
const initApp = () => {
const { code, libs, example } = getURLParameters(window.location.href);
loadLib(libs) loadLib(libs)
.then(result => { .then(function (result) {
loadedLibs = loadedLibs.concat(result); loadedLibs = loadedLibs.concat(result);
loadCode(code, example); loadCode(code, example);
}) })
.catch(console.error); .catch(function (err) {
}; console.error(err);
});
}
const restart = () => { function restart() {
const libs = encodeURIComponent($lib.value); var libs = encodeURIComponent($lib.value);
const code = encodeURIComponent(editor.getValue()); var code = encodeURIComponent(editor.getValue());
const url = `${window.location.origin}${window.location.pathname}?libs=${libs}&code=${code}`; var url = window.location.origin + window.location.pathname + '?libs=' + libs + '&code=' + code;
history.pushState(null, null, url); history.pushState(null, null, url);
initApp(); initApp();
}; }
const readFile = (file) => new Promise(resolve => { function readFile(file) {
const reader = new FileReader(); return new Promise((resolve) => {
reader.onload = () => resolve(reader.result); const reader = new FileReader();
reader.readAsText(file); reader.onload = () => resolve(reader.result);
reader.readAsText(file);
})
}
$run.addEventListener('click', function () {
restart();
}); });
$run.addEventListener('click', restart); $popups.addEventListener('click', function (event) {
if (event.target === this) {
$popups.addEventListener('click', (event) => { this.style.display = 'none';
if (event.target === $popups) {
$popups.style.display = 'none';
} }
}); });
$prod.addEventListener('change', () => { $prod.addEventListener('change', function () {
localStorage.setItem('prod', $prod.checked); localStorage.setItem('prod', $prod.checked ? 'true' : 'false');
window.location.reload(); window.location.reload();
}); });
$ts.addEventListener('change', () => { $ts.addEventListener('change', function () {
localStorage.setItem('ts', $ts.checked); localStorage.setItem('ts', $ts.checked ? 'true' : 'false');
window.location.reload(); window.location.reload();
}); });
$code.addEventListener('change', () => { $code.addEventListener('change', function () {
localStorage.setItem('code', $code.checked); localStorage.setItem('code', $code.checked ? 'true' : 'false');
window.location.reload(); window.location.reload();
}); });
$log.addEventListener('change', () => { $log.addEventListener('change', function () {
localStorage.setItem('log', $log.checked); localStorage.setItem('log', $log.checked ? 'true' : 'false');
window.location.reload(); window.location.reload();
}); });
$file.addEventListener('change', async () => { $file.addEventListener('change', async function () {
for (const file of $file.files) { for (let index = 0; index < $file.files.length; index++) {
const name = file.name.toLowerCase().trim(); const file = $file.files[index];
const text = await readFile(file); const name = file.name.toLowerCase().trim()
if (name.endsWith('.css')) { if (name.endsWith('.css')) {
const text = await readFile(file);
const $style = document.createElement('style'); const $style = document.createElement('style');
$style.textContent = text; $style.textContent = text;
document.body.appendChild($style); document.body.appendChild($style);
} else if (name.endsWith('.js')) { $lib.value = `\n[${name}]`;
$lib.value = $lib.value.trim();
}
if (name.endsWith('.js')) {
const text = await readFile(file);
const $script = document.createElement('script'); const $script = document.createElement('script');
$script.textContent = text; $script.textContent = text;
document.body.appendChild($script); document.body.appendChild($script);
$lib.value = `\n[${name}]`;
$lib.value = $lib.value.trim();
} }
$lib.value += `\n[${name}]`.trim();
} }
}); });
window.addEventListener('error', console.error); window.addEventListener('error', function (err) {
window.addEventListener('unhandledrejection', console.error); console.error(err);
});
document.addEventListener('keydown', (event) => { window.addEventListener('unhandledrejection', function (err) {
console.error(err);
});
document.addEventListener('keydown', function (event) {
if ((event.ctrlKey || event.metaKey) && event.key === 's') { if ((event.ctrlKey || event.metaKey) && event.key === 's') {
event.preventDefault(); event.preventDefault();
restart(); restart();
} }
}); });
})(); })();