diff --git a/docs/test/index.html b/docs/test/index.html index 4efbbad51..c7745691c 100644 --- a/docs/test/index.html +++ b/docs/test/index.html @@ -35,12 +35,12 @@ - - - + + + diff --git a/docs/test/test.js b/docs/test/test.js index 76db9bdbe..99e3c8273 100644 --- a/docs/test/test.js +++ b/docs/test/test.js @@ -1,11 +1,4608 @@ -describe('Artplayer', function () { +// Auto-generated smoke tests from documentation code blocks +// Generated at: 2026-03-07T07:48:59.683Z +// Do not edit manually - run 'node scripts/build-test.js' to regenerate + +describe('Documentation Code Examples', function () { + this.timeout(5000); + + beforeEach(function () { + // Destroy any existing instances + [...Artplayer.instances].forEach((art) => art.destroy()); + // Reset container + const container = document.querySelector('.artplayer-app'); + if (container) { + container.innerHTML = ''; + } + }); + afterEach(function () { [...Artplayer.instances].forEach((art) => art.destroy()); }); - it('Constructor', function () { - expect(Artplayer).to.be.an('function'); - expect(Artplayer.instances).to.be.an('array'); - expect(Artplayer.instances.length).to.be.equal(0); + describe('advanced > built-in', function () { + it('Example 1', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + console.info(art.option); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 2', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + console.info(art.template); + console.info(art.template.$video); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 3', function (done) { + try { + var container = document.querySelector('.artplayer-app'); + + var art = new Artplayer({ + container: container, + url: '/assets/sample/video.mp4', + }); + + art.events.proxy(container, 'click', event => { + console.info('click', event); + }); + + art.events.hover(container, (event) => { + console.info('mouseenter', event); + }, (event) => { + console.info('mouseleave', event); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 4', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.storage.set('test', { foo: 'bar' }); + const test = art.storage.get('test'); + console.info(test); + art.storage.del('test'); + art.storage.clear(); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 5', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.storage.name = 'your-storage-key'; + art.storage.set('test', { foo: 'bar' }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 6', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + console.info(art.icons.loading); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 7', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + console.info(art.i18n.get('Play')); + + art.i18n.update({ + 'zh-cn': { + Play: 'Your Play' + } + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 8', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.notice.show = 'Video Ready To Play'; + }) + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 9', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.layers.add({ + html: 'Some Text', + }); + + setTimeout(() => { + art.layers.show = false; + }, 1000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 10', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.controls.add({ + html: 'Some Text', + position: 'left', + }); + + setTimeout(() => { + art.controls.show = false; + }, 1000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 11', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.contextmenu.add({ + html: 'Some Text', + }); + + art.contextmenu.show = true; + setTimeout(() => { + art.contextmenu.show = false; + }, 1000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 12', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.subtitle.url = '/assets/sample/subtitle.srt' + art.subtitle.style({ + color: 'red', + }); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 13', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.info.show = true; + + setTimeout(() => { + art.info.show = false; + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 14', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.loading.show = true; + setTimeout(() => { + art.loading.show = false; + }, 1000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 15', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + function hotkeyEvent(event) { + console.info('click', event); + } + + art.on('ready', () => { + art.hotkey.add(32, hotkeyEvent); + setTimeout(() => { + art.hotkey.remove(32, hotkeyEvent); + }, 5000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 16', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.mask.show = false; + setTimeout(() => { + art.mask.show = true; + }, 1000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 17', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + flip: true, + playbackRate: true, + aspectRatio: true, + subtitleOffset: true, + }); + + art.on('ready', () => { + art.setting.show = true; + setTimeout(() => { + art.setting.show = false; + }, 1000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 18', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + function myPlugin(art) { + console.info(art); + return { + name: 'myPlugin', + something: 'something', + doSomething: function () { + console.info('doSomething'); + }, + }; + } + + art.on('ready', () => { + art.plugins.add(myPlugin); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + }); + + describe('advanced > class', function () { + it('Example 1', function (done) { + try { + console.info([...Artplayer.instances]); + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + console.info([...Artplayer.instances]); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 2', function (done) { + try { + console.info(Artplayer.version); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 3', function (done) { + try { + console.info(Artplayer.env); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 4', function (done) { + try { + console.info(Artplayer.build); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 5', function (done) { + try { + console.info(Artplayer.config); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 6', function (done) { + try { + console.info(Artplayer.utils); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 7', function (done) { + try { + console.info(Artplayer.scheme); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 8', function (done) { + try { + console.info(Artplayer.Emitter); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 9', function (done) { + try { + console.info(Artplayer.validator); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 10', function (done) { + try { + console.info(Artplayer.kindOf); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 11', function (done) { + try { + console.info(Artplayer.html); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 12', function (done) { + try { + console.info(Artplayer.option); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + }); + + describe('advanced > event', function () { + it('Example 1', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('video:canplay', () => { + console.info('video:canplay'); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 2', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.once('video:canplay', () => { + console.info('video:canplay'); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 3', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.emit('focus'); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 4', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + const onReady = () => { + console.info('ready'); + art.off('ready', onReady); + } + + art.on('ready', onReady); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 5', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + console.info('ready'); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 6', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.url = '/assets/sample/video.mp4' + }); + + art.on('restart', (url) => { + console.info('restart', url); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 7', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('pause', () => { + console.info('pause'); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 8', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('play', () => { + console.info('play'); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 9', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('hotkey', (event) => { + console.info('hotkey', event); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 10', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.destroy(); + }); + + art.on('destroy', () => { + console.info('destroy'); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 11', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('focus', (event) => { + console.info('focus', event); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 12', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('blur', (event) => { + console.info('blur', event); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 13', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('dblclick', (event) => { + console.info('dblclick', event); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 14', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('click', (event) => { + console.info('click', event); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 15', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/404.mp4', + }); + + art.on('error', (error, reconnectTime) => { + console.info(error, reconnectTime); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 16', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('hover', (state, event) => { + console.info('hover', state, event); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 17', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('mousemove', (event) => { + console.info('mousemove', event); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 18', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('resize', () => { + console.info('resize'); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 19', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('view', (state) => { + console.info('view', state); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 20', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + lock: true, + }); + + art.on('lock', (state) => { + console.info('lock', state); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 21', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + aspectRatio: true, + setting: true, + }); + + art.on('aspectRatio', (aspectRatio) => { + console.info('aspectRatio', aspectRatio); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 22', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.autoHeight(); + }); + + art.on('autoHeight', (height) => { + console.info('autoHeight', height); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 23', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + autoSize: true, + }); + + art.on('autoSize', () => { + console.info('autoSize'); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 24', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + flip: true, + setting: true, + }); + + art.on('flip', (flip) => { + console.info('flip', flip); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 25', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fullscreen: true, + }); + + art.on('fullscreen', (state) => { + console.info('fullscreen', state); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 26', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.fullscreen = true; + }); + + art.on('fullscreenError', (event) => { + console.info('fullscreenError', event); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 27', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fullscreenWeb: true, + }); + + art.on('fullscreenWeb', (state) => { + console.info('fullscreenWeb', state); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 28', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.mini = true; + }); + + art.on('mini', (state) => { + console.info('mini', state); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 29', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + pip: true, + }); + + art.on('pip', (state) => { + console.info('pip', state); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 30', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + screenshot: true, + }); + + art.on('screenshot', (dataUri) => { + console.info('screenshot', dataUri); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 31', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('seek', (currentTime) => { + console.info('seek', currentTime); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 32', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + subtitleOffset: true, + subtitle: { + url: '/assets/sample/subtitle.srt', + }, + setting: true, + }); + + art.on('subtitleOffset', (offset) => { + console.info('subtitleOffset', offset); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 33', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + subtitle: { + url: '/assets/sample/subtitle.srt', + }, + }); + + art.on('subtitleBeforeUpdate', (cues) => { + console.info('subtitleBeforeUpdate', cues); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 34', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + subtitle: { + url: '/assets/sample/subtitle.srt', + }, + }); + + art.on('subtitleAfterUpdate', (cues) => { + console.info('subtitleAfterUpdate', cues); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 35', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + subtitle: { + url: '/assets/sample/subtitle.srt', + }, + }); + + art.on('subtitleLoad', (option, cues) => { + console.info('subtitleLoad', cues, option); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 36', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('info', (state) => { + console.log(state); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 37', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('layer', (state) => { + console.log(state); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 38', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('loading', (state) => { + console.log(state); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 39', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('mask', (state) => { + console.log(state); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 40', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('subtitle', (state) => { + console.log(state); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 41', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('contextmenu', (state) => { + console.log(state); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 42', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('control', (state) => { + console.log(state); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 43', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + }); + + art.on('setting', (state) => { + console.log(state); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 44', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('muted', (state) => { + console.log(state); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 45', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('keydown', (event) => { + console.log(event.code); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + }); + + describe('advanced > global', function () { + it('Example 1', function (done) { + try { + Artplayer.DEBUG = true; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 2', function (done) { + try { + console.log(Artplayer.STYLE); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 3', function (done) { + try { + Artplayer.CONTEXTMENU = false; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 4', function (done) { + try { + Artplayer.NOTICE_TIME = 5000; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 5', function (done) { + try { + Artplayer.SETTING_WIDTH = 300; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + loop: true, + flip: true, + playbackRate: true, + aspectRatio: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 6', function (done) { + try { + Artplayer.SETTING_ITEM_WIDTH = 300; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + loop: true, + flip: true, + playbackRate: true, + aspectRatio: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 7', function (done) { + try { + Artplayer.SETTING_ITEM_HEIGHT = 40; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + loop: true, + flip: true, + playbackRate: true, + aspectRatio: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 8', function (done) { + try { + Artplayer.RESIZE_TIME = 500; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('resize', () => { + console.log('resize'); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 9', function (done) { + try { + Artplayer.SCROLL_TIME = 500; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('scroll', () => { + console.log('scroll'); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 10', function (done) { + try { + Artplayer.SCROLL_GAP = 100; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('scroll', () => { + console.log('scroll'); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 11', function (done) { + try { + Artplayer.AUTO_PLAYBACK_MAX = 20; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + autoPlayback: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 12', function (done) { + try { + Artplayer.AUTO_PLAYBACK_MIN = 10; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + autoPlayback: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 13', function (done) { + try { + Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + autoPlayback: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 14', function (done) { + try { + Artplayer.RECONNECT_TIME_MAX = 10; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/404.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 15', function (done) { + try { + Artplayer.RECONNECT_SLEEP_TIME = 3000; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/404.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 16', function (done) { + try { + Artplayer.CONTROL_HIDE_TIME = 5000; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 17', function (done) { + try { + Artplayer.DBCLICK_TIME = 500; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('dblclick', () => { + console.log('dblclick'); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 18', function (done) { + try { + Artplayer.DBCLICK_FULLSCREEN = false; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 19', function (done) { + try { + Artplayer.MOBILE_DBCLICK_PLAY = false; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 20', function (done) { + try { + Artplayer.MOBILE_CLICK_PLAY = true; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 21', function (done) { + try { + Artplayer.AUTO_ORIENTATION_TIME = 500; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + autoOrientation: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 22', function (done) { + try { + Artplayer.INFO_LOOP_TIME = 2000; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.info.show = true; + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 23', function (done) { + try { + Artplayer.FAST_FORWARD_VALUE = 5; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fastForward: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 24', function (done) { + try { + Artplayer.FAST_FORWARD_TIME = 2000; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fastForward: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 25', function (done) { + try { + Artplayer.TOUCH_MOVE_RATIO = 1; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 26', function (done) { + try { + Artplayer.VOLUME_STEP = 0.2; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 27', function (done) { + try { + Artplayer.SEEK_STEP = 10; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 28', function (done) { + try { + Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5]; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + playbackRate: true, + }); + + art.contextmenu.show = true; + art.setting.show = true; + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 29', function (done) { + try { + Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5']; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + aspectRatio: true, + }); + + art.contextmenu.show = true; + art.setting.show = true; + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 30', function (done) { + try { + Artplayer.FLIP = ['normal', 'horizontal']; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + flip: true, + }); + + art.contextmenu.show = true; + art.setting.show = true; + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 31', function (done) { + try { + Artplayer.FULLSCREEN_WEB_IN_BODY = false; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fullscreenWeb: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 32', function (done) { + try { + Artplayer.LOG_VERSION = false; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 33', function (done) { + try { + Artplayer.USE_RAF = true; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + miniProgressBar: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 34', function (done) { + try { + Artplayer.REMOVE_SRC_WHEN_DESTROY = false; + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + // Only destroys the UI, does not actively clear src + art.destroy(); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + }); + + describe('advanced > plugin', function () { + it('Example 1', function (done) { + try { + function myPlugin(art) { + console.info(art); + return { + name: 'myPlugin', + something: 'something', + doSomething: function () { + console.info('doSomething'); + }, + }; + } + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + plugins: [myPlugin], + }); + + art.on('ready', () => { + console.info(art.plugins.myPlugin); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 2', function (done) { + try { + function myPlugin(art) { + console.info(art); + return { + name: 'myPlugin', + something: 'something', + doSomething: function () { + console.info('doSomething'); + }, + }; + } + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.plugins.add(myPlugin); + + art.on('ready', () => { + console.info(art.plugins.myPlugin); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 3', function (done) { + try { + function adsPlugin(option) { + return (art) => { + art.layers.add({ + name: 'ads', + html: ``, + style: { + display: 'none', + position: 'absolute', + top: '20px', + right: '20px', + }, + }); + + function show() { + art.layers.ads.style.display = 'block'; + } + + function hide() { + art.layers.ads.style.display = 'none'; + } + + art.controls.add({ + name: 'hide-ads', + position: 'right', + html: 'Hide Ads', + tooltip: 'Hide Ads', + click: hide, + style: { + marginRight: '20px' + } + }); + + art.controls.add({ + name: 'show-ads', + position: 'right', + html: 'Show Ads', + tooltip: 'Show Ads', + click: show, + }); + + art.on('play', hide); + art.on('pause', show); + + return { + name: 'adsPlugin', + show, + hide + }; + } + } + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + plugins: [ + adsPlugin({ + url: '/assets/sample/layer.png' + }) + ], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + }); + + describe('advanced > property', function () { + it('Example 1', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + muted: true, + }); + + art.on('ready', () => { + art.play(); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 2', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + muted: true, + }); + + art.on('ready', () => { + art.play(); + + setTimeout(() => { + art.pause(); + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 3', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + muted: true, + }); + + art.on('ready', () => { + art.toggle(); + + setTimeout(() => { + art.toggle(); + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 4', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.destroy(); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 5', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + // Only reset the video, do not remove the interface + art.reset(); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 6', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.seek = 5; + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 7', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.forward = 5; + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 8', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.seek = 5; + + setTimeout(() => { + art.backward = 2; + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 9', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + console.info(art.volume); + art.volume = 0.5; + console.info(art.volume); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 10', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.url = '/assets/sample/video.mp4?t=0'; + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 11', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.seek = 10; + setTimeout(() => { + art.switch = '/assets/sample/video.mp4?t=0'; + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 12', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.seek = 10; + setTimeout(() => { + art.switchUrl('/assets/sample/video.mp4?t=0'); + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 13', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.seek = 10; + setTimeout(() => { + art.switchQuality('/assets/sample/video.mp4?t=0'); + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 14', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + console.info(art.muted); + art.muted = true; + console.info(art.muted); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 15', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + console.info(art.currentTime); + art.currentTime = 5; + console.info(art.currentTime); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 16', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + console.info(art.duration); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 17', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.screenshot('your-name'); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 18', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', async () => { + const url = await art.getDataURL(); + console.info(url) + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 19', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', async () => { + const url = await art.getBlobUrl(); + console.info(url); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 20', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + controls: [ + { + position: 'right', + html: 'Fullscreen Switch', + click: function () { + art.fullscreen = !art.fullscreen; + }, + }, + ], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 21', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fullscreenWeb: true, + }); + + art.on('ready', () => { + art.fullscreenWeb = true; + + setTimeout(() => { + art.fullscreenWeb = false; + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 22', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + controls: [ + { + position: 'right', + html: 'PIP', + click: function () { + art.pip = !art.pip; + }, + }, + ], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 23', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + poster: '/assets/sample/poster.jpg', + }); + + art.on('ready', () => { + console.info(art.poster); + art.poster = '/assets/sample/poster.jpg?t=0'; + console.info(art.poster); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 24', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.mini = true; + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 25', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + muted: true, + }); + + art.on('ready', () => { + console.info(art.playing); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 26', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + console.info(art.state); // Default: standard + art.state = 'mini'; + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 27', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.autoSize(); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 28', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + console.info(JSON.stringify(art.rect)); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 29', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + console.info(art.width, art.height, art.left, art.top); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 30', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + console.info(art.flip); + art.flip = 'horizontal'; + console.info(art.flip); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 31', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + console.info(art.playbackRate); + art.playbackRate = 2; + console.info(art.playbackRate); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 32', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + console.info(art.aspectRatio); + art.aspectRatio = '16:9'; + console.info(art.aspectRatio); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 33', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.autoHeight(); + }); + + art.on('resize', () => { + art.autoHeight(); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 34', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + console.info(art.attr('playsInline')); + art.attr('playsInline', true); + console.info(art.attr('playsInline')); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 35', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + console.info(art.type); + art.type = 'm3u8'; + console.info(art.type); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 36', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + console.info(art.theme); + art.theme = '#000'; + console.info(art.theme); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 37', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + controls: [ + { + position: 'right', + html: 'AirPlay', + click: function () { + art.airplay(); + }, + }, + ], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 38', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('video:timeupdate', () => { + console.info(art.loaded); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 39', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('video:timeupdate', () => { + console.info(art.loadedTime); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 40', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('video:timeupdate', () => { + console.info(art.played); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 41', function (done) { + try { + var container = document.querySelector('.artplayer-app'); + + var art = new Artplayer({ + container: container, + url: '/assets/sample/video.mp4', + }); + + art.proxy(container, 'click', event => { + console.info(event); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 42', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + console.info(art.query('.art-video')); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 43', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + console.info(art.video); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 44', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + console.log(art.cssVar('--art-theme')); + art.cssVar('--art-theme', 'green'); + console.log(art.cssVar('--art-theme')); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 45', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + quality: [ + { + default: true, + html: 'SD 480P', + url: '/assets/sample/video.mp4', + }, + { + html: 'HD 720P', + url: '/assets/sample/video.mp4', + }, + ], + }); + + art.on('ready', () => { + setTimeout(() => { + art.quality = [ + { + default: true, + html: '1080P', + url: '/assets/sample/video.mp4', + }, + { + html: '4K', + url: '/assets/sample/video.mp4', + }, + ]; + }, 3000); + }) + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 46', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.on('ready', () => { + art.thumbnails = { + url: '/assets/sample/thumbnails.png', + number: 60, + column: 10, + }; + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 47', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + subtitle: { + url: '/assets/sample/subtitle.srt', + }, + }); + + art.on('ready', () => { + art.subtitleOffset = 1; + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + }); + + describe('component > contextmenu', function () { + it('Example 1', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + contextmenu: [ + { + name: 'your-menu', + html: 'Your Menu', + click: function (...args) { + console.info(args); + art.contextmenu.show = false; + }, + }, + ], + }); + + art.contextmenu.show = true; + + // Get the Element of contextmenu by name + console.info(art.contextmenu['your-menu']); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 2', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.contextmenu.add({ + name: 'your-menu', + html: 'Your Menu', + click: function (...args) { + console.info(args); + art.contextmenu.show = false; + }, + }); + + art.contextmenu.show = true; + + // Get the Element of contextmenu by name + console.info(art.contextmenu['your-menu']); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 3', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + contextmenu: [ + { + name: 'your-menu', + html: 'Your Menu', + click: function (...args) { + console.info(args); + art.contextmenu.show = false; + }, + }, + ], + }); + + art.contextmenu.show = true; + + art.on('ready', () => { + setTimeout(() => { + // Delete the contextmenu by name + art.contextmenu.remove('your-menu') + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 4', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + contextmenu: [ + { + name: 'your-menu', + html: 'Your Menu', + click: function (...args) { + console.info(args); + art.contextmenu.show = false; + }, + }, + ], + }); + + art.contextmenu.show = true; + + art.on('ready', () => { + setTimeout(() => { + // Update the contextmenu by name + art.contextmenu.update({ + name: 'your-menu', + html: 'Your New Menu', + }) + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + }); + + describe('component > controls', function () { + it('Example 1', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + controls: [ + { + name: 'your-button', + index: 10, + position: 'left', + html: 'Your Button', + tooltip: 'Your Button', + style: { + color: 'red', + }, + click: function (...args) { + console.info('click', args); + }, + mounted: function (...args) { + console.info('mounted', args); + }, + }, + { + name: 'subtitle', + position: 'right', + html: 'Subtitle', + selector: [ + { + default: true, + html: 'subtitle 01', + }, + { + html: 'subtitle 02', + }, + ], + onSelect: function (item, $dom) { + console.info(item, $dom); + return 'Your ' + item.html; + }, + }, + ], + }); + + // Get the Element of control by name + console.info(art.controls['your-button']); + console.info(art.controls['subtitle']); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 2', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.controls.add({ + name: 'button1', + index: 10, + position: 'left', + html: 'Your Button', + tooltip: 'Your Button', + style: { + color: 'red', + }, + click: function (...args) { + console.info('click', args); + }, + mounted: function (...args) { + console.info('mounted', args); + }, + }); + + // Get the Element of control by name + console.info(art.controls['button1']); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 3', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + controls: [ + { + name: 'button1', + index: 10, + position: 'right', + html: 'Your Button', + tooltip: 'Your Button', + style: { + color: 'red', + }, + } + ] + }); + + art.on('ready', () => { + setTimeout(() => { + // Delete the control by name + art.controls.remove('button1'); + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 4', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + controls: [ + { + name: 'button1', + index: 10, + position: 'right', + html: 'Subtitle', + selector: [ + { + default: true, + html: 'subtitle 01', + }, + { + html: 'subtitle 02', + }, + ], + } + ] + }); + + art.on('ready', () => { + setTimeout(() => { + // Update the control by name + art.controls.update({ + name: 'button1', + index: 10, + position: 'right', + html: 'New Subtitle', + selector: [ + { + default: true, + html: 'new subtitle 01', + }, + { + html: 'new subtitle 02', + }, + ], + }); + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + }); + + describe('component > layers', function () { + it('Example 1', function (done) { + try { + var img = '/assets/sample/layer.png'; + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + layers: [ + { + name: 'potser', + html: ``, + tooltip: 'Potser Tip', + style: { + position: 'absolute', + top: '50px', + right: '50px', + }, + click: function (...args) { + console.info('click', args); + }, + mounted: function (...args) { + console.info('mounted', args); + }, + }, + ], + }); + + // Get the Element of layer by name + console.info(art.layers['potser']); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 2', function (done) { + try { + var img = '/assets/sample/layer.png'; + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + + art.layers.add({ + name: 'potser', + html: ``, + tooltip: 'Potser Tip', + style: { + position: 'absolute', + top: '50px', + right: '50px', + }, + click: function (...args) { + console.info('click', args); + }, + mounted: function (...args) { + console.info('mounted', args); + }, + }); + + // Get the Element of layer by name + console.info(art.layers['potser']); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 3', function (done) { + try { + var img = '/assets/sample/layer.png'; + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + layers: [ + { + name: 'potser', + html: ``, + style: { + position: 'absolute', + top: '50px', + right: '50px', + }, + }, + ], + }); + + art.on('ready', () => { + setTimeout(() => { + // Delete the layer by name + art.layers.remove('potser'); + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 4', function (done) { + try { + var img = '/assets/sample/layer.png'; + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + layers: [ + { + name: 'potser', + html: ``, + style: { + position: 'absolute', + top: '50px', + right: '50px', + }, + }, + ], + }); + + art.on('ready', () => { + setTimeout(() => { + // Update the layer by name + art.layers.update({ + name: 'potser', + html: ``, + style: { + position: 'absolute', + top: '50px', + left: '50px', + }, + }); + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + }); + + describe('component > setting', function () { + it('Example 1', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + flip: true, + playbackRate: true, + aspectRatio: true, + subtitleOffset: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 2', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + settings: [ + { + html: 'Button', + icon: '', + tooltip: 'tooltip', + onClick(item, $dom, event) { + console.info(item, $dom, event); + return 'new tooltip' + } + }, + ], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 3', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + settings: [ + { + html: 'Subtitle', + width: 250, + tooltip: 'Subtitle 01', + selector: [ + { + default: true, + html: 'Subtitle 01', + url: '/assets/sample/subtitle.srt?id=1', + }, + { + html: 'Subtitle 02', + url: '/assets/sample/subtitle.srt?id=2', + }, + ], + onSelect: function (item, $dom, event) { + console.info(item, $dom, event); + art.subtitle.url = item.url; + return item.html; + }, + }, + { + html: 'Quality', + width: 150, + tooltip: '1080P', + selector: [ + { + default: true, + html: '1080P', + url: '/assets/sample/video.mp4?id=1080', + }, + { + html: '720P', + url: '/assets/sample/video.mp4?id=720', + }, + { + html: '360P', + url: '/assets/sample/video.mp4?id=360', + }, + ], + onSelect: function (item, $dom, event) { + console.info(item, $dom, event); + art.switchQuality(item.url, item.html); + return item.html; + }, + }, + ], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 4', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + settings: [ + { + html: 'Multi-level', + selector: [ + { + html: 'Setting 01', + width: 150, + selector: [ + { + html: 'Setting 01 - 01', + }, + { + html: 'Setting 01 - 02', + }, + ], + onSelect: function (item, $dom, event) { + console.info(item, $dom, event); + return item.html; + }, + }, + { + html: 'Setting 02', + width: 150, + selector: [ + { + html: 'Setting 02 - 01', + }, + { + html: 'Setting 02 - 02', + }, + ], + onSelect: function (item, $dom, event) { + console.info(item, $dom, event); + return item.html; + }, + }, + ], + }, + ], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 5', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + settings: [ + { + html: 'PIP Mode', + tooltip: 'Close', + icon: '', + switch: false, + onSwitch: function (item, $dom, event) { + console.info(item, $dom, event); + const nextState = !item.switch; + art.pip = nextState; + item.tooltip = nextState ? 'Open' : 'Close'; + return nextState; + }, + }, + ], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 6', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + settings: [ + { + html: 'Slider', + tooltip: '5x', + icon: '', + range: [5, 1, 10, 1], + onChange: function (item, $dom, event) { + console.info(item, $dom, event); + return item.range[0] + 'x'; + }, + }, + ], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 7', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + }); + + art.setting.show = true; + + art.setting.add({ + html: 'Slider', + tooltip: '5x', + icon: '', + range: [5, 1, 10, 1], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 8', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + flip: true, + settings: [ + { + name: 'slider', + html: 'Slider', + tooltip: '5x', + icon: '', + range: [5, 1, 10, 1], + }, + ], + }); + + art.setting.show = true; + + art.on('ready', () => { + setTimeout(() => { + // Delete the setting by name + art.setting.remove('slider'); + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 9', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + settings: [ + { + name: 'slider', + html: 'Slider', + tooltip: '5x', + icon: '', + range: [5, 1, 10, 1], + }, + ], + }); + + art.setting.show = true; + + art.on('ready', () => { + setTimeout(() => { + // Update the setting by name + art.setting.update({ + name: 'slider', + html: 'PIP Mode', + tooltip: 'Close', + icon: '', + switch: false, + }); + }, 3000); + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + }); + + describe('start > option', function () { + it('Example 1', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + // container: document.querySelector('.artplayer-app'), + url: '/assets/sample/video.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 2', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 3', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + }); + + setTimeout(() => { + art.url = '/assets/sample/video.mp4'; + }, 1000); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 4', function (done) { + try { + var art = new Artplayer({ + id: 'your-url-id', + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 5', function (done) { + try { + var art = new Artplayer( + { + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + muted: true, + }, + function onReady(art) { + this.play() + }, + ); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 6', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + poster: '/assets/sample/poster.jpg', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 7', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + theme: '#ffad00', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 8', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + volume: 0.5, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 9', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + isLive: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 10', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + muted: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 11', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + autoplay: true, + muted: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 12', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + autoSize: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 13', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + autoMini: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 14', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + loop: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 15', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + flip: true, + setting: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 16', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + playbackRate: true, + setting: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 17', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + aspectRatio: true, + setting: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 18', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + screenshot: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 19', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 20', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + hotkey: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 21', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + pip: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 22', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + mutex: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 23', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + backdrop: false, // Disable frosted glass effect + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 24', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fullscreen: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 25', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fullscreenWeb: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 26', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + subtitleOffset: true, + subtitle: { + url: '/assets/sample/subtitle.srt', + }, + setting: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 27', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + miniProgressBar: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 28', function (done) { + try { + var $container = document.querySelector('.artplayer-app'); + $container.innerHTML = Artplayer.html; + + var art = new Artplayer({ + container: $container, + url: '/assets/sample/video.mp4', + useSSR: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 29', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + playsInline: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 30', function (done) { + try { + var img = '/assets/sample/layer.png'; + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + layers: [ + { + name: 'potser', + html: ``, + style: { + position: 'absolute', + top: '20px', + right: '20px', + opacity: '.9', + }, + click: function (...args) { + console.info('click', args); + art.layers.show = false; + }, + mounted: function (...args) { + console.info('mounted', args); + }, + }, + ], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 31', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + setting: true, + settings: [ + { + html: 'setting01', + selector: [ + { + html: 'setting01-01', + }, + { + html: 'setting01-02', + }, + ], + onSelect: function (...args) { + console.info(args); + }, + }, + { + html: 'setting02', + selector: [ + { + html: 'setting02-01', + }, + { + html: 'setting02-02', + }, + ], + onSelect: function (...args) { + console.info(args); + }, + }, + ], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 32', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + contextmenu: [ + { + html: 'your-menu', + click: function (...args) { + console.info('click', args); + art.contextmenu.show = false; + }, + }, + ], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 33', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + controls: [ + { + position: 'left', + html: 'your-control', + tooltip: 'Your Control', + style: { + color: 'green', + }, + click: function (...args) { + console.info('click', args); + }, + }, + ], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 34', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + quality: [ + { + default: true, + html: 'SD 480P', + url: '/assets/sample/video.mp4', + }, + { + html: 'HD 720P', + url: '/assets/sample/video.mp4', + }, + ], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 35', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + highlight: [ + { + time: 60, + text: 'One more chance', + }, + { + time: 120, + text: '谁でもいいはずなのに', + }, + { + time: 180, + text: '夏の想い出がまわる', + }, + { + time: 240, + text: 'こんなとこにあるはずもないのに', + }, + { + time: 300, + text: '－－终わり－－', + }, + ], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 36', function (done) { + try { + function myPlugin(art) { + console.info(art); + return { + name: 'myPlugin', + something: 'something', + doSomething: function () { + console.info('doSomething'); + }, + }; + } + + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + plugins: [myPlugin], + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 37', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + thumbnails: { + url: '/assets/sample/thumbnails.png', + number: 60, + column: 10, + }, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 38', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + subtitle: { + url: '/assets/sample/subtitle.srt', + type: 'srt', + encoding: 'utf-8', + escape: true, + style: { + color: '#03A9F4', + 'font-size': '30px', + }, + }, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 39', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + moreVideoAttr: { + 'webkit-playsinline': true, + playsInline: true, + }, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 40', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + icons: { + loading: '', + state: '', + }, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 41', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.m3u8', + type: 'm3u8', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 42', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.m3u8', + customType: { + m3u8: function (video, url, art) { + // + }, + }, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 43', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + lang: 'en', + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 44', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + lang: 'your-lang', + i18n: { + 'your-lang': { + Play: 'Your Play' + }, + }, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 45', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + i18n: { + 'zh-cn': { + Play: 'Your Play' + }, + 'zh-tw': { + Play: 'Your Play' + }, + }, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 46', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + lock: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 47', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + gesture: false, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 48', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + fastForward: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 49', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + id: 'your-url-id', + autoPlayback: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 50', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + autoOrientation: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 51', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + airplay: true, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 52', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + cssVar: { + // + }, + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + it('Example 53', function (done) { + try { + var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + proxy: () => document.createElement('video') + }); + // Wait a bit for async initialization + setTimeout(() => done(), 100); + } catch (err) { + done(err); + } + }); + + }); + }); \ No newline at end of file diff --git a/package.json b/package.json index 0b26d07b8..bb6b8f563 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "build:llm": "node ./scripts/build-llm.js", "build:docs": "node ./scripts/build-docs.js", "build:i18n": "node ./scripts/build-i18n.js", + "build:test": "node ./scripts/build-test.js", "trans:docs": "node ./scripts/trans-docs.js", "create:plugin": "node ./scripts/plugin/create.js", "dev": "npx cross-env NODE_ENV=development node ./scripts/dev.js", diff --git a/packages/artplayer-vitepress/docs/en/advanced/built-in.md b/packages/artplayer-vitepress/docs/en/advanced/built-in.md index 8ab6dfbf7..91e7bc5de 100644 --- a/packages/artplayer-vitepress/docs/en/advanced/built-in.md +++ b/packages/artplayer-vitepress/docs/en/advanced/built-in.md @@ -500,4 +500,5 @@ function myPlugin(art) { art.on('ready', () => { art.plugins.add(myPlugin); -}); \ No newline at end of file +}); +``` \ No newline at end of file diff --git a/packages/artplayer-vitepress/docs/en/advanced/class.md b/packages/artplayer-vitepress/docs/en/advanced/class.md index a447a85b0..77d5e3f51 100644 --- a/packages/artplayer-vitepress/docs/en/advanced/class.md +++ b/packages/artplayer-vitepress/docs/en/advanced/class.md @@ -132,4 +132,5 @@ Returns the default options for the player.
▶ Run Code
```js -console.info(Artplayer.option); \ No newline at end of file +console.info(Artplayer.option); +``` \ No newline at end of file diff --git a/packages/artplayer-vitepress/docs/en/advanced/event.md b/packages/artplayer-vitepress/docs/en/advanced/event.md index ad1bd3926..bf52cc523 100644 --- a/packages/artplayer-vitepress/docs/en/advanced/event.md +++ b/packages/artplayer-vitepress/docs/en/advanced/event.md @@ -263,6 +263,8 @@ art.on('error', (error, reconnectTime) => { console.info(error, reconnectTime); }); +``` + ## `hover` Triggered when the mouse enters or leaves the player @@ -521,6 +523,8 @@ art.on('pip', (state) => { console.info('pip', state); }); +``` + ## `screenshot` Triggered when the player captures a screenshot @@ -774,6 +778,8 @@ art.on('setting', (state) => { console.log(state); }); +``` + ## `muted` Triggered when the mute state changes diff --git a/packages/artplayer-vitepress/docs/en/advanced/global.md b/packages/artplayer-vitepress/docs/en/advanced/global.md index 87a0fe60a..d44801738 100644 --- a/packages/artplayer-vitepress/docs/en/advanced/global.md +++ b/packages/artplayer-vitepress/docs/en/advanced/global.md @@ -251,6 +251,8 @@ var art = new Artplayer({ url: '/assets/sample/404.mp4', }); +``` + ## CONTROL_HIDE_TIME The delay time in milliseconds for auto-hiding the bottom control bar. Default is `3000`. @@ -499,6 +501,8 @@ var art = new Artplayer({ art.contextmenu.show = true; art.setting.show = true; +``` + ## FULLSCREEN_WEB_IN_BODY Determines whether to mount the player under the `body` element during web fullscreen mode. Defaults to `true`. @@ -563,4 +567,5 @@ var art = new Artplayer({ }); // Only destroys the UI, does not actively clear src -art.destroy(); \ No newline at end of file +art.destroy(); +``` \ No newline at end of file diff --git a/packages/artplayer-vitepress/docs/en/advanced/plugin.md b/packages/artplayer-vitepress/docs/en/advanced/plugin.md index 566416432..d73326634 100644 --- a/packages/artplayer-vitepress/docs/en/advanced/plugin.md +++ b/packages/artplayer-vitepress/docs/en/advanced/plugin.md @@ -121,4 +121,5 @@ var art = new Artplayer({ url: '/assets/sample/layer.png' }) ], -}); \ No newline at end of file +}); +``` \ No newline at end of file diff --git a/packages/artplayer-vitepress/docs/en/advanced/property.md b/packages/artplayer-vitepress/docs/en/advanced/property.md index bdcbe03c4..29ee47b64 100644 --- a/packages/artplayer-vitepress/docs/en/advanced/property.md +++ b/packages/artplayer-vitepress/docs/en/advanced/property.md @@ -263,6 +263,8 @@ art.on('ready', () => { }, 3000); }); +``` + :::warning Note `art.switch` and `art.switchUrl` have the same functionality, but the `art.switchUrl` method returns a `Promise`. It `resolve`s when the new URL is playable and `reject`s when the new URL fails to load. @@ -1024,6 +1026,8 @@ art.on('ready', () => { }, 3000); }) +``` + ## `thumbnails` - Type: `Setter/Getter` @@ -1068,4 +1072,5 @@ var art = new Artplayer({ art.on('ready', () => { art.subtitleOffset = 1; -}); \ No newline at end of file +}); +``` \ No newline at end of file diff --git a/packages/artplayer-vitepress/docs/en/component/contextmenu.md b/packages/artplayer-vitepress/docs/en/component/contextmenu.md index 2832b2a5d..76d80ac6f 100644 --- a/packages/artplayer-vitepress/docs/en/component/contextmenu.md +++ b/packages/artplayer-vitepress/docs/en/component/contextmenu.md @@ -124,4 +124,5 @@ art.on('ready', () => { html: 'Your New Menu', }) }, 3000); -}); \ No newline at end of file +}); +``` \ No newline at end of file diff --git a/packages/artplayer-vitepress/docs/en/component/controls.md b/packages/artplayer-vitepress/docs/en/component/controls.md index 28594a918..c62903504 100644 --- a/packages/artplayer-vitepress/docs/en/component/controls.md +++ b/packages/artplayer-vitepress/docs/en/component/controls.md @@ -174,4 +174,5 @@ art.on('ready', () => { ], }); }, 3000); -}); \ No newline at end of file +}); +``` \ No newline at end of file diff --git a/packages/artplayer-vitepress/docs/en/component/layers.md b/packages/artplayer-vitepress/docs/en/component/layers.md index 437a293dc..fbeac9aa3 100644 --- a/packages/artplayer-vitepress/docs/en/component/layers.md +++ b/packages/artplayer-vitepress/docs/en/component/layers.md @@ -143,4 +143,5 @@ art.on('ready', () => { }, }); }, 3000); -}); \ No newline at end of file +}); +``` \ No newline at end of file diff --git a/packages/artplayer-vitepress/docs/en/component/setting.md b/packages/artplayer-vitepress/docs/en/component/setting.md index 465f7a2d9..d67bc62b8 100644 --- a/packages/artplayer-vitepress/docs/en/component/setting.md +++ b/packages/artplayer-vitepress/docs/en/component/setting.md @@ -168,6 +168,8 @@ var art = new Artplayer({ ], }); +``` + ## Create - Toggle Button | Property | Type | Description | @@ -329,4 +331,5 @@ art.on('ready', () => { switch: false, }); }, 3000); -}); \ No newline at end of file +}); +``` \ No newline at end of file diff --git a/packages/artplayer-vitepress/docs/en/start/i18n.md b/packages/artplayer-vitepress/docs/en/start/i18n.md index e417288bb..5216eb02d 100644 --- a/packages/artplayer-vitepress/docs/en/start/i18n.md +++ b/packages/artplayer-vitepress/docs/en/start/i18n.md @@ -98,4 +98,5 @@ var art = new Artplayer({ Play: 'Your Play' }, }, -}); \ No newline at end of file +}); +``` \ No newline at end of file diff --git a/packages/artplayer-vitepress/docs/en/start/option.md b/packages/artplayer-vitepress/docs/en/start/option.md index 35cff16af..bb20aa355 100644 --- a/packages/artplayer-vitepress/docs/en/start/option.md +++ b/packages/artplayer-vitepress/docs/en/start/option.md @@ -268,6 +268,8 @@ var art = new Artplayer({ autoSize: true, }); +``` + ## `autoMini` - Type: `Boolean` @@ -532,6 +534,8 @@ var art = new Artplayer({ setting: true, }); +``` + ## `miniProgressBar` - Type: `Boolean` @@ -742,6 +746,8 @@ var art = new Artplayer({ ], }); +``` + :::warning For `Component Configuration`, please refer to: [/component/controls.html](/component/controls.html) @@ -943,6 +949,8 @@ var art = new Artplayer({ }, }); +``` + ## `icons` - Type: `Object` @@ -1243,4 +1251,5 @@ var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', proxy: () => document.createElement('video') -}); \ No newline at end of file +}); +``` \ No newline at end of file diff --git a/scripts/build-test.js b/scripts/build-test.js new file mode 100644 index 000000000..5611a5eeb --- /dev/null +++ b/scripts/build-test.js @@ -0,0 +1,132 @@ +import fs from 'node:fs' +import path from 'node:path' + +const docsDir = path.resolve('packages/artplayer-vitepress/docs/en') +const outputFile = path.resolve('docs/test/test.js') + +// Regex to match code blocks after "Run Code" markers +// Match until we find a closing ``` that's on its own line +const runCodePattern = /
.*?<\/div>\s*\n\s*```js[^\n]*\n([\s\S]*?)\n```(?=\s*\n|$)/g + +function extractCodeBlocks(content, filePath) { + const blocks = [] + let match + + while ((match = runCodePattern.exec(content)) !== null) { + let code = match[1].trim() + + // Skip if code contains markdown syntax (unclosed code block issue) + if (code.includes('\n## ') || code.includes('\n:::') || code.includes('
')) { + console.warn(`⚠️ Skipping malformed code block in ${filePath}`) + continue + } + + blocks.push({ + code, + file: filePath, + }) + } + + return blocks +} + +function processMarkdownFiles(dir, relativePath = '') { + const results = [] + const items = fs.readdirSync(dir) + + for (const item of items) { + const fullPath = path.join(dir, item) + const relPath = path.join(relativePath, item) + const stat = fs.statSync(fullPath) + + if (stat.isDirectory()) { + results.push(...processMarkdownFiles(fullPath, relPath)) + } + else if (item.endsWith('.md')) { + const content = fs.readFileSync(fullPath, 'utf-8') + const blocks = extractCodeBlocks(content, relPath) + if (blocks.length > 0) { + results.push({ + file: relPath, + blocks, + }) + } + } + } + + return results +} + +function generateTestCode(fileResults) { + const lines = [] + + lines.push(`// Auto-generated smoke tests from documentation code blocks`) + lines.push(`// Generated at: ${new Date().toISOString()}`) + lines.push(`// Do not edit manually - run 'node scripts/build-test.js' to regenerate`) + lines.push(``) + lines.push(`describe('Documentation Code Examples', function () {`) + lines.push(` this.timeout(5000);`) + lines.push(``) + lines.push(` beforeEach(function () {`) + lines.push(` // Destroy any existing instances`) + lines.push(` [...Artplayer.instances].forEach((art) => art.destroy());`) + lines.push(` // Reset container`) + lines.push(` const container = document.querySelector('.artplayer-app');`) + lines.push(` if (container) {`) + lines.push(` container.innerHTML = '';`) + lines.push(` }`) + lines.push(` });`) + lines.push(``) + lines.push(` afterEach(function () {`) + lines.push(` [...Artplayer.instances].forEach((art) => art.destroy());`) + lines.push(` });`) + lines.push(``) + + for (const { file, blocks } of fileResults) { + const suiteName = file.replace(/\.md$/, '').replace(/\//g, ' > ') + + lines.push(` describe('${suiteName}', function () {`) + + blocks.forEach((block, index) => { + const testName = `Example ${index + 1}` + // Escape the code for embedding in a string + const escapedCode = block.code + .replace(/\\/g, '\\\\') + .replace(/`/g, '\\`') + .replace(/\$/g, '\\$') + + lines.push(` it('${testName}', function (done) {`) + lines.push(` try {`) + lines.push(` ${block.code.split('\n').join('\n ')}`) + lines.push(` // Wait a bit for async initialization`) + lines.push(` setTimeout(() => done(), 100);`) + lines.push(` } catch (err) {`) + lines.push(` done(err);`) + lines.push(` }`) + lines.push(` });`) + lines.push(``) + }) + + lines.push(` });`) + lines.push(``) + } + + lines.push(`});`) + + return lines.join('\n') +} + +// Main execution +const fileResults = processMarkdownFiles(docsDir) + +let totalBlocks = 0 +for (const { file, blocks } of fileResults) { + console.log(`📄 ${file}: ${blocks.length} code blocks`) + totalBlocks += blocks.length +} + +const testCode = generateTestCode(fileResults) +fs.writeFileSync(outputFile, testCode) + +console.log(`\n✅ Generated ${totalBlocks} test cases from ${fileResults.length} files`) +console.log(`📝 Output: ${outputFile}`) diff --git a/scripts/fix-docs.js b/scripts/fix-docs.js new file mode 100644 index 000000000..1a5b61662 --- /dev/null +++ b/scripts/fix-docs.js @@ -0,0 +1,73 @@ +import fs from 'node:fs' +import path from 'node:path' +import { glob } from 'glob' + +const docsDir = path.resolve('packages/artplayer-vitepress/docs') + +function fixMarkdownFile(filePath) { + const content = fs.readFileSync(filePath, 'utf-8') + const lines = content.split('\n') + const fixedLines = [] + let inCodeBlock = false + let fixes = 0 + + for (let i = 0; i < lines.length; i++) { + const line = lines[i] + + // Check if entering a code block + if (line.startsWith('```') && !inCodeBlock) { + inCodeBlock = true + fixedLines.push(line) + continue + } + + // Check if properly exiting a code block + if (line.startsWith('```') && inCodeBlock) { + inCodeBlock = false + fixedLines.push(line) + continue + } + + // Check if we hit a heading while still in a code block (missing ```) + if (inCodeBlock && line.startsWith('## ')) { + // Add the missing closing ``` + fixedLines.push('```') + fixedLines.push('') + inCodeBlock = false + fixes++ + } + + // Check if we hit ::: (admonition) while still in a code block + if (inCodeBlock && line.startsWith(':::')) { + fixedLines.push('```') + fixedLines.push('') + inCodeBlock = false + fixes++ + } + + fixedLines.push(line) + } + + // If file ended while still in code block + if (inCodeBlock) { + fixedLines.push('```') + fixes++ + } + + if (fixes > 0) { + fs.writeFileSync(filePath, fixedLines.join('\n')) + console.log(`✅ Fixed ${fixes} code blocks in ${path.relative(docsDir, filePath)}`) + } + + return fixes +} + +// Find all markdown files +const files = glob.sync('**/*.md', { cwd: docsDir, absolute: true }) + +let totalFixes = 0 +for (const file of files) { + totalFixes += fixMarkdownFile(file) +} + +console.log(`\n✨ Total: Fixed ${totalFixes} code blocks in ${files.length} files`)