update docs

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;
-}
+}

docs/index.html

@@ -12,16 +12,15 @@
     <link rel="stylesheet" href="./css/normalize.css">
     <link rel="stylesheet" href="./css/common.css">
     <link rel="stylesheet" href="./plugins/codemirror.css">
-    <link rel="stylesheet" href="./css/artplayer.css">
+    <link rel="stylesheet" href="./plugins/consola.css">
+    <link rel="stylesheet" href="./css/artplayer.css">    
 </head>
 
 <body>
     <div class="container">
         <div class="part-left">
             <div class="controls">
-                <div class="menus">
-                    ArtPlay.js
-                </div>
+                <div class="logo">ArtPlayer.js</div>
                 <input class="run" type="button" value="Run Code">
             </div>
             <div class="code"></div>
@@ -30,15 +29,17 @@
             <div class="video-wrap">
                 <div class="artplayer-app"></div>
             </div>
-            <div class="console">
-                <textarea class="textarea" disabled></textarea>
-            </div>
+            <div class="console"></div>
         </div>
     </div>
+    <script src="./plugins/consola.js"></script>
     <script src="./plugins/codemirror.js"></script>
     <script src="./plugins/javascript.js"></script>
     <script src="./js/artplayer.js"></script>
-    <script src="./js/index.js"></script>
+    <script src="./js/common.js"></script>
+    <script>
+        loadCode('./js/index.js');
+    </script>
 </body>
 
 </html>

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);

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();

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:noneLine truncated

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;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},r=c(n(1));n(2);var i=c(n(4));function c(e){return e&&e.__esModule?e:{default:e}}var l={},u={target:"body",position:"bottom",size:"300px",zIndex:99},a=["log","warn","error","info","debug"],s=void 0,f=void 0,d=void 0;l.creat=function(){var e=arguments.length>0&&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",'<div class="consola-container '+e.position+'" style="z-index: '+e.zIndex+"; "+("bottom"===e.position?"height":"width")+": "+e.size+'">\n      <div class="consola-tools">\n        <div class="consola-count">Console <span>0</span></div>\n        <div class="consola-clean">Clean</div>\n      </div>\n      <div class="consola-wrap"></div>\n    </div>'),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",'<div data-method="'+e+'" class="method method-'+e+'">\n        <div class="method-icon"></div>\n        <div class="method-text">'+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)+"</div>\n      </div>"),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;o<t;o+=1)n.push(e[o]);return n}e.exports={select:function(e){return document.querySelector(e)},selectAll:function(e){return o((arguments.length>1&&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]})}}}])});