mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-24 23:51:20 -08:00
feat: add Picture-in-Picture plugin for ArtPlayer
- Introduced `artplayer-plugin-pip` to enable Picture-in-Picture functionality. - Updated `artplayer.d.ts` to export new types related to the plugin. - Added example usage of the plugin in `pip.js`. - Created TypeScript definitions for the plugin in `artplayer-plugin-pip.d.ts`. - Implemented the plugin logic in `index.js` with necessary styles and event handling. - Updated documentation to include the new plugin and its usage. - Added README and package.json for the new plugin.
This commit is contained in:
Harvey Zack committed
1 parent
bd071b2d63
commit
c23520a4a6
12 files changed
+853
-279
No files matched your search
+283
-279
@@ -1,305 +1,309 @@
|
||||
(function () {
|
||||
Artplayer.DEBUG = true;
|
||||
Artplayer.DEBUG = true
|
||||
|
||||
if (Artplayer.utils.isMobile) {
|
||||
window.location.href = './mobile.html' + location.search;
|
||||
if (Artplayer.utils.isMobile) {
|
||||
window.location.href = `./mobile.html${location.search}`
|
||||
}
|
||||
|
||||
let $codeMirror = document.querySelector('.codeMirrorWrap')
|
||||
let $lib = document.querySelector('.libsInput')
|
||||
let $run = document.querySelector('.run')
|
||||
let $popups = document.querySelector('.popups')
|
||||
let $console = document.querySelector('.console')
|
||||
let $prod = document.querySelector('#prod')
|
||||
let $ts = document.querySelector('#ts')
|
||||
let $code = document.querySelector('#code')
|
||||
let $log = document.querySelector('#log')
|
||||
let $file = document.querySelector('#file')
|
||||
let $editor = document.querySelector('#editor')
|
||||
|
||||
window.consoleLog($console)
|
||||
|
||||
$prod.checked = localStorage.getItem('prod') === 'true'
|
||||
$ts.checked = localStorage.getItem('ts') === 'true'
|
||||
$code.checked = localStorage.getItem('code') === 'true'
|
||||
$log.checked = localStorage.getItem('log') === 'true'
|
||||
|
||||
if ($code.checked) {
|
||||
$editor.style.display = 'none'
|
||||
}
|
||||
|
||||
if ($log.checked) {
|
||||
$console.style.display = 'none'
|
||||
}
|
||||
|
||||
let editor = null
|
||||
let loadedLibs = []
|
||||
require.config({ paths: { vs: './assets/js/vs' } })
|
||||
require(['vs/editor/editor.main'], async () => {
|
||||
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
|
||||
noSemanticValidation: true,
|
||||
noSyntaxValidation: false,
|
||||
})
|
||||
|
||||
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
|
||||
target: monaco.languages.typescript.ScriptTarget.ES6,
|
||||
allowNonTsExtensions: true,
|
||||
})
|
||||
|
||||
let libUris = [
|
||||
'./assets/ts/artplayer-plugin-ads.d.ts',
|
||||
'./assets/ts/artplayer-plugin-asr.d.ts',
|
||||
'./assets/ts/artplayer-plugin-ambilight.d.ts',
|
||||
'./assets/ts/artplayer-plugin-auto-thumbnail.d.ts',
|
||||
'./assets/ts/artplayer-plugin-chapter.d.ts',
|
||||
'./assets/ts/artplayer-plugin-chromecast.d.ts',
|
||||
'./assets/ts/artplayer-plugin-danmuku-mask.d.ts',
|
||||
'./assets/ts/artplayer-plugin-danmuku.d.ts',
|
||||
'./assets/ts/artplayer-plugin-dash-control.d.ts',
|
||||
'./assets/ts/artplayer-plugin-hls-control.d.ts',
|
||||
'./assets/ts/artplayer-plugin-iframe.d.ts',
|
||||
'./assets/ts/artplayer-plugin-libass.d.ts',
|
||||
'./assets/ts/artplayer-plugin-multiple-subtitles.d.ts',
|
||||
'./assets/ts/artplayer-plugin-vast.d.ts',
|
||||
'./assets/ts/artplayer-plugin-vtt-thumbnail.d.ts',
|
||||
'./assets/ts/artplayer-plugin-pip.d.ts',
|
||||
'./assets/ts/artplayer.d.ts',
|
||||
]
|
||||
|
||||
for (let index = 0; index < libUris.length; index++) {
|
||||
let libUri = libUris[index]
|
||||
let libSource = await (await fetch(libUri)).text()
|
||||
monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri)
|
||||
monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri))
|
||||
}
|
||||
|
||||
var $codeMirror = document.querySelector('.codeMirrorWrap');
|
||||
var $lib = document.querySelector('.libsInput');
|
||||
var $run = document.querySelector('.run');
|
||||
var $popups = document.querySelector('.popups');
|
||||
var $console = document.querySelector('.console');
|
||||
var $prod = document.querySelector('#prod');
|
||||
var $ts = document.querySelector('#ts');
|
||||
var $code = document.querySelector('#code');
|
||||
var $log = document.querySelector('#log');
|
||||
var $file = document.querySelector('#file');
|
||||
var $editor = document.querySelector('#editor');
|
||||
var disposable = monaco.editor.onDidCreateEditor(() => {
|
||||
disposable.dispose()
|
||||
setTimeout(initApp, 1000)
|
||||
})
|
||||
|
||||
window['consoleLog']($console);
|
||||
editor = monaco.editor.create($codeMirror, {
|
||||
theme: 'vs-dark',
|
||||
folding: true,
|
||||
automaticLayout: true,
|
||||
quickSuggestions: {
|
||||
other: true,
|
||||
comments: true,
|
||||
strings: true,
|
||||
},
|
||||
model: monaco.editor.createModel(
|
||||
[
|
||||
'var art = new Artplayer({',
|
||||
'\tcontainer: \'.artplayer-app\',',
|
||||
'\turl: \'/assets/sample/video.mp4\',',
|
||||
'});',
|
||||
].join('\n'),
|
||||
$ts.checked ? 'typescript' : 'javascript',
|
||||
),
|
||||
})
|
||||
})
|
||||
|
||||
$prod.checked = localStorage.getItem('prod') === 'true';
|
||||
$ts.checked = localStorage.getItem('ts') === 'true';
|
||||
$code.checked = localStorage.getItem('code') === 'true';
|
||||
$log.checked = localStorage.getItem('log') === 'true';
|
||||
function getURLParameters(url) {
|
||||
return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce((a, v) => {
|
||||
return (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
|
||||
}, {})
|
||||
}
|
||||
|
||||
if ($code.checked) {
|
||||
$editor.style.display = 'none';
|
||||
function getExt(url) {
|
||||
if (url.includes('?')) {
|
||||
return getExt(url.split('?')[0])
|
||||
}
|
||||
|
||||
if ($log.checked) {
|
||||
$console.style.display = 'none';
|
||||
if (url.includes('#')) {
|
||||
return getExt(url.split('#')[0])
|
||||
}
|
||||
|
||||
var editor = null;
|
||||
var loadedLibs = [];
|
||||
require.config({ paths: { vs: './assets/js/vs' } });
|
||||
require(['vs/editor/editor.main'], async function () {
|
||||
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
|
||||
noSemanticValidation: true,
|
||||
noSyntaxValidation: false,
|
||||
});
|
||||
return url.trim().toLowerCase().split('.').pop()
|
||||
}
|
||||
|
||||
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
|
||||
target: monaco.languages.typescript.ScriptTarget.ES6,
|
||||
allowNonTsExtensions: true,
|
||||
});
|
||||
function loadScript(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let define2 = window.define
|
||||
window.define = undefined
|
||||
let 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)
|
||||
})
|
||||
}
|
||||
|
||||
var libUris = [
|
||||
'./assets/ts/artplayer-plugin-ads.d.ts',
|
||||
'./assets/ts/artplayer-plugin-asr.d.ts',
|
||||
'./assets/ts/artplayer-plugin-ambilight.d.ts',
|
||||
'./assets/ts/artplayer-plugin-auto-thumbnail.d.ts',
|
||||
'./assets/ts/artplayer-plugin-chapter.d.ts',
|
||||
'./assets/ts/artplayer-plugin-chromecast.d.ts',
|
||||
'./assets/ts/artplayer-plugin-danmuku-mask.d.ts',
|
||||
'./assets/ts/artplayer-plugin-danmuku.d.ts',
|
||||
'./assets/ts/artplayer-plugin-dash-control.d.ts',
|
||||
'./assets/ts/artplayer-plugin-hls-control.d.ts',
|
||||
'./assets/ts/artplayer-plugin-iframe.d.ts',
|
||||
'./assets/ts/artplayer-plugin-libass.d.ts',
|
||||
'./assets/ts/artplayer-plugin-multiple-subtitles.d.ts',
|
||||
'./assets/ts/artplayer-plugin-vast.d.ts',
|
||||
'./assets/ts/artplayer-plugin-vtt-thumbnail.d.ts',
|
||||
'./assets/ts/artplayer.d.ts',
|
||||
];
|
||||
|
||||
for (let index = 0; index < libUris.length; index++) {
|
||||
var libUri = libUris[index];
|
||||
var libSource = await (await fetch(libUri)).text();
|
||||
monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
|
||||
monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri));
|
||||
function loadStyle(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let 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) {
|
||||
let libPromise = []
|
||||
let libsDecode = decodeURIComponent(libs || '')
|
||||
libsDecode
|
||||
.split(/\r?\n/)
|
||||
.filter((url) => {
|
||||
return !loadedLibs.includes(url)
|
||||
})
|
||||
.forEach((url) => {
|
||||
let ext = getExt(url)
|
||||
if (ext === 'js') {
|
||||
libPromise.push(loadScript(url))
|
||||
}
|
||||
|
||||
var disposable = monaco.editor.onDidCreateEditor(function () {
|
||||
disposable.dispose();
|
||||
setTimeout(initApp, 1000);
|
||||
});
|
||||
|
||||
editor = monaco.editor.create($codeMirror, {
|
||||
theme: 'vs-dark',
|
||||
folding: true,
|
||||
automaticLayout: true,
|
||||
quickSuggestions: {
|
||||
other: true,
|
||||
comments: true,
|
||||
strings: true,
|
||||
},
|
||||
model: monaco.editor.createModel(
|
||||
[
|
||||
'var art = new Artplayer({',
|
||||
"\tcontainer: '.artplayer-app',",
|
||||
"\turl: '/assets/sample/video.mp4',",
|
||||
'});',
|
||||
].join('\n'),
|
||||
$ts.checked ? 'typescript' : 'javascript',
|
||||
),
|
||||
});
|
||||
});
|
||||
|
||||
function getURLParameters(url) {
|
||||
return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(function (a, v) {
|
||||
return (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a;
|
||||
}, {});
|
||||
}
|
||||
|
||||
function getExt(url) {
|
||||
if (url.includes('?')) {
|
||||
return getExt(url.split('?')[0]);
|
||||
else if (ext === 'css') {
|
||||
libPromise.push(loadStyle(url))
|
||||
}
|
||||
})
|
||||
$lib.value = libsDecode
|
||||
return Promise.all(libPromise)
|
||||
}
|
||||
|
||||
if (url.includes('#')) {
|
||||
return getExt(url.split('#')[0]);
|
||||
}
|
||||
function runExample(name) {
|
||||
fetch(`./assets/example/${name}.js`)
|
||||
.then((response) => {
|
||||
return response.text()
|
||||
})
|
||||
.then((text) => {
|
||||
editor.setValue(text)
|
||||
runCode()
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
return url.trim().toLowerCase().split('.').pop();
|
||||
function loadCode(code, example) {
|
||||
if (example) {
|
||||
runExample(example)
|
||||
}
|
||||
|
||||
function loadScript(url) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
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);
|
||||
});
|
||||
else if (code) {
|
||||
editor.setValue(decodeURIComponent(code).trim())
|
||||
runCode()
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
else {
|
||||
runExample('index')
|
||||
}
|
||||
}
|
||||
|
||||
function loadLib(libs) {
|
||||
var libPromise = [];
|
||||
var libsDecode = decodeURIComponent(libs || '');
|
||||
libsDecode
|
||||
.split(/\r?\n/)
|
||||
.filter(function (url) {
|
||||
return !loadedLibs.includes(url);
|
||||
})
|
||||
.forEach(function (url) {
|
||||
var ext = getExt(url);
|
||||
if (ext === 'js') {
|
||||
libPromise.push(loadScript(url));
|
||||
} else if (ext === 'css') {
|
||||
libPromise.push(loadStyle(url));
|
||||
}
|
||||
});
|
||||
$lib.value = libsDecode;
|
||||
return Promise.all(libPromise);
|
||||
function runCode() {
|
||||
[...Artplayer.instances].forEach((art) => {
|
||||
art.destroy(true)
|
||||
})
|
||||
const value = editor.getValue()
|
||||
eval(value)
|
||||
window.art = Artplayer.instances[0]
|
||||
}
|
||||
|
||||
function initApp() {
|
||||
let _getURLParameters = getURLParameters(window.location.href)
|
||||
let code = _getURLParameters.code
|
||||
let libs = _getURLParameters.libs
|
||||
example = _getURLParameters.example
|
||||
|
||||
loadLib(libs)
|
||||
.then((result) => {
|
||||
loadedLibs = loadedLibs.concat(result)
|
||||
loadCode(code, example)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
function restart() {
|
||||
let libs = encodeURIComponent($lib.value)
|
||||
let code = encodeURIComponent(editor.getValue())
|
||||
let url = `${window.location.origin + window.location.pathname}?libs=${libs}&code=${code}`
|
||||
history.pushState(null, null, url)
|
||||
initApp()
|
||||
}
|
||||
|
||||
function readFile(file) {
|
||||
return new Promise((resolve) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => resolve(reader.result)
|
||||
reader.readAsText(file)
|
||||
})
|
||||
}
|
||||
|
||||
$run.addEventListener('click', () => {
|
||||
restart()
|
||||
})
|
||||
|
||||
$popups.addEventListener('click', function (event) {
|
||||
if (event.target === this) {
|
||||
this.style.display = 'none'
|
||||
}
|
||||
})
|
||||
|
||||
function runExample(name) {
|
||||
fetch('./assets/example/' + name + '.js')
|
||||
.then(function (response) {
|
||||
return response.text();
|
||||
})
|
||||
.then(function (text) {
|
||||
editor.setValue(text);
|
||||
runCode();
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.error(err);
|
||||
});
|
||||
$prod.addEventListener('change', () => {
|
||||
localStorage.setItem('prod', $prod.checked ? 'true' : 'false')
|
||||
window.location.reload()
|
||||
})
|
||||
|
||||
$ts.addEventListener('change', () => {
|
||||
localStorage.setItem('ts', $ts.checked ? 'true' : 'false')
|
||||
window.location.reload()
|
||||
})
|
||||
|
||||
$code.addEventListener('change', () => {
|
||||
localStorage.setItem('code', $code.checked ? 'true' : 'false')
|
||||
window.location.reload()
|
||||
})
|
||||
|
||||
$log.addEventListener('change', () => {
|
||||
localStorage.setItem('log', $log.checked ? 'true' : 'false')
|
||||
window.location.reload()
|
||||
})
|
||||
|
||||
$file.addEventListener('change', async () => {
|
||||
for (let index = 0; index < $file.files.length; index++) {
|
||||
const file = $file.files[index]
|
||||
const name = file.name.toLowerCase().trim()
|
||||
if (name.endsWith('.css')) {
|
||||
const text = await readFile(file)
|
||||
const $style = document.createElement('style')
|
||||
$style.textContent = text
|
||||
document.body.appendChild($style)
|
||||
$lib.value = `\n[${name}]`
|
||||
$lib.value = $lib.value.trim()
|
||||
}
|
||||
if (name.endsWith('.js')) {
|
||||
const text = await readFile(file)
|
||||
const $script = document.createElement('script')
|
||||
$script.textContent = text
|
||||
document.body.appendChild($script)
|
||||
$lib.value = `\n[${name}]`
|
||||
$lib.value = $lib.value.trim()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function loadCode(code, example) {
|
||||
if (example) {
|
||||
runExample(example);
|
||||
} else if (code) {
|
||||
editor.setValue(decodeURIComponent(code).trim());
|
||||
runCode();
|
||||
} else {
|
||||
runExample('index');
|
||||
}
|
||||
window.addEventListener('error', (err) => {
|
||||
console.error(err)
|
||||
})
|
||||
|
||||
window.addEventListener('unhandledrejection', (err) => {
|
||||
console.error(err)
|
||||
})
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if ((event.ctrlKey || event.metaKey) && event.key === 's') {
|
||||
event.preventDefault()
|
||||
restart()
|
||||
}
|
||||
|
||||
function runCode() {
|
||||
[...Artplayer.instances].forEach(function (art) {
|
||||
art.destroy(true);
|
||||
});
|
||||
const value = editor.getValue();
|
||||
eval(value);
|
||||
window.art = Artplayer.instances[0];
|
||||
}
|
||||
|
||||
function initApp() {
|
||||
var _getURLParameters = getURLParameters(window.location.href),
|
||||
code = _getURLParameters.code,
|
||||
libs = _getURLParameters.libs;
|
||||
example = _getURLParameters.example;
|
||||
|
||||
loadLib(libs)
|
||||
.then(function (result) {
|
||||
loadedLibs = loadedLibs.concat(result);
|
||||
loadCode(code, example);
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
function restart() {
|
||||
var libs = encodeURIComponent($lib.value);
|
||||
var code = encodeURIComponent(editor.getValue());
|
||||
var url = window.location.origin + window.location.pathname + '?libs=' + libs + '&code=' + code;
|
||||
history.pushState(null, null, url);
|
||||
initApp();
|
||||
}
|
||||
|
||||
function readFile(file) {
|
||||
return new Promise((resolve) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.readAsText(file);
|
||||
})
|
||||
}
|
||||
|
||||
$run.addEventListener('click', function () {
|
||||
restart();
|
||||
});
|
||||
|
||||
$popups.addEventListener('click', function (event) {
|
||||
if (event.target === this) {
|
||||
this.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
$prod.addEventListener('change', function () {
|
||||
localStorage.setItem('prod', $prod.checked ? 'true' : 'false');
|
||||
window.location.reload();
|
||||
});
|
||||
|
||||
$ts.addEventListener('change', function () {
|
||||
localStorage.setItem('ts', $ts.checked ? 'true' : 'false');
|
||||
window.location.reload();
|
||||
});
|
||||
|
||||
$code.addEventListener('change', function () {
|
||||
localStorage.setItem('code', $code.checked ? 'true' : 'false');
|
||||
window.location.reload();
|
||||
});
|
||||
|
||||
$log.addEventListener('change', function () {
|
||||
localStorage.setItem('log', $log.checked ? 'true' : 'false');
|
||||
window.location.reload();
|
||||
});
|
||||
|
||||
$file.addEventListener('change', async function () {
|
||||
for (let index = 0; index < $file.files.length; index++) {
|
||||
const file = $file.files[index];
|
||||
const name = file.name.toLowerCase().trim()
|
||||
if (name.endsWith('.css')) {
|
||||
const text = await readFile(file);
|
||||
const $style = document.createElement('style');
|
||||
$style.textContent = text;
|
||||
document.body.appendChild($style);
|
||||
$lib.value = `\n[${name}]`;
|
||||
$lib.value = $lib.value.trim();
|
||||
}
|
||||
if (name.endsWith('.js')) {
|
||||
const text = await readFile(file);
|
||||
const $script = document.createElement('script');
|
||||
$script.textContent = text;
|
||||
document.body.appendChild($script);
|
||||
$lib.value = `\n[${name}]`;
|
||||
$lib.value = $lib.value.trim();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('error', function (err) {
|
||||
console.error(err);
|
||||
});
|
||||
|
||||
window.addEventListener('unhandledrejection', function (err) {
|
||||
console.error(err);
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if ((event.ctrlKey || event.metaKey) && event.key === 's') {
|
||||
event.preventDefault();
|
||||
restart();
|
||||
}
|
||||
});
|
||||
})();
|
||||
})
|
||||
})()
|
||||
Reference in new issue
Block a user