diff --git a/docs/css/common.css b/docs/css/common.css index 6688fce9e..87968464d 100644 --- a/docs/css/common.css +++ b/docs/css/common.css @@ -10,7 +10,7 @@ html, body { .part-left { display: flex; flex-direction: column; - width: 700px; + width: 50%; border-right: 1px solid #ddd; } @@ -31,7 +31,7 @@ html, body { box-sizing: border-box; } -.part-left .controls .menus { +.part-left .controls .logo { height: 30px; line-height: 30px; flex: 1; @@ -65,24 +65,11 @@ html, body { } .part-right .video-wrap .artplayer-app { - width: 800px; - height: 450px; + width: 90%; + height: 65%; } .part-right .console { + position: relative; height: 30%; -} - -.part-right .console textarea { - color: rgba(0, 0, 0, 0.8); - font-size: 14px; - line-height: 1.5; - height: 100%; - width: 100%; - padding: 10px 20px; - overflow-y: scroll; - border: none; - outline: none; - resize: none; - box-sizing: border-box; -} +} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 76a984d30..afba15677 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,16 +12,15 @@ - + +
-
- ArtPlay.js -
+
@@ -30,15 +29,17 @@
-
- -
+
+ - + + \ No newline at end of file diff --git a/docs/js/common.js b/docs/js/common.js new file mode 100644 index 000000000..dfc2461d3 --- /dev/null +++ b/docs/js/common.js @@ -0,0 +1,63 @@ +(function (win) { + var $code = document.querySelector('.code'); + var $run = document.querySelector('.run'); + + consola.creat({ + target: '.console', + size: '100%', + zIndex: 99 + }); + + var mirror = CodeMirror($code, { + lineNumbers: true, + mode: 'javascript', + matchBrackets: true, + value: '' + });; + + function initApp(app) { + consola.clean(); + Artplayer.config.video.events.forEach(item => { + app.on('video:' + item, event => { + console.log('video: ' + event.type); + }); + }); + } + + function loadCode(url) { + return fetch(url) + .then(response => { + return response.text(); + }) + .then(text => { + mirror.setValue(text.trim()); + runCode(); + return text; + }) + .catch(err => { + console.error(err.message); + }); + } + + function runCode() { + try { + Artplayer.instances.forEach(ins => { + ins.destroy(true) + });; + eval(mirror.getValue()); + initApp(Artplayer.instances[0]); + } catch (error) { + console.error('Error：' + error.message.trim()); + } + } + + $run.addEventListener('click', function (e) { + runCode(); + }); + + win.addEventListener('error', err => { + console.error(err.message); + }); + + win.loadCode = loadCode; +})(window); diff --git a/docs/js/index.js b/docs/js/index.js index 5e270241a..c530f3ed9 100644 --- a/docs/js/index.js +++ b/docs/js/index.js @@ -1,106 +1,53 @@ -var $code = document.querySelector('.code'); -var $run = document.querySelector('.run'); -var $textarea = document.querySelector('.textarea'); - -var mirror = CodeMirror($code, { - lineNumbers: true, - mode: 'javascript', - matchBrackets: true, - value: '' -});; - -function setCode(value) { - mirror.setValue(value.trim()); -} - -function log(msg) { - msg = typeof msg === 'string' ? msg : JSON.stringify(msg); - $textarea.value = $textarea.value + '\n' + msg; - $textarea.scrollTop = $textarea.scrollHeight; -} - -function initApp(app) { - Artplayer.config.video.events.forEach(item => { - app.on('video:' + item, event => { - log('video: ' + event.type); - }); - }); -} - -window.addEventListener('error', e => { - log(e.message); -}); - -function runCode() { - try { - Artplayer.instances.forEach(ins => { - ins.destroy(true) - });; - eval(mirror.getValue()); - initApp(Artplayer.instances[0]); - } catch (error) { - var msg = error.message.trim(); - log('Error：' + msg); - } -} - -$run.addEventListener('click', function (e) { - runCode(); -}); - -setCode(` var url = 'https://blog.zhw-island.com/assets-cdn'; var app = new Artplayer({ - container: '.artplayer-app', - url: url + '/video/one-more-time-one-more-chance-480p.mp4', - poster: url + '/image/one-more-time-one-more-chance-poster.jpg', - pip: true, - theme: '#ffad00', - quality: [ - { - default: true, - name: '标清 480P', - url: url + '/video/one-more-time-one-more-chance-480p.mp4' - }, - { - name: '高清 720P', - url: url + '/video/one-more-time-one-more-chance-720p.mp4' - } - ], - thumbnails: { - url: url + '/image/one-more-time-one-more-chance-thumbnails.png', - width: 190, - height: 107 + container: '.artplayer-app', + url: url + '/video/one-more-time-one-more-chance-480p.mp4', + title: '【新海诚动画】『秒速5センチメートル』', + poster: url + '/image/one-more-time-one-more-chance-poster.jpg', + pip: true, + theme: '#ffad00', + quality: [ + { + default: true, + name: '标清 480P', + url: url + '/video/one-more-time-one-more-chance-480p.mp4' }, - subtitle: { - url: url + '/subtitle/one-more-time-one-more-chance.srt', - style: { - color: '#03A9F4' - } + { + name: '高清 720P', + url: url + '/video/one-more-time-one-more-chance-720p.mp4' + } + ], + thumbnails: { + url: url + '/image/one-more-time-one-more-chance-thumbnails.png', + width: 190, + height: 107 + }, + subtitle: { + url: url + '/subtitle/one-more-time-one-more-chance.srt', + style: { + color: '#03A9F4' + } + }, + highlight: [ + { + time: 60, + text: 'One more chance' }, - highlight: [ - { - time: 60, - text: 'One more chance' - }, - { - time: 120, - text: '谁でもいいはずなのに' - }, - { - time: 180, - text: '夏の想い出がまわる' - }, - { - time: 240, - text: 'こんなとこにあるはずもないのに' - }, - { - time: 300, - text: '－－终わり－－' - } - ] + { + time: 120, + text: '谁でもいいはずなのに' + }, + { + time: 180, + text: '夏の想い出がまわる' + }, + { + time: 240, + text: 'こんなとこにあるはずもないのに' + }, + { + time: 300, + text: '－－终わり－－' + } + ] }); -`); - -runCode(); \ No newline at end of file diff --git a/docs/plugins/consola.css b/docs/plugins/consola.css new file mode 100644 index 000000000..b6bcaa2a0 --- /dev/null +++ b/docs/plugins/consola.css @@ -0,0 +1 @@ +.consola-container{opacity:.9;display:flex;flex-direction:column;position:absolute;background-color:#242424}.consola-container.right{top:0;right:0;bottom:0;height:100%;width:0}.consola-container.bottom{left:0;right:0;bottom:0;width:100%;height:0}.consola-container .consola-tools{left:0;right:0;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;flex-direction:row;height:30px;padding:0 10px;color:hsla(0,0%,100%,.8);background-color:#141618;border-bottom:1px solid rgba(0,0,0,.3);font-size:12px;box-sizing:border-box}.consola-container .consola-tools .consola-clean{cursor:pointer}.consola-container .consola-wrap{flex:1;position:relative;z-index:1;overflow-y:auto;word-break:break-word;box-sizing:border-box}.consola-container .consola-wrap .method.method-log{position:relative;display:flex;color:hsla(0,0%,100%,.9);background-color:transparent;border-top:1px solid hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.05);margin-top:-1px;margin-bottom:0;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-log .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABpSURBVChTY6A92LNnj96uXbvKoVzsYMeOHVbbt29/D1T4eP/+/QJQYVSwe/duD6CCr0B8A8iWgwqjAqBk2NatW38B6bPbtm0TBYkBFbsA+c9ANFgRCBCtEASAAoSthgGiPAMD2IOHgQEA521bM7uG52wAAAAASUVORK5CYII=)}.consola-container .consola-wrap .method.method-info{position:relative;display:flex;color:hsla(0,0%,100%,.9);background-color:transparent;border-top:1px solid hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.05);margin-top:-1px;margin-bottom:0;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-info .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADISURBVChTY4ABp/AztmZBZ07qe538rO114rOa8+GTskYHbKHSEOARd6nLIOTsf61gIA46U6kVePYQiK3uc/K/hPG+LrCi8IyrtkZh5yCKgk/80w46ba0RdGYGhH/2v6rXyf88qtttGVwSLp2ECQLxeiAu1wo6uwpJ7L+o2f6TDA6xZz8jCyqFnuHXCj4djywmZXHoM/EK0azGqhBsNYpngL6VCTnGqRF4xgKo+D5IDO4ZEEAKnjcQBafvqwWf/YoSPDCAP8AZGAC7mLM81zgOTQAAAABJRU5ErkJggg==)}.consola-container .consola-wrap .method.method-warn{position:relative;display:flex;color:#ffdc9e;background-color:#332b00;border-top:1px solid #650;border-bottom:1px solid #650;margin-top:-1px;margin-bottom:1px;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-warn .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACkSURBVChTbY7BCoJQFERn0Q/3BX1JuxQjsSCXiV8gtCgxhCIrKIRIqKDVzXl5w5cNHBjm6eGinXiAXu5inY2xYm/mbpIh+vcFhLA3sx0athNUhymEsP+10lAEEA17x8o/9wFuNGnYuVlWve0SQl7P0sBu3aq2R1Q/1JzSkYGd29eqNv2wjdnUuvNRciC/N+qe+7gidbA8zyHkOINsvA/sumcOkjcabcBmw2+mMgAAAABJRU5ErkJggg==)}.consola-container .consola-wrap .method.method-error{position:relative;display:flex;color:#ff8080;background-color:#290000;border-top:1px solid #5b0000;border-bottom:1px solid #5b0000;margin-top:-1px;margin-bottom:1px;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-error .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADESURBVChTY4CB7ZI8tmfU5E6e01b+DMIgNkgMKg0BR9Vkux6YWPx/bemIgkFiIDmwogOaqrYPzazAEm8DwuGKYGyQHEgNw0VT05Mwib9v3v7/kJEHxiA2TDFIDcNNU4vPMFPACj58/P/v40cwGyYOUsNwy8IZRSFIEUgxskKQGoZrzp4ErQapYbgYHG371M4dLACTQGaD5EBqwD6/FpzQ9dTBE64IhkFiIDmwIhi4mlJqey8o4eR9r8jPIAxig8QgsgwMAFZz1YtGPXgjAAAAAElFTkSuQmCC)}.consola-container .consola-wrap .method.method-debug{position:relative;display:flex;color:#4d88ff;background-color:transparent;border-top:1px solid hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.05);margin-top:-1px;margin-bottom:0;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-debug .method-icon{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 459 459'%3e%3cpath fill='%234D88FF' d='M433.5 127.5h-71.4a177.7 177.7 0 0 0-45.9-51L357 35.7 321.3 0l-56.1 56.1c-10.2-2.6-23-5.1-35.7-5.1s-25.5 2.5-35.7 5.1L137.7 0 102 35.7l40.8 40.8a177.7 177.7 0 0 0-45.9 51H25.5v51H79c-2.5 7.7-2.5 17.9-2.5 25.5v25.5h-51v51h51V306a88 88 0 0 0 2.5 25.5H25.5v51h71.4A152.2 152.2 0 0 0 229.5 459c56.1 0 107.1-30.6 132.6-76.5h71.4v-51H380c2.5-7.7 2.5-17.9 2.5-25.5v-25.5h51v-51h-51V204c0-7.7 0-17.9-2.5-25.5h53.5v-51zm-153 204h-102v-51h102v51zm0-102h-102v-51h102v51z'/%3e%3c/svg%3e")}.consola-container .consola-wrap .method *{vertical-align:top;box-sizing:border-box;font-family:Consolas,Lucida Console,Courier New,monospace;white-space:pre-wrap;font-size:12px}.consola-container .consola-wrap .method .method-icon{width:10px;height:18px;background-image:none;background-repeat:no-repeat;background-position:50% 50%}.consola-container .consola-wrap .method .method-text{clear:right;position:relative;padding:3px 22px 2px 0;margin-left:15px;min-height:18px;flex:auto;width:calc(100% - 15px)} diff --git a/docs/plugins/consola.js b/docs/plugins/consola.js new file mode 100644 index 000000000..7fa05c34c --- /dev/null +++ b/docs/plugins/consola.js @@ -0,0 +1 @@ +!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(window,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";var o=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:{};if(e=o({},u,e),!document.querySelector(".consola-container"))return s=document.querySelector(e.target),i.default.insertHtml(s,"beforeend",'
\n
\n
Console 0
\n
Clean
\n
\n
\n
'),f=s.querySelector(".consola-wrap"),d=s.querySelector(".consola-count span"),s.querySelector(".consola-clean").addEventListener("click",l.clean),function(e,t,n){var o=function(t){var o=e[t];e[t]=function(){o.apply(this,arguments),n(t,[].concat(Array.prototype.slice.call(arguments)))}},r=!0,i=!1,c=void 0;try{for(var l,u=t[Symbol.iterator]();!(r=(l=u.next()).done);r=!0){o(l.value)}}catch(e){i=!0,c=e}finally{try{!r&&u.return&&u.return()}finally{if(i)throw c}}}(window.console,a,function(e,t){i.default.insertHtml(f,"beforeend",'
\n
\n
'+function(e){var t=document.createElement("div");e=e.map(function(e){return(0,r.default)(e)}),t.textContent=e;var n=t.innerHTML;return t=null,n}(t)+"
\n
"),d.innerHTML=f.children.length,f.scrollTo(0,f.scrollHeight)}),l},l.clean=function(){return f.innerHTML="",d.innerHTML="0",l},window.consola=l,e.exports=l},function(e,t){e.exports=function e(t){switch(typeof t){case"undefined":return"undefined";case"object":let n=Object.prototype.toString.call(t).slice(8,-1).toLowerCase();switch(n){case"null":return"null";case"array":return"["+t.map(t=>e(t)).join(", ")+"]";case"object":return"{ "+Object.keys(t).map(n=>n+": "+e(t[n])).join(", ")+" }";default:try{return t.toString()}catch(e){return"[Unknown type: "+n+"]"}}default:return t.toString()}}},function(e,t,n){},,function(e,t,n){"use strict";function o(e){for(var t=e.length,n=[],o=0;o1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll(e))},find:function(e,t){return o(e.querySelectorAll(t))},removeClass:function(e,t){e.classList.remove(t)},addClass:function(e,t){e.classList.add(t)},hasClass:function(e,t){return e.classList.contains(t)},removeElement:function(e){e&&e.parentNode&&e.parentNode.removeChild(e)},closest:function(e,t){for(var n=e.matches||e.webkitMatchesSelector||e.mozMatchesSelector||e.msMatchesSelector;e&&!n.call(e,t);)e=e.parentElement;return e},getStyle:function(e,t,n){var o=window.getComputedStyle(e,null).getPropertyValue(t);return n?Number.parseFloat(o,10):o},blur:function(){document.activeElement&&document.activeElement.blur()},insertHtml:function(e,t,n){var o=["beforebegin","afterbegin","beforeend","afterend"];if(!o.includes(t))throw new TypeError("'position' must be one of them: "+o.join("、"));e.insertAdjacentHTML(t,n)},setAttributes:function(e,t){Object.keys(t).forEach(function(n){!1!==t[n]?e.setAttribute(n,t[n]):e.removeAttribute(n)})},setStyles:function(e,t){Object.keys(t).forEach(function(n){e.style[n]=t[n]})}}}])}); \ No newline at end of file